author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
commit | ef68436ac04da078ffdcacd7e1f785473a303d45 (patch) (unidiff) | |
tree | c403752d66a2c4775f00affd4fa8431b29c5b68c /frontend/beta/js/Clipperz/PM/Components/TextFormField.js | |
parent | 597ecfbc0249d83e1b856cbd558340c01237a360 (diff) | |
download | clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.zip clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.gz clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.bz2 |
First version of the newly restructured repository
Diffstat (limited to 'frontend/beta/js/Clipperz/PM/Components/TextFormField.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/Clipperz/PM/Components/TextFormField.js | 310 |
1 files changed, 310 insertions, 0 deletions
diff --git a/frontend/beta/js/Clipperz/PM/Components/TextFormField.js b/frontend/beta/js/Clipperz/PM/Components/TextFormField.js new file mode 100644 index 0000000..cb4f06a --- a/dev/null +++ b/frontend/beta/js/Clipperz/PM/Components/TextFormField.js | |||
@@ -0,0 +1,310 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2011 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz's Javascript Crypto Library. | ||
6 | Javascript Crypto Library provides web developers with an extensive | ||
7 | and efficient set of cryptographic functions. The library aims to | ||
8 | obtain maximum execution speed while preserving modularity and | ||
9 | reusability. | ||
10 | For further information about its features and functionalities please | ||
11 | refer to http://www.clipperz.com | ||
12 | |||
13 | * Javascript Crypto Library is free software: you can redistribute | ||
14 | it and/or modify it under the terms of the GNU Affero General Public | ||
15 | License as published by the Free Software Foundation, either version | ||
16 | 3 of the License, or (at your option) any later version. | ||
17 | |||
18 | * Javascript Crypto Library is distributed in the hope that it will | ||
19 | be useful, but WITHOUT ANY WARRANTY; without even the implied | ||
20 | warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
21 | See the GNU Affero General Public License for more details. | ||
22 | |||
23 | * You should have received a copy of the GNU Affero General Public | ||
24 | License along with Javascript Crypto Library. If not, see | ||
25 | <http://www.gnu.org/licenses/>. | ||
26 | |||
27 | */ | ||
28 | |||
29 | if (typeof(Clipperz) == 'undefined') { Clipperz = {}; } | ||
30 | if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; } | ||
31 | if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; } | ||
32 | |||
33 | Clipperz.PM.Components.TextFormField = function(anElement, args) { | ||
34 | args = args || {}; | ||
35 | |||
36 | //MochiKit.Logging.logDebug(">>> new TextFormField"); | ||
37 | Clipperz.PM.Components.TextFormField.superclass.constructor.call(this, args); | ||
38 | |||
39 | this._element = anElement; | ||
40 | this._editMode = args.editMode || 'VIEW'; | ||
41 | this._value = args.value || ""; | ||
42 | this._inputElement = null; | ||
43 | this._wrapper = null; | ||
44 | this._multiline = args.multiline || false; | ||
45 | |||
46 | //this.multiline = args.multiline || true; | ||
47 | //this.editing = true; | ||
48 | //this.completeOnBlur = true; | ||
49 | //this.autoSizeTask = new YAHOO.ext.util.DelayedTask(this.autoSize, this); | ||
50 | //this.textSizeEl = Clipperz.YUI.DomHelper.append(document.body, { | ||
51 | // tag: 'div', | ||
52 | // cls: 'yinline-editor-sizer ' + (this.cls || '') | ||
53 | //}); | ||
54 | |||
55 | this.render(); | ||
56 | //MochiKit.Logging.logDebug("<<< new TextFormField"); | ||
57 | |||
58 | return this; | ||
59 | }; | ||
60 | |||
61 | YAHOO.extendX(Clipperz.PM.Components.TextFormField, Clipperz.PM.Components.BaseComponent, { | ||
62 | |||
63 | 'toString': function() { | ||
64 | return "Clipperz.PM.Components.TextFormField"; | ||
65 | }, | ||
66 | |||
67 | //----------------------------------------------------- | ||
68 | |||
69 | 'value': function() { | ||
70 | if (this.inputElement() != null) { | ||
71 | this._value = this.inputElement().dom.value; | ||
72 | } | ||
73 | |||
74 | return this._value; | ||
75 | // return this.inlineEditor().getValue(); | ||
76 | }, | ||
77 | |||
78 | 'setValue': function(aValue) { | ||
79 | this._value = aValue; | ||
80 | // this.getElement('viewComponent_Content').update(aValue); | ||
81 | // this.inlineEditor().setValue(aValue); | ||
82 | }, | ||
83 | |||
84 | //----------------------------------------------------- | ||
85 | |||
86 | 'multiline': function() { | ||
87 | return this._multiline; | ||
88 | }, | ||
89 | |||
90 | //----------------------------------------------------- | ||
91 | |||
92 | 'editMode': function() { | ||
93 | return this._editMode; | ||
94 | }, | ||
95 | |||
96 | 'setEditMode': function(aValue) { | ||
97 | this._editMode = aValue; | ||
98 | }, | ||
99 | |||
100 | //----------------------------------------------------- | ||
101 | |||
102 | 'inputElement': function() { | ||
103 | return this._inputElement; | ||
104 | }, | ||
105 | |||
106 | 'setInputElement': function(aValue) { | ||
107 | this._inputElement = aValue; | ||
108 | }, | ||
109 | |||
110 | //----------------------------------------------------- | ||
111 | |||
112 | 'on': function(anEventName, anHandler, aScope, shouldOverride) { | ||
113 | //MochiKit.Logging.logDebug(">>> TextFormField.on - inputElement: " + this.inputElement()); | ||
114 | return this.inputElement().on(anEventName, anHandler, aScope, shouldOverride); | ||
115 | //MochiKit.Logging.logDebug("<<< TextFormField.on - inputElement: " + this.inputElement()); | ||
116 | }, | ||
117 | |||
118 | //----------------------------------------------------- | ||
119 | |||
120 | 'wrapper': function() { | ||
121 | return this._wrapper; | ||
122 | }, | ||
123 | |||
124 | //----------------------------------------------------- | ||
125 | |||
126 | 'render': function() { | ||
127 | var editModeConfiguration; | ||
128 | var viewModeConfiguration; | ||
129 | |||
130 | editModeConfiguration = {tag:'div', id:this.getId('editComponent'), children:[]}; | ||
131 | if (this.multiline() == false) { | ||
132 | editModeConfiguration.children.push({tag:'input', type:'text', id:this.getId('editComponent_input'), value:"this.value(1)"}); | ||
133 | } else { | ||
134 | editModeConfiguration.children.push({tag:'textarea', id:this.getId('editComponent_input'), html:"this.value(2)"}); | ||
135 | } | ||
136 | |||
137 | viewModeConfiguration = {tag:'div', id:this.getId('viewComponent'), /*style:'border: 1px solid blue;',*/ children:[ | ||
138 | {tag:'span', id:this.getId('viewComponent_Content'), html:this.value()} | ||
139 | ]} | ||
140 | |||
141 | //MochiKit.Logging.logDebug(">>> TextFormField.render"); | ||
142 | this._wrapper = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('wrapper'), children:[ | ||
143 | {tag:'div', id:this.getId('editModeBox'), children:[editModeConfiguration]}, | ||
144 | {tag:'div', id:this.getId('viewModeBox'), children:[viewModeConfiguration]} | ||
145 | ]}, true); | ||
146 | |||
147 | this.getElement('editModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY); | ||
148 | this.getElement('viewModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY); | ||
149 | |||
150 | this.getElement('editComponent_input').dom.value = this.value(); | ||
151 | this.setInputElement(this.getElement('editComponent_input')); | ||
152 | |||
153 | this.update(); | ||
154 | //MochiKit.Logging.logDebug("<<< TextFormField.render"); | ||
155 | }, | ||
156 | |||
157 | //----------------------------------------------------- | ||
158 | |||
159 | 'update': function(args) { | ||
160 | args = args || {}; | ||
161 | |||
162 | //MochiKit.Logging.logDebug(">>> TextFormField.update"); | ||
163 | if (typeof(args.value) != 'undefined') { | ||
164 | this.setValue(args.value); | ||
165 | } | ||
166 | if (typeof(args.editMode) != 'undefined') { | ||
167 | this.setEditMode(args.editMode) | ||
168 | } | ||
169 | |||
170 | if (this.editMode() == 'VIEW') { | ||
171 | this.updateViewMode(); | ||
172 | } else if (this.editMode() == 'EDIT') { | ||
173 | this.updateEditMode(); | ||
174 | } else { | ||
175 | //????? | ||
176 | } | ||
177 | //MochiKit.Logging.logDebug("<<< TextFormField.update"); | ||
178 | }, | ||
179 | |||
180 | //----------------------------------------------------- | ||
181 | |||
182 | 'updateEditMode': function() { | ||
183 | //MochiKit.Logging.logDebug(">>> TextFormField.updateEditMode"); | ||
184 | this.getElement('viewModeBox').hide(); | ||
185 | this.getElement('editModeBox').show(); | ||
186 | |||
187 | if (this.multiline() == false) { | ||
188 | this.getElement('editComponent_input').dom.value = this.value(); | ||
189 | } else { | ||
190 | this.getElement('editComponent_input').update(Clipperz.Base.sanitizeString(this.value())); | ||
191 | } | ||
192 | //MochiKit.Logging.logDebug("<<< TextFormField.updateEditMode"); | ||
193 | }, | ||
194 | |||
195 | //----------------------------------------------------- | ||
196 | |||
197 | 'updateViewMode': function() { | ||
198 | //MochiKit.Logging.logDebug(">>> TextFormField.updateViewMode"); | ||
199 | this.getElement('editModeBox').hide(); | ||
200 | this.getElement('viewModeBox').show(); | ||
201 | |||
202 | this.getElement('viewComponent_Content').update(Clipperz.Base.sanitizeString(this.value())); | ||
203 | //MochiKit.Logging.logDebug("<<< TextFormField.updateViewMode"); | ||
204 | }, | ||
205 | |||
206 | //##################################################### | ||
207 | //##################################################### | ||
208 | //##################################################### | ||
209 | //##################################################### | ||
210 | /* | ||
211 | 'onEnter': function(k, e) { | ||
212 | MochiKit.Logging.logDebug(">>> TextFormField.onEnter"); | ||
213 | if (this.multiline && (e.ctrlKey || e.shiftKey)) { | ||
214 | return; | ||
215 | } else { | ||
216 | this.completeEdit(); | ||
217 | e.stopEvent(); | ||
218 | } | ||
219 | MochiKit.Logging.logDebug("<<< TextFormField.onEnter"); | ||
220 | }, | ||
221 | |||
222 | //----------------------------------------------------- | ||
223 | |||
224 | 'onEsc': function() { | ||
225 | MochiKit.Logging.logDebug(">>> TextFormField.onEsc"); | ||
226 | // if (this.ignoreNoChange) { | ||
227 | // this.revert(true); | ||
228 | // } else { | ||
229 | this.revert(false); | ||
230 | this.completeEdit(); | ||
231 | // } | ||
232 | MochiKit.Logging.logDebug("<<< TextFormField.onEsc"); | ||
233 | }, | ||
234 | |||
235 | //----------------------------------------------------- | ||
236 | |||
237 | onBlur : function(){ | ||
238 | MochiKit.Logging.logDebug(">>> TextFormField.onBlur"); | ||
239 | if (this.editing && this.completeOnBlur !== false) { | ||
240 | this.completeEdit(); | ||
241 | } | ||
242 | MochiKit.Logging.logDebug("<<< TextFormField.onBlur"); | ||
243 | }, | ||
244 | |||
245 | //----------------------------------------------------- | ||
246 | |||
247 | 'onKeyUp': function(e) { | ||
248 | var k = e.getKey(); | ||
249 | if (this.editing && (k < 33 || k > 40) && k != 27) { | ||
250 | this.autoSizeTask.delay(50); | ||
251 | } | ||
252 | }, | ||
253 | |||
254 | //----------------------------------------------------- | ||
255 | |||
256 | 'autoSize': function() { | ||
257 | var el = this.inputElement(); | ||
258 | var wrap = this.getElement('editComponent'); | ||
259 | var v = el.dom.value; | ||
260 | var ts = this.textSizeEl; | ||
261 | |||
262 | if (v.length < 1) { | ||
263 | ts.innerHTML = "  "; | ||
264 | } else { | ||
265 | v = v.replace(/[<> ]/g, ' '); | ||
266 | if (this.multiline) { | ||
267 | v = v.replace(/\n/g, '<br /> '); | ||
268 | } | ||
269 | ts.innerHTML = v; | ||
270 | } | ||
271 | |||
272 | var ww = wrap.dom.offsetWidth; | ||
273 | var wh = wrap.dom.offsetHeight; | ||
274 | var w = ts.offsetWidth; | ||
275 | var h = ts.offsetHeight; | ||
276 | // lots of magic numbers in this block - wtf? | ||
277 | // the logic is to prevent the scrollbars from flashing | ||
278 | // in firefox. Updates the right element first | ||
279 | // so there's never overflow. | ||
280 | if (ww > w+4) { | ||
281 | el.setWidth(w+4); | ||
282 | wrap.setWidth(w+8); | ||
283 | } else { | ||
284 | wrap.setWidth(w+8); | ||
285 | el.setWidth(w+4); | ||
286 | } | ||
287 | if (wh > h+4) { | ||
288 | el.setHeight(h); | ||
289 | wrap.setHeight(h+4); | ||
290 | } else { | ||
291 | wrap.setHeight(h+4); | ||
292 | el.setHeight(h); | ||
293 | } | ||
294 | }, | ||
295 | |||
296 | //----------------------------------------------------- | ||
297 | |||
298 | 'completeEdit': function() { | ||
299 | MochiKit.Logging.logDebug(">>> TextFormField.completeEdit"); | ||
300 | |||
301 | }, | ||
302 | |||
303 | 'revert': function() { | ||
304 | MochiKit.Logging.logDebug(">>> TextFormField.revert"); | ||
305 | |||
306 | }, | ||
307 | */ | ||
308 | //----------------------------------------------------- | ||
309 | __syntaxFix__: '__syntaxFix__' | ||
310 | }); | ||