- + - + Alternative layout: native scroll, hand-written drag
@@ -1016,17 +1016,9 @@ $(document).ready(function(){ loadSettings() // setup download link... - /* - $('#downloader') - .attr('href','data:text/octet-stream;base64,'+btoa( - JSON.stringify(buildJSON(true, true)) - // this is a really odd one, Chrome seems to replace some - // entities with actual chars... - .replace(/–/g, '–'))) - */ var USE_ZIP = true var USE_DATA_URL = true - function generateMagazineZip(){ + function generateMagazineDownload(){ var zip = new JSZip() var json = JSON.stringify(buildJSON(true, true)) // this is a really odd one, Chrome seems to replace some @@ -1055,9 +1047,8 @@ $(document).ready(function(){ location.href="data:application/zip;base64,"+content } } - $('#downloader') - .click(generateMagazineZip) + /* // util... // from: http://stackoverflow.com/a/11058858 function ab2str(buf) { @@ -1072,6 +1063,7 @@ $(document).ready(function(){ } return buf; } + */ // upload... @@ -1114,9 +1106,6 @@ $(document).ready(function(){ } } - $('#upload').on('change', handleFileSelect); - - diff --git a/index2.html b/index2.html index f1f219a..ea89e49 100755 --- a/index2.html +++ b/index2.html @@ -120,7 +120,9 @@ $(document).ready(function(){ // XXX make this a default setup in the lib... window.MagazineScroller = makeScrollHandler($('.viewer'), { hScroll: true, - vScroll: false + vScroll: false, + + //enableMultiClicks: true, }).start() @@ -135,6 +137,7 @@ $(document).ready(function(){ target.hasClass('page') ? target : target.parents('.page')) if(target != -1){ + var mag = $('.magazine') setTransitionDuration(mag, INITIAL_TIME) setTransitionEasing(mag, 'ease') @@ -142,8 +145,17 @@ $(document).ready(function(){ setCurrentPage(target) } }) - .on('longClick', function(evt, data){ + /* XXX to use these set the enableMultiClicks to true in makeScrollHandler + .on('multiClick', function(evt, data){ + alert('multiple clicks... ('+data.clicks+')') }) + .on('doubleClick', function(evt, data){ + alert('double click...') + }) + .on('longClick', function(evt, data){ + alert('long click...') + }) + */ .on('swipeLeft', function(evt, data){ // ribbon mode... if(isNavigationViewRelative()){ diff --git a/lib/jli.js b/lib/jli.js index 33fac77..8e4fbab 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -485,6 +485,7 @@ function makeKeyboardHandler(keybindings, unhandled){ var CLICK_THRESHOLD = 10 var LONG_CLICK_THRESHOLD = 400 +var MULTI_CLICK_TIMEOUT = 200 // XXX add a resonable cancel scheme... // ... something similar to touch threshold but bigger... @@ -553,13 +554,14 @@ function makeScrollHandler(root, config){ bottom: root.height() - scroller.options.eventBounds } } + //togglePageDragging('on') scrolled = $(root.children()[0]) setTransitionDuration(scrolled, 0) // XXX these two are redundant... scrolling = true scroller.state = 'scrolling' scroller.options.enabelStartEvent && root.trigger('userScrollStart') - //togglePageDragging('on') + shift = getElementShift(scrolled) scale = getElementScale(scrolled) // get the user coords... @@ -571,9 +573,11 @@ function makeScrollHandler(root, config){ return false } - // XXX add limits to this... - // XXX slow down drag when at limit... // XXX try and make this adaptive to stay ahead of the lags... + // NOTE: this does not support limiting the scroll, might be done in + // the future though. + // The way to go about this is to track scrolled size in the + // callback... function moveHandler(evt){ if(ignoring){ return @@ -630,8 +634,10 @@ function makeScrollHandler(root, config){ } return } + // XXX get real transition duration... - setTransitionDuration(scrolled, 200) + scroller.resetTransitions() + //setTransitionDuration(scrolled, scroller.options.transitionDuration) x = touch ? event.changedTouches[0].pageX : evt.clientX y = touch ? event.changedTouches[0].pageY : evt.clientY @@ -663,6 +669,7 @@ function makeScrollHandler(root, config){ touch = false scrolling = false scroller.state = 'waiting' + scrolled = null bounds = null max_dx = 0 max_dy = 0 @@ -681,6 +688,10 @@ function makeScrollHandler(root, config){ hScroll: true, vScroll: true, + // sets the default transition settings while not scrolling... + transitionDuration: 200, + transitionEasing: 'ease', + // items to be ignored by the scroller... // this is a jQuery compatible selector. ignoreElements: '.noSwipe', @@ -699,11 +710,14 @@ function makeScrollHandler(root, config){ autoCancelEvents: false, eventBounds: 5, + // NOTE: if this returns false explicitly, this will stop scrolling. callback: postScrollCallback, // These are used by the default callback... + enableMultiClicks: false, clickThreshold: null, longClickThreshold: null, + multiClickTimeout: null, }, // NOTE: this is updated live but not used by the system in any way... state: 'stopped', @@ -744,6 +758,11 @@ function makeScrollHandler(root, config){ } this.state = 'stopped' return this + }, + resetTransitions: function(){ + var scrolled = this.root.children().first() + setTransitionDuration(scrolled, this.options.transitionDuration) + setTransitionEasing(scrolled, this.options.transitionEasing) } } @@ -770,12 +789,16 @@ function makeScrollHandler(root, config){ // XXX add generic snap // XXX add generic innertial scroll function postScrollCallback(data){ - var root = data.scroller.root - var clickThreshold = data.scroller.options.clickThreshold || CLICK_THRESHOLD - var longClickThreshold = data.scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD + var scroller = data.scroller + var root = scroller.root + var clickThreshold = scroller.options.clickThreshold || CLICK_THRESHOLD + var longClickThreshold = scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD + + var enableMultiClicks = scroller.options.enableMultiClicks + var multiClickTimeout = scroller.options.multiClickTimeout || MULTI_CLICK_TIMEOUT // cancel event... - if(data.scroller.state == 'canceling'){ + if(scroller.state == 'canceling'){ return root.trigger('scrollCancelled', data) } @@ -785,12 +808,41 @@ function postScrollCallback(data){ return } - // clicks and long clicks... + // clicks, double clicks and long clicks... if(Math.abs(data.distance) < clickThreshold){ if(data.duration > longClickThreshold){ return root.trigger('longClick', data) } - return root.trigger('shortClick', data) + if(!enableMultiClicks){ + return root.trigger('shortClick', data) + + } else { + if(scroller._clicks == null){ + scroller._clicks = 1 + } else { + scroller._clicks += 1 + } + + // kill any previous waits... + if(scroller._click_timeout_id != null){ + clearTimeout(scroller._click_timeout_id) + } + + // wait for the next click... + scroller._click_timeout_id = setTimeout(function(){ + var clicks = scroller._clicks + data.clicks = clicks + if(clicks == 1){ + root.trigger('shortClick', data) + } else if(clicks == 2){ + root.trigger('doubleClick', data) + } else { + root.trigger('multiClick', data) + } + scroller._clicks = null + scroller._click_timeout_id = null + }, multiClickTimeout) + } } // left/right swipes...