mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +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)...
|
||||
|
||||
|
||||
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){
|
||||
var res
|
||||
// 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
|
||||
|
||||
@ -186,11 +186,6 @@ Populated
|
||||
|
||||
|
||||
<!-- 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="background"></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 :
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user