mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
added auto-generated settings UI (also recognises DEBUG mode)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
06a1b07fed
commit
48092074cf
@ -1,8 +1,9 @@
|
||||
Priority work
|
||||
[_] 85% Preview II
|
||||
[_] 77% UI
|
||||
[_] 0% settings/help screen
|
||||
[_] 88% Preview II
|
||||
[_] 93% UI
|
||||
[_] 50% settings/help screen
|
||||
[_] keyboard config/help
|
||||
[X] auto-generated settings interface
|
||||
[X] "hide other ribbons" mode
|
||||
[X] fix single image mode
|
||||
| need to center the image correctly...
|
||||
@ -113,7 +114,7 @@ Priority work
|
||||
[X] 100% actions
|
||||
[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...
|
||||
[_] 30% Preview II (optional features)
|
||||
[_] 28% Preview II (optional features)
|
||||
[_] slideshow...
|
||||
[_] 50% serialization/deserialization
|
||||
[X] JSON loader/unloader
|
||||
|
||||
@ -74,7 +74,7 @@ function setup(){
|
||||
|
||||
// XXX get the timing right
|
||||
// XXX fire this when all is done, via an event...
|
||||
$('.loading').delay(500).fadeOut(700)
|
||||
$('.overlay').delay(500).fadeOut(700)
|
||||
}
|
||||
$(document).ready(setup);
|
||||
|
||||
@ -88,7 +88,7 @@ $(document).ready(setup);
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewer no-single-image-transitions">
|
||||
<div class="loading">
|
||||
<div class="overlay">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
<big><b>ImageGrid</b></big><br>
|
||||
|
||||
@ -33,14 +33,19 @@ var ImageGrid = {
|
||||
}
|
||||
call[i] = obj[i]
|
||||
}
|
||||
this[obj.title] = call
|
||||
this[obj.id] = call
|
||||
return call
|
||||
},
|
||||
// define an option...
|
||||
OPTION: function(obj){
|
||||
this.option[obj.name] = obj.value
|
||||
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){
|
||||
this._type_handler[name] = handler
|
||||
},
|
||||
@ -50,7 +55,7 @@ var ImageGrid = {
|
||||
|
||||
|
||||
ImageGrid.ACTION({
|
||||
title: 'set',
|
||||
id: 'set',
|
||||
doc: 'Set option(s) value(s), calling apropriate callbacks.',
|
||||
group: 'API',
|
||||
call: function (obj){
|
||||
@ -70,7 +75,7 @@ ImageGrid.ACTION({
|
||||
}
|
||||
})
|
||||
ImageGrid.ACTION({
|
||||
title: 'doc',
|
||||
id: 'doc',
|
||||
doc: 'Get documentation for name.',
|
||||
group: 'API',
|
||||
call: function(name){
|
||||
@ -84,35 +89,117 @@ ImageGrid.ACTION({
|
||||
ImageGrid.TYPE('toggle', function(obj){
|
||||
var call = obj.call
|
||||
// wrap the call to set the option...
|
||||
// XXX this is context mirroring...
|
||||
obj.call = function(action){
|
||||
var res = call(action)
|
||||
ImageGrid.option[obj.title] = call('?')
|
||||
ImageGrid.option[obj.id] = call('?')
|
||||
return res
|
||||
}
|
||||
// add an option to store the state...
|
||||
ImageGrid.OPTION({
|
||||
name: obj.title,
|
||||
doc: 'Stores the state of '+obj.title+' action.',
|
||||
name: obj.id,
|
||||
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('?'),
|
||||
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 **/
|
||||
|
||||
var DEBUG = true
|
||||
//var DEBUG = false
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'BACKGROUND_MODES',
|
||||
doc: 'list of available background styles.\n'+
|
||||
'NOTE: there is also a null mode that is what is set in the '+
|
||||
'main CSS.',
|
||||
display: false,
|
||||
value: [
|
||||
'dark',
|
||||
'black',
|
||||
@ -123,6 +210,7 @@ ImageGrid.OPTION({
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'NORMAL_MODE_BG',
|
||||
display: false,
|
||||
value: null,
|
||||
doc: 'Background style in normal (ribbon) mode.\n'+
|
||||
'NOTE: This will get updated on background change in tuntime.\n'+
|
||||
@ -136,6 +224,7 @@ ImageGrid.OPTION({
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'SINGLE_IMAGE_MODE_BG',
|
||||
display: false,
|
||||
value: 'black',
|
||||
doc: 'Background style in single image mode.\n'+
|
||||
'NOTE: This will get updated on background change in tuntime.\n'+
|
||||
@ -149,6 +238,7 @@ ImageGrid.OPTION({
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'ORIGINAL_FIELD_SCALE',
|
||||
display: false,
|
||||
value: 1.0,
|
||||
doc: 'Scale of view in image mode.\n'+
|
||||
'NOTE: this will change if changed at runtime.',
|
||||
@ -161,12 +251,16 @@ ImageGrid.OPTION({
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'ZOOM_FACTOR',
|
||||
title: 'Zooming factor',
|
||||
group: 'Mode: All',
|
||||
value: 2,
|
||||
doc: 'Sets the zoom factor used for a manual zooming step.'
|
||||
})
|
||||
|
||||
ImageGrid.OPTION({
|
||||
name: 'MOVE_DELTA',
|
||||
title: 'Move step',
|
||||
group: 'Mode: All',
|
||||
value: 50,
|
||||
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.fit-three').click(fitThreeImages)
|
||||
$('.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??
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleSingleImageMode',
|
||||
id: 'toggleSingleImageMode',
|
||||
title: 'Single image mode',
|
||||
doc: 'Toggle single image mode.',
|
||||
group: 'Modes',
|
||||
group: 'Mode: Single Image',
|
||||
type: 'toggle',
|
||||
display: false,
|
||||
call: createCSSClassToggler('.viewer', 'single-image-mode',
|
||||
// pre...
|
||||
function(action){
|
||||
@ -828,9 +924,10 @@ ImageGrid.ACTION({
|
||||
|
||||
// XXX is this worth it??
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleSingleRibbonMode',
|
||||
id: 'toggleSingleRibbonMode',
|
||||
title: 'Single ribbon mode',
|
||||
doc: 'Show/hide other ribbons.',
|
||||
group: 'Modes',
|
||||
group: 'Mode: Ribbon',
|
||||
type: 'toggle',
|
||||
call: createCSSClassToggler('.viewer', 'single-ribbon-mode')
|
||||
})
|
||||
@ -845,9 +942,11 @@ ImageGrid.ACTION({
|
||||
// + a tad complicated...
|
||||
// XXX is this worth it??
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleDisplayShiftedUpImages',
|
||||
id: 'toggleDisplayShiftedUpImages',
|
||||
title: 'Display shifted up images',
|
||||
doc: 'Toggle display of shifted images.',
|
||||
group: 'Modes',
|
||||
group: 'Mode: Ribbon',
|
||||
display: false,
|
||||
type: 'toggle',
|
||||
call: createCSSClassToggler('.viewer', 'show-shifted-up-images')
|
||||
})
|
||||
@ -915,9 +1014,10 @@ function toggleBackgroundModes(){
|
||||
|
||||
//var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions')
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleSingleImageModeTransitions',
|
||||
id: 'toggleSingleImageModeTransitions',
|
||||
title: 'Single image mode transitions',
|
||||
doc: 'Toggle transitions in single image mode.',
|
||||
group: 'Modes',
|
||||
group: 'Mode: Single Image',
|
||||
type: 'toggle',
|
||||
call: createCSSClassToggler('.viewer', 'no-single-image-transitions')
|
||||
})
|
||||
@ -925,9 +1025,10 @@ ImageGrid.ACTION({
|
||||
|
||||
//var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls')
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleControls',
|
||||
doc: 'Toggle UI controls.',
|
||||
group: 'Modes',
|
||||
id: 'toggleControls',
|
||||
title: 'Keyboard interface mode',
|
||||
doc: 'Toggle Touch/Keyboard UI controls.',
|
||||
group: 'Mode: All',
|
||||
type: 'toggle',
|
||||
call: createCSSClassToggler('.viewer', 'hidden-controls')
|
||||
})
|
||||
@ -935,9 +1036,10 @@ ImageGrid.ACTION({
|
||||
|
||||
//var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled')
|
||||
ImageGrid.ACTION({
|
||||
title: 'toggleTransitions',
|
||||
id: 'toggleTransitions',
|
||||
title: 'Global transitions',
|
||||
doc: 'Toggle global transitions.',
|
||||
group: 'Modes',
|
||||
group: 'Mode: All',
|
||||
type: 'toggle',
|
||||
call: createCSSClassToggler('.viewer', 'transitions-enabled')
|
||||
})
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.loading {
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
background-color: white;
|
||||
color: gray;
|
||||
@ -11,13 +12,66 @@
|
||||
opacity: 1.0;
|
||||
|
||||
z-index: 9000;
|
||||
|
||||
text-align: center:
|
||||
}
|
||||
|
||||
|
||||
.loading * {
|
||||
.overlay * {
|
||||
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 {
|
||||
float: left;
|
||||
@ -195,12 +249,12 @@
|
||||
|
||||
|
||||
/* dark background */
|
||||
.dark.viewer, .dark .loading {
|
||||
.dark.viewer, .dark .overlay {
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
|
||||
|
||||
.dark .loading * {
|
||||
.dark .overlay * {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
@ -220,11 +274,11 @@
|
||||
|
||||
|
||||
/* black background */
|
||||
.black.viewer, .black .loading {
|
||||
.black.viewer, .black .overlay {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.black .loading * {
|
||||
.black .overlay * {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
|
||||
@ -71,7 +71,7 @@ function setup(){
|
||||
|
||||
// XXX get the timing right
|
||||
// XXX fire this when all is done, via an event...
|
||||
$('.loading').delay(500).fadeOut(700)
|
||||
$('.overlay').delay(500).fadeOut(700)
|
||||
}
|
||||
$(document).ready(setup);
|
||||
|
||||
@ -83,11 +83,11 @@ $(document).ready(setup);
|
||||
</style>
|
||||
|
||||
<div class="viewer no-single-image-transitions">
|
||||
<div class="loading">
|
||||
<div class="overlay">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
<big><b>ImageGrid</b></big><br>
|
||||
<small><i>loading...</i></small>
|
||||
<small><i>overlay...</i></small>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<div class="controller-mini left">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// NOTE: use String.fromCharCode(code)...
|
||||
var keybindings = {
|
||||
// togglable modes and options...
|
||||
//191: toggleHelp, // ?
|
||||
191: showSetup, // ?
|
||||
70: ImageGrid.toggleSingleImageMode, // f
|
||||
83: ImageGrid.toggleSingleRibbonMode, // s
|
||||
13: 70, // Enter
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user