From 145c453ecb16ffed8be4b8cb31d59bf6ec2778e8 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 23 Jan 2013 05:53:42 +0400 Subject: [PATCH] added layer #URLs and #hideLayers... Signed-off-by: Alex A. Naanou --- TODO.otl | 17 +++++++------ index.html | 48 ++++++++++++++++++++++++++++--------- magazine.css | 15 ++++++++++++ magazine.js | 67 ++++++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 119 insertions(+), 28 deletions(-) diff --git a/TODO.otl b/TODO.otl index 490efa1..87cc0cb 100755 --- a/TODO.otl +++ b/TODO.otl @@ -1,17 +1,20 @@ [_] 25% Priority work [_] 50% general todo - [_] 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... - [_] something made phonegap version unhappy... - | likely the URL logic... - | - | try and make it optional... + [_] #URL "layers" + | navigation to a hidden layer will show the layer, any other + | navigation will hide it... [_] time transitions | the goal is for slow devices to seem not to have animations at | all and faster ones to seem to have fast animations... [_] vanquish opacity effects | they slow everything down considerably! + [_] 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] something made phonegap version unhappy... + | likely the URL logic... + | + | try and make it optional... [X] add page urls [X] add state saving to local storage [X] use modes (CSS) for thumbnail/page views... diff --git a/index.html b/index.html index 4355860..36efa07 100755 --- a/index.html +++ b/index.html @@ -33,11 +33,13 @@ $(document).ready(function(){ swipeStatus: swipeUpdate, // XXX change this to pinch... swipeUp: function(){ - togglePageView('off') + //togglePageView('off') + togglePageView() }, // XXX change this to pinch... swipeDown: function(){ - togglePageView('on') + //togglePageView('on') + togglePageView() }, // XXX for some reason this deos not bubble up the nested elements... click: function(evt, elem){ @@ -85,13 +87,18 @@ $(document).ready(function(){
- mooo -
Home
Issue Cover
+ + Cover | + Previous article | + Previous page | + Next page | + Next article | + End
@@ -100,17 +107,36 @@ $(document).ready(function(){

Magazine Cover

-


- Article 1
- Article 2
- Article 3
- -


+

Navigation via #URLs

+

BUG: currently navigation via existing anchors + will break the layout, so use the name attribute + on any other tags (see example). +

+

The basics

+ Page #1
+ Page #3
+ Named page

Special anchors

+

These show up in the page URL

Magazine cover
- Last Page
+ Last page
Thumbnail view
+ Toggle a hidden layer
+ + +

Relative special anchors

+

These will get replaced by corresponding page numbers in the URL

+ Next page
+ Previous page
+ Next article
+ Previous article
+ +
diff --git a/magazine.css b/magazine.css index c2a31ad..42c1dec 100755 --- a/magazine.css +++ b/magazine.css @@ -4,6 +4,14 @@ body { margin: 0; } +.hidden { + display: none; +} +/* keep this empty... */ +.shown { +} + + /* all elements that will behave like a page */ .page { /* XXX make this browser-sized... */ @@ -145,6 +153,13 @@ body { height: 50px; left: 0px; + + font-size: 14px; + color: white; +} +.top-toolbar a, .bottom-toolbar a { + color: white; + text-decoration: none; } .top-toolbar { diff --git a/magazine.js b/magazine.js index af63367..57c5ecc 100755 --- a/magazine.js +++ b/magazine.js @@ -354,7 +354,6 @@ function swipeUpdate(evt, phase, direction, distance){ } -// XXX store the current page... function setCurrentPage(n, W){ if(n == null){ var cur = $('.current.page') @@ -444,7 +443,7 @@ function prevArticle(){ /*********************************************************************/ // XXX make these magazine-specific... -// XXX BUG: if the hach url part coresponds to a real anchor the browser +// XXX BUG: if the hash url part coresponds to a real anchor the browser // shifts the page, need to disable this... // URL state managers... function loadURLState(){ @@ -455,32 +454,80 @@ function loadURLState(){ var n = parseInt(anchor) if(typeof(n) == typeof(1) && n >= 0){ return n + // XXX add real external aliases... } else if(anchor == 'thumbnails') { togglePageView('off') return getPageNumber() + } else if(anchor == 'home') { return 0 + } else if(anchor == 'end') { return $('.page').length-1 + + // relative URLs... + } else if(anchor == 'next') { + nextPage() + return getPageNumber() + + } else if(anchor == 'prev') { + prevPage() + return getPageNumber() + + } else if(anchor == 'nextArticle') { + nextArticle() + return getPageNumber() + + } else if(anchor == 'prevArticle') { + prevArticle() + return getPageNumber() + + // hide all visible layers on current page... + } else if(anchor == 'hideLayers') { + $('.current.page .shown') + .addClass('hidden') + .removeClass('shown') + return getPageNumber() + } else { - return getPageNumber($('[name='+anchor+']').parents('.page')) + var elem = $('[name='+anchor+']') + n = getPageNumber(elem.parents('.page')) + // toggle hidden/shown elements... + if(elem.hasClass('hidden')){ + elem + .addClass('shown') + .removeClass('hidden') + } else if(elem.hasClass('shown')){ + elem + .addClass('hidden') + .removeClass('shown') + } + return n } } function saveURLState(){ var anchor = window.location.hash.split('#')[1] - var page = $('[name='+anchor+']') + var elem = $('[name='+anchor+']') + var page = elem if(!page.hasClass('page')){ page = page.parents('.page') } var n = getPageNumber() - // XXX use real aliases... - if(n == getPageNumber(page) - || (anchor == 'home' && n == 0) - || (anchor == 'end' && n == $('.page').length-1)){ - return + + // decide which #URLs stay in the URL and which get replaces with a + // page number... + if(!elem.hasClass('shown') && !elem.hasClass('hidden')){ + // XXX use real aliases... + // do not replace these urls with page numbers... + if( n == getPageNumber(page) + || (anchor == 'home' && n == 0) + || (anchor == 'end' && n == $('.page').length-1)){ + return anchor + } } - window.location.hash = getPageNumber() + window.location.hash = n + return n } // local storage state managers...