flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-30 19:40:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrated lots of stuff to new index, still full-page css rules do not work for some reason...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-26 04:17:29 +04:00
parent 48b1793592
commit cbf94cc985
5 changed files with 340 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
index.html
View File

@ -11,6 +11,12 @@
<link rel="stylesheet" href="magazine-custom.css"> <link rel="stylesheet" href="magazine-custom.css">
<style> <style>
.chrome {
display: block;
width: 100%;
height: 100%;
}
.viewer { .viewer {
overflow: hidden; overflow: hidden;
} }
@ -56,8 +62,10 @@
</style> </style>
<script src="ext-lib/jquery.js"></script> <script src="ext-lib/jquery.js"></script>
<script src="ext-lib/jquery.scrollto.js"></script> <!--script src="ext-lib/jquery.scrollto.js"></script-->
<script src="ext-lib/jquery.scrollstop.js"></script> <!--script src="ext-lib/jquery.scrollstop.js"></script-->
<script src="ext-lib/spin.js"></script>
<script src="ext-lib/jquery.spin.js"></script>
<script src="ext-lib/iscroll-custom.js"></script> <script src="ext-lib/iscroll-custom.js"></script>
@ -69,6 +77,7 @@
<script src="magazine.js"></script> <script src="magazine.js"></script>
<script src="layout.js"></script> <script src="layout.js"></script>
<script src="navigator.js"></script>
<script src="platform.js"></script> <script src="platform.js"></script>
@ -139,11 +148,37 @@ $(document).ready(function(){
.on('screenReleased swipeRight swipeLeft', handleScrollRelease) .on('screenReleased swipeRight swipeLeft', handleScrollRelease)
*/ */
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
$('.viewer').css('overflow', 'hidden') $('.viewer').css('overflow', 'hidden')
//loadState()
runMagazineTemplates() runMagazineTemplates()
// XXX this still depends on touchSwipe...
//setupBookmarkTouchZones()
togglePageView('on') togglePageView('on')
// XXX this still depends on touchSwipe...
//setupNavigator()
setCurrentPage(0) setCurrentPage(0)
toggleThemes('dark')
// hide the splash...
setTimeout(function(){
$('.splash').fadeOut()
}, 350)
// remove the spinner...
setTimeout(function(){
$('#spinner').spin(false)
}, 500)
}) })
@ -152,6 +187,240 @@ $(document).ready(function(){
</head> </head>
<body> <body>
<div class="chrome">
<!-- Splash screen -->
<div class="splash noSwipe">
<!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle">
<!--h2><div id="spinner" style="position:relative; display:inline-block; width:50px; height:50px; vertical-align:middle;"></div><i>loading...</i></h2-->
<div id="spinner" style="position:relative; display:inline-block; width:50px; height:50px; vertical-align:middle;"></div>
<script>
// add a spinner to the splash...
var opts = {
lines: 11, // The number of lines to draw
length: 6, // The length of each line
width: 4, // The line thickness
radius: 8, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: $('.splash #spinner').css('color'), // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 64, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: true, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
}
$('#spinner').spin(opts)
</script>
</td></tr></table>
</div>
<!-- Toolbars -->
<div class="left-toolbar">
<svg id="new-magazine" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Magazine</title>
<g id="svg_47">
<g id="svg_33">
<g id="svg_34">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.671385" cy="30.356987" r="7.062921" id="svg_35"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.820414" y="36.240832" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_36">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.8386,34.497002l-13.95876,0.052097l-0.06013,-28.683099l24.052891,0l-0.060101,18.821401" id="svg_37"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.923339" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_38">M</text>
</g>
</g>
</svg>
<hr>
<div>
<svg id="new-article" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Article</title>
<g id="svg_48">
<g id="svg_26">
<g id="svg_27">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.671385" cy="30.356987" r="7.062921" id="svg_28"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.820414" y="36.240832" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_29">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.83856,34.49699l-13.95872,0.052139l-0.06013,-28.683129l24.052921,0l-0.06015,18.82142" id="svg_30"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.68281" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_31">A</text>
</g>
</g>
</svg>
<svg id="shift-article-left" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Article Left</title>
<g id="svg_76">
<g id="svg_70">
<g id="svg_71">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m28.62114,34.492649l-19.73146,0.052151l-0.06013,-28.68306l24.052919,0l-0.000019,17.438419" id="svg_72"/>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m32.840248,24.30155l0.05212,10.154291l-1.082369,0.060139" id="svg_73"/>
</g>
<path d="m30.587009,30.33219l-4.3314,-7.037199l2.8526,0l4.331209,7.037199l-4.331209,7.037241l-2.8526,0l4.3314,-7.037241z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" transform="rotate(180 29.8475 30.3322)" id="svg_74"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.692654" y="17.535428" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_75">A</text>
</g>
</g>
</svg>
<svg id="shift-article-right" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Article Right</title>
<g id="svg_89">
<g id="svg_85">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m29.583229,34.612888l-20.693559,-0.007988l-0.06013,-28.6831l24.052921,0l-0.000023,20.86595" id="svg_86"/>
<path d="m32.27066,30.392269l-4.33132,-7.037249l2.852549,0l4.33123,7.037249l-4.33123,7.03727l-2.852549,0l4.33132,-7.03727z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" id="svg_87"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.692638" y="17.595492" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_88">A</text>
</g>
</g>
</svg>
</div>
<hr>
<div>
<svg id="new-page" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Page</title>
<g id="svg_24">
<g id="svg_16">
<g id="svg_9">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.691122" cy="30.383944" r="7.062921" id="svg_7"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.840151" y="36.267789" id="svg_8" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.85829,34.523949l-13.95871,0.052132l-0.06013,-28.68312l24.05293,0l-0.06015,18.82142" id="svg_15"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.281621" y="17.566648" id="svg_17" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">P</text>
</g>
</g>
</svg>
<svg id="shift-page-left" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Page Left</title>
<g id="svg_68">
<g id="svg_67">
<g id="svg_66">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m28.621111,34.492619l-19.731441,0.052151l-0.06013,-28.683099l24.052921,0l-0.000011,17.4384" id="svg_61"/>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m32.840248,24.30146l0.05212,10.15435l-1.082397,0.060131" id="svg_65"/>
</g>
<path d="m30.586981,30.3321l-4.3314,-7.037199l2.852598,0l4.331251,7.037199l-4.331251,7.0373l-2.852598,0l4.3314,-7.0373z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" id="svg_62" transform="rotate(180 29.8475 30.3321)"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.271712" y="17.535359" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_63">P</text>
</g>
</g>
</svg>
<svg id="shift-page-right" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Page Right</title>
<g id="svg_58">
<g id="svg_57">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m29.57338,34.557121l-20.69354,-0.007992l-0.06013,-28.683129l24.052929,0l-0.000019,20.86593" id="svg_54"/>
<path d="m32.260818,30.336451l-4.331329,-7.037251l2.852551,0l4.331299,7.037251l-4.331299,7.037321l-2.852551,0l4.331329,-7.037321z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" id="svg_56" stroke="#ffffff"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.261884" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_55">P</text>
</g>
</g>
</svg>
</div>
</div>
<div class="top-toolbar">
<div class="left-set">
<div class="button title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
</div>
<div class="right-set">
<div class="button prev-bookmark">
<a href="#prevBookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Previous bookmark (S-Left)</title>
<path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
</a>
</div>
<div class="button toggle-bookmark">
<a href="#bookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Toggle bookmark (B)</title>
<rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
<path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
</g>
</svg>
</a>
</div>
<div class="button next-bookmark">
<a href="#nextBookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Next bookmark (S-Right)</title>
<path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
</a>
</div>
<div class="button info">
<a href="javascript:alert('not implemented yet...')">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Info</title>
<g id="svg_6">
<circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.762543" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/>
<text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="21.029904" y="21.833322" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(0.894143 0 0 0.894143 1.91526 8.19192)" stroke="#000000">i</text>
</g>
</g>
</svg>
</a>
</div>
</div>
</div>
<div class="bottom-toolbar">
<!-- this is just an example-->
<div class="controls">
<a href="#home" title="(Home)">Cover</a>
<a href="#prevBookmark" title="(S-Left)">&lt; Bookmark</a>
<a href="#prevArticle" title="(C-Left)">&lt; Article</a>
<a href="#prev" title="Previous page (Left)">&lt; Pa</a><a href="#next" title="Next page (Right)">ge &gt;</a>
<a href="#nextArticle" title="(C-Right)">Article &gt;</a>
<a href="#nextBookmark" title="(S-Right)">Bookmark &gt;</a>
<a href="#end" title="(End)">End</a>
</div>
<!-- position indicator -->
<div class="navigator">
<div class="bar">
<div class="indicator"></div>
</div>
</div>
<div class="page-number">0/0</div>
</div>
<div id="viewer" class="viewer"> <div id="viewer" class="viewer">
<div class="magazine" name="PortableMag"> <div class="magazine" name="PortableMag">
@ -577,6 +846,7 @@ $(document).ready(function(){
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

24
layout.js
View File

@ -13,8 +13,16 @@ var INNERTIA_SCALE = 0.25
/********************************************************** layout ***/ /********************************************************** layout ***/
var toggleThemes = createCSSClassToggler('.chrome', [
'light',
// this is the default (no class set)...
'none',
'dark'
])
var togglePageFitMode = createCSSClassToggler( var togglePageFitMode = createCSSClassToggler(
'.viewer', '.chrome',
'.page-fit-to-viewer', '.page-fit-to-viewer',
function(action){ function(action){
if(action == 'on'){ if(action == 'on'){
@ -30,15 +38,15 @@ var togglePageFitMode = createCSSClassToggler(
var togglePageView = createCSSClassToggler( var togglePageView = createCSSClassToggler(
'.viewer', '.chrome',
'.full-page-view-mode', '.full-page-view-mode',
// XXX make this support transitions...
function(action){ function(action){
var view = $('.viewer') var view = $('.viewer')
var page = $('.page') var page = $('.page')
// XXX // XXX
setTransitionDuration($('.magazine'), 0) setTransitionDuration($('.magazine'), 0)
var n = getPageNumber()
if(action == 'on'){ if(action == 'on'){
var scale = getPageTargetScale(1).value var scale = getPageTargetScale(1).value
@ -53,7 +61,7 @@ var togglePageView = createCSSClassToggler(
} }
// NOTE: can't disable transitions on this one because ScrollTo // NOTE: can't disable transitions on this one because ScrollTo
// uses jQuery animation... // uses jQuery animation...
setCurrentPage() setCurrentPage(n)
}) })
@ -99,6 +107,12 @@ function makeSwipeHandler(actionA, actionB){
// ribbon mode... // ribbon mode...
if(isNavigationViewRelative()){ if(isNavigationViewRelative()){
// article navigation...
if(data.touches >= 2){
actionB($('.current.page'))
return
}
// this makes things snap... // this makes things snap...
if(SNAP_TO_PAGES_IN_RIBBON){ if(SNAP_TO_PAGES_IN_RIBBON){
setCurrentPage() setCurrentPage()
@ -341,6 +355,8 @@ function setCurrentPage(n){
animateElementTo($('.magazine'), left) animateElementTo($('.magazine'), left)
} }
$('.viewer').trigger('pageChanged', n)
return cur return cur
} }

62
magazine-themes.css
View File

@ -128,60 +128,61 @@
} }
.light.viewer,
.light .viewer { .light .viewer {
background: white; background: white;
} }
.light.viewer .magazine:before, .light .magazine:before,
.light.viewer .magazine:after { .light .magazine:after {
color: #eee; color: #eee;
} }
.light.viewer .magazine { .light .magazine {
box-shadow: 10px 10px 50px 10px #ddd; box-shadow: 10px 10px 50px 10px #ddd;
} }
.light.viewer .top-toolbar, .light .top-toolbar,
.light.viewer .bottom-toolbar { .light .bottom-toolbar {
font-size: 14px; font-size: 14px;
color: silver; color: silver;
background: white; background: white;
box-shadow: 5px 5px 50px 20px #eee; box-shadow: 5px 5px 50px 20px #eee;
} }
.light.viewer .top-toolbar a, .light .top-toolbar a,
.light.viewer .bottom-toolbar a { .light .bottom-toolbar a {
color: silver; color: silver;
text-decoration: none; text-decoration: none;
} }
.light.viewer .bottom-toolbar .page-number { .light .bottom-toolbar .page-number {
color: silver; color: silver;
} }
.light.viewer .button svg * { .light .button svg * {
stroke: gray; stroke: gray;
} }
.light.viewer .button.info svg * { .light .button.info svg * {
stroke: silver; stroke: silver;
fill: silver; fill: silver;
} }
.light.viewer .navigator { .light .navigator {
opacity: 0.9; opacity: 0.9;
} }
.light.viewer .navigator .bar { .light .navigator .bar {
background: silver; background: silver;
} }
.light.viewer .navigator .bar .indicator { .light .navigator .bar .indicator {
background: orange; background: orange;
} }
.light.viewer .navigator .bar .article { .light .navigator .bar .article {
background: silver; background: silver;
} }
.light.viewer .navigator .bar .bookmark { .light .navigator .bar .bookmark {
background: red; background: red;
} }
@ -208,60 +209,61 @@
} }
.dark.viewer,
.dark .viewer { .dark .viewer {
background: #111; background: #111;
} }
.dark.viewer .magazine { .dark .magazine {
box-shadow: 10px 10px 50px 10px #000; box-shadow: 10px 10px 50px 10px #000;
} }
.dark.viewer .magazine:before, .dark .magazine:before,
.dark.viewer .magazine:after { .dark .magazine:after {
color: #222; color: #222;
} }
.dark.viewer .top-toolbar, .dark .top-toolbar,
.dark.viewer .bottom-toolbar { .dark .bottom-toolbar {
font-size: 14px; font-size: 14px;
color: gray; color: gray;
background: black; background: black;
box-shadow: none; box-shadow: none;
} }
.dark.viewer .top-toolbar a, .dark .top-toolbar a,
.dark.viewer .bottom-toolbar a { .dark .bottom-toolbar a {
color: gray; color: gray;
text-decoration: none; text-decoration: none;
} }
.dark.viewer .bottom-toolbar .page-number { .dark .bottom-toolbar .page-number {
color: #555; color: #555;
} }
.dark.viewer .button svg * { .dark .button svg * {
stroke: gray; stroke: gray;
} }
.dark.viewer .button.info svg * { .dark .button.info svg * {
fill: gray; fill: gray;
} }
.dark.viewer .navigator { .dark .navigator {
} }
.dark.viewer .navigator .bar { .dark .navigator .bar {
background: silver; background: silver;
} }
.dark.viewer .navigator .bar .indicator { .dark .navigator .bar .indicator {
background: yellow; background: yellow;
} }
.dark.viewer .navigator .bar .article { .dark .navigator .bar .article {
background: white; background: white;
} }
.dark.viewer .navigator .bar .bookmark { .dark .navigator .bar .bookmark {
background: red; background: red;
} }

20
magazine.css
View File

@ -104,21 +104,15 @@ body {
z-index: 9999; z-index: 9999;
} }
.page-view-mode .page {
/* XXX change to relative units... */ .page-view-mode .page .bookmark,
width: 800px; .full-page-view-mode .page .bookmark {
}
.page-view-mode .page .content {
}
.page-view-mode .page .bookmark {
right: -70px; right: -70px;
top: -70px; top: -70px;
opacity: 0.5; opacity: 0.5;
} }
.page-view-mode .page .bookmark.justcreated { .page-view-mode .page .bookmark.justcreated,
.full-page-view-mode .page .bookmark.justcreated {
opacity: 1; opacity: 1;
} }
@ -288,6 +282,8 @@ body {
font-size: 14px; font-size: 14px;
color: silver; color: silver;
z-index: 1000;
} }
.top-toolbar { .top-toolbar {
top: 0px; top: 0px;
@ -299,7 +295,9 @@ body {
width: 100%; width: 100%;
} }
.page-view-mode .top-toolbar, .page-view-mode .top-toolbar,
.page-view-mode .bottom-toolbar { .page-view-mode .bottom-toolbar,
.full-page-view-mode .top-toolbar,
.full-page-view-mode .bottom-toolbar {
display: none; display: none;
} }

7
navigator.js
View File

@ -175,8 +175,11 @@ function removeBookmarkIndicator(n){
// NOTE: this is 1 based page number, the rest of the system is 0 based. // NOTE: this is 1 based page number, the rest of the system is 0 based.
function updatePageNumberIndicator(){ function updatePageNumberIndicator(evt, n){
$('.page-number').text((getPageNumber()+1)+'/'+$('.page').length) if(n == null){
n = getPageNumber()
}
$('.page-number').text((n+1)+'/'+$('.page').length)
} }