added multiple click support...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

index.html

@@ -759,9 +759,9 @@ $(document).ready(function(){
 					of some of the available configuration option effects.
 					</p>
 					<p>
-						<button id="downloader">build the magazine...</button>
+						<button onclick="generateMagazineDownload()">build the magazine...</button>
 						<a id="data_download" style="display:none">download...</a>
-						<input type="file" id="upload" name="file" multiple/>
+						<input type="file" id="upload" name="file" multiple onchange="handleFileSelect(event)"/>
 						Alternative layout: <a href="./layout.html">native scroll</a>, 
 						<a href="./index2.html">hand-written drag</a>
 					</p>
@@ -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, '&ndash;')))
-					*/
 					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);
-
-
 					</script>
 				</div>
 			</div>

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()){

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 scroller = data.scroller
-	var clickThreshold = data.scroller.options.clickThreshold || CLICK_THRESHOLD
+	var root = scroller.root
-	var longClickThreshold = data.scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD
+	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...