author | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
commit | 541bb378ddece2eab135a8066a16994e94436dea (patch) (unidiff) | |
tree | ff160ea3e26f7fe07fcfd401387c5a0232ca715e /frontend/beta/js/YUI-extensions/widgets/InlineEditor.js | |
parent | 1bf431fd3d45cbdf4afa3e12afefe5d24f4d3bc7 (diff) | |
parent | ecad5e895831337216544e81f1a467e0c68c4a6a (diff) | |
download | clipperz-541bb378ddece2eab135a8066a16994e94436dea.zip clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.gz clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.bz2 |
Merge pull request #1 from gcsolaroli/master
First version of the restructured repository
Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/InlineEditor.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/InlineEditor.js | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/InlineEditor.js b/frontend/beta/js/YUI-extensions/widgets/InlineEditor.js new file mode 100644 index 0000000..a498faa --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/widgets/InlineEditor.js | |||
@@ -0,0 +1,216 @@ | |||
1 | YAHOO.ext.InlineEditor = function(config, existingEl){ | ||
2 | YAHOO.ext.util.Config.apply(this, config); | ||
3 | var dh = YAHOO.ext.DomHelper; | ||
4 | this.wrap = dh.append(this.container || document.body, { | ||
5 | tag:'div', | ||
6 | cls:'yinline-editor-wrap' | ||
7 | }, true); | ||
8 | |||
9 | this.textSizeEl = dh.append(document.body, { | ||
10 | tag: 'div', | ||
11 | cls: 'yinline-editor-sizer ' + (this.cls || '') | ||
12 | }); | ||
13 | if(YAHOO.ext.util.Browser.isSafari){ // extra padding for safari's textboxes | ||
14 | this.textSizeEl.style.padding = '4px'; | ||
15 | YAHOO.util.Dom.setStyle(this.textSizeEl, 'padding-right', '10px'); | ||
16 | } | ||
17 | |||
18 | if(!YAHOO.ext.util.Browser.isGecko){ // no one else needs FireFox cursor fix | ||
19 | this.wrap.setStyle('overflow', 'hidden'); | ||
20 | } | ||
21 | |||
22 | if(existingEl){ | ||
23 | this.el = getEl(existingEl); | ||
24 | } | ||
25 | if(!this.el){ | ||
26 | this.id = this.id || YAHOO.util.Dom.generateId(); | ||
27 | if(!this.multiline){ | ||
28 | this.el = this.wrap.createChild({ | ||
29 | tag: 'input', | ||
30 | name: this.name || this.id, | ||
31 | id: this.id, | ||
32 | type: this.type || 'text', | ||
33 | autocomplete: 'off', | ||
34 | value: this.value || '', | ||
35 | cls: 'yinline-editor ' + (this.cls || ''), | ||
36 | maxlength: this.maxLength || '' | ||
37 | }); | ||
38 | }else{ | ||
39 | this.el = this.wrap.createChild({ | ||
40 | tag: 'textarea', | ||
41 | name: this.name || this.id, | ||
42 | id: this.id, | ||
43 | html: this.value || '', | ||
44 | cls: 'yinline-editor yinline-editor-multiline ' + (this.cls || ''), | ||
45 | wrap: 'none' | ||
46 | }); | ||
47 | } | ||
48 | }else{ | ||
49 | this.wrap.dom.appendChild(this.el.dom); | ||
50 | } | ||
51 | this.el.addKeyMap([{ | ||
52 | key: [10, 13], | ||
53 | fn: this.onEnter, | ||
54 | scope: this | ||
55 | },{ | ||
56 | key: 27, | ||
57 | fn: this.onEsc, | ||
58 | scope: this | ||
59 | }]); | ||
60 | this.el.mon('keyup', this.onKeyUp, this, true); | ||
61 | this.el.on('blur', this.onBlur, this, true); | ||
62 | this.el.swallowEvent('keydown'); | ||
63 | this.events = { | ||
64 | 'startedit' : true, | ||
65 | 'beforecomplete' : true, | ||
66 | 'complete' : true | ||
67 | }; | ||
68 | this.editing = false; | ||
69 | this.autoSizeTask = new YAHOO.ext.util.DelayedTask(this.autoSize, this); | ||
70 | }; | ||
71 | |||
72 | YAHOO.extendX(YAHOO.ext.InlineEditor, YAHOO.ext.util.Observable, { | ||
73 | onEnter : function(k, e){ | ||
74 | if(this.multiline && (e.ctrlKey || e.shiftKey)){ | ||
75 | return; | ||
76 | }else{ | ||
77 | this.completeEdit(); | ||
78 | e.stopEvent(); | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | onEsc : function(){ | ||
83 | if(this.ignoreNoChange){ | ||
84 | this.revert(true); | ||
85 | }else{ | ||
86 | this.revert(false); | ||
87 | this.completeEdit(); | ||
88 | } | ||
89 | }, | ||
90 | |||
91 | onBlur : function(){ | ||
92 | if(this.editing && this.completeOnBlur !== false){ | ||
93 | this.completeEdit(); | ||
94 | } | ||
95 | }, | ||
96 | |||
97 | startEdit : function(el, value){ | ||
98 | this.boundEl = YAHOO.util.Dom.get(el); | ||
99 | if(this.hideEl !== false){ | ||
100 | this.boundEl.style.visibility = 'hidden'; | ||
101 | } | ||
102 | var v = value || this.boundEl.innerHTML; | ||
103 | this.startValue = v; | ||
104 | this.setValue(v); | ||
105 | this.moveTo(YAHOO.util.Dom.getXY(this.boundEl)); | ||
106 | this.editing = true; | ||
107 | if(YAHOO.ext.QuickTips){ | ||
108 | YAHOO.ext.QuickTips.disable(); | ||
109 | } | ||
110 | this.show.defer(10, this); | ||
111 | }, | ||
112 | |||
113 | onKeyUp : function(e){ | ||
114 | var k = e.getKey(); | ||
115 | if(this.editing && (k < 33 || k > 40) && k != 27){ | ||
116 | this.autoSizeTask.delay(50); | ||
117 | } | ||
118 | }, | ||
119 | |||
120 | completeEdit : function(){ | ||
121 | var v = this.getValue(); | ||
122 | if(this.revertBlank !== false && v.length < 1){ | ||
123 | v = this.startValue; | ||
124 | this.revert(); | ||
125 | } | ||
126 | if(v == this.startValue && this.ignoreNoChange){ | ||
127 | this.hide(); | ||
128 | } | ||
129 | if(this.fireEvent('beforecomplete', this, v, this.startValue) !== false){ | ||
130 | if(this.updateEl !== false && this.boundEl){ | ||
131 | this.boundEl.innerHTML = v; | ||
132 | } | ||
133 | this.hide(); | ||
134 | this.fireEvent('complete', this, v, this.startValue); | ||
135 | } | ||
136 | }, | ||
137 | |||
138 | revert : function(hide){ | ||
139 | this.setValue(this.startValue); | ||
140 | if(hide){ | ||
141 | this.hide(); | ||
142 | } | ||
143 | }, | ||
144 | |||
145 | show : function(){ | ||
146 | this.autoSize(); | ||
147 | this.wrap.show(); | ||
148 | this.el.focus(); | ||
149 | if(this.selectOnEdit !== false){ | ||
150 | this.el.dom.select(); | ||
151 | } | ||
152 | }, | ||
153 | |||
154 | hide : function(){ | ||
155 | this.editing = false; | ||
156 | this.wrap.hide(); | ||
157 | this.wrap.setLeftTop(-10000,-10000); | ||
158 | this.el.blur(); | ||
159 | if(this.hideEl !== false){ | ||
160 | this.boundEl.style.visibility = 'visible'; | ||
161 | } | ||
162 | if(YAHOO.ext.QuickTips){ | ||
163 | YAHOO.ext.QuickTips.enable(); | ||
164 | } | ||
165 | }, | ||
166 | |||
167 | setValue : function(v){ | ||
168 | this.el.dom.value = v; | ||
169 | }, | ||
170 | |||
171 | getValue : function(){ | ||
172 | return this.el.dom.value; | ||
173 | }, | ||
174 | |||
175 | autoSize : function(){ | ||
176 | var el = this.el; | ||
177 | var wrap = this.wrap; | ||
178 | var v = el.dom.value; | ||
179 | var ts = this.textSizeEl; | ||
180 | if(v.length < 1){ | ||
181 | ts.innerHTML = "  "; | ||
182 | }else{ | ||
183 | v = v.replace(/[<> ]/g, ' '); | ||
184 | if(this.multiline){ | ||
185 | v = v.replace(/\n/g, '<br /> '); | ||
186 | } | ||
187 | ts.innerHTML = v; | ||
188 | } | ||
189 | var ww = wrap.dom.offsetWidth; | ||
190 | var wh = wrap.dom.offsetHeight; | ||
191 | var w = ts.offsetWidth; | ||
192 | var h = ts.offsetHeight; | ||
193 | // lots of magic numbers in this block - wtf? | ||
194 | // the logic is to prevent the scrollbars from flashing | ||
195 | // in firefox. Updates the right element first | ||
196 | // so there's never overflow. | ||
197 | if(ww > w+4){ | ||
198 | el.setWidth(w+4); | ||
199 | wrap.setWidth(w+8); | ||
200 | }else{ | ||
201 | wrap.setWidth(w+8); | ||
202 | el.setWidth(w+4); | ||
203 | } | ||
204 | if(wh > h+4){ | ||
205 | el.setHeight(h); | ||
206 | wrap.setHeight(h+4); | ||
207 | }else{ | ||
208 | wrap.setHeight(h+4); | ||
209 | el.setHeight(h); | ||
210 | } | ||
211 | }, | ||
212 | |||
213 | moveTo : function(xy){ | ||
214 | this.wrap.setXY(xy); | ||
215 | } | ||
216 | }); | ||