Author: abelevich Date: 2008-09-26 11:02:46 -0400 (Fri, 26 Sep 2008) New Revision: 10580 Modified: trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combolist.js trunk/ui/combobox/src/main/templates/combobox.jspx Log: https://jira.jboss.org/jira/browse/RF-4280 Modified: trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js =================================================================== --- trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js 2008-09-26 15:02:22 UTC (rev 10579) +++ trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js 2008-09-26 15:02:46 UTC (rev 10580) @@ -4,19 +4,20 @@ Richfaces.ComboBox.prototype = { - initialize: function(combobox, listId, parentListId, valueFieldId, fieldId, buttonId, buttonBGId, shadowId, classes, + initialize: function(combobox, listId, parentListId, valueFieldId, fieldId, buttonId, buttonBGId, shadowId, commonStyles, userStyles, listWidth, listHeight, itemsText, directInputSuggestions, filterNewValue, selectFirstOnUpdate, onlistcall, onselected, defaultMessage, isDisabled, value, showDelay, hideDelay) { this.directInputSuggestions = directInputSuggestions; this.filterNewValue = filterNewValue; - this.combobox = $(combobox); this.comboValue = $(valueFieldId); this.field = $(fieldId); this.BUTTON_WIDTH = 17; //px + this.classes = Richfaces.mergeStyles(userStyles,commonStyles); + //this.field.prevValue = null; this.button = $(buttonId); @@ -28,10 +29,10 @@ // fieldDem.height = this.field.offsetHeight; listWidth = (!listWidth) ? this.getCurrentWidth() : listWidth; - this.comboList = new Richfaces.ComboBoxList(listId, parentListId, selectFirstOnUpdate, filterNewValue, classes.COMBO_LIST, listWidth, + this.comboList = new Richfaces.ComboBoxList(listId, parentListId, selectFirstOnUpdate, filterNewValue, this.classes.combolist, listWidth, listHeight, itemsText, onlistcall, fieldId, shadowId, showDelay, hideDelay); this.defaultMessage = defaultMessage; - this.classes = classes; + if (value) { var item = this.comboList.findItemBySubstr(value); if (item) { @@ -110,39 +111,39 @@ buttonMouseUpHandler : function(e) { this.buttonBG.className = "rich-combobox-font rich-combobox-button-background rich-combobox-button"; - this.button.className = this.classes.BUTTON.CLASSES.ACTIVE + " rich-combobox-button-hovered"; + this.button.className = this.classes.button.classes.active + " rich-combobox-button-hovered"; this.field.focus(); }, buttonMousedownHandler : function(e) { this.buttonBG.className = "rich-combobox-font rich-combobox-button-pressed-background rich-combobox-button"; - this.button.className = this.classes.BUTTON.CLASSES.ACTIVE + " rich-combobox-button-hovered"; + this.button.className = this.classes.button.classes.active + " rich-combobox-button-hovered"; this.comboList.isList = true; }, buttonMouseOverHandler : function(e) { - var classCss = this.classes.BUTTON.CLASSES; - var iconStyles = this.classes.BUTTONICON.STYLE; + var classCss = this.classes.button.classes; + var iconStyles = this.classes.buttonicon.style; if (this.isActive()) { - this.button.className= classCss.ACTIVE + " " + classCss.HOVERED; - this.button.style.backgroundImage = iconStyles.ACTIVE; + this.button.className= classCss.active + " " + classCss.hovered; + this.button.style.backgroundImage = iconStyles.active; } else { - this.button.className = classCss.NORMAL + " " + classCss.HOVERED; - this.button.style.backgroundImage = iconStyles.NORMAL; + this.button.className = classCss.normal + " " + classCss.hovered; + this.button.style.backgroundImage = iconStyles.normal; } }, buttonMouseOutHandler : function(e) { - var classCss = this.classes.BUTTON.CLASSES; - var iconStyles = this.classes.BUTTONICON.STYLE; + var classCss = this.classes.button.classes; + var iconStyles = this.classes.buttonicon.style; if (this.isActive()) { - this.button.className= classCss.ACTIVE; - this.button.style.backgroundImage = iconStyles.ACTIVE; + this.button.className= classCss.active; + this.button.style.backgroundImage = iconStyles.active; } else { - this.button.className = classCss.NORMAL; - this.button.style.backgroundImage = iconStyles.NORMAL; + this.button.className = classCss.normal; + this.button.style.backgroundImage = iconStyles.normal; } }, @@ -328,38 +329,38 @@ }, applyDefaultText : function() { - this.field.className = this.classes.FIELD.CLASSES.DISABLED; + this.field.className = this.classes.field.classes.disabled; this.field.value = this.defaultMessage; this.comboValue.value = ""; }, isActive : function() { - return (this.field.className == this.classes.FIELD.CLASSES.ACTIVE); + return (this.field.className == this.classes.field.classes.active); }, doActive : function() { - if (this.button.className.indexOf(this.classes.BUTTON.CLASSES.HOVERED) != -1) { - this.button.className = this.classes.BUTTON.CLASSES.ACTIVE + " " + this.classes.BUTTON.CLASSES.HOVERED; + if (this.button.className.indexOf(this.classes.button.classes.hovered) != -1) { + this.button.className = this.classes.button.classes.active + " " + this.classes.button.classes.hovered; } else { - this.button.className = this.classes.BUTTON.CLASSES.ACTIVE ; + this.button.className = this.classes.button.classes.active ; } - var iconStyles = this.classes.BUTTONICON.STYLE; - this.button.style.backgroundImage = iconStyles.ACTIVE; + var iconStyles = this.classes.buttonicon.style; + this.button.style.backgroundImage = iconStyles.active; - this.field.className = this.classes.FIELD.CLASSES.ACTIVE; - Element.setStyle(this.field, this.classes.FIELD.STYLE.ACTIVE); + this.field.className = this.classes.field.classes.active; + Element.setStyle(this.field, this.classes.field.style.active); this.isDisabled = false; }, disable : function() { - this.button.className = this.classes.BUTTON.CLASSES.DISABLED; - this.buttonBG.className = this.classes.BUTTONBG.CLASSES.DISABLED; - this.field.className = this.classes.FIELD.CLASSES.DISABLED; - Element.setStyle(this.field, this.classes.FIELD.STYLE.DISABLED); + this.button.className = this.classes.button.classes.disabled; + this.buttonBG.className = this.classes.buttonbg.classes.disabled; + this.field.className = this.classes.field.classes.disabled; + Element.setStyle(this.field, this.classes.field.style.disabled); - var iconStyles = this.classes.BUTTONICON.STYLE; - this.button.style.backgroundImage = iconStyles.DISABLED; + var iconStyles = this.classes.buttonicon.style; + this.button.style.backgroundImage = iconStyles.disabled; this.button.disabled = true; this.field.disabled = true; @@ -369,13 +370,13 @@ }, enable : function() { - this.button.className = this.classes.BUTTON.CLASSES.NORMAL; - this.buttonBG.className = this.classes.BUTTONBG.CLASSES.NORMAL; - this.field.className = this.classes.FIELD.CLASSES.NORMAL; - Element.setStyle(this.field, this.classes.FIELD.STYLE.NORMAL); + this.button.className = this.classes.button.classes.normal; + this.buttonBG.className = this.classes.buttonbg.classes.normal; + this.field.className = this.classes.field.classes.normal; + Element.setStyle(this.field, this.classes.field.style.normal); - var iconStyles = this.classes.BUTTONICON.STYLE; - this.button.style.backgroundImage = iconStyles.NORMAL; + var iconStyles = this.classes.buttonicon.style; + this.button.style.backgroundImage = iconStyles.normal; this.button.disabled = false; this.field.disabled = false; Modified: trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combolist.js =================================================================== --- trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combolist.js 2008-09-26 15:02:22 UTC (rev 10579) +++ trunk/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combolist.js 2008-09-26 15:02:46 UTC (rev 10580) @@ -22,7 +22,6 @@ this.selectFirstOnUpdate = selectFirstOnUpdate; this.filterNewValues = filterNewValues; - this.classes = classes; this.isList = false; this.defaultRowsAmount = 15; @@ -32,10 +31,9 @@ this.showDelay = showDelay; this.hideDelay = hideDelay; - + this.classes = classes; this.width = width; this.height = height; - this.initDimensions(); }, @@ -57,7 +55,7 @@ createDefaultList : function() { var items = new Array(); for (var i = 0; i < this.itemsText.length; i++) { - items.push(this.createItem(this.itemsText[i], this.classes.ITEM.NORMAL)); + items.push(this.createItem(this.itemsText[i], this.classes.item.normal)); } this.createNewList(items); }, @@ -287,12 +285,12 @@ this.activeItem = item; - this.changeItem(item, this.classes.ITEM.SELECTED); + this.changeItem(item, this.classes.item.selected); }, doNormalItem : function(item) { this.activeItem = null; - this.changeItem(item, this.classes.ITEM.NORMAL); + this.changeItem(item, this.classes.item.normal); }, doSelectItem : function(item) { @@ -374,7 +372,7 @@ for (var i = 0; i < this.itemsText.length; i++) { var itText = this.itemsText[i]; if (itText.substr(0, text.length).toLowerCase() == text.toLowerCase()) { //FIXME: to optimaize - items.push(this.createItem(itText, this.classes.ITEM.NORMAL)); + items.push(this.createItem(itText, this.classes.item.normal)); } } return items; Modified: trunk/ui/combobox/src/main/templates/combobox.jspx =================================================================== --- trunk/ui/combobox/src/main/templates/combobox.jspx 2008-09-26 15:02:22 UTC (rev 10579) +++ trunk/ui/combobox/src/main/templates/combobox.jspx 2008-09-26 15:02:46 UTC (rev 10580) @@ -21,6 +21,7 @@ scripts/comboboxUtils.js, scripts/combolist.js, scripts/combobox.js, + scripts/comboboxstyles.js, /org/richfaces/renderkit/html/scripts/utils.js </h:scripts> @@ -278,45 +279,62 @@ var clientId = '#{clientId}'; RichComboUtils.execOnLoad( function(){ - Richfaces.ComboBox.CLASSES = { - BUTTON : {CLASSES : - {NORMAL : "rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive #{buttonInactiveClass}", - ACTIVE : "rich-combobox-font rich-combobox-button-icon rich-combobox-button #{buttonClass}", - DISABLED : "rich-combobox-font-disabled rich-combobox-button-icon-disabled rich-combobox-button-disabled #{buttonDisabledClass}", - HOVERED : "rich-combobox-button-hovered"}, - STYLE : - {NORMAL: "#{buttonInactiveStyle}", - ACTIVE: "#{buttonStyle}", - DISABLED: "#{buttonDisabledStyle}"} - }, - BUTTONBG : {CLASSES : - {NORMAL:"rich-combobox-font-inactive rich-combobox-button-background-inactive rich-combobox-button-inactive", - ACTIVE: "rich-combobox-font rich-combobox-button-background rich-combobox-button", - DISABLED : "rich-combobox-font-disabled rich-combobox-button-background-disabled rich-combobox-button-disabled"} - }, - BUTTONICON : {STYLE : - {NORMAL: "#{buttonIconInactive}", - ACTIVE: "#{buttonIcon}", - DISABLED: "#{buttonIconDisabled}"} - }, - FIELD : {CLASSES: - {NORMAL : "rich-combobox-font-inactive rich-combobox-input-inactive #{inputInactiveClass}", - ACTIVE : "rich-combobox-font rich-combobox-input #{inputClass}", - DISABLED : "rich-combobox-font-disabled rich-combobox-input-disabled #{inputDisabledClass}"}, - STYLE : - {NORMAL : "#{inputInactiveStyle}", - ACTIVE : "#{inputStyle}", - DISABLED : "#{inputDisabledStyle}"} - }, - COMBO_LIST : { - LIST : {CLASSES :{ACTIVE : "rich-combobox-list-cord rich-combobox-list-scroll rich-combobox-list-decoration rich-combobox-list-position #{listClass}"}, - STYLE : {ACTIVE: "#{listStyle}"} - }, - ITEM : {NORMAL : "rich-combobox-item #{itemClass}", - SELECTED : "rich-combobox-item rich-combobox-item-selected #{itemSelectedClass}" - } + + var comboboxUserStyles = { + button : { + classes : + { + normal: "#{buttonInactiveClass}", + active: "#{buttonClass}", + disabled: "#{buttonDisabledClass}" + }, + style : + { + normal: "#{buttonInactiveStyle}", + active: "#{buttonStyle}", + disabled: "#{buttonDisabledStyle}" + } + }, + buttonicon : { + style : + { + normal: "#{buttonIconInactive}", + active: "#{buttonIcon}", + disabled: "#{buttonIconDisabled}" + } + }, + field : { + classes : + { + normal: "#{inputInactiveClass}", + active: "#{inputClass}", + disabled: "#{inputDisabledClass}" + }, + style : + { + normal : "#{inputInactiveStyle}", + active : "#{inputStyle}", + disabled : "#{inputDisabledStyle}" + } + }, + combolist : { + list: { + classes: + { + active: "#{listClass}" + }, + style: + { + active: "'#{listStyle}" + } + }, + item: { + normal : "#{itemClass}", + selected: "#{itemSelectedClass}" + } } - } + }; + var combobox = new Richfaces.ComboBox( "#{clientId}", "#{clientId}list", @@ -326,7 +344,8 @@ "#{clientId}comboboxButton", "#{clientId}comboBoxButtonBG", "#{clientId}shadow", - Richfaces.ComboBox.CLASSES, + Richfaces.ComboBox.classes, + comboboxUserStyles, "#{listWidth}", "#{listHeight}", #{this:getItemsTextAsJSArray(context, component,items)}, #{directInputSuggestions},