mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-01 11:50:07 +00:00
some refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
55a38d6b9e
commit
9316998873
228
ui/index.html
228
ui/index.html
@ -303,15 +303,6 @@ function toggleImageMarkBlock(image){
|
|||||||
return state
|
return state
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextMarkedImage(){
|
|
||||||
// XXX
|
|
||||||
}
|
|
||||||
function prevMarkedImage(){
|
|
||||||
// XXX
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// XXX should we use the createCSSClassToggler for this?
|
// XXX should we use the createCSSClassToggler for this?
|
||||||
// XXX revise: does extra stuff...
|
// XXX revise: does extra stuff...
|
||||||
function toggleImageProportions(mode){
|
function toggleImageProportions(mode){
|
||||||
@ -377,6 +368,9 @@ function createRibbon(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// NOTE: if this returns null, it means that the element is smallest in
|
// NOTE: if this returns null, it means that the element is smallest in
|
||||||
// target ribbon -- first position.
|
// target ribbon -- first position.
|
||||||
function getImageBefore(image, ribbon, visible_only){
|
function getImageBefore(image, ribbon, visible_only){
|
||||||
@ -405,65 +399,6 @@ function getImageBefore(image, ribbon, visible_only){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// basic navigation actions...
|
|
||||||
function nextImage(){
|
|
||||||
return centerImage(
|
|
||||||
focusImage(
|
|
||||||
// pre marked-only mode...
|
|
||||||
//$('.current.image').next('.image')))
|
|
||||||
$('.current.image').next('.image:visible')))
|
|
||||||
}
|
|
||||||
function prevImage(){
|
|
||||||
return centerImage(
|
|
||||||
focusImage(
|
|
||||||
// pre marked-only mode...
|
|
||||||
//$('.current.image').prev('.image')))
|
|
||||||
$('.current.image').prev('.image:visible')))
|
|
||||||
}
|
|
||||||
function firstImage(){
|
|
||||||
return centerImage(
|
|
||||||
focusImage(
|
|
||||||
// pre marked-only mode...
|
|
||||||
//$('.current.image').closest('.ribbon').find('.image').first()))
|
|
||||||
$('.current.image').closest('.ribbon').find('.image').filter(':visible').first()))
|
|
||||||
}
|
|
||||||
function lastImage(){
|
|
||||||
return centerImage(
|
|
||||||
focusImage(
|
|
||||||
// pre marked-only mode...
|
|
||||||
//$('.current.image').closest('.ribbon').find('.image').last()))
|
|
||||||
$('.current.image').closest('.ribbon').find('.image').filter(':visible').last()))
|
|
||||||
}
|
|
||||||
|
|
||||||
// NOTE: if moving is 'next' these will chose the image after the current's order.
|
|
||||||
// NOTE: if an image with the same order is found, moving argument has no effect.
|
|
||||||
// XXX get move direction...
|
|
||||||
function prevRibbon(moving){
|
|
||||||
var cur = $('.current.image')
|
|
||||||
// pre marked-only mode...
|
|
||||||
//var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon'))
|
|
||||||
var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon:visible'), true)
|
|
||||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
|
||||||
var next = target.next('.image')
|
|
||||||
target = next.length > 0 ? next : target
|
|
||||||
}
|
|
||||||
return centerImage(focusImage(target))
|
|
||||||
}
|
|
||||||
// XXX get move direction...
|
|
||||||
function nextRibbon(moving){
|
|
||||||
var cur = $('.current.image')
|
|
||||||
// pre marked-only mode...
|
|
||||||
//var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon'))
|
|
||||||
var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon:visible'), true)
|
|
||||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
|
||||||
var next = target.next('.image')
|
|
||||||
target = next.length > 0 ? next : target
|
|
||||||
}
|
|
||||||
return centerImage(focusImage(target))
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function shiftTo(image, ribbon){
|
function shiftTo(image, ribbon){
|
||||||
var target = getImageBefore(image, ribbon)
|
var target = getImageBefore(image, ribbon)
|
||||||
var cur_ribbon = image.closest('.ribbon')
|
var cur_ribbon = image.closest('.ribbon')
|
||||||
@ -506,45 +441,6 @@ function shiftImage(direction, image, force_create_ribbon){
|
|||||||
return image
|
return image
|
||||||
}
|
}
|
||||||
|
|
||||||
// short-hand methods...
|
|
||||||
// XXX get move direction...
|
|
||||||
function _shiftImageTo(image, direction, moving, force_create_ribbon){
|
|
||||||
if(image == null){
|
|
||||||
image = $('.current.image')
|
|
||||||
}
|
|
||||||
|
|
||||||
// account move for direction...
|
|
||||||
// XXX get the value from some place more logical than the argument...
|
|
||||||
var a = moving == 'prev' ? 'prev' : 'next'
|
|
||||||
var b = moving == 'prev' ? 'next' : 'prev'
|
|
||||||
var target = image[a]('.image')
|
|
||||||
|
|
||||||
target = target.length == 0 ? image[b]() : target
|
|
||||||
|
|
||||||
// XXX should this be in here or coupled later via an event???
|
|
||||||
flashIndicator(direction)
|
|
||||||
|
|
||||||
shiftImage(direction, image, force_create_ribbon)
|
|
||||||
// XXX does this need to be animated???
|
|
||||||
return centerImage(focusImage(target), 'css')
|
|
||||||
}
|
|
||||||
function shiftImageUp(image){
|
|
||||||
return _shiftImageTo(image, 'prev')
|
|
||||||
}
|
|
||||||
function shiftImageDown(image){
|
|
||||||
return _shiftImageTo(image, 'next')
|
|
||||||
}
|
|
||||||
function shiftImageUpNewRibbon(image){
|
|
||||||
return _shiftImageTo(image, 'prev', true)
|
|
||||||
}
|
|
||||||
function shiftImageDownNewRibbon(image){
|
|
||||||
return _shiftImageTo(image, 'prev', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// TODO manual image ordering (shiftLeft/shiftRight functions)
|
|
||||||
// XXX
|
|
||||||
|
|
||||||
|
|
||||||
function focusImage(image){
|
function focusImage(image){
|
||||||
image.closest('.viewer').find('.current.image').removeClass('current')
|
image.closest('.viewer').find('.current.image').removeClass('current')
|
||||||
@ -600,6 +496,119 @@ function centerImage(image, mode){
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* User actions
|
||||||
|
*/
|
||||||
|
|
||||||
|
// basic navigation actions...
|
||||||
|
function nextImage(){
|
||||||
|
return centerImage(
|
||||||
|
focusImage(
|
||||||
|
// pre marked-only mode...
|
||||||
|
//$('.current.image').next('.image')))
|
||||||
|
$('.current.image').next('.image:visible')))
|
||||||
|
}
|
||||||
|
function prevImage(){
|
||||||
|
return centerImage(
|
||||||
|
focusImage(
|
||||||
|
// pre marked-only mode...
|
||||||
|
//$('.current.image').prev('.image')))
|
||||||
|
$('.current.image').prev('.image:visible')))
|
||||||
|
}
|
||||||
|
function firstImage(){
|
||||||
|
return centerImage(
|
||||||
|
focusImage(
|
||||||
|
// pre marked-only mode...
|
||||||
|
//$('.current.image').closest('.ribbon').find('.image').first()))
|
||||||
|
$('.current.image').closest('.ribbon').find('.image').filter(':visible').first()))
|
||||||
|
}
|
||||||
|
function lastImage(){
|
||||||
|
return centerImage(
|
||||||
|
focusImage(
|
||||||
|
// pre marked-only mode...
|
||||||
|
//$('.current.image').closest('.ribbon').find('.image').last()))
|
||||||
|
$('.current.image').closest('.ribbon').find('.image').filter(':visible').last()))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function nextMarkedImage(){
|
||||||
|
// XXX
|
||||||
|
}
|
||||||
|
function prevMarkedImage(){
|
||||||
|
// XXX
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// NOTE: if moving is 'next' these will chose the image after the current's order.
|
||||||
|
// NOTE: if an image with the same order is found, moving argument has no effect.
|
||||||
|
// XXX get move direction...
|
||||||
|
function prevRibbon(moving){
|
||||||
|
var cur = $('.current.image')
|
||||||
|
// pre marked-only mode...
|
||||||
|
//var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon'))
|
||||||
|
var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon:visible'), true)
|
||||||
|
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||||
|
var next = target.next('.image')
|
||||||
|
target = next.length > 0 ? next : target
|
||||||
|
}
|
||||||
|
return centerImage(focusImage(target))
|
||||||
|
}
|
||||||
|
// XXX get move direction...
|
||||||
|
function nextRibbon(moving){
|
||||||
|
var cur = $('.current.image')
|
||||||
|
// pre marked-only mode...
|
||||||
|
//var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon'))
|
||||||
|
var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon:visible'), true)
|
||||||
|
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||||
|
var next = target.next('.image')
|
||||||
|
target = next.length > 0 ? next : target
|
||||||
|
}
|
||||||
|
return centerImage(focusImage(target))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// XXX get move direction...
|
||||||
|
function _shiftImageTo(image, direction, moving, force_create_ribbon){
|
||||||
|
if(image == null){
|
||||||
|
image = $('.current.image')
|
||||||
|
}
|
||||||
|
|
||||||
|
// account move for direction...
|
||||||
|
// XXX get the value from some place more logical than the argument...
|
||||||
|
var a = moving == 'prev' ? 'prev' : 'next'
|
||||||
|
var b = moving == 'prev' ? 'next' : 'prev'
|
||||||
|
var target = image[a]('.image')
|
||||||
|
|
||||||
|
target = target.length == 0 ? image[b]() : target
|
||||||
|
|
||||||
|
// XXX should this be in here or coupled later via an event???
|
||||||
|
flashIndicator(direction)
|
||||||
|
|
||||||
|
shiftImage(direction, image, force_create_ribbon)
|
||||||
|
// XXX does this need to be animated???
|
||||||
|
return centerImage(focusImage(target), 'css')
|
||||||
|
}
|
||||||
|
function shiftImageUp(image){
|
||||||
|
return _shiftImageTo(image, 'prev')
|
||||||
|
}
|
||||||
|
function shiftImageDown(image){
|
||||||
|
return _shiftImageTo(image, 'next')
|
||||||
|
}
|
||||||
|
function shiftImageUpNewRibbon(image){
|
||||||
|
return _shiftImageTo(image, 'prev', true)
|
||||||
|
}
|
||||||
|
function shiftImageDownNewRibbon(image){
|
||||||
|
return _shiftImageTo(image, 'prev', false)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// TODO manual image ordering (shiftLeft/shiftRight functions)
|
||||||
|
// XXX
|
||||||
|
|
||||||
function fitNImages(n){
|
function fitNImages(n){
|
||||||
var image = $('.current.image')
|
var image = $('.current.image')
|
||||||
var size = image.outerHeight(true)
|
var size = image.outerHeight(true)
|
||||||
@ -617,6 +626,11 @@ function fitNImages(n){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* Event handlers...
|
||||||
|
*/
|
||||||
|
|
||||||
// NOTE: this is on purpose done relative...
|
// NOTE: this is on purpose done relative...
|
||||||
function clickHandler(evt){
|
function clickHandler(evt){
|
||||||
var img = $(evt.target).closest('.image')
|
var img = $(evt.target).closest('.image')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user