Author: nbelaevski Date: 2010-07-06 12:55:26 -0400 (Tue, 06 Jul 2010) New Revision: 17744 Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.ecss root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.js root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/SelectBase.js root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_down_button.gif root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_button.png root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_field.png root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_shadow.png root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/richfaces-selection.js Log: Latest comboBox changes check-in Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.ecss =================================================================== --- root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.ecss (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.ecss 2010-07-06 16:55:26 UTC (rev 17744) @@ -0,0 +1,147 @@ +* { + font-size: 11px; + font-family: verdana; + color: #000000 +} + +.cb_field_width { + width: 100px; +} + +.cb_list_width { + width: 200px; +} + +.cb_list_height { + height: 100px; +} + +input.cb_font { + color: #000000 /*generalTextColor*/ +} + +input.cb_input { + border: 0px; + background: none; + width: 100%; +} + +.cb_field { + position: inline-block; + border: 1px solid #A6A6A6 /*panelBorderColor*/; + display: inline-block; + background-image: "url(#{resource['org.richfaces:combo_list_field.png']})"; + background-repeat: repeat-x; + background-position: top left; + /*gradient - from additionalBackgroundColor to controlBackgroundColor, background-color - controlBackgroundColor*/; +} + +.cb_button { + background-image: "url(#{resource['org.richfaces:combo_list_button.png']})"; + background-repeat: repeat-x; + background-position: top left; + background-color: #C0D1E7; + /*gradient - from headerGradientColor to headerBackgroundColor, background-color - headerBackgroundColor*/; + text-align: center; + border-left: 1px solid #A6A6A6 /*panelBorderColor*/; + width: 15px; + position: absolute; + top: 0px; + right: 0px; + height: 200px; + padding-top: 1px +} + +.cb_button_arrow { + background-position: center; + background-repeat: no-repeat; + background-image: "url(#{resource['org.richfaces:combo_down_button.gif']})"; + cursor: pointer; + width: 15px; + height: 15px; +} + +.cb_list_cord { + position: absolute; + font-size: 0px; +} /*DDL is hidden!!!!!*/ + +.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; + list-style-type: none; +} + +.cb_select { + padding: 1px; + width: 100%; + background-color: #DFE8F6; + border: 1px dotted #a3bae9; /*generalTextColor*/ +} + +.cb_shadow { + border: 0px solid red; + display: inline-block; + position: absolute; + float: left; + padding: 6px 6px 6px 6px; + top: -6px; + left: -7px; +} + +.cb_shadow_t { + background-image: "url(#{resource['org.richfaces:combo_list_shadow.png']})"; + background-position: top left; + position: absolute; + width: 6px; + top: 0px; + bottom: 6px; + left: 0px +} + +.cb_shadow_l { + background-image: "url(#{resource['org.richfaces:combo_list_shadow.png']})"; + background-position: bottom left; + position: absolute; + height: 6px; + bottom: 0px; + left: 0px; + right: 6px; +} + +.cb_shadow_r { + background-image: "url(#{resource['org.richfaces:combo_list_shadow.png']})"; + background-position: bottom right; + position: absolute; + width: 6px; + top: 6px; + bottom: 0px; + right: 0px; +} + +.cb_shadow_b { + background-image: "url(#{resource['org.richfaces:combo_list_shadow.png']})"; + background-position: right top; + position: absolute; + height: 6px; + top: 0px; + left: 6px; + right: 0px; +} + +.cb_list_ul { + margin: 0px; + padding: 0px; +} \ No newline at end of file Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.js =================================================================== --- root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.js (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.js 2010-07-06 16:55:26 UTC (rev 17744) @@ -0,0 +1,225 @@ +(function ($, rf) { + rf.utils = rf.utils || {}; + + rf.utils.Cache = function (data, options) { + this.key = options.key; + this.cache = {} + this.cache[this.key] = data || []; + this.values = options.parse && options.parse(data) || this.cache[this.key]; + }; + + var getItems = function (key) { + var newCache = []; + + if (this.cache[key]) { + newCache = this.cache[key]; + } else { + var itemsCache = this.cache[this.key]; + for (var i = 0; i<this.values.length; i++) { + var value = this.values[i].toLowerCase(); + var p = value.indexOf(key.toLowerCase()); + if (p == 0) { + newCache.push(itemsCache[i]); + } + } + + if ((!this.lastKey || key.indexOf(this.lastKey)!=0) && newCache.length > 0) { + //console && console.log && console.log("added key:"+key+" length:" + newCache.length) + this.cache[key] = newCache; + if (newCache.length==1) { + this.lastKey = key; + } + } + } + + return newCache; + }; + + $.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(this.options, defaultOptions, options); + //this.currentValue = rf.getDomElement(this.fieldId).value; + this.index = -1; + bindEventHandlers.call(this); + updateItemsList.call(this, ""); + }; + + var $p ={}; + + // Extend component class and add protected methods from parent class to our container + $p = rf.ui.SelectBase.extend(rf.ui.SelectBase, rf.ui.ComboBox, $p); + + // define super class link + var $super = rf.ui.ComboBox.$super; + + var defaultOptions = { + selectedItemClass:'cb_select', + autoFill:true + }; + + var ID = { + SELECT:'List', + ITEMS:'Items' + }; + + var bindEventHandlers = function () { + rf.Event.bindById(this.componentId+ID.ITEMS, "mouseover"+this.namespace, onMouseOver, this); + }; + + 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) { + var index = this.items.index(element); + if (index!=this.index) { + this.selectItem(index); + } + } + }; + + var updateItemsList = function (value) { + this.items = $(rf.getDomElement(this.componentId+ID.ITEMS)).children(); + this.cache = new rf.utils.Cache(this.items, { + parse: getData, + key: value + }); + }; + + 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() { + 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()); + } + } + }; + + var autoFill = function (inputValue, value) { + if( this.options.autoFill) { + var field = rf.getDomElement(this.fieldId); + field.value = inputValue + 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 { + name:"CompoBox", + destroy: function () { + //TODO: add all unbind + $super.destroy.call(this); + }, + getNamespace: function () { + return this.namespace; + }, + + selectItem: function(index, isOffset, noAutoFill) { + if (this.items.length==0) return; + + if (this.index!=-1) { + this.items.eq(this.index).removeClass(this.options.selectedItemClass); + } + + if (index==undefined) { + this.index = -1; + return; + } + + if (isOffset) { + this.index += index; + 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; + } + var item = this.items.eq(this.index); + item.addClass(this.options.selectedItemClass); + + scrollToSelectedItem.call(this); + !noAutoFill && autoFill.call(this, this.newValue, item.text()); + }, + + selectPrevItem: function () { + this.selectItem(-1, true); + }, + selectNextItem: function () { + this.selectItem(1, true); + }, + selectPageUp: function () { + + }, + selectPageDown: function () { + + }, + onBeforeShow: function (event) { + }, + + changeValue: function (event, value) { + // TODO: ajax call here if needed + + this.selectItem(); + var newItems = this.cache.getItems(value); + this.items = $(newItems); + $(rf.getDomElement(this.componentId+ID.ITEMS)).empty().append(newItems); + this.index = -1; + this.newValue = value; + this.selectItem(0, false, event.which == rf.KEYS.BACKSPACE); + }, + + onShow: function (event) { + if (this.items && this.items.length>0) { + //??TODO it's nessesary only if not changed value + this.selectItem(0); + } + }, + + onHide: function () { + this.selectItem(); + } + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/SelectBase.js =================================================================== --- root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/SelectBase.js (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/SelectBase.js 2010-07-06 16:55:26 UTC (rev 17744) @@ -0,0 +1,256 @@ +// TODO: move this extend to RichFaces.Event for exapmle +$.extend(RichFaces.Event, { + bindScrollEventHandlers: function(element, handler, component) { + var elements = []; + element = RichFaces.getDomElement(element).parentNode; + while (element && element!=window.document.body) + { + if (element.offsetWidth!=element.scrollWidth || element.offsetHeight!=element.scrollHeight) + { + elements.push(element); + RichFaces.Event.bind(element, "scroll"+component.getNamespace(), handler, component); + } + element = element.parentNode; + } + return elements; + }, + unbindScrollEventHandlers: function(elements, component) { + RichFaces.Event.unbind(elements, component.getNamespace()); + elements = null; + } +}); + +(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 || {}; + + // Constructor definition + rf.ui.SelectBase = function(selectId, fieldId, options) { + // call constructor of parent class + $super.constructor.call(this, selectId); + this.selectId = selectId; + this.fieldId = fieldId; + this.options = $.extend({}, defaultOptions, options); + this.namespace = this.namespace || "."+rf.Event.createNamespace(this.name, this.selectId); + this.currentValue = this.getInputValue(); + bindEventHandlers.call(this); + }; + + var $p ={}; + + // Extend component class and add protected methods from parent class to our container + $p = rf.BaseComponent.extend(rf.BaseComponent, rf.ui.SelectBase, $p); + + // define super class link + var $super = rf.ui.SelectBase.$super; + + var defaultOptions = { + changeDelay:8 + }; + + var bindEventHandlers = function() { + if (this.options.buttonId) { + rf.Event.bindById(this.options.buttonId, "mousedown"+this.namespace, onButtonShow, this); + rf.Event.bindById(this.options.buttonId, "mouseup"+this.namespace, onSelectMouseUp, this); + } + + var inputEventHandlers = {}; + inputEventHandlers["focus"+this.namespace] = onFocus; + inputEventHandlers["blur"+this.namespace] = onBlur; + inputEventHandlers["click"+this.namespace] = onClick; + inputEventHandlers[($.browser.opera ? "keypress" : "keydown")+this.namespace] = onKeyDown; + rf.Event.bindById(this.fieldId, inputEventHandlers, this); + + inputEventHandlers = {}; + inputEventHandlers["click"+this.namespace] = onSelectClick; + inputEventHandlers["mousedown"+this.namespace] = onSelectMouseDown; + inputEventHandlers["mouseup"+this.namespace] = onSelectMouseUp; + rf.Event.bindById(this.selectId, inputEventHandlers, this); + } + + var onSelectClick = function () { + }; + var onSelectMouseDown = function () { + this.isMouseDown = true; + console && console.log && console.log("onMouseDown"); + }; + var onSelectMouseUp = function () { + //this.isMouseDown = false; + rf.getDomElement(this.fieldId).focus(); + console && console.log && console.log("onMouseUp"); + }; + + var onButtonShow = function (event) { + this.isMouseDown = true; + console && console.log && console.log("onButtonShow - "+this.timeoutId); + if (this.timeoutId) { + window.clearTimeout(this.timeoutId); + this.timeoutId = null; + rf.getDomElement(this.fieldId).focus(); + } + + if (this.isVisible) { + this.hide(event); + } else { + this.show(event); + //rf.getDomElement(this.fieldId).focus(); + } + }; + + var onFocus = function (event) { + console && console.log && console.log("onFocus"); + }; + + var onBlur = function (event) { + console && console.log && console.log("onBlur"); + if (this.isMouseDown) { + rf.getDomElement(this.fieldId).focus(); + this.isMouseDown = false; + console && console.log && console.log("---------> and focus"); + } else if (this.isVisible && !this.isMouseDown/*&& checkOnBlur.call(this, event)*/) { + var _this = this; + this.timeoutId = window.setTimeout(function(){_this.hide();}, 200); + } + }; + + var onClick = function (event) { + }; + + var onChange = function (event) { + var value = this.getInputValue(); + var flag = value != this.currentValue; + if (event.which == rf.KEYS.LEFT || event.which == rf.KEYS.RIGHT || flag) { + if (flag) { + this.changeValue(event, value); + this.currentValue = value; + if (!this.isVisible) { + this.show(); + } + } + } + } + + + /*var checkOnBlur = function (event) { + var e = $(rf.getDomElement(this.options.buttonId)); + return (e == event.target) || $(event.target).closest(e); + };*/ + + var onKeyDown = function (event) { + switch(event.which) { + case rf.KEYS.UP: + event.preventDefault(); + if (this.isVisible) { + this.selectPrevItem(); + } + break; + case rf.KEYS.DOWN: + event.preventDefault(); + if (this.isVisible) { + this.selectNextItem(); + } else { + this.show(); + } + break; + case rf.KEYS.PAGEUP: + event.preventDefault(); + if (this.isVisible) { + this.selectPageUp(); + } + break; + case rf.KEYS.PAGEDOWN: + event.preventDefault(); + if (this.isVisible) { + this.selectPageDown(); + } + break; + case rf.KEYS.TAB: + case rf.KEYS.RETURN: + event.preventDefault(); + /*if( selectCurrentItem() ) { + event.preventDefault(); + //TODO: bind form submit event handler to cancel form submit under the opera + //cancelSubmit = true; + return false; + }*/ + this.hide(); + break; + case rf.KEYS.ESC: + this.hide(); + break; + default: + if (!this.options.selectOnly) { + var _this = this; + window.clearTimeout(this.changeTimerId); + this.changeTimerId = window.setTimeout(function(){onChange.call(_this, event);}, this.options.changeDelay) + } + break; + } + } + + // Add new properties and methods + $.extend(rf.ui.SelectBase.prototype, (function () { + return { + name:"SelectBase", + show: function (event) { + if (this.onBeforeShow(event)!=false) { + $(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 + rf.Event.unbindById(this.options.buttonId, this.namespace); + rf.Event.unbindById(this.fieldId, this.namespace); + $super.destroy.call(this); + }, + getNamespace: function () { + return this.namespace; + }, + + selectPrevItem: function () { + }, + selectNextItem: function () { + }, + selectPageUp: function () { + }, + selectPageDown: function () { + }, + onBeforeShow: function () { + }, + getInputValue: function () { + var value = this.fieldId ? rf.getDomElement(this.fieldId).value : undefined; + return value; + } + + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_down_button.gif =================================================================== (Binary files differ) Property changes on: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_down_button.gif ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_button.png =================================================================== (Binary files differ) Property changes on: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_button.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_field.png =================================================================== (Binary files differ) Property changes on: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_field.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_shadow.png =================================================================== (Binary files differ) Property changes on: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/combo_list_shadow.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/richfaces-selection.js =================================================================== --- root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/richfaces-selection.js (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/richfaces-selection.js 2010-07-06 16:55:26 UTC (rev 17744) @@ -0,0 +1,45 @@ +(function (richfaces) { + + richfaces.Selection = richfaces.Selection || {}; + + richfaces.Selection.set = function (field, start, end) { + if(field.setSelectionRange) { + field.focus(); + field.setSelectionRange(start, end); + } else if (field.createTextRange){ + var range = field.createTextRange(); + range.collapse(true); + range.moveEnd('character', end); + range.moveStart('character', start); + range.select(); + } + } + + richfaces.Selection.getStart = function(field) + { + if (field.setSelectionRange) { + return field.selectionStart; + } else if (document.selection && document.selection.createRange) { + var r = document.selection.createRange().duplicate(); + r.moveEnd('character', field.value.length); + if (r.text == '') return field.value.length; + return field.value.lastIndexOf(r.text); + } + } + + richfaces.Selection.getEnd = function(field) + { + if (field.setSelectionRange) { + return field.selectionEnd; + } else if (document.selection && document.selection.createRange) { + var r = document.selection.createRange().duplicate(); + r.moveStart('character', -field.value.length); + return r.text.length; + } + } + + richfaces.Selection.setCaretTo = function (field, pos) + { + richfaces.Selection.set(field, pos, pos); + } +})(window.RichFaces || (window.RichFaces={})); \ No newline at end of file