flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-28 18:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactored main controls out of testing + ui cleanup and tweaking...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-11-09 04:53:42 +03:00
parent 9ea06bffdb
commit 2c650da183
7 changed files with 131 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui (gen4)/css/layout.less
View File

@ -307,6 +307,13 @@ button:hover {
//z-index: 9999;
}
.light .buttons {
opacity: 0.5;
}
.dark .buttons {
opacity: 0.2;
}
.buttons:hover {
opacity: 1;
}
@ -316,9 +323,14 @@ button:hover {
display: inline-block;
color: silver;
width: 40px;
box-sizing: border-box;
min-width: 40px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
line-height: 40px;
}

5
ui (gen4)/features/app.js
View File

@ -286,7 +286,10 @@ module.FullScreenControlls = core.ImageGridFeatures.Feature({
tag: 'ui-fullscreen-controls',
depends: [
'ui-app-control',
'ui-status',
],
suggested: [
// needed for reporting info in .makeButtonControls(..)
'ui-status-bar',
],
actions: FullScreenControllsActions,

12
ui (gen4)/features/keyboard.js
View File

@ -266,9 +266,15 @@ module.GLOBAL_KEYBOARD = {
'#8':'fitImage: 8 -- Fit 8 images',
'#9': 'fitImage: 9 -- Fit 9 images',
'+': 'zoomIn',
'+': {
default: 'zoomIn',
ctrl: 'lighterTheme!',
},
'=': '+',
'-': 'zoomOut',
'-': {
default: 'zoomOut',
ctrl: 'darkerTheme!',
},
F2: {
default: 'cropRibbon',
@ -305,6 +311,8 @@ module.GLOBAL_KEYBOARD = {
B: {
default: 'toggleBookmark',
ctrl: 'toggleTheme!',
'ctrl+shift': 'toggleTheme!: "prev"',
alt: 'browseActions: "/Bookmark/" -- Show bookmark menu',
// XXX not sure if this is the right way to go...

1
ui (gen4)/features/meta.js
View File

@ -81,6 +81,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
'external-editor',
// chrome...
'ui-main-controls',
'ui-progress',
'ui-status-log',
'ui-scale',

107
ui (gen4)/features/ui-widgets.js
View File

@ -53,10 +53,12 @@ function(context, cls, data){
var info = t.attr('info') || t.parents('[info]').attr('info') || ''
context.showStatusBarInfo(info)
context.showStatusBarInfo
&& context.showStatusBarInfo(info)
})
.on('mouseout', function(){
context.showStatusBarInfo()
context.showStatusBarInfo
&& context.showStatusBarInfo()
})
// make buttons...
@ -1061,20 +1063,78 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
//---------------------------------------------------------------------
// XXX make this not applicable to production...
var WidgetTestActions = actions.Actions({
var MainControlsActions = actions.Actions({
config: {
'main-controls-state': 'on',
'main-controls': {
'&#x2630;': ['menu',
'browseActions -- Show action menu...'],
'browseActions -- Action menu...'],
//'Crop<sub/>': ['crop',
'C<sub/>': ['crop',
'browseActions: "Crop/" -- Show crop menu...'],
'browseActions: "Crop/" -- Crop menu...'],
/*
//'Mark': ['marks',
'M': ['marks',
'browseActions: "Mark/" -- Mark menu...'],
//*/
},
},
toggleMainControls: ['Interface/',
toggler.Toggler(null,
function(){
return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' },
['off', 'on'],
function(state){
if(state == 'on'){
var config = this.config['main-controls']
config
&& makeButtonControls(this, 'main-controls', config)
} else {
this.ribbons.viewer.find('.main-controls').remove()
}
})],
})
var BrowseActions =
module.BrowseActions = core.ImageGridFeatures.Feature({
title: '',
doc: '',
tag: 'ui-main-controls',
depends: [
'ui',
],
suggested: [
// needed for reporting info in .makeButtonControls(..)
'ui-status-bar',
],
actions: MainControlsActions,
handlers: [
// main controls stuff...
['start',
function(){
this.toggleMainControls(this.config['main-controls-state'] || 'on') }],
['load reload',
function(){
// update crop button status...
$('.main-controls.buttons .crop.button sub')
.text(this.crop_stack ? this.crop_stack.length : '') }]
],
})
//---------------------------------------------------------------------
// XXX make this not applicable to production...
var WidgetTestActions = actions.Actions({
testAction: ['- Test/',
function(){
console.log('>>>', [].slice.call(arguments))
@ -1225,25 +1285,6 @@ var WidgetTestActions = actions.Actions({
setTimeout(step, 1000)
}],
// XXX move this out...
// XXX also see handlers....
toggleMainControls: ['Interface/',
toggler.Toggler(null,
function(){
return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' },
['off', 'on'],
function(state){
if(state == 'on'){
var config = this.config['main-controls']
config
&& makeButtonControls(this, 'main-controls', config)
} else {
this.ribbons.viewer.find('.main-controls').remove()
}
})],
// XXX make this a toggler....
partitionByMonth: ['Test/',
function(){
@ -1449,18 +1490,6 @@ module.WidgetTest = core.ImageGridFeatures.Feature({
],
actions: WidgetTestActions,
handlers: [
// main controls stuff...
['start',
function(){
this.toggleMainControls(this.config['main-controls-state'] || 'on') }],
['load reload',
function(){
// update crop button status...
$('.main-controls.buttons .crop.button sub')
.text(this.crop_stack ? this.crop_stack.length : '') }]
],
})

15
ui (gen4)/features/ui.js
View File

@ -162,8 +162,8 @@ module.ViewerActions = actions.Actions({
// Supported themes...
'themes': [
'gray',
'dark',
'gray',
'light',
],
@ -384,12 +384,25 @@ module.ViewerActions = actions.Actions({
function(){ return this.ribbons.viewer },
function(){ return this.config.themes },
function(state){ this.config.theme = state }) ],
lighterTheme: ['Interface/Theme/Lighter',
function(){
var themes = this.config.themes
var i = themes.indexOf(this.toggleTheme('?'))
this.toggleTheme(Math.min(i+1, themes.length-1))
}],
darkerTheme: ['Interface/Theme/Darker',
function(){
var themes = this.config.themes
var i = themes.indexOf(this.toggleTheme('?'))
this.toggleTheme(Math.max(0, i-1))
}],
toggleRibbonTheme: ['Interface/Theme/Toggle ribbon theme',
toggler.CSSClassToggler(
function(){ return this.ribbons.viewer },
function(){ return this.config['ribbon-themes'] },
function(state){ this.config['ribbon-theme'] = state }) ],
/*
setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
function(msg, help){ this.ribbons

30
ui (gen4)/lib/toggler.js
View File

@ -31,6 +31,8 @@
// - <index> : 0 for 'off' and 1 for 'on' (see below)
// - 'on' : switch mode on -- add class
// - 'off' : switch mode off -- remove class
// - 'next' : switch to next state (default)
// - 'prev' : switch to previous state
// - '!' : reload current state, same as toggler(toggler('?'))
// - '?' : return current state ('on'|'off')
// - '??' : return a list of supported states
@ -38,6 +40,8 @@
// In forms 2 and 3, if class_list is a list of strings, the <action> can be:
// - <index> : explicitly set the state to index in class_list
// - <class-name> : explicitly set a class from the list
// - 'next' : switch to next state (default)
// - 'prev' : switch to previous state
// - '!' : reload current state, same as toggler(toggler('?'))
// - '?' : return current state ('on'|'off')
// - '??' : return a list of supported states
@ -49,9 +53,6 @@
// action argument given is invalid.
//
// NOTE: action '?' is handled internally and not passed to the callbacks.
// NOTE: there is a special action 'next', passing it will have the same
// effect as not passing any action -- we will change to the next
// state.
// NOTE: if it is needed to apply this to an explicit target but with
// no explicit action, just pass 'next' as the second argument.
// NOTE: a special class name 'none' means no class is set, if it is present
@ -168,7 +169,7 @@ function(elem, state_accessor, states, callback_a, callback_b){
if(typeof(states_getter) == typeof(function(){})){
// get the states...
var states = states_getter.call(this)
var states = typeof(states) == typeof('str') ?
states = typeof(states) == typeof('str') ?
['none', states]
: states
}
@ -195,7 +196,10 @@ function(elem, state_accessor, states, callback_a, callback_b){
return states
// we need to get the current state...
} else if(action == null || action == '?' || action == '!'){
} else if(action == null
|| action == 'prev'
|| action == '?'
|| action == '!'){
// get current state...
var cur = state_accessor.call(this, e)
@ -225,10 +229,18 @@ function(elem, state_accessor, states, callback_a, callback_b){
var state = bool_action ? states[action == 'off' ? 0 : 1] : action
// get the right class...
if(action == null){
var i = states.indexOf(cur)+1
i = i == -1 ? 0 : i
i = i == states.length ? 0 : i
if(action == null || action == 'prev'){
if(action == 'prev'){
var i = states.indexOf(cur)-1
i = i <= -1 ? states.length-1 : i
} else {
var i = states.indexOf(cur)+1
//i = i == -1 ? 0 : i
i = i == states.length ? 0 : i
}
state = states[i]
if(bool_action){