Author: vmolotkov Date: 2008-02-11 12:02:53 -0500 (Mon, 11 Feb 2008) New Revision: 6011 Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx Log: inplaceInput functionality Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-11 15:55:43 UTC (rev 6010) +++ trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-11 17:02:53 UTC (rev 6011) @@ -67,6 +67,11 @@ <classname>java.lang.String</classname> <defaultvalue><![CDATA["click"]]></defaultvalue> </property> + <property> + <name>controlsPosition</name> + <classname>java.lang.String</classname> + <defaultvalue><![CDATA["right"]]></defaultvalue> + </property> <property> <name>oneditactivation</name> Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-11 15:55:43 UTC (rev 6010) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-11 17:02:53 UTC (rev 6011) @@ -29,7 +29,7 @@ } .rich-inplace-edit { - /*position:relative;*/ + position:relative; width:100px; } @@ -43,6 +43,37 @@ padding:0px 0px 0px 3px; width:100px; } + +/* mock-up styles */ + +*{font-family : verdana; font-size:11px;} +body{padding : 30px;} +fieldset{padding : 30px; border : 1px solid #c0c0c0;} +legend{font-weight : bold} + + + +.is_default_state{white-space : nowrap; background-color : #f1f1f1; border-bottom : 1px dashed #000000; padding-left : 3px; padding-right : 3px;} +.is_changed_state{background-image:url(images/mark_open.gif); background-position : top left; background-repeat : no-repeat;} +.is_edit_state{position : relative; width : 100px;} +.is_field{background : #FFF281; padding : 0px 0px 0px 3px; border : 0px; margin : 0px; width : 100px; position : absolute; top:0px; left : 0px;} +.is_btn{ + background : url(images/bg_btn.png) #FFFFFF; + border : 1px outset #BED6F8; + padding : 0px; + margin : 0px;} +.is_btn_press{ + background : url(images/bg_press.png) #FFFFFF; + border : 1px inset #BED6F8; + padding : 0px; + margin : 0px;} +.is_btn_set{ /*position : absolute; top:0px; left : 100px;*/ white-space : nowrap} +.is_shadow{ top:-7; left:-5; position : absolute;} +.is_shadow_size{ width : 36px; height : 26px;} +.is_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} +.is_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} +.is_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} +.is_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} ]]> </f:verbatim> Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-11 15:55:43 UTC (rev 6010) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-11 17:02:53 UTC (rev 6011) @@ -4,7 +4,7 @@ Richfaces.InplaceInput.prototype = { - initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes) { + initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes, barParams) { this.inplaceInput = $(clientId); this.tempValueKeeper = $(temValueKeepId); this.valueKeeper = $(valueKeepId); @@ -17,6 +17,13 @@ this.currentState = Richfaces.InplaceInput.STATES[0]; + this.initDimensions(); + if (this.attributes.showControls) { + this.bar = new Richfaces.InplaceInputBar(barParams[0], barParams[1], barParams[2], barParams[3], + this.attributes.controlsPosition, + {width: this.INPUT_WIDTH, height: this.INPUT_HEIGHT}, + this.inputProcessing, this.cancel); + } this.initHandlers(); this.initEvents(); }, @@ -34,6 +41,18 @@ } }, + initDimensions : function() { + + this.valueKeeper.style.visibility = "hidden"; + this.valueKeeper.show(); + + this.INPUT_WIDTH = this.valueKeeper.offsetWidth; + this.INPUT_HEIGHT = this.valueKeeper.offsetHeight; + + this.valueKeeper.hide(); + this.valueKeeper.style.visibility = "visible"; + }, + /* * HANDLERS */ @@ -61,20 +80,9 @@ }, tmpValueBlurHandler : function() { - var userValue = this.tempValueKeeper.value; - if (this.events.onviewactivation) { - this.inplaceInput.fire("rich:onviewactivation", {}); + if (!this.attributes.apllyFromControlsOnly) { + this.inputProcessing(); } - this.endEditableState(); - this.applyUserValue(); - if (this.valueKeeper.value != userValue) { - this.startChangedState(); - } else { - this.startViewState(); - } - if (this.events.onviewactivated) { - this.inplaceInput.fire("rich:onviewactivated", {}); - } }, /** @@ -85,6 +93,9 @@ }, endEditableState : function() { + if (this.bar) { + this.bar.hide(); + } this.tempValueKeeper.hide(); }, @@ -94,6 +105,9 @@ startEditableState : function() { this.currentState = Richfaces.InplaceInput.STATES[1]; + if (this.bar) { + this.bar.show(); + } this.inplaceInput.className = this.classes.COMPONENT.EDITABLE; this.tempValueKeeper.show(); this.tempValueKeeper.focus(); @@ -117,27 +131,54 @@ /** * UTILITIES */ - applyUserValue : function() { + + cancel : function() { + + }, + + inputProcessing : function() { + var userValue = this.tempValueKeeper.value; + var value = this.valueKeeper.value; + if (this.events.onviewactivation) { + this.inplaceInput.fire("rich:onviewactivation", {}); + } + this.endEditableState(); + //this.applyUserValue(); + if (userValue == "") { + this.setDefaultText(); + this.valueKeeper.value = ""; + this.startViewState(); + } else if (userValue != value) { + this.currentText = userValue; + this.valueKeeper.value = userValue; + this.startChangedState(); + } else { + this.startViewState(); + } + if (this.events.onviewactivated) { + this.inplaceInput.fire("rich:onviewactivated", {}); + } + }, + + /*applyUserValue : function() { var newValue = this.tempValueKeeper.value; if (newValue == "") { - this.setDefaultText(); - this.valueKeeper.value = ""; } else if (newValue != this.valueKeeper.value) { this.currentText = newValue; this.valueKeeper.value = newValue; } - }, + },*/ setDefaultText : function() { this.currentText = this.attributes.defaultLabel; }, deleteViewArtifacts : function () { - this.inplaceInput.removeChild(this.inplaceInput.childNodes[2]); + this.inplaceInput.removeChild(this.inplaceInput.childNodes[3]); }, getCurrentText : function() { - return this.inplaceInput.childNodes[2]; + return this.inplaceInput.childNodes[3]; }, createNewText : function(text) { @@ -146,6 +187,71 @@ }; +Richfaces.InplaceInputBar = Class.create(); +Richfaces.InplaceInputBar.prototype = { + initialize : function(barId, okId, cancelId, buttonsPanelId, position, intDims, okHandler, cancelHandler) { + this.bar = $(barId); + this.ok = $(okId); + this.cancel = $(cancelId); + this.bsPanel = $(buttonsPanelId); + + this.position = position; + this.initHandlers(okHandler, cancelHandler); + this.initDimensions(); + this.positioning(intDims); + }, + + initHandlers : function(okHandler, cancelHandler) { + //this.ok.observe("click", function(e){okHandler}.bindAsEventListener(this)); + //this.cancel.observe("click", function(e){cancelHandler}.bindAsEventListener(this)); + }, + + initDimensions : function() { + + /*this.bar.style.visibility = "hidden"; + this.bar.show();*/ + + //var dim = this.bsPanel.getDimensions(); + this.BAR_WIDTH = 28; + this.BAR_HEIGHT = 12; + + /*this.bar.hide(); + this.bar.style.visibility = "visible";*/ + }, + + show : function() { + this.bar.show(); + }, + + hide : function() { + this.bar.hide(); + }, + + positioning : function(intDims) { + this.bar.style.position = "absolute"; + this.bsPanel.style.position = "relative"; + var bs = this.bar.style; + switch (this.position) { + case "top" : + bs.top = -this.BAR_HEIGHT + "px"; + bs.left = "0px"; + break; + case "bottom" : + bs.top = intDims.height + "px"; + bs.left = "0px"; + break; + case "left" : + bs.top = "0px"; + bs.left = -this.BAR_WIDTH + "px"; + break; + case "reight" : + bs.top = "0px"; + bs.left = intDims.width + "px"; + break; + } + } +}; + Richfaces.InplaceInput.STATES = [0, 1, 2];// 0 - view, 1- editable, 2 - changed Richfaces.InplaceInput.CLASSES = { COMPONENT : {CHANGED : "rich-inplace rich-inplace-changed", Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 15:55:43 UTC (rev 6010) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 17:02:53 UTC (rev 6011) @@ -42,22 +42,50 @@ size='#{component.attributes["inputSize"]}' maxlength='#{component.attributes["inputMaxLength"]}' minlength='#{component.attributes["inputMinLength"]}' + autocomplete="off" value='#{fieldValue}'/> <input id='#{clientId}value' type='hidden' value='#{fieldValue}'/> + <div id="#{clientId}bar" class="is_btn_set" style="display:none;"> + <div class="is_shadow"> + <table class="is_shadow_size" cellspacing="0" cellpadding="0" border="0"> + <tbody> + <tr> + <td class="is_shadow_tl"> + <img width="10" height="1" border="0" alt="" src="/inplaceInput-sample/images/spacer.gif"/> + <br/> + </td> + <td class="is_shadow_tr"> + </td> + </tr> + <tr> + </tr> + </tbody> + </table> + </div> + <div id="#{clientId}buttons"> + <input id="#{clientId}ok" class="is_btn" type="image" onmouseup="this.className='is_btn'" + onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" + src="/inplaceInput-sample/images/ico_ok.gif"/> + <input id="#{clientId}cancel" class="is_btn" type="image" onmouseup="this.className='is_btn'" + onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" + src="/inplaceInput-sample/images/ico_cancel.gif"/> + </div> + </div> #{value} </span> <script type="text/javascript"> var attributes = {defaultLabel : '#{component.attributes["defaultLabel"]}', - showControls : '#{component.attributes["showControls"]}', - apllyFromControlsOnly : '#{component.attributes["apllyFromControlsOnly"]}', + showControls : #{component.attributes["showControls"]}, + apllyFromControlsOnly : #{component.attributes["apllyFromControlsOnly"]}, editEvent : '#{component.attributes["editEvent"]}', - selectOnEdit : '#{component.attributes["selectOnEdit"]}'}; + selectOnEdit : #{component.attributes["selectOnEdit"]}, + controlsPosition : '#{component.attributes["controlsPosition"]}'}; var events = {oneditactivation : #{this:getAsEventHandler(context, component, "oneditactivation")}, onviewactivation : #{this:getAsEventHandler(context, component, "onviewactivation")}, oneditactivated : #{this:getAsEventHandler(context, component, "oneditactivated")}, onviewactivated : #{this:getAsEventHandler(context, component, "onviewactivated")}}; - - var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events, Richfaces.InplaceInput.CLASSES); + + var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events, Richfaces.InplaceInput.CLASSES, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons']); </script> </f:root> \ No newline at end of file