added basic full path editing (a bit trivial)

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-06-26 03:07:58 +03:00
parent 1b56fb6a24
commit b870826e97
2 changed files with 97 additions and 6 deletions

View File

@ -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()
})

View File

@ -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,