Author: pyaschenko Date: 2010-06-22 11:36:05 -0400 (Tue, 22 Jun 2010) New Revision: 17658 Added: 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 Removed: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js Modified: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 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-21 23:53:25 UTC (rev 17657) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 2010-06-22 15:36:05 UTC (rev 17658) @@ -10,7 +10,8 @@ <script type="text/javascript" src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\richfaces-event.js "></script> <script type="text/javascript" src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\richfaces-base-component.js "></script> <script type="text/javascript" src="richfaces-selection.js"></script> - <script type="text/javascript" src="autocomplete.js"></script> + <script type="text/javascript" src="SelectBase.js"></script> + <script type="text/javascript" src="ComboBox.js"></script> <style> * {font-size : 11px; font-family : verdana; color : #000000} @@ -70,9 +71,9 @@ </div> </div> <script type="text/javascript"> - new RichFaces.ui.AutoComplete("myComboList", "myComboInput", {buttonId:'myComboButton'}); + new RichFaces.ui.ComboBox("myCombo", "myComboInput", {buttonId:'myComboButton'}); </script> -</div> +</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 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 </div> Added: 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 (rev 0) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/ComboBox.js 2010-06-22 15:36:05 UTC (rev 17658) @@ -0,0 +1,58 @@ +(function ($, rf) { + + rf.ui = rf.ui || {}; + // Constructor definition + 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); + $p.attachToDom(componentId); + this.componentId = componentId; + this.options = $.extend({}, defaultOptions, options); + //this.currentValue = rf.getDomElement(this.fieldId).value; + this.index = -1; + }; + + 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 = { + }; + + // Add new properties and methods + $.extend(rf.ui.SelectBase.prototype, (function () { + return { + name:"CompoBox", + destroy: function () { + $super.destroy.call(this); + }, + getNamespace: function () { + return this.namespace; + }, + + selectPrevItem: function () { + + }, + selectNextItem: function () { + + }, + selectPageUp: function () { + + }, + selectPageDown: function () { + + }, + prepareToShow: function (event) { + + }, + + onChange: function () { + } + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Copied: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js (from rev 17636, root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js) =================================================================== --- root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js (rev 0) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/SelectBase.js 2010-06-22 15:36:05 UTC (rev 17658) @@ -0,0 +1,245 @@ +// 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.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 = rf.getDomElement(this.fieldId).value; + 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 = { + }; + + 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); + 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 = rf.getDomElement(this.fieldId).value; + var flag = value != this.currentValue; + if (event.which == KEYS.LEFT || event.which == KEYS.RIGHT || flag) { + // TODO: call onchange + if (flag && !this.isVisible) { + this.show(); + } + if (flag) { + this.currentValue = value; + } + } + } + + + /*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 KEYS.UP: + event.preventDefault(); + if (this.isVisible) { + this.selectPrevItem(); + } + break; + case KEYS.DOWN: + event.preventDefault(); + if (this.isVisible) { + this.selectNextItem(); + } else { + this.show(); + } + break; + case KEYS.PAGEUP: + event.preventDefault(); + if (this.isVisible) { + this.selectPageUp(); + } + break; + case KEYS.PAGEDOWN: + event.preventDefault(); + if (this.isVisible) { + this.selectPageDown(); + } + break; + case KEYS.TAB: + case KEYS.RETURN: + event.preventDefault(); + /*if( selectCurrent() ) { + event.preventDefault(); + //TODO: bind form submit event handler to cancel form submit under the opera + cancelSubmit = true; + return false; + }*/ + this.hide(); + break; + case 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); + } + } + break; + } + } + + // Add new properties and methods + $.extend(rf.ui.SelectBase.prototype, (function () { + return { + name:"SelectBase", + show: function (event) { + if (this.prepareToShow(event)!=false) { + $(rf.getDomElement(this.selectId)).show(); + this.isVisible = true; + this.scrollElements = rf.Event.bindScrollEventHandlers(this.selectId, this.hide, this, this.namespace); + } + }, + hide: function (event) { + rf.Event.unbindScrollEventHandlers(this.scrollElements, this); + $(rf.getDomElement(this.selectId)).hide(); + this.isVisible = false; + }, + 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 () { + }, + prepareToShow: function () { + } + }; + })()); +})(jQuery, RichFaces); \ No newline at end of file Deleted: root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js =================================================================== --- root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js 2010-06-21 23:53:25 UTC (rev 17657) +++ root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js 2010-06-22 15:36:05 UTC (rev 17658) @@ -1,226 +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.ui = rf.ui || {}; - // Constructor definition - rf.ui.AutoComplete = function(componentId, fieldId, options) { - // call constructor of parent class - $super.constructor.call(this, componentId); - $p.attachToDom(componentId); - this.componentId = componentId; - this.fieldId = fieldId; - this.options = $.extend({}, defaultOptions, options); - this.namespace = "."+rf.Event.createNamespace(this.name, this.componentId); - 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.AutoComplete, $p); - - // define super class link - var $super = rf.ui.AutoComplete.$super; - - var defaultOptions = { - }; - - var KEYS = { - BACKSPACE: 8, - TAB: 9, - RETURN: 13, - ESC: 27, - PAGEUP: 33, - PAGEDOWN: 34, - UP: 38, - DOWN: 40, - DEL: 46 - }; - - 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.componentId, 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 () { - 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 selectPrevItem = function () { - }; - var selectNextItem = function () { - }; - var selectPageUp = function () { - }; - var selectPageDown = function () { - }; - - var onKeyDown = function (event) { - switch(event.which) { - case KEYS.UP: - event.preventDefault(); - if (this.isVisible) { - selectPrevItem(); - } - break; - case KEYS.DOWN: - event.preventDefault(); - if (this.isVisible) { - selectNextItem(); - } - break; - case KEYS.PAGEUP: - event.preventDefault(); - if (this.isVisible) { - selectPageUp(); - } - break; - case KEYS.PAGEDOWN: - event.preventDefault(); - if (this.isVisible) { - selectPageDown(); - } - break; - case KEYS.TAB: - case KEYS.RETURN: - event.preventDefault(); - /*if( selectCurrent() ) { - event.preventDefault(); - //TODO: bind form submit event handler to cancel form submit under the opera - cancelSubmit = true; - return false; - }*/ - this.hide(); - break; - case 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);}, this.options.changeDelay) - } else { - onChange.call(this); - } - } - break; - } - } - - // Add new properties and methods - $.extend(rf.ui.AutoComplete.prototype, (function () { - return { - name:"AutoComplete", - show: function (event) { - $(rf.getDomElement(this.componentId)).show(); - this.isVisible = true; - this.scrollElements = rf.Event.bindScrollEventHandlers(this.componentId, this.hide, this); - }, - hide: function (event) { - rf.Event.unbindScrollEventHandlers(this.scrollElements, this); - $(rf.getDomElement(this.componentId)).hide(); - this.isVisible = false; - }, - destroy: function () { - rf.Event.unbindById(this.options.buttonId, this.namespace); - rf.Event.unbindById(this.fieldId, this.namespace); - $super.destroy.call(this); - }, - getNamespace: function () { - return this.namespace; - } - }; - })()); -})(jQuery, RichFaces); \ No newline at end of file