mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
added slideshow mode...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d7714eb0b2
commit
cf0b7ad7fc
@ -61,6 +61,25 @@ var KEYBOARD_CONFIG = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// slideshow mode...
|
||||||
|
//
|
||||||
|
'.slideshow-mode': {
|
||||||
|
title: 'Slideshow mode',
|
||||||
|
|
||||||
|
ignore: [
|
||||||
|
'Up', 'Down', 'Enter',
|
||||||
|
],
|
||||||
|
|
||||||
|
Esc: doc('Exit/stop slideshow',
|
||||||
|
function(){
|
||||||
|
toggleSlideShowMode('off')
|
||||||
|
return false
|
||||||
|
}),
|
||||||
|
S: 'Esc',
|
||||||
|
Q: 'Esc',
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// single image mode...
|
// single image mode...
|
||||||
//
|
//
|
||||||
'.single-image-mode': {
|
'.single-image-mode': {
|
||||||
@ -243,6 +262,8 @@ var KEYBOARD_CONFIG = {
|
|||||||
B: doc('Toggle theme', function(){ toggleTheme() }),
|
B: doc('Toggle theme', function(){ toggleTheme() }),
|
||||||
|
|
||||||
S: {
|
S: {
|
||||||
|
default: doc('Start slideshow',
|
||||||
|
function(){ toggleSlideShowMode('on') }),
|
||||||
ctrl: doc('Save current state',
|
ctrl: doc('Save current state',
|
||||||
function(){
|
function(){
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|||||||
54
ui/modes.js
54
ui/modes.js
@ -55,6 +55,60 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
|
|||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
var SLIDESHOW_INTERVAL = 3000
|
||||||
|
var SLIDESHOW_LOOP = true
|
||||||
|
var SLIDESHOW_DIRECTION = 'next'
|
||||||
|
|
||||||
|
// TODO account for ribbon start/end (loop or stop slideshow)
|
||||||
|
// TODO transitions...
|
||||||
|
// TODO a real setup UI (instead of prompt)
|
||||||
|
var toggleSlideShowMode = createCSSClassToggler('.viewer', '.slideshow-mode',
|
||||||
|
function(action){
|
||||||
|
if(action == 'on'){
|
||||||
|
updateStatus('Slideshow...').show()
|
||||||
|
|
||||||
|
// interval from user...
|
||||||
|
// XXX make this a real UI...
|
||||||
|
var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000)
|
||||||
|
|
||||||
|
// user cancelled...
|
||||||
|
if(interval == null){
|
||||||
|
showStatus('Slideshow: cencelled...')
|
||||||
|
toggleSlideShowMode('off')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000
|
||||||
|
|
||||||
|
showStatus('Slideshow: starting...')
|
||||||
|
|
||||||
|
toggleSingleImageMode('on')
|
||||||
|
_slideshow_timer = setInterval(function(){
|
||||||
|
var cur = getImage()
|
||||||
|
// advance the image...
|
||||||
|
var next = SLIDESHOW_DIRECTION == 'next' ? nextImage() : prevImage()
|
||||||
|
|
||||||
|
// handle slideshow end...
|
||||||
|
if(getImageGID(cur) == getImageGID(next)){
|
||||||
|
if(SLIDESHOW_LOOP){
|
||||||
|
SLIDESHOW_DIRECTION == 'next' ? firstImage() : lastImage()
|
||||||
|
} else {
|
||||||
|
toggleSlideShowMode('off')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// center and trigger load events...
|
||||||
|
centerRibbon()
|
||||||
|
}, SLIDESHOW_INTERVAL)
|
||||||
|
|
||||||
|
} else {
|
||||||
|
window._slideshow_timer != null && clearInterval(_slideshow_timer)
|
||||||
|
showStatus('Slideshow: stopped...')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
var toggleTheme = createCSSClassToggler('.viewer',
|
var toggleTheme = createCSSClassToggler('.viewer',
|
||||||
[
|
[
|
||||||
'gray',
|
'gray',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user