diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html index e3161601..70dff4b6 100755 --- a/ui (gen4)/experiments/browse-dialog.html +++ b/ui (gen4)/experiments/browse-dialog.html @@ -90,7 +90,7 @@ .browse .path .dir.cur:hover { opacity: 1; } -.browse .path .dir.cur:empty { +.browse .path .dir.cur:empty:not([contenteditable]) { display: none; } /* XXX need to make this resizable up but only to a certain size (~80vh) */ diff --git a/ui (gen4)/experiments/browse-dialog.js b/ui (gen4)/experiments/browse-dialog.js index fbd1f7a0..d0cabc28 100755 --- a/ui (gen4)/experiments/browse-dialog.js +++ b/ui (gen4)/experiments/browse-dialog.js @@ -48,7 +48,7 @@ var BrowserClassPrototype = { // traversal)?? // XXX need a search/filter field... // XXX need base events: -// - opne +// - open // - update // - select (???) // XXX add "current selection" to the path... @@ -90,8 +90,14 @@ var BrowserPrototype = { }, // update path... + // - build the path + // - build the element list + // // XXX trigger an "update" event... + // XXX current path click shoud make it editable and start a live + // search/filter... update: function(path){ + path = path || this.path var browser = this.dom var that = this @@ -116,9 +122,20 @@ var BrowserPrototype = { // add current selction indicator... p.append($('
') .addClass('dir cur') + // XXX start search/filter... + // - on click / letter set content editable + // - triger filterig on modified + // - disable nav in favor of editing + // - enter/blur to exit edit mode + // - esc to cancel and reset .click(function(){ - that - .update(path.concat($(this).text())) + //that.update(path.concat($(this).text())) + $(this) + .text('') + .attr('contenteditable', true) + .keyup(function(){ + that.filter($(this).text()) + }) })) // fill the children list... @@ -134,6 +151,37 @@ var BrowserPrototype = { return this }, + // XXX should have two non_matched modes: + // - hide - hide non-matching content + // - shadow - shadow non-matching content + // XXX pattern modes: + // - lazy match + // abc -> *abc* -> ^.*abc.*$ + // ab cd -> *ab*cd* -> ^.*ab.*cd.*$ + // - glob + // - regex + // XXX sort: + // - as-is + // - best match + filter: function(pattern, mode, non_matched, sort){ + var that = this + var browser = this.dom + + var l = browser.find('.list>div') + + l.each(function(i, e){ + e = $(e) + var t = e.text() + var i = t.search(pattern) + if(i < 0){ + e.remove() + + } else { + e.html(t.replace(pattern, pattern.bold())) + } + }) + }, + // internal actions... // Select a list element... @@ -313,7 +361,7 @@ var BrowserPrototype = { }, list: function(path){ var m = this.options.list - return m ? m.call(this, path) : path + return m ? m.call(this, path) : [] }, isTraversable: null,