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
+				event.preventDefault()
+				event.stopPropagation()
 
-				var img = this.ribbons.getImage(gid)
+				this
+					.focusImage(gid)
+					.browseActions('/Image/')
+			}],
+		['imageOuterBlockMenu.pre',
+			function(_, gid){
+				// only show image menu in ribbon mode...
+				if(this.toggleSingleImage && this.toggleSingleImage('?') == 'on'){
+					return
+				}
 
-				!img.data('context-menu') 
+				event.preventDefault()
-					&& img
+				event.stopPropagation()
-						.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)
-								.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,65 +1425,85 @@ 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)
+
+					// sanity check: only handle clicks on images...
+					if(!img.hasClass('image')){
+						return false
+					}
+
+					// get the offset within the image...
+					// NOTE: this does not account for border width, this
+					// 		clicks on the top/left border will result in 
+					// 		negative values...
+					var x = event.offsetX
+					var y = event.offsetY
+					var W = img[0].offsetWidth
+					var H = img[0].offsetHeight
+
+					// get preview size...
+					// NOTE: this is not normalized to image block size...
+					// NOTE: we do not need to account for orientation 
+					// 		because the margins will take care of it for
+					// 		us...
+					// 		XXX not fully sure if the reason here is
+					// 			correct, but the thing works...
+					var w = img.attr('preview-width')
+					var h = img.attr('preview-height')
+
+					// normalize preview size to image block size...
+					var s = Math.min(W/w, H/h)
+					w *= s
+					h *= s
+
+					// preview offsets within the block...
+					// NOTE: this assumes the image is centered...
+					var dw = (W-w)/2
+					var dh = (H-h)/2
+
+					// check if we clicked the image...
+					// NOTE: this assumes the image is centered...
+					return (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)
-
-						// sanity check: only handle clicks on images...
-						if(!img.hasClass('image')){
-							return
-						}
-
-						// get the offset within the image...
-						// NOTE: this does not account for border width, this
-						// 		clicks on the top/left border will result in 
-						// 		negative values...
 						var x = event.offsetX
 						var y = event.offsetY
-						var W = img[0].offsetWidth
-						var H = img[0].offsetHeight
 
-						// get preview size...
+						var clicked_image = isImageClicked(event, img)
-						// NOTE: this is not normalized to image block size...
-						// NOTE: we do not need to account for orientation 
-						// 		because the margins will take care of it for
-						// 		us...
-						// 		XXX not fully sure if the reason here is
-						// 			correct, but the thing works...
-						var w = img.attr('preview-width')
-						var h = img.attr('preview-height')
 
-						// normalize preview size to image block size...
+						var inner = function(){
-						var s = Math.min(W/w, H/h)
+							that[blockEvt]
-						w *= s
+								.chainCall(that, 
-						h *= s
+									function(){ 
+										clicked_image ?
+											// trigger this only if we clicked
+											// within the image...
+											that[imageEvt]
+												.chainCall(that, 
+													function(){ that.focusImage(gid) }, 
+													gid, x, y)
+											: that.focusImage(gid)
+									},
+									gid, x, y)
+						}
 
-						// preview offsets within the block...
+						!clicked_image ?
-						// NOTE: this assumes the image is centered...
+							that[outerBlockEvt].chainCall(that, inner, gid, x, y)
-						var dw = (W-w)/2
+							: inner()
-						var dh = (H-h)/2
 
-						// check if we clicked the image...
-						// NOTE: this assumes the image is centered...
-						var clicked_image = 
-							(x >= dw && x <= W-dw)
-							&& (y >= dh && y <= H-dh)
-
-						that.imageBlockClick
-							.chainCall(that, 
-								function(){ 
-									clicked_image ?
-										// trigger this only if we clicked
-										// within the image...
-										that.imageClick
-											.chainCall(that, 
-												function(){ that.focusImage(gid) }, 
-												gid, x, y)
-										: that.focusImage(gid)
-								},
-								gid, x, y)
 					}
+				}
+
+				var tapHandler = setup.tapHandler = setup.tapHandler 
+					|| makeImageHandler('imageOuterBlockClick', 'imageBlockClick', 'imageClick')
+				var menuHandler = setup.menuHandler = setup.menuHandler 
+					|| makeImageHandler('imageOuterBlockMenu', 'imageBlockMenu', 'imageMenu')
 
 
 				// on...