moved image click handling to control, still not perfect + minor fix to cuurent image indicator...

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

ui (gen4)/features/meta.js

@@ -103,7 +103,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'ui-slideshow',
 
 	// ui control...
-	'ui-clickable',
+	//'ui-clickable',
 	//'ui-direct-control-jquery',
 	// XXX BUG: on touch down and first move this gets offset by a distance
 	// 		not sure why...

ui (gen4)/features/ui-chrome.js

@@ -166,6 +166,7 @@ var CurrentImageIndicatorActions = actions.Actions({
 		function(target, update_border, scale){
 			var ribbon_set = this.ribbons.getRibbonSet()
 			var locator = this.ribbons.getRibbonLocator()
+			var shifting_ribbon = false
 
 			if(ribbon_set.length == 0){
 				return
@@ -216,12 +217,17 @@ var CurrentImageIndicatorActions = actions.Actions({
 
 				// add marker to current ribbon...
 				} else {
-					marker.appendTo(ribbon)
+					shifting_ribbon = true
+					marker
+						// NOTE: this will prevent animating the marker 
+						// 		in odd ways when switching ribbons...
+						.css({ display: 'none' })
+						.appendTo(ribbon)
 				}
 			}
 
 			// NOTE: we will update only the attrs that need to be updated...
-			var css = {}
+			var css = shifting_ribbon ? { display: '' } : {}
 
 			var w = cur.outerWidth(true)
 			var h = cur.outerHeight(true)

ui (gen4)/features/ui.js

@@ -1537,6 +1537,7 @@ module.ShiftAnimation = core.ImageGridFeatures.Feature({
 /*********************************************************************/
 // Mouse...
 
+/*
 // XXX add setup/taredown...
 var Clickable = 
 module.Clickable = core.ImageGridFeatures.Feature({
@@ -1597,6 +1598,7 @@ module.Clickable = core.ImageGridFeatures.Feature({
 			}],
 	],
 })
+*/
 
 
 
@@ -1972,6 +1974,72 @@ var ControlActions = actions.Actions({
 		'center-off-screen-paned-images': false,
 	},
 
+	toggleImageClickHandling: ['Interface/Toggle image click handling',
+		toggler.Toggler(null,
+			function(){ 
+				return this.ribbons 
+					&& this.ribbons.viewer 
+					//&& this.ribbons.getRibbon().data('hammer') ? 'handling-click' : 'none' },
+					&& this.ribbons.getRibbon().hasClass('clickable') ? 'handling-click' : 'none' },
+			'handling-click',
+			function(state){
+				var that = this
+
+				var setup = this.__click_handler_setup = this.__click_handler_setup 
+					|| function(_, target){
+						var r = that.ribbons.getRibbon(target)
+						if(r.length > 0 && !r.hasClass('clickable')){
+
+							r.data('hammer') == null 
+								&& r.hammer()
+
+							r
+								.addClass('clickable')
+								.on('tap', handler)
+								.data('hammer')
+									.get('tap')
+										.set({
+											//interval: 1,
+											time: 500,
+										})
+						}
+					}
+				var handler = setup.handler = setup.handler 
+					|| function(){
+						that.focusImage(that.ribbons.getElemGID($(event.target)))
+					}
+
+
+				// on...
+				if(state == 'on'){
+					this.off('updateRibbon', setup)
+					this.on('updateRibbon', setup)
+
+					this.data.ribbon_order.forEach(function(gid){
+						setup.call(this, null, gid)
+					})
+
+				// off...
+				} else {
+					this.off('updateRibbon', setup)
+
+					this.data.ribbon_order.forEach(function(gid){
+						var r = that.ribbons.getRibbon(gid)
+
+						// XXX
+						//var h = r.data('hammer')
+						//h && h.destroy()
+
+						r
+							.removeClass('clickable')
+							// XXX this does not remove the hammer trigger
+							// 		...just the jQuery handler is cleared
+							.off('tap')
+							//.removeData('hammer')
+					})
+				}
+			})],
+
 	makeRibbonVisible: ['- Interface/Make ribbon visible if it is off screen',
 		function(target, center_off_screen){
 			var r = this.ribbons.getRibbon(target)
@@ -2051,7 +2119,8 @@ var ControlActions = actions.Actions({
 			function(){ 
 				return this.ribbons 
 					&& this.ribbons.viewer 
-					&& this.ribbons.getRibbon().data('hammer') ? 'handling-pan' : 'none' },
+					//&& this.ribbons.getRibbon().data('hammer') ? 'handling-pan' : 'none' },
+					&& this.ribbons.getRibbon().hasClass('draggable') ? 'handling-pan' : 'none' },
 			'handling-pan',
 			function(state){
 				var that = this
@@ -2072,9 +2141,10 @@ var ControlActions = actions.Actions({
 				var renderer
 
 
-				var stop_scroll = this.__scroll_prevnter = 
+				var stop_scroll = this.__scroll_prevnter = this.__scroll_prevnter 
-					this.__scroll_prevnter || function(evt){ evt.preventDefault() }
+					|| function(evt){ evt.preventDefault() }
-				var handler = this.__pan_handler = this.__pan_handler || function(_, target){
+				var setup = this.__pan_handler_setup = this.__pan_handler_setup 
+					|| function(_, target){
 						// XXX
 						var that = this
 
@@ -2086,11 +2156,13 @@ var ControlActions = actions.Actions({
 
 						// setup dragging...
 						if(r.length > 0 && !r.hasClass('draggable')){
+
+							r.data('hammer') == null 
+								&& r.hammer()
+
 							r
 								.addClass('draggable')
-							.hammer()
+								.data('hammer')
-
-						r.data('hammer')
 									.get('pan')
 										.set({
 											direction: Hammer.DIRECTION_HORIZONTAL,
@@ -2229,22 +2301,23 @@ var ControlActions = actions.Actions({
 				if(state == 'on'){
 					// NOTE: we are resetting this to avoid multiple setting
 					// 		handlers...
-					this.off('updateRibbon', handler)
+					this.off('updateRibbon', setup)
-					this.on('updateRibbon', handler)
+					this.on('updateRibbon', setup)
 
 					this.data.ribbon_order.forEach(function(gid){
-						handler.call(that, null, gid)
+						setup.call(that, null, gid)
 					})
 
 				// off...
 				} else {
-					this.off('updateRibbon', handler)
+					this.off('updateRibbon', setup)
 
 					this.data.ribbon_order.forEach(function(gid){
 						var r = that.ribbons.getRibbon(gid)
 
-						var h = r.data('hammer')
+						// XXX
-						h && h.destroy()
+						//var h = r.data('hammer')
+						//h && h.destroy()
 
 						r
 							.removeClass('draggable')
@@ -2252,7 +2325,8 @@ var ControlActions = actions.Actions({
 							// 		...just the jQuery handler is cleared
 							.off('pan')
 							.off('touchmove mousemove', stop_scroll)
-							.removeData('hammer')
+							// XXX
+							//.removeData('hammer')
 
 						// XXX can this be a spot for a race???
 						renderer = renderer && cancelAnimationFrame(renderer)
@@ -2374,11 +2448,13 @@ module.Control = core.ImageGridFeatures.Feature({
 	handlers: [
 		['load',
 			function(){
+				this.toggleImageClickHandling('on')
 				this.toggleSwipeHandling('on')
 				this.toggleRibbonPanHandling('on')
 			}],
 		['stop',
 			function(){
+				this.toggleImageClickHandling('off')
 				this.toggleSwipeHandling('off')
 				this.toggleRibbonPanHandling('off')
 			}],

ui (gen4)/ui.js

@@ -115,6 +115,8 @@ $(function(){
 				//'-commandline',
 				//'-ui-partial-ribbons',
 
+				'-ui-clickable',
+
 				// XXX BUG: disabling features on this level does not 
 				// 		work, yet works deeper down...
 				// 			Example: