From 5f3f7caba58411fda0e1e13c37690f9ee3bb9ba2 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 22 Jan 2013 00:36:32 +0400 Subject: [PATCH] reverted to page morphing, needs more assessment... Signed-off-by: Alex A. Naanou --- TODO.otl | 10 ++++++---- index.html | 40 ++++++++++++++++++++++++++-------------- magazine.css | 8 +++++--- 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/TODO.otl b/TODO.otl index 9559976..683fe04 100755 --- a/TODO.otl +++ b/TODO.otl @@ -1,10 +1,12 @@ -[_] 12% Priority work - [_] 0% general todo - [_] use modes (CSS) for thumbnail/page views... +[_] 25% Priority work + [_] 50% general todo + [X] use modes (CSS) for thumbnail/page views... + [_] vanquish opacity effects + | they slow everything down considerably! [_] 50% stage 1 - basic features - [X] real magazine structure [_] issue browser structure [_] global navigation bar + [X] real magazine structure [X] 100% basic article navigation [X] next page [X] prev page diff --git a/index.html b/index.html index 9a7bddd..bbe8e80 100755 --- a/index.html +++ b/index.html @@ -26,9 +26,12 @@ $(document).ready(function(){ swipeDown: function(){ togglePageView('on') }, + // XXX for some reason this deos not bubble up the nested elements... click: function(evt, elem){ if($(elem).hasClass('page')){ setCurrentPage(elem) + } else if($(elem).hasClass('content')){ + setCurrentPage($(elem).parents('.page').first()) } return true } @@ -174,6 +177,8 @@ togglePageDragging = createCSSClassToggler( 'dragging') +var FIT_PAGE_TO_VIEW = true + togglePageView = createCSSClassToggler( '.viewer', 'page-view-mode', @@ -182,18 +187,24 @@ togglePageView = createCSSClassToggler( function(){ if(togglePageView('?') == 'on'){ PAGES_VISIBLE = 1 - //fitPagesToViewer(PAGES_VISIBLE) - fitNPages(PAGES_VISIBLE) - // to prevent drag while zooming to affect - // the resulting position set it to current - // page... - // XXX now this is done by fitNPages - setCurrentPage() + if(FIT_PAGE_TO_VIEW){ + fitPagesToViewer(PAGES_VISIBLE) + } else { + fitNPages(PAGES_VISIBLE) + // to prevent drag while zooming to affect + // the resulting position set it to current + // page... + // XXX now this is done by fitNPages + setCurrentPage() + } } else { PAGES_VISIBLE = PAGES_IN_RIBBON - // XXX this needs to be done before transitions... - //fitPagesToContent(PAGES_VISIBLE) - fitNPages(PAGES_VISIBLE) + if(FIT_PAGE_TO_VIEW){ + // XXX this needs to be done before transitions... + fitPagesToContent(PAGES_VISIBLE) + } else { + fitNPages(PAGES_VISIBLE) + } } }) @@ -221,12 +232,11 @@ function fitNPages(n){ setElementScale($('.scaler'), scale) - /* + /* XXX fitPagesTo(null, n) */ } -/* // NOTE: this is a single big function because we need to thread data // through to avoid sampling while animating... // XXX try and do the fitting with pure CSS... @@ -294,7 +304,6 @@ function fitPagesTo(elem, n){ // update position using the new width... setCurrentPage(null, rW) } -*/ function fitPagesToViewer(n){ @@ -441,6 +450,9 @@ function createPage(article, template){
+ + +
@@ -463,7 +475,7 @@ function createPage(article, template){
-
+
Page
diff --git a/magazine.css b/magazine.css index 38389ff..643bf17 100755 --- a/magazine.css +++ b/magazine.css @@ -136,22 +136,24 @@ body { .page-view-mode.viewer { background: white; } + .page-view-mode .page .content { - opacity: 0; } .page-view-mode .current.page .content { - opacity: 1; } + .page-view-mode.viewer.dragging { + /* background: silver; + */ } .page-view-mode.dragging .page .content { - opacity: 1; } + /* keep this at the end... */ .unanimated { -webkit-transition: none;