flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 03:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added help generator to ui/lib/keyboard.js, added docs to key bindings...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-23 01:34:14 +04:00
parent 14a9bc3d3e
commit 8e8f833ff4
2 changed files with 273 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

345
ui/keybindings3.js
View File

@ -16,50 +16,71 @@ var DIRECTION = 'next'
/*********************************************************************/ /*********************************************************************/
var KEYBOARD_CONFIG = { var KEYBOARD_CONFIG = {
// single image mode only...
'.single-image-mode': {
title: 'Single image mode',
// XXX this should only work on single image mode...
F: doc('Toggle view proportions',
function(){
toggleImageProportions()
centerRibbons()
}),
},
// general setup... // general setup...
'.viewer': { '.viewer': {
ignore: [ ], title: 'Global',
// Navigation... // Navigation...
// XXX need to cancel the animation of the prev action... // XXX need to cancel the animation of the prev action...
Left: { Left: {
default: function(){ default: doc('Previous image',
// update direction... function(){
if(DIRECTION != 'prev'){ event.preventDefault()
_STEPS_LEFT_TO_CHANGE_DIRECTION-- // update direction...
if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){ if(DIRECTION != 'prev'){
DIRECTION = 'prev' _STEPS_LEFT_TO_CHANGE_DIRECTION--
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2 if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
DIRECTION = 'prev'
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
}
} else {
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
} }
} else { prevImage()
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2 centerRibbons()
} }),
prevImage() ctrl: doc('Previous screen',
centerRibbons() function(){
}, event.preventDefault()
ctrl: function(){ prevScreenImages()
prevScreenImages() centerRibbons()
centerRibbons() }),
},
}, },
Right: { Right: {
default: function(){ default: doc('Next image',
// update direction... function(){
if(DIRECTION != 'next'){ event.preventDefault()
_STEPS_LEFT_TO_CHANGE_DIRECTION-- // update direction...
if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){ if(DIRECTION != 'next'){
DIRECTION = 'next' _STEPS_LEFT_TO_CHANGE_DIRECTION--
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2 if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
DIRECTION = 'next'
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
}
} else {
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
} }
} else { nextImage()
_STEPS_LEFT_TO_CHANGE_DIRECTION = 2 centerRibbons()
} }),
nextImage() ctrl: doc('Previous screen',
centerRibbons() function(){
}, event.preventDefault()
ctrl: function(){ nextScreenImages()
nextScreenImages() centerRibbons()
centerRibbons() }),
},
}, },
Space: { Space: {
default: 'Right', default: 'Right',
@ -72,92 +93,97 @@ var KEYBOARD_CONFIG = {
default: 'Left', default: 'Left',
shift: 'Right', shift: 'Right',
}, },
Home: function(){ Home: doc('First image',
function(){
event.preventDefault() event.preventDefault()
firstImage() firstImage()
centerRibbons() centerRibbons()
}, }),
End: function(){ End: doc('Last image',
function(){
event.preventDefault() event.preventDefault()
lastImage() lastImage()
centerRibbons() centerRibbons()
}, }),
// combined navigation and editor actions... // combined navigation and editor actions...
Up: { Up: {
default: function(){ default: doc('Go to ribbon above',
event.preventDefault() function(){
prevRibbon() event.preventDefault()
centerRibbons() prevRibbon()
}, centerRibbons()
shift: function(){ }),
event.preventDefault() shift: doc('Shift image up',
shiftImageUp(null, DIRECTION) function(){
centerRibbons() event.preventDefault()
}, shiftImageUp(null, DIRECTION)
'ctrl+shift': function(){ centerRibbons()
event.preventDefault() }),
shiftImageUpNewRibbon(null, DIRECTION) 'ctrl+shift': doc('Shift image up to empty ribbon',
centerRibbons() function(){
}, event.preventDefault()
shiftImageUpNewRibbon(null, DIRECTION)
centerRibbons()
}),
}, },
Down: { Down: {
default: function(){ default: doc('Go to ribbon below',
event.preventDefault() function(){
nextRibbon() event.preventDefault()
centerRibbons() nextRibbon()
}, centerRibbons()
shift: function(){ }),
event.preventDefault() shift: doc('Shift image down',
shiftImageDown(null, DIRECTION) function(){
centerRibbons() event.preventDefault()
}, shiftImageDown(null, DIRECTION)
'ctrl+shift': function(){ centerRibbons()
event.preventDefault() }),
shiftImageDownNewRibbon(null, DIRECTION) 'ctrl+shift': doc('Shift image up to empty ribbon',
centerRibbons() function(){
}, event.preventDefault()
shiftImageDownNewRibbon(null, DIRECTION)
centerRibbons()
}),
}, },
// zooming... // zooming...
'#1': function(){ fitNImages(1) }, '#1': doc('Fit one image', function(){ fitNImages(1) }),
'#2': function(){ fitNImages(2) }, '#2': doc('Fit two images', function(){ fitNImages(2) }),
'#3': function(){ fitNImages(3) }, '#3': doc('Fit three images', function(){ fitNImages(3) }),
'#4': function(){ fitNImages(4) }, '#4': doc('Fit four images', function(){ fitNImages(4) }),
'#5': function(){ fitNImages(5) }, '#5': doc('Fit five images', function(){ fitNImages(5) }),
'#6': function(){ fitNImages(6) }, '#6': doc('Fit six images', function(){ fitNImages(6) }),
'#7': function(){ fitNImages(7) }, '#7': doc('Fit seven images', function(){ fitNImages(7) }),
'#8': function(){ fitNImages(8) }, '#8': doc('Fit eight images', function(){ fitNImages(8) }),
'#9': function(){ fitNImages(9) }, '#9': doc('Fit nine images', function(){ fitNImages(9) }),
'-': function(){ zoomOut() }, '-': doc('Zoom in', function(){ zoomOut() }),
'=': function(){ zoomIn() }, '=': doc('Zoom out', function(){ zoomIn() }),
Enter: function(){ toggleSingleImageMode() }, Enter: doc('Toggle single image view',
function(){ toggleSingleImageMode() }),
// XXX this should only work on single image mode... B: doc('Toggle theme', function(){ toggleTheme() }),
F: function(){
toggleImageProportions()
centerRibbons()
},
B: function(){ toggleTheme() },
S: { S: {
ctrl: function(){ ctrl: doc('Save current state',
//saveLocalStorage() function(){
saveLocalStorageData() //saveLocalStorage()
saveLocalStorageMarks() saveLocalStorageData()
} saveLocalStorageMarks()
})
}, },
Z: { Z: {
ctrl: function(){ ctrl: doc('Restore to last saved state',
loadLocalStorage() function(){
loadLocalStorageMarks() loadLocalStorage()
} loadLocalStorageMarks()
})
}, },
@ -174,70 +200,91 @@ var KEYBOARD_CONFIG = {
// i.e. marking can change direction depending on where // i.e. marking can change direction depending on where
// we moved last... // we moved last...
// NOTE: marking does not change move direction... // NOTE: marking does not change move direction...
default: function(){ default: doc('Mark current image and advance',
toggleImageMark() function(){
if(DIRECTION == 'next'){ toggleImageMark()
nextImage() if(DIRECTION == 'next'){
} else { nextImage()
prevImage() } else {
} prevImage()
if($('.current.image').filter(':visible').length == 0){ }
centerView(focusImage(getImageBefore())) if($('.current.image').filter(':visible').length == 0){
} centerView(focusImage(getImageBefore()))
centerRibbons() }
}, centerRibbons()
}),
// same as default but in reverse direction... // same as default but in reverse direction...
shift: function(){ shift: doc('Mark current image and return',
toggleImageMark() function(){
if(DIRECTION == 'prev'){ toggleImageMark()
nextImage() if(DIRECTION == 'prev'){
} else { nextImage()
prevImage() } else {
} prevImage()
if($('.current.image').filter(':visible').length == 0){ }
centerView(focusImage(getImageBefore())) if($('.current.image').filter(':visible').length == 0){
} centerView(focusImage(getImageBefore()))
centerRibbons() }
}, centerRibbons()
ctrl: function(){ }),
var action = toggleImageMark() ctrl: doc('Mark current image',
}, function(){
var action = toggleImageMark()
}),
}, },
I: { I: {
// XXX STUB -- replace with a real info window... // XXX STUB -- replace with a real info window...
default: function(){ default: doc('Show current image info',
var gid = getImageGID($('.current.image')) function(){
var r = getRibbonIndex(getRibbon()) var gid = getImageGID($('.current.image'))
var data = IMAGES[gid] var r = getRibbonIndex(getRibbon())
var order = DATA.order.indexOf(gid) var data = IMAGES[gid]
var name = data.path.split('/').pop() var order = DATA.order.indexOf(gid)
alert('"'+ name +'"\n'+ var name = data.path.split('/').pop()
'GID: '+ gid +'\n'+ alert('"'+ name +'"\n'+
'Path: "'+ data.path +'"\n'+ 'GID: '+ gid +'\n'+
'Order: '+ order +'\n'+ 'Path: "'+ data.path +'"\n'+
'Position (ribbon): '+ DATA.ribbons[r].indexOf(gid) + 'Order: '+ order +'\n'+
'/'+ DATA.ribbons[r].length +'\n'+ 'Position (ribbon): '+ DATA.ribbons[r].indexOf(gid) +
'Position (global): '+ order +'/'+ DATA.order.length +'\n'+ '/'+ DATA.ribbons[r].length +'\n'+
'') 'Position (global): '+ order +'/'+ DATA.order.length +'\n'+
}, '')
ctrl: function(){ invertImageMarks() }, }),
ctrl: doc('Invert image marks',
function(){ invertImageMarks() }),
}, },
A: { A: {
shift: function(){ toggleImageMarkBlock() }, shift: doc('Toggle marks in current contagious block',
ctrl: function(){ markAll('ribbon') }, function(){ toggleImageMarkBlock() }),
ctrl: doc('Mark current ribbon',
function(){ markAll('ribbon') }),
}, },
U: { U: {
ctrl: function(){ removeImageMarks('ribbon') }, ctrl: doc('Unmark current ribbon',
shift: function(){ removeImageMarks('all') }, function(){ removeImageMarks('ribbon') }),
shift: doc('Unamrk all',
function(){ removeImageMarks('all') }),
}, },
F2: { F2: {
default: function(){ toggleMarkesView() }, default: doc('Toggle mark visibility',
shift: function(){ function(){ toggleMarkesView() }),
toggleMarkedOnlyView() shift: doc('Toggle marked only images view',
} function(){
toggleMarkedOnlyView()
})
}, },
F4: openImage, F4: doc('Open image in external software', openImage),
// XXX print this in an overlay...
// '?'
'/': {
shift: doc('Show keyboard bindings',
function(){
var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
alert(doc.text())
}),
}
} }
} }

79
ui/lib/keyboard.js
View File

@ -131,6 +131,9 @@ function doc(text, func){
* *
* XXX need an explicit way to prioritize modes... * XXX need an explicit way to prioritize modes...
* XXX check do we need did_handling here... * XXX check do we need did_handling here...
*
* XXX BUG explicitly given modes do ton yield results if the pattern
* does not match...
*/ */
function getKeyHandlers(key, modifiers, keybindings, modes){ function getKeyHandlers(key, modifiers, keybindings, modes){
var chr = null var chr = null
@ -151,6 +154,7 @@ function getKeyHandlers(key, modifiers, keybindings, modes){
for(var mode in keybindings){ for(var mode in keybindings){
// test for mode compatibility... // test for mode compatibility...
// XXX this fails for explicitly given mode...
if(modes != 'all' if(modes != 'all'
&& (modes != 'any' && (modes != 'any'
&& modes != mode && modes != mode
@ -401,19 +405,90 @@ function buildKeybindingsHelp(keybindings){
var mode, title var mode, title
for(var pattern in keybindings){ for(var pattern in keybindings){
mode = modes[pattern] mode = keybindings[pattern]
// titles and docs...
title = mode.title == null ? pattern : mode.title title = mode.title == null ? pattern : mode.title
res[title] = { res[title] = {
doc: mode.doc == null ? '' : mode.doc doc: mode.doc == null ? '' : mode.doc
} }
section = res[title]
// XXX handlers... // handlers...
for(var key in mode){
if(key == 'doc' || key == 'title' || key == 'ignore'){
continue
}
//var modifiers = getKeyHandlers(key, '?', keybindings, pattern)[pattern]
var modifiers = getKeyHandlers(key, '?', keybindings, 'all')[pattern]
modifiers = modifiers == 'none' || modifiers == undefined ? [''] : modifiers
for(var i=0; i < modifiers.length; i++){
var mod = modifiers[i]
//var handler = getKeyHandlers(key, mod, keybindings, pattern)[pattern]
var handler = getKeyHandlers(key, mod, keybindings, 'all')[pattern]
// standard object doc...
if('doc' in handler){
var doc = handler.doc
// lisp style...
} else if(typeof(handler) == typeof([]) && handler.constructor.name == 'Array'){
var doc = handler[1]
// no doc...
} else {
if('name' in handler && handler.name != ''){
var doc = handler.name
} else {
// XXX is this the right way to do this?
var doc = handler
}
}
// populate the section...
// NOTE: we need a list of keys per action...
if(doc in section){
var keys = section[doc]
} else {
var keys = []
section[doc] = keys
}
keys.push((mod == '' || mod == 'default') ? key : (mod +'+'+ key))
}
}
} }
return res return res
} }
function buildKeybindingsHelpHTML(keybindings){
var doc = buildKeybindingsHelp(keybindings)
var res = '<table class="keyboard-help">'
for(var mode in doc){
if(mode == 'doc'){
continue
}
res += ' <tr class="section-title"><th colspan=2>' + mode + '</th></tr>\n'
mode = doc[mode]
res += ' <tr class="section-doc"><th colspan=2>'+ mode.doc + '</th></tr>\n'
for(var action in mode){
if(action == 'doc'){
continue
}
res += ' <tr><td>' + mode[action].join(', ') +'</td><td>'+ action + '</td></tr>\n'
}
}
res += '</table>'
return $(res)
}
/********************************************************************** /**********************************************************************