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

Author: pyaschenko Date: 2010-06-25 11:23:04 -0400 (Fri, 25 Jun 2010) New Revision: 17672 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-25 14:54:44 UTC (rev 17671) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 2010-06-25 15:23:04 UTC (rev 17672) @@ -17,7 +17,7 @@ .cb_field_width{ width : 150px;} .cb_list_width{ width : 250px;} - .cb_list_height{ height : 100px;} + .cb_list_height{ max-height : 100px;} .cb_font{color : #000000/*generalTextColor*/} .cb_input {border : 0px; background : none; width : 100%;} @@ -30,8 +30,8 @@ .cb_list_cord{ position : relative; font-size : 0px;display : none}/*DDL is hidden!!!!!*/ .cb_list_position{ position : absolute; top: 0px; left: -1px; } .cb_list_decoration{ border : 1px solid #A6A6A6 /*panelBorderColor*/; padding : 0px; background : #FFFFFF; /*tableBackgroundColor*/} - .cb_list_scroll{ overflow : auto; overflow-x : hidden;} - .cb_option{ padding : 2px; white-space : nowrap; cursor : default;} + .cb_list_scroll{ overflow : auto; overflow-x : hidden; list-style: none; margin:0px; padding:0px;} + .cb_option{ padding : 2px; white-space : nowrap; cursor : default; display:block; margin:0px; overflow:hidden;} .cb_select{ padding : 1px; width : 100%; background-color: #DFE8F6; border : 1px dotted #a3bae9;/*generalTextColor*/} .cb_list_shadow{ position : absolute; width : 260px; height : 109px; margin-left : -4px; margin-top : -2px;} @@ -56,17 +56,20 @@ <img src="images/bg_shadow.png" class="cb_list_shadow"> <div class="cb_list_position cb_list_width"> <div class="cb_list_decoration"> - <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">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> - <div class="cb_option cb_font">Option 0</div> - </div> + <ul id="myComboItems" class="cb_list_scroll cb_list_height"> + <li class="cb_option cb_font">December</li> + <li class="cb_option cb_font"><span>November</span><img src="images/down.gif" width="20" height="20"/></li> + <li class="cb_option cb_font">October</li> + <li class="cb_option cb_font">September</li> + <li class="cb_option cb_font">August</li> + <li class="cb_option cb_font">July</li> + <li class="cb_option cb_font">June</li> + <li class="cb_option cb_font">May</li> + <li class="cb_option cb_font">April</li> + <li class="cb_option cb_font">March</li> + <li class="cb_option cb_font">February</li> + <li class="cb_option cb_font">January</li> + </ul> </div> </div> </div> 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-25 14:54:44 UTC (rev 17671) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js 2010-06-25 15:23:04 UTC (rev 17672) @@ -1,14 +1,45 @@ (function ($, rf) { + rf.utils = rf.utils || {}; + + rf.utils.Cache = function (data, options) { + this.data = data || []; + this.values = options.parse && options.parse(this.data) || this.data; + }; + + var getItems = function (str) { + if (!str || str.length==0) { + return this.data; + } + var newData = []; + for (var i = 0; i<this.values.length; i++) { + var value = this.values[i].toLowerCase(); + var p = value.indexOf(str.toLowerCase()); + p == 0 && newData.push(this.data[i]); + } + return newData; + }; + + $.extend(rf.utils.Cache.prototype, (function () { + return { + getItems: getItems + }; + })()); + +})(jQuery, RichFaces); + +(function ($, rf) { + rf.ui = rf.ui || {}; // Constructor definition rf.ui.ComboBox = function(componentId, fieldId, options) { this.namespace = "."+rf.Event.createNamespace(this.name, this.componentId); + this.options = {}; // call constructor of parent class $super.constructor.call(this, componentId+ID.SELECT, fieldId, options); $p.attachToDom(componentId); this.componentId = componentId; - this.options = $.extend({}, defaultOptions, options); + this.options = $.extend(this.options, defaultOptions, options); //this.currentValue = rf.getDomElement(this.fieldId).value; this.index = -1; updateItemsList.call(this); @@ -24,7 +55,8 @@ var $super = rf.ui.ComboBox.$super; var defaultOptions = { - selectedItemClass:'cb_select' + selectedItemClass:'cb_select', + autoFill:true }; var ID = { @@ -33,23 +65,38 @@ }; var bindEventHandlers = function () { - rf.Event.bindById(this.componentId+ID.ITEMS, "mouseover"+this.namespace, onClick, this); + rf.Event.bindById(this.componentId+ID.ITEMS, "mouseover"+this.namespace, onMouseOver, this); }; - var onClick = function(event) { + var onMouseOver = function(event) { + console && console.log && console.log("mouseOver"); var element = event.target; while (element.parentNode && element.parentNode!=event.currentTarget) { element = element.parentNode; }; if (element.parentNode) { - this.selectItem(this.items.index(element)); + var index = this.items.index(element); + if (index!=this.index) { + this.selectItem(index); + } } - } + }; var updateItemsList = function () { this.items = $(rf.getDomElement(this.componentId+ID.ITEMS)).children(); + this.cache = new rf.utils.Cache(this.items, { + parse: getData + }); }; + var getData = function (nodeList) { + var data = []; + nodeList.each(function () { + data.push($(this).text()); + }); + return data; + }; + var scrollToSelectedItem = function() { var offset = 0; this.items.slice(0, this.index).each(function() { @@ -66,6 +113,14 @@ } }; + var autoFill = function (inputValue, value) { + if( this.options.autoFill) { + var field = rf.getDomElement(this.fieldId); + field.value = field.value + value.substring(inputValue.length); + rf.Selection.set(field, inputValue.length, field.value.length); + } + }; + // Add new properties and methods $.extend(rf.ui.SelectBase.prototype, (function () { return { @@ -84,8 +139,13 @@ this.items.eq(this.index).removeClass(this.options.selectedItemClass); } + if (index==undefined) { + this.index = -1; + return; + } + if (isOffset) { - this.index += offset; + this.index += index; if ( this.index<0 ) { this.index = this.items.length - 1; } else if (this.index >= this.items.length) { @@ -120,20 +180,29 @@ }, - onChange: function () { + onChange: function (event, value) { + this.selectItem(); + var newItems = this.cache.getItems(value); + this.items = $(newItems); + $(rf.getDomElement(this.componentId+ID.ITEMS)).empty().append(newItems); + this.index = -1; + this.selectItem(0); + // getFirstValue + $(this.items).first().text(); + if (event.which != rf.KEYS.BACKSPACE) { + autoFill.call(this, value, $(this.items).first().text()); + } }, onShow: function () { if (this.items.length>0) { + //??TODO it's nessesary only if not changed value this.selectItem(0); } }, onHide: function () { - if (this.index!=-1) { - this.items.eq(this.index).removeClass(this.options.selectedItemClass); - this.index=-1; - } + this.selectItem(); } }; })()); 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-25 14:54:44 UTC (rev 17671) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js 2010-06-25 15:23:04 UTC (rev 17672) @@ -20,6 +20,22 @@ } }); +(function (rf) { + rf.KEYS = { + BACKSPACE: 8, + TAB: 9, + RETURN: 13, + ESC: 27, + PAGEUP: 33, + PAGEDOWN: 34, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + DEL: 46, + } +})(RichFaces); + (function ($, rf) { rf.ui = rf.ui || {}; @@ -45,22 +61,9 @@ var $super = rf.ui.SelectBase.$super; var defaultOptions = { + changeDelay:8 }; - var KEYS = { - BACKSPACE: 8, - TAB: 9, - RETURN: 13, - ESC: 27, - PAGEUP: 33, - PAGEDOWN: 34, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - DEL: 46, - }; - var bindEventHandlers = function() { if (this.options.buttonId) { rf.Event.bindById(this.options.buttonId, "mousedown"+this.namespace, onButtonShow, this); @@ -132,12 +135,13 @@ var onChange = function (event) { var value = rf.getDomElement(this.fieldId).value; var flag = value != this.currentValue; - if (event.which == KEYS.LEFT || event.which == KEYS.RIGHT || flag) { + if (event.which == rf.KEYS.LEFT || event.which == rf.KEYS.RIGHT || flag) { // TODO: call onchange if (flag && !this.isVisible) { this.show(); } if (flag) { + this.onChange(event, value); this.currentValue = value; } } @@ -151,13 +155,13 @@ var onKeyDown = function (event) { switch(event.which) { - case KEYS.UP: + case rf.KEYS.UP: event.preventDefault(); if (this.isVisible) { this.selectPrevItem(); } break; - case KEYS.DOWN: + case rf.KEYS.DOWN: event.preventDefault(); if (this.isVisible) { this.selectNextItem(); @@ -165,20 +169,20 @@ this.show(); } break; - case KEYS.PAGEUP: + case rf.KEYS.PAGEUP: event.preventDefault(); if (this.isVisible) { this.selectPageUp(); } break; - case KEYS.PAGEDOWN: + case rf.KEYS.PAGEDOWN: event.preventDefault(); if (this.isVisible) { this.selectPageDown(); } break; - case KEYS.TAB: - case KEYS.RETURN: + case rf.KEYS.TAB: + case rf.KEYS.RETURN: event.preventDefault(); /*if( selectCurrent() ) { event.preventDefault(); @@ -188,17 +192,14 @@ }*/ this.hide(); break; - case KEYS.ESC: + case rf.KEYS.ESC: this.hide(); break; default: if (!this.options.selectOnly) { - if (this.options.changeDelay) { - var _this = this; - this.changeTimerId = window.setTimeout(function(){onChange.call(_this, event);}, this.options.changeDelay) - } else { - onChange.call(this, event); - } + var _this = this; + window.clearTimeout(this.changeTimerId); + this.changeTimerId = window.setTimeout(function(){onChange.call(_this, event);}, this.options.changeDelay) } break; }