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
|
||||
}
|
||||
|
||||
function nextMarkedImage(){
|
||||
// XXX
|
||||
}
|
||||
function prevMarkedImage(){
|
||||
// XXX
|
||||
}
|
||||
|
||||
|
||||
|
||||
// XXX should we use the createCSSClassToggler for this?
|
||||
// XXX revise: does extra stuff...
|
||||
function toggleImageProportions(mode){
|
||||
@ -377,6 +368,9 @@ function createRibbon(){
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// NOTE: if this returns null, it means that the element is smallest in
|
||||
// target ribbon -- first position.
|
||||
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){
|
||||
var target = getImageBefore(image, ribbon)
|
||||
var cur_ribbon = image.closest('.ribbon')
|
||||
@ -506,45 +441,6 @@ function shiftImage(direction, image, force_create_ribbon){
|
||||
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){
|
||||
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){
|
||||
var image = $('.current.image')
|
||||
var size = image.outerHeight(true)
|
||||
@ -617,6 +626,11 @@ function fitNImages(n){
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Event handlers...
|
||||
*/
|
||||
|
||||
// NOTE: this is on purpose done relative...
|
||||
function clickHandler(evt){
|
||||
var img = $(evt.target).closest('.image')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user