From ff5d1c46559ef7b1cb828ca11394f32446993260 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sun, 15 Jan 2017 04:36:48 +0300 Subject: [PATCH] added tab handling to browse + now sorting works in bk editor + refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/history.js | 2 +- ui (gen4)/features/keyboard.js | 77 ++++++++++++++++--- ui (gen4)/features/ui-widgets.js | 70 ++---------------- ui (gen4)/lib/widget/browse.js | 123 ++++++++++++++++++++++++++++++- 4 files changed, 194 insertions(+), 78 deletions(-) diff --git a/ui (gen4)/features/history.js b/ui (gen4)/features/history.js index a2240696..c64d5077 100755 --- a/ui (gen4)/features/history.js +++ b/ui (gen4)/features/history.js @@ -594,7 +594,7 @@ var URLHistoryUIActions = actions.Actions({ o.redraw() }], // mark for removal... - widgets.makeRemoveItemButton(to_remove) + browse.buttons.markForRemoval(to_remove) ], }) .open(function(evt, path){ diff --git a/ui (gen4)/features/keyboard.js b/ui (gen4)/features/keyboard.js index 036561d1..13fc862d 100755 --- a/ui (gen4)/features/keyboard.js +++ b/ui (gen4)/features/keyboard.js @@ -866,6 +866,7 @@ var KeyboardActions = actions.Actions({ disabled: true, hide_on_search: true, }) + .attr('mode', mode) .addClass('info') // unpropagated and unbound keys... @@ -890,6 +891,7 @@ var KeyboardActions = actions.Actions({ var elem = make('new', { buttons: options.mode_actions, }) + .attr('mode', mode) .addClass('new') } }) @@ -917,10 +919,29 @@ var KeyboardActions = actions.Actions({ return dialog })], + // XXX do we need a binding to add new keys to current mode from the + // keyboard??? // XXX BUG: for some reason modes are unclickable... editKeyboardBindings: ['Interface/Keyboard bindings editor...', widgets.uiDialog(function(path){ var that = this + var bindings = this.keybindings + + var sortModes = function(list){ + var ordered = {} + list.find('[mode]') + .map(function(){ return $(this).attr('mode')}) + .toArray() + .unique() + .forEach(function(mode){ + ordered[mode] = bindings[mode] + }) + // reorder only if we moved all the modes... + if(Object.keys(bindings).length == Object.keys(ordered).length){ + that.__keyboard_config = ordered + } + } + var dialog = this.browseKeyboardBindings( path, { @@ -930,11 +951,39 @@ var KeyboardActions = actions.Actions({ // mode... mode_buttons: [ - // XXX up + // up... ['⏶', function(_, cur){ + var mode = cur.attr('mode') + var elems = cur.parent().find('[mode="'+mode+'"]') + var prev = elems.first().prev('[mode]').attr('mode') + + // move only if we have somewhere to move... + if(prev){ + cur.parent().find('[mode="'+prev+'"]') + .first() + .before(elems) + dialog.select(elems.first()) + + // do the actual section ordering... + sortModes(cur.parent()) + } }], - // XXX down + // down... ['⏷', function(_, cur){ + var mode = cur.attr('mode') + var elems = cur.parent().find('[mode="'+mode+'"]') + var next = elems.last().next('[mode]').attr('mode') + + // move only if we have somewhere to move... + if(next){ + cur.parent().find('[mode="'+next+'"]') + .last() + .after(elems) + dialog.select(elems.first()) + + // do the actual section ordering... + sortModes(cur.parent()) + } }], ['⋯', function(_, cur){ that.editKeyboardMode(cur.attr('mode')) @@ -945,6 +994,7 @@ var KeyboardActions = actions.Actions({ //elem.before( XXX ) that.editKeyBinding(cur.attr('mode')) .close(function(){ dialog.update() }) }], + // XXX place element... ['mode', function(_, cur){ //elem.after( XXX ) // XXX need to pass order info... @@ -952,6 +1002,7 @@ var KeyboardActions = actions.Actions({ .close(function(){ dialog.update() }) }], ], + /*/ XXX do we need this??? // keys... key_buttons: [ ['⋯', function(_, cur){ @@ -965,6 +1016,7 @@ var KeyboardActions = actions.Actions({ that.editKeyboardModeDroppedKeys(cur.attr('mode')) .close(function(){ dialog.update() }) }], ], + //*/ }) // XXX should this be only a button thing (done in .browseKeyboardBindings(..)) // or also the main action??? @@ -1027,23 +1079,24 @@ var KeyboardActions = actions.Actions({ .forEach(function(key){ // XXX make editable... make(key, { buttons: [ - widgets.makeRemoveItemButton(to_remove), + browse.buttons.markForRemoval(to_remove) ], }) }) - var new_button = make('New key') - .addClass('action') + var new_button = make.Action('New key') .on('open', function(){ widgets.editItem(dialog, new_button) }) make('---') - widgets.makeConfirmActionItem(make('Delete'), - function(){ + make.ConfirmAction('Delete', { + callback: function(){ // XXX dialog.close() - }, that.config['confirm-delete-timeout'] || 2000) + }, + timeout: that.config['confirm-delete-timeout'] || 2000, + }) }, { cls: 'metadata-view', @@ -1066,13 +1119,15 @@ var KeyboardActions = actions.Actions({ make('---') - widgets.makeConfirmActionItem(make('Delete'), - function(){ + make.ConfirmAction('Delete', { + callback: function(){ if(mode in that.keybindings){ delete that.keybindings[mode] } dialog.close() - }, that.config['confirm-delete-timeout'] || 2000) + }, + timeout: that.config['confirm-delete-timeout'] || 2000, + }) }, { cls: 'metadata-view', diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 3bea6092..c29a0a51 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -166,70 +166,6 @@ function(list, elem, callback, options){ } -var makeRemoveItemButton = -module.makeRemoveItemButton = -function makeRemoveItemButton(list, html){ - return [html || '×', - function(p, e){ - e.toggleClass('strike-out') - - if(e.hasClass('strike-out')){ - list.indexOf(p) < 0 - && list.push(p) - - } else { - var i = list.indexOf(p) - if(i >= 0){ - list.splice(i, 1) - } - } - }] -} - - -var makeConfirmActionItem = -module.makeConfirmActionItem = -function makeConfirmActionItem(elem, callback, timeout, confirm_text){ - confirm_text = confirm_text ? - confirm_text - : 'Confirm '+ elem.text().toLowerCase() +'?' - var text - - return elem - .addClass('action') - .on('open', function(){ - var item = $(this) - var elem = item.find('.text') - - // ready to delete... - if(elem.text() != confirm_text){ - text = elem.text() - - elem.text(confirm_text) - - item.addClass('warn') - - // reset... - setTimeout(function(){ - elem.text(text) - - item.removeClass('warn') - }, timeout || 2000) - - // confirmed... - } else { - callback && callback() - } - }) -} - - -var makeNewEditableItem = -module.makeNewEditableItem = -function makeNewEditableItem(elem){ -} - - // // Options format: // { @@ -363,7 +299,7 @@ function(list, options){ path: options.path, itemButtons: options.itemButtons || [ // mark for removal... - makeRemoveItemButton(to_remove) + browse.buttons.markForRemoval(to_remove) // XXX add shift up/down/top/bottom and other buttons (optional)... ] }) @@ -444,6 +380,10 @@ function(actions, path, options){ } +// XXX do we actually need this??? +// ...this essentially adds: +// - callbacks to parent to update +// - some defaults... // XXX should this be more generic... // XXX currently using this also requires the use of makeUIDialog(..), // can this be simpler??? diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js index cd26f4dc..9bf5a216 100755 --- a/ui (gen4)/lib/widget/browse.js +++ b/ui (gen4)/lib/widget/browse.js @@ -66,6 +66,118 @@ function makeSimpleAction(direction){ +/*********************************************************************/ +// collections of helpers... + +//--------------------------------------------------------------------- +// NOTE: all item constructors/helpers abide by either the new-style +// make protocol, i.e. make(content[, options]) or their own... +var Items = module.items = function(){} + +// NOTE: this is the same as make('---'[, options]) +Items.Separator = +function(options){ + return this('---', options) } + +Items.Action = +function(text, options){ + return this(text, options) + .addClass('action') } + +Items.ConfirmAction = +function(text, options){ + options = options || {} + + var elem = this.Action(text, options) + + var callback = options.callback + var timeout = options.timeout || 2000 + var confirm_text = options.confirm_text ? + options.confirm_text + : 'Confirm '+ elem.text().toLowerCase() +'?' + var text + + return elem + .on('open', function(){ + var item = $(this) + var elem = item.find('.text') + + // ready to delete... + if(elem.text() != confirm_text){ + text = elem.text() + + elem.text(confirm_text) + + item.addClass('warn') + + // reset... + setTimeout(function(){ + elem.text(text) + + item.removeClass('warn') + }, timeout) + + // confirmed... + } else { + callback && callback() + } + }) +} + +// XXX +Items.Selectable = +function(text, options){ +} + +// XXX +Items.Editable = +function(text, options){ +} + +// XXX +Items.SelectableField = +function(text, options){ +} + +// XXX +Items.EditableField = +function(text, options){ +} + + + +//--------------------------------------------------------------------- +// Browse item buttons (button constructors)... + +var Buttons = +Items.buttons = +module.buttons = { + // Mark an item for removal and add it to a list of marked items... + // + markForRemoval: function(list, html){ + return [html || '×', + function(p, e){ + e.toggleClass('strike-out') + + if(list == null){ + return + } + + if(e.hasClass('strike-out')){ + list.indexOf(p) < 0 + && list.push(p) + + } else { + var i = list.indexOf(p) + i >= 0 + && list.splice(i, 1) + } + }] + }, +} + + + /*********************************************************************/ // NOTE: the widget itself does not need a title, that's the job for @@ -422,6 +534,13 @@ var BrowserPrototype = { Right: 'right', P: 'push', + // XXX should these also select buttons??? + Tab: 'down!', + shift_Tab: 'up!', + + // XXX is this correct?? + ctrl_Tab: 'nop!', + // XXX PgUp: 'prevPage!', PgDown: 'nextPage!', @@ -988,7 +1107,7 @@ var BrowserPrototype = { } // options passed as an object... - if(traversable != null && typeof(traversable) == typeof({})){ + if(traversable != null && typeof(traversable) != typeof(true)){ opts = traversable traversable = opts.traversable @@ -1180,6 +1299,8 @@ var BrowserPrototype = { return res } + make.__proto__ = Items + // align the dialog... make.done = function(){ var s = l.find('.selected')