mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
moved image click handling to control, still not perfect + minor fix to cuurent image indicator...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
0add177ac2
commit
f6acb36370
@ -103,7 +103,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
|||||||
'ui-slideshow',
|
'ui-slideshow',
|
||||||
|
|
||||||
// ui control...
|
// ui control...
|
||||||
'ui-clickable',
|
//'ui-clickable',
|
||||||
//'ui-direct-control-jquery',
|
//'ui-direct-control-jquery',
|
||||||
// XXX BUG: on touch down and first move this gets offset by a distance
|
// XXX BUG: on touch down and first move this gets offset by a distance
|
||||||
// not sure why...
|
// not sure why...
|
||||||
|
|||||||
@ -166,6 +166,7 @@ var CurrentImageIndicatorActions = actions.Actions({
|
|||||||
function(target, update_border, scale){
|
function(target, update_border, scale){
|
||||||
var ribbon_set = this.ribbons.getRibbonSet()
|
var ribbon_set = this.ribbons.getRibbonSet()
|
||||||
var locator = this.ribbons.getRibbonLocator()
|
var locator = this.ribbons.getRibbonLocator()
|
||||||
|
var shifting_ribbon = false
|
||||||
|
|
||||||
if(ribbon_set.length == 0){
|
if(ribbon_set.length == 0){
|
||||||
return
|
return
|
||||||
@ -216,12 +217,17 @@ var CurrentImageIndicatorActions = actions.Actions({
|
|||||||
|
|
||||||
// add marker to current ribbon...
|
// add marker to current ribbon...
|
||||||
} else {
|
} else {
|
||||||
marker.appendTo(ribbon)
|
shifting_ribbon = true
|
||||||
|
marker
|
||||||
|
// NOTE: this will prevent animating the marker
|
||||||
|
// in odd ways when switching ribbons...
|
||||||
|
.css({ display: 'none' })
|
||||||
|
.appendTo(ribbon)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// NOTE: we will update only the attrs that need to be updated...
|
// NOTE: we will update only the attrs that need to be updated...
|
||||||
var css = {}
|
var css = shifting_ribbon ? { display: '' } : {}
|
||||||
|
|
||||||
var w = cur.outerWidth(true)
|
var w = cur.outerWidth(true)
|
||||||
var h = cur.outerHeight(true)
|
var h = cur.outerHeight(true)
|
||||||
|
|||||||
@ -1537,6 +1537,7 @@ module.ShiftAnimation = core.ImageGridFeatures.Feature({
|
|||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
// Mouse...
|
// Mouse...
|
||||||
|
|
||||||
|
/*
|
||||||
// XXX add setup/taredown...
|
// XXX add setup/taredown...
|
||||||
var Clickable =
|
var Clickable =
|
||||||
module.Clickable = core.ImageGridFeatures.Feature({
|
module.Clickable = core.ImageGridFeatures.Feature({
|
||||||
@ -1597,6 +1598,7 @@ module.Clickable = core.ImageGridFeatures.Feature({
|
|||||||
}],
|
}],
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1972,6 +1974,72 @@ var ControlActions = actions.Actions({
|
|||||||
'center-off-screen-paned-images': false,
|
'center-off-screen-paned-images': false,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
toggleImageClickHandling: ['Interface/Toggle image click handling',
|
||||||
|
toggler.Toggler(null,
|
||||||
|
function(){
|
||||||
|
return this.ribbons
|
||||||
|
&& this.ribbons.viewer
|
||||||
|
//&& this.ribbons.getRibbon().data('hammer') ? 'handling-click' : 'none' },
|
||||||
|
&& this.ribbons.getRibbon().hasClass('clickable') ? 'handling-click' : 'none' },
|
||||||
|
'handling-click',
|
||||||
|
function(state){
|
||||||
|
var that = this
|
||||||
|
|
||||||
|
var setup = this.__click_handler_setup = this.__click_handler_setup
|
||||||
|
|| function(_, target){
|
||||||
|
var r = that.ribbons.getRibbon(target)
|
||||||
|
if(r.length > 0 && !r.hasClass('clickable')){
|
||||||
|
|
||||||
|
r.data('hammer') == null
|
||||||
|
&& r.hammer()
|
||||||
|
|
||||||
|
r
|
||||||
|
.addClass('clickable')
|
||||||
|
.on('tap', handler)
|
||||||
|
.data('hammer')
|
||||||
|
.get('tap')
|
||||||
|
.set({
|
||||||
|
//interval: 1,
|
||||||
|
time: 500,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var handler = setup.handler = setup.handler
|
||||||
|
|| function(){
|
||||||
|
that.focusImage(that.ribbons.getElemGID($(event.target)))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// on...
|
||||||
|
if(state == 'on'){
|
||||||
|
this.off('updateRibbon', setup)
|
||||||
|
this.on('updateRibbon', setup)
|
||||||
|
|
||||||
|
this.data.ribbon_order.forEach(function(gid){
|
||||||
|
setup.call(this, null, gid)
|
||||||
|
})
|
||||||
|
|
||||||
|
// off...
|
||||||
|
} else {
|
||||||
|
this.off('updateRibbon', setup)
|
||||||
|
|
||||||
|
this.data.ribbon_order.forEach(function(gid){
|
||||||
|
var r = that.ribbons.getRibbon(gid)
|
||||||
|
|
||||||
|
// XXX
|
||||||
|
//var h = r.data('hammer')
|
||||||
|
//h && h.destroy()
|
||||||
|
|
||||||
|
r
|
||||||
|
.removeClass('clickable')
|
||||||
|
// XXX this does not remove the hammer trigger
|
||||||
|
// ...just the jQuery handler is cleared
|
||||||
|
.off('tap')
|
||||||
|
//.removeData('hammer')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
|
||||||
makeRibbonVisible: ['- Interface/Make ribbon visible if it is off screen',
|
makeRibbonVisible: ['- Interface/Make ribbon visible if it is off screen',
|
||||||
function(target, center_off_screen){
|
function(target, center_off_screen){
|
||||||
var r = this.ribbons.getRibbon(target)
|
var r = this.ribbons.getRibbon(target)
|
||||||
@ -2051,7 +2119,8 @@ var ControlActions = actions.Actions({
|
|||||||
function(){
|
function(){
|
||||||
return this.ribbons
|
return this.ribbons
|
||||||
&& this.ribbons.viewer
|
&& this.ribbons.viewer
|
||||||
&& this.ribbons.getRibbon().data('hammer') ? 'handling-pan' : 'none' },
|
//&& this.ribbons.getRibbon().data('hammer') ? 'handling-pan' : 'none' },
|
||||||
|
&& this.ribbons.getRibbon().hasClass('draggable') ? 'handling-pan' : 'none' },
|
||||||
'handling-pan',
|
'handling-pan',
|
||||||
function(state){
|
function(state){
|
||||||
var that = this
|
var that = this
|
||||||
@ -2072,179 +2141,183 @@ var ControlActions = actions.Actions({
|
|||||||
var renderer
|
var renderer
|
||||||
|
|
||||||
|
|
||||||
var stop_scroll = this.__scroll_prevnter =
|
var stop_scroll = this.__scroll_prevnter = this.__scroll_prevnter
|
||||||
this.__scroll_prevnter || function(evt){ evt.preventDefault() }
|
|| function(evt){ evt.preventDefault() }
|
||||||
var handler = this.__pan_handler = this.__pan_handler || function(_, target){
|
var setup = this.__pan_handler_setup = this.__pan_handler_setup
|
||||||
// XXX
|
|| function(_, target){
|
||||||
var that = this
|
// XXX
|
||||||
|
var that = this
|
||||||
|
|
||||||
var r = this.ribbons.getRibbon(target)
|
var r = this.ribbons.getRibbon(target)
|
||||||
var rgid = this.ribbons.getElemGID(r)
|
var rgid = this.ribbons.getElemGID(r)
|
||||||
|
|
||||||
var data = false
|
var data = false
|
||||||
var post_handlers
|
var post_handlers
|
||||||
|
|
||||||
// setup dragging...
|
// setup dragging...
|
||||||
if(r.length > 0 && !r.hasClass('draggable')){
|
if(r.length > 0 && !r.hasClass('draggable')){
|
||||||
r
|
|
||||||
.addClass('draggable')
|
|
||||||
.hammer()
|
|
||||||
|
|
||||||
r.data('hammer')
|
r.data('hammer') == null
|
||||||
.get('pan')
|
&& r.hammer()
|
||||||
.set({
|
|
||||||
direction: Hammer.DIRECTION_HORIZONTAL,
|
|
||||||
threshold: this.config['ribbon-pan-threshold'],
|
|
||||||
})
|
|
||||||
|
|
||||||
r.on('touchmove mousemove', stop_scroll)
|
r
|
||||||
r.on('pan', function(evt){
|
.addClass('draggable')
|
||||||
//evt.stopPropagation()
|
.data('hammer')
|
||||||
|
.get('pan')
|
||||||
|
.set({
|
||||||
|
direction: Hammer.DIRECTION_HORIZONTAL,
|
||||||
|
threshold: this.config['ribbon-pan-threshold'],
|
||||||
|
})
|
||||||
|
|
||||||
// XXX stop all previous animations...
|
r.on('touchmove mousemove', stop_scroll)
|
||||||
//r.velocity("stop")
|
r.on('pan', function(evt){
|
||||||
|
//evt.stopPropagation()
|
||||||
|
|
||||||
var d = that.ribbons.dom
|
// XXX stop all previous animations...
|
||||||
var g = evt.gesture
|
//r.velocity("stop")
|
||||||
var s = that.scale
|
|
||||||
var vmin = Math.min(document.body.offsetWidth, document.body.offsetHeight)
|
|
||||||
|
|
||||||
// we just started...
|
var d = that.ribbons.dom
|
||||||
if(!data){
|
var g = evt.gesture
|
||||||
that.__control_in_progress = (that.__control_in_progress || 0) + 1
|
var s = that.scale
|
||||||
post_handlers = that.ribbonPanning.pre(that, [rgid])
|
var vmin = Math.min(document.body.offsetWidth, document.body.offsetHeight)
|
||||||
|
|
||||||
// XXX prevent IE from fighting transitions...
|
// we just started...
|
||||||
that.ribbons.preventTransitions(r)
|
if(!data){
|
||||||
|
that.__control_in_progress = (that.__control_in_progress || 0) + 1
|
||||||
|
post_handlers = that.ribbonPanning.pre(that, [rgid])
|
||||||
|
|
||||||
// store initial position...
|
// XXX prevent IE from fighting transitions...
|
||||||
data = {
|
that.ribbons.preventTransitions(r)
|
||||||
//left: d.getOffset(this).left,
|
|
||||||
left: parseFloat(($(this).transform('translate3d') || [0])[0])/100 * vmin,
|
// store initial position...
|
||||||
pointers: g.pointers.length,
|
data = {
|
||||||
|
//left: d.getOffset(this).left,
|
||||||
|
left: parseFloat(($(this).transform('translate3d') || [0])[0])/100 * vmin,
|
||||||
|
pointers: g.pointers.length,
|
||||||
|
}
|
||||||
|
|
||||||
|
// restart the renderer...
|
||||||
|
renderer = renderer && cancelAnimationFrame(renderer)
|
||||||
|
if(that.config['animation-frame-renderer']){
|
||||||
|
renderer = requestAnimationFrame(render)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// restart the renderer...
|
|
||||||
renderer = renderer && cancelAnimationFrame(renderer)
|
|
||||||
if(that.config['animation-frame-renderer']){
|
|
||||||
renderer = requestAnimationFrame(render)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// animation frame render...
|
||||||
|
if(renderer){
|
||||||
|
// queue a render...
|
||||||
|
render_data[rgid] = {
|
||||||
|
ribbon: r,
|
||||||
|
x: ((data.left + (g.deltaX / s)) / vmin * 100) + 'vmin',
|
||||||
|
}
|
||||||
|
|
||||||
// animation frame render...
|
// inline render...
|
||||||
if(renderer){
|
} else {
|
||||||
// queue a render...
|
// do the actual move...
|
||||||
render_data[rgid] = {
|
r.transform({
|
||||||
ribbon: r,
|
x: ((data.left + (g.deltaX / s)) / vmin * 100) + 'vmin',
|
||||||
x: ((data.left + (g.deltaX / s)) / vmin * 100) + 'vmin',
|
})
|
||||||
|
|
||||||
|
/* XXX this seems to offer no speed advantages
|
||||||
|
* vs. .setOffset(..) but does not play
|
||||||
|
* well with .updateRibbon(..)
|
||||||
|
*
|
||||||
|
r
|
||||||
|
.velocity('stop')
|
||||||
|
.velocity({
|
||||||
|
translateX: data.left + (g.deltaX / s),
|
||||||
|
translateY: 0,
|
||||||
|
translateZ: 0,
|
||||||
|
}, 0)
|
||||||
|
//*/
|
||||||
}
|
}
|
||||||
|
|
||||||
// inline render...
|
|
||||||
} else {
|
|
||||||
// do the actual move...
|
|
||||||
r.transform({
|
|
||||||
x: ((data.left + (g.deltaX / s)) / vmin * 100) + 'vmin',
|
|
||||||
})
|
|
||||||
|
|
||||||
/* XXX this seems to offer no speed advantages
|
// update ribbon when "pulling" with two fingers...
|
||||||
* vs. .setOffset(..) but does not play
|
//
|
||||||
* well with .updateRibbon(..)
|
// NOTE: this only happens when number of fingers
|
||||||
*
|
// changes, thus no lag should be noticeable...
|
||||||
r
|
if(g.pointers.length != data.pointers){
|
||||||
.velocity('stop')
|
data.pointers = g.pointers.length
|
||||||
.velocity({
|
|
||||||
translateX: data.left + (g.deltaX / s),
|
// load stuff if needed...
|
||||||
translateY: 0,
|
that.updateRibbon(that.ribbons.getImageByPosition('center', r))
|
||||||
translateZ: 0,
|
}
|
||||||
}, 0)
|
|
||||||
//*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// update ribbon when "pulling" with two fingers...
|
// we are done...
|
||||||
//
|
if(g.isFinal){
|
||||||
// NOTE: this only happens when number of fingers
|
data = false
|
||||||
// changes, thus no lag should be noticeable...
|
|
||||||
if(g.pointers.length != data.pointers){
|
|
||||||
data.pointers = g.pointers.length
|
|
||||||
|
|
||||||
// load stuff if needed...
|
// XXX is this the correct way to do this???
|
||||||
that.updateRibbon(that.ribbons.getImageByPosition('center', r))
|
requestAnimationFrame(function(){
|
||||||
}
|
that.makeRibbonVisible(r,
|
||||||
|
that.config['center-off-screen-paned-images'])
|
||||||
|
|
||||||
|
// XXX is this the right place for this???
|
||||||
|
that.ribbons.restoreTransitions(r)
|
||||||
|
|
||||||
// we are done...
|
// XXX add inertia....
|
||||||
if(g.isFinal){
|
// XXX
|
||||||
data = false
|
|
||||||
|
|
||||||
// XXX is this the correct way to do this???
|
// see if we need to change focus...
|
||||||
requestAnimationFrame(function(){
|
var current_ribbon = that.data.getRibbon()
|
||||||
that.makeRibbonVisible(r,
|
if(current_ribbon == rgid){
|
||||||
that.config['center-off-screen-paned-images'])
|
var central = that.ribbons.getImageByPosition('center', r)
|
||||||
|
var gid = that.ribbons.getElemGID(central)
|
||||||
|
// silently focus central image...
|
||||||
|
if(that.config['focus-central-image'] == 'silent'){
|
||||||
|
that.data.focusImage(gid)
|
||||||
|
that.ribbons.focusImage(that.current)
|
||||||
|
|
||||||
// XXX is this the right place for this???
|
// focus central image in a normal manner...
|
||||||
that.ribbons.restoreTransitions(r)
|
} else if(that.config['focus-central-image']){
|
||||||
|
that.data.focusImage(gid)
|
||||||
// XXX add inertia....
|
that.focusImage()
|
||||||
// XXX
|
}
|
||||||
|
|
||||||
// see if we need to change focus...
|
|
||||||
var current_ribbon = that.data.getRibbon()
|
|
||||||
if(current_ribbon == rgid){
|
|
||||||
var central = that.ribbons.getImageByPosition('center', r)
|
|
||||||
var gid = that.ribbons.getElemGID(central)
|
|
||||||
// silently focus central image...
|
|
||||||
if(that.config['focus-central-image'] == 'silent'){
|
|
||||||
that.data.focusImage(gid)
|
|
||||||
that.ribbons.focusImage(that.current)
|
|
||||||
|
|
||||||
// focus central image in a normal manner...
|
|
||||||
} else if(that.config['focus-central-image']){
|
|
||||||
that.data.focusImage(gid)
|
|
||||||
that.focusImage()
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// this is not time-critical so do it outside the animation...
|
// this is not time-critical so do it outside the animation...
|
||||||
|
setTimeout(function(){
|
||||||
|
that.ribbonPanning.post(that, post_handlers)
|
||||||
|
}, 0)
|
||||||
|
})
|
||||||
|
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
that.ribbonPanning.post(that, post_handlers)
|
that.__control_in_progress -= 1
|
||||||
}, 0)
|
if(that.__control_in_progress <= 0){
|
||||||
})
|
delete that.__control_in_progress
|
||||||
|
|
||||||
setTimeout(function(){
|
//that.ribbonPanning.post(that, post_handlers)
|
||||||
that.__control_in_progress -= 1
|
}
|
||||||
if(that.__control_in_progress <= 0){
|
}, that.config['control-in-progress-timeout'] || 100)
|
||||||
delete that.__control_in_progress
|
}
|
||||||
|
})
|
||||||
//that.ribbonPanning.post(that, post_handlers)
|
}
|
||||||
}
|
|
||||||
}, that.config['control-in-progress-timeout'] || 100)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// on...
|
// on...
|
||||||
if(state == 'on'){
|
if(state == 'on'){
|
||||||
// NOTE: we are resetting this to avoid multiple setting
|
// NOTE: we are resetting this to avoid multiple setting
|
||||||
// handlers...
|
// handlers...
|
||||||
this.off('updateRibbon', handler)
|
this.off('updateRibbon', setup)
|
||||||
this.on('updateRibbon', handler)
|
this.on('updateRibbon', setup)
|
||||||
|
|
||||||
this.data.ribbon_order.forEach(function(gid){
|
this.data.ribbon_order.forEach(function(gid){
|
||||||
handler.call(that, null, gid)
|
setup.call(that, null, gid)
|
||||||
})
|
})
|
||||||
|
|
||||||
// off...
|
// off...
|
||||||
} else {
|
} else {
|
||||||
this.off('updateRibbon', handler)
|
this.off('updateRibbon', setup)
|
||||||
|
|
||||||
this.data.ribbon_order.forEach(function(gid){
|
this.data.ribbon_order.forEach(function(gid){
|
||||||
var r = that.ribbons.getRibbon(gid)
|
var r = that.ribbons.getRibbon(gid)
|
||||||
|
|
||||||
var h = r.data('hammer')
|
// XXX
|
||||||
h && h.destroy()
|
//var h = r.data('hammer')
|
||||||
|
//h && h.destroy()
|
||||||
|
|
||||||
r
|
r
|
||||||
.removeClass('draggable')
|
.removeClass('draggable')
|
||||||
@ -2252,7 +2325,8 @@ var ControlActions = actions.Actions({
|
|||||||
// ...just the jQuery handler is cleared
|
// ...just the jQuery handler is cleared
|
||||||
.off('pan')
|
.off('pan')
|
||||||
.off('touchmove mousemove', stop_scroll)
|
.off('touchmove mousemove', stop_scroll)
|
||||||
.removeData('hammer')
|
// XXX
|
||||||
|
//.removeData('hammer')
|
||||||
|
|
||||||
// XXX can this be a spot for a race???
|
// XXX can this be a spot for a race???
|
||||||
renderer = renderer && cancelAnimationFrame(renderer)
|
renderer = renderer && cancelAnimationFrame(renderer)
|
||||||
@ -2374,11 +2448,13 @@ module.Control = core.ImageGridFeatures.Feature({
|
|||||||
handlers: [
|
handlers: [
|
||||||
['load',
|
['load',
|
||||||
function(){
|
function(){
|
||||||
|
this.toggleImageClickHandling('on')
|
||||||
this.toggleSwipeHandling('on')
|
this.toggleSwipeHandling('on')
|
||||||
this.toggleRibbonPanHandling('on')
|
this.toggleRibbonPanHandling('on')
|
||||||
}],
|
}],
|
||||||
['stop',
|
['stop',
|
||||||
function(){
|
function(){
|
||||||
|
this.toggleImageClickHandling('off')
|
||||||
this.toggleSwipeHandling('off')
|
this.toggleSwipeHandling('off')
|
||||||
this.toggleRibbonPanHandling('off')
|
this.toggleRibbonPanHandling('off')
|
||||||
}],
|
}],
|
||||||
|
|||||||
@ -115,6 +115,8 @@ $(function(){
|
|||||||
//'-commandline',
|
//'-commandline',
|
||||||
//'-ui-partial-ribbons',
|
//'-ui-partial-ribbons',
|
||||||
|
|
||||||
|
'-ui-clickable',
|
||||||
|
|
||||||
// XXX BUG: disabling features on this level does not
|
// XXX BUG: disabling features on this level does not
|
||||||
// work, yet works deeper down...
|
// work, yet works deeper down...
|
||||||
// Example:
|
// Example:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user