diff --git a/TODO.otl b/TODO.otl index 01813cd..08eece0 100755 --- a/TODO.otl +++ b/TODO.otl @@ -6,6 +6,8 @@ [_] BUG: no drag threshold on excludedElements (TouchSwipe) | stalled... [_] 75% general todo + [_] BUG: as on android before, on loading from json view does not reach cur page... + | likely due to animation/transition stopping for some reason.... [_] 0% add two main page themes (global/local applicable): [_] light [_] dark diff --git a/editor.html b/editor.html index 5b48c7a..130bb73 100755 --- a/editor.html +++ b/editor.html @@ -45,6 +45,7 @@ $(document).ready(function(){ // setup internal events... .on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState) .on('pageChanged', updatePageNumberIndicator) + .on('magazineDataLoaded', loadMagazineChrome) // templates... .on('pageCreated articleCreated magazineCreated ' + @@ -118,8 +119,12 @@ $(document).ready(function(){ // load state and setup everything that depends on it... + // XXX load the data with loadJSON() loadState() - loadMagazineChrome() + // need to call this once per whole page load.... + setupNavigator() + // XXX STUB, needed untill we load everything frim JSON... + $('.viewer').trigger('magazineDataLoaded') // set default view... togglePageView('on') diff --git a/editor.js b/editor.js index ec05e7c..8ae44ee 100755 --- a/editor.js +++ b/editor.js @@ -11,7 +11,7 @@ // as all events are ahndled by the viewer... function loadMagazine(mag, position, bookmarks){ mag = loadMagazineData(mag) - loadMagazineChrome(position, bookmarks) + loadMagazineUserData(position, bookmarks) return mag } @@ -189,9 +189,5 @@ function removePage(page){ - - - - /*********************************************************************/ // vim:set ts=4 sw=4 : diff --git a/index.html b/index.html index 7225dd8..5ee21b9 100755 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@ $(document).ready(function(){ // setup internal events... .on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState) .on('pageChanged', updatePageNumberIndicator) + .on('magazineDataLoaded', loadMagazineChrome) // user interactions... .swipe({ @@ -106,7 +107,10 @@ $(document).ready(function(){ // load state and setup everything that depends on it... // XXX load the data with loadJSON() loadState() - loadMagazineChrome() + // need to call this once per whole page load.... + setupNavigator() + // XXX STUB, needed untill we load everything frim JSON... + $('.viewer').trigger('magazineDataLoaded') // set default view... togglePageView('on') diff --git a/magazine.js b/magazine.js index 4f4e1ee..cfe3648 100755 --- a/magazine.js +++ b/magazine.js @@ -400,7 +400,7 @@ function goToMagazineCover(){ return setCurrentPage(0) } function goToMagazineEnd(){ - return setCurrentPage($('.page').length-1) + return setCurrentPage(-1) } function goToArticleCover(){ // try and get the actual first cover... @@ -897,7 +897,7 @@ function buildJSON(export_bookmarks, export_position){ return res } -function loadJSON(data, ignore_chrome){ +function loadJSON(data, load_user_data){ function _build(block, elem){ // page... @@ -955,8 +955,8 @@ function loadJSON(data, ignore_chrome){ mag.children('.current.page').removeClass('current') loadMagazineData(mag) - if(!ignore_chrome){ - loadMagazineChrome(data.position, data.bookmarks) + if(load_user_data){ + loadMagazineUserData(data.position, data.bookmarks) } } @@ -1080,29 +1080,34 @@ function runMagazineTemplates(){ } + /******************************************* basic magazine editor ***/ +// NOTE: these are mostly needed for loading magazines... // load the data... function loadMagazineData(mag){ removeMagazine() mag.appendTo($('.aligner')) + $('.viewer').trigger('magazineDataLoaded') return mag } +// NOTE: this needs to be called once per magazine load... +function loadMagazineChrome(){ + setupBookmarkTouchZones() + runMagazineTemplates() + updateView() + $('.viewer').trigger('magazineChromeLoaded') +} // load chrome elements like bookmarks and navigator.... -function loadMagazineChrome(position, bookmarks){ - setupBookmarkTouchZones() - setupNavigator() +function loadMagazineUserData(position, bookmarks){ if(position){ setCurrentPage(position) } if(bookmarks){ loadBookmarks(bookmarks != null ? bookmarks : []) } - runMagazineTemplates() - // XXX do we need to cover this with a splash??? - updateView() } @@ -1113,7 +1118,7 @@ function loadMagazineChrome(position, bookmarks){ // on removed elements -- unbind and remove or just forget about it? function removeMagazine(){ $('.magazine').remove() - clearNavigator() + $('.viewer').trigger('magazineRemoved') } diff --git a/navigator.js b/navigator.js index 13b734b..5fafdc9 100755 --- a/navigator.js +++ b/navigator.js @@ -6,6 +6,95 @@ * TODO make the bar (indicator) clickable -- go to this point. * **********************************************************************/ + +function setupNavigator(skip_events){ + var bar = $('.navigator .bar') + var elems = $('.navigator .indicator, .navigator .article') + var pos = $('.navigator .indicator').fadeIn() + var pages = $('.page').length + var mag = $('.magazine') + + var W = bar.width()/pages + + setupArticleIndicators(W) + + // set navigator element sizes... + elems.css({ + width: W + }) + + updateNavigator() + + // need to reconstruct indicators... + $('.magazine .page .bookmark').each(function(_, e){ + makeBookmarkIndicator($(e).parents('.page')) + }) + + // XXX make these run only once... + if(!skip_events){ + // setup event handlers... + $('.viewer') + // basic functions... + .on('pageChanged', function(e, n){updateNavigator(n)}) + .on('magazineDragging', function(){updateNavigator()}) + // bookmarks... + .on('bookmarksCleared', clearBookmarkIndicators) + .on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)}) + .on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)}) + // editor specific events... + .on('pageCreated articleCreated magazineCreated ' + + 'pageMoved articleMoved pageRemoved articleRemoved', resetNavigator) + // lifecycle events... + .on('magazineDataLoaded', resetNavigator) + .on('magazineRemoved', clearNavigator) + } +} + +// XXX this needs to unbind events... +function clearNavigator(){ + $('.navigator .indicator').hide() + clearBookmarkIndicators() + clearArticleIndicators() +} + +function resetNavigator(){ + clearNavigator() + setupNavigator(skip_events=true) +} + + +function updateNavigator(n){ + var mag = $('.magazine') + var page = $('.page') + var bar = $('.navigator .bar') + var pos = $('.navigator .indicator') + + var pn = page.length + + var bW = bar.width() + var mW = mag.width() + var PW = page.width() + var pW = bar.width()/pn + + if(n == null){ + // XXX this behaves erratically if the page is zoomed... + var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW) + } else { + res = pW*n + } + + // normalize the position... + res = res > 0 ? res: 0 + res = res < (bW-pW) ? res: (bW-pW) + + // set indicator position... + pos.css({ + left: res + }) +} + + + // NOTE: the navigator is not live and will need to get regenerated on // each magazine edit... @@ -47,91 +136,6 @@ function clearArticleIndicators(){ } -function setupNavigator(skip_events){ - var bar = $('.navigator .bar') - var elems = $('.navigator .indicator, .navigator .article') - var pos = $('.navigator .indicator').fadeIn() - var pages = $('.page').length - var mag = $('.magazine') - - var W = bar.width()/pages - - setupArticleIndicators(W) - - // set navigator element sizes... - elems.css({ - width: W - }) - - updateNavigator() - - // need to reconstruct indicators... - $('.magazine .page .bookmark').each(function(_, e){ - makeBookmarkIndicator($(e).parents('.page')) - }) - - if(!skip_events){ - // setup event handlers... - $('.viewer') - // basic functions... - .on('pageChanged', function(e, n){updateNavigator(n)}) - .on('magazineDragging', function(){updateNavigator()}) - // bookmarks... - .on('bookmarksCleared', clearBookmarkIndicators) - .on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)}) - .on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)}) - // editor specific events... - .on('pageCreated articleCreated magazineCreated', resetNavigator) - .on('pageMoved articleMoved', resetNavigator) - .on('pageRemoved articleRemoved', resetNavigator) - } -} - -// XXX this needs to unbind events... -function clearNavigator(){ - $('.navigator .indicator').hide() - clearBookmarkIndicators() - clearArticleIndicators() -} - -function resetNavigator(){ - clearNavigator() - setupNavigator() -} - - -function updateNavigator(n){ - var mag = $('.magazine') - var page = $('.page') - var bar = $('.navigator .bar') - var pos = $('.navigator .indicator') - - var pn = page.length - - var bW = bar.width() - var mW = mag.width() - var PW = page.width() - var pW = bar.width()/pn - - if(n == null){ - // XXX this behaves erratically if the page is zoomed... - var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW) - } else { - res = pW*n - } - - // normalize the position... - res = res > 0 ? res: 0 - res = res < (bW-pW) ? res: (bW-pW) - - // set indicator position... - pos.css({ - left: res - }) -} - - - /******************************************************* bookmarks ***/ function makeBookmarkIndicator(n){