mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
reworked click and menu events...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
c21b2965ef
commit
e8c26df382
@ -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()
|
||||
}],
|
||||
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -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...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user