flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 19:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

did a better generic options ui generator...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-20 01:06:08 +04:00
parent b121a6327e
commit fea4929647
1 changed files with 70 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
ui/gallery-prototype.js
View File

@ -195,27 +195,29 @@ function toKeyName(code){
} }
// XXX merge this with showSetup as they are virtually identical... // XXX merge this with showSetup as they are virtually identical...
function showKeyboardBindings(){ // XXX revise!!
var actions = {} function showSettingUI(data, get_value, get_handler){
var tree = {}
var groups = [] var groups = []
var groups_ui = {}
// build the group/action structure... // build the group/action structure...
for(var a in ImageGrid.actions){ for(var a in data){
var group = ImageGrid[a].group var group = data[a].group!=null?data[a].group:'Other'
if(group.indexOf(groups) == -1){ if(groups.indexOf(group) == -1){
groups.push(group) groups.push(group)
} }
if(actions[group] == null){ if(tree[group] == null){
actions[group] = [] tree[group] = []
} }
actions[group].push([ tree[group].push([
ImageGrid[a].title!=null?ImageGrid[a].title:a, data[a].title!=null?data[a].title:a,
a a
]) ])
} }
// sort things... // sort things...
groups.sort() groups.sort()
for(var g in actions){ for(var g in tree){
actions[g].sort(function(a, b){ tree[g].sort(function(a, b){
a = a[0] a = a[0]
b = b[0] b = b[0]
return a > b ? 1 : a < b ? -1 : 0 return a > b ? 1 : a < b ? -1 : 0
@ -223,40 +225,65 @@ function showKeyboardBindings(){
} }
// build the HTML... // build the HTML...
var ui = $('<div class="options"/>') var ui = $('<div class="options"/>')
for(var g in actions){ for(var g in tree){
var group = null var group = null
for(var i=0; i<actions[g].length; i++){ for(var i=0; i<tree[g].length; i++){
// get the action object... // get the element...
var action = ImageGrid.actions[actions[g][i][1]] var elem = data[tree[g][i][1]]
if(!DEBUG && action.display == false){ if(!DEBUG && elem.display == false){
continue continue
} }
if(group == null){ if(group == null){
group = $('<div class="group"/>') group = $('<div class="group"/>')
.append($('<div class="title"/>').text(g!=null?g:'Other')) .append($('<div class="title"/>').text(g))
} }
var option var option
group.append( group.append(
option = $('<div class="option"/>').append($([ option = $('<div class="option"/>').append($([
$('<div class="title"/>').text(actions[g][i][0])[0], $('<div class="title"/>').text(tree[g][i][0])[0],
$('<div class="doc"/>').html( $('<div class="doc"/>').html(
action.doc?action.doc.replace(/\n/g, '<br>'):'')[0], elem.doc?elem.doc.replace(/\n/g, '<br>'):'')[0],
// XXX keys... // XXX keys...
$('<div class="value"/>').text('KEY')[0], $('<div class="value"/>').text(get_value(elem))[0],
]))) ])))
if(action.display == false){ if(elem.display == false){
option.addClass('disabled') option.addClass('disabled')
} else { } else {
// XXX handler... // handler...
var handler = get_handler(elem)
if(handler != null){
option.click(handler)
}
} }
} }
if(group != null){ if(group != null){
ui.append(group) 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) showInOverlay(ui)
} }
function showKeyboardBindings(){
// XXX build reverse key index...
// XXX
showSettingUI(ImageGrid.actions,
function(){},
function(){})}
@ -335,6 +362,13 @@ ImageGrid.GROUP('Mode: All',
})) }))
if(DEBUG){
ImageGrid.OPTION({
name: 'TEST',
title: 'Test the Other group mechanics',
value: 0,
})
}
@ -380,6 +414,7 @@ function cmpImageOrder(a, b){
// show a jQuary opject in viewer overlay... // show a jQuary opject in viewer overlay...
function showInOverlay(obj){ function showInOverlay(obj){
obj.click(function(){ return false })
// clean things up... // clean things up...
$('.overlay .content').children().remove() $('.overlay .content').children().remove()
// put it in the overlay... // put it in the overlay...
@ -1124,62 +1159,9 @@ ImageGrid.GROUP('Mode: All',
doc: 'Show setup interface.', doc: 'Show setup interface.',
}, },
function showSetup(){ function showSetup(){
var opts = ImageGrid.option showSettingUI(ImageGrid.option_props,
var opt_ps = ImageGrid.option_props function(e){return ImageGrid.option[e.name]},
var groups = {} function(e){return e.click_handler})
var opts_container = $('<div class="options"/>')
// build options...
for(var n in opt_ps){
var disabled = false
var opt = opt_ps[n]
var group = opt.group
// handle disabled opts...
if(opt.display == false){
if(!DEBUG){
continue
}
disabled = true
}
// build an option...
var option = $('<div class="option"/>').append($([
$('<div class="title"/>').text(opt.title != null ? opt.title : n)[0],
$('<div class="doc"/>').html(opt['doc'].replace(/\n/g, '<br>'))[0],
$('<div class="value"/>').text(opts[n])[0]
]))
// group things correctly...
if(group == null){
group = 'Other'
}
if(groups[group] == null){
groups[group] = $('<div class="group"/>')
.append($('<div class="title"/>').text(group))
.append(option)
} else {
groups[group].append(option)
}
// event handlers...
var handler = opt_ps[n].click_handler
if(disabled){
option.addClass('disabled')
} else if(handler != null){
option.click(handler)
}
}
// build groups...
for(var i = 0; i < ImageGrid.option_groups.length; i++){
var group_name = ImageGrid.option_groups[i]
opts_container.append(groups[group_name])
}
opts_container.append(groups['Other'])
opts_container.click(function(e){
// update the view...
// XXX do we need to redraw the whole thing on each click???
ImageGrid.showSetup()
e.preventDefault()
return false
})
showInOverlay(opts_container)
})) }))
@ -1484,15 +1466,15 @@ ImageGrid.GROUP('Zooming',
ImageGrid.setContainerScale(f) ImageGrid.setContainerScale(f)
}), }),
// the fit N image pack, for 1 <= N <= 9 // the fit N image pack, for 1 <= N <= 9
ImageGrid.ACTION({ title: 'Fit single image' }, function fitImage(){ImageGrid.fitNImages(1)}), ImageGrid.ACTION({ title: 'Fit 1 image' }, function fitImage(){ImageGrid.fitNImages(1)}),
ImageGrid.ACTION({ title: 'Fit two images' }, function fitTwoImages(){ImageGrid.fitNImages(2)}), ImageGrid.ACTION({ title: 'Fit 2 images' }, function fitTwoImages(){ImageGrid.fitNImages(2)}),
ImageGrid.ACTION({ title: 'Fit three images' }, function fitThreeImages(){ImageGrid.fitNImages(3)}), ImageGrid.ACTION({ title: 'Fit 3 images' }, function fitThreeImages(){ImageGrid.fitNImages(3)}),
ImageGrid.ACTION({ title: 'Fit four images' }, function fitFourImages(){ImageGrid.fitNImages(4)}), ImageGrid.ACTION({ title: 'Fit 4 images' }, function fitFourImages(){ImageGrid.fitNImages(4)}),
ImageGrid.ACTION({ title: 'Fit five images' }, function fitFiveImages(){ImageGrid.fitNImages(5)}), ImageGrid.ACTION({ title: 'Fit 5 images' }, function fitFiveImages(){ImageGrid.fitNImages(5)}),
ImageGrid.ACTION({ title: 'Fit six images' }, function fitSixImages(){ImageGrid.fitNImages(6)}), ImageGrid.ACTION({ title: 'Fit 6 images' }, function fitSixImages(){ImageGrid.fitNImages(6)}),
ImageGrid.ACTION({ title: 'Fit seven images' }, function fitSevenImages(){ImageGrid.fitNImages(7)}), ImageGrid.ACTION({ title: 'Fit 7 images' }, function fitSevenImages(){ImageGrid.fitNImages(7)}),
ImageGrid.ACTION({ title: 'Fit eight images' }, function fitEightImages(){ImageGrid.fitNImages(8)}), ImageGrid.ACTION({ title: 'Fit 8 images' }, function fitEightImages(){ImageGrid.fitNImages(8)}),
ImageGrid.ACTION({ title: 'Fit nine images' }, function fitNineImages(){ImageGrid.fitNImages(9)}) ImageGrid.ACTION({ title: 'Fit 9 images' }, function fitNineImages(){ImageGrid.fitNImages(9)})
) )