From e8c26df382816b8978d6b779885886667fce1848 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 23 Aug 2017 22:54:15 +0300 Subject: [PATCH] reworked click and menu events... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/ui-single-image.js | 12 +- ui (gen4)/features/ui-widgets.js | 34 +++-- ui (gen4)/features/ui.js | 200 +++++++++++++++++++------- 3 files changed, 167 insertions(+), 79 deletions(-) diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js index 3f724354..d455fb29 100755 --- a/ui (gen4)/features/ui-single-image.js +++ b/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() }], diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index babf83b2..faff0c65 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/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') - && img - .data('context-menu', true) - .on('contextmenu', function(){ - event.preventDefault() - event.stopPropagation() + event.preventDefault() + event.stopPropagation() - var g = gid || that.ribbons.elemGID(img) - - that - .focusImage(g) - .browseActions('/Image/') - }) + this + .focusImage(gid) + .browseActions('/Image/') }], ['load', function(){ diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index fd6e4b5f..21f16b4d 100755 --- a/ui (gen4)/features/ui.js +++ b/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 img = $(event.target) + + var isImageClicked = function(event, img){ + 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... - // 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') + var clicked_image = isImageClicked(event, img) - // normalize preview size to image block size... - var s = Math.min(W/w, H/h) - w *= s - h *= s + var inner = function(){ + that[blockEvt] + .chainCall(that, + 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... - // NOTE: this assumes the image is centered... - var dw = (W-w)/2 - var dh = (H-h)/2 + !clicked_image ? + that[outerBlockEvt].chainCall(that, inner, gid, x, y) + : inner() - // 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...