1 (function ($, rf) { 2 3 rf.ui = rf.ui || {}; 4 5 rf.ui.InplaceSelect = function(id, options) { 6 var mergedOptions = $.extend({}, defaultOptions, options); 7 $super.constructor.call(this, id, mergedOptions); 8 this.getInput().bind("click", $.proxy(this.__clickHandler, this)); 9 mergedOptions['attachTo'] = id; 10 mergedOptions['scrollContainer'] = $(document.getElementById(id + "Items")).parent()[0]; 11 mergedOptions['focusKeeperEnabled'] = false; 12 this.popupList = new rf.ui.PopupList(id + "List", this, mergedOptions); 13 this.list = this.popupList.__getList(); 14 this.clientSelectItems = mergedOptions.clientSelectItems; 15 this.selValueInput = $(document.getElementById(id + "selValue")); 16 this.initialValue = this.selValueInput.val(); 17 this.listHandler = $(document.getElementById(id + "List")); 18 this.listHandler.bind("mousedown", $.proxy(this.__onListMouseDown, this)); 19 this.listHandler.bind("mouseup", $.proxy(this.__onListMouseUp, this)); 20 this.openOnEdit = mergedOptions.openOnEdit; 21 this.saveOnSelect = mergedOptions.saveOnSelect; 22 this.savedIndex = -1; 23 24 this.inputItem = $(document.getElementById(id + "Input")); 25 this.inputItemWidth = this.inputItem.width(); 26 this.inputWidthDefined = options.inputWidth !== undefined; 27 }; 28 rf.ui.InplaceInput.extend(rf.ui.InplaceSelect); 29 var $super = rf.ui.InplaceSelect.$super; 30 31 var defaultOptions = { 32 defaultLabel: "", 33 saveOnSelect: true, 34 openOnEdit: true, 35 showControl: false, 36 itemCss: "rf-is-opt", 37 selectItemCss: "rf-is-sel", 38 listCss: "rf-is-lst-cord", 39 noneCss: "rf-is-none", 40 editCss: "rf-is-fld-cntr", 41 changedCss: "rf-is-chng" 42 }; 43 44 $.extend(rf.ui.InplaceSelect.prototype, (function () { 45 46 return{ 47 name : "inplaceSelect", 48 defaultLabelClass : "rf-is-dflt-lbl", 49 50 getName: function() { 51 return this.name; 52 }, 53 getNamespace: function() { 54 return this.namespace; 55 }, 56 onshow: function() { 57 $super.onshow.call(this); 58 if (this.openOnEdit) { 59 this.__showPopup(); 60 } 61 }, 62 onhide: function() { 63 this.__hidePopup(); 64 }, 65 66 showPopup: function() { 67 $super.__show.call(this); 68 69 }, 70 __showPopup: function() { 71 this.popupList.show(); 72 this.__hideLabel(); 73 }, 74 hidePopup: function() { 75 $super.__hide.call(this); 76 }, 77 __hidePopup: function() { 78 this.popupList.hide(); 79 this.__showLabel(); 80 }, 81 82 onsave: function() { 83 var item = this.list.currentSelectItem(); 84 if (item) { 85 var index = this.list.getSelectedItemIndex(); 86 var clientSelectItem = this.list.getClientSelectItemByIndex(index); 87 var label = clientSelectItem.label; 88 if (label == this.__getValue()) { 89 this.savedIndex = index; 90 this.saveItemValue(clientSelectItem.value); 91 this.list.__selectByIndex(this.savedIndex); 92 } else { 93 this.list.__selectItemByValue(this.getValue()); 94 } 95 } 96 }, 97 oncancel: function() { 98 var item = this.list.getClientSelectItemByIndex(this.savedIndex); 99 var value = item && item.value ? item.value : this.initialValue; 100 this.saveItemValue(value); 101 this.list.__selectItemByValue(value); 102 }, 103 onblur: function(e) { 104 this.__hidePopup(); 105 $super.onblur.call(this); 106 }, 107 onfocus: function(e) { 108 if (!this.__isFocused()) { 109 this.__setFocused(true); 110 this.focusValue = this.selValueInput.val(); 111 this.invokeEvent.call(this, "focus", document.getElementById(this.id), e); 112 } 113 }, 114 processItem: function(item) { 115 var label = $(item).data('clientSelectItem').label; 116 this.__setValue(label); 117 118 this.__setInputFocus(); 119 this.__hidePopup(); 120 121 if (this.saveOnSelect) { 122 this.save(); 123 } 124 125 this.invokeEvent.call(this, "selectitem", document.getElementById(this.id)); 126 }, 127 saveItemValue: function(value) { 128 this.selValueInput.val(value); 129 130 }, 131 __isValueChanged: function() { 132 return (this.focusValue != this.selValueInput.val()); 133 }, 134 __keydownHandler: function(e) { 135 136 var code; 137 138 if (e.keyCode) { 139 code = e.keyCode; 140 } else if (e.which) { 141 code = e.which; 142 } 143 144 if (this.popupList.isVisible()) { 145 switch (code) { 146 case rf.KEYS.DOWN: 147 e.preventDefault(); 148 this.list.__selectNext(); 149 this.__setInputFocus(); 150 break; 151 152 case rf.KEYS.UP: 153 e.preventDefault(); 154 this.list.__selectPrev(); 155 this.__setInputFocus(); 156 break; 157 158 case rf.KEYS.RETURN: 159 e.preventDefault(); 160 this.list.__selectCurrent(); 161 this.__setInputFocus(); 162 return false; 163 break; 164 } 165 } 166 167 $super.__keydownHandler.call(this, e); 168 }, 169 __blurHandler: function(e) { 170 if (this.saveOnSelect || !this.isMouseDown) { 171 if (this.isEditState()) { 172 this.timeoutId = window.setTimeout($.proxy(function() { 173 this.onblur(e); 174 }, this), 200); 175 } 176 } else { 177 this.__setInputFocus(); 178 this.isMouseDown = false; 179 } 180 }, 181 __clickHandler: function(e) { 182 this.__showPopup(); 183 }, 184 __onListMouseDown: function(e) { 185 this.isMouseDown = true; 186 }, 187 __onListMouseUp: function(e) { 188 this.isMouseDown = false; 189 this.__setInputFocus(); 190 }, 191 __showLabel: function(e) { 192 this.label.show(); 193 this.editContainer.css("position", "absolute"); 194 this.inputItem.width(this.inputItemWidth); 195 }, 196 __hideLabel: function(e) { 197 this.label.hide(); 198 this.editContainer.css("position", "static"); 199 if (!this.inputWidthDefined) { 200 this.inputItem.width(this.label.width()); 201 } 202 }, 203 getValue: function() { 204 return this.selValueInput.val(); 205 }, 206 setValue: function(value) { 207 var item = this.list.__selectItemByValue(value); 208 var clientSelectItem = item.data('clientSelectItem'); 209 this.__setValue(clientSelectItem.label); 210 if (this.__isValueChanged()) { 211 this.save(); 212 this.invokeEvent.call(this, "change", document.getElementById(this.id)); 213 } 214 }, 215 destroy: function() { 216 this.popupList.destroy(); 217 this.popupList = null; 218 $super.destroy.call(this); 219 } 220 }; 221 222 })()); 223 })(RichFaces.jQuery, window.RichFaces); 224