1 (function ($, rf) { 2 3 rf.ui = rf.ui || {}; 4 5 rf.ui.InplaceInput = function(id, options) { 6 var mergedOptions = $.extend({}, defaultOptions, options); 7 $super.constructor.call(this, id, mergedOptions); 8 this.label = $(document.getElementById(id + "Label")); 9 var labelText = this.label.text(); 10 var inputLabel = this.__getValue(); 11 this.initialLabel = (labelText == inputLabel) ? labelText : ""; 12 this.useDefaultLabel = labelText != inputLabel 13 this.saveOnBlur = mergedOptions.saveOnBlur; 14 this.showControls = mergedOptions.showControls; 15 this.getInput().bind("focus", $.proxy(this.__editHandler, this)); 16 if (this.showControls) { 17 var btnContainer = document.getElementById(id + "Btn"); 18 if (btnContainer) { 19 btnContainer.tabIndex = -1; 20 } 21 this.okbtn = $(document.getElementById(id + "Okbtn")); 22 this.cancelbtn = $(document.getElementById(id + "Cancelbtn")); 23 this.okbtn.bind("mousedown", $.proxy(this.__saveBtnHandler, this)); 24 this.cancelbtn.bind("mousedown", $.proxy(this.__cancelBtnHandler, this)); 25 } 26 }; 27 28 rf.ui.InplaceBase.extend(rf.ui.InplaceInput); 29 var $super = rf.ui.InplaceInput.$super; 30 31 var defaultOptions = { 32 defaultLabel: "", 33 saveOnBlur: true, 34 showControl: true, 35 noneCss: "rf-ii-none", 36 readyCss: "rf-ii", 37 editCss: "rf-ii-act", 38 changedCss: "rf-ii-chng" 39 }; 40 41 $.extend(rf.ui.InplaceInput.prototype, ( function () { 42 43 return { 44 45 name : "inplaceInput", 46 defaultLabelClass : "rf-ii-dflt-lbl", 47 48 getName: function() { 49 return this.name; 50 }, 51 52 getNamespace: function() { 53 return this.namespace; 54 }, 55 56 __keydownHandler: function(e) { 57 this.tabBlur = false; 58 switch (e.keyCode || e.which) { 59 case rf.KEYS.ESC: 60 e.preventDefault(); 61 this.cancel(); 62 this.onblur(e); 63 break; 64 case rf.KEYS.RETURN: 65 e.preventDefault(); 66 this.save(); 67 this.onblur(e); 68 break; 69 case rf.KEYS.TAB: 70 this.tabBlur = true; 71 break; 72 } 73 }, 74 75 __blurHandler: function(e) { 76 this.onblur(e); 77 }, 78 79 __isSaveOnBlur: function() { 80 return this.saveOnBlur; 81 }, 82 83 __setInputFocus: function() { 84 this.getInput().unbind("focus", this.__editHandler); 85 this.getInput().focus(); 86 }, 87 88 __saveBtnHandler: function(e) { 89 this.cancelButton = false; 90 this.save(); 91 this.onblur(e); 92 }, 93 94 __cancelBtnHandler: function(e) { 95 this.cancelButton = true; 96 this.cancel(); 97 this.onblur(e); 98 }, 99 100 __editHandler: function(e) { 101 $super.__editHandler.call(this, e); 102 this.onfocus(e); 103 }, 104 105 getLabel: function() { 106 return this.label.text(); 107 }, 108 109 setLabel: function(value) { 110 this.label.text(value); 111 if (value == this.defaultLabel) { 112 this.label.addClass(this.defaultLabelClass); 113 } else { 114 this.label.removeClass(this.defaultLabelClass); 115 } 116 }, 117 118 isValueChanged: function () { 119 return (this.__getValue() != this.initialLabel); 120 }, 121 122 onshow: function() { 123 this.__setInputFocus(); 124 }, 125 126 onhide: function() { 127 if (this.tabBlur) { 128 this.tabBlur = false; 129 } else { 130 this.getInput().focus(); 131 } 132 }, 133 134 onfocus: function(e) { 135 if (!this.__isFocused()) { 136 this.__setFocused(true); 137 this.focusValue = this.__getValue(); 138 this.invokeEvent.call(this, "focus", document.getElementById(this.id), e); 139 } 140 }, 141 142 onblur: function(e) { 143 if (this.__isFocused()) { 144 this.__setFocused(false); 145 this.invokeEvent.call(this, "blur", document.getElementById(this.id), e); 146 147 if (this.isValueSaved() || this.__isSaveOnBlur()) { 148 this.save(); 149 } else { 150 this.cancel(); 151 } 152 153 this.__hide(); 154 155 if (!this.cancelButton) { 156 if (this.__isValueChanged()) { 157 this.invokeEvent.call(this, "change", document.getElementById(this.id), e); 158 } 159 } 160 var _this = this; 161 window.setTimeout(function() { 162 _this.getInput().bind("focus", $.proxy(_this.__editHandler, _this)); 163 }, 1); 164 } 165 }, 166 167 __isValueChanged: function() { 168 return (this.focusValue != this.__getValue()); 169 }, 170 171 __setFocused: function(focused) { 172 this.focused = focused; 173 }, 174 175 __isFocused: function() { 176 return this.focused; 177 }, 178 setValue: function(value) { 179 this.__setValue(value); 180 this.save(); 181 } 182 } 183 })()); 184 185 })(RichFaces.jQuery, window.RichFaces); 186