reworked click and menu events...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-08-23 22:54:15 +03:00
parent c21b2965ef
commit e8c26df382
3 changed files with 167 additions and 79 deletions

View File

@ -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()
}],

View File

@ -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)
that
.focusImage(g)
this
.focusImage(gid)
.browseActions('/Image/')
}],
['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(){

View File

@ -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 img = $(event.target)
var gid = that.ribbons.elemGID(img)
var isImageClicked = function(event, img){
var img = img || $(event.target)
// 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 =
(x >= dw && x <= W-dw)
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)
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'){