mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
rewritten the keyboard handler, now it is configurable in runtime...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
4b48da396c
commit
d88cc717bd
@ -34,10 +34,13 @@ body {
|
|||||||
<!-- XXX STUB -->
|
<!-- XXX STUB -->
|
||||||
<script src="images.js"></script>
|
<script src="images.js"></script>
|
||||||
<script src="gallery-prototype.js"></script>
|
<script src="gallery-prototype.js"></script>
|
||||||
|
|
||||||
<script src="ui.js"></script>
|
<script src="ui.js"></script>
|
||||||
<script src="markers.js"></script>
|
<script src="markers.js"></script>
|
||||||
|
|
||||||
|
<!-- keep this after anything it uses -->
|
||||||
|
<script src="keybindings.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!--script src="gallery.js"></script-->
|
<!--script src="gallery.js"></script-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,55 +1,6 @@
|
|||||||
// XXX need a uniform way to address images (filename?)
|
// XXX need a uniform way to address images (filename?)
|
||||||
/******************************************* Setup Data and Globals **/
|
/******************************************* Setup Data and Globals **/
|
||||||
|
|
||||||
// key configuration...
|
|
||||||
// XXX need to make this handle modifiers gracefully...
|
|
||||||
var keys = {
|
|
||||||
toggleHelp: [72], // ???
|
|
||||||
toggleSingleImageMode: [70, 13], // f, Enter
|
|
||||||
toggleSingleImageModeTransitions: [84], // t
|
|
||||||
toggleTransitions: [65], // a
|
|
||||||
toggleBackgroundModes: [66], // b
|
|
||||||
toggleControls: [9], // tab
|
|
||||||
close: [27, 88, 67], // ???
|
|
||||||
|
|
||||||
// zooming...
|
|
||||||
zoomIn: [187], // +
|
|
||||||
zoomOut: [189], // -
|
|
||||||
// zoom presets...
|
|
||||||
fitOne: [49], // 1
|
|
||||||
fitThree: [51], // 3
|
|
||||||
// XXX is this relivant?
|
|
||||||
zoomOriginal: [48], // 0
|
|
||||||
|
|
||||||
first: [36], // Home
|
|
||||||
last: [35], // End
|
|
||||||
previous: [37, 80, 188, 8], // Left, BkSp, p, <
|
|
||||||
next: [39, 78, 190, 32], // Right, Space, n, >
|
|
||||||
// these work with ctrl and shift modifiers...
|
|
||||||
down: [40], // Down
|
|
||||||
up: [38], // Up
|
|
||||||
// these work with ctrl modifier...
|
|
||||||
promote: [45], // ???
|
|
||||||
demote: [46], // ???
|
|
||||||
|
|
||||||
// XXX should these be s-up, s-down, ... ??
|
|
||||||
moveViewUp: [75], // k
|
|
||||||
moveViewDown: [74], // j
|
|
||||||
moveViewLeft: [72], // h
|
|
||||||
moveViewRight: [76], // l
|
|
||||||
|
|
||||||
centerCurrentImage: [79], // o
|
|
||||||
|
|
||||||
toggleMarkers: [77], // m
|
|
||||||
|
|
||||||
// keys to be ignored...
|
|
||||||
ignore: [16, 17, 18], // ???, ???, ???
|
|
||||||
|
|
||||||
// print unhandled keys...
|
|
||||||
helpShowOnUnknownKey: true
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// the list of style modes...
|
// the list of style modes...
|
||||||
// these are swithched through in order by toggleBackgroundModes()
|
// these are swithched through in order by toggleBackgroundModes()
|
||||||
var BACKGROUND_MODES = [
|
var BACKGROUND_MODES = [
|
||||||
@ -243,7 +194,8 @@ function setupEvents(){
|
|||||||
})
|
})
|
||||||
// keyboard...
|
// keyboard...
|
||||||
$(document)
|
$(document)
|
||||||
.keydown(handleKeys)
|
.keydown(makeKeyboardHandler(keybindings, function(k){alert(k)}))
|
||||||
|
//.keydown(handleKeys)
|
||||||
// swipe...
|
// swipe...
|
||||||
$('.viewer')
|
$('.viewer')
|
||||||
.swipe({
|
.swipe({
|
||||||
@ -353,77 +305,67 @@ function alignRibbons(){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
// XXX revise...
|
// XXX we essentially need three things:
|
||||||
function handleKeys(event){
|
// - keycodes, including modifier keys
|
||||||
var code = event.keyCode, fn = $.inArray;
|
// - function
|
||||||
var _ = (fn(code, keys.close) >= 0) ? function(){}()
|
// - meta information...
|
||||||
: (fn(code, keys.first) >= 0) ? firstImage()
|
/*
|
||||||
: (fn(code, keys.next) >= 0) ? nextImage()
|
* Basic key format:
|
||||||
: (fn(code, keys.previous) >= 0) ? prevImage()
|
* <key-code> : <callback>,
|
||||||
: (fn(code, keys.last) >= 0) ? lastImage()
|
* <key-code> : {
|
||||||
: (fn(code, keys.promote) >= 0) ? function(){
|
* default: [<callback>, <doc>],
|
||||||
if(event.ctrlKey){
|
* // a modifier can be any single modifier, like shift or a
|
||||||
createRibbon('next')
|
* // combination of modifers like 'ctrl+shift', given in order
|
||||||
|
* // of priority.
|
||||||
|
* // supported modifiers are (in order of priority):
|
||||||
|
* // - ctrl
|
||||||
|
* // - alt
|
||||||
|
* // - shift
|
||||||
|
* <modifer>: [...]
|
||||||
|
* },
|
||||||
|
* // alias...
|
||||||
|
* <key-code-a> : <key-code-b>,
|
||||||
|
*/
|
||||||
|
|
||||||
|
function makeKeyboardHandler(keybindings, unhandled){
|
||||||
|
if(unhandled == null){
|
||||||
|
unhandled = function(){return false}
|
||||||
|
}
|
||||||
|
console.log(keybindings)
|
||||||
|
return function(evt){
|
||||||
|
var key = evt.keyCode
|
||||||
|
// XXX ugly...
|
||||||
|
var modifers = evt.ctrlKey ? 'ctrl' : ''
|
||||||
|
modifers += evt.altKey ? (modifers != '' ? '+alt' : 'alt') : ''
|
||||||
|
modifers += evt.shiftKey ? (modifers != '' ? '+shift' : 'shift') : ''
|
||||||
|
|
||||||
|
var handler = keybindings[key]
|
||||||
|
|
||||||
|
// alias...
|
||||||
|
while (typeof(handler) == typeof(123)) {
|
||||||
|
handler = keybindings[handler]
|
||||||
|
}
|
||||||
|
// no handler...
|
||||||
|
if(handler == null){
|
||||||
|
return unhandled(key)
|
||||||
|
}
|
||||||
|
// complex handler...
|
||||||
|
if(typeof(handler) == typeof({})){
|
||||||
|
var callback = handler[modifers]
|
||||||
|
if(callback == null){
|
||||||
|
callback = handler['default']
|
||||||
}
|
}
|
||||||
shiftImageDown()
|
if(callback != null){
|
||||||
}()
|
callback()
|
||||||
: (fn(code, keys.demote) >= 0) ? function(){
|
return false
|
||||||
if(event.ctrlKey){
|
|
||||||
createRibbon('prev')
|
|
||||||
}
|
}
|
||||||
shiftImageUp()
|
} else {
|
||||||
}()
|
// callback...
|
||||||
: (fn(code, keys.down) >= 0) ? function(){
|
handler()
|
||||||
if(event.shiftKey){
|
return false
|
||||||
if(event.ctrlKey){
|
}
|
||||||
createRibbon('next')
|
return unhandled(key)
|
||||||
}
|
}
|
||||||
shiftImageDown()
|
|
||||||
} else {
|
|
||||||
focusBelowRibbon()
|
|
||||||
}
|
|
||||||
}()
|
|
||||||
: (fn(code, keys.up) >= 0) ? function(){
|
|
||||||
if(event.shiftKey){
|
|
||||||
if(event.ctrlKey){
|
|
||||||
createRibbon('prev')
|
|
||||||
}
|
|
||||||
shiftImageUp()
|
|
||||||
} else {
|
|
||||||
focusAboveRibbon()
|
|
||||||
}
|
|
||||||
}()
|
|
||||||
// zooming...
|
|
||||||
: (fn(code, keys.zoomIn) >= 0) ? scaleContainerBy(ZOOM_FACTOR)
|
|
||||||
: (fn(code, keys.zoomOut) >= 0) ? scaleContainerBy(1/ZOOM_FACTOR)
|
|
||||||
// zoom presets...
|
|
||||||
: (fn(code, keys.zoomOriginal) >= 0) ? setContainerScale(1)
|
|
||||||
: (fn(code, keys.fitOne) >= 0) ? fitImage()
|
|
||||||
: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
|
|
||||||
|
|
||||||
// moving view...
|
|
||||||
: (fn(code, keys.moveViewUp) >= 0) ? moveViewUp()
|
|
||||||
: (fn(code, keys.moveViewDown) >= 0) ? moveViewDown()
|
|
||||||
: (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft()
|
|
||||||
: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
|
|
||||||
: (fn(code, keys.centerCurrentImage) >= 0) ? centerCurrentImage()
|
|
||||||
|
|
||||||
: (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
|
|
||||||
: (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions()
|
|
||||||
: (fn(code, keys.toggleTransitions) >= 0) ? toggleTransitions()
|
|
||||||
|
|
||||||
: (fn(code, keys.toggleBackgroundModes) >= 0) ? toggleBackgroundModes()
|
|
||||||
: (fn(code, keys.toggleControls) >= 0) ? toggleControls()
|
|
||||||
|
|
||||||
// debug...
|
|
||||||
: (fn(code, keys.toggleMarkers) >= 0) ? toggleMarkers()
|
|
||||||
|
|
||||||
: (fn(code, keys.ignore) >= 0) ? false
|
|
||||||
|
|
||||||
|
|
||||||
: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
|
|
||||||
: false;
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -444,6 +386,7 @@ var ORIGINAL_FIELD_SCALE = 1
|
|||||||
var NORMAL_MODE_BG = null
|
var NORMAL_MODE_BG = null
|
||||||
var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1]
|
var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1]
|
||||||
|
|
||||||
|
|
||||||
var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode',
|
var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode',
|
||||||
// pre...
|
// pre...
|
||||||
function(action){
|
function(action){
|
||||||
|
|||||||
@ -31,10 +31,12 @@ body {
|
|||||||
<!-- XXX STUB -->
|
<!-- XXX STUB -->
|
||||||
<script src="images.js"></script>
|
<script src="images.js"></script>
|
||||||
<script src="gallery-prototype.js"></script>
|
<script src="gallery-prototype.js"></script>
|
||||||
|
|
||||||
<script src="ui.js"></script>
|
<script src="ui.js"></script>
|
||||||
<script src="markers.js"></script>
|
<script src="markers.js"></script>
|
||||||
|
|
||||||
|
<!-- keep this after anything it uses -->
|
||||||
|
<script src="keybindings.js"></script>
|
||||||
|
|
||||||
<!--script src="gallery.js"></script-->
|
<!--script src="gallery.js"></script-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
77
ui/keybindings.js
Executable file
77
ui/keybindings.js
Executable file
@ -0,0 +1,77 @@
|
|||||||
|
var keybindings = {
|
||||||
|
//72: toggleHelp, // ???
|
||||||
|
70: toggleSingleImageMode, // f
|
||||||
|
13: 70, // Enter
|
||||||
|
84: toggleSingleImageModeTransitions, // t
|
||||||
|
65: toggleTransitions, // a
|
||||||
|
66: toggleBackgroundModes, // b
|
||||||
|
9: toggleControls, // tab
|
||||||
|
77: toggleMarkers, // m
|
||||||
|
|
||||||
|
// zooming...
|
||||||
|
187: function(){scaleContainerBy(ZOOM_FACTOR)}, // +
|
||||||
|
189: function(){scaleContainerBy(1/ZOOM_FACTOR)}, // -
|
||||||
|
// zoom presets...
|
||||||
|
48: {
|
||||||
|
'default': fitImage, // 0
|
||||||
|
'ctrl': function(){setContainerScale(1)}, // ctrl+0
|
||||||
|
},
|
||||||
|
51: fitThreeImages, // 3
|
||||||
|
|
||||||
|
36: firstImage, // Home
|
||||||
|
35: lastImage, // End
|
||||||
|
|
||||||
|
37: prevImage, // Left
|
||||||
|
80: 37, // BkSp
|
||||||
|
188: 37, // p
|
||||||
|
8: 37, // <
|
||||||
|
39: nextImage, // Right
|
||||||
|
32: 39, // Space
|
||||||
|
190: 39, // m
|
||||||
|
78: 39, // >
|
||||||
|
|
||||||
|
// these work with ctrl and shift modifiers...
|
||||||
|
40: {
|
||||||
|
'default': focusBelowRibbon, // Down
|
||||||
|
'shift': shiftImageDown, // shift-Down
|
||||||
|
'ctrl+shift': function(){ // ctrl-shift-Down
|
||||||
|
createRibbon('next')
|
||||||
|
shiftImageDown()
|
||||||
|
}
|
||||||
|
}, // Down
|
||||||
|
38: {
|
||||||
|
'default': focusAboveRibbon, // Up
|
||||||
|
'shift': shiftImageUp, // shift-Up
|
||||||
|
'ctrl+shift': function(){ // ctrl-shift-Up
|
||||||
|
createRibbon('prev')
|
||||||
|
shiftImageUp()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// XXX should these be s-up, s-down, ... ??
|
||||||
|
75: moveViewUp, // k
|
||||||
|
74: moveViewDown, // j
|
||||||
|
72: moveViewLeft, // h
|
||||||
|
76: moveViewRight, // l
|
||||||
|
|
||||||
|
79: centerCurrentImage, // o
|
||||||
|
|
||||||
|
|
||||||
|
// ignore the modifiers...
|
||||||
|
16: function(){},
|
||||||
|
17: 16,
|
||||||
|
18: 16,
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
close: [27, 88, 67], // ???
|
||||||
|
|
||||||
|
// these work with ctrl modifier...
|
||||||
|
promote: [45], // ???
|
||||||
|
demote: [46], // ???
|
||||||
|
|
||||||
|
|
||||||
|
// print unhandled keys...
|
||||||
|
helpShowOnUnknownKey: true
|
||||||
|
*/
|
||||||
|
|
||||||
|
// vim:set ts=4 sw=4 nowrap :
|
||||||
Loading…
x
Reference in New Issue
Block a user