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

added auto-generated settings UI (also recognises DEBUG mode)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-17 06:33:01 +04:00
parent 06a1b07fed
commit 48092074cf
6 changed files with 194 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/TODO.otl
View File

@ -1,8 +1,9 @@
Priority work Priority work
[_] 85% Preview II [_] 88% Preview II
[_] 77% UI [_] 93% UI
[_] 0% settings/help screen [_] 50% settings/help screen
[_] keyboard config/help [_] keyboard config/help
[X] auto-generated settings interface
[X] "hide other ribbons" mode [X] "hide other ribbons" mode
[X] fix single image mode [X] fix single image mode
| need to center the image correctly... | need to center the image correctly...
@ -113,7 +114,7 @@ Priority work
[X] 100% actions [X] 100% actions
[X] bug: shifting up to new ribbon pushes the current row down... [X] bug: shifting up to new ribbon pushes the current row down...
| before starting on a fix, need to cleanup the code from old hacks and workarounds... | before starting on a fix, need to cleanup the code from old hacks and workarounds...
[_] 30% Preview II (optional features) [_] 28% Preview II (optional features)
[_] slideshow... [_] slideshow...
[_] 50% serialization/deserialization [_] 50% serialization/deserialization
[X] JSON loader/unloader [X] JSON loader/unloader

4
ui/fullscreen.html
View File

@ -74,7 +74,7 @@ function setup(){
// XXX get the timing right // XXX get the timing right
// XXX fire this when all is done, via an event... // XXX fire this when all is done, via an event...
$('.loading').delay(500).fadeOut(700) $('.overlay').delay(500).fadeOut(700)
} }
$(document).ready(setup); $(document).ready(setup);
@ -88,7 +88,7 @@ $(document).ready(setup);
</head> </head>
<body> <body>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<div class="loading"> <div class="overlay">
<!-- XXX replace this with a background-image logo... --> <!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle"> <table width="100%" height="100%"><tr><td align="center" valign="middle">
<big><b>ImageGrid</b></big><br> <big><b>ImageGrid</b></big><br>

144
ui/gallery-prototype.js
View File

@ -33,14 +33,19 @@ var ImageGrid = {
} }
call[i] = obj[i] call[i] = obj[i]
} }
this[obj.title] = call this[obj.id] = call
return call return call
}, },
// define an option... // define an option...
OPTION: function(obj){ OPTION: function(obj){
this.option[obj.name] = obj.value this.option[obj.name] = obj.value
this.option_props[obj.name] = obj this.option_props[obj.name] = obj
if(this.option_groups.indexOf(obj.group) < 0 && obj.group != null){
this.option_groups.push(obj.group)
this.option_groups.sort()
}
}, },
option_groups: [],
TYPE: function(name, handler){ TYPE: function(name, handler){
this._type_handler[name] = handler this._type_handler[name] = handler
}, },
@ -50,7 +55,7 @@ var ImageGrid = {
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'set', id: 'set',
doc: 'Set option(s) value(s), calling apropriate callbacks.', doc: 'Set option(s) value(s), calling apropriate callbacks.',
group: 'API', group: 'API',
call: function (obj){ call: function (obj){
@ -70,7 +75,7 @@ ImageGrid.ACTION({
} }
}) })
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'doc', id: 'doc',
doc: 'Get documentation for name.', doc: 'Get documentation for name.',
group: 'API', group: 'API',
call: function(name){ call: function(name){
@ -84,35 +89,117 @@ ImageGrid.ACTION({
ImageGrid.TYPE('toggle', function(obj){ ImageGrid.TYPE('toggle', function(obj){
var call = obj.call var call = obj.call
// wrap the call to set the option... // wrap the call to set the option...
// XXX this is context mirroring...
obj.call = function(action){ obj.call = function(action){
var res = call(action) var res = call(action)
ImageGrid.option[obj.title] = call('?') ImageGrid.option[obj.id] = call('?')
return res return res
} }
// add an option to store the state... // add an option to store the state...
ImageGrid.OPTION({ ImageGrid.OPTION({
name: obj.title, name: obj.id,
doc: 'Stores the state of '+obj.title+' action.', title: obj.title,
group: obj.group,
display: obj.display,
doc: obj.doc == null ? 'Stores the state of '+obj.id+' action.' : obj.doc,
value: obj.call('?'), value: obj.call('?'),
callback: function(){ callback: function(){
ImageGrid[obj.title](ImageGrid.option[obj.title]) obj.call()
},
click_handler: function(){
obj.call()
} }
}) })
}) })
// XXX use order and priority of options...
function showSetup(){
var opts = ImageGrid.option
var opt_ps = ImageGrid.option_props
var groups = {}
// clean things up...
$('.overlay').children().remove()
var opts_container = $('<div class="options"/>')
.appendTo($('.overlay'))
// 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???
showSetup()
e.preventDefault()
return false
})
// prepare the overlay...
$('.overlay')
.one('click', function(){
$('.overlay')
.fadeOut()
.children()
.remove()
})
.fadeIn()
}
/******************************************* Setup Data and Globals **/ /******************************************* Setup Data and Globals **/
var DEBUG = true var DEBUG = true
//var DEBUG = false
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'BACKGROUND_MODES', name: 'BACKGROUND_MODES',
doc: 'list of available background styles.\n'+ doc: 'list of available background styles.\n'+
'NOTE: there is also a null mode that is what is set in the '+ 'NOTE: there is also a null mode that is what is set in the '+
'main CSS.', 'main CSS.',
display: false,
value: [ value: [
'dark', 'dark',
'black', 'black',
@ -123,6 +210,7 @@ ImageGrid.OPTION({
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'NORMAL_MODE_BG', name: 'NORMAL_MODE_BG',
display: false,
value: null, value: null,
doc: 'Background style in normal (ribbon) mode.\n'+ doc: 'Background style in normal (ribbon) mode.\n'+
'NOTE: This will get updated on background change in tuntime.\n'+ 'NOTE: This will get updated on background change in tuntime.\n'+
@ -136,6 +224,7 @@ ImageGrid.OPTION({
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'SINGLE_IMAGE_MODE_BG', name: 'SINGLE_IMAGE_MODE_BG',
display: false,
value: 'black', value: 'black',
doc: 'Background style in single image mode.\n'+ doc: 'Background style in single image mode.\n'+
'NOTE: This will get updated on background change in tuntime.\n'+ 'NOTE: This will get updated on background change in tuntime.\n'+
@ -149,6 +238,7 @@ ImageGrid.OPTION({
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'ORIGINAL_FIELD_SCALE', name: 'ORIGINAL_FIELD_SCALE',
display: false,
value: 1.0, value: 1.0,
doc: 'Scale of view in image mode.\n'+ doc: 'Scale of view in image mode.\n'+
'NOTE: this will change if changed at runtime.', 'NOTE: this will change if changed at runtime.',
@ -161,12 +251,16 @@ ImageGrid.OPTION({
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'ZOOM_FACTOR', name: 'ZOOM_FACTOR',
title: 'Zooming factor',
group: 'Mode: All',
value: 2, value: 2,
doc: 'Sets the zoom factor used for a manual zooming step.' doc: 'Sets the zoom factor used for a manual zooming step.'
}) })
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'MOVE_DELTA', name: 'MOVE_DELTA',
title: 'Move step',
group: 'Mode: All',
value: 50, value: 50,
doc: 'Sets the move delta in pixels for keyboard view moving.' doc: 'Sets the move delta in pixels for keyboard view moving.'
}) })
@ -451,7 +545,7 @@ function setupControlElements(){
$('.screen-button.toggle-single').click(ImageGrid.toggleSingleImageMode) $('.screen-button.toggle-single').click(ImageGrid.toggleSingleImageMode)
$('.screen-button.fit-three').click(fitThreeImages) $('.screen-button.fit-three').click(fitThreeImages)
$('.screen-button.show-controls').click(function(){ImageGrid.toggleControls('on')}) $('.screen-button.show-controls').click(function(){ImageGrid.toggleControls('on')})
$('.screen-button.settings').click(function(){alert('not implemented yet...')}) $('.screen-button.settings').click(showSetup)
} }
@ -797,10 +891,12 @@ function makeKeyboardHandler(keybindings, unhandled){
// XXX is this worth it?? // XXX is this worth it??
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleSingleImageMode', id: 'toggleSingleImageMode',
title: 'Single image mode',
doc: 'Toggle single image mode.', doc: 'Toggle single image mode.',
group: 'Modes', group: 'Mode: Single Image',
type: 'toggle', type: 'toggle',
display: false,
call: createCSSClassToggler('.viewer', 'single-image-mode', call: createCSSClassToggler('.viewer', 'single-image-mode',
// pre... // pre...
function(action){ function(action){
@ -828,9 +924,10 @@ ImageGrid.ACTION({
// XXX is this worth it?? // XXX is this worth it??
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleSingleRibbonMode', id: 'toggleSingleRibbonMode',
title: 'Single ribbon mode',
doc: 'Show/hide other ribbons.', doc: 'Show/hide other ribbons.',
group: 'Modes', group: 'Mode: Ribbon',
type: 'toggle', type: 'toggle',
call: createCSSClassToggler('.viewer', 'single-ribbon-mode') call: createCSSClassToggler('.viewer', 'single-ribbon-mode')
}) })
@ -845,9 +942,11 @@ ImageGrid.ACTION({
// + a tad complicated... // + a tad complicated...
// XXX is this worth it?? // XXX is this worth it??
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleDisplayShiftedUpImages', id: 'toggleDisplayShiftedUpImages',
title: 'Display shifted up images',
doc: 'Toggle display of shifted images.', doc: 'Toggle display of shifted images.',
group: 'Modes', group: 'Mode: Ribbon',
display: false,
type: 'toggle', type: 'toggle',
call: createCSSClassToggler('.viewer', 'show-shifted-up-images') call: createCSSClassToggler('.viewer', 'show-shifted-up-images')
}) })
@ -915,9 +1014,10 @@ function toggleBackgroundModes(){
//var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions') //var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions')
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleSingleImageModeTransitions', id: 'toggleSingleImageModeTransitions',
title: 'Single image mode transitions',
doc: 'Toggle transitions in single image mode.', doc: 'Toggle transitions in single image mode.',
group: 'Modes', group: 'Mode: Single Image',
type: 'toggle', type: 'toggle',
call: createCSSClassToggler('.viewer', 'no-single-image-transitions') call: createCSSClassToggler('.viewer', 'no-single-image-transitions')
}) })
@ -925,9 +1025,10 @@ ImageGrid.ACTION({
//var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls') //var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls')
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleControls', id: 'toggleControls',
doc: 'Toggle UI controls.', title: 'Keyboard interface mode',
group: 'Modes', doc: 'Toggle Touch/Keyboard UI controls.',
group: 'Mode: All',
type: 'toggle', type: 'toggle',
call: createCSSClassToggler('.viewer', 'hidden-controls') call: createCSSClassToggler('.viewer', 'hidden-controls')
}) })
@ -935,9 +1036,10 @@ ImageGrid.ACTION({
//var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled') //var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled')
ImageGrid.ACTION({ ImageGrid.ACTION({
title: 'toggleTransitions', id: 'toggleTransitions',
title: 'Global transitions',
doc: 'Toggle global transitions.', doc: 'Toggle global transitions.',
group: 'Modes', group: 'Mode: All',
type: 'toggle', type: 'toggle',
call: createCSSClassToggler('.viewer', 'transitions-enabled') call: createCSSClassToggler('.viewer', 'transitions-enabled')
}) })

66
ui/gallery.css
View File

@ -1,9 +1,10 @@
.loading { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
background-color: white; background-color: white;
color: gray; color: gray;
@ -11,13 +12,66 @@
opacity: 1.0; opacity: 1.0;
z-index: 9000; z-index: 9000;
text-align: center:
} }
.loading * { .overlay * {
color: gray; color: gray;
} }
.options {
position: relative;
left: 12.5%;
width: 75%;
opacity: 1.0;
padding: 20px;
margin: 5px;
border: solid 1px silver;
}
.options .option {
border-bottom: solid 1px silver;
padding: 10px;
margin-top: 15px;
}
.options .option:last-child {
border-bottom: none;
margin-bottom: 30px;
}
.options .option.disabled {
opacity: 0.5;
}
.options .group:first-child {
margin-top:20px;
}
.options .group:last-child {
margin-bottom:20px;
}
.options .group .title {
border-bottom: solid 1px gray;
font-weight: bold;
font-size: large;
}
.options .option .title {
font-weight: bold;
font-size: medium;
border-bottom: none;
}
.options .doc {
display: inline;
font-size: small;
}
.options .value {
float: right;
}
.image { .image {
float: left; float: left;
@ -195,12 +249,12 @@
/* dark background */ /* dark background */
.dark.viewer, .dark .loading { .dark.viewer, .dark .overlay {
background-color: rgb(32, 32, 32); background-color: rgb(32, 32, 32);
} }
.dark .loading * { .dark .overlay * {
color: silver; color: silver;
} }
@ -220,11 +274,11 @@
/* black background */ /* black background */
.black.viewer, .black .loading { .black.viewer, .black .overlay {
background-color: black; background-color: black;
} }
.black .loading * { .black .overlay * {
color: silver; color: silver;
} }

6
ui/gallery.html
View File

@ -71,7 +71,7 @@ function setup(){
// XXX get the timing right // XXX get the timing right
// XXX fire this when all is done, via an event... // XXX fire this when all is done, via an event...
$('.loading').delay(500).fadeOut(700) $('.overlay').delay(500).fadeOut(700)
} }
$(document).ready(setup); $(document).ready(setup);
@ -83,11 +83,11 @@ $(document).ready(setup);
</style> </style>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<div class="loading"> <div class="overlay">
<!-- XXX replace this with a background-image logo... --> <!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle"> <table width="100%" height="100%"><tr><td align="center" valign="middle">
<big><b>ImageGrid</b></big><br> <big><b>ImageGrid</b></big><br>
<small><i>loading...</i></small> <small><i>overlay...</i></small>
</td></tr></table> </td></tr></table>
</div> </div>
<div class="controller-mini left"> <div class="controller-mini left">

2
ui/keybindings.js
View File

@ -2,7 +2,7 @@
// NOTE: use String.fromCharCode(code)... // NOTE: use String.fromCharCode(code)...
var keybindings = { var keybindings = {
// togglable modes and options... // togglable modes and options...
//191: toggleHelp, // ? 191: showSetup, // ?
70: ImageGrid.toggleSingleImageMode, // f 70: ImageGrid.toggleSingleImageMode, // f
83: ImageGrid.toggleSingleRibbonMode, // s 83: ImageGrid.toggleSingleRibbonMode, // s
13: 70, // Enter 13: 70, // Enter