From b870826e97ba57c755d4705c687fef40127fcb24 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 26 Jun 2015 03:07:58 +0300 Subject: [PATCH] added basic full path editing (a bit trivial) Signed-off-by: Alex A. Naanou --- ui (gen4)/experiments/browse-dialog.html | 4 +- ui (gen4)/experiments/browse-dialog.js | 99 +++++++++++++++++++++++- 2 files changed, 97 insertions(+), 6 deletions(-) diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html index b693cec8..141aa22f 100755 --- a/ui (gen4)/experiments/browse-dialog.html +++ b/ui (gen4)/experiments/browse-dialog.html @@ -202,6 +202,8 @@ requirejs(['../lib/keyboard', '../object', './browse-dialog'], function(k, o, br 'option 6', 'option 7', ], + + fullpathedit: false, traversable: false, flat: true, @@ -243,8 +245,6 @@ $(function(){ $('.container').draggable({ cancel: ".path .dir, .list div" }) - - //browser.focus() }) diff --git a/ui (gen4)/experiments/browse-dialog.js b/ui (gen4)/experiments/browse-dialog.js index 1cc6b32a..3ba9ba87 100755 --- a/ui (gen4)/experiments/browse-dialog.js +++ b/ui (gen4)/experiments/browse-dialog.js @@ -96,9 +96,12 @@ var BrowserPrototype = { //show_path: true, // Enable/disable user selection filtering... - // NOTE: this only affects .stopFilter(..) + // NOTE: this only affects .startFilter(..) filter: true, + // Enable/disable full path editing... + fullpathedit: true, + // If false will disable traversal... // NOTE: if false this will also disable traversal up. // NOTE: this will not disable manual updates or explicit path @@ -119,6 +122,29 @@ var BrowserPrototype = { // XXX TEST: this should prevent event handler delegation... keyboard: { + FullPathEdit: { + pattern: '.browse .path[contenteditable]', + + // keep text editing action from affecting the selection... + ignore: [ + 'Backspace', + 'Up', + 'Down', + 'Left', + 'Right', + 'Home', + 'End', + 'Enter', + 'Esc', + '/', + 'A', + + ], + + Enter: 'stopFullPathEdit!', + Esc: 'abortFullPathEdit!', + }, + // filter mappings... Filter: { pattern: '.browse .path div.cur[contenteditable]', @@ -133,6 +159,7 @@ var BrowserPrototype = { 'Enter', 'Esc', '/', + 'A', ], Enter: 'action!', @@ -143,12 +170,12 @@ var BrowserPrototype = { pattern: '.browse', Up: 'prev!', - Backspace: 'Up', Down: 'next!', Left: { - default: 'pop', - ctrl: 'update: "/"', + default: 'pop!', + ctrl: 'update!: "/"', }, + Backspace: 'Left', Right: 'push', Home: 'select!: "first"', @@ -161,6 +188,10 @@ var BrowserPrototype = { Esc: 'close', '/': 'startFilter!', + + A: { + ctrl: 'startFullPathEdit!', + }, }, }, @@ -556,6 +587,58 @@ var BrowserPrototype = { // internal actions... + // XXX full path editing... + // XXX should these be a toggle??? + startFullPathEdit: function(){ + if(this.options.fullpathedit){ + var browser = this.dom + var path = this.path.join('/') + browser + .attr('orig-path', path) + .attr('orig-selection', this.select('!').text()) + + var range = document.createRange() + var selection = window.getSelection() + + var e = browser.find('.path') + .text(path) + .attr('contenteditable', true) + .focus() + + range.selectNodeContents(e[0]) + selection.removeAllRanges() + selection.addRange(range) + } + return this + }, + abortFullPathEdit: function(){ + var browser = this.dom + var e = browser.find('.path') + + var path = '/' + browser.attr('orig-path') + var selection = browser.attr('orig-selection') + + this.stopFullPathEdit(path) + + if(selection != ''){ + this.select(selection) + } + + return this + }, + stopFullPathEdit: function(path){ + var browser = this.dom + .removeAttr('orig-path') + .removeAttr('orig-selection') + + var e = browser.find('.path') + .removeAttr('contenteditable') + + this.path = path || '/' + e.text() + + return this.focus() + }, + // NOTE: this uses .filter(..) for actual filtering... // XXX revise API -- seems a bit overcomplicated... showFiltered: function(pattern){ @@ -1028,6 +1111,7 @@ var BrowserPrototype = { // XXX need to get a container -- UI widget API.... // XXX trigger started event... __init__: function(parent, options){ + var that = this options = options || {} // merge options... @@ -1038,6 +1122,12 @@ var BrowserPrototype = { // build the dom... var dom = this.dom = this.constructor.make(options) + // basic permanent interactions... + dom.find('.path') + .dblclick(function(){ + that.startFullPathEdit() + }) + // add keyboard handler... dom.keydown( keyboard.makeKeyboardHandler( @@ -1085,6 +1175,7 @@ object.makeConstructor('Browser', var ListPrototype = Object.create(BrowserPrototype) ListPrototype.options = { + fullpathedit: false, traversable: false, flat: true,