some visual tweeks + updated docs...

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

ui (gen4)/experiments/browse-dialog.html

@@ -55,6 +55,8 @@
 	display: none;
 }
 
+
+
 .browse .title {
 	font-weight: bold;
 	color: rgba(255,255,255,0.9);
@@ -63,6 +65,8 @@
 	padding-right: 10px;
 }
 
+
+
 .browse .path {
 	padding: 5px;
 	padding-left: 10px;
@@ -77,12 +81,17 @@
 }
 .browse .path .dir {
 	display: inline-block;
+	cursor: pointer;
 }
 .browse .path .dir:after {
 	content: "/";
 }
+.browse .path .dir:hover ~ .dir {
+	opacity: 0.2;
+}
 .browse .path .dir.cur {
 	opacity: 0.5;
+	cursor: text;
 }
 .browse .path .dir.cur:after {
 	content: "";
@@ -105,11 +114,22 @@
 	border: dashed white 1px;
 	cursor: text;
 }
+
+
+
 /* XXX need to make this resizable up but only to a certain size (~80vh) */
-/*
 .browse .list {
+	/* 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-height: 50vh;
+
+	overflow-y: auto;
+	overflow-x: hidden;
 }
+/*
 .browse .list:empty {
 	display: block;
 }
@@ -118,6 +138,7 @@
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
+	cursor: pointer;
 }
 
 .browse:focus .list div.selected,
@@ -151,6 +172,7 @@
 
 ::-webkit-scrollbar {
 	width: 10px;
+	height: 10px;
 }
 ::-webkit-scrollbar-button {
 	display: none;
@@ -158,10 +180,13 @@
 ::-webkit-scrollbar-track {
 }
 ::-webkit-scrollbar-track-piece {
-	background: gray;
+	background: transparent;
+}
+::-webkit-scrollbar-track-piece {
+	background: rgba(0, 0, 0, 0.05);
 }
 ::-webkit-scrollbar-thumb {
-	background: rgba(0, 0, 0, 0.05);
+	background: rgba(0, 0, 0, 0.15);
 }
 ::-webkit-scrollbar-thumb:hover {
 	background: rgba(0, 0, 0, 0.3);

ui (gen4)/experiments/browse-dialog.js

@@ -44,7 +44,7 @@ var BrowserClassPrototype = {
 	},
 }
 
-// XXX need to scroll only the list, keeping the path allways in view...
+// XXX need to scroll only the list, keeping the path always in view...
 // XXX need to handle long paths -- smart shortening or auto scroll...
 // XXX Q: should we make a base list dialog and build this on that or
 //		simplify this to implement a list (removing the path and disbling
@@ -76,7 +76,7 @@ var BrowserPrototype = {
 		Filter: {
 			pattern: '.browse .path div.cur[contenteditable]',
 
-			// keep text edeting action from affecting the seelction...
+			// keep text editing action from affecting the seelction...
 			ignore: [
 					'Backspace',
 					'Left',
@@ -203,27 +203,37 @@ var BrowserPrototype = {
 
 	// Filter the item list...
 	//
+	// 	General signature...
+	// 	.filter(<pattern>[, <rejected-handler>][, <ignore-disabled>])
+	// 		-> elements
+	// 	
+	//
+	// 	Get all elements...
 	// 	.filter()
 	// 	.filter('*')
 	// 		-> all elements
 	//
+	// 	Get all elements containing a string...
 	// 	.filter(<string>)
 	// 		-> elements
 	//
+	// 	Get all elements matching a regexp...
 	// 	.filter(<regexp>)
 	// 		-> elements
 	//
+	// 	Filter the elements via a function...
 	// 	.filter(<function>)
 	// 		-> elements
 	//
 	//
-	// 	.filter(<pattern>[, <rejected-handler>][, <ignore-disabled>])
+	// If <rejected-handler> function is passed it will get called with 
-	// 	
+	// every element that was rejected by the predicate / not matching 
-	// XXX write out the following signatures...
+	// the pattern.
-	// 	.filter(<pattern>)
+	//
-	// 	.filter(<pattern>, <ignore-disabled>)
+	// By default, <ignore-disabled> is false, thus this will ignore 
-	// 	.filter(<pattern>, <rejected-handler>)
+	// disabled elements. If <ignore_disabled> is false then disabled 
-	// 	.filter(<pattern>, <rejected-handler>, <ignore-disabled>)
+	// elements will be searched too.
+	//
 	//
 	// XXX pattern modes:
 	// 		- lazy match
@@ -232,14 +242,13 @@ var BrowserPrototype = {
 	// 		- glob
 	// XXX need to support glob / nested patterns...
 	// 		..things like /**/a*/*moo/
-	// XXX make this more compatible with the canonical filter....
+	// XXX should we unwrap the elements to be more compatible with 
-	// 		- set this for predicate function...
+	// 		jQuery .filter(..)?
-	// 		- unwrap the element (???)
+	filter: function(pattern, a, b){
-	filter: function(pattern, rejected, ignore_disabled){
 		pattern = pattern || '*'
-		ignore_disabled = typeof(rejected) == typeof(true) ? rejected : ignore_disabled
+		var ignore_disabled = typeof(a) == typeof(true) ? a : b
 		ignore_disabled = ignore_disabled == null ? true : ignore_disabled
-		rejected = typeof(rejected) == typeof(true) ? null : rejected
+		var rejected = typeof(a) == typeof(true) ? null : a
 
 		var that = this
 		var browser = this.dom
@@ -253,9 +262,9 @@ var BrowserPrototype = {
 		// function...
 		if(typeof(pattern) == typeof(function(){})){
 			var filter = function(i, e){
-				if(!pattern(i, e)){
+				if(!pattern.call(e, i, e)){
 					if(rejected){
-						rejected(i, e)
+						rejected.call(e, i, e)
 					}
 					return false
 				}
@@ -267,7 +276,7 @@ var BrowserPrototype = {
 			var filter = function(i, e){
 				if(!pattern.test($(e).text())){
 					if(rejected){
-						rejected(i, e)
+						rejected.call(e, i, e)
 					}
 					return false
 				}
@@ -283,7 +292,7 @@ var BrowserPrototype = {
 				var i = t.search(pattern)
 				if(!(i >= 0)){
 					if(rejected){
-						rejected(i, e)
+						rejected.call(e, i, e)
 					}
 					return false
 				}
@@ -345,7 +354,6 @@ var BrowserPrototype = {
 		// place the cursor...
 		range.setStart(e[0], 0)
 		range.collapse(true)
-		// XXX
 		selection.removeAllRanges()
 		selection.addRange(range)