Author: abelevich Date: 2010-09-13 12:49:49 -0400 (Mon, 13 Sep 2010) New Revision: 19172 Modified: 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/inplaceBase.js 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.ecss 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/select.js branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml Log: select component js base class, apply markup changes, use inplaceInput as a base for the inpalceSelect 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-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2010-09-13 16:49:49 UTC (rev 19172) @@ -34,6 +34,7 @@ @ResourceDependency(name = "richfaces-selection.js"), @ResourceDependency(library="org.richfaces", name = "inplaceBase.js"), @ResourceDependency(library = "org.richfaces", name = "select.js"), + @ResourceDependency(library = "org.richfaces", name = "inplaceInput.js"), @ResourceDependency(library = "org.richfaces", name = "inplaceSelect.js"), @ResourceDependency(library = "org.richfaces", name = "inplaceSelect.ecss") }) public class InplaceSelectBaseRenderer extends InplaceInputBaseRenderer { @@ -115,8 +116,6 @@ writer.write("\u00a0"); } writer.endElement(HTML.SPAN_ELEM); - writer.startElement("br", inplaceSelect); - writer.endElement("br"); } } } Modified: 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 2010-09-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceBase.js 2010-09-13 16:49:49 UTC (rev 19172) @@ -26,7 +26,8 @@ rf.ui.InplaceBase = function(id, options) { $super.constructor.call(this, id); this.attachToDom(id); - + this.namespace = this.getNamespace() || "." + rf.Event.createNamespace(this.getName(), this.id); + this.editEvent = options.editEvent; this.noneCss = options.noneCss; this.changedCss = options.changedCss; @@ -49,11 +50,16 @@ var $super = rf.ui.InplaceBase.$super; $.extend(rf.ui.InplaceBase.prototype, ( function () { - var saved = false; + var isSaved = false; var useDefaultLabel = false; return { + getName: function() { + }, + getNamespace: function() { + }, + getValue: function() { }, @@ -83,13 +89,14 @@ this.setLabel(this.defaultLabel); useDefaultLabel = true; } - - if(this.isValueChanged()) { + + isSaved = true; + + if(this.isValueChanged()) { this.element.addClass(this.changedCss); } else { this.element.removeClass(this.changedCss); } - isSaved = true; this.__hide(); }, @@ -100,7 +107,7 @@ } this.setValue(text); isSaved = true; - this.onhide(); + this.__hide(); }, isValueSaved: function() { @@ -117,6 +124,7 @@ rf.Event.unbindScrollEventHandlers(this.scrollElements, this); this.scrollElements = null; } + this.onhide(); this.editContainer.addClass(this.noneCss); }, 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-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js 2010-09-13 16:49:49 UTC (rev 19172) @@ -205,7 +205,6 @@ 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)); @@ -231,6 +230,10 @@ name : "inplaceInput", + geName: function() { + return this.name; + }, + geNamespace: function() { return this.namespace; }, Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss 2010-09-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss 2010-09-13 16:49:49 UTC (rev 19172) @@ -12,7 +12,7 @@ } .rf-is-none { - display: none; + display: none !important; } .insel_font { @@ -29,18 +29,20 @@ padding-left : 3px; padding-right : 3px; } - + .insel_changed_state { + display : inline-block; background-image : "url(#{resource['org.richfaces:mark_changed.gif']})"; background-position : top left; background-repeat : no-repeat; } -.insel_edit_state { +.insel_edit_state{ position : absolute; top : 0px; left : 0px; width : 100px; + background-color : '#{richSkin.editBackgroundColor}'; } .insel_field { @@ -62,7 +64,7 @@ border-width : 1px; border-style : outset; border-color : '#{richSkin.panelBorderColor}'; - padding : 0px; + padding : 3px; margin : 0px; } @@ -74,7 +76,7 @@ border-width : 1px; border-style : inset; border-color : '#{richSkin.panelBorderColor}'; - padding : 0px; + padding : 3px; margin : 0px; } @@ -85,71 +87,66 @@ white-space : nowrap; } -.insel_list_cord { - position : absolute; +.insel_list_cord { + display : block; + /*font-size : 0px;*/ + position : relative; font-family:inherit; font-size : inherit; } -.insel_list_position { +.insel_list_position { + display : block; position : absolute; top: 0px; left: -1px; } .insel_list_decoration { + display : block; border-width : 1px; border-style : solid; border-color : '#{richSkin.panelBorderColor}'; padding : 0px; - display: inline-block; - width: 100%; + /*width: 100%;*/ background-color : '#{richSkin.editBackgroundColor}'; } -.insel_list_scroll { +.insel_list_scroll { + display : block; overflow : auto; overflow-x : hidden; - display: inline-block; - width: 100%; + /*height : 100px;*/ } -.insel_option { +.insel_option { + display : block; padding : 2px; white-space : nowrap; background-color : '#{richSkin.editBackgroundColor}'; cursor : default; - display : inline-block; - width : 100%; } -.insel_select { +.insel_select { + display : block; padding : 1px; - width : 100%; background-color: #DFE8F6; /*get from skin???*/ border-width : 1px; border-style : dotted; border-color : '#{richSkin.generalTextColor}'; } -.insel_select { - padding : 1px; - width : 100%; - background-color: #DFE8F6; - border-width : 1px; - border-style : dotted; - border-color : '#{richSkin.generalTextColor}'; -} - -.insel_btn_preposition { +.insel_btn_preposition { + display : block; position : absolute; - top : 0px; + top : -4px; right : 0px; wigth : 1px; height : 1px; } .insel_btn_position { + display : block; position : absolute; top : 0px; left : 0px; @@ -157,6 +154,7 @@ } .insel_btn_shadow { + display : block; position: relative; padding : 6px 6px 6px 6px; top : -6px; @@ -164,14 +162,15 @@ } .insel_shadow { - display: inline-block; - width: 100%; + display : block; position: relative; padding : 6px 6px 6px 6px; - top : -6px; left : -6px; + top : -6px; + left : -6px; } .insel_shadow_t { + display : block; background-image : "url(#{resource['org.richfaces:bg_shadow.png']})"; background-position : top left; position: absolute; @@ -180,7 +179,9 @@ bottom: 6px; left : 0px } + .insel_shadow_l { + display : block; background-image : "url(#{resource['org.richfaces:bg_shadow.png']})"; background-position : bottom left; position : absolute; @@ -189,7 +190,9 @@ left : 0px; right : 6px; } + .insel_shadow_r { + display : block; background : "url(#{resource['org.richfaces:bg_shadow.png']})"; background-position : bottom right; position : absolute; @@ -200,6 +203,7 @@ } .insel_shadow_b { + display : block; background : "url(#{resource['org.richfaces:bg_shadow.png']})"; background-position : right top; position: absolute; @@ -207,4 +211,4 @@ top: 0px; left : 6px; right : 0px; -} \ 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-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2010-09-13 16:49:49 UTC (rev 19172) @@ -4,12 +4,19 @@ rf.ui.InplaceSelect = function(id, options) { $super.constructor.call(this, id, options) - this.select = new rf.ui.Select(options.listCord, options); + this.select = new rf.ui.Select(options.listCord, this, options); + 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 : ""; } - rf.ui.InplaceBase.extend(rf.ui.InplaceSelect); + rf.ui.InplaceInput.extend(rf.ui.InplaceSelect); + $.extend(rf.ui.InplaceSelect, rf.ui.SelectListener); + var $super = rf.ui.InplaceSelect.$super; - $.extend(rf.ui.InplaceSelect.prototype, ( function () { var openPopup = false; @@ -17,6 +24,14 @@ return{ name : "inplaceSelect", + geName: function() { + return this.name; + }, + + geNamespace: function() { + return this.namespace; + }, + onshow: function() { if(openPopup) { this.select.show(); @@ -30,7 +45,19 @@ onhide: function() { this.select.hide(); openPopup = false; - } + }, + + processItem: function(event, element) { + var key = element.text(); + this.setValue(key); + this.save(); + }, + + __blurHandler: function(e) { + return false; + }, + + } })()); Modified: 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 2010-09-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/select.js 2010-09-13 16:49:49 UTC (rev 19172) @@ -1,14 +1,22 @@ (function ($, rf) { rf.ui = rf.ui || {}; - - rf.ui.Select = function(id, options) { + + var INTERFACE = { + SelectListener : { + processItem: function(event, element){} + } + }; + + rf.ui.Select = function(id, listener, 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.selectListener = listener; + + this.select.bind("blur", $.proxy(this.__blurHandler, this)); this.itemsCord.bind("mouseover", $.proxy(this.__mouseHandler, this)); this.itemsCord.bind("click", $.proxy(this.__mouseHandler, this)); }; @@ -20,6 +28,15 @@ var processed = null; + var isSelectListener = function(obj) { + for (var method in INTERFACE.SelectListener) { + if ( (typeof obj[method] != typeof INTERFACE.SelectListener[method]) ) { + return false; + } + } + return true; + }; + return{ name : "select", @@ -28,14 +45,25 @@ }, hide: function() { - this.select.addClass(this.noneCss); + this.select.addClass(this.noneCss); }, processItem: function(event, element) { - + if(isSelectListener(this.selectListener)) { + this.selectListener.processItem(event, element); + } }, + + __getCurrentElement: function() { + return processed; + }, + + __blurHandler: function(e) { + processItem(e, processed); + return false; + }, - __mouseHandler: function(event) { + __mouseHandler: function(event) { var element = $(event.target).closest("."+this.itemCss, event.currentTarget); if (event&& element) { if(event.type == 'mouseover') { @@ -47,10 +75,11 @@ } if(event.type == 'click') { - //TODO: process click here + this.processItem(event, element); } - } - } + } + return false; + }, } })()); 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-13 13:21:57 UTC (rev 19171) +++ branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml 2010-09-13 16:49:49 UTC (rev 19172) @@ -77,8 +77,7 @@ </span> </span> </c:if> - <br/> - <span id="#{clientId}List" class="insel_list_cord rf-is-none"> + <span id="#{clientId}List" class="rf-is-none insel_list_cord"> <span class="insel_list_position" style="width: #{component.attributes['listWidth']}"> <span class="insel_shadow"> <span class="insel_shadow_t"></span>