mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +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 control...
|
||||
'ui-clickable',
|
||||
//'ui-clickable',
|
||||
//'ui-direct-control-jquery',
|
||||
// XXX BUG: on touch down and first move this gets offset by a distance
|
||||
// not sure why...
|
||||
|
||||
@ -166,6 +166,7 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
function(target, update_border, scale){
|
||||
var ribbon_set = this.ribbons.getRibbonSet()
|
||||
var locator = this.ribbons.getRibbonLocator()
|
||||
var shifting_ribbon = false
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return
|
||||
@ -216,12 +217,17 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
|
||||
// add marker to current ribbon...
|
||||
} 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...
|
||||
var css = {}
|
||||
var css = shifting_ribbon ? { display: '' } : {}
|
||||
|
||||
var w = cur.outerWidth(true)
|
||||
var h = cur.outerHeight(true)
|
||||
|
||||
@ -1537,6 +1537,7 @@ module.ShiftAnimation = core.ImageGridFeatures.Feature({
|
||||
/*********************************************************************/
|
||||
// Mouse...
|
||||
|
||||
/*
|
||||
// XXX add setup/taredown...
|
||||
var Clickable =
|
||||
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,
|
||||
},
|
||||
|
||||
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',
|
||||
function(target, center_off_screen){
|
||||
var r = this.ribbons.getRibbon(target)
|
||||
@ -2051,7 +2119,8 @@ var ControlActions = actions.Actions({
|
||||
function(){
|
||||
return this.ribbons
|
||||
&& 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',
|
||||
function(state){
|
||||
var that = this
|
||||
@ -2072,9 +2141,10 @@ var ControlActions = actions.Actions({
|
||||
var renderer
|
||||
|
||||
|
||||
var stop_scroll = this.__scroll_prevnter =
|
||||
this.__scroll_prevnter || function(evt){ evt.preventDefault() }
|
||||
var handler = this.__pan_handler = this.__pan_handler || function(_, target){
|
||||
var stop_scroll = this.__scroll_prevnter = this.__scroll_prevnter
|
||||
|| function(evt){ evt.preventDefault() }
|
||||
var setup = this.__pan_handler_setup = this.__pan_handler_setup
|
||||
|| function(_, target){
|
||||
// XXX
|
||||
var that = this
|
||||
|
||||
@ -2086,11 +2156,13 @@ var ControlActions = actions.Actions({
|
||||
|
||||
// setup dragging...
|
||||
if(r.length > 0 && !r.hasClass('draggable')){
|
||||
|
||||
r.data('hammer') == null
|
||||
&& r.hammer()
|
||||
|
||||
r
|
||||
.addClass('draggable')
|
||||
.hammer()
|
||||
|
||||
r.data('hammer')
|
||||
.data('hammer')
|
||||
.get('pan')
|
||||
.set({
|
||||
direction: Hammer.DIRECTION_HORIZONTAL,
|
||||
@ -2229,22 +2301,23 @@ var ControlActions = actions.Actions({
|
||||
if(state == 'on'){
|
||||
// NOTE: we are resetting this to avoid multiple setting
|
||||
// handlers...
|
||||
this.off('updateRibbon', handler)
|
||||
this.on('updateRibbon', handler)
|
||||
this.off('updateRibbon', setup)
|
||||
this.on('updateRibbon', setup)
|
||||
|
||||
this.data.ribbon_order.forEach(function(gid){
|
||||
handler.call(that, null, gid)
|
||||
setup.call(that, null, gid)
|
||||
})
|
||||
|
||||
// off...
|
||||
} else {
|
||||
this.off('updateRibbon', handler)
|
||||
this.off('updateRibbon', setup)
|
||||
|
||||
this.data.ribbon_order.forEach(function(gid){
|
||||
var r = that.ribbons.getRibbon(gid)
|
||||
|
||||
var h = r.data('hammer')
|
||||
h && h.destroy()
|
||||
// XXX
|
||||
//var h = r.data('hammer')
|
||||
//h && h.destroy()
|
||||
|
||||
r
|
||||
.removeClass('draggable')
|
||||
@ -2252,7 +2325,8 @@ var ControlActions = actions.Actions({
|
||||
// ...just the jQuery handler is cleared
|
||||
.off('pan')
|
||||
.off('touchmove mousemove', stop_scroll)
|
||||
.removeData('hammer')
|
||||
// XXX
|
||||
//.removeData('hammer')
|
||||
|
||||
// XXX can this be a spot for a race???
|
||||
renderer = renderer && cancelAnimationFrame(renderer)
|
||||
@ -2374,11 +2448,13 @@ module.Control = core.ImageGridFeatures.Feature({
|
||||
handlers: [
|
||||
['load',
|
||||
function(){
|
||||
this.toggleImageClickHandling('on')
|
||||
this.toggleSwipeHandling('on')
|
||||
this.toggleRibbonPanHandling('on')
|
||||
}],
|
||||
['stop',
|
||||
function(){
|
||||
this.toggleImageClickHandling('off')
|
||||
this.toggleSwipeHandling('off')
|
||||
this.toggleRibbonPanHandling('off')
|
||||
}],
|
||||
|
||||
@ -115,6 +115,8 @@ $(function(){
|
||||
//'-commandline',
|
||||
//'-ui-partial-ribbons',
|
||||
|
||||
'-ui-clickable',
|
||||
|
||||
// XXX BUG: disabling features on this level does not
|
||||
// work, yet works deeper down...
|
||||
// Example:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user