From d8744a5e631563ed5f9c036c7a3cce36292360b1 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 6 Feb 2013 17:27:22 +0400 Subject: [PATCH] added page align control in full view via CSS classes + defaults... Signed-off-by: Alex A. Naanou --- TODO.otl | 4 ++-- index.html | 24 ++++++++++++------------ magazine.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 67 insertions(+), 15 deletions(-) diff --git a/TODO.otl b/TODO.otl index ee0fc1b..ad59629 100755 --- a/TODO.otl +++ b/TODO.otl @@ -8,8 +8,6 @@ [_] 67% general todo [_] move some of the current configuration options to the magazine... | same idea as .no-resize class... - [_] add option to align page to right or left screen border - | now only centering is possible... [_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)... | will help tuning the system,,, [_] Editor: add toggleEditiorMode to all editables in all versions... @@ -73,6 +71,8 @@ [_] BUG: href to existing anchors will mess up layout... | need to find out how can we disable anchor links from actually | going to the anchor... + [X] add option to align page to right or left screen border + | now only centering is possible... [X] make #URL updates optional... [X] add click current page to full page view... [X] 100% templates diff --git a/index.html b/index.html index 9677336..611ee20 100755 --- a/index.html +++ b/index.html @@ -512,28 +512,28 @@ $(document).ready(function(){
[PAGE NUMBER]
-
+
Page
[PAGE NUMBER]
-
+
Page
[PAGE NUMBER]
-
+
Page
[PAGE NUMBER]
-
+
Page @@ -629,6 +629,14 @@ $(document).ready(function(){ + + + Enable different size pages (still flaky): + + + + + Animate window resize: @@ -653,14 +661,6 @@ $(document).ready(function(){ - - - Enable different size pages (still flaky): - - - - - Enable #URL updating on page flip: diff --git a/magazine.js b/magazine.js index 6e5c835..d987f0e 100755 --- a/magazine.js +++ b/magazine.js @@ -14,6 +14,16 @@ var PAGES_IN_RIBBON = 4.0 // if true, expand a page to fit the whole view in single page mode... var FIT_PAGE_TO_VIEW = true +// default page alignment in full view... +// supported values: +// - 'center' +// - 'left' +// - 'right' +// NOTE: page local align values take priority over this. +// NOTE: this has no effect on thumbnail view. +// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true. +var FULL_PAGE_ALIGN = 'center' + // if true will make page resizes after window resize animated... var ANIMATE_WINDOW_RESIZE = true @@ -87,6 +97,17 @@ function updateView(){ /********************************************************* helpers ***/ +function getPageAlign(page){ + if(page == null){ + page = $('.current.page') + } + return (page.hasClass('page-align-center') ? 'center' + : page.hasClass('page-align-left') ? 'left' + : page.hasClass('page-align-right') ? 'right' + : FULL_PAGE_ALIGN) +} + + function getPageScale(){ return getElementScale($('.scaler')) } @@ -326,6 +347,7 @@ function fitNPages(n, fit_to_content){ // the animation are not correct... so just looking at .position() // will be counterproductive... // XXX still there is some error (rounding, page zoom?)... + // calculate offset... if(!USE_REAL_PAGE_SIZES && fit_to_content){ var offset = rW * getPageNumber()-1 } else { @@ -350,7 +372,21 @@ function fitNPages(n, fit_to_content){ if(USE_REAL_PAGE_SIZES){ if(cur.hasClass('no-resize')){ - rW = cur.children('.content').width() + var align = getPageAlign(cur) + + // center align if explicitly required or if we are in a ribbon... + if(n > 1 || align == 'center'){ + rW = cur.children('.content').width() + + // align left... + } else if(align == 'left'){ + rW = $('.viewer').width()/scale + + // align right... + } else if(align == 'right'){ + var v = $('.viewer') + rW = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2 + } } } @@ -412,11 +448,26 @@ function setCurrentPage(n, offset, width){ } else { var cur = $(n) n = $('.page').index(cur) + //n = page.index(cur) } // default width... if(width == null){ width = cur.width() + if(USE_REAL_PAGE_SIZES && togglePageView('?') == 'on'){ + var align = getPageAlign(cur) + var scale = getPageScale() + if(align == 'center'){ + width = cur.width() + + } else if(align == 'left'){ + width = $('.viewer').width()/scale + + } else if(align == 'right'){ + var v = $('.viewer') + width = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2 + } + } } $('.current.page').removeClass('current') @@ -634,6 +685,7 @@ function prevBookmark(){ // URL state managers... // NOTE: loadURLState will have no side-effects on the URL, it will just // get the state from the URL and return it. +// NOTE: this will also do the apropriate action depending on #URL... function loadURLState(){ if(window.location.hash == ''){ return null