started experimenting with indirect control + hammer.js...

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

ui (gen4)/ext-lib/jquery.hammer.js

@@ -0,0 +1,33 @@
+(function(factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'hammerjs'], factory);
+    } else if (typeof exports === 'object') {
+        factory(require('jquery'), require('hammerjs'));
+    } else {
+        factory(jQuery, Hammer);
+    }
+}(function($, Hammer) {
+    function hammerify(el, options) {
+        var $el = $(el);
+        if(!$el.data("hammer")) {
+            $el.data("hammer", new Hammer($el[0], options));
+        }
+    }
+
+    $.fn.hammer = function(options) {
+        return this.each(function() {
+            hammerify(this, options);
+        });
+    };
+
+    // extend the emit method to also trigger jQuery events
+    Hammer.Manager.prototype.emit = (function(originalEmit) {
+        return function(type, data) {
+            originalEmit.call(this, type, data);
+            $(this.element).trigger({
+                type: type,
+                gesture: data
+            });
+        };
+    })(Hammer.Manager.prototype.emit);
+}));

ui (gen4)/features/meta.js

@@ -90,6 +90,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	// 		not sure why...
 	// 		...seems to be related to scaling
 	//'ui-direct-control-gsap',
+	'ui-indirect-control',
 
 	// experimental and optional features...
 	//'auto-single-image',

ui (gen4)/features/ui.js

@@ -2780,10 +2780,82 @@ module.DirectControlGSAP = core.ImageGridFeatures.Feature({
 })
 
 
+// XXX load state from config...
+// XXX sometimes this makes the indicator hang for longer than needed...
+// XXX try direct control with hammer.js
+// XXX use this with hammer.js taps...
+var IndirectControl = 
+module.IndirectControl = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-indirect-control',
+	// XXX is this correct???
+	exclusive: ['ui-direct-control'],
+	depends: ['ui'],
+
+	config: {
+	},
+
+	actions: actions.Actions({
+		toggleSwipeHandling:['Interface/Toggle indirect control swipe handling',
+			Toggler(null,
+				function(_, state){
+
+					if(state == null){
+						return this.__touch_handler || 'none'
+
+					// on...
+					} else if(state == 'handling-swipes'){
+						var that = this
+						var viewer = this.ribbons.viewer
+
+						// prevent multiple handlers...
+						if(this.__touch_handler){
+							return
+						}
+
+						viewer.hammer()
+
+						var h = this.__touch_handler = viewer.data('hammer')
+						h.get('swipe').set({direction: Hammer.DIRECTION_ALL})
+
+						viewer
+							.on('swipeleft', function(){ that.nextImage() })
+							.on('swiperight', function(){ that.prevImage() })
+							.on('swipeup', function(){ that.shiftImageUp() })
+							.on('swipedown', function(){ that.shiftImageDown() })
+
+					// off...
+					} else {
+						this.ribbons.viewer
+							.off('swipeleft')
+							.off('swiperight')
+							.off('swipeup')
+							.off('swipedown')
+							.removeData('hammer')
+						delete this.__touch_handler
+					}
+
+				},
+				'handling-swipes')],
+	}),
+
+	handlers: [
+		['load', 
+			function(){ a.toggleSwipeHandling('on') }],
+		['stop', 
+			function(){ a.toggleSwipeHandling('off') }],
+	],
+})
+
+
 
 //---------------------------------------------------------------------
 
 // XXX make this work for external links in a stable manner...
+// 		...a bit unpredictable when working in combination with history
+// 		feature -- need to stop them from competing...
 var URLHash = 
 module.URLHash = core.ImageGridFeatures.Feature({
 	title: 'Handle URL hash',

ui (gen4)/index.html

@@ -173,13 +173,21 @@ typeof(require) != 'undefined' && require('nw.gui').Window.get().showDevTools()
 </script>
 
 
+<!-- jQuery -->
 <script src="ext-lib/jquery.js"></script>
 <script src="ext-lib/jquery-ui.js"></script>
 <script src="ext-lib/jquery.ui.touch-punch.min.js"></script>
+
 <!--script src="ext-lib/jquery.transit.min.js"></script-->
 
+<!-- velocity.js -->
 <script src="ext-lib/velocity.min.js"></script>
 
+<!-- hammer.js -->
+<script src="ext-lib/hammer.min.js"></script>
+<script src="ext-lib/jquery.hammer.js"></script>
+
+<!-- GSAP: remove from production... -->
 <script src="ext-lib/gsap/TweenLite.min.js"></script>
 <script src="ext-lib/gsap/jquery.gsap.min.js"></script>
 <script src="ext-lib/gsap/utils/Draggable.min.js"></script>