diff --git a/index.html b/index.html index 108b73f..985dd6e 100755 --- a/index.html +++ b/index.html @@ -11,6 +11,12 @@ - - + + + + @@ -69,6 +77,7 @@ + @@ -139,11 +148,37 @@ $(document).ready(function(){ .on('screenReleased swipeRight swipeLeft', handleScrollRelease) */ + .on('pageChanged', updatePageNumberIndicator) + .on('magazineDataLoaded', loadMagazineChrome) + + $('.viewer').css('overflow', 'hidden') + //loadState() + runMagazineTemplates() + // XXX this still depends on touchSwipe... + //setupBookmarkTouchZones() + + togglePageView('on') + // XXX this still depends on touchSwipe... + //setupNavigator() 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(){ +
+ + + +
+ +
+ +
+ +
+
+ + + + +
+ + + + New Magazine + + + + + + + + + + M + + + + +
+ +
+ + + New Article + + + + + + + + + + A + + + + + + + + Shift Article Left + + + + + + + + + A + + + + + + + + Shift Article Right + + + + + + A + + + +
+ +
+ +
+ + + New Page + + + + + + + + + + P + + + + + + + + Shift Page Left + + + + + + + + + P + + + + + + + + Shift Page Right + + + + + + P + + + +
+ +
+ + +
+
+
Magazine Title
+
+
+
+ + + + Previous bookmark (S-Left) + + + + +
+
+ + + + Toggle bookmark (B) + + + + + +
+
+ + + + Next bookmark (S-Right) + + + + +
+
+ + + + Info + + + i + + + + +
+
+
+
+ +
+ Cover + < Bookmark + < Article + < Page > + Article > + Bookmark > + End +
+ +
+
+
+
+
+
0/0
+
+ + + + +
@@ -577,6 +846,7 @@ $(document).ready(function(){
+
diff --git a/layout.js b/layout.js index 2bd024b..f2989b5 100755 --- a/layout.js +++ b/layout.js @@ -13,8 +13,16 @@ var INNERTIA_SCALE = 0.25 /********************************************************** layout ***/ +var toggleThemes = createCSSClassToggler('.chrome', [ + 'light', + // this is the default (no class set)... + 'none', + 'dark' +]) + + var togglePageFitMode = createCSSClassToggler( - '.viewer', + '.chrome', '.page-fit-to-viewer', function(action){ if(action == 'on'){ @@ -30,15 +38,15 @@ var togglePageFitMode = createCSSClassToggler( var togglePageView = createCSSClassToggler( - '.viewer', + '.chrome', '.full-page-view-mode', - // XXX make this support transitions... function(action){ var view = $('.viewer') var page = $('.page') // XXX setTransitionDuration($('.magazine'), 0) + var n = getPageNumber() if(action == 'on'){ var scale = getPageTargetScale(1).value @@ -53,7 +61,7 @@ var togglePageView = createCSSClassToggler( } // NOTE: can't disable transitions on this one because ScrollTo // uses jQuery animation... - setCurrentPage() + setCurrentPage(n) }) @@ -99,6 +107,12 @@ function makeSwipeHandler(actionA, actionB){ // ribbon mode... if(isNavigationViewRelative()){ + // article navigation... + if(data.touches >= 2){ + actionB($('.current.page')) + return + } + // this makes things snap... if(SNAP_TO_PAGES_IN_RIBBON){ setCurrentPage() @@ -341,6 +355,8 @@ function setCurrentPage(n){ animateElementTo($('.magazine'), left) } + $('.viewer').trigger('pageChanged', n) + return cur } diff --git a/magazine-themes.css b/magazine-themes.css index 9044e5d..a0765c7 100755 --- a/magazine-themes.css +++ b/magazine-themes.css @@ -128,60 +128,61 @@ } -.light.viewer { +.light.viewer, +.light .viewer { background: white; } -.light.viewer .magazine:before, -.light.viewer .magazine:after { +.light .magazine:before, +.light .magazine:after { color: #eee; } -.light.viewer .magazine { +.light .magazine { box-shadow: 10px 10px 50px 10px #ddd; } -.light.viewer .top-toolbar, -.light.viewer .bottom-toolbar { +.light .top-toolbar, +.light .bottom-toolbar { font-size: 14px; color: silver; background: white; box-shadow: 5px 5px 50px 20px #eee; } -.light.viewer .top-toolbar a, -.light.viewer .bottom-toolbar a { +.light .top-toolbar a, +.light .bottom-toolbar a { color: silver; text-decoration: none; } -.light.viewer .bottom-toolbar .page-number { +.light .bottom-toolbar .page-number { color: silver; } -.light.viewer .button svg * { +.light .button svg * { stroke: gray; } -.light.viewer .button.info svg * { +.light .button.info svg * { stroke: silver; fill: silver; } -.light.viewer .navigator { +.light .navigator { opacity: 0.9; } -.light.viewer .navigator .bar { +.light .navigator .bar { background: silver; } -.light.viewer .navigator .bar .indicator { +.light .navigator .bar .indicator { background: orange; } -.light.viewer .navigator .bar .article { +.light .navigator .bar .article { background: silver; } -.light.viewer .navigator .bar .bookmark { +.light .navigator .bar .bookmark { background: red; } @@ -208,60 +209,61 @@ } -.dark.viewer { +.dark.viewer, +.dark .viewer { background: #111; } -.dark.viewer .magazine { +.dark .magazine { box-shadow: 10px 10px 50px 10px #000; } -.dark.viewer .magazine:before, -.dark.viewer .magazine:after { +.dark .magazine:before, +.dark .magazine:after { color: #222; } -.dark.viewer .top-toolbar, -.dark.viewer .bottom-toolbar { +.dark .top-toolbar, +.dark .bottom-toolbar { font-size: 14px; color: gray; background: black; box-shadow: none; } -.dark.viewer .top-toolbar a, -.dark.viewer .bottom-toolbar a { +.dark .top-toolbar a, +.dark .bottom-toolbar a { color: gray; text-decoration: none; } -.dark.viewer .bottom-toolbar .page-number { +.dark .bottom-toolbar .page-number { color: #555; } -.dark.viewer .button svg * { +.dark .button svg * { stroke: gray; } -.dark.viewer .button.info svg * { +.dark .button.info svg * { fill: gray; } -.dark.viewer .navigator { +.dark .navigator { } -.dark.viewer .navigator .bar { +.dark .navigator .bar { background: silver; } -.dark.viewer .navigator .bar .indicator { +.dark .navigator .bar .indicator { background: yellow; } -.dark.viewer .navigator .bar .article { +.dark .navigator .bar .article { background: white; } -.dark.viewer .navigator .bar .bookmark { +.dark .navigator .bar .bookmark { background: red; } diff --git a/magazine.css b/magazine.css index f7fb04e..d0c1ba6 100755 --- a/magazine.css +++ b/magazine.css @@ -104,21 +104,15 @@ body { z-index: 9999; } -.page-view-mode .page { - /* XXX change to relative units... */ - width: 800px; -} - -.page-view-mode .page .content { -} - -.page-view-mode .page .bookmark { +.page-view-mode .page .bookmark, +.full-page-view-mode .page .bookmark { right: -70px; top: -70px; opacity: 0.5; } -.page-view-mode .page .bookmark.justcreated { +.page-view-mode .page .bookmark.justcreated, +.full-page-view-mode .page .bookmark.justcreated { opacity: 1; } @@ -288,6 +282,8 @@ body { font-size: 14px; color: silver; + + z-index: 1000; } .top-toolbar { top: 0px; @@ -299,7 +295,9 @@ body { width: 100%; } .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; } diff --git a/navigator.js b/navigator.js index e95415f..63968c2 100755 --- a/navigator.js +++ b/navigator.js @@ -175,8 +175,11 @@ 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) +function updatePageNumberIndicator(evt, n){ + if(n == null){ + n = getPageNumber() + } + $('.page-number').text((n+1)+'/'+$('.page').length) }