Author: pyaschenko Date: 2010-07-16 07:37:20 -0400 (Fri, 16 Jul 2010) New Revision: 18135 Added: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.ecss root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.js root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoCompleteBase.js Removed: 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 Modified: root/ui-sandbox/inputs/trunk/combobox/src/main/java/org/richfaces/renderkit/ComboBoxRendererBase.java Log: https://jira.jboss.org/browse/RF-8875 Modified: root/ui-sandbox/inputs/trunk/combobox/src/main/java/org/richfaces/renderkit/ComboBoxRendererBase.java =================================================================== --- root/ui-sandbox/inputs/trunk/combobox/src/main/java/org/richfaces/renderkit/ComboBoxRendererBase.java 2010-07-16 11:23:15 UTC (rev 18134) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/java/org/richfaces/renderkit/ComboBoxRendererBase.java 2010-07-16 11:37:20 UTC (rev 18135) @@ -53,9 +53,9 @@ @ResourceDependency(name = "richfaces-event.js"), @ResourceDependency(name = "richfaces-base-component.js"), @ResourceDependency(name = "richfaces-selection.js"), - @ResourceDependency(library = "org.richfaces", name = "SelectBase.js"), - @ResourceDependency(library = "org.richfaces", name = "ComboBox.js"), - @ResourceDependency(library = "org.richfaces", name = "ComboBox.ecss") + @ResourceDependency(library = "org.richfaces", name = "AutoCompleteBase.js"), + @ResourceDependency(library = "org.richfaces", name = "AutoComplete.js"), + @ResourceDependency(library = "org.richfaces", name = "AutoComplete.ecss") }) public abstract class ComboBoxRendererBase extends InputRendererBase implements MetaComponentRenderer { Copied: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.ecss (from rev 18076, 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/AutoComplete.ecss (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.ecss 2010-07-16 11:37:20 UTC (rev 18135) @@ -0,0 +1,152 @@ +.cb_field_width { + width: 200px; +} + +.cb_list_width { + width: 200px; +} + +.cb_list_height { + max-height: 100px; + min-height: 20px; +} + +.cb_input.cb_font, .cb_option.cb_font { + color: '#{richSkin.generalTextColor}'; + font-size: '#{richSkin.generalSizeFont}'; + font-family: '#{richSkin.generalFamilyFont}'; +} + +input.cb_input { + border-width: 0px; + background: none; + width: 100%; +} + +.cb_field { + position: inline-block; + border-width: 1px; + border-style: solid; + border-color: '#{richSkin.panelBorderColor}'; + display: inline-block; + background-image: "url(#{resource['org.richfaces.renderkit.html.images.ComboBoxFieldGradient']})"; + background-repeat: repeat-x; + background-position: top left; + background-color: '#{richSkin.controlBackgroundColor}'; +} + +.cb_button { + background-image: "url(#{resource['org.richfaces.renderkit.html.images.ComboBoxButtonGradient']})"; + background-repeat: repeat-x; + background-position: top left; + background-color: '#{richSkin.headerBackgroundColor}'; + text-align: center; + border-left-style: solid; + border-left-width: 1px; + border-left-color: '#{richSkin.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; + display: none; +} /*DDL is hidden!!!!!*/ + +.cb_list_decoration { + border-width: 1px; + border-style: solid; + border-color: '#{richSkin.panelBorderColor}'; + padding: 0px; + background-color: '#{richSkin.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-width: 1px; + border-style: dotted; + border-color: '#{richSkin.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 Copied: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.js (from rev 18076, 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/AutoComplete.js (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoComplete.js 2010-07-16 11:37:20 UTC (rev 18135) @@ -0,0 +1,301 @@ +(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 (key.length < this.key.length) { + return 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; + }; + + var isCached = function (key) { + return this.cache[key]; + } + + $.extend(rf.utils.Cache.prototype, (function () { + return { + getItems: getItems, + isCached: isCached + }; + })()); + +})(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); + this.attachToDom.call(this, componentId); + this.componentId = componentId; + this.options = $.extend(this.options, defaultOptions, options); + this.inputValue = this.getInputValue(); + this.index = -1; + this.isFirstAjax = true; + 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, + minChars:1, + selectFirst:true, + ajaxMode:true + }; + + var ID = { + SELECT:'List', + ITEMS:'Items' + }; + + var REGEXP_TRIM = /^[\n\s]*(.*)[\n\s]*$/; + + var getData = function (nodeList) { + var data = []; + nodeList.each(function () {; + data.push($(this).text().replace(REGEXP_TRIM, "$1")); + }); + return data; + } + + var bindEventHandlers = function () { + rf.Event.bind(rf.getDomElement(this.componentId+ID.ITEMS).parentNode, "click"+this.namespace+" mouseover"+this.namespace, onMouseAction, this); + }; + + var onMouseAction = function(event) { + console && console.log && console.log("mouseAction:" + event.type); + var element = $(event.target).closest(".rf-ac-i", event.currentTarget).get(0); + + if (element) { + if (event.type=="mouseover") { + var index = this.items.index(element); + if (index!=this.index) { + this.selectItem(index); + } + } else { + this.changeValue(event, this.getSelectedItemValue()); + rf.Selection.setCaretTo(rf.getDomElement(this.fieldId)); + this.hide(event); + } + } + }; + + var updateItemsList = function (value) { + this.items = $(rf.getDomElement(this.componentId+ID.ITEMS)).find(".rf-ac-i"); + this.cache = new rf.utils.Cache(this.items, { + parse: getData, + key: value + }); + }; + + var scrollToSelectedItem = function() { + var offset = 0; + this.items.slice(0, this.index).each(function() { + offset += this.offsetHeight; + }); + var itemsContainer = this.items.first().parent().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); + var start = rf.Selection.getStart(field); + this.setInputValue(inputValue + value.substring(inputValue.length)); + rf.Selection.set(field, start, field.value.length); + } + }; + + var callAjax = function(event) { + + var _this = this; + var ajaxSuccess = function () { + updateItemsList.call(_this, _this.inputValue); + if (_this.options.selectFirst) { + _this.selectItem(0); + } + } + + var ajaxError = function () { + alert("error"); + } + + this.isFirstAjax = false; + //caution: JSF submits inputs with empty names causing "WARNING: Parameters: Invalid chunk ignored." in Tomcat log + var params = {}; + params[this.componentId + ".ajax"] = "1"; + + rf.ajax(this.componentId, event, {parameters: params, error: ajaxError, complete:ajaxSuccess}); + }; + + $.extend(rf.ui.ComboBox.prototype, (function () { + return { + name:"CompoBox", + destroy: function () { + //TODO: add all unbind + rf.Event.unbind(rf.getDomElement(this.componentId+ID.ITEMS).parentNode, this.namespace); + $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.inputValue, this.getSelectedItemValue()); + }, + + selectPrevItem: function () { + this.selectItem(-1, true); + }, + selectNextItem: function () { + this.selectItem(1, true); + }, + selectPageUp: function () { + + }, + selectPageDown: function () { + + }, + onBeforeShow: function (event) { + }, + + onEnter: function (event) { + this.changeValue(event, this.getSelectedItemValue()); + rf.getDomElement(this.fieldId).blur(); + rf.Selection.setCaretTo(rf.getDomElement(this.fieldId)); + rf.getDomElement(this.fieldId).focus(); + }, + + changeValue: function (event, value) { + this.selectItem(); + + if (typeof value == "undefined") { + // called from show method, not actually value changed + if (this.items.length==0 && this.inputValue.length>=this.options.minChars && this.isFirstAjax) { + this.options.ajaxMode && callAjax.call(this, event); + } + return; + } + + // TODO: ajax call here if needed + if (( value.toLowerCase().indexOf(this.cache.key.toLowerCase())!=0 || this.inputValue.length==0) && + value.length>=this.options.minChars) { + this.inputValue = value; + this.options.ajaxMode && callAjax.call(this, event); + return; + } + + var newItems = this.cache.getItems(value); + this.items = $(newItems); + //TODO: works only with simple markup, not with <tr> + $(rf.getDomElement(this.componentId+ID.ITEMS)).empty().append(newItems); + this.index = -1; + this.inputValue = value; + if (this.options.selectFirst) { + this.selectItem(0, false, event.which == rf.KEYS.BACKSPACE); + } + }, + + getSelectedItemValue: function () { + if ( this.index>=0) { + return getData(this.items.eq(this.index))[0]; + } + return undefined; + }, + + onShow: function (event) { + if (this.items && this.items.length>0) { + //??TODO it's nessesary only if not changed value + if (this.options.selectFirst) { + this.selectItem(0); + } + } + }, + + onHide: function () { + this.selectItem(); + } + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Copied: root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoCompleteBase.js (from rev 18076, 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/AutoCompleteBase.js (rev 0) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/AutoCompleteBase.js 2010-07-16 11:37:20 UTC (rev 18135) @@ -0,0 +1,266 @@ +// 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 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 { + onShow.call(this, 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; + //TODO: is it needed to chesk keys? + if (event.which == rf.KEYS.LEFT || event.which == rf.KEYS.RIGHT || flag) { + if (flag) { + this.changeValue(event, value); + onShow.call(this, event, true); + } + } + }; + + var onShow = function (event, noChangeValue) { + !noChangeValue && this.changeValue(event); + this.show(event); + }; + + 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 { + onShow.call(this, event); + } + 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: + //TODO draft code, merge with code from combobox.js + event.preventDefault(); + this.onEnter(event); + /*if( selectCurrentItem() ) { + event.preventDefault(); + //TODO: bind form submit event handler to cancel form submit under the opera + //cancelSubmit = true; + return false; + }*/ + this.hide(); + return false; + 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; + } + } + + $.extend(rf.ui.SelectBase.prototype, (function () { + return { + name:"SelectBase", + show: function (event) { + if (!this.isVisible) { + if (this.onBeforeShow(event)!=false) { + $(rf.getDomElement(this.selectId)).setPosition({id: this.fieldId}, {type:"DROPDOWN", offset:[0,20]}).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) { + if (this.isVisible) { + 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 () { + return this.fieldId ? rf.getDomElement(this.fieldId).value : undefined; + }, + updateInputValue: function (value) { + if (this.fieldId) { + rf.getDomElement(this.fieldId).value = value; + return value; + } else { + return ""; + } + }, + setInputValue: function (value) { + this.currentValue = this.updateInputValue(value); + } + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Deleted: 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 2010-07-16 11:23:15 UTC (rev 18134) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.ecss 2010-07-16 11:37:20 UTC (rev 18135) @@ -1,152 +0,0 @@ -.cb_field_width { - width: 100px; -} - -.cb_list_width { - width: 200px; -} - -.cb_list_height { - max-height: 100px; - min-height: 20px; -} - -.cb_input.cb_font, .cb_option.cb_font { - color: '#{richSkin.generalTextColor}'; - font-size: '#{richSkin.generalSizeFont}'; - font-family: '#{richSkin.generalFamilyFont}'; -} - -input.cb_input { - border-width: 0px; - background: none; - width: 100%; -} - -.cb_field { - position: inline-block; - border-width: 1px; - border-style: solid; - border-color: '#{richSkin.panelBorderColor}'; - display: inline-block; - background-image: "url(#{resource['org.richfaces.renderkit.html.images.ComboBoxFieldGradient']})"; - background-repeat: repeat-x; - background-position: top left; - background-color: '#{richSkin.controlBackgroundColor}'; -} - -.cb_button { - background-image: "url(#{resource['org.richfaces.renderkit.html.images.ComboBoxButtonGradient']})"; - background-repeat: repeat-x; - background-position: top left; - background-color: '#{richSkin.headerBackgroundColor}'; - text-align: center; - border-left-style: solid; - border-left-width: 1px; - border-left-color: '#{richSkin.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; - display: none; -} /*DDL is hidden!!!!!*/ - -.cb_list_decoration { - border-width: 1px; - border-style: solid; - border-color: '#{richSkin.panelBorderColor}'; - padding: 0px; - background-color: '#{richSkin.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-width: 1px; - border-style: dotted; - border-color: '#{richSkin.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 Deleted: 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 2010-07-16 11:23:15 UTC (rev 18134) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/ComboBox.js 2010-07-16 11:37:20 UTC (rev 18135) @@ -1,295 +0,0 @@ -(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 (key.length < this.key.length) { - return 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; - }; - - var isCached = function (key) { - return this.cache[key]; - } - - $.extend(rf.utils.Cache.prototype, (function () { - return { - getItems: getItems, - isCached: isCached - }; - })()); - -})(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.call(this, componentId); - this.componentId = componentId; - this.options = $.extend(this.options, defaultOptions, options); - this.inputValue = this.getInputValue(); - this.index = -1; - this.isFirstAjax = true; - 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, - minChars:1, - selectFirst:true, - ajaxMode:true - }; - - var ID = { - SELECT:'List', - ITEMS:'Items' - }; - - var REGEXP_TRIM = /^[\n\s]*(.*)[\n\s]*$/; - - var getData = function (nodeList) { - var data = []; - nodeList.each(function () {; - data.push($(this).text().replace(REGEXP_TRIM, "$1")); - }); - return data; - } - - var bindEventHandlers = function () { - rf.Event.bind(rf.getDomElement(this.componentId+ID.ITEMS).parentNode, "click"+this.namespace+" mouseover"+this.namespace, onMouseAction, this); - }; - - var onMouseAction = function(event) { - console && console.log && console.log("mouseAction:" + event.type); - var element = $(event.target).closest(".rf-ac-i", event.currentTarget).get(0); - - if (element) { - if (event.type=="mouseover") { - var index = this.items.index(element); - if (index!=this.index) { - this.selectItem(index); - } - } else { - this.changeValue(event, this.getSelectedItemValue()); - rf.Selection.setCaretTo(rf.getDomElement(this.fieldId)); - this.hide(event); - } - } - }; - - var updateItemsList = function (value) { - this.items = $(rf.getDomElement(this.componentId+ID.ITEMS)).find(".rf-ac-i"); - this.cache = new rf.utils.Cache(this.items, { - parse: getData, - key: value - }); - }; - - var scrollToSelectedItem = function() { - var offset = 0; - this.items.slice(0, this.index).each(function() { - offset += this.offsetHeight; - }); - var itemsContainer = this.items.first().parent().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); - var start = rf.Selection.getStart(field); - field.value = inputValue + value.substring(inputValue.length); - rf.Selection.set(field, start, field.value.length); - } - }; - - var callAjax = function(event) { - - var _this = this; - var ajaxSuccess = function () { - updateItemsList.call(_this, _this.inputValue); - if (_this.options.selectFirst) { - _this.selectItem(0); - } - } - - var ajaxError = function () { - alert("error"); - } - - this.isFirstAjax = false; - //caution: JSF submits inputs with empty names causing "WARNING: Parameters: Invalid chunk ignored." in Tomcat log - var params = {}; - params[this.componentId + ".ajax"] = "1"; - - rf.ajax(this.componentId, event, {parameters: params, error: ajaxError, complete:ajaxSuccess}); - }; - - // Add new properties and methods - $.extend(rf.ui.ComboBox.prototype, (function () { - return { - name:"CompoBox", - destroy: function () { - //TODO: add all unbind - rf.Event.unbind(rf.getDomElement(this.componentId+ID.ITEMS).parentNode, this.namespace); - $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.inputValue, this.getSelectedItemValue()); - }, - - selectPrevItem: function () { - this.selectItem(-1, true); - }, - selectNextItem: function () { - this.selectItem(1, true); - }, - selectPageUp: function () { - - }, - selectPageDown: function () { - - }, - onBeforeShow: function (event) { - }, - - changeValue: function (event, value) { - this.selectItem(); - - if (typeof value == "undefined") { - // called from show method, not actually value changed - if (this.items.length==0 && this.inputValue.length>=this.options.minChars && this.isFirstAjax) { - this.options.ajaxMode && callAjax.call(this, event); - } - return; - } - - // TODO: ajax call here if needed - if (( value.toLowerCase().indexOf(this.cache.key.toLowerCase())!=0 || this.inputValue.length==0) && - value.length>=this.options.minChars) { - this.inputValue = value; - this.options.ajaxMode && callAjax.call(this, event); - return; - } - - var newItems = this.cache.getItems(value); - this.items = $(newItems); - //TODO: works only with simple markup, not with <tr> - $(rf.getDomElement(this.componentId+ID.ITEMS)).empty().append(newItems); - this.index = -1; - this.inputValue = value; - if (this.options.selectFirst) { - this.selectItem(0, false, event.which == rf.KEYS.BACKSPACE); - } - }, - - getSelectedItemValue: function () { - if ( this.index>=0) { - return getData(this.items.eq(this.index))[0]; - } - return undefined; - }, - - onShow: function (event) { - if (this.items && this.items.length>0) { - //??TODO it's nessesary only if not changed value - if (this.options.selectFirst) { - this.selectItem(0); - } - } - }, - - onHide: function () { - this.selectItem(); - } - }; - })()); -})(jQuery, RichFaces); \ No newline at end of file Deleted: 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 2010-07-16 11:23:15 UTC (rev 18134) +++ root/ui-sandbox/inputs/trunk/combobox/src/main/resources/META-INF/resources/org.richfaces/SelectBase.js 2010-07-16 11:37:20 UTC (rev 18135) @@ -1,276 +0,0 @@ -// 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 { - onShow.call(this, 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; - //TODO: is it needed to chesk keys? - if (event.which == rf.KEYS.LEFT || event.which == rf.KEYS.RIGHT || flag) { - if (flag) { - this.changeValue(event, value); - this.currentValue = value; - onShow.call(this, event, true); - } - } - } - - var onShow = function (event, noChangeValue) { - !noChangeValue && this.changeValue(event); - this.show(event); - } - - - /*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 { - onShow.call(this, event); - } - 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: - //TODO draft code, merge with code from combobox.js - event.preventDefault(); - this.changeValue(event, this.getSelectedItemValue()); - rf.getDomElement(this.fieldId).blur(); - rf.Selection.setCaretTo(rf.getDomElement(this.fieldId)); - rf.getDomElement(this.fieldId).focus(); - /*if( selectCurrentItem() ) { - event.preventDefault(); - //TODO: bind form submit event handler to cancel form submit under the opera - //cancelSubmit = true; - return false; - }*/ - this.hide(); - return false; - 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.isVisible) { - if (this.onBeforeShow(event)!=false) { - $(rf.getDomElement(this.selectId)).setPosition({id: this.fieldId}, {type:"DROPDOWN", offset:[0,20]}).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) { - if (this.isVisible) { - 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 () { - return this.fieldId ? rf.getDomElement(this.fieldId).value : undefined;; - }, - getSelectedItemValue: function () { - } - /*setInputValue: function (value) { - this.currentValue = value; - rf.getDomElement(this.fieldId).value = value; - }*/ - - }; - })()); -})(jQuery, RichFaces); \ No newline at end of file