From f490224ca84d2c8724943108812dffac5e8226d9 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 6 Feb 2013 23:12:10 +0400 Subject: [PATCH] added page-sets (still not fully deserializable) and fixed a bug in the CSS layout... Signed-off-by: Alex A. Naanou --- TODO.otl | 9 +++-- index.html | 26 ++++++++++++++ magazine-custom.css | 4 +-- magazine.css | 9 +++-- magazine.js | 88 +++++++++++++++++++++++++++++++++++++-------- 5 files changed, 112 insertions(+), 24 deletions(-) diff --git a/TODO.otl b/TODO.otl index 221c5ab..ef574f1 100755 --- a/TODO.otl +++ b/TODO.otl @@ -1,11 +1,16 @@ -[_] 37% Priority work +[_] 36% Priority work [_] 0% TouchSwipe issues... [_] BUG: swipe-back does not cancel a swipe... (TouchSwipe) | ...unless the finger is return to within the threshold of the | touchdown point. [_] BUG: no drag threshold on excludedElements (TouchSwipe) | stalled... - [_] 67% general todo + [_] 62% general todo + [X] 100% add page sets.. + [X] general page navigation + [X] serialization + [X] PROBLEM: cover is not found within the page-set + [X] PROBLEM: next/prev article navigation is broken [_] move some of the current configuration options to the magazine... | same idea as .no-resize class... [_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)... diff --git a/index.html b/index.html index 611ee20..7ec9422 100755 --- a/index.html +++ b/index.html @@ -567,6 +567,32 @@ $(document).ready(function(){ +
+ +
+
+
+

Page Set Example

+ +
[PAGE NUMBER]
+
+
+
+
+ Page in set
+ +
[PAGE NUMBER]
+
+
+
+
+ Page in set
+ +
[PAGE NUMBER]
+
+
+
+
diff --git a/magazine-custom.css b/magazine-custom.css index 368e489..73eac0e 100755 --- a/magazine-custom.css +++ b/magazine-custom.css @@ -8,11 +8,11 @@ background: gray; } -.magazine > .cover { +.magazine .cover { background: white; } -.article > .cover { +.article .cover { background: white; } diff --git a/magazine.css b/magazine.css index f72f895..8e54e12 100755 --- a/magazine.css +++ b/magazine.css @@ -32,8 +32,6 @@ body { width: auto; height: auto; - /* XXX change to relative units... */ - margin-top: -300px; /* XXX change to relative units... */ font-size: 12px; @@ -182,6 +180,7 @@ body { min-width: 200px; /* can we avoid setting the sizes in so many places? */ height: 600px; + margin-top: -300px; /* this is minus half the page width */ /* XXX change to relative units... */ @@ -211,8 +210,7 @@ body { display: inline-block; text-align: center; - /*top: -50%;*/ - top: -25%; + top: 25%; height: 300px; width: 600px; @@ -243,6 +241,7 @@ body { /* magazine article, this can contain a cover and a number of pages */ +.page-set, .article { display: inline-block; width: auto; @@ -255,7 +254,7 @@ body { color: silver; } -.article > .cover { +.article .cover { } diff --git a/magazine.js b/magazine.js index c49dd74..35c279f 100755 --- a/magazine.js +++ b/magazine.js @@ -12,8 +12,21 @@ var PAGES_IN_RIBBON = 4.0 // if true, expand a page to fit the whole view in single page mode... +// NOTE: if .no-resize is set on a page then this will not have effect +// on the that page... var FIT_PAGE_TO_VIEW = true +// if false, this will force all pages to be fit to screen size in full +// page view... +// XXX make this default and remove the option... +// XXX will produce a bad transition on togglePageView to TN and back +// after no-resize sized pages... +// ...the most probable reason is that we waste too much time between +// setting different values to elements... +// need to keep wrights as tight as possible... +var USE_REAL_PAGE_SIZES = true +//var USE_REAL_PAGE_SIZES = false + // default page alignment in full view... // supported values: // - 'center' @@ -21,7 +34,10 @@ var FIT_PAGE_TO_VIEW = true // - '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. +// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true and a page has +// no-resize class set. +// also, USE_REAL_PAGE_SIZES if set to false will make this have +// no effect. var FULL_PAGE_ALIGN = 'center' // if true will make page resizes after window resize animated... @@ -30,14 +46,6 @@ var ANIMATE_WINDOW_RESIZE = true // if false will disable page dragging in single page mode... var DRAG_FULL_PAGE = true -// XXX make this default and remove the option... -// XXX will produce a bad transition on togglePageView to TN and back after no-resize sized pages... -// ...the most probable reason is that we waste too much time between -// setting different values to elements... -// need to keep wrights as tight as possible... -var USE_REAL_PAGE_SIZES = true -//var USE_REAL_PAGE_SIZES = false - // if true this will make each page flip update the hash url... // if false, only direct linking will update the url. // NOTE: this can slow down navigation... @@ -97,6 +105,28 @@ function updateView(){ /********************************************************* helpers ***/ +function isPageResizable(page){ + if(page == null){ + page = $('.current.page') + } + if(!USE_REAL_PAGE_SIZES){ + return false + } + + var mag = $('.magazine') + var article = page.parents('.article').first() + + // first check the page... + return (page.hasClass('no-resize') ? false + // then the article... + : article.hasClass('no-resize') ? false + // then the magazine... + : mag.hasClass('no-resize') ? false + // now for default... + : true) +} + + // this will get the current active alignment... // NOTE: align can be set for: // - page @@ -241,6 +271,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){ var mag = $('.magazine') var pos = $('.navigator .bar .indicator') + // XXX make this drag pages that are larger than view before dragging outside... if(phase=='move' // see if wee need to drag the page and allways drag the ribbon... && (DRAG_FULL_PAGE || !_PAGE_VIEW) @@ -527,10 +558,10 @@ function goToMagazineEnd(){ } function goToArticleCover(){ // try and get the actual first cover... - var cover = $('.current.page').parents('.article').children('.cover.page').first() - if(cever.length == 0){ + var cover = $('.current.page').parents('.article').find('.cover.page').first() + if(cover.length == 0){ // no cover, get the first page... - return setCurrentPage($('.current.page').parents('.article').children('.page').first()) + return setCurrentPage($('.current.page').parents('.article').find('.page').first()) } else { return setCurrentPage(cover) } @@ -560,7 +591,7 @@ function nextArticle(){ var articles = $('.magazine .article') return setCurrentPage( $(articles[Math.min(articles.index(cur)+1, articles.length-1)]) - .children('.page') + .find('.page') .first()) } function prevArticle(){ @@ -574,7 +605,7 @@ function prevArticle(){ var articles = $('.magazine .article') return setCurrentPage( $(articles[Math.max(articles.index(cur)-1, 0)]) - .children('.page') + .find('.page') .first()) } @@ -998,8 +1029,10 @@ var JSON_FORMAT_VERSION = 0.1 // - explicit reader/writer, this will convert the data from html to JSON // data and back... JSONMetadata = { + id: 'as-is', name: 'as-is', title: 'as-is', + style: 'as-is', authors: { reader: function(data){ // NOTE: this might look odd, but we are using JS .map instead @@ -1060,12 +1093,20 @@ function buildJSON(export_bookmarks, export_position){ content: elem.children('.content')[0].outerHTML } + // page-set... + } else if(elem.hasClass('page-set')){ + var res = { + type: 'page-set', + 'class': elem.attr('class'), + pages: elem.children('.page').map(_getContent).toArray() + } + // article... } else if(elem.hasClass('article')){ var res = { type: 'article', 'class': elem.attr('class'), - pages: elem.children('.page').map(_getContent).toArray() + pages: elem.children('.page, .page-set').map(_getContent).toArray() } // other... @@ -1112,6 +1153,17 @@ function loadJSON(data, load_user_data){ .addClass(elem['class']) .appendTo(block) + // page-set... + } else if(elem.type == 'page-set') { + // buiold an article... + var res = createEmptyPageSet() + .addClass(elem['class']) + .appendTo(block) + // populate article with pages... + $(elem.pages).each(function(_, e){ + _build(res, e) + }) + // article... } else if(elem.type == 'article') { // buiold an article... @@ -1187,6 +1239,12 @@ function createMagazine(title, magazine_cover, article_cover){ } +// XXX do we need other page-set functions??? +function createEmptyPageSet(){ + return $('
') + .addClass('page-set') +} + function createEmptyArticle(){ return $('
') .addClass('article')