From c1a6f907313110d2d4d21ae558fd847031b2da54 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 28 Apr 2016 17:50:55 +0300 Subject: [PATCH] added a sort dialog... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/base.js | 15 +++-- ui (gen4)/features/keyboard.js | 10 +-- ui (gen4)/features/ui-slideshow.js | 4 +- ui (gen4)/features/ui.js | 100 +++++++++++++++++++++++++++++ ui (gen4)/index.html | 2 + 5 files changed, 121 insertions(+), 10 deletions(-) diff --git a/ui (gen4)/features/base.js b/ui (gen4)/features/base.js index 2f3b8c99..9eb97be8 100755 --- a/ui (gen4)/features/base.js +++ b/ui (gen4)/features/base.js @@ -785,18 +785,23 @@ module.SortActions = actions.Actions({ // XXX should this be a dialog with ability to edit modes??? // - toggle reverse sort // XXX currently this will not toggle past 'none' - toggleImageSort: ['Edit|Sort/Toggle image sort method', + toggleImageSort: ['- Edit|Sort/Toggle image sort method', toggler.Toggler(null, function(){ return this.data.sort_method || 'none' }, function(){ return Object.keys(this.config['sort-methods']) - .concat(this.data.manual_order ? ['Manual'] : [])}, + .concat((this.data.manual_order + || this.data.sort_method == 'Manual') ? ['Manual'] : [])}, // prevent setting 'none' as mode... function(mode){ return !!this.images && (mode != 'none' || (mode == 'Manual' && this.data.manual_order)) }, - function(mode){ + // XXX need to refactor the toggler a bit to make the + // signature simpler... + function(mode, _, reverse){ + reverse = reverse == 'reverse' || reverse + // save manual order... if(this.data.sort_method == 'Manual'){ this.data.manual_order = this.data.order.slice() @@ -806,10 +811,10 @@ module.SortActions = actions.Actions({ // XXX this does not use .sortImages(..) thus this does not update... if(mode == 'Manual'){ this.data.order = this.data.manual_order.slice() - this.sortImages('update') + this.sortImages('update' + (reverse ? ' reverse' : '')) } else { - this.sortImages(mode) + this.sortImages(mode + (reverse ? ' reverse' : '')) } this.data.sort_method = mode diff --git a/ui (gen4)/features/keyboard.js b/ui (gen4)/features/keyboard.js index 949335a3..e7557a1e 100755 --- a/ui (gen4)/features/keyboard.js +++ b/ui (gen4)/features/keyboard.js @@ -24,6 +24,7 @@ var drawer = require('lib/widget/drawer') /*********************************************************************/ +// XXX might be a good idea to be able ignore actions rather than keys... // XXX add this to the global doc... var GLOBAL_KEYBOARD = module.GLOBAL_KEYBOARD = { @@ -55,6 +56,8 @@ module.GLOBAL_KEYBOARD = { L: 'toggleSlideshowLooping', }, + // XXX do we need to prevent up/down navigation here, it may get confusing? + // XXX do we need to disable fast sorting here??? 'Single Image': { pattern: '.single-image-mode', ignore: [ @@ -63,9 +66,6 @@ module.GLOBAL_KEYBOARD = { // do not crop in single image mode... 'C', 'F2', - // XXX not sure about this... - //'Up', 'Down', - // zooming... '#0', '#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', ], @@ -79,6 +79,7 @@ module.GLOBAL_KEYBOARD = { Esc: 'toggleSingleImage: "off" -- Exit single image view', // ignore sorting and reversing... + // XXX not sure about these yet, especially reversing... R: { shift: 'IGNORE', }, @@ -284,7 +285,8 @@ module.GLOBAL_KEYBOARD = { default: 'slideshowDialog', //shift: 'sortImages: "Date" -- Sort images by date', shift: 'sortImages -- Sort images', - alt: 'browseActions: "/Sort/"', + //alt: 'browseActions: "/Sort/"', + alt: 'sortDialog', // XXX need to make this save to base_path if it exists and // ask the user if it does not... now it always asks. ctrl: 'saveIndexHere', diff --git a/ui (gen4)/features/ui-slideshow.js b/ui (gen4)/features/ui-slideshow.js index 8fb1bc40..0e5ceb50 100755 --- a/ui (gen4)/features/ui-slideshow.js +++ b/ui (gen4)/features/ui-slideshow.js @@ -132,7 +132,9 @@ var SlideshowActions = actions.Actions({ // update slideshow menu... oo.client.open(function(){ o.client.update() - o.client.select(txt) + .then(function(){ + o.client.select(txt) + }) }) }) diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index a51351ab..9ce10b41 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -19,6 +19,9 @@ var ribbons = require('ribbons') var core = require('features/core') var base = require('features/base') +var overlay = require('lib/widget/overlay') +var browse = require('lib/widget/browse') + /*********************************************************************/ @@ -737,6 +740,10 @@ module.Viewer = core.ImageGridFeatures.Feature({ 'base', 'workspace', ], + suggested: [ + 'ui-sort', + // XXX add base ui features here... + ], actions: ViewerActions, @@ -797,6 +804,99 @@ module.Viewer = core.ImageGridFeatures.Feature({ +/*********************************************************************/ +// User interfaces for different base features... + +var SortUIActions = actions.Actions({ + config: { + 'default-sort-order': 'default', + }, + + toggleDefaultSortOrder: ['- Edit|Sort/Default sort order', + core.makeConfigToggler('default-sort-order', ['default', 'reverse'])], + sortDialog: ['Edit|Sort/Sort images...', + function(){ + var that = this + + // XXX might be a good idea to make this generic... + var _makeTogglHandler = function(toggler){ + return function(){ + var txt = $(this).find('.text').first().text() + that[toggler]() + o.client.update() + .then(function(){ o.client.select(txt) }) + that.toggleSlideshow('?') == 'on' + && o.close() + } + } + + var o = overlay.Overlay(this.ribbons.viewer, + browse.makeLister(null, function(path, make){ + var cur = that.toggleImageSort('?') + + that.toggleImageSort('??').forEach(function(mode){ + // skip 'none'... + if(mode == 'none'){ + return + } + make(mode + (cur == mode ? ' *' : '')) + .on('open', function(){ + that.toggleImageSort(null, mode, + that.config['default-sort-order'] == 'reverse') + o.close() + }) + }) + + // Commands... + make('---') + + make('Reverse images') + .on('open', function(){ + that.reverseImages() + o.close() + }) + /* + make('Reverse ribbons') + .on('open', function(){ + that.reverseRibbons() + o.close() + }) + */ + + // Settings... + make('---') + + make(['Default order: ', that.config['default-sort-order'] || 'ascending']) + .on('open', _makeTogglHandler('toggleDefaultSortOrder')) + .addClass('item-value-view') + })) + + // select the current order... + o.client.select('"' + this.toggleImageSort('?') + ' *"') + + return o + }] +}) + +var SortUI = +module.SortUI = core.ImageGridFeatures.Feature({ + title: '', + doc: '', + + tag: 'ui-sort', + depends: [ + 'ui', + ], + + actions: SortUIActions, +}) + + +// XXX tag dialogs... +// XXX + + + /*********************************************************************/ // Utilities and Services... diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html index 66fc5bd0..4728a999 100755 --- a/ui (gen4)/index.html +++ b/ui (gen4)/index.html @@ -130,10 +130,12 @@ body { /* Metadata viewer */ +.item-value-view .text:first-child, .browse-widget.metadata-view .list>div .text:first-child { width: 50%; font-weight: bold; } +.item-value-view .text:nth-child(2), .browse-widget.metadata-view .list>div .text:nth-child(2) { font-style: italic;