mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-01 11:50:07 +00:00
Keyboard binding view done, binding editor still missing...
couple of bugs: - some keys show uo very odd... - long binding strings do not allign correctly (CSS layout issue)... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
fea4929647
commit
8e156ce7e9
@ -142,150 +142,6 @@ ImageGrid.TYPE('toggle', function(obj){
|
||||
|
||||
|
||||
|
||||
// XXX don't understand why am I the one who has to write this...
|
||||
var SPECIAL_KEYS = {
|
||||
9: 'Tab',
|
||||
13: 'Enter',
|
||||
16: 'Shift',
|
||||
17: 'Ctrl',
|
||||
18: 'Alt',
|
||||
20: 'Caps Lock',
|
||||
27: 'Esc',
|
||||
32: 'Space',
|
||||
33: 'PgUp',
|
||||
34: 'PgDown',
|
||||
35: 'End',
|
||||
36: 'Home',
|
||||
37: 'Right',
|
||||
38: 'Up',
|
||||
39: 'Left',
|
||||
40: 'Down',
|
||||
45: 'Ins',
|
||||
46: 'Del',
|
||||
80: 'Backspace',
|
||||
91: 'Win',
|
||||
93: 'Menu',
|
||||
|
||||
112: 'F1',
|
||||
113: 'F2',
|
||||
114: 'F3',
|
||||
115: 'F4',
|
||||
116: 'F5',
|
||||
117: 'F6',
|
||||
118: 'F7',
|
||||
119: 'F8',
|
||||
120: 'F9',
|
||||
121: 'F10',
|
||||
122: 'F11',
|
||||
123: 'F12',
|
||||
}
|
||||
|
||||
function toKeyName(code){
|
||||
// check for special keys...
|
||||
var k = SPECIAL_KEYS[code]
|
||||
if(k != null){
|
||||
return k
|
||||
}
|
||||
// chars...
|
||||
k = String.fromCharCode(code)
|
||||
if(k != ''){
|
||||
return k.toLowerCase()
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// XXX merge this with showSetup as they are virtually identical...
|
||||
// XXX revise!!
|
||||
function showSettingUI(data, get_value, get_handler){
|
||||
var tree = {}
|
||||
var groups = []
|
||||
var groups_ui = {}
|
||||
// build the group/action structure...
|
||||
for(var a in data){
|
||||
var group = data[a].group!=null?data[a].group:'Other'
|
||||
if(groups.indexOf(group) == -1){
|
||||
groups.push(group)
|
||||
}
|
||||
if(tree[group] == null){
|
||||
tree[group] = []
|
||||
}
|
||||
tree[group].push([
|
||||
data[a].title!=null?data[a].title:a,
|
||||
a
|
||||
])
|
||||
}
|
||||
// sort things...
|
||||
groups.sort()
|
||||
for(var g in tree){
|
||||
tree[g].sort(function(a, b){
|
||||
a = a[0]
|
||||
b = b[0]
|
||||
return a > b ? 1 : a < b ? -1 : 0
|
||||
})
|
||||
}
|
||||
// build the HTML...
|
||||
var ui = $('<div class="options"/>')
|
||||
for(var g in tree){
|
||||
var group = null
|
||||
for(var i=0; i<tree[g].length; i++){
|
||||
// get the element...
|
||||
var elem = data[tree[g][i][1]]
|
||||
if(!DEBUG && elem.display == false){
|
||||
continue
|
||||
}
|
||||
if(group == null){
|
||||
group = $('<div class="group"/>')
|
||||
.append($('<div class="title"/>').text(g))
|
||||
}
|
||||
var option
|
||||
group.append(
|
||||
option = $('<div class="option"/>').append($([
|
||||
$('<div class="title"/>').text(tree[g][i][0])[0],
|
||||
$('<div class="doc"/>').html(
|
||||
elem.doc?elem.doc.replace(/\n/g, '<br>'):'')[0],
|
||||
// XXX keys...
|
||||
$('<div class="value"/>').text(get_value(elem))[0],
|
||||
])))
|
||||
if(elem.display == false){
|
||||
option.addClass('disabled')
|
||||
} else {
|
||||
// handler...
|
||||
var handler = get_handler(elem)
|
||||
if(handler != null){
|
||||
option.click(handler)
|
||||
}
|
||||
}
|
||||
}
|
||||
if(group != null){
|
||||
groups_ui[g] = group
|
||||
}
|
||||
}
|
||||
// put the Other group in the back...
|
||||
var i = groups.indexOf('Other')
|
||||
if(i != -1){
|
||||
groups.splice(i, 1)
|
||||
groups.push('Other')
|
||||
}
|
||||
// buildup the sorted groups...
|
||||
for(var i=0; i<groups.length; i++){
|
||||
ui.append(groups_ui[groups[i]])
|
||||
}
|
||||
// refresh...
|
||||
ui.click(function(){
|
||||
// XXX is this a good way to do a refresh?
|
||||
showSettingUI(data, get_value, get_handler)
|
||||
})
|
||||
showInOverlay(ui)
|
||||
}
|
||||
|
||||
function showKeyboardBindings(){
|
||||
// XXX build reverse key index...
|
||||
// XXX
|
||||
showSettingUI(ImageGrid.actions,
|
||||
function(){},
|
||||
function(){})}
|
||||
|
||||
|
||||
|
||||
/******************************************* Setup Data and Globals **/
|
||||
|
||||
@ -412,7 +268,64 @@ function cmpImageOrder(a, b){
|
||||
|
||||
|
||||
|
||||
// NOTE: don't understand why am I the one who has to write this...
|
||||
var SPECIAL_KEYS = {
|
||||
9: 'Tab',
|
||||
13: 'Enter',
|
||||
16: 'Shift',
|
||||
17: 'Ctrl',
|
||||
18: 'Alt',
|
||||
20: 'Caps Lock',
|
||||
27: 'Esc',
|
||||
32: 'Space',
|
||||
33: 'PgUp',
|
||||
34: 'PgDown',
|
||||
35: 'End',
|
||||
36: 'Home',
|
||||
37: 'Right',
|
||||
38: 'Up',
|
||||
39: 'Left',
|
||||
40: 'Down',
|
||||
45: 'Ins',
|
||||
46: 'Del',
|
||||
80: 'Backspace',
|
||||
91: 'Win',
|
||||
93: 'Menu',
|
||||
|
||||
112: 'F1',
|
||||
113: 'F2',
|
||||
114: 'F3',
|
||||
115: 'F4',
|
||||
116: 'F5',
|
||||
117: 'F6',
|
||||
118: 'F7',
|
||||
119: 'F8',
|
||||
120: 'F9',
|
||||
121: 'F10',
|
||||
122: 'F11',
|
||||
123: 'F12',
|
||||
}
|
||||
|
||||
// XXX some keys look really wrong...
|
||||
function toKeyName(code){
|
||||
// check for special keys...
|
||||
var k = SPECIAL_KEYS[code]
|
||||
if(k != null){
|
||||
return k
|
||||
}
|
||||
// chars...
|
||||
k = String.fromCharCode(code)
|
||||
if(k != ''){
|
||||
return k.toLowerCase()
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
|
||||
// show a jQuary opject in viewer overlay...
|
||||
// XXX need to set .scrollTop(0) when showing different UI...
|
||||
// ...and not set it when the UI is the same
|
||||
function showInOverlay(obj){
|
||||
obj.click(function(){ return false })
|
||||
// clean things up...
|
||||
@ -435,6 +348,90 @@ function showInOverlay(obj){
|
||||
|
||||
|
||||
|
||||
// XXX revise!!
|
||||
function showOptionsUI(data, get_value, get_handler){
|
||||
var tree = {}
|
||||
var groups = []
|
||||
var groups_ui = {}
|
||||
// build the group/action structure...
|
||||
for(var a in data){
|
||||
var group = data[a].group!=null?data[a].group:'Other'
|
||||
if(groups.indexOf(group) == -1){
|
||||
groups.push(group)
|
||||
}
|
||||
if(tree[group] == null){
|
||||
tree[group] = []
|
||||
}
|
||||
tree[group].push([
|
||||
data[a].title!=null?data[a].title:a,
|
||||
a
|
||||
])
|
||||
}
|
||||
// sort things...
|
||||
groups.sort()
|
||||
for(var g in tree){
|
||||
tree[g].sort(function(a, b){
|
||||
a = a[0]
|
||||
b = b[0]
|
||||
return a > b ? 1 : a < b ? -1 : 0
|
||||
})
|
||||
}
|
||||
// build the HTML...
|
||||
var ui = $('<div class="options"/>')
|
||||
for(var g in tree){
|
||||
var group = null
|
||||
for(var i=0; i<tree[g].length; i++){
|
||||
// get the element...
|
||||
var elem = data[tree[g][i][1]]
|
||||
if(!DEBUG && elem.display == false){
|
||||
continue
|
||||
}
|
||||
if(group == null){
|
||||
group = $('<div class="group"/>')
|
||||
.append($('<div class="title"/>').text(g))
|
||||
}
|
||||
var option
|
||||
group.append(
|
||||
option = $('<div class="option"/>').append($([
|
||||
$('<div class="title"/>').text(tree[g][i][0])[0],
|
||||
$('<div class="doc"/>').html(
|
||||
elem.doc?elem.doc.replace(/\n/g, '<br>'):'')[0],
|
||||
$('<div class="value"/>').text(get_value(elem))[0]
|
||||
])))
|
||||
if(elem.display == false){
|
||||
option.addClass('disabled')
|
||||
} else {
|
||||
// handler...
|
||||
var handler = get_handler(elem)
|
||||
if(handler != null){
|
||||
option.click(handler)
|
||||
}
|
||||
}
|
||||
}
|
||||
if(group != null){
|
||||
groups_ui[g] = group
|
||||
}
|
||||
}
|
||||
// put the Other group in the back...
|
||||
var i = groups.indexOf('Other')
|
||||
if(i != -1){
|
||||
groups.splice(i, 1)
|
||||
groups.push('Other')
|
||||
}
|
||||
// buildup the sorted groups...
|
||||
for(var i=0; i<groups.length; i++){
|
||||
ui.append(groups_ui[groups[i]])
|
||||
}
|
||||
// refresh...
|
||||
ui.click(function(){
|
||||
// XXX is this a good way to do a refresh?
|
||||
showOptionsUI(data, get_value, get_handler)
|
||||
})
|
||||
showInOverlay(ui)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Return a scale value for the given element(s).
|
||||
// NOTE: this will only return a single scale value...
|
||||
function getElementScale(elem){
|
||||
@ -878,7 +875,7 @@ function setupControlElements(){
|
||||
$('.screen-button.toggle-single').click(ImageGrid.toggleSingleImageMode)
|
||||
$('.screen-button.fit-three').click(ImageGrid.fitThreeImages)
|
||||
$('.screen-button.show-controls').click(function(){ImageGrid.toggleControls('on')})
|
||||
$('.screen-button.settings').click(ImageGrid.showSetup)
|
||||
$('.screen-button.settings').click(ImageGrid.showKeyboardBindings)
|
||||
}
|
||||
|
||||
|
||||
@ -1159,9 +1156,59 @@ ImageGrid.GROUP('Mode: All',
|
||||
doc: 'Show setup interface.',
|
||||
},
|
||||
function showSetup(){
|
||||
showSettingUI(ImageGrid.option_props,
|
||||
showOptionsUI(ImageGrid.option_props,
|
||||
function(e){return ImageGrid.option[e.name]},
|
||||
function(e){return e.click_handler})
|
||||
}),
|
||||
ImageGrid.ACTION({
|
||||
title: 'Keyboard configuration',
|
||||
doc: 'Show keyboard configuration interface.',
|
||||
},
|
||||
function showKeyboardBindings(){
|
||||
// build reverse key index...
|
||||
var bindings = {}
|
||||
for(var k in keybindings){
|
||||
var id
|
||||
var v = keybindings[k]
|
||||
|
||||
// alias...
|
||||
while (typeof(v) == typeof(123)) {
|
||||
v = keybindings[v]
|
||||
}
|
||||
// Array, lisp style with docs...
|
||||
if(typeof(v) == typeof([]) && v.constructor.name == 'Array'){
|
||||
// XXX what do we do here???
|
||||
}
|
||||
// function...
|
||||
if(typeof(v) == typeof(function(){})){
|
||||
id = v.id != null ? v.id : v.name
|
||||
}
|
||||
// complex handler...
|
||||
// NOTE: this can contain several key bindings...
|
||||
if(typeof(v) == typeof({})){
|
||||
for(var m in v){
|
||||
id = v[m].id != null ? v[m].id : v[m].name
|
||||
if(bindings[id] == null){
|
||||
bindings[id] = []
|
||||
}
|
||||
bindings[id].push((m=='default'?'':m+'+') + toKeyName(k))
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
if(bindings[id] == null){
|
||||
bindings[id] = []
|
||||
}
|
||||
bindings[id].push(toKeyName(k))
|
||||
}
|
||||
showOptionsUI(ImageGrid.actions,
|
||||
function(e){
|
||||
return (bindings[e.id]!=null?bindings[e.id]:'None')
|
||||
.toString()
|
||||
.replace(/,/g, ', ')
|
||||
},
|
||||
// XXX
|
||||
function(e){})
|
||||
}))
|
||||
|
||||
|
||||
@ -1172,7 +1219,6 @@ ImageGrid.GROUP('Mode: Single Image',
|
||||
title: 'Single image mode',
|
||||
doc: 'Toggle single image mode.',
|
||||
type: 'toggle',
|
||||
display: false,
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'single-image-mode',
|
||||
// pre...
|
||||
|
||||
@ -96,6 +96,8 @@
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
/*cursor: hand;*/
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
// NOTE: use String.fromCharCode(code)...
|
||||
var keybindings = {
|
||||
// togglable modes and options...
|
||||
191: ImageGrid.showSetup, // ?
|
||||
191: {
|
||||
'default': ImageGrid.showKeyboardBindings, // ?
|
||||
'ctrl': ImageGrid.showSetup, // ctrl+?
|
||||
},
|
||||
70: ImageGrid.toggleSingleImageMode, // f
|
||||
83: ImageGrid.toggleSingleRibbonMode, // s
|
||||
13: 70, // Enter
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user