reworked click and menu events...

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

ui (gen4)/features/ui-single-image.js

@@ -435,28 +435,18 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 			}],
 
 		// current image clicked...
-		['imageBlockClick.pre',
+		['imageOuterBlockClick.pre',
 			function(gid){
 				if(gid == this.current
 						&& this.config['single-image-toggle-on-click']
 						&& this.toggleSingleImage('?') == 'off'){
-					// indicate that we have handled the click...
-					this.__clicked_block = true
 					this.toggleSingleImage() 
 				}
 			}],
-		['imageBlockClick.pre',
-			function(gid){
-				delete this.__clicked_block
-			}],
 		['imageClick.pre',
 			function(gid){
 				gid == this.current
 					&& this.config['single-image-toggle-on-click']
-					&& this.toggleSingleImage('?') == 'on'
-					// only handle the click if it was not handled in 
-					// imageBlockClick...
-					&& !this.__clicked_block
 					&& this.toggleSingleImage() 
 			}],
 

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

@@ -1681,6 +1681,7 @@ module.BrowseActions = core.ImageGridFeatures.Feature({
 
 //---------------------------------------------------------------------
 
+// XXX use image instead of image block in single image mode...
 var ContextActionMenu = 
 module.ContextActionMenu = core.ImageGridFeatures.Feature({
 	title: '',
@@ -1692,25 +1693,28 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 	],
 
 	handlers: [
-		['updateImage',
+		['imageMenu.pre',
 			function(_, gid){
-				var that = this
-
-				var img = this.ribbons.getImage(gid)
-
-				!img.data('context-menu') 
-					&& img
-						.data('context-menu', true)
-						.on('contextmenu', function(){
 				event.preventDefault()
 				event.stopPropagation()
 
-							var g = gid || that.ribbons.elemGID(img)
+				this
-
+					.focusImage(gid)
-							that
+					.browseActions('/Image/')
-								.focusImage(g)
+			}],
+		['imageOuterBlockMenu.pre',
+			function(_, gid){
+				// only show image menu in ribbon mode...
+				if(this.toggleSingleImage && this.toggleSingleImage('?') == 'on'){
+					return
+				}
+
+				event.preventDefault()
+				event.stopPropagation()
+
+				this
+					.focusImage(gid)
 					.browseActions('/Image/')
-						})
 			}],
 		['load',
 			function(){

ui (gen4)/features/ui.js

@@ -1280,13 +1280,30 @@ var ControlActions = actions.Actions({
 
 		This is triggered on any click on an image block.
 
-		imageClick event if triggered is triggers between the .pre()/.post()
+		imageClick event if triggered is run between the .pre()/.post()
 		stages of this event.
 
 		The .pre(..) stage of the event is called before the clicked 
 		image is focused and the .post(..) stage is called after focusing
 		is done.
 
+		NOTE: this does not account for animation.
+		`,
+		core.notUserCallable(function(gid, x, y){
+			// This is image clicked event...
+			//
+			// Not for direct use.
+		})],
+	imageOuterBlockClick: ['- Interface/Image block click event',
+		core.doc`Image outer block click event
+
+		This is triggered on click on an image block but outside of the
+		actual image.
+
+		The .pre(..) stage of the event is called before the clicked 
+		image is focused and the .post(..) stage is called after focusing
+		is done.
+
 		NOTE: this does not account for animation.
 		`,
 		core.notUserCallable(function(gid, x, y){
@@ -1312,6 +1329,62 @@ var ControlActions = actions.Actions({
 			// Not for direct use.
 		})],
 
+	// Image menu events...
+	imageBlockMenu: ['- Interface/Image block menu event',
+		core.doc`Image block menu event
+
+		This is triggered on any click on an image block.
+
+		imageMenu event if triggered is run between the .pre()/.post()
+		stages of this event.
+
+		The .pre(..) stage of the event is called before the clicked 
+		image is focused and the .post(..) stage is called after focusing
+		is done.
+
+		NOTE: this does not account for animation.
+		`,
+		core.notUserCallable(function(gid, x, y){
+			// This is image clicked event...
+			//
+			// Not for direct use.
+		})],
+	imageOuterBlockMenu: ['- Interface/Image block menu event',
+		core.doc`Image block menu event
+
+		This is triggered on menu on an image block but outside of the
+		actual image.
+
+		The .pre(..) stage of the event is called before the clicked 
+		image is focused and the .post(..) stage is called after focusing
+		is done.
+
+		NOTE: this does not account for animation.
+		`,
+		core.notUserCallable(function(gid, x, y){
+			// This is image clicked event...
+			//
+			// Not for direct use.
+		})],
+	imageMenu: ['- Interface/Image menu event',
+		core.doc`Image menu event
+
+		This is triggered only if the click/tap is made within the actual 
+		image.
+
+		The .pre(..) stage of the event is called before the clicked 
+		image is focused and the .post(..) stage is called after focusing
+		is done.
+
+		NOTE: this does not account for animation.
+		`,
+		core.notUserCallable(function(gid, x, y){
+			// This is image clicked event...
+			//
+			// Not for direct use.
+		})],
+
+
 	// XXX do not do anything on viewer focus... (???)
 	// XXX depends on .ribbons...
 	// XXX uses: .focusImage(..)
@@ -1342,7 +1415,8 @@ var ControlActions = actions.Actions({
 
 							r
 								.addClass('clickable')
-								.on('tap', handler)
+								.on('contextmenu', menuHandler)
+								.on('tap', tapHandler)
 								.data('hammer')
 									.get('tap')
 										.set({
@@ -1351,14 +1425,13 @@ var ControlActions = actions.Actions({
 										})
 						}
 					}
-				var handler = setup.handler = setup.handler 
+
-					|| function(){
+				var isImageClicked = function(event, img){
-						var img = $(event.target)
+					var img = img || $(event.target)
-						var gid = that.ribbons.elemGID(img)
 
 					// sanity check: only handle clicks on images...
 					if(!img.hasClass('image')){
-							return
+						return false
 					}
 
 					// get the offset within the image...
@@ -1392,17 +1465,26 @@ var ControlActions = actions.Actions({
 
 					// check if we clicked the image...
 					// NOTE: this assumes the image is centered...
-						var clicked_image = 
+					return (x >= dw && x <= W-dw)
-							(x >= dw && x <= W-dw)
 						&& (y >= dh && y <= H-dh)
+				}
+				var makeImageHandler = function(outerBlockEvt, blockEvt, imageEvt){
+					return function(){
+						var img = img || $(event.target)
+						var gid = that.ribbons.elemGID(img)
+						var x = event.offsetX
+						var y = event.offsetY
 
-						that.imageBlockClick
+						var clicked_image = isImageClicked(event, img)
+
+						var inner = function(){
+							that[blockEvt]
 								.chainCall(that, 
 									function(){ 
 										clicked_image ?
 											// trigger this only if we clicked
 											// within the image...
-										that.imageClick
+											that[imageEvt]
 												.chainCall(that, 
 													function(){ that.focusImage(gid) }, 
 													gid, x, y)
@@ -1411,6 +1493,18 @@ var ControlActions = actions.Actions({
 									gid, x, y)
 						}
 
+						!clicked_image ?
+							that[outerBlockEvt].chainCall(that, inner, gid, x, y)
+							: inner()
+
+					}
+				}
+
+				var tapHandler = setup.tapHandler = setup.tapHandler 
+					|| makeImageHandler('imageOuterBlockClick', 'imageBlockClick', 'imageClick')
+				var menuHandler = setup.menuHandler = setup.menuHandler 
+					|| makeImageHandler('imageOuterBlockMenu', 'imageBlockMenu', 'imageMenu')
+
 
 				// on...
 				if(state == 'on'){