mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
moved curring image indicator handling to current image + some fixes and refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
ca1db18380
commit
071e6686d9
@ -153,6 +153,8 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
|
||||
'current-image-indicator-hide-timeout': 250,
|
||||
|
||||
'current-image-indicator-restore-delay': 500,
|
||||
|
||||
// this can be:
|
||||
// 'hide' - simply hide on next/prev screen action
|
||||
// and show on focus image.
|
||||
@ -337,6 +339,33 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
}, this.config['current-image-shift-timeout'])
|
||||
}
|
||||
}],
|
||||
|
||||
// hide and remove current image indicator...
|
||||
// NOTE: it will be reconstructed on
|
||||
// next .focusImage(..)
|
||||
['ribbonPanning.pre',
|
||||
function(){
|
||||
this.__current_image_indicator_restore_timeout
|
||||
&& clearTimeout(this.__current_image_indicator_restore_timeout)
|
||||
delete this.__current_image_indicator_restore_timeout
|
||||
|
||||
var m = this.ribbons.viewer
|
||||
.find('.current-marker')
|
||||
.velocity({opacity: 0}, {
|
||||
duration: 100,
|
||||
complete: function(){
|
||||
m.remove()
|
||||
},
|
||||
})
|
||||
|
||||
}],
|
||||
['ribbonPanning.post',
|
||||
function(){
|
||||
var that = this
|
||||
this.__current_image_indicator_restore_timeout = setTimeout(function(){
|
||||
that.updateCurrentImageIndicator()
|
||||
}, this.config['current-image-indicator-restore-delay'] || 500)
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@ -1823,6 +1823,16 @@ var ControlActions = actions.Actions({
|
||||
})],
|
||||
|
||||
// XXX still a bit lagging behind in chrome -- can we go faster??
|
||||
// XXX idea: can we use scroll to place ribbons horizontally?
|
||||
// ...the bad side to this is that it will require us to add an
|
||||
// extra container per ribbon and somehow disable the scrollbar
|
||||
// without disabling scrolling...
|
||||
// ...this can also be applied to ribbon-set for vertical
|
||||
// scrolling...
|
||||
// ...setting margins would control the limits to scrolling...
|
||||
// ...the main advantage here is that the browser will do all
|
||||
// the heavy lifting and do it faster than we can ever hope to
|
||||
// do it in JS...
|
||||
// XXX this is really slow/buggy on IE and odd on FF...
|
||||
toggleRibbonPanHandling: ['Interface/Toggle ribbon pan handling',
|
||||
toggler.Toggler(null,
|
||||
@ -1859,7 +1869,7 @@ var ControlActions = actions.Actions({
|
||||
var r = this.ribbons.getRibbon(target)
|
||||
var rgid = this.ribbons.getElemGID(r)
|
||||
|
||||
var data
|
||||
var data = false
|
||||
var post_handlers
|
||||
|
||||
// setup dragging...
|
||||
@ -1891,18 +1901,6 @@ var ControlActions = actions.Actions({
|
||||
that.__control_in_progress = (that.__control_in_progress || 0) + 1
|
||||
post_handlers = that.ribbonPanning.pre(that, [rgid])
|
||||
|
||||
// hide and remove current image indicator...
|
||||
// NOTE: it will be reconstructed on
|
||||
// next .focusImage(..)
|
||||
var m = that.ribbons.viewer
|
||||
.find('.current-marker')
|
||||
.velocity({opacity: 0}, {
|
||||
duration: 100,
|
||||
complete: function(){
|
||||
m.remove()
|
||||
},
|
||||
})
|
||||
|
||||
// store initial position...
|
||||
data = {
|
||||
//left: d.getOffset(this).left,
|
||||
@ -1961,65 +1959,71 @@ var ControlActions = actions.Actions({
|
||||
|
||||
// we are done...
|
||||
if(g.isFinal){
|
||||
var central = that.ribbons.getImageByPosition('center', r)
|
||||
|
||||
// check if central if off screen, if yes,
|
||||
// nudge it into user-accessible area...
|
||||
//
|
||||
// we are fully off screen -- focus first/last image...
|
||||
if(central == null){
|
||||
var gid = that.data.getImage(
|
||||
r.offset().left < 0 ? -1 : 0, rgid)
|
||||
|
||||
that.centerImage(gid)
|
||||
central = that.ribbons.getImage(gid)
|
||||
|
||||
// partly out the left -- show last image...
|
||||
} else if(central.offset().left < 0){
|
||||
r.transform({
|
||||
x: r.transform('x') - (central.offset().left / s)
|
||||
})
|
||||
|
||||
// partly out the right -- show first image...
|
||||
} else if(central.offset().left + (central.width()*s)
|
||||
> that.ribbons.viewer.width()){
|
||||
r.transform({
|
||||
x: r.transform('x')
|
||||
+ (that.ribbons.viewer.width()
|
||||
- (central.offset().left
|
||||
+ central.width()*s)) / s
|
||||
})
|
||||
}
|
||||
|
||||
// load stuff if needed...
|
||||
that.updateRibbon(central)
|
||||
|
||||
// XXX add inertia....
|
||||
/*
|
||||
r.velocity({
|
||||
translateX: (data.left + ((g.deltaX + (g.velocityX * 10)) / s)) +'px'
|
||||
}, 'easeInSine')
|
||||
*/
|
||||
|
||||
// see if we need to change focus...
|
||||
var current_ribbon = that.data.getRibbon()
|
||||
if(current_ribbon == rgid){
|
||||
var gid = that.ribbons.getElemGID(central)
|
||||
// silently focus central image...
|
||||
if(that.config['focus-central-image'] == 'silent'){
|
||||
that.data.focusImage(gid)
|
||||
that.ribbons.focusImage(a.current)
|
||||
|
||||
// focus central image in a normal manner...
|
||||
} else if(that.config['focus-central-image']){
|
||||
that.data.focusImage(gid)
|
||||
that.focusImage()
|
||||
}
|
||||
}
|
||||
|
||||
data = false
|
||||
|
||||
that.ribbonPanning.post(that, post_handlers)
|
||||
// XXX is this the correct way to do this???
|
||||
requestAnimationFrame(function(){
|
||||
var central = that.ribbons.getImageByPosition('center', r)
|
||||
|
||||
var rl = r.offset().left
|
||||
var cl = central && central.offset().left
|
||||
var w = central && central.width()
|
||||
var W = that.ribbons.viewer.width()
|
||||
|
||||
// check if central if off screen, if yes,
|
||||
// nudge it into user-accessible area...
|
||||
//
|
||||
// we are fully off screen -- focus first/last image...
|
||||
if(central == null){
|
||||
var gid = that.data.getImage(rl < 0 ? -1 : 0, rgid)
|
||||
|
||||
that.centerImage(gid)
|
||||
central = that.ribbons.getImage(gid)
|
||||
|
||||
// partly out the left -- show last image...
|
||||
} else if(cl < 0){
|
||||
r.transform({
|
||||
x: r.transform('x') - (cl / s)
|
||||
})
|
||||
|
||||
// partly out the right -- show first image...
|
||||
} else if(cl + (w*s) > W){
|
||||
r.transform({
|
||||
x: r.transform('x') + (W - (cl + w*s)) / s
|
||||
})
|
||||
}
|
||||
|
||||
// load stuff if needed...
|
||||
that.updateRibbon(central)
|
||||
|
||||
// XXX add inertia....
|
||||
/*
|
||||
r.velocity({
|
||||
translateX: (data.left + ((g.deltaX + (g.velocityX * 10)) / s)) +'px'
|
||||
}, 'easeInSine')
|
||||
*/
|
||||
|
||||
// see if we need to change focus...
|
||||
var current_ribbon = that.data.getRibbon()
|
||||
if(current_ribbon == rgid){
|
||||
var gid = that.ribbons.getElemGID(central)
|
||||
// silently focus central image...
|
||||
if(that.config['focus-central-image'] == 'silent'){
|
||||
that.data.focusImage(gid)
|
||||
that.ribbons.focusImage(a.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...
|
||||
setTimeout(function(){
|
||||
that.ribbonPanning.post(that, post_handlers)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
setTimeout(function(){
|
||||
that.__control_in_progress -= 1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user