mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
done with this iteration of refactoring and cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d29b2bb1c9
commit
092d6a83bf
@ -789,8 +789,8 @@ function setupEvents(){
|
|||||||
.swipe({
|
.swipe({
|
||||||
swipeLeft: ImageGrid.nextImage,
|
swipeLeft: ImageGrid.nextImage,
|
||||||
swipeRight: ImageGrid.prevImage,
|
swipeRight: ImageGrid.prevImage,
|
||||||
swipeUp: shiftImageUp,
|
swipeUp: ImageGrid.shiftImageUp,
|
||||||
swipeDown: shiftImageDown
|
swipeDown: ImageGrid.shiftImageDown
|
||||||
})
|
})
|
||||||
// dragging...
|
// dragging...
|
||||||
// XXX make this work seamlessly with touchSwipe...
|
// XXX make this work seamlessly with touchSwipe...
|
||||||
@ -809,8 +809,8 @@ function setupControlElements(){
|
|||||||
$('.screen-button.next-image').click(ImageGrid.nextImage)
|
$('.screen-button.next-image').click(ImageGrid.nextImage)
|
||||||
$('.screen-button.prev-image').click(ImageGrid.prevImage)
|
$('.screen-button.prev-image').click(ImageGrid.prevImage)
|
||||||
// XXX rename classes to "shift-image-up" and "shift-image-down"...
|
// XXX rename classes to "shift-image-up" and "shift-image-down"...
|
||||||
$('.screen-button.demote').click(shiftImageUp)
|
$('.screen-button.demote').click(ImageGrid.shiftImageUp)
|
||||||
$('.screen-button.promote').click(shiftImageDown)
|
$('.screen-button.promote').click(ImageGrid.shiftImageDown)
|
||||||
$('.screen-button.zoom-in').click(ImageGrid.scaleContainerUp)
|
$('.screen-button.zoom-in').click(ImageGrid.scaleContainerUp)
|
||||||
$('.screen-button.zoom-out').click(ImageGrid.scaleContainerDown)
|
$('.screen-button.zoom-out').click(ImageGrid.scaleContainerDown)
|
||||||
// XXX
|
// XXX
|
||||||
@ -1471,177 +1471,184 @@ ImageGrid.GROUP('Zooming',
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/********************************************************** Actions **/
|
/*************************************************** Ribbon Actions **/
|
||||||
// basic actions...
|
// basic actions...
|
||||||
// NOTE: below 'direction' argument is meant in the html sence,
|
// NOTE: below 'direction' argument is meant in the html sence,
|
||||||
// i.e. next/prev...
|
// i.e. next/prev...
|
||||||
|
|
||||||
// create ribbon above/below helpers...
|
ImageGrid.GROUP('Ribbon manipulations',
|
||||||
// XXX adding a ribbon above the current is still jumpy, need to devise
|
// XXX adding a ribbon above the current is still jumpy, need to devise
|
||||||
// a cleaner way to do this...
|
// a cleaner way to do this...
|
||||||
function createRibbon(direction){
|
ImageGrid.ACTION({
|
||||||
if(direction == 'next'){
|
title: 'Create a ribbon above/below current'
|
||||||
var insert = 'insertAfter'
|
},
|
||||||
} else if(direction == 'prev') {
|
function createRibbon(direction){
|
||||||
var insert = 'insertBefore'
|
if(direction == 'next'){
|
||||||
} else {
|
var insert = 'insertAfter'
|
||||||
return false
|
} else if(direction == 'prev') {
|
||||||
}
|
var insert = 'insertBefore'
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// adding a new ribbon above the current effectively pushes the
|
// adding a new ribbon above the current effectively pushes the
|
||||||
// whole view down, so we need to compensate for this.
|
// whole view down, so we need to compensate for this.
|
||||||
// NOTE: the problem is partly caused by clicks fiering BEFORE the
|
// NOTE: the problem is partly caused by clicks fiering BEFORE the
|
||||||
// animation is done...
|
// animation is done...
|
||||||
$('.field').addClass('unanimated')
|
$('.field').addClass('unanimated')
|
||||||
|
|
||||||
if(direction == 'prev'){
|
if(direction == 'prev'){
|
||||||
$('.field').css({
|
$('.field').css({
|
||||||
'margin-top': parseInt($('.field').css('margin-top')) - $('.ribbon').outerHeight()
|
'margin-top': parseInt($('.field').css('margin-top')) - $('.ribbon').outerHeight()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// the actual insert...
|
// the actual insert...
|
||||||
var res = $('<div class="ribbon"></div>')[insert]('.current.ribbon')
|
var res = $('<div class="ribbon"></div>')[insert]('.current.ribbon')
|
||||||
|
|
||||||
// restore the animated state...
|
// restore the animated state...
|
||||||
$('.field').removeClass('unanimated')
|
$('.field').removeClass('unanimated')
|
||||||
|
|
||||||
return res
|
return res
|
||||||
}
|
}),
|
||||||
|
|
||||||
|
// XXX this uses jquery animation...
|
||||||
|
// XXX one way to optimise this is to add the lesser ribbon to the
|
||||||
|
// greater disregarding their actual order...
|
||||||
|
// XXX think about using $(...).sortChildren(...) / sortImages()
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Merge current and direction ribbon.',
|
||||||
|
doc: 'NOTE: this will take all the elements from direction '+
|
||||||
|
'ribbon and add them to current.'
|
||||||
|
},
|
||||||
|
function mergeRibbons(direction, get_order){
|
||||||
|
if(get_order == null){
|
||||||
|
get_order = getImageOrder
|
||||||
|
}
|
||||||
|
var current_ribbon = $('.current.ribbon')
|
||||||
|
var images = $('.current.ribbon')[direction]('.ribbon').children()
|
||||||
|
for(var i=0; i < images.length; i++){
|
||||||
|
var image = $(images[i])
|
||||||
|
// get previous element after which we need to put the current...
|
||||||
|
var prev_elem = getImageBefore(get_order(image), current_ribbon)
|
||||||
|
// check if we need to be before the first element...
|
||||||
|
if(prev_elem == null){
|
||||||
|
image
|
||||||
|
.detach()
|
||||||
|
.insertBefore(current_ribbon.children('.image').first())
|
||||||
|
} else {
|
||||||
|
image
|
||||||
|
.detach()
|
||||||
|
.insertAfter(prev_elem)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// animate...
|
||||||
|
$('.current.ribbon')[direction]('.ribbon')
|
||||||
|
.slideUp(function(){
|
||||||
|
$(this).remove()
|
||||||
|
$('.current.image').click()
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Reverse ribbon order',
|
||||||
|
doc: 'NOTE: this is like flipping the field vertically.',
|
||||||
|
},
|
||||||
|
function reverseRibbons(){
|
||||||
|
// reverse...
|
||||||
|
$('.field').reverseChildren()
|
||||||
|
// compensate for offset cange...
|
||||||
|
$('.current.image').click()
|
||||||
|
}))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// merge current and direction ribbon...
|
|
||||||
// NOTE: this will take all the elements from direction ribbon and add
|
/**************************************************** Image Actions **/
|
||||||
// them to current
|
ImageGrid.GROUP('Image manipulation',
|
||||||
// XXX this uses jquery animation...
|
ImageGrid.ACTION({
|
||||||
// XXX one way to optimise this is to add the lesser ribbon to the
|
title: 'Shift image in direction',
|
||||||
// greater disregarding their actual order...
|
},
|
||||||
// XXX think about using $(...).sortChildren(...) / sortImages()
|
function shiftImage(direction, get_order){
|
||||||
function mergeRibbons(direction, get_order){
|
if(get_order == null){
|
||||||
if(get_order == null){
|
get_order = getImageOrder
|
||||||
get_order = getImageOrder
|
}
|
||||||
}
|
if($('.current.ribbon')[direction]('.ribbon').length == 0){
|
||||||
var current_ribbon = $('.current.ribbon')
|
ImageGrid.createRibbon(direction)
|
||||||
var images = $('.current.ribbon')[direction]('.ribbon').children()
|
}
|
||||||
for(var i=0; i < images.length; i++){
|
|
||||||
var image = $(images[i])
|
// get previous element after which we need to put the current...
|
||||||
// get previous element after which we need to put the current...
|
var prev_elem = getImageBefore(
|
||||||
var prev_elem = getImageBefore(get_order(image), current_ribbon)
|
get_order($('.current.image')),
|
||||||
// check if we need to be before the first element...
|
$('.current.ribbon')[direction]('.ribbon'))
|
||||||
if(prev_elem == null){
|
|
||||||
image
|
// last image in ribbon, merge...
|
||||||
.detach()
|
if($('.current.ribbon').children('.image').length == 1){
|
||||||
.insertBefore(current_ribbon.children('.image').first())
|
ImageGrid.mergeRibbons(direction)
|
||||||
} else {
|
} else {
|
||||||
image
|
img = $('.current.image')
|
||||||
.detach()
|
if(img.next('.image').length == 0){
|
||||||
.insertAfter(prev_elem)
|
ImageGrid.prevImage()
|
||||||
}
|
} else {
|
||||||
}
|
ImageGrid.nextImage()
|
||||||
// animate...
|
}
|
||||||
$('.current.ribbon')[direction]('.ribbon')
|
// do the actual move...
|
||||||
.slideUp(function(){
|
if(prev_elem){
|
||||||
$(this).remove()
|
// insert element after current...
|
||||||
$('.current.image').click()
|
img
|
||||||
|
.detach()
|
||||||
|
.insertAfter(prev_elem)
|
||||||
|
} else {
|
||||||
|
// empty ribbon or fisrt element...
|
||||||
|
img
|
||||||
|
.detach()
|
||||||
|
.prependTo($('.current.ribbon')[direction]('.ribbon'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$('.current.image').click()
|
||||||
|
}),
|
||||||
|
ImageGrid.ACTION({ title: 'Shift image up', },
|
||||||
|
function shiftImageUp(){ return ImageGrid.shiftImage('prev') }),
|
||||||
|
ImageGrid.ACTION({ title: 'Shift image down', },
|
||||||
|
function shiftImageDown(){ return ImageGrid.shiftImage('next') }),
|
||||||
|
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Sort images in all ribbons',
|
||||||
|
doc: 'NOTE: this will only realign three ribbons.'
|
||||||
|
},
|
||||||
|
function sortImages(){
|
||||||
|
$('.ribbon').sortChildren(cmpImageOrder)
|
||||||
|
// compensate for offset cange...
|
||||||
|
$('.current.image').click()
|
||||||
|
}),
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Sort images via a different criteria',
|
||||||
|
doc: 'use the cmp function to update image id\'s and resort.'
|
||||||
|
},
|
||||||
|
function sortImagesVia(cmp){
|
||||||
|
// reverse ID order...
|
||||||
|
$($('.image').get().sort(cmp))
|
||||||
|
.each(function(i, e){$(e).attr({'id': i})})
|
||||||
|
// resort the images...
|
||||||
|
ImageGrid.sortImages()
|
||||||
|
}),
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Reverse order of images in all ribbons',
|
||||||
|
},
|
||||||
|
function reverseImageOrder(){
|
||||||
|
// this is done by reversing their id attr
|
||||||
|
ImageGrid.sortImagesVia(function(a, b){return cmpImageOrder(b, a)})
|
||||||
|
}),
|
||||||
|
ImageGrid.ACTION({
|
||||||
|
title: 'Sort images by their full path',
|
||||||
|
},
|
||||||
|
// XXX this should use a normalized path...
|
||||||
|
function sortImagesByPath(){
|
||||||
|
ImageGrid.sortImagesVia(function(a, b){
|
||||||
|
a = $(a).css('background-image')
|
||||||
|
b = $(b).css('background-image')
|
||||||
|
return a > b ? 1 : a < b ? -1 : 0
|
||||||
})
|
})
|
||||||
}
|
}))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*************************************************** Editor Actions **/
|
|
||||||
|
|
||||||
// now the actual modifiers...
|
|
||||||
function shiftImage(direction, get_order){
|
|
||||||
if(get_order == null){
|
|
||||||
get_order = getImageOrder
|
|
||||||
}
|
|
||||||
if($('.current.ribbon')[direction]('.ribbon').length == 0){
|
|
||||||
createRibbon(direction)
|
|
||||||
}
|
|
||||||
|
|
||||||
// get previous element after which we need to put the current...
|
|
||||||
var prev_elem = getImageBefore(
|
|
||||||
get_order($('.current.image')),
|
|
||||||
$('.current.ribbon')[direction]('.ribbon'))
|
|
||||||
|
|
||||||
// last image in ribbon, merge...
|
|
||||||
if($('.current.ribbon').children('.image').length == 1){
|
|
||||||
mergeRibbons(direction)
|
|
||||||
} else {
|
|
||||||
img = $('.current.image')
|
|
||||||
if(img.next('.image').length == 0){
|
|
||||||
ImageGrid.prevImage()
|
|
||||||
} else {
|
|
||||||
ImageGrid.nextImage()
|
|
||||||
}
|
|
||||||
// do the actual move...
|
|
||||||
if(prev_elem){
|
|
||||||
// insert element after current...
|
|
||||||
img
|
|
||||||
.detach()
|
|
||||||
.insertAfter(prev_elem)
|
|
||||||
} else {
|
|
||||||
// empty ribbon or fisrt element...
|
|
||||||
img
|
|
||||||
.detach()
|
|
||||||
.prependTo($('.current.ribbon')[direction]('.ribbon'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$('.current.image').click()
|
|
||||||
}
|
|
||||||
var shiftImageDown = function(){ return shiftImage('next') }
|
|
||||||
var shiftImageUp = function(){ return shiftImage('prev') }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// reverse the ribbon order...
|
|
||||||
// NOTE: this is like flipping the field vertically...
|
|
||||||
function reverseRibbons(){
|
|
||||||
// reverse...
|
|
||||||
$('.field').reverseChildren()
|
|
||||||
// compensate for offset cange...
|
|
||||||
$('.current.image').click()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// sort all images in all ribbons...
|
|
||||||
// NOTE: this will only align three ribbons...
|
|
||||||
function sortImages(){
|
|
||||||
$('.ribbon').sortChildren(cmpImageOrder)
|
|
||||||
// compensate for offset cange...
|
|
||||||
$('.current.image').click()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// use the cmp function to update image id's and resort...
|
|
||||||
function resortImagesVia(cmp){
|
|
||||||
// reverse ID order...
|
|
||||||
$($('.image').get().sort(cmp))
|
|
||||||
.each(function(i, e){$(e).attr({'id': i})})
|
|
||||||
// resort the images...
|
|
||||||
sortImages()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// reverse the order of images in all ribbons by reversing their id attr
|
|
||||||
// and resorting...
|
|
||||||
// NOTE: this is like flipping the field horizontally...
|
|
||||||
function reverseImageOrder(){
|
|
||||||
resortImagesVia(function(a, b){return cmpImageOrder(b, a)})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// sort images py their full path...
|
|
||||||
// XXX this should use a normalized path...
|
|
||||||
function sortImagesByPath(){
|
|
||||||
resortImagesVia(function(a, b){
|
|
||||||
a = $(a).css('background-image')
|
|
||||||
b = $(b).css('background-image')
|
|
||||||
return a > b ? 1 : a < b ? -1 : 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// XXX group images in ribbon and merge down/up
|
// XXX group images in ribbon and merge down/up
|
||||||
|
|||||||
@ -135,13 +135,13 @@ $(document).ready(setup);
|
|||||||
|
|
||||||
<div class="demo-buttons">
|
<div class="demo-buttons">
|
||||||
<button onclick="toggleMarkers()">Toggle Markers (m)</button>
|
<button onclick="toggleMarkers()">Toggle Markers (m)</button>
|
||||||
<button onclick="toggleBackgroundModes()">toggle background modes (b)</button>
|
<button onclick="ImageGrid.toggleBackgroundModes()">toggle background modes (b)</button>
|
||||||
<button onclick="ImageGrid.toggleControls()">toggle screen controls (tab)</button>
|
<button onclick="ImageGrid.toggleControls()">toggle screen controls (tab)</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="centerCurrentImage()">center current (o)</button>
|
<button onclick="ImageGrid.centerCurrentImage()">center current (o)</button>
|
||||||
<button onclick="centerOrigin()">center origin</button>
|
<button onclick="ImageGrid.centerOrigin()">center origin</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
@ -149,17 +149,17 @@ $(document).ready(setup);
|
|||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="firstImage()">first (home)</button>
|
<button onclick="ImageGrid.firstImage()">first (home)</button>
|
||||||
<button onclick="prevImage()">prev (left)</button>
|
<button onclick="ImageGrid.prevImage()">prev (left)</button>
|
||||||
<button onclick="nextImage()">next (right)</button>
|
<button onclick="ImageGrid.nextImage()">next (right)</button>
|
||||||
<button onclick="lastImage()">last (end)</button>
|
<button onclick="ImageGrid.lastImage()">last (end)</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="moveViewLeft()">left (h)</button>
|
<button onclick="ImageGrid.moveViewLeft()">left (h)</button>
|
||||||
<button onclick="moveViewUp()">Up (k)</button>
|
<button onclick="ImageGrid.moveViewUp()">Up (k)</button>
|
||||||
<button onclick="moveViewDown()">Down (j)</button>
|
<button onclick="ImageGrid.moveViewDown()">Down (j)</button>
|
||||||
<button onclick="moveViewRight()">right (l)</button>
|
<button onclick="ImageGrid.moveViewRight()">right (l)</button>
|
||||||
|
|
||||||
<!--br><br>
|
<!--br><br>
|
||||||
LEGACY:
|
LEGACY:
|
||||||
@ -169,21 +169,21 @@ $(document).ready(setup);
|
|||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="zoomContainerBy(2)">Zoom in (+)</button>
|
<button onclick="ImageGrid.scaleContainerUp()">Zoom in (+)</button>
|
||||||
<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
|
<button onclick="ImageGrid.scaleContainerDown()">Zoom out (-)</button>
|
||||||
<button onclick="setContainerScale(1)">Original (0)</button>
|
<button onclick="ImageGrid.setContainerScale(1)">Original (0)</button>
|
||||||
<button onclick="fitImage()">Image (1)</button>
|
<button onclick="ImageGrid.fitImage()">Image (1)</button>
|
||||||
<button onclick="fitThreeImages()">Three (3)</button>
|
<button onclick="ImageGrid.fitThreeImages()">Three (3)</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="createRibbon('prev')" disabled>create ribbon above (helper)</button><br>
|
<button onclick="ImageGrid.createRibbon('prev')" disabled>create ribbon above (helper)</button><br>
|
||||||
<button onclick="createRibbonBelow('next')" disabled>create ribbon below (helper)</button>
|
<button onclick="ImageGrid.createRibbon('next')" disabled>create ribbon below (helper)</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="mergeRibbons('prev')">merge ribbons up</button><br>
|
<button onclick="ImageGrid.mergeRibbons('prev')">merge ribbons up</button><br>
|
||||||
<button onclick="mergeRibbons('next')">merge ribbons down</button>
|
<button onclick="ImageGrid.mergeRibbons('next')">merge ribbons down</button>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
@ -193,8 +193,8 @@ $(document).ready(setup);
|
|||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br>
|
<button onclick="ImageGrid.focusAboveRibbon()">focus above ribbon (up)</button><br>
|
||||||
<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
|
<button onclick="ImageGrid.focusBelowRibbon()">focus below ribbon (down)</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -66,20 +66,20 @@ var keybindings = {
|
|||||||
// combined navigation with actions..
|
// combined navigation with actions..
|
||||||
40: {
|
40: {
|
||||||
'default': ImageGrid.focusBelowRibbon, // Down
|
'default': ImageGrid.focusBelowRibbon, // Down
|
||||||
'shift': shiftImageDown, // shift-Down
|
'shift': ImageGrid.shiftImageDown, // shift-Down
|
||||||
// XXX make this into a real action...
|
// XXX make this into a real action...
|
||||||
'ctrl+shift': function(){ // ctrl-shift-Down
|
'ctrl+shift': function(){ // ctrl-shift-Down
|
||||||
createRibbon('next')
|
ImageGrid.createRibbon('next')
|
||||||
shiftImageDown()
|
ImageGrid.shiftImageDown()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
38: {
|
38: {
|
||||||
'default': ImageGrid.focusAboveRibbon, // Up
|
'default': ImageGrid.focusAboveRibbon, // Up
|
||||||
'shift': shiftImageUp, // shift-Up
|
'shift': ImageGrid.shiftImageUp, // shift-Up
|
||||||
// XXX make this into a real action...
|
// XXX make this into a real action...
|
||||||
'ctrl+shift': function(){ // ctrl-shift-Up
|
'ctrl+shift': function(){ // ctrl-shift-Up
|
||||||
createRibbon('prev')
|
ImageGrid.createRibbon('prev')
|
||||||
shiftImageUp()
|
ImageGrid.shiftImageUp()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user