mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
642 lines
16 KiB
JavaScript
Executable File
642 lines
16 KiB
JavaScript
Executable File
/**********************************************************************
|
|
*
|
|
*
|
|
*
|
|
**********************************************************************/
|
|
((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
|
|
(function(require){ var module={} // make module AMD/node compatible...
|
|
/*********************************************************************/
|
|
|
|
var actions = require('lib/actions')
|
|
var features = require('lib/features')
|
|
var toggler = require('lib/toggler')
|
|
|
|
var core = require('features/core')
|
|
|
|
|
|
|
|
/*********************************************************************/
|
|
|
|
// helper...
|
|
function didAdvance(indicator){
|
|
return function(){
|
|
var img = this.data ? this.data.current : null
|
|
return function(){
|
|
if(img == null || img == this.data.current){
|
|
this.flashIndicator(indicator)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var BoundsIndicatorsActions = actions.Actions({
|
|
flashIndicator: ['- Interface/Flash an indicator',
|
|
function(direction){
|
|
if(this.ribbons.getRibbonSet().length == 0){
|
|
return
|
|
}
|
|
var cls = {
|
|
// shift up/down...
|
|
up: '.up-indicator',
|
|
down: '.down-indicator',
|
|
// hit start/end/top/bottom of view...
|
|
start: '.start-indicator',
|
|
end: '.end-indicator',
|
|
top: '.top-indicator',
|
|
bottom: '.bottom-indicator',
|
|
}[direction]
|
|
|
|
var indicator = this.dom.find(cls)
|
|
|
|
if(indicator.length == 0){
|
|
indicator = $('<div>')
|
|
.addClass(cls.replace('.', ''))
|
|
.appendTo(this.dom)
|
|
}
|
|
|
|
return indicator
|
|
// NOTE: this needs to be visible in all cases and key press
|
|
// rhythms...
|
|
.show()
|
|
.delay(100)
|
|
.fadeOut(300)
|
|
}],
|
|
})
|
|
|
|
var BoundsIndicators =
|
|
module.BoundsIndicators = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-bounds-indicators',
|
|
depends: ['ui'],
|
|
|
|
actions: BoundsIndicatorsActions,
|
|
|
|
handlers: [
|
|
// basic navigation...
|
|
['nextImage.pre lastImage.pre', didAdvance('end')],
|
|
['prevImage.pre firstImage.pre', didAdvance('start')],
|
|
['nextRibbon.pre lastRibbon.pre', didAdvance('bottom')],
|
|
['prevRibbon.pre firstRibbon.pre', didAdvance('top')],
|
|
|
|
// vertical shifting...
|
|
['shiftImageUp.pre',
|
|
function(target){
|
|
target = target || this.current
|
|
var r = this.data.getRibbonOrder(target)
|
|
|
|
var l = this.data.getImages(r).length
|
|
var l0 = this.data.getImages(0).length
|
|
|
|
return function(){
|
|
// when shifting last image of top ribbon (i.e. length == 1)
|
|
// up the state essentially will not change...
|
|
if((r == 0 && l == 1)
|
|
// we are shifting to a new empty ribbon...
|
|
|| (r == 1 && l == 1 && l0 == 0)){
|
|
this.flashIndicator('top')
|
|
} else {
|
|
this.flashIndicator('up')
|
|
}
|
|
}
|
|
}],
|
|
['shiftImageDown.pre',
|
|
function(target){
|
|
target = target || this.current
|
|
var r0 = this.data.getRibbonOrder(target)
|
|
var l = this.data.getImages(r0).length
|
|
|
|
return function(){
|
|
var r1 = this.data.getRibbonOrder(target)
|
|
if(r0 == r1 && r0 == this.data.ribbon_order.length-1 && l == 1){
|
|
this.flashIndicator('bottom')
|
|
} else {
|
|
this.flashIndicator('down')
|
|
}
|
|
}
|
|
}],
|
|
|
|
// horizontal shifting...
|
|
['shiftImageLeft.pre',
|
|
function(target){
|
|
if(target == null
|
|
//&& actions.data.getImageOrder('ribbon') == 0){
|
|
&& this.data.getImage('prev') == null){
|
|
this.flashIndicator('start')
|
|
}
|
|
}],
|
|
['shiftImageRight.pre',
|
|
function(target){
|
|
if(target == null
|
|
&& this.data.getImage('next') == null){
|
|
this.flashIndicator('end')
|
|
}
|
|
}],
|
|
],
|
|
})
|
|
|
|
|
|
|
|
//---------------------------------------------------------------------
|
|
|
|
var CurrentImageIndicatorActions = actions.Actions({
|
|
config: {
|
|
'current-image-border': 3,
|
|
'current-image-min-border': 2,
|
|
|
|
'current-image-border-timeout': 200,
|
|
'current-image-shift-timeout': 200,
|
|
|
|
'current-image-indicator-fadein': 500,
|
|
|
|
'current-image-indicator-restore-delay': 500,
|
|
|
|
// this can be:
|
|
// 'hide' - simply hide on next/prev screen action
|
|
// and show on focus image.
|
|
// 'hide-show' - hide on fast scroll through screens and
|
|
// show when slowing down.
|
|
'current-image-indicator-screen-nav-mode': 'hide',
|
|
},
|
|
|
|
updateCurrentImageIndicator: ['- Interface/Update current image indicator',
|
|
function(target, update_border, scale){
|
|
var ribbon_set = this.ribbons.getRibbonSet()
|
|
var locator = this.ribbons.getRibbonLocator()
|
|
var shifting_ribbon = false
|
|
|
|
// NOTE: we will update only the attrs that need to be updated...
|
|
var css = {}
|
|
|
|
if(ribbon_set.length == 0){
|
|
return
|
|
}
|
|
|
|
scale = scale || this.scale
|
|
|
|
var cur = this.ribbons.getImage(target)
|
|
// NOTE: cur may be unloaded...
|
|
var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon)
|
|
|
|
var marker = ribbon_set.find('.current-marker')
|
|
|
|
// remove marker if current image is not loaded...
|
|
if(cur.length == 0){
|
|
marker.hide()
|
|
return
|
|
|
|
} else {
|
|
marker.show()
|
|
}
|
|
|
|
// create marker if it does not exist...
|
|
if(marker.length == 0 && ribbon_set.length > 0){
|
|
$('<div/>')
|
|
.addClass('current-marker')
|
|
.prependTo(ribbon_set)
|
|
}
|
|
|
|
// get config...
|
|
var border = this.config['current-image-border']
|
|
var min_border = this.config['current-image-min-border']
|
|
var border_timeout = this.config['current-image-border-timeout']
|
|
|
|
/*/ XXX at this point we do not need size updating...
|
|
var w = cur.outerWidth(true)
|
|
var h = cur.outerHeight(true)
|
|
|
|
// accommodate for non-square images...
|
|
// XXX this might have problems when scaling...
|
|
if(Math.floor(w) != Math.floor(h)){
|
|
css.width = w / scale
|
|
// XXX do we ever need to set height in a ribbon???
|
|
//css.height = h / scale
|
|
|
|
// square image -> let CSS do the work...
|
|
} else {
|
|
css.width = ''
|
|
css.height = ''
|
|
}
|
|
//*/
|
|
|
|
// update border...
|
|
if(update_border !== false){
|
|
var border = Math.max(min_border, border / scale)
|
|
|
|
// set border right away...
|
|
if(update_border == 'before'){
|
|
//css.borderWidth = border
|
|
marker.css({ borderWidth: border })
|
|
|
|
// set border with a delay...
|
|
// NOTE: this is to prevent the ugly border resize before
|
|
// the scale on scale down animation starts...
|
|
} else {
|
|
setTimeout(function(){
|
|
marker.css({ borderWidth: border })
|
|
}, border_timeout)
|
|
}
|
|
}
|
|
|
|
marker.css(css)
|
|
}],
|
|
})
|
|
|
|
|
|
var CurrentImageIndicator =
|
|
module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-current-image-indicator',
|
|
depends: [
|
|
'ui',
|
|
],
|
|
|
|
actions: CurrentImageIndicatorActions,
|
|
|
|
handlers: [
|
|
// show the indicator...
|
|
['load',
|
|
function(){
|
|
var fadein = this.config['current-image-indicator-fadein']
|
|
this.updateCurrentImageIndicator()
|
|
this.dom.find('.current-marker')
|
|
.css({
|
|
display: 'block',
|
|
opacity: 0,
|
|
})
|
|
.delay(100)
|
|
.animate({
|
|
opacity: 1
|
|
}, fadein)
|
|
}],
|
|
|
|
// Change border size in the appropriate spot in the animation:
|
|
// - before animation when scaling up
|
|
// - after when scaling down
|
|
// This is done to make the visuals consistent...
|
|
['resizing.pre',
|
|
function(unit, w1){
|
|
var w0 = this[unit]
|
|
w1 = w1 || 1
|
|
|
|
w0 > w1
|
|
&& this.updateCurrentImageIndicator(null,
|
|
'before',
|
|
// NOTE: we need to get the target scale as we
|
|
// have not started resizing yet...
|
|
(w0 / w1) * this.scale)
|
|
}],
|
|
['resizingDone',
|
|
function(){
|
|
this.updateCurrentImageIndicator(null, 'before') }],
|
|
|
|
// hide and remove current image indicator...
|
|
['ribbonPanning.pre',
|
|
function(){
|
|
//* XXX do we need to restore after pan???
|
|
this.__current_image_indicator_restore_timeout
|
|
&& clearTimeout(this.__current_image_indicator_restore_timeout)
|
|
delete this.__current_image_indicator_restore_timeout
|
|
//*/
|
|
|
|
this.dom
|
|
.find('.current-marker')
|
|
.velocity({opacity: 0}, { duration: 100 })
|
|
}],
|
|
// XXX need to animate this...
|
|
['centerImage.pre',
|
|
function(){
|
|
var m = this.dom.find('.current-marker')[0]
|
|
m
|
|
&& (m.style.marginLeft = '')
|
|
}],
|
|
['ribbonPanning.post',
|
|
function(){
|
|
var that = this
|
|
this.__current_image_indicator_restore_timeout = setTimeout(function(){
|
|
that.updateCurrentImageIndicator()
|
|
|
|
var cur = that.ribbons.getImage()
|
|
var marker = that.dom.find('.current-marker')
|
|
|
|
marker[0].style.marginLeft = ''
|
|
|
|
var m = -marker[0].offsetWidth/2
|
|
var d = (marker.offset().left - cur.offset().left) / that.scale
|
|
|
|
marker[0].style.marginLeft = (m - d) + 'px'
|
|
|
|
marker
|
|
.velocity({opacity: 1}, { duration: 100 })
|
|
}, this.config['current-image-indicator-restore-delay'] || 500)
|
|
}],
|
|
|
|
// single image view -- fade in indicator after exit...
|
|
['toggleSingleImage',
|
|
function(){
|
|
if(this.toggleSingleImage('?') == 'off'){
|
|
this.dom.find('.current-marker')
|
|
.delay(150)
|
|
.animate({opacity: 1}, 100)
|
|
|
|
} else {
|
|
this.dom.find('.current-marker')
|
|
.css({ opacity: 0 })
|
|
}
|
|
}],
|
|
],
|
|
})
|
|
|
|
|
|
// XXX is it a good idea to used the same timers for all instances???
|
|
var makeIndicatorHiderOnFastAction = function(hide_timeout){
|
|
return function(){
|
|
if(this.toggleSingleImage && this.toggleSingleImage('?') == 'on'){
|
|
return
|
|
}
|
|
|
|
var that = this
|
|
var m = this.dom.find('.current-marker')
|
|
var t = this.config[hide_timeout]
|
|
|
|
var cur = this.current
|
|
|
|
return function(){
|
|
// delay fadeout...
|
|
if(cur != this.current
|
|
&& m.css('opacity') == 1
|
|
&& this.__current_indicator_t0 == null){
|
|
this.__current_indicator_t0 = setTimeout(function(){
|
|
delete that.__current_indicator_t0
|
|
m.css({ opacity: 0 })
|
|
}, t)
|
|
}
|
|
|
|
// cancel/delay previous fadein...
|
|
this.__current_indicator_t1 != null
|
|
&& clearTimeout(this.__current_indicator_t1)
|
|
|
|
// cancel fadeout and do fadein...
|
|
this.__current_indicator_t1 = setTimeout(function(){
|
|
delete that.__current_indicator_t1
|
|
|
|
// cancel fadeout...
|
|
that.__current_indicator_t0 != null
|
|
&& clearTimeout(that.__current_indicator_t0)
|
|
delete that.__current_indicator_t0
|
|
|
|
// show...
|
|
m.animate({ opacity: 1 })
|
|
}, t-50)
|
|
}
|
|
}
|
|
}
|
|
|
|
var CurrentImageIndicatorHideOnFastScreenNav =
|
|
module.CurrentImageIndicatorHideOnFastScreenNav = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-current-image-indicator-hide-on-fast-screen-nav',
|
|
|
|
|
|
depends: [
|
|
'ui',
|
|
'ui-current-image-indicator'
|
|
],
|
|
exclusive: ['ui-current-image-indicator-hide'],
|
|
|
|
config: {
|
|
'current-image-indicator-hide-threshold': 100,
|
|
|
|
'current-image-indicator-screen-hide-threshold': 100,
|
|
},
|
|
|
|
handlers: [
|
|
// hide indicator on next/prev...
|
|
['prevImage.pre nextImage.pre',
|
|
makeIndicatorHiderOnFastAction('current-image-indicator-hide-threshold')],
|
|
['prevScreen.pre nextScreen.pre',
|
|
makeIndicatorHiderOnFastAction('current-image-indicator-screen-hide-threshold')],
|
|
],
|
|
})
|
|
|
|
var CurrentImageIndicatorHideOnScreenNav =
|
|
module.CurrentImageIndicatorHideOnScreenNav = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-current-image-indicator-hide-on-screen-nav',
|
|
|
|
|
|
depends: [
|
|
'ui',
|
|
'ui-current-image-indicator'
|
|
],
|
|
exclusive: ['ui-current-image-indicator-hide'],
|
|
|
|
|
|
handlers: [
|
|
// this does the following:
|
|
// - hide on screen jump
|
|
// - show on any other action
|
|
//
|
|
// NOTE: we use .pre events here to see if we have moved...
|
|
['prevScreen.post nextScreen.post',
|
|
function(){
|
|
var m = this.dom.find('.current-marker')
|
|
|
|
m.css({ opacity: 0 })
|
|
}],
|
|
['focusImage.post',
|
|
function(){
|
|
var m = this.dom.find('.current-marker')
|
|
|
|
m.css({ opacity: '' })
|
|
}],
|
|
],
|
|
})
|
|
|
|
|
|
|
|
//---------------------------------------------------------------------
|
|
// XXX this should:
|
|
// - float to the left of a ribbon if image #1 is fully visible (working)
|
|
// - float at left of viewer if image #1 is off screen...
|
|
// - float on the same level as the base ribbon...
|
|
|
|
// XXX make this an action...
|
|
var updateBaseRibbonIndicator = function(img){
|
|
var scale = this.scale
|
|
var base = this.ribbons.getRibbon('base')
|
|
img = this.ribbons.getImage(img)
|
|
var m = base.find('.base-ribbon-marker')
|
|
|
|
if(base.length == 0){
|
|
return
|
|
}
|
|
|
|
if(m.length == 0){
|
|
m = this.dom.find('.base-ribbon-marker')
|
|
|
|
// make the indicator...
|
|
if(m.length == 0){
|
|
m = $('<div>')
|
|
.addClass('base-ribbon-marker')
|
|
.text('base ribbon')
|
|
}
|
|
|
|
m.prependTo(base)
|
|
}
|
|
|
|
// XXX this is wrong -- need to calculate the offset after the move and not now...
|
|
if(base.offset().left < 0){
|
|
m.css('left', (img.position().left + img.width()/2 - this.dom.width()/2) / scale)
|
|
|
|
} else {
|
|
m.css('left', '')
|
|
}
|
|
}
|
|
|
|
var BaseRibbonIndicator =
|
|
module.BaseRibbonIndicator = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-base-ribbon-indicator',
|
|
depends: ['ui'],
|
|
|
|
handlers: [
|
|
// move marker to current image...
|
|
['focusImage.pre',
|
|
function(target){
|
|
updateBaseRibbonIndicator.call(this, target)
|
|
}],
|
|
// prevent animations when focusing ribbons...
|
|
['focusRibbon.pre setBaseRibbon',
|
|
function(){
|
|
updateBaseRibbonIndicator.call(this)
|
|
|
|
/*
|
|
this.ribbons.preventTransitions(m)
|
|
return function(){
|
|
this.ribbons.restoreTransitions(m)
|
|
}
|
|
*/
|
|
}],
|
|
]
|
|
})
|
|
|
|
|
|
var PassiveBaseRibbonIndicator =
|
|
module.PassiveBaseRibbonIndicator = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-passive-base-ribbon-indicator',
|
|
depends: ['ui'],
|
|
|
|
config: {
|
|
'ui-show-passive-base-ribbon-indicator': true,
|
|
},
|
|
|
|
actions: actions.Actions({
|
|
togglePassiveBaseRibbonIndicator: ['Interface/Passive base ribbon indicator',
|
|
toggler.CSSClassToggler(
|
|
function(){ return this.dom },
|
|
'show-passive-base-ribbon-indicator',
|
|
function(state){
|
|
this.config['ui-show-passive-base-ribbon-indicator'] = state == 'on' }) ],
|
|
}),
|
|
|
|
handlers: [
|
|
['start',
|
|
function(){
|
|
this.togglePassiveBaseRibbonIndicator(
|
|
this.config['ui-show-passive-base-ribbon-indicator'] ?
|
|
'on' : 'off')
|
|
}]
|
|
],
|
|
})
|
|
|
|
|
|
|
|
//---------------------------------------------------------------------
|
|
|
|
// XXX make this work in browser
|
|
var UIScaleActions = actions.Actions({
|
|
config: {
|
|
// XXX
|
|
'ui-scale-modes': {
|
|
desktop: 0,
|
|
touch: 3,
|
|
},
|
|
},
|
|
|
|
// XXX need to account for scale in PartialRibbons
|
|
// XXX should this be browser API???
|
|
// XXX this does not re-scale the ribbons correctly in nw0.13
|
|
toggleInterfaceScale: ['Interface/Interface modes',
|
|
core.makeConfigToggler('ui-scale-mode',
|
|
function(){ return Object.keys(this.config['ui-scale-modes']) },
|
|
function(state){
|
|
var gui = requirejs('nw.gui')
|
|
var win = gui.Window.get()
|
|
|
|
|
|
this.ribbons.preventTransitions()
|
|
|
|
var w = this.screenwidth
|
|
|
|
// NOTE: scale = Math.pow(1.2, zoomLevel)
|
|
// XXX in nw0.13 this appears to be async...
|
|
win.zoomLevel = this.config['ui-scale-modes'][state] || 0
|
|
|
|
this.screenwidth = w
|
|
this.centerViewer()
|
|
|
|
this.ribbons.restoreTransitions()
|
|
})],
|
|
})
|
|
|
|
|
|
// XXX enable scale loading...
|
|
// ...need to make this play nice with restoring scale on startup...
|
|
var UIScale =
|
|
module.UIScale = core.ImageGridFeatures.Feature({
|
|
title: '',
|
|
doc: '',
|
|
|
|
tag: 'ui-scale',
|
|
depends: [
|
|
'ui',
|
|
],
|
|
|
|
actions: UIScaleActions,
|
|
|
|
// XXX test if in:
|
|
// - chrome app
|
|
// - desktop
|
|
// - mobile
|
|
isApplicable: function(){ return this.runtime.desktop },
|
|
|
|
// XXX show main window...
|
|
handlers: [
|
|
['start',
|
|
function(){
|
|
// XXX this messes up ribbon scale...
|
|
// ...too close/fast?
|
|
//this.toggleInterfaceScale('!')
|
|
}],
|
|
],
|
|
})
|
|
|
|
|
|
|
|
|
|
/**********************************************************************
|
|
* vim:set ts=4 sw=4 : */ return module })
|