mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
started wrapping the keyboard...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
e2192aef84
commit
3ca81dd6ff
@ -49,7 +49,8 @@ function getImageBefore(image, ribbon, mode){
|
||||
ribbon = image.closest('.ribbon')
|
||||
}
|
||||
var images = $(ribbon).find('.image').filter(mode)
|
||||
var order = image.attr('order')
|
||||
// XXX need to process/format this correctly...
|
||||
var order = JSON.parse(image.attr('order'))
|
||||
var prev = null
|
||||
|
||||
images.each(function(){
|
||||
@ -64,7 +65,7 @@ function getImageBefore(image, ribbon, mode){
|
||||
|
||||
|
||||
function shiftTo(image, ribbon){
|
||||
var target = getImageBefore(image, ribbon)
|
||||
var target = getImageBefore(image, ribbon, NAV_ALL)
|
||||
var cur_ribbon = image.closest('.ribbon')
|
||||
|
||||
// insert before the first image if nothing is before the target...
|
||||
@ -176,7 +177,7 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 'marked-only',
|
||||
return
|
||||
}
|
||||
// there is a marked image in this ribbon...
|
||||
var target = getImageBefore(cur, null, true)
|
||||
var target = getImageBefore(cur, null)
|
||||
if(target.length > 0){
|
||||
centerImage(focusImage(target), 'css')
|
||||
return
|
||||
@ -270,11 +271,17 @@ function centerImage(image, mode){
|
||||
var l = parseFloat(ribbons.css('left'))
|
||||
l = l ? l : 0
|
||||
|
||||
// do the actual work...
|
||||
return ribbons[mode]({
|
||||
|
||||
var res = {
|
||||
'top': t - pos.top + (H - h)/2,
|
||||
'left': l - pos.left + (W - w)/2
|
||||
})
|
||||
}
|
||||
// do the actual work...
|
||||
if(mode == 'animate'){
|
||||
return ribbons.stop().animate(res, 100, 'linear')
|
||||
} else {
|
||||
return ribbons.css(res)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -388,6 +395,8 @@ function lastImage(mode){
|
||||
// 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...
|
||||
// XXX this (getImageBefore?) does not appear to work for up when the
|
||||
// first image is > than current position...
|
||||
function prevRibbon(moving, mode){
|
||||
if(mode == null){
|
||||
mode = NAV_DEFAULT
|
||||
@ -395,7 +404,7 @@ function prevRibbon(moving, mode){
|
||||
var cur = $('.current.image')
|
||||
// pre marked-only mode...
|
||||
//var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon'))
|
||||
var target = getImageBefore(cur, cur.closest('.ribbon').prevAll('.ribbon' + mode).first(), true)
|
||||
var target = getImageBefore(cur, cur.closest('.ribbon').prevAll('.ribbon:visible').first())
|
||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
@ -403,6 +412,8 @@ function prevRibbon(moving, mode){
|
||||
return centerImage(focusImage(target))
|
||||
}
|
||||
// XXX get move direction...
|
||||
// XXX this (getImageBefore?) does not appear to work for up when the
|
||||
// first image is > than current position...
|
||||
function nextRibbon(moving, mode){
|
||||
if(mode == null){
|
||||
mode = NAV_DEFAULT
|
||||
@ -410,7 +421,7 @@ function nextRibbon(moving, mode){
|
||||
var cur = $('.current.image')
|
||||
// pre marked-only mode...
|
||||
//var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon'))
|
||||
var target = getImageBefore(cur, cur.closest('.ribbon').nextAll('.ribbon' + mode).first(), true)
|
||||
var target = getImageBefore(cur, cur.closest('.ribbon').nextAll('.ribbon:visible').first())
|
||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
|
||||
@ -198,7 +198,89 @@
|
||||
|
||||
<script>
|
||||
|
||||
/**********************************************************************
|
||||
* Keyboard configuration...
|
||||
*
|
||||
* XXX move this out to a separate file...
|
||||
*/
|
||||
|
||||
var KEYBOARD_CONFIG = {
|
||||
// general setup...
|
||||
'.viewer': {
|
||||
Up: {
|
||||
default: function(){ prevRibbon() },
|
||||
shift: function(){ shiftImageUp() },
|
||||
},
|
||||
Down: {
|
||||
default: function(){ nextRibbon() },
|
||||
shift: function(){ shiftImageDown() },
|
||||
},
|
||||
|
||||
// XXX need to cancel the animation of the prev action...
|
||||
Left: {
|
||||
default: function(){ prevImage() },
|
||||
// XXX prevScreenImages...
|
||||
ctrl: function(){
|
||||
console.log('NotImplemented: screen images back.')
|
||||
},
|
||||
shift: function(){
|
||||
toggleImageMark()
|
||||
prevImage()
|
||||
},
|
||||
// XXX mark screen images...
|
||||
'ctrl+shift': function(){
|
||||
console.log('NotImplemented: mark screen images back.')
|
||||
}
|
||||
},
|
||||
Right: {
|
||||
default: function(){ nextImage() },
|
||||
// XXX nextScreenImages...
|
||||
ctrl: function(){
|
||||
console.log('NotImplemented: screen images forward.')
|
||||
},
|
||||
shift: function(){
|
||||
toggleImageMark()
|
||||
nextImage()
|
||||
},
|
||||
// XXX mark screen images...
|
||||
'ctrl+shift': function(){
|
||||
console.log('NotImplemented: mark screen images forward.')
|
||||
}
|
||||
},
|
||||
|
||||
Home: function(){
|
||||
firstImage()
|
||||
},
|
||||
End: function(){
|
||||
lastImage()
|
||||
},
|
||||
|
||||
// zooming...
|
||||
'1': function(){ fitNImages(1) },
|
||||
'2': function(){ fitNImages(2) },
|
||||
'3': function(){ fitNImages(3) },
|
||||
'4': function(){ fitNImages(4) },
|
||||
'5': function(){ fitNImages(5) },
|
||||
'6': function(){ fitNImages(6) },
|
||||
'7': function(){ fitNImages(7) },
|
||||
'8': function(){ fitNImages(8) },
|
||||
'9': function(){ fitNImages(9) },
|
||||
|
||||
// XXX this is temporary, combine this with single image mode...
|
||||
F: function(){ toggleImageProportions() },
|
||||
|
||||
// XXX not final, think of a better way to do this...
|
||||
M: {
|
||||
default: function(){ toggleImageMark() },
|
||||
shift: function(){ toggleMarkedOnlyView() },
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
// setup...
|
||||
$(function(){
|
||||
|
||||
@ -221,6 +303,15 @@ $(function(){
|
||||
// the internal workings...
|
||||
$('.viewer').click(clickHandler)
|
||||
|
||||
$(document)
|
||||
.keydown(makeKeyboardHandler(
|
||||
KEYBOARD_CONFIG,
|
||||
function(k){console.log(k)}))
|
||||
|
||||
|
||||
// XXX stub...
|
||||
centerImage(focusImage($('.image').first()), 'css')
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user