diff --git a/TODO.otl b/TODO.otl index 552f916..4fc4e73 100755 --- a/TODO.otl +++ b/TODO.otl @@ -1,4 +1,4 @@ -[_] 29% Priority work +[_] 35% Priority work [_] 50% general todo [_] make layer default state configurable... | e.g. setting "shown"/"hidden" classes in HTML and adding @@ -45,7 +45,7 @@ [_] 0% issue download [_] whole edition dowload and update (primary mode) [_] seporate issue download (secondary) - [_] 0% stage 2 - templates and examples + [_] 25% stage 2 - templates and examples [_] 0% default cover templates [_] 0% default page templates | a template is a class and predefined content... @@ -70,8 +70,8 @@ [_] text with title [_] text with image [_] plain - [_] 0% default actions - [_] show in overlay + [X] 100% default actions + [X] show/hide layer [_] 0% stage 3 - advanced features [_] 0% edition editor / publisher [_] create/delete edition diff --git a/index.html b/index.html index 5982d39..35bcb2b 100755 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@ $(document).ready(function(){ $('.viewer') .swipe({ - swipeStatus: swipeUpdate, + swipeStatus: swipeHandler, // XXX change this to pinch... swipeUp: function(){ //togglePageView('off') @@ -74,6 +74,8 @@ $(document).ready(function(){ fingers: $.fn.swipe.fingers.ALL }) + + // XXX do we need these here?? $('.button.cover').swipe({click: goToMagazineCover}) $('.button.next-article').swipe({click: nextArticle}) $('.button.prev-article').swipe({click: prevArticle}) @@ -141,8 +143,8 @@ $(document).ready(function(){ Page #1
Named page

- Anchor on page #3
- BUG: currently navigation via existing anchors + Anchor on page #3
+ currently navigation via existing anchors will break the layout, so use the name attribute on any other tags (see example). diff --git a/magazine.css b/magazine.css index a85a036..0900a21 100755 --- a/magazine.css +++ b/magazine.css @@ -125,6 +125,51 @@ body { background: white; } +.magazine:before { + position: absolute; + display: inline-block; + text-align: center; + + height: 300px; + width: 600px; + left: -300px; + top: -50%; + + content: 'COVER'; + font-weight: bold; + font-size: 150px; + + color: #888; + + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.magazine:after { + position: absolute; + display: inline-block; + text-align: center; + + height: 300px; + width: 600px; + right: -450px; + top: -50%; + + content: 'END'; + font-weight: bold; + font-size: 150px; + + color: #888; + + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} + .article { width: auto; overflow: visible; diff --git a/magazine.js b/magazine.js index 207c283..6fecd47 100755 --- a/magazine.js +++ b/magazine.js @@ -314,7 +314,7 @@ function fitPagesToContent(n){ } -function swipeUpdate(evt, phase, direction, distance, duration, fingers){ +function swipeHandler(evt, phase, direction, distance, duration, fingers){ var pages = $('.page') var cur = $('.current.page') var n = pages.index(cur) @@ -421,7 +421,7 @@ function goToArticleCover(){ function nextArticle(){ var cur = $('.current.page').parents('.article') - // we are at the magazine cover cover... + // we are at the magazine cover... if(cur.length == 0){ return setCurrentPage( $('.article .page:first-child').first()) @@ -437,9 +437,10 @@ function nextArticle(){ // XXX this is almost exactly the same as nextArticle... function prevArticle(){ var cur = $('.current.page').parents('.article') - // we are at the magazine cover cover... + // we are at the magazine cover... if(cur.length == 0){ - return $('.current.page') + //return $('.current.page') + return setCurrentPage() } // just find the prev one... var articles = $('.article')