From 4e339e08a008bb2f4dd4698c0fec44b5cd80b3f6 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 26 Nov 2015 04:27:34 +0300 Subject: [PATCH] reworked the browse text handling, now we can add action buttons to fields... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/widget/browse.css | 47 +++++++++++----------- ui (gen4)/lib/widget/browse-walk.js | 12 +++++- ui (gen4)/lib/widget/browse.js | 61 ++++++++++++++++++++--------- ui (gen4)/viewer.js | 2 +- 4 files changed, 78 insertions(+), 44 deletions(-) diff --git a/ui (gen4)/css/widget/browse.css b/ui (gen4)/css/widget/browse.css index 8aa51232..8aaac612 100755 --- a/ui (gen4)/css/widget/browse.css +++ b/ui (gen4)/css/widget/browse.css @@ -148,37 +148,38 @@ } */ .browse-widget .list div { + opacity: 0.7; +} +.browse-widget .list>div { padding: 5px; padding-left: 10px; padding-right: 10px; cursor: pointer; - opacity: 0.7; - - /* XXX need a way to make this automatic and depend on .browser setup to avoid multiple scrollbars and the need to manually dive into the configuration to change the container size limits */ max-width: 80vh; + overflow: hidden; } -.browse-widget:not(.flat) .list div:not(.not-traversable):after { +.browse-widget:not(.flat) .list div:not(.not-traversable) .text:after { content: "/"; } -.browse-widget:focus .list div.selected, -.browse-widget .path .dir:hover, -.browse-widget .list div:hover { +.browse-widget:focus .list>div.selected, +.browse-widget .path>.dir:hover, +.browse-widget .list>div:hover { background: rgba(0, 0, 0, 0.05); opacity: 0.9; } -.browse-widget .list div.selected { +.browse-widget .list>div.selected { background: rgba(0, 0, 0, 0.08); } -.browse-widget:focus .list div.selected { +.browse-widget:focus .list>div.selected { background: rgba(0, 0, 0, 0.08); box-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em; @@ -186,52 +187,52 @@ } /* XXX need to make the next two different... */ -.browse-widget .list div.filtered-out { +.browse-widget .list>div.filtered-out { opacity: 0.5; } -.browse-widget:not(.show-filtered-out) .list div.filtered-out { +.browse-widget:not(.show-filtered-out) .list>div.filtered-out { display: none; } -.browse-widget .list div.disabled { +.browse-widget .list>div.disabled { opacity: 0.3; } /* numbers... */ /* XXX need to show this only on devices with keyboards... */ -.browse-widget .list div:before { +.browse-widget .list>div:before { opacity: 0.3; float: right; font-size: small; } -.browse-widget.filtering .list div:before { +.browse-widget.filtering .list>div:before { display: none; } -.browse-widget .list div:nth-of-type(1):before { +.browse-widget .list>div:nth-of-type(1):before { content: "1"; } -.browse-widget .list div:nth-of-type(2):before { +.browse-widget .list>div:nth-of-type(2):before { content: "2"; } -.browse-widget .list div:nth-of-type(3):before { +.browse-widget .list>div:nth-of-type(3):before { content: "3"; } -.browse-widget .list div:nth-of-type(4):before { +.browse-widget .list>div:nth-of-type(4):before { content: "4"; } -.browse-widget .list div:nth-of-type(5):before { +.browse-widget .list>div:nth-of-type(5):before { content: "5"; } -.browse-widget .list div:nth-of-type(6):before { +.browse-widget .list>div:nth-of-type(6):before { content: "6"; } -.browse-widget .list div:nth-of-type(7):before { +.browse-widget .list>div:nth-of-type(7):before { content: "7"; } -.browse-widget .list div:nth-of-type(8):before { +.browse-widget .list>div:nth-of-type(8):before { content: "8"; } -.browse-widget .list div:nth-of-type(9):before { +.browse-widget .list>div:nth-of-type(9):before { content: "9"; } diff --git a/ui (gen4)/lib/widget/browse-walk.js b/ui (gen4)/lib/widget/browse-walk.js index 30394661..c3fdad3d 100755 --- a/ui (gen4)/lib/widget/browse-walk.js +++ b/ui (gen4)/lib/widget/browse-walk.js @@ -217,9 +217,17 @@ object.makeConstructor('Walk', var makeWalk = -module.makeWalk = function(elem, path){ +module.makeWalk = function(elem, path, showNonTraversable, showDisabled){ //return Walk(elem, { path: path }) - var w = Walk(elem, { path: path }) + var w = Walk(elem, { + path: path, + showNonTraversable: showNonTraversable == null ? + WalkPrototype.options.showNonTraversable + : showNonTraversable, + showDisabled: showDisabled == null ? + WalkPrototype.options.showDisabled + : showDisabled, + }) console.log(w) return w } diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js index d5437dbb..e87d2653 100755 --- a/ui (gen4)/lib/widget/browse.js +++ b/ui (gen4)/lib/widget/browse.js @@ -178,6 +178,9 @@ var BrowserPrototype = { // .not-traversable on the .browse-widget element traversable: true, + showNonTraversable: true, + showDisabled: true, + // Handle keys that are not bound... // NOTE: to disable, set ot undefined. logKeys: function(k){ window.DEBUG && console.log(k) }, @@ -366,6 +369,18 @@ var BrowserPrototype = { this.options.traversable = value }, + toogleTraversableDrawing: function(){ + this.options.showNonTraversable = !this.options.showNonTraversable + this.update() + return this + }, + toogleDisabledDrawing: function(){ + this.options.showDisabled = !this.options.showDisabled + this.update() + return this + }, + + // Get/set the listed path... // // On more info on setting the path see .update(..) @@ -427,7 +442,7 @@ var BrowserPrototype = { if(e.length <= 0){ return null } - return e.text() + return e.find('.text').text() }, set selected(value){ return this.select(value) @@ -605,15 +620,25 @@ var BrowserPrototype = { interactive = true + // do not draw non-traversable elements if .showNonTraversable + // is false... + if((!traversable && !that.options.showNonTraversable) + || (disabled && !that.options.showDisabled)){ + return $() + } + var res = $('
') // handle clicks ONLY when not disabled... .click(function(){ if(!$(this).hasClass('disabled')){ - //that.push(quoteWS($(this).text())) - that.push($(this).text()) + //that.push(quoteWS($(this).find('.text').text())) + that.push($(this).find('.text').text()) } }) - .text(p) + //.text(p) + .append($('
') + .addClass('text') + .text(p)) .appendTo(l) if(!traversable){ res.addClass('not-traversable') @@ -766,7 +791,7 @@ var BrowserPrototype = { // regexp... } else if(pattern.constructor == RegExp){ var filter = function(i, e){ - if(!pattern.test($(e).text())){ + if(!pattern.test($(e).find('.text').text())){ if(rejected){ rejected.call(e, i, e) } @@ -791,7 +816,7 @@ var BrowserPrototype = { .map(function(e){ return e.replace(/\\(\s)/g, '$1').toLowerCase() }) var filter = function(i, e){ e = $(e) - var t = e.text().toLowerCase() + var t = e.find('.text').text().toLowerCase() for(var p=0; p < pl.length; p++){ // NOTE: we are not using search here as it treats // the string as a regex and we need literal @@ -878,7 +903,7 @@ var BrowserPrototype = { // NOTE: this will mess up (clear) any highlighting that was // present before... .each(function(_, e){ - e = $(e) + e = $(e).find('.text') var t = e.text() e.html(t.replace(p, '$1')) }) @@ -1190,7 +1215,7 @@ var BrowserPrototype = { // clear selection... this.select('none', filtering) if(!filtering){ - browser.find('.path .dir.cur').text(elem.text()) + browser.find('.path .dir.cur').text(elem.find('.text').text()) } @@ -1215,7 +1240,7 @@ var BrowserPrototype = { // now do the selection... elem.addClass('selected') - browser.attr('value', elem.text()) + browser.attr('value', elem.find('.text').text()) this.trigger('select', elem) @@ -1380,9 +1405,9 @@ var BrowserPrototype = { } var path = this.path - //var txt = quoteWS(elem.text()) - var txt = elem.text() - path.push(elem.text()) + //var txt = quoteWS(elem.find('.text').text()) + var txt = elem.find('.text').text() + path.push(elem.find('.text').text()) // XXX should this be before or after the actual path update??? // XXX can we cancel the update from a handler??? @@ -1439,8 +1464,8 @@ var BrowserPrototype = { var path = this.path - //path.push(quoteWS(elem.text())) - path.push(elem.text()) + //path.push(quoteWS(elem.find('.text').text())) + path.push(elem.find('.text').text()) var res = this.open(path) @@ -1555,7 +1580,7 @@ var BrowserPrototype = { // load the current path + selection... path = this.path - path.push(elem.text()) + path.push(elem.find('.text').text()) // normalize and load path... //} else { @@ -1575,8 +1600,8 @@ var BrowserPrototype = { } path = this.path - //path.push(quoteWS(elem.text())) - path.push(elem.text()) + //path.push(quoteWS(elem.find('.text').text())) + path.push(elem.find('.text').text()) } // get the options method and call it if it exists... @@ -1622,7 +1647,7 @@ var BrowserPrototype = { // - for each item make is called with it's text // - make will return a jQuery object of the item // - // NOTE: selection is currently done based on .text() thus the + // NOTE: selection is currently done based on .find('.text').text() thus the // modification should not affect it's output... // // 2) non-interactive: diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index b1b0fd2b..0efc1641 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -2738,7 +2738,7 @@ var ActionTreeActions = actions.Actions({ var that = this var o = overlay.Overlay($('body'), - require('./lib/widget/browse-walk').makeWalk(null, '/') + require('./lib/widget/browse-walk').makeWalk(null, '/', false, false) .open(function(evt, path){ o.close()