You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tuscany.apache.org by js...@apache.org on 2008/04/15 22:56:59 UTC

svn commit: r648408 - in /incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources: admin.css utils.js workspace.html

Author: jsdelfino
Date: Tue Apr 15 13:56:56 2008
New Revision: 648408

URL: http://svn.apache.org/viewvc?rev=648408&view=rev
Log:
Added a utility method to suggest available options on input fields in the admin app. Added corresponding CSS entries to admin.css. Next step to improve usability is to add calls to it in the various admin pages to allow people to select contribution uris, namespaces, composite names without having to type them.

Modified:
    incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/admin.css
    incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/utils.js
    incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/workspace.html

Modified: incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/admin.css
URL: http://svn.apache.org/viewvc/incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/admin.css?rev=648408&r1=648407&r2=648408&view=diff
==============================================================================
--- incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/admin.css (original)
+++ incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/admin.css Tue Apr 15 13:56:56 2008
@@ -71,3 +71,29 @@
 	text-align: right
 }
 
+.suggest {
+	background-color: #e5ecf9; color: #598edd;
+	border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px;
+	border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4;
+	border-left-color: #d1d3d4; border-right-color: #d1d3d4;
+    position: absolute;
+    overflow: auto; overflow-x: hidden;
+    cursor: default;
+    padding: 0px; margin: 0px;
+}
+
+suggestTable {
+	border: 0px; border-collapse: separate;
+    padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; 
+	margin: 0px;
+}
+
+.suggestItem {
+	padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; white-space: nowrap; vertical-align: text-top;
+	background-color: #e5ecf9; color: #598edd;
+}
+
+.suggestHilighted {
+	padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; white-space: nowrap; vertical-align: text-top;
+	background-color: #598edd; color: #e5ecf9;
+}

Modified: incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/utils.js
URL: http://svn.apache.org/viewvc/incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/utils.js?rev=648408&r1=648407&r2=648408&view=diff
==============================================================================
--- incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/utils.js (original)
+++ incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/utils.js Tue Apr 15 13:56:56 2008
@@ -17,6 +17,122 @@
  * under the License.    
  */
  
+/**
+ * Autocomplete / suggest support for input fields
+ *
+ * To use it declare a 'suggest' function as follows:
+ * function suggestItems() {
+ *   	return new Array('abc', 'def', 'ghi');
+ * }
+ *
+ * then hook it to an input field as follows:
+ * suggest(document.yourForm.yourInputField, suggestItems);
+ */ 
+function selectSuggestion(node, value) {
+	for (;;) {
+		node = node.parentNode;
+		if (node.tagName.toLowerCase() == 'div') {
+      		break;
+      	}
+	}
+	node.selectSuggestion(value);
+}
+
+function hilightSuggestion(node, over) {
+	if (over) {
+  		node.className = 'suggestHilighted';
+	} else {
+		node.className = 'suggestItem';
+	}
+}
+
+function suggest(input, suggestFunction) {
+  	
+  	input.suggest = suggestFunction;
+  	
+	input.selectSuggestion = function(value) {
+		this.hideSuggestDiv();
+		this.value = value;
+	}
+	
+	input.hideSuggestDiv = function() {
+		if (this.suggestDiv != null) {
+			this.suggestDiv.style.visibility = 'hidden';
+		}
+	}
+	
+  	input.showSuggestDiv = function() {
+  		if (this.suggestDiv == null) {
+	  		this.suggestDiv = document.createElement('div');
+	  		this.suggestDiv.input = this;
+	  		this.suggestDiv.className = 'suggest';
+			input.parentNode.insertBefore(this.suggestDiv, input);
+			this.suggestDiv.style.visibility = 'hidden';
+		  	this.suggestDiv.style.zIndex = '99';
+		  	
+		  	this.suggestDiv.selectSuggestion = function(value) {
+		  		this.input.selectSuggestion(value);
+		  	}
+		}
+	  	
+  		var values = this.suggest();
+    	var items = "";
+    	for (var i = 0; i < values.length; i++) {
+    		if (values[i].indexOf(this.value) == -1) {
+    			continue;
+    		}
+    		if (items.length == 0) {
+    			items += '<table class=suggestTable>';
+    		}
+    		items += '<tr><td class="suggestItem" ' +
+    		'onmouseover="hilightSuggestion(this, true)" onmouseout="hilightSuggestion(this, false)" ' +
+    		'onclick="selectSuggestion(this, \'' + values[i] + '\')">' + values[i] + '</td></tr>';
+    	}
+    	if (items.length != 0) {
+    		items += '</table>';
+    	}
+	  	this.suggestDiv.innerHTML = items;
+	  	
+		if (items.length != 0) {
+			var node = input;		  	
+	        var left = 0;
+	        var top = 0;
+	        for (;;) {
+	            left += node.offsetLeft;
+	            top += node.offsetTop;
+	            node = node.offsetParent;
+	            if (node.tagName.toLowerCase() == 'body') {
+	            	break;
+	            }
+	        }
+		  	this.suggestDiv.style.left = left;
+		  	this.suggestDiv.style.top = top + input.offsetHeight;
+		  	this.suggestDiv.style.visibility = 'visible';
+		} else {
+			this.suggestDiv.style.visibility = 'hidden';
+		}
+  	}
+  	
+	input.onkeydown = function(event) {
+    	this.showSuggestDiv();
+	};
+
+	input.onkeyup = function(event) {
+    	this.showSuggestDiv();
+	};
+
+	input.onmousedown = function(event) {
+    	this.showSuggestDiv();
+	};
+
+	input.onblur = function(event) {
+		setTimeout(function() { input.hideSuggestDiv(); }, 50);
+	};
+}
+
+/**
+ * A Toolbar class
+ */ 
 function Tool(name, href) {
 	this.name = name;
 	this.href = href;
@@ -31,8 +147,10 @@
 	}
 }
 
+/**
+ * Initialize the toolbar
+ */
 function toolbar() {
-
 	var toolbar = '<table width="100%" cellpadding="0" cellspacing="0" class=tbar><tr>' +
 	'<td class=ltbar><table border="0" cellspacing="0" cellpadding="0"><tr>';
    
@@ -48,6 +166,9 @@
 	document.getElementById('toolbar').innerHTML = toolbar;
 }
 
+/**
+ * Utility function returning an array from an array or an object. 
+ */ 
 function array(obj) {
     if (obj.length == undefined) {
 		var a = new Array();
@@ -59,6 +180,9 @@
   	}
 }
 
+/**
+ * Populate the default toolbar
+ */
 var tools = new Array();
 tools[0] = new Tool("Contributions", "/ui/workspace");
 tools[1] = new Tool("Composites", "/ui/composite");

Modified: incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/workspace.html
URL: http://svn.apache.org/viewvc/incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/workspace.html?rev=648408&r1=648407&r2=648408&view=diff
==============================================================================
--- incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/workspace.html (original)
+++ incubator/tuscany/java/sca/modules/workspace-admin/src/main/resources/workspace.html Tue Apr 15 13:56:56 2008
@@ -112,11 +112,16 @@
 		document.newContributionForm.contributionID.value = "";
 		document.newContributionForm.contributionLocation.value = "";
 	    getContributions();
-	}	
+	}
+	
+	//function suggestContributionIDs() {
+	//	return new Array('abc', 'def', 'ghi');
+	//}
 
 	function init() {
 		toolbar();
 		getContributions();
+		//suggest(document.newContributionForm.contributionID, suggestContributionIDs);
 	}
 	
 </script>



---------------------------------------------------------------------
To unsubscribe, e-mail: tuscany-commits-unsubscribe@ws.apache.org
For additional commands, e-mail: tuscany-commits-help@ws.apache.org