From 76570abffa81b9ed38fc9b0fc4a0925177b9fdf3 Mon Sep 17 00:00:00 2001
From: Michael Spencer <sonrisesoftware@gmail.com>
Date: Thu, 29 May 2014 17:55:48 -0500
Subject: [PATCH] Add chapter title and page number info to the book page

---
 html/index.html | 26 +++++++++++++++++++++++++-
 ui/BookPage.qml | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/html/index.html b/html/index.html
index 11d451c..2e8a509 100644
--- a/html/index.html
+++ b/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
+                                            });
     });
 }
 
diff --git a/ui/BookPage.qml b/ui/BookPage.qml
index 6818cab..b3ed30b 100644
--- a/ui/BookPage.qml
+++ b/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() {