[richfaces-svn-commits] JBoss Rich Faces SVN: r17662 - root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script.

Author: pyaschenko Date: 2010-06-23 12:27:39 -0400 (Wed, 23 Jun 2010) New Revision: 17662 Modified: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js Log: https://jira.jboss.org/browse/RF-8875 Modified: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html =================================================================== --- root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 2010-06-23 05:58:27 UTC (rev 17661) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 2010-06-23 16:27:39 UTC (rev 17662) @@ -56,12 +56,12 @@ <img src="images/bg_shadow.png" class="cb_list_shadow"> <div class="cb_list_position cb_list_width"> <div class="cb_list_decoration"> - <div class="cb_list_scroll cb_list_height"> + <div id="myComboItems" class="cb_list_scroll cb_list_height"> <div class="cb_option cb_font">Option 1</div> <div class="cb_option cb_font">Option 2</div> <div class="cb_option cb_font">Option 3</div> <div class="cb_option cb_font">Option 4</div> - <div class="cb_option cb_font cb_select">Option 6</div> + <div class="cb_option cb_font">Option 6</div> <div class="cb_option cb_font">Option 7</div> <div class="cb_option cb_font">Option 8</div> <div class="cb_option cb_font">Option 9</div> @@ -71,7 +71,7 @@ </div> </div> <script type="text/javascript"> - new RichFaces.ui.ComboBox("myCombo", "myComboInput", {buttonId:'myComboButton'}); + new RichFaces.ui.ComboBox("myCombo", "myComboInput", {buttonId:'myComboButton', selectedItemClass:'cb_select'}); </script> </div><br/><select style="width:200px"><option>ccccc</option></select> &nbsp;text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block text block Modified: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js =================================================================== --- root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js 2010-06-23 05:58:27 UTC (rev 17661) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js 2010-06-23 16:27:39 UTC (rev 17662) @@ -5,12 +5,14 @@ rf.ui.ComboBox = function(componentId, fieldId, options) { this.namespace = "."+rf.Event.createNamespace(this.name, this.componentId); // call constructor of parent class - $super.constructor.call(this, componentId+"List", fieldId, options); + $super.constructor.call(this, componentId+ID.SELECT, fieldId, options); $p.attachToDom(componentId); this.componentId = componentId; this.options = $.extend({}, defaultOptions, options); //this.currentValue = rf.getDomElement(this.fieldId).value; this.index = -1; + updateItemsList.call(this); + bindEventHandlers.call(this); }; var $p ={}; @@ -22,8 +24,48 @@ var $super = rf.ui.ComboBox.$super; var defaultOptions = { + selectedItemClass:'cb_select' }; + var ID = { + SELECT:'List', + ITEMS:'Items' + }; + + var bindEventHandlers = function () { + rf.Event.bindById(this.componentId+ID.ITEMS, "mouseover"+this.namespace, onClick, this); + }; + + var onClick = function(event) { + var element = event.target; + while (element.parentNode && element.parentNode!=event.currentTarget) { + element = element.parentNode; + }; + if (element.parentNode) { + this.selectItem(this.items.index(element)); + } + } + + var updateItemsList = function () { + this.items = $(rf.getDomElement(this.componentId+ID.ITEMS)).children(); + }; + + var scrollToSelectedItem = function() { + var offset = 0; + this.items.slice(0, this.index).each(function() { + offset += this.offsetHeight; + }); + var itemsContainer = this.items.first().parent(); + if(offset < itemsContainer.scrollTop()) { + itemsContainer.scrollTop(offset); + } else { + offset+=this.items.get(this.index).offsetHeight; + if(offset - itemsContainer.scrollTop() > itemsContainer.get(0).clientHeight) { + itemsContainer.scrollTop(offset - itemsContainer.innerHeight()); + } + } + }; + // Add new properties and methods $.extend(rf.ui.SelectBase.prototype, (function () { return { @@ -35,11 +77,38 @@ return this.namespace; }, - selectPrevItem: function () { + selectItem: function(index, isOffset) { + if (this.items.length==0) return; + if (this.index!=-1) { + this.items.eq(this.index).removeClass(this.options.selectedItemClass); + } + + if (isOffset) { + this.index += offset; + if ( this.index<0 ) { + this.index = this.items.length - 1; + } else if (this.index >= this.items.length) { + this.index = 0; + } + } else { + if (index<0) { + index = 0; + } else if (index>=this.items.length) { + index = this.items.length - 1; + } + this.index = index; + } + this.items.eq(this.index).addClass(this.options.selectedItemClass); + + scrollToSelectedItem.call(this); }, + + selectPrevItem: function () { + this.selectItem(-1, true); + }, selectNextItem: function () { - + this.selectItem(1, true); }, selectPageUp: function () { @@ -52,6 +121,19 @@ }, onChange: function () { + }, + + onShow: function () { + if (this.items.length>0) { + this.selectItem(0); + } + }, + + onHide: function () { + if (this.index!=-1) { + this.items.eq(this.index).removeClass(this.options.selectedItemClass); + this.index=-1; + } } }; })()); Modified: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js =================================================================== --- root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js 2010-06-23 05:58:27 UTC (rev 17661) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js 2010-06-23 16:27:39 UTC (rev 17662) @@ -213,12 +213,18 @@ $(rf.getDomElement(this.selectId)).show(); this.isVisible = true; this.scrollElements = rf.Event.bindScrollEventHandlers(this.selectId, this.hide, this, this.namespace); + if (this.onShow) { + this.onShow(event); + } } }, hide: function (event) { rf.Event.unbindScrollEventHandlers(this.scrollElements, this); $(rf.getDomElement(this.selectId)).hide(); this.isVisible = false; + if (this.onHide) { + this.onHide(event); + } }, destroy: function () { //TODO: add all unbind