mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-18 01:01:40 +00:00
alert(...) and prompt(...) dialogs now working, still need styling...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
74e984d9bb
commit
5c0741b99a
@ -69,6 +69,23 @@ var KEYBOARD_CONFIG = {
|
||||
}
|
||||
},
|
||||
|
||||
// dialogs...
|
||||
//
|
||||
'.viewer.overlay .overlay-block.dialog': {
|
||||
title: 'Dialog',
|
||||
|
||||
Enter: doc('Accept dialog',
|
||||
function(){
|
||||
getOverlay($('.viewer')).trigger('accept')
|
||||
}),
|
||||
Esc: doc('Close dialog',
|
||||
function(){
|
||||
hideOverlay($('.viewer'))
|
||||
return false
|
||||
}),
|
||||
},
|
||||
|
||||
|
||||
|
||||
// help mode...
|
||||
//
|
||||
|
||||
73
ui/modes.js
73
ui/modes.js
@ -39,7 +39,7 @@ function makeDrawerToggler(contentRenderer, root){
|
||||
|
||||
// prepare and cleanup...
|
||||
$(element_class).remove()
|
||||
$(root).addClass('overlay')
|
||||
showInOverlay($(root))
|
||||
|
||||
// build the help...
|
||||
var doc = contentRenderer()
|
||||
@ -83,7 +83,7 @@ function makeDrawerToggler(contentRenderer, root){
|
||||
// things to cleanup...
|
||||
var _cleanup = function(){
|
||||
$(element_class).remove()
|
||||
$(root).removeClass('overlay')
|
||||
hideOverlay($(root))
|
||||
// XXX depends on body...
|
||||
body.click()
|
||||
win.off('scroll', scroll_handler)
|
||||
@ -179,50 +179,43 @@ var toggleSlideShowMode = createCSSClassToggler(
|
||||
if(action == 'on'){
|
||||
updateStatus('Slideshow...').show()
|
||||
|
||||
// XXX is this the correct way to go???
|
||||
$('.viewer').addClass('overlay')
|
||||
|
||||
// interval from user...
|
||||
// XXX make this a real UI...
|
||||
var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000)
|
||||
//var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000)
|
||||
prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000)
|
||||
.done(function(interval){
|
||||
interval = parseFloat(interval)
|
||||
|
||||
// user cancelled...
|
||||
if(interval == null){
|
||||
showStatus('Slideshow: cencelled...')
|
||||
toggleSlideShowMode('off')
|
||||
SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000
|
||||
|
||||
// XXX is this the correct way to go???
|
||||
$('.viewer').removeClass('overlay')
|
||||
showStatus('Slideshow: starting', SLIDESHOW_LOOP ? 'looped...' : 'unlooped...')
|
||||
|
||||
// XXX is this the correct way to go???
|
||||
hideOverlay($('.viewer'))
|
||||
|
||||
return
|
||||
}
|
||||
toggleSingleImageMode('on')
|
||||
_slideshow_timer = setInterval(function(){
|
||||
var cur = getImage()
|
||||
// advance the image...
|
||||
var next = SLIDESHOW_DIRECTION == 'next' ? nextImage() : prevImage()
|
||||
|
||||
SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000
|
||||
// handle slideshow end...
|
||||
if(getImageGID(cur) == getImageGID(next)){
|
||||
if(SLIDESHOW_LOOP){
|
||||
SLIDESHOW_DIRECTION == 'next' ? firstImage() : lastImage()
|
||||
} else {
|
||||
toggleSlideShowMode('off')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
showStatus('Slideshow: starting', SLIDESHOW_LOOP ? 'looped...' : 'unlooped...')
|
||||
|
||||
// XXX is this the correct way to go???
|
||||
$('.viewer').removeClass('overlay')
|
||||
|
||||
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)
|
||||
// center and trigger load events...
|
||||
centerRibbon()
|
||||
}, SLIDESHOW_INTERVAL)
|
||||
})
|
||||
// user cancelled...
|
||||
.fail(function(){
|
||||
toggleSlideShowMode('off')
|
||||
})
|
||||
|
||||
} else {
|
||||
window._slideshow_timer != null && clearInterval(_slideshow_timer)
|
||||
|
||||
75
ui/ui.js
75
ui/ui.js
@ -315,6 +315,11 @@ function showContextIndicator(cls, text){
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Modal dialogs...
|
||||
*/
|
||||
|
||||
function getOverlay(root){
|
||||
root = $(root)
|
||||
var overlay = root.find('.overlay-block')
|
||||
@ -345,9 +350,14 @@ function showInOverlay(root, data){
|
||||
|
||||
dialog
|
||||
.append(data)
|
||||
.click(function(){ event.stopPropagation() })
|
||||
.one('click', function(){
|
||||
event.stopPropagation()
|
||||
})
|
||||
overlay.find('.content')
|
||||
.click(function(){ hideOverlay(root) })
|
||||
.on('click', function(){
|
||||
overlay.trigger('close')
|
||||
hideOverlay(root)
|
||||
})
|
||||
.append(container)
|
||||
}
|
||||
|
||||
@ -359,24 +369,71 @@ function showInOverlay(root, data){
|
||||
|
||||
function hideOverlay(root){
|
||||
root.removeClass('overlay')
|
||||
root.find('.overlay-block').remove()
|
||||
root.find('.overlay-block')
|
||||
.trigger('close')
|
||||
.remove()
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************************************************ Standard dialogs ***/
|
||||
|
||||
function alert(){
|
||||
// XXX use CSS!!!
|
||||
return showInOverlay($('.viewer'), $('<span/>')
|
||||
.text(Array.apply(null, arguments).join(' ')))
|
||||
var res = $.Deferred()
|
||||
showInOverlay($('.viewer'), $('<span/>')
|
||||
.text(Array.apply(null, arguments).join(' ')))
|
||||
.addClass('alert dialog')
|
||||
.on('close accept', function(){
|
||||
res.resolve()
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
function prompt(message, dfl){
|
||||
var root = $('.viewer')
|
||||
var res = $.Deferred()
|
||||
|
||||
var form = $('<div>'+
|
||||
'<div class="text"/>'+
|
||||
'<input type="text" tabindex=1/>'+
|
||||
'<button tabindex=2>Done</button>'+
|
||||
'</div>')
|
||||
form.find('.text')
|
||||
.text(message)
|
||||
var overlay = showInOverlay(root, form)
|
||||
.addClass('prompt dialog')
|
||||
.on('close', function(){
|
||||
res.reject()
|
||||
})
|
||||
.on('accept', function(){
|
||||
res.resolve(form.find('input').attr('value'))
|
||||
hideOverlay(root)
|
||||
})
|
||||
|
||||
form.find('button')
|
||||
.click(function(){
|
||||
overlay.trigger('accept')
|
||||
})
|
||||
|
||||
var input = form.find('input')
|
||||
|
||||
input
|
||||
.focus()
|
||||
setTimeout(function(){
|
||||
input.attr('value', dfl == null ? '' : dfl)
|
||||
}, 100)
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function prompt(){
|
||||
}
|
||||
|
||||
function confirm(){
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
// vim:set ts=4 sw=4 nowrap :
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user