From e280c399e03e2c350c4204cea45c3798dcf51cf1 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 29 Jan 2013 18:55:21 +0400 Subject: [PATCH] several styling changes... Signed-off-by: Alex A. Naanou --- index.html | 15 ++++++++------- magazine.css | 4 ++++ magazine.js | 25 ++++++++++++++----------- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index fa2c4c6..68aad0f 100755 --- a/index.html +++ b/index.html @@ -100,8 +100,9 @@ $(document).ready(function(){ // XXX do we need these here?? $('.button.cover').swipe({click: goToMagazineCover}) - $('.button.prev-bookmark').swipe({click: prevBookmark}) $('.button.toggle-bookmark').swipe({click: function(){toggleBookmark()}}) + // XXX for some reason these are not animated... + $('.button.prev-bookmark').swipe({click: prevBookmark}) $('.button.next-bookmark').swipe({click: nextBookmark}) loadState() @@ -136,14 +137,14 @@ $(document).ready(function(){
-
PortableMag
+
PortableMag
- prev + Previous page (S-Left) @@ -152,7 +153,7 @@ $(document).ready(function(){ - bookmark + Bookmark this page (B) @@ -162,7 +163,7 @@ $(document).ready(function(){ - next + Next page (S-Right) @@ -442,8 +443,8 @@ $(document).ready(function(){ var toggleViewerAnimation = function(){ var toggler = createCSSClassToggler( // XXX this will turn off magazine animations... - //'.scaler, .page, .magazine', - '.scaler, .page', + '.scaler, .page, .magazine', + //'.scaler, .page', 'unanimated', function(action){ $('#viewer_transition_state').text(action == 'on' ? 'off' : 'on') diff --git a/magazine.css b/magazine.css index 571eb1d..f771a42 100755 --- a/magazine.css +++ b/magazine.css @@ -254,6 +254,10 @@ body { font-size: 14px; color: white; } +.top-toolbar .title, +.bottom-toolbar .title { + font-size: 40px; +} .top-toolbar .left-set, .bottom-toolbar .left-set { float: left; diff --git a/magazine.js b/magazine.js index b9b40b1..0a0a943 100755 --- a/magazine.js +++ b/magazine.js @@ -195,6 +195,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){ // - if n is 1 then fit_to_content bool argument controls wether: // - the page will be stretched to viewer (false) // - or to content (true) +// XXX on USE_REAL_PAGE_SIZES offset is calculated incorrectly... function fitNPages(n, fit_to_content){ if(n == null){ n = 1 @@ -260,9 +261,14 @@ function fitNPages(n, fit_to_content){ // resulting page width... var rW = W/scale } + if(USE_REAL_PAGE_SIZES){ + $('.page.no-resize').width('auto') + } - // XXX revise... - if(fit_to_content){ + // NOTE: we need to calculate the offset as the actual widths during + // the anumation are not correct... + // XXX in general this is correct, but still there is some error... + if(!USE_REAL_PAGE_SIZES && fit_to_content){ var offset = rW * getPageNumber()-1 } else { // calculate the target offset... @@ -273,21 +279,21 @@ function fitNPages(n, fit_to_content){ } var i = rpages.index(cur) var offset = rW * i-1 - // now do the unresized elements... + // now do the no-resize elements... + // XXX this still generates slightly incorrect values... if(USE_REAL_PAGE_SIZES){ - $('.page.no-resize').width('auto') var nrpages = $('.page.no-resize, .current.page') i = nrpages.index(cur) nrpages.splice(i) nrpages.each(function(_, e){ - offset += $(e).width() + offset += $(e).children('.content').width() }) } } if(USE_REAL_PAGE_SIZES){ if(cur.hasClass('no-resize')){ - rW = cur.width() + rW = cur.children('.content').width() } } @@ -301,6 +307,8 @@ function fitNPages(n, fit_to_content){ /********************************************************* actions ***/ +// Argument width is used ONLY to center the page. +// // NOTE: if n is not given it will be set to current page number // NOTE: if width is not given it will be set to current page width. // NOTE: n can be: @@ -308,11 +316,6 @@ function fitNPages(n, fit_to_content){ // - page element // NOTE: this will fire a 'pageChanged' event on the viewer each time // it is called... -// XXX make this work for pages of different width... -// use markers -- a marker is any element that will be used to -// allign the magazine so that the marker is at the left edge of -// the viewer... -// by default a page is a marker. function setCurrentPage(n, offset, width){ if(n == null){ var cur = $('.current.page')