flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-12-23 20:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

added page number indicator to the toolbar...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-30 01:00:58 +04:00
parent 6dd41d7a1f
commit e054c42381
4 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
TODO.otl
View File

@ -1,12 +1,12 @@
[_] 34% Priority work [_] 33% Priority work
[_] 0% TouchSwipe issues... [_] 0% TouchSwipe issues...
[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe) [_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
| ...unless the finger is return to within the threshold of the | ...unless the finger is return to within the threshold of the
| touchdown point. | touchdown point.
[_] BUG: no drag threshold on excludedElements (TouchSwipe) [_] BUG: no drag threshold on excludedElements (TouchSwipe)
| stalled... | stalled...
[_] 79% general todo [_] 76% general todo
BUG: initial load on android does not center on the correct page... [_] BUG: initial load on android does not center on the correct page...
[_] magazine loader and data format... [_] magazine loader and data format...
| this is simple, just use a restyled magazine viewer... | this is simple, just use a restyled magazine viewer...
[_] 0% populate an example issue [_] 0% populate an example issue
@ -21,6 +21,7 @@
| something like a page reset that will restore the default state, | something like a page reset that will restore the default state,
| rather than the current "hideLayers" | rather than the current "hideLayers"
[_] make corners clickable for bookmarking... [_] make corners clickable for bookmarking...
[X] add page numbers...
[X] SVG icons and logo... [X] SVG icons and logo...
[X] 100% bookmarks [X] 100% bookmarks
[X] add next/prev bookmark actions [X] add next/prev bookmark actions

4
index.html
View File

@ -2,7 +2,7 @@
<!--DOCTYPE html--> <!--DOCTYPE html-->
<html> <html>
<head> <head>
<title>Magazine</title> <title>PortableMag</title>
<link rel="stylesheet" href="magazine.css"> <link rel="stylesheet" href="magazine.css">
<link rel="stylesheet" href="magazine-custom.css"> <link rel="stylesheet" href="magazine-custom.css">
@ -41,6 +41,7 @@ $(document).ready(function(){
$('.viewer') $('.viewer')
// setup internal events... // setup internal events...
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState) .on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
.on('pageChanged', updatePageNumberIndicator)
.on('bookmarksCleared', clearBookmarkIndicators) .on('bookmarksCleared', clearBookmarkIndicators)
.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)}) .on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)}) .on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
@ -195,6 +196,7 @@ $(document).ready(function(){
<div class="indicator"></div> <div class="indicator"></div>
</div> </div>
</div> </div>
<div class="page-number">0/0</div>
</div> </div>
<div class="scaler"> <div class="scaler">

32
magazine.css
View File

@ -254,10 +254,21 @@ body {
font-size: 14px; font-size: 14px;
color: silver; color: silver;
} }
.top-toolbar {
top: 0px;
width: 100%;
}
.bottom-toolbar {
bottom: 0px;
width: 100%;
}
/* title */
.top-toolbar .title, .top-toolbar .title,
.bottom-toolbar .title { .bottom-toolbar .title {
font-size: 40px; font-size: 40px;
} }
/* toolbar element sets */
.top-toolbar .left-set, .top-toolbar .left-set,
.bottom-toolbar .left-set { .bottom-toolbar .left-set {
float: left; float: left;
@ -268,22 +279,16 @@ body {
float: right; float: right;
text-align: right; text-align: right;
} }
/* toolbar links */
.top-toolbar a, .bottom-toolbar a { .top-toolbar a, .bottom-toolbar a {
color: silver; color: silver;
text-decoration: none; text-decoration: none;
} }
/* toolbar controls */
.top-toolbar .controls, .bottom-toolbar .controls { .top-toolbar .controls, .bottom-toolbar .controls {
margin-top: 10px; margin-top: 10px;
} }
.top-toolbar { /* toolbar buttons */
top: 0px;
width: 100%;
}
.bottom-toolbar {
bottom: 0px;
width: 100%;
}
.button { .button {
display: inline-block; display: inline-block;
font-size: 25px; font-size: 25px;
@ -298,11 +303,20 @@ body {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
/* page view mode */
.page-view-mode .top-toolbar, .page-view-mode .top-toolbar,
.page-view-mode .bottom-toolbar { .page-view-mode .bottom-toolbar {
height: 0px; height: 0px;
} }
/* page indicator */
.bottom-toolbar .page-number {
position: absolute;
right: 10px;
top: 10px;
color: gray;
}
/* navigator... */ /* navigator... */

6
magazine.js
View File

@ -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 ***/ /********************************************************** editor ***/