diff --git a/TODO.otl b/TODO.otl index ae8e6ca..3c7d73a 100755 --- a/TODO.otl +++ b/TODO.otl @@ -1,12 +1,12 @@ -[_] 34% Priority work +[_] 33% Priority work [_] 0% TouchSwipe issues... [_] BUG: swipe-back does not cancel a swipe... (TouchSwipe) | ...unless the finger is return to within the threshold of the | touchdown point. [_] BUG: no drag threshold on excludedElements (TouchSwipe) | stalled... - [_] 79% general todo - BUG: initial load on android does not center on the correct page... + [_] 76% general todo + [_] BUG: initial load on android does not center on the correct page... [_] magazine loader and data format... | this is simple, just use a restyled magazine viewer... [_] 0% populate an example issue @@ -21,6 +21,7 @@ | something like a page reset that will restore the default state, | rather than the current "hideLayers" [_] make corners clickable for bookmarking... + [X] add page numbers... [X] SVG icons and logo... [X] 100% bookmarks [X] add next/prev bookmark actions diff --git a/index.html b/index.html index 0d5fb72..0611d95 100755 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ -Magazine +PortableMag @@ -41,6 +41,7 @@ $(document).ready(function(){ $('.viewer') // setup internal events... .on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState) + .on('pageChanged', updatePageNumberIndicator) .on('bookmarksCleared', clearBookmarkIndicators) .on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)}) .on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)}) @@ -195,6 +196,7 @@ $(document).ready(function(){
+
0/0
diff --git a/magazine.css b/magazine.css index edafe16..0a4ecc4 100755 --- a/magazine.css +++ b/magazine.css @@ -254,10 +254,21 @@ body { font-size: 14px; color: silver; } +.top-toolbar { + top: 0px; + width: 100%; +} + +.bottom-toolbar { + bottom: 0px; + width: 100%; +} +/* title */ .top-toolbar .title, .bottom-toolbar .title { font-size: 40px; } +/* toolbar element sets */ .top-toolbar .left-set, .bottom-toolbar .left-set { float: left; @@ -268,22 +279,16 @@ body { float: right; text-align: right; } +/* toolbar links */ .top-toolbar a, .bottom-toolbar a { color: silver; text-decoration: none; } +/* toolbar controls */ .top-toolbar .controls, .bottom-toolbar .controls { margin-top: 10px; } -.top-toolbar { - top: 0px; - width: 100%; -} - -.bottom-toolbar { - bottom: 0px; - width: 100%; -} +/* toolbar buttons */ .button { display: inline-block; font-size: 25px; @@ -298,11 +303,20 @@ body { margin-left: 20px; margin-right: 20px; } +/* page view mode */ .page-view-mode .top-toolbar, .page-view-mode .bottom-toolbar { height: 0px; } +/* page indicator */ +.bottom-toolbar .page-number { + position: absolute; + right: 10px; + top: 10px; + color: gray; +} + /* navigator... */ diff --git a/magazine.js b/magazine.js index 6cfa8d1..ee8f966 100755 --- a/magazine.js +++ b/magazine.js @@ -774,6 +774,12 @@ function removeBookmarkIndicator(n){ } +// NOTE: this is 1 based page number, the rest of the system is 0 based. +function updatePageNumberIndicator(){ + $('.page-number').text((getPageNumber()+1)+'/'+$('.page').length) +} + + /********************************************************** editor ***/