mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
some refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
fc7c4299e5
commit
b32480d308
164
ui/base.js
164
ui/base.js
@ -90,21 +90,6 @@ function matchN(){
|
|||||||
// XXX might need shift left/right indicators (later)...
|
// XXX might need shift left/right indicators (later)...
|
||||||
|
|
||||||
|
|
||||||
function flashIndicator(direction){
|
|
||||||
$({
|
|
||||||
prev: '.up-indicator',
|
|
||||||
next: '.down-indicator',
|
|
||||||
start: '.start-indicator',
|
|
||||||
end: '.end-indicator',
|
|
||||||
}[direction])
|
|
||||||
// NOTE: this needs to be visible in all cases and key press
|
|
||||||
// rhythms...
|
|
||||||
.show()
|
|
||||||
.delay(100)
|
|
||||||
.fadeOut(300)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function getImage(gid){
|
function getImage(gid){
|
||||||
var res
|
var res
|
||||||
// current or first (no gid given)
|
// current or first (no gid given)
|
||||||
@ -295,155 +280,6 @@ function shiftImage(direction, image, force_create_ribbon){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Update an info element
|
|
||||||
//
|
|
||||||
// align can be:
|
|
||||||
// - top
|
|
||||||
// - bottom
|
|
||||||
//
|
|
||||||
// If target is an existing info container (class: overlay-info) then
|
|
||||||
// just fill that.
|
|
||||||
function updateInfo(elem, data, target){
|
|
||||||
var viewer = $('.viewer')
|
|
||||||
target = target == null ? viewer : $(target)
|
|
||||||
elem = elem == null ? $('.overlay-info') : $(elem)
|
|
||||||
|
|
||||||
if(elem.length == 0){
|
|
||||||
elem = $('<div/>')
|
|
||||||
}
|
|
||||||
|
|
||||||
elem
|
|
||||||
.addClass('overlay-info')
|
|
||||||
.html('')
|
|
||||||
.off()
|
|
||||||
|
|
||||||
if(typeof(data) == typeof('abc')){
|
|
||||||
elem.html(data)
|
|
||||||
} else {
|
|
||||||
elem.append(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
return elem
|
|
||||||
.appendTo(target)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function showInfo(elem, data, target){
|
|
||||||
elem = elem == null ? $('.overlay-info') : elem
|
|
||||||
elem = data == null ? elem : updateInfo(elem, data, traget)
|
|
||||||
return elem.fadeIn()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function hideInfo(elem){
|
|
||||||
elem = elem == null ? $('.overlay-info') : elem
|
|
||||||
return elem.fadeOut()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Update status message
|
|
||||||
//
|
|
||||||
// NOTE: this will update message content and return it as-is, things
|
|
||||||
// like showing the message are to be done manually...
|
|
||||||
// see: showStatus(...) and showErrorStatus(...) for a higher level
|
|
||||||
// API...
|
|
||||||
// NOTE: in addition to showing user status, this will also log the
|
|
||||||
// satus to browser console...
|
|
||||||
// NOTE: the message will be logged to console via either console.log(...)
|
|
||||||
// or console.error(...), if the message starts with "Error".
|
|
||||||
// NOTE: if message is null, then just return the status element...
|
|
||||||
//
|
|
||||||
// XXX add abbility to append and clear status...
|
|
||||||
function updateStatus(message){
|
|
||||||
|
|
||||||
var elem = $('.global-status')
|
|
||||||
if(elem.length == 0){
|
|
||||||
elem = $('<div class="global-status"/>')
|
|
||||||
}
|
|
||||||
if(message == null){
|
|
||||||
return elem
|
|
||||||
}
|
|
||||||
|
|
||||||
if(typeof(message) == typeof('s') && /^error.*/i.test(message)){
|
|
||||||
console.error.apply(console, arguments)
|
|
||||||
} else {
|
|
||||||
console.log.apply(console, arguments)
|
|
||||||
}
|
|
||||||
|
|
||||||
if(arguments.length > 1){
|
|
||||||
message = Array.apply(Array, arguments).join(' ')
|
|
||||||
}
|
|
||||||
|
|
||||||
return updateInfo(elem, message)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Same as updateInfo(...) but will aslo show and animate-close the message
|
|
||||||
function showStatus(message){
|
|
||||||
return updateStatus.apply(null, arguments)
|
|
||||||
.stop()
|
|
||||||
.show()
|
|
||||||
.delay(500)
|
|
||||||
.fadeOut(800)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Same as showStatus(...) but will always add 'Error: ' to the start
|
|
||||||
// of the message
|
|
||||||
//
|
|
||||||
// NOTE: this will show the message but will not hide it.
|
|
||||||
function showErrorStatus(message){
|
|
||||||
message = Array.apply(Array, arguments)
|
|
||||||
message.splice(0, 0, 'Error:')
|
|
||||||
return updateStatus.apply(null, message)
|
|
||||||
.one('click', function(){ $(this).fadeOut() })
|
|
||||||
.stop()
|
|
||||||
.show()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// shorthand methods...
|
|
||||||
function hideStatus(){
|
|
||||||
// yes, this indeed looks funny -- to hide a status you need to show
|
|
||||||
// it without any arguments... ;)
|
|
||||||
return showStatus()
|
|
||||||
}
|
|
||||||
function getStatus(){
|
|
||||||
return updateStatus()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function makeIndicator(text){
|
|
||||||
return $('<span class="expanding-text">'+
|
|
||||||
'<span class="hidden">'+ text +'</span>'+
|
|
||||||
'<span class="shown">'+ text[0] +'</span>'+
|
|
||||||
'</span>')
|
|
||||||
}
|
|
||||||
|
|
||||||
function showGlobalIndicator(cls, text){
|
|
||||||
var c = $('.global-mode-indicators')
|
|
||||||
if(c.length == 0){
|
|
||||||
c = $('<div>')
|
|
||||||
.addClass('global-mode-indicators')
|
|
||||||
.appendTo($('.viewer'))
|
|
||||||
}
|
|
||||||
return makeIndicator(text)
|
|
||||||
.addClass(cls)
|
|
||||||
.appendTo(c)
|
|
||||||
}
|
|
||||||
function showContextIndicator(cls, text){
|
|
||||||
var c = $('.context-mode-indicators')
|
|
||||||
if(c.length == 0){
|
|
||||||
c = $('<div>')
|
|
||||||
.addClass('context-mode-indicators')
|
|
||||||
.appendTo($('.viewer'))
|
|
||||||
}
|
|
||||||
return makeIndicator(text)
|
|
||||||
.addClass(cls)
|
|
||||||
.appendTo(c)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* Constructors
|
* Constructors
|
||||||
|
|||||||
@ -186,11 +186,6 @@ Populated
|
|||||||
|
|
||||||
|
|
||||||
<!-- XXX should these be here??? -->
|
<!-- XXX should these be here??? -->
|
||||||
<div class="up-indicator"></div>
|
|
||||||
<div class="down-indicator"></div>
|
|
||||||
<div class="start-indicator"></div>
|
|
||||||
<div class="end-indicator"></div>
|
|
||||||
|
|
||||||
<div class="overlay-block">
|
<div class="overlay-block">
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="content"></div>
|
<div class="content"></div>
|
||||||
|
|||||||
175
ui/ui.js
175
ui/ui.js
@ -66,6 +66,181 @@ function autoHideCursor(elem){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function flashIndicator(direction){
|
||||||
|
var cls = {
|
||||||
|
prev: '.up-indicator',
|
||||||
|
next: '.down-indicator',
|
||||||
|
start: '.start-indicator',
|
||||||
|
end: '.end-indicator',
|
||||||
|
}[direction]
|
||||||
|
|
||||||
|
var indicator = $(cls)
|
||||||
|
|
||||||
|
if(indicator.length == 0){
|
||||||
|
indicator = $('<div>')
|
||||||
|
.addClass(cls.replace('.', ''))
|
||||||
|
.appendTo($('.viewer'))
|
||||||
|
}
|
||||||
|
|
||||||
|
return indicator
|
||||||
|
// NOTE: this needs to be visible in all cases and key press
|
||||||
|
// rhythms...
|
||||||
|
.show()
|
||||||
|
.delay(100)
|
||||||
|
.fadeOut(300)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Update an info element
|
||||||
|
//
|
||||||
|
// align can be:
|
||||||
|
// - top
|
||||||
|
// - bottom
|
||||||
|
//
|
||||||
|
// If target is an existing info container (class: overlay-info) then
|
||||||
|
// just fill that.
|
||||||
|
function updateInfo(elem, data, target){
|
||||||
|
var viewer = $('.viewer')
|
||||||
|
target = target == null ? viewer : $(target)
|
||||||
|
elem = elem == null ? $('.overlay-info') : $(elem)
|
||||||
|
|
||||||
|
if(elem.length == 0){
|
||||||
|
elem = $('<div/>')
|
||||||
|
}
|
||||||
|
|
||||||
|
elem
|
||||||
|
.addClass('overlay-info')
|
||||||
|
.html('')
|
||||||
|
.off()
|
||||||
|
|
||||||
|
if(typeof(data) == typeof('abc')){
|
||||||
|
elem.html(data)
|
||||||
|
} else {
|
||||||
|
elem.append(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
return elem
|
||||||
|
.appendTo(target)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function showInfo(elem, data, target){
|
||||||
|
elem = elem == null ? $('.overlay-info') : elem
|
||||||
|
elem = data == null ? elem : updateInfo(elem, data, traget)
|
||||||
|
return elem.fadeIn()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function hideInfo(elem){
|
||||||
|
elem = elem == null ? $('.overlay-info') : elem
|
||||||
|
return elem.fadeOut()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Update status message
|
||||||
|
//
|
||||||
|
// NOTE: this will update message content and return it as-is, things
|
||||||
|
// like showing the message are to be done manually...
|
||||||
|
// see: showStatus(...) and showErrorStatus(...) for a higher level
|
||||||
|
// API...
|
||||||
|
// NOTE: in addition to showing user status, this will also log the
|
||||||
|
// satus to browser console...
|
||||||
|
// NOTE: the message will be logged to console via either console.log(...)
|
||||||
|
// or console.error(...), if the message starts with "Error".
|
||||||
|
// NOTE: if message is null, then just return the status element...
|
||||||
|
//
|
||||||
|
// XXX add abbility to append and clear status...
|
||||||
|
function updateStatus(message){
|
||||||
|
|
||||||
|
var elem = $('.global-status')
|
||||||
|
if(elem.length == 0){
|
||||||
|
elem = $('<div class="global-status"/>')
|
||||||
|
}
|
||||||
|
if(message == null){
|
||||||
|
return elem
|
||||||
|
}
|
||||||
|
|
||||||
|
if(typeof(message) == typeof('s') && /^error.*/i.test(message)){
|
||||||
|
console.error.apply(console, arguments)
|
||||||
|
} else {
|
||||||
|
console.log.apply(console, arguments)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(arguments.length > 1){
|
||||||
|
message = Array.apply(Array, arguments).join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
return updateInfo(elem, message)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Same as updateInfo(...) but will aslo show and animate-close the message
|
||||||
|
function showStatus(message){
|
||||||
|
return updateStatus.apply(null, arguments)
|
||||||
|
.stop()
|
||||||
|
.show()
|
||||||
|
.delay(500)
|
||||||
|
.fadeOut(800)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Same as showStatus(...) but will always add 'Error: ' to the start
|
||||||
|
// of the message
|
||||||
|
//
|
||||||
|
// NOTE: this will show the message but will not hide it.
|
||||||
|
function showErrorStatus(message){
|
||||||
|
message = Array.apply(Array, arguments)
|
||||||
|
message.splice(0, 0, 'Error:')
|
||||||
|
return updateStatus.apply(null, message)
|
||||||
|
.one('click', function(){ $(this).fadeOut() })
|
||||||
|
.stop()
|
||||||
|
.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// shorthand methods...
|
||||||
|
function hideStatus(){
|
||||||
|
// yes, this indeed looks funny -- to hide a status you need to show
|
||||||
|
// it without any arguments... ;)
|
||||||
|
return showStatus()
|
||||||
|
}
|
||||||
|
function getStatus(){
|
||||||
|
return updateStatus()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// XXX move to ui.js?
|
||||||
|
function makeIndicator(text){
|
||||||
|
return $('<span class="expanding-text">'+
|
||||||
|
'<span class="hidden">'+ text +'</span>'+
|
||||||
|
'<span class="shown">'+ text[0] +'</span>'+
|
||||||
|
'</span>')
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGlobalIndicator(cls, text){
|
||||||
|
var c = $('.global-mode-indicators')
|
||||||
|
if(c.length == 0){
|
||||||
|
c = $('<div>')
|
||||||
|
.addClass('global-mode-indicators')
|
||||||
|
.appendTo($('.viewer'))
|
||||||
|
}
|
||||||
|
return makeIndicator(text)
|
||||||
|
.addClass(cls)
|
||||||
|
.appendTo(c)
|
||||||
|
}
|
||||||
|
function showContextIndicator(cls, text){
|
||||||
|
var c = $('.context-mode-indicators')
|
||||||
|
if(c.length == 0){
|
||||||
|
c = $('<div>')
|
||||||
|
.addClass('context-mode-indicators')
|
||||||
|
.appendTo($('.viewer'))
|
||||||
|
}
|
||||||
|
return makeIndicator(text)
|
||||||
|
.addClass(cls)
|
||||||
|
.appendTo(c)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
// vim:set ts=4 sw=4 nowrap :
|
// vim:set ts=4 sw=4 nowrap :
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user