reworked the browse text handling, now we can add action buttons to fields...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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";
 }
 

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
 }

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 = $('<div>')
 				// 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($('<div>')
+					.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, '<b>$1</b>'))
 				})
@@ -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:

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