Author: abelevich Date: 2010-09-10 12:23:58 -0400 (Fri, 10 Sep 2010) New Revision: 19155 Added: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceBase.js branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/select.js Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml Log: implement base class for the inplaces, add base class for the select components Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java =================================================================== --- branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-09-10 13:33:45 UTC (rev 19154) +++ branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-09-10 16:23:58 UTC (rev 19155) @@ -48,6 +48,7 @@ @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "richfaces.js"), @ResourceDependency(name = "richfaces-event.js"), @ResourceDependency(name = "richfaces-base-component.js"), + @ResourceDependency(library="org.richfaces", name = "inplaceBase.js"), @ResourceDependency(library="org.richfaces", name = "inplaceInput.js"), @ResourceDependency(library="org.richfaces", name = "inplaceInput.ecss") }) public class InplaceInputBaseRenderer extends InputRendererBase { Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java =================================================================== --- branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2010-09-10 13:33:45 UTC (rev 19154) +++ branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2010-09-10 16:23:58 UTC (rev 19155) @@ -32,17 +32,20 @@ @ResourceDependency(name = "richfaces-event.js"), @ResourceDependency(name = "richfaces-base-component.js"), @ResourceDependency(name = "richfaces-selection.js"), - @ResourceDependency(library = "org.richfaces", name = "inplaceInput.js"), - @ResourceDependency(library = "org.richfaces", name = "AutocompleteBase.js"), - @ResourceDependency(library = "org.richfaces", name = "Autocomplete.js"), + @ResourceDependency(library="org.richfaces", name = "inplaceBase.js"), + @ResourceDependency(library = "org.richfaces", name = "select.js"), @ResourceDependency(library = "org.richfaces", name = "inplaceSelect.js"), @ResourceDependency(library = "org.richfaces", name = "inplaceSelect.ecss") }) public class InplaceSelectBaseRenderer extends InplaceInputBaseRenderer { - public static final String OPTIONS_ITEM_CLASS = "itemClass"; + public static final String OPTIONS_ITEM_CLASS = "itemCss"; - public static final String OPTIONS_SELECTED_ITEM_CLASS = "selectedItemClass"; - + public static final String OPTIONS_SELECT_ITEM_CLASS = "selectItemCss"; + + public static final String OPTIONS_LIST_CORD = "listCord"; + + public static final String OPTIONS_ITEMS_CORD = "itemsCord"; + protected static final class ClientSelectItem implements ScriptString { private String label; private String convertedValue; @@ -90,7 +93,10 @@ @Override public void addToOptions(FacesContext facesContext, UIComponent component, Map<String, Object> options) { options.put(OPTIONS_ITEM_CLASS, "insel_option"); - options.put(OPTIONS_SELECTED_ITEM_CLASS, "insel_select"); + options.put(OPTIONS_SELECT_ITEM_CLASS, "insel_select"); + String clientId = component.getClientId(facesContext); + options.put(OPTIONS_LIST_CORD, clientId + "List"); + options.put(OPTIONS_ITEMS_CORD, clientId + "Items"); } public void encodeOptions(FacesContext facesContext, UIComponent component, List<ClientSelectItem> clientSelectItems) throws IOException { Added: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceBase.js =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceBase.js (rev 0) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceBase.js 2010-09-10 16:23:58 UTC (rev 19155) @@ -0,0 +1,150 @@ +$.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, "scroll"+component.getNamespace()); + } +}); + + +(function ($, rf) { + + rf.ui = rf.ui || {}; + + rf.ui.InplaceBase = function(id, options) { + $super.constructor.call(this, id); + this.attachToDom(id); + + this.editEvent = options.editEvent; + this.noneCss = options.noneCss; + this.changedCss = options.changedCss; + this.showControls = options.showControls; + this.defaultLabel = options.defaultLabel; + + this.element = $(document.getElementById(id)); + this.editContainer = $(document.getElementById(options.editContainer)); + + this.element.bind(this.editEvent, $.proxy(this.__editHandler, this)); + if(this.showControls) { + this.okbtn = $(document.getElementById(options.okbtn)); + this.cancelbtn = $(document.getElementById(options.cancelbtn)); + this.okbtn.bind("mousedown", $.proxy(this.__saveBtnHandler, this)); + this.cancelbtn.bind("mousedown", $.proxy(this.__cancelBtnHandler, this)); + } + }; + + rf.BaseComponent.extend(rf.ui.InplaceBase); + var $super = rf.ui.InplaceBase.$super; + + $.extend(rf.ui.InplaceBase.prototype, ( function () { + var saved = false; + var useDefaultLabel = false; + + return { + + getValue: function() { + }, + + setValue: function(value){ + }, + + getLabel: function() { + }, + + setLabel: function(value) { + }, + + onshow: function(){ + }, + + onhide: function() { + }, + + getNamespace: function() { + }, + + save: function() { + var value = this.getValue() + if(value.length > 0) { + this.setLabel(value); + } else { + this.setLabel(this.defaultLabel); + useDefaultLabel = true; + } + + if(this.isValueChanged()) { + this.element.addClass(this.changedCss); + } else { + this.element.removeClass(this.changedCss); + } + isSaved = true; + this.__hide(); + }, + + cancel: function(){ + var text = ""; + if(!useDefaultLabel) { + text = this.getLabel() + } + this.setValue(text); + isSaved = true; + this.onhide(); + }, + + isValueSaved: function() { + return isSaved; + }, + + __show: function() { + this.scrollElements = rf.Event.bindScrollEventHandlers(this.id, this.__scrollHandler, this); + this.onshow(); + }, + + __hide: function() { + if(this.scrollElements) { + rf.Event.unbindScrollEventHandlers(this.scrollElements, this); + this.scrollElements = null; + } + this.editContainer.addClass(this.noneCss); + }, + + __editHandler: function(e) { + isSaved = false; + this.editContainer.removeClass(this.noneCss); + this.__show(); + }, + + __saveBtnHandler: function(e) { + this.save(); + return false; + }, + + __cancelBtnHandler: function(e) { + this.cancel(); + return false; + }, + + __scrollHandler: function(e) { + this.cancel(); + }, + + destroy: function () { + $super.destroy.call(this); + } + } + + })()); + +})(jQuery, window.RichFaces); Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js 2010-09-10 13:33:45 UTC (rev 19154) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js 2010-09-10 16:23:58 UTC (rev 19155) @@ -1,4 +1,6 @@ // TODO: remove when these functions will be moved to the RichFaces.Event + +/* $.extend(RichFaces.Event, { bindScrollEventHandlers: function(element, handler, component) { var elements = []; @@ -24,13 +26,12 @@ rf.ui = rf.ui || {}; rf.ui.InplaceInput = function(id, options) { - /*TODO: use defaultOptions*/ + $super.constructor.call(this, id); this.attachToDom(id); this.namespace = this.getNamespace() || "." + rf.Event.createNamespace(this.getName(), this.id); - this.currentState = options.state; this.editEvent = options.editEvent; this.noneCss = options.noneCss; this.changedCss = options.changedCss; @@ -77,8 +78,6 @@ return { name : "inplaceInput", -/****************** public methods *****************************************/ - getName: function() { return this.name; }, @@ -132,8 +131,6 @@ return this.input.val(); }, -/****************** private methods *****************************************/ - __saveBtnHandler: function(e) { this.save(); return false; @@ -169,11 +166,9 @@ __keydownHandler: function(e) { switch(e.keyCode) { - /*Esc*/ case 27: this.cancel(); break; - /*Enter*/ case 13: this.save(); return false; @@ -202,3 +197,99 @@ })(jQuery, window.RichFaces); +*/ + +(function ($, rf) { + + rf.ui = rf.ui || {}; + + rf.ui.InplaceInput = function(id, options) { + $super.constructor.call(this, id, options); + this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.id); + + this.input = $(document.getElementById(options.input)); + this.label = $(document.getElementById(options.label)); + + var label = this.label.text(); + var inputLabel = this.input.val(); + this.initialValue = (label == inputLabel) ? label : ""; + + this.input.bind("focus", $.proxy(this.__editHandler, this)); + this.input.bind("change", $.proxy(this.__changeHandler, this)); + this.input.bind("blur", $.proxy(this.__blurHandler, this)); + this.input.bind("keydown", $.proxy(this.__keydownHandler, this)); + + this.focusElement = $(document.getElementById(options.focusElement)); + }; + + rf.ui.InplaceBase.extend(rf.ui.InplaceInput); + var $super = rf.ui.InplaceInput.$super; + + $.extend(rf.ui.InplaceInput.prototype, ( function () { + + return { + + name : "inplaceInput", + + geNamespace: function() { + return this.namespace; + }, + + __keydownHandler: function(e) { + switch(e.keyCode) { + case 27: + this.cancel(); + break; + case 13: + this.save(); + return false; + } + }, + + __blurHandler: function(e) { + if(!this.isValueSaved()) { + this.save(); + } + return false; + }, + + __changeHandler: function(e) { + if(!this.isValueSaved()) { + this.save(); + } + }, + + getValue: function() { + return this.input.val(); + }, + + setValue: function(value){ + this.input.val(value); + }, + + getLabel: function() { + return this.label.text(); + }, + + setLabel: function(value) { + this.label.text(value); + }, + + isValueChanged: function () { + return (this.getValue() != this.initialValue); + }, + + onshow: function(){ + this.input.unbind("focus", this.__editHandler); + this.input.focus(); + this.input.bind("focus", $.proxy(this.__editHandler, this)); + }, + + onhide: function() { + this.focusElement.focus(); + } + + } + })()); + +})(jQuery, window.RichFaces); \ No newline at end of file Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2010-09-10 13:33:45 UTC (rev 19154) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2010-09-10 16:23:58 UTC (rev 19155) @@ -4,29 +4,33 @@ rf.ui.InplaceSelect = function(id, options) { $super.constructor.call(this, id, options) - this.proxy = new rf.ui.Autocomplete(id, options.input, defaultOptions); + this.select = new rf.ui.Select(options.listCord, options); } - rf.ui.InplaceInput.extend(rf.ui.InplaceSelect); + rf.ui.InplaceBase.extend(rf.ui.InplaceSelect); var $super = rf.ui.InplaceSelect.$super; - var defaultOptions = { - selectedItemClass:'insel_select', - itemClass:'insel_option', - autofill:false, - minChars:0, - selectFirst:false, - ajaxMode:false, - lazyClientMode:false, - attachToBody:true, - filterFunction: function () {return true;} - }; - - $.extend(rf.ui.InplaceSelect.prototype, ( function () { + + var openPopup = false; return{ - name : "inplaceSelect" + name : "inplaceSelect", + + onshow: function() { + if(openPopup) { + this.select.show(); + } + + if(!openPopup) { + openPopup = true; + } + }, + + onhide: function() { + this.select.hide(); + openPopup = false; + } } })()); Added: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/select.js =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/select.js (rev 0) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/select.js 2010-09-10 16:23:58 UTC (rev 19155) @@ -0,0 +1,57 @@ +(function ($, rf) { + + rf.ui = rf.ui || {}; + + rf.ui.Select = function(id, options) { + this.select = $(document.getElementById(id)); + this.itemsCord = $(document.getElementById(options.itemsCord)); + this.selectItemCss = options.selectItemCss; + this.itemCss = options.itemCss; + this.noneCss = options.noneCss; + + this.itemsCord.bind("mouseover", $.proxy(this.__mouseHandler, this)); + this.itemsCord.bind("click", $.proxy(this.__mouseHandler, this)); + }; + + rf.BaseComponent.extend(rf.ui.Select); + var $super = rf.ui.Select.$super; + + $.extend(rf.ui.Select.prototype, ( function () { + + var processed = null; + + return{ + name : "select", + + show: function() { + this.select.removeClass(this.noneCss); + }, + + hide: function() { + this.select.addClass(this.noneCss); + }, + + processItem: function(event, element) { + + }, + + __mouseHandler: function(event) { + var element = $(event.target).closest("."+this.itemCss, event.currentTarget); + if (event&& element) { + if(event.type == 'mouseover') { + if(processed) { + processed.removeClass(this.selectItemCss); + } + element.addClass(this.selectItemCss); + processed = element; + } + + if(event.type == 'click') { + //TODO: process click here + } + } + } + } + })()); + +})(jQuery, window.RichFaces); Modified: branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml =================================================================== --- branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml 2010-09-10 13:33:45 UTC (rev 19154) +++ branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml 2010-09-10 16:23:58 UTC (rev 19155) @@ -78,7 +78,7 @@ </span> </c:if> <br/> - <span id="#{clientId}List" class="insel_list_cord"> + <span id="#{clientId}List" class="insel_list_cord rf-is-none"> <span class="insel_list_position" style="width: #{component.attributes['listWidth']}"> <span class="insel_shadow"> <span class="insel_shadow_t"></span>