[richfaces-svn-commits] JBoss Rich Faces SVN: r5305 - in trunk/sandbox/ui/combobox/src/main: resources/org/richfaces/renderkit/html/scripts and 1 other directories.

richfaces-svn-commits at lists.jboss.org richfaces-svn-commits at lists.jboss.org
Fri Jan 11 10:35:43 EST 2008


Author: vmolotkov
Date: 2008-01-11 10:35:43 -0500 (Fri, 11 Jan 2008)
New Revision: 5305

Modified:
   trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss
   trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js
   trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx
Log:
designer's mockup was implemented

Modified: trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss
===================================================================
--- trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss	2008-01-11 15:34:00 UTC (rev 5304)
+++ trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss	2008-01-11 15:35:43 UTC (rev 5305)
@@ -6,6 +6,10 @@
 <f:verbatim>
 <![CDATA[
 
+cb_width_field.{
+ width: 400px;
+}
+
 .rich-combobox-button-pressed {
 }
 
@@ -19,6 +23,7 @@
 }
 
 .rich-combobox-font { 
+	font-size : 11px/*generalSizeFont*/; font-family : arial/*generalFamilyFont*/; color : #000000/*generalTextColor*/
 } 
 
 .rich-combobox-font-disabled { 
@@ -56,18 +61,22 @@
 	background-repeat:repeat-x; 
 }
 
-.rich-combobox-list {
+/*.rich-combobox-list {
 	z-index: 1000;
 	overflow: auto;
 	white-space:nowrap;
-}
+}*/
 
 .rich-combobox-list-position { 
-	/*position : absolute;*/
+	position : absolute; 
+	top:-5px; 
+	left:0px;
 }
 
 .rich-combobox-list-decoration { 
-	border : 1px solid;  padding : 0px;
+	border : 1px solid #BED6F8  /*panelBorderColor*/;  
+	padding : 0px; 
+	background : #FFFFFF; /*tableBackgroundColor*/
 }
 
 .rich-combobox-list-scroll { 
@@ -76,13 +85,14 @@
 }
 
 .rich-combobox-list-cord { 
-	position : relative;
-	z-index:1000;
-}
+	position : relative; 
+	font-size : 0px;
+}/*DDL is hidden!!!!!*/
 
 .rich-combobox-item {
 	padding : 2px; white-space : nowrap;
 	width: 100%;
+	display: block;
 }
 
 
@@ -162,6 +172,9 @@
 
 </f:verbatim>
 
+	
+
+
 	<u:selector name=".rich-combobox-button-background">
 		<u:style name="background-image">
 			<f:resource f:key="org.richfaces.renderkit.images.ComboBoxButtonGradient" />
@@ -245,6 +258,6 @@
 		<u:style name="border-color" skin="panelBorderColor"/>
 		<u:style name="background" skin="tableBackgroundColor"/>
 	</u:selector>
-
 	
+	
 </f:template>

Modified: trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js
===================================================================
--- trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js	2008-01-11 15:34:00 UTC (rev 5304)
+++ trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js	2008-01-11 15:35:43 UTC (rev 5305)
@@ -341,16 +341,17 @@
 			}
 		}
 		
-		if (Prototype.Browser.IE) {
+		/*if (Prototype.Browser.IE) {
 			height = parseInt(height) + Richfaces.ComboBoxList.LAYOUT_BORDER_V + Richfaces.ComboBoxList.LAYOUT_PADDING_V;
-		}
-		this.listParent.style.height = height;
+		}*/
+		//this.listParent.style.height = height;
+		this.list.style.height = height;
 		
 		if (this.width) {
 			var width = this.width;
-			if (Prototype.Browser.Gecko) {
+			/*if (Prototype.Browser.Gecko) {
 				width = parseInt(this.width) - Richfaces.ComboBoxList.LAYOUT_BORDER_H - Richfaces.ComboBoxList.LAYOUT_PADDING_H;
-			}
+			}*/
 			this.listParent.style.width = width;
 			this.list.style.width = width;
 		}
@@ -374,28 +375,32 @@
 	
 	scrolling : function(event) {
 		var increment;
-		var listTop = Richfaces.ComboBoxList.getElemXY(this.listParent).top;
-		var scrollTop = this.listParent.scrollTop;
+		//var scrollElem = this.listParent;
+		var scrollElem = this.list;
+		var listTop = Richfaces.ComboBoxList.getElemXY(scrollElem).top;
+		var scrollTop = scrollElem.scrollTop;
 		var itemTop = Richfaces.ComboBoxList.getElemXY(this.activeItem).top;
 		
 		if ((event.keyCode == Event.KEY_UP) || (event.keyCode == 33)) {
 			increment = (itemTop - scrollTop) - listTop;
 			if (increment < 0) {
-				this.listParent.scrollTop += increment;			
+				scrollElem.scrollTop += increment;			
 			}
 		} else if ((event.keyCode == Event.KEY_DOWN) || (event.keyCode == 34)) {
 			var itemBottom = itemTop + this.activeItem.offsetHeight;
-			var increment = (itemBottom - scrollTop) - (listTop + this.listParent.clientHeight);
+			var increment = (itemBottom - scrollTop) - (listTop + scrollElem.clientHeight);
 			if (increment > 0) {
-				this.listParent.scrollTop += increment;			
+				scrollElem.scrollTop += increment;			
 			} 
 		}
 		Event.stop(event);
 	},
 	
 	scrollingUpToItem : function(item) {
-		var increment = (Richfaces.ComboBoxList.getElemXY(item).top - this.listParent.scrollTop) - Richfaces.ComboBoxList.getElemXY(this.listParent).top;
-		this.listParent.scrollTop += increment;
+		//var scrollElem = this.listParent;
+		var scrollElem = this.list;
+		var increment = (Richfaces.ComboBoxList.getElemXY(item).top - scrollElem.scrollTop) - Richfaces.ComboBoxList.getElemXY(scrollElem).top;
+		scrollElem.scrollTop += increment;
 	},
 	
 	/* items library*/
@@ -422,10 +427,10 @@
 	},
 	
 	getEventItem : function(event) {
-		var item = Event.findElement(event, "div");
-		if ((item == null) || (item.id == this.listParent.id) || (item.id == this.list.id)) {
+		var item = Event.findElement(event, "span");
+		/*if ((item == null) || (item.id == this.listParent.id) || (item.id == this.list.id)) {
 			return;
-		}
+		}*/
 		return item;
 	},
 	
@@ -455,8 +460,10 @@
 	
 	resetState : function() {
 		var tempList = this.list.cloneNode(false);
-		this.listParent.replaceChild(tempList, this.listParent.firstChild);
-		this.list = this.listParent.firstChild;
+		//this.listParent.replaceChild(tempList, this.listParent.firstChild);
+		this.listParent.childNodes[1].firstChild.replaceChild(tempList, this.list);
+		//this.list = this.listParent.firstChild;
+		this.list = $(tempList.id);
 		this.activeItem = null;
 		this.isList = false;
 	},
@@ -501,7 +508,7 @@
 	},
 	
 	createItem : function(text, className) {
-		return "<div class=" + className+ ">" + text + "</div>";
+		return "<span class=" + className+ ">" + text + "</span>";
 	}
 }
 

Modified: trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx
===================================================================
--- trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx	2008-01-11 15:34:00 UTC (rev 5304)
+++ trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx	2008-01-11 15:35:43 UTC (rev 5305)
@@ -158,30 +158,39 @@
     </jsp:scriptlet>
 			                					
 	<div id="#{clientId}" class="rich-combobox-font rich-combobox-shell #{styleClass}" style="width:#{listWidth}; #{style}">
-		<input id="comboboxField#{clientId}" 
-			   name="comboboxField#{clientId}" 
-			   disabled="#{disabled}" 
-			   class="rich-combobox-font-disabled rich-combobox-input-default-disabled rich-combobox-input-disabled #{inputDisabledClass}" type="text" 
-			   value="#{value}" 
-			   size="#{inputSize}" 
-			   autocomplete="off" 
-			   style="width:#{listWidth}; #{inputStyle}"
-			    x:passThruWithExclusions="value,name,type,id,styleClass,class,style,size,autocomplete,disabled"
-			   >
-		</input>
-		<input id="comboBoxButtonBG#{clientId}" readonly="true" type="text" value="" class="rich-combobox-font rich-combobox-button-background rich-combobox-button">
-		</input>
-		<input id="comboboxButton#{clientId}" readonly="true" disabled="#{disabled}" type="text" value="" style="#{buttonStyle}" class="rich-combobox-font-disabled rich-combobox-button-icon-disabled rich-combobox-button #{buttonDisabledClass}" 
-			onmousedown="document.getElementById('comboBoxButtonBG#{clientId}').className='rich-combobox-font rich-combobox-button-pressed-background rich-combobox-button'; this.className='rich-combobox-button rich-combobox-button-pressed rich-combobox-font rich-combobox-button-icon';"
-			onmouseup="document.getElementById('comboBoxButtonBG#{clientId}').className='rich-combobox-font rich-combobox-button-background rich-combobox-button'; this.className='rich-combobox-button rich-combobox-font rich-combobox-button-icon'"
-			onmouseout="this.className='rich-combobox-font rich-combobox-button-icon rich-combobox-button'"
-			onmouseover="this.className='rich-combobox-font rich-combobox-button-icon rich-combobox-button-hovered'">
-		</input>
-		<input type="text" class="rich-combobox-strut rich-combobox-font" style="width:#{listWidth}">
-		</input>
-		<div id="listParent#{clientId}" style="display:none; #{listStyle};" class="rich-combobox-list-cord rich-combobox-list-scroll rich-combobox-list-decoration rich-combobox-list-position #{listClass}">
-			<div id="list#{clientId}">
-				<f:call name="encodeItems"/>
+		<div class="cb_width_field rich-combobox-font rich-combobox-shell">
+			<input id="comboboxField#{clientId}" 
+				   name="comboboxField#{clientId}" 
+				   disabled="#{disabled}" 
+				   class="cb_width_field rich-combobox-font-disabled rich-combobox-input-default-disabled rich-combobox-input-disabled #{inputDisabledClass}" type="text" 
+				   value="#{value}" 
+				   size="#{inputSize}" 
+				   autocomplete="off" 
+				   style="width:#{listWidth}; #{inputStyle}"
+				   x:passThruWithExclusions="value,name,type,id,styleClass,class,style,size,autocomplete,disabled"
+				   >
+			</input>
+			<input id="comboBoxButtonBG#{clientId}" readonly="true" type="text" value="" class="rich-combobox-font rich-combobox-button-background rich-combobox-button">
+			</input>
+			<input id="comboboxButton#{clientId}" readonly="true" disabled="#{disabled}" type="text" value="" style="#{buttonStyle}" 
+				   class="rich-combobox-font-disabled rich-combobox-button-icon-disabled rich-combobox-button #{buttonDisabledClass}" 
+				   onmousedown="document.getElementById('comboBoxButtonBG#{clientId}').className='rich-combobox-font rich-combobox-button-pressed-background rich-combobox-button'; this.className='rich-combobox-button rich-combobox-button-pressed rich-combobox-font rich-combobox-button-icon';"
+				   onmouseup="document.getElementById('comboBoxButtonBG#{clientId}').className='rich-combobox-font rich-combobox-button-background rich-combobox-button'; this.className='rich-combobox-button rich-combobox-font rich-combobox-button-icon'"
+				   onmouseout="this.className='rich-combobox-font rich-combobox-button-icon rich-combobox-button'"
+				   onmouseover="this.className='rich-combobox-font rich-combobox-button-icon rich-combobox-button-hovered'">
+			</input>
+			<input type="text" class="cb_width_field rich-combobox-strut rich-combobox-font">
+			</input>
+		</div>
+		
+		<div id="listParent#{clientId}" class="rich-combobox-list-cord #{listClass}" style="display:none; #{listStyle};">
+			<iframe class="rich-combobox-list-scroll rich-combobox-list-position" frameborder="0" style="width:#{listWidth};"/>
+			<div id="listPosition#{clientId}" class="rich-combobox-list-position" style="width:#{listWidth};">
+				<div id="listDecoration#{clientId}" class="rich-combobox-list-decoration">
+					<div id="list#{clientId}" class="rich-combobox-list-scroll">
+						<f:call name="encodeItems"/>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>




More information about the richfaces-svn-commits mailing list