pari: branch 1.4 r1298 - in /branches/1.4/config: scripts/ stylesheets/

[SVN commits to the Asterisk-GUI project]

Author: pari
Date: Mon Aug  6 13:07:04 2007
New Revision: 1298

URL: http://svn.digium.com/view/asterisk-gui?view=rev&rev=1298
Log:
New GUI Componenet: gmail style combo box with out using select boxes.

The existing combo_box will be soon replaced by this one.



Modified:
    branches/1.4/config/scripts/astman.js
    branches/1.4/config/stylesheets/schwing.css

Modified: branches/1.4/config/scripts/astman.js
URL: http://svn.digium.com/view/asterisk-gui/branches/1.4/config/scripts/astman.js?view=diff&rev=1298&r1=1297&r2=1298
==============================================================================
--- branches/1.4/config/scripts/astman.js (original)
+++ branches/1.4/config/scripts/astman.js Mon Aug  6 13:07:04 2007
@@ -74,6 +74,19 @@
 		"no", "false", "n", "f", "0", "off"
 	].contains(trim(str.toLowerCase()));
 }
+
+String.prototype.beginsWith = function(a){
+	//return this.length>=a.length && this.substring(0,a.length)==a
+	return this.indexOf(a)==0;
+};
+
+String.prototype.endsWith=function(a){
+	return this.length>=a.length&&this.substring(this.length-a.length)==a
+};
+
+String.prototype.contains=function(a){
+	return this.indexOf(a)!=-1;
+};
 
 var ASTGUI = { // the idea is to eventually move all the global variables and functions into this one object so that the global name space is not as cluttered as it is now.
 	dialog : {
@@ -187,6 +200,21 @@
 		if(isIE){return document.body.clientHeight;}else{return window.innerHeight;}
 	},
 
+	alignBbelowA: function(a,b){
+		var tmp_left = a.offsetLeft;
+		var tmp_top = a.offsetTop + a.offsetHeight;
+		var tmp_parent = a;
+
+		while(tmp_parent.offsetParent != document.body){
+			tmp_parent = tmp_parent.offsetParent;
+			tmp_left += tmp_parent.offsetLeft;
+			tmp_top += tmp_parent.offsetTop;
+		}
+
+		b.style.left = tmp_left;
+		b.style.top = tmp_top + 1;
+	},
+
 	parseContextLine: {
 		read: function(q){
 			var v = q.indexOf("=");
@@ -265,6 +293,81 @@
 		clear: function(el){
 			el.options.length = 0;
 		}
+	},
+
+	COMBOBOX: function (a,w){		// Usage - ASTGUI.COMBOBOX.call( element , OptionsArray, width(Optional)  );
+		// this.comboDiv - the div element created
+		// this.comboOptions - the array of options
+		var k = document.createElement('DIV');
+		var BoldBinA = function(a,b){
+			if(b==''){return a;}
+			var position = a.toLowerCase().indexOf( b.toLowerCase() ) ;
+			if (position == -1){ return a; }
+			var c = a.substr( position , b.length );
+			return  a.replace( c , "<B>" + c + "</B>" , "" );
+		};
+	
+		var creatediv = function(){
+			ASTGUI.events.add( this, 'blur' , cleanupDiv ) ;
+			var u = this;
+			var q = k.cloneNode(false);
+				q.className = "comboMainDiv";
+				if(w){q.style.width = w; }
+			u.comboDiv = q;
+	
+			var selectOption = function(event){
+				var f = ASTGUI.events.getTarget(event);
+				u.value = f.getAttribute( 'actualvalue' );
+				q.style.display = "none";
+				q.parentNode.removeChild(q);
+				delete u.comboDiv;
+				u.blur();
+			};
+	
+			ASTGUI.events.add( q , 'click' , selectOption ) ;
+			q.style.display = "none";
+			document.body.appendChild(q);
+			ASTGUI.alignBbelowA(u,q);
+			updateDivAndShow.call(this);
+		};
+	
+		var updateDivAndShow = function(){
+			var t = this.comboDiv; 
+			var srchStng = this.value.toLowerCase();
+			var z = this.comboOptions;
+			var y;
+			var matched =0;
+	
+			ASTGUI.domActions.removeAllChilds(t);
+			for (var r =0; r < z.length; r++){
+				if( z[r].toLowerCase().contains(srchStng) || srchStng == '' ){
+					y = k.cloneNode(false);
+					y.innerHTML = BoldBinA( z[r] , srchStng) ;
+					y.setAttribute( 'actualvalue', z[r] );
+					t.appendChild(y);
+					matched++;
+				}
+			}
+			if(matched){ t.style.display = "";}
+		};
+	
+		var cleanupDiv = function(){
+			var y = this;
+			var sf = function(){
+				if(y.comboDiv){
+					var q = y.comboDiv;
+					q.parentNode.removeChild(q);
+					delete y.comboDiv;
+					ASTGUI.events.remove( y, 'blur' , cleanupDiv ) ;
+					y.blur();
+				}
+			};
+			setTimeout( sf, 300 );
+		};
+	
+		this.comboOptions = a.sort();
+		ASTGUI.events.add( this, 'focus' , creatediv ) ;
+		ASTGUI.events.add( this, 'keyup' , updateDivAndShow ) ;
 	}
 
 }; // AstGUI

Modified: branches/1.4/config/stylesheets/schwing.css
URL: http://svn.digium.com/view/asterisk-gui/branches/1.4/config/stylesheets/schwing.css?view=diff&rev=1298&r1=1297&r2=1298
==============================================================================
--- branches/1.4/config/stylesheets/schwing.css (original)
+++ branches/1.4/config/stylesheets/schwing.css Mon Aug  6 13:07:04 2007
@@ -1,3 +1,30 @@
+.comboMainDiv{
+	padding		: 2px 2px 2px 2px;
+	border-style 	: none solid solid none;
+	border-color	: #4d7891;
+	border-width	: 0px 1px 1px 0px;
+	background-color	: #ccdfeb;
+	width		: 450px;
+	height		: 160px;
+	overflow		: auto;
+	position		:absolute;
+	z-index		: 10000;
+}
+
+.comboMainDiv div {
+	padding		: 0px 0px 2px 5px;
+	border-width	: 0px 0px 0px 0px;
+	font-family 	: Trebuchet MS, Arial, Helvetica, sans-serif;
+	font-size        	: 90%;
+	/*color		: #0c5584;*/
+	color		: #0000CC;
+}
+
+.comboMainDiv div:hover {
+	background: #9ac2db;
+}
+
+
 div.accordionTabTitleBar {
 	font-size : 12.5px;
 	padding : 2px 2px 2px 2px;