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() {