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