Add chapter title and page number info to the book page

html/index.html

@@ -54,9 +54,33 @@
     });
     reader.listen("monocle:pagechange", function(event) {
         var place = reader.getPlace();
+
+        // Following code taken from Monacle to estimate overall pages
+
+        var book = place.properties.component.properties.book;
+        var componentIds = book.properties.componentIds;
+        var weights = book.componentWeights();
+        var cmptIndex = place.properties.component.properties.index;
+        var pc = weights[cmptIndex] * place.properties.percent;
+        for (var i = 0, ii = cmptIndex; i < ii; ++i) { pc += weights[i]; }
+
+        // Note: This is a decent estimation of current page number and total
+        // number of pages, but it's very approximate. Could be improved by storing
+        // the page counts of all components accessed (since the dimensions of the
+        // reader last changed), and averaging the result across them. (You
+        // probably want to ignore calcs for components < 2 or 3 pages long, too.
+        // The bigger the component, the more accurate the calculation.)
+        //
+        var bkPages = place.properties.component.lastPageNumber() / weights[cmptIndex];
+
         Messaging.sendMessage("PageChange", { chapterSrc: place.chapterSrc(),
                                               componentId: place.componentId(),
-                                              percent: place.percentageThrough() });
+                                              percent: place.percentageThrough(),
+                                              title: place.chapterTitle(),
+                                              page: Math.floor(pc * bkPages),
+                                              pages: Math.floor(bkPages),
+                                              totalPercentage: pc
+                                            });
     });
 }
 

ui/BookPage.qml

@@ -27,6 +27,11 @@ Page {
     property var history: new History.History(updateNavButtons)
     property bool navjump: false
 
+    property string chapterTitle
+    property int pageNumber
+    property int pageCount
+    property real totalPercent
+
     focus: true
     Keys.onPressed: {
         if (event.key == Qt.Key_Right || event.key == Qt.Key_Down || event.key == Qt.Key_Space
@@ -52,10 +57,38 @@ Page {
     ListModel {
         id: contentsListModel
     }
+
+    Label {
+        id: header
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: units.gu(2)
+        }
+        text: chapterTitle
+        fontSize: "large"
+    }
+
+    Label {
+        id: footer
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            margins: units.gu(2)
+        }
+
+        text: i18n.tr("Page %1 of %2").arg(pageNumber).arg(pageCount)
+    }
 
     WebView {
         id: bookWebView
-        anchors.fill: parent
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.bottom
+            bottom: footer.top
+        }
+
         visible: false
         focus: false
 
@@ -505,6 +538,11 @@ Page {
         currentChapter = location.chapterSrc
         setBookSetting("locus", { componentId: location.componentId,
                                   percent: location.percent })
+
+        chapterTitle = location.title
+        pageNumber = location.page
+        pageCount = location.pages
+        totalPercent = location.totalPercentage
     }
 
     function onReady() {