Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js | 881 |
1 files changed, 881 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js new file mode 100644 index 0000000..e3238ca --- a/dev/null +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js | |||
@@ -0,0 +1,881 @@ | |||
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 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); | ||
30 | |||
31 | Clipperz.PM.UI.Web.Components.CardDialogComponent = function(args) { | ||
32 | args = args || {}; | ||
33 | |||
34 | Clipperz.PM.UI.Web.Components.CardDialogComponent.superclass.constructor.apply(this, arguments); | ||
35 | |||
36 | this._tabPanelController = null; | ||
37 | |||
38 | this._tabPanelControllerConfiguration = { | ||
39 | 'DETAILS': { | ||
40 | tab:'detailTab', | ||
41 | panel:'detailTabpanel' | ||
42 | }, | ||
43 | 'DIRECT_LOGINS': { | ||
44 | tab:'directLoginTab', | ||
45 | panel:'directLoginTabpanel' | ||
46 | }, | ||
47 | 'SHARING': { | ||
48 | tab:'sharingTab', | ||
49 | panel:'sharingTabpanel' | ||
50 | } | ||
51 | }; | ||
52 | |||
53 | this._tooltips = null; | ||
54 | |||
55 | this._isSavingEnabled = false; | ||
56 | this._hintMode = 'OFF'; //'ON' | ||
57 | |||
58 | this._fieldComponents = {}; | ||
59 | this._directLoginComponents = {}; | ||
60 | |||
61 | this._displayMode = 'fixed'; //'scrollable'; | ||
62 | |||
63 | return this; | ||
64 | } | ||
65 | |||
66 | //============================================================================= | ||
67 | |||
68 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.CardDialogComponent, Clipperz.PM.UI.Common.Components.BaseComponent, { | ||
69 | |||
70 | //------------------------------------------------------------------------- | ||
71 | |||
72 | 'toString': function () { | ||
73 | return "Clipperz.PM.UI.Web.Components.CardDialogComponent component"; | ||
74 | }, | ||
75 | |||
76 | //------------------------------------------------------------------------- | ||
77 | |||
78 | 'tabPanelController': function () { | ||
79 | if (this._tabPanelController == null) { | ||
80 | this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({ | ||
81 | component:this, | ||
82 | configuration:this._tabPanelControllerConfiguration | ||
83 | }); | ||
84 | |||
85 | MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected') | ||
86 | } | ||
87 | |||
88 | return this._tabPanelController; | ||
89 | }, | ||
90 | |||
91 | //------------------------------------------------------------------------- | ||
92 | |||
93 | 'renderSelf': function() { | ||
94 | this.append(this.element(), {tag:'div', cls:'CardDialog mainDialog loading', id:this.getId('panel'), children: [ | ||
95 | {tag:'form', id:this.getId('form'), children:[ | ||
96 | // {tag:'input', type:'text', id:this.getId('hidden'), cls:'hidden'}, | ||
97 | {tag:'div', cls:'header', children:[ | ||
98 | {tag:'div', cls:'title', children:[ | ||
99 | {tag:'input', type:'text', id:this.getId('title')} | ||
100 | ]} | ||
101 | ]}, | ||
102 | {tag:'div', id:this.getId('body'), cls:'body', children:[ | ||
103 | {tag:'div', cls:'tabs', children:[ | ||
104 | {tag:'ul', cls:'tabs', children:[ | ||
105 | {tag:'li', id:this.getId('detailTab'), children:[{tag:'span', html:"details"}]}, | ||
106 | {tag:'li', id:this.getId('directLoginTab'), children:[ | ||
107 | {tag:'span', html:"direct logins"}//, | ||
108 | // {tag:'div', id:this.getId('addDirectLoginButton'), cls:'addDirectLoginButton', children:[ | ||
109 | // {tag:'span', html:"+"} | ||
110 | // ]} | ||
111 | ]}, | ||
112 | {tag:'li', id:this.getId('sharingTab'), children:[{tag:'span', html:"sharing"}]} | ||
113 | ]} | ||
114 | ]}, | ||
115 | {tag:'div', cls:'tabPanels', children:[ | ||
116 | {tag:'ul', cls:'tabPanels', children:[ | ||
117 | {tag:'li', id:this.getId('detailTabpanel'), cls:'tabPanel', children:[ | ||
118 | {tag:'div', id:this.getId('recordFields'), children:[ | ||
119 | {tag:'table', cls:'fields', cellpadding:'0', id:this.getId('fieldTable'), cellspacing:'0', children:[ | ||
120 | {tag:'thead', children:[ | ||
121 | {tag:'tr', children:[ | ||
122 | {tag:'th', cls:'fieldStateTH',html:""}, | ||
123 | {tag:'th', cls:'fieldLabelTH',html:"label"}, | ||
124 | {tag:'th', cls:'fieldLockTH',html:""}, | ||
125 | {tag:'th', cls:'fieldValueTH',html:"value"}, | ||
126 | {tag:'th', cls:'fieldActionTH',html:""}, | ||
127 | {tag:'th', cls:'fieldDeleteTH',html:""} | ||
128 | ]} | ||
129 | ]}, | ||
130 | {tag:'tfoot'}, | ||
131 | {tag:'tbody', id:this.getId('tableBody'), children:[ | ||
132 | {tag:'tr', id:this.getId('newFieldTR'), cls:'newFieldTR', children:[ | ||
133 | {tag:'td', cls:'fieldState'}, | ||
134 | {tag:'td', cls:'fieldLabel', children:[ | ||
135 | {tag:'input', cls:'label', id:this.getId('newFieldLabel')} | ||
136 | ]}, | ||
137 | {tag:'td', cls:'fieldLock', children:[ | ||
138 | {tag:'div', cls:'unlocked', id:this.getId('newFieldIsLocked')} | ||
139 | ]}, | ||
140 | {tag:'td', cls:'fieldValue', children:[ | ||
141 | {tag:'div', cls:'unlocked', id:this.getId('newFieldValueWrapper'), children:[ | ||
142 | {tag:'input',type:'text', cls:'value', id:this.getId('newFieldValue')} | ||
143 | ]} | ||
144 | ]}, | ||
145 | {tag:'td', cls:'fieldAction', children:[ | ||
146 | {tag:'div', html:' '} | ||
147 | ]}, | ||
148 | {tag:'td', cls:'fieldAddDelete', children:[ | ||
149 | {tag:'div', cls:'new', children:[ | ||
150 | {tag:'span', children:[ | ||
151 | {tag:'a', href:'#', id:this.getId('newFieldAddButton'), html:"add"} | ||
152 | ]} | ||
153 | ]} | ||
154 | ]} | ||
155 | ]} | ||
156 | ]} | ||
157 | ]} | ||
158 | ]}, | ||
159 | {tag:'div', cls:'notes', children:[ | ||
160 | {tag:'div', children:[ | ||
161 | {tag:'textarea', id:this.getId('recordNote'), value:""} | ||
162 | ]} | ||
163 | ]} | ||
164 | ]}, | ||
165 | {tag:'li', id:this.getId('directLoginTabpanel'), cls:'tabPanel', children:[ | ||
166 | {tag:'div', id:this.getId('directLoginsComponentContainer'), cls:'directLoginsComponentContainer', children:[ | ||
167 | {tag:'div', id:this.getId('directLogins'), cls:'directLogins', children:[ | ||
168 | {tag:'div', id:this.getId('addNewDirectLoginSplash'), cls:'addNewDirectLoginSplash', children:[ | ||
169 | {tag:'h3', html:"Here you can add a Direct Login for this card: instant access to your favorit website!"}, | ||
170 | {tag:'a', href:'#', id:this.getId('addNewDirectLoginSplashButton'), children:[{tag:'span', html:"Add Direct Login"}]} | ||
171 | ]}, | ||
172 | {tag:'div', id:this.getId('directLoginsList')}, | ||
173 | {tag:'div', cls:'addDirectLoginListItem', id:this.getId('addDirectLoginListItem'), children:[{tag:'a', href:'#', id:this.getId('addNewDirectLoginListItemButton'), children:[{tag:'span', html:"Add Direct Login"}]}]} | ||
174 | ]}, | ||
175 | {tag:'div', id:this.getId('directLoginEditDetail'), cls:'directLoginEditDetail'} | ||
176 | ]} | ||
177 | ]}, | ||
178 | {tag:'li', id:this.getId('sharingTabpanel'), cls:'tabPanel', children:[ | ||
179 | {tag:'h2', html:"Coming soon!"} | ||
180 | ]} | ||
181 | ]} | ||
182 | ]}, | ||
183 | {tag:'div', cls:'mask', children:[ | ||
184 | {tag:'div', id:this.getId('progress'), children:[ | ||
185 | {tag:'h3', id:this.getId('progressDescription'), cls:'progressDescription', html:"Loading"}, | ||
186 | {tag:'div', id:this.getId('progressBar')} | ||
187 | ]}, | ||
188 | {tag:'div', id:this.getId('error'), cls:'error', children:[ | ||
189 | {tag:'div', cls:'img'}, | ||
190 | {tag:'p', id:this.getId('errorMessage')} | ||
191 | ]} | ||
192 | ]} | ||
193 | ]}, | ||
194 | {tag:'div', cls:'footer', children:[ | ||
195 | {tag:'div', cls:'buttonArea', children:[ | ||
196 | {tag:'div', cls:'cancel', id:this.getId('cancelButton'), html:"cancel"}, | ||
197 | {tag:'div', cls:'save disabled', id:this.getId('saveButton'), html:"save"} | ||
198 | ]} | ||
199 | ]} | ||
200 | ]} | ||
201 | ]}); | ||
202 | |||
203 | |||
204 | this.insertAllTooltips(); | ||
205 | |||
206 | this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':this.getElement('progressBar')})); | ||
207 | |||
208 | this.tabPanelController().setup({selected:'DETAILS'}); | ||
209 | // this.tabPanelController().setup({selected:'DIRECT_LOGINS'}); | ||
210 | |||
211 | MochiKit.Style.hideElement(this.getId('error')); | ||
212 | MochiKit.Style.hideElement(this.getElement('directLoginEditDetail')); | ||
213 | MochiKit.Style.hideElement(this.getElement('addDirectLoginListItem')); | ||
214 | this.plumbDetailsPanel(); | ||
215 | |||
216 | MochiKit.Signal.connect(this.getId('cancelButton'), 'onclick', this, 'handleCancelEvent'); | ||
217 | MochiKit.Signal.connect(this.getId('saveButton'), 'onclick', this, 'handleSaveEvent'); | ||
218 | |||
219 | MochiKit.Signal.connect(this.getId('addNewDirectLoginSplashButton'), 'onclick', this, 'handleAddDirectLogin'); | ||
220 | MochiKit.Signal.connect(this.getId('addNewDirectLoginListItemButton'), 'onclick', this, 'handleAddDirectLogin'); | ||
221 | |||
222 | MochiKit.Signal.connect(MochiKit.DOM.currentDocument().body, 'onkeydown',this, 'handleKeyEvent'); | ||
223 | }, | ||
224 | |||
225 | //------------------------------------------------------------------------- | ||
226 | |||
227 | 'displayMode': function () { | ||
228 | return this._displayMode; | ||
229 | }, | ||
230 | |||
231 | 'setDisplayMode': function (aValue) { | ||
232 | this._displayMode = aValue; | ||
233 | }, | ||
234 | |||
235 | //------------------------------------------------------------------------- | ||
236 | |||
237 | 'plumbDetailsPanel': function () { | ||
238 | MochiKit.Signal.connect(this.getId('title'), 'onfocus', MochiKit.Base.method(this, 'handleOnFocusEvent',this.getElement('title').parentNode)); | ||
239 | MochiKit.Signal.connect(this.getId('title'), 'onblur',MochiKit.Base.method(this, 'handleLooseFocusEvent', this.getElement('title').parentNode)); | ||
240 | MochiKit.Signal.connect(this.getId('title'), 'onchange',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
241 | MochiKit.Signal.connect(this.getId('title'), 'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
242 | |||
243 | MochiKit.Signal.connect(this.getId('recordNote'), 'onfocus', MochiKit.Base.method(this, 'handleOnFocusEvent',MochiKit.Selector.findChildElements(this.element(), ['div.notes'])[0])); | ||
244 | MochiKit.Signal.connect(this.getId('recordNote'), 'onblur',MochiKit.Base.method(this, 'handleLooseFocusEvent', MochiKit.Selector.findChildElements(this.element(), ['div.notes'])[0])); | ||
245 | MochiKit.Signal.connect(this.getId('recordNote'), 'onchange',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
246 | MochiKit.Signal.connect(this.getId('recordNote'), 'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
247 | |||
248 | MochiKit.Signal.connect(this.getId('newFieldValue'), 'onkeydown',this, 'handleKeyDownOnNewFieldValue'); | ||
249 | |||
250 | MochiKit.Signal.connect(this.getId('newFieldLabel'), 'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
251 | MochiKit.Signal.connect(this.getId('newFieldIsLocked'), 'onclick',this, 'toggleNewFieldIsHidden'); | ||
252 | MochiKit.Signal.connect(this.getId('newFieldValue'), 'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue')); | ||
253 | |||
254 | MochiKit.Signal.connect(this.getId('newFieldAddButton'), 'onclick', this, 'handleAddClick'); | ||
255 | }, | ||
256 | |||
257 | //------------------------------------------------------------------------- | ||
258 | |||
259 | 'insertAllTooltips': function () { | ||
260 | var tooltips; | ||
261 | var tooltipEnabled; | ||
262 | |||
263 | tooltips = {}; | ||
264 | tooltipEnabled = (this.hintMode() == 'ON'); | ||
265 | |||
266 | tooltips['title'] = new Clipperz.PM.UI.Common.Components.Tooltip({ | ||
267 | 'element':this.getElement('title'), | ||
268 | 'text': "Insert here the title of the card", | ||
269 | 'position':'RIGHT' | ||
270 | }); | ||
271 | this.addComponent(tooltips['title']); | ||
272 | MochiKit.Signal.connect(this.getId('title'), 'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'title')); | ||
273 | MochiKit.Signal.connect(this.getId('title'), 'onblur', MochiKit.Base.method(this, 'hideTooltipOnBlur', 'title')); | ||
274 | |||
275 | tooltips['newFieldTR'] = new Clipperz.PM.UI.Common.Components.Tooltip({ | ||
276 | 'element':this.getElement('newFieldTR'), | ||
277 | 'text': "Insert your card new values here", | ||
278 | 'position':'RIGHT' | ||
279 | }); | ||
280 | this.addComponent(tooltips['newFieldTR']); | ||
281 | MochiKit.Signal.connect(this.getId('newFieldLabel'), 'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'newFieldTR')); | ||
282 | MochiKit.Signal.connect(this.getId('newFieldValue'), 'onblur', MochiKit.Base.method(this, 'hideTooltipOnBlur', 'newFieldTR')); | ||
283 | |||
284 | tooltips['recordNote'] = new Clipperz.PM.UI.Common.Components.Tooltip({ | ||
285 | 'element':this.getElement('recordNote'), | ||
286 | 'text': "You can insert some notes here", | ||
287 | 'position':'RIGHT' | ||
288 | }); | ||
289 | this.addComponent(tooltips['recordNote']); | ||
290 | MochiKit.Signal.connect(this.getId('recordNote'), 'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'recordNote')); | ||
291 | MochiKit.Signal.connect(this.getId('recordNote'), 'onblur', MochiKit.Base.method(this, 'hideTooltipOnBlur', 'recordNote')); | ||
292 | |||
293 | this._tooltips = tooltips; | ||
294 | }, | ||
295 | |||
296 | //......................................................................... | ||
297 | |||
298 | 'updateAllTooltipsEnabledMode': function (aStatus) { | ||
299 | vartooltipLabel; | ||
300 | var tooltipEnabled; | ||
301 | |||
302 | tooltipEnabled = (aStatus == 'ON') ? true : false; | ||
303 | |||
304 | for (tooltipLabel in this.tooltips()) { | ||
305 | this.tooltips()[tooltipLabel].setIsEnabled(tooltipEnabled); | ||
306 | } | ||
307 | }, | ||
308 | |||
309 | //......................................................................... | ||
310 | |||
311 | 'tooltips': function () { | ||
312 | return this._tooltips; | ||
313 | }, | ||
314 | |||
315 | //......................................................................... | ||
316 | |||
317 | 'showTooltipOnFocus': function (aTooltip, anEvent) { | ||
318 | MochiKit.Async.callLater(0.5, MochiKit.Base.method(this.tooltips()[aTooltip], 'show')); | ||
319 | }, | ||
320 | |||
321 | //......................................................................... | ||
322 | |||
323 | 'hideTooltipOnBlur': function (aTooltip, anEvent) { | ||
324 | this.tooltips()[aTooltip].hide(); | ||
325 | }, | ||
326 | |||
327 | //------------------------------------------------------------------------- | ||
328 | |||
329 | 'displayElement': function() { | ||
330 | return this.getElement('panel'); | ||
331 | }, | ||
332 | |||
333 | //------------------------------------------------------------------------- | ||
334 | |||
335 | 'fieldComponents': function () { | ||
336 | return this._fieldComponents; | ||
337 | }, | ||
338 | |||
339 | //------------------------------------------------------------------------- | ||
340 | |||
341 | 'directLoginComponents': function () { | ||
342 | return this._directLoginComponents; | ||
343 | }, | ||
344 | |||
345 | //------------------------------------------------------------------------- | ||
346 | |||
347 | 'hintMode': function () { | ||
348 | return this._hintMode; | ||
349 | }, | ||
350 | |||
351 | 'setHintMode': function (aValue) { | ||
352 | if (this._hintMode != aValue) { | ||
353 | this._hintMode = aValue; | ||
354 | |||
355 | this.updateAllTooltipsEnabledMode(this._hintMode); | ||
356 | // if (this._hintMode == 'ON') { | ||
357 | // this.enableHints(); | ||
358 | // } | ||
359 | } | ||
360 | }, | ||
361 | |||
362 | //------------------------------------------------------------------------- | ||
363 | |||
364 | 'focusOnNewFieldLabel': function () { | ||
365 | this.getElement('newFieldLabel').focus(); | ||
366 | }, | ||
367 | |||
368 | //========================================================================= | ||
369 | |||
370 | 'isSavingEnabled': function () { | ||
371 | return this._isSavingEnabled; | ||
372 | }, | ||
373 | |||
374 | 'setShouldEnableSaving': function (aValue) { | ||
375 | this._isSavingEnabled = aValue || this.newFieldHasPendingChanges(); | ||
376 | |||
377 | if (this._isSavingEnabled == true) { | ||
378 | MochiKit.DOM.addElementClass(this.getElement('panel'), 'hasPendingChanges'); | ||
379 | MochiKit.DOM.removeElementClass(this.getId('saveButton'), 'disabled'); | ||
380 | } else { | ||
381 | MochiKit.DOM.removeElementClass(this.getElement('panel'), 'hasPendingChanges'); | ||
382 | MochiKit.DOM.addElementClass(this.getId('saveButton'), 'disabled'); | ||
383 | } | ||
384 | }, | ||
385 | |||
386 | //========================================================================= | ||
387 | |||
388 | 'title': function () { | ||
389 | return this.getElement('title').value; | ||
390 | }, | ||
391 | |||
392 | 'setTitle': function (aValue) { | ||
393 | this.renderTitle(aValue); | ||
394 | }, | ||
395 | |||
396 | //------------------------------------------------------------------------- | ||
397 | |||
398 | 'renderTitle': function (aValue) { | ||
399 | this.getElement('title').value = Clipperz.Base.sanitizeString(aValue); | ||
400 | }, | ||
401 | |||
402 | //------------------------------------------------------------------------- | ||
403 | |||
404 | 'setFocusOnTitleField': function () { | ||
405 | this.getElement('title').focus(); | ||
406 | }, | ||
407 | |||
408 | //------------------------------------------------------------------------- | ||
409 | |||
410 | 'disableCardTitleEditing': function () { | ||
411 | this.getElement('title').disabled = true; | ||
412 | MochiKit.DOM.addElementClass(this.getElement('title').parentNode, 'disabled'); | ||
413 | }, | ||
414 | |||
415 | |||
416 | 'enableCardTitleEditing': function () { | ||
417 | this.getElement('title').disabled = false; | ||
418 | MochiKit.DOM.removeElementClass(this.getElement('title').parentNode, 'disabled'); | ||
419 | }, | ||
420 | |||
421 | //========================================================================= | ||
422 | |||
423 | 'notes': function () { | ||
424 | return this.getElement('recordNote').value; | ||
425 | }, | ||
426 | |||
427 | 'setNotes': function (aValue) { | ||
428 | this.renderNotes(aValue); | ||
429 | }, | ||
430 | |||
431 | //------------------------------------------------------------------------- | ||
432 | |||
433 | 'renderNotes': function (aValue) { | ||
434 | var noteElement; | ||
435 | |||
436 | noteElement = this.getElement('recordNote'); | ||
437 | |||
438 | if ((aValue != null) && (typeof(aValue) != 'undefined')) { | ||
439 | noteElement.value = aValue; | ||
440 | } else { | ||
441 | noteElement.value = ""; | ||
442 | } | ||
443 | |||
444 | this.fixNotesHeight(); | ||
445 | }, | ||
446 | |||
447 | //========================================================================= | ||
448 | |||
449 | 'addFieldRowComponent': function (aFieldComponent) { | ||
450 | varfieldTR; | ||
451 | |||
452 | fieldTR = this.insertBefore(this.getElement('newFieldTR'), {tag:'tr', id:'recordFieldReferece_'+aFieldComponent.reference()}); | ||
453 | aFieldComponent.renderInNode(fieldTR); | ||
454 | this.fieldComponents()[aFieldComponent.reference()] = aFieldComponent; | ||
455 | }, | ||
456 | |||
457 | //========================================================================= | ||
458 | |||
459 | 'addDirectLoginComponent': function (aDirectLoginComponent) { | ||
460 | var directLoginDIV; | ||
461 | |||
462 | if (MochiKit.Base.keys(this.directLoginComponents()).length == 0) { | ||
463 | this.hideNewDirectLoginSplash(); | ||
464 | } | ||
465 | |||
466 | directLoginDIV = this.append(this.getElement('directLoginsList'), {tag:'div', cls:'directLoginItem'}); | ||
467 | aDirectLoginComponent.renderInNode(directLoginDIV); | ||
468 | this.directLoginComponents()[aDirectLoginComponent.reference()] = aDirectLoginComponent; | ||
469 | }, | ||
470 | |||
471 | 'removeDirectLoginComponent': function (aDirectLoginComponent) { | ||
472 | delete this.directLoginComponents()[aDirectLoginComponent.reference()]; | ||
473 | aDirectLoginComponent.remove(); | ||
474 | |||
475 | if (MochiKit.Base.keys(this.directLoginComponents()).length == 0) { | ||
476 | this.showNewDirectLoginSplash(); | ||
477 | } | ||
478 | }, | ||
479 | |||
480 | //========================================================================= | ||
481 | |||
482 | 'showNewDirectLoginSplash': function () { | ||
483 | MochiKit.Style.showElement(this.getElement('addNewDirectLoginSplash')); | ||
484 | MochiKit.Style.hideElement(this.getElement('addDirectLoginListItem')); | ||
485 | }, | ||
486 | |||
487 | 'hideNewDirectLoginSplash': function () { | ||
488 | MochiKit.Style.hideElement(this.getElement('addNewDirectLoginSplash')); | ||
489 | MochiKit.Style.showElement(this.getElement('addDirectLoginListItem')); | ||
490 | }, | ||
491 | |||
492 | //========================================================================= | ||
493 | |||
494 | 'renderDirectLoginEditingComponent': function (aDirectLoginEditingComponent) { | ||
495 | aDirectLoginEditingComponent.renderInNode(this.getElement('directLoginEditDetail')); | ||
496 | }, | ||
497 | |||
498 | 'placeDirectLoginEditingComponent': function () { | ||
499 | var width; | ||
500 | |||
501 | width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w']; | ||
502 | |||
503 | return Clipperz.Async.callbacks("CardDialogComponent.renderDirectLoginEditingComponent", [ | ||
504 | MochiKit.Base.bind(function () { | ||
505 | MochiKit.Style.setElementPosition (this.getElement('directLoginEditDetail'), {x:width, y:-MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']}); | ||
506 | MochiKit.Style.setElementDimensions(this.getElement('directLoginEditDetail'), {w:width}); | ||
507 | }, this), | ||
508 | |||
509 | MochiKit.Base.noop | ||
510 | ], {trace:false}); | ||
511 | }, | ||
512 | |||
513 | //========================================================================= | ||
514 | |||
515 | 'newFieldLabel': function () { | ||
516 | return this.getElement('newFieldLabel').value; | ||
517 | }, | ||
518 | |||
519 | 'setNewFieldLabel': function (aValue) { | ||
520 | this.getElement('newFieldLabel').value = aValue; | ||
521 | }, | ||
522 | |||
523 | //------------------------------------------------------------------------- | ||
524 | |||
525 | 'newFieldValue': function () { | ||
526 | return this.getElement('newFieldValue').value; | ||
527 | }, | ||
528 | |||
529 | 'setNewFieldValue': function (aValue) { | ||
530 | this.getElement('newFieldValue').value = aValue; | ||
531 | }, | ||
532 | |||
533 | //------------------------------------------------------------------------- | ||
534 | |||
535 | 'newFieldIsHidden': function () { | ||
536 | return MochiKit.DOM.hasElementClass(this.getElement('newFieldIsLocked'), 'locked'); | ||
537 | }, | ||
538 | |||
539 | 'setNewFieldIsHidden': function (aValue) { | ||
540 | MochiKit.DOM.setElementClass(this.getElement('newFieldIsLocked'), (aValue ? 'locked': 'unlocked')); | ||
541 | MochiKit.DOM.setElementClass(this.getElement('newFieldValueWrapper'), (aValue ? 'locked': 'unlocked')); | ||
542 | }, | ||
543 | |||
544 | 'toggleNewFieldIsHidden': function (anEvent) { | ||
545 | anEvent.preventDefault(); | ||
546 | |||
547 | this.setNewFieldIsHidden(! this.newFieldIsHidden()); | ||
548 | MochiKit.Signal.signal(this, 'changedValue'); | ||
549 | }, | ||
550 | |||
551 | //------------------------------------------------------------------------- | ||
552 | |||
553 | 'newFieldHasPendingChanges': function () { | ||
554 | return ((this.newFieldLabel() != '') || (this.newFieldValue() != '') || (this.newFieldIsHidden() == true)); | ||
555 | }, | ||
556 | |||
557 | 'resetNewFieldInputs': function () { | ||
558 | this.setNewFieldLabel(''); | ||
559 | this.setNewFieldValue(''); | ||
560 | this.setNewFieldIsHidden(false); | ||
561 | }, | ||
562 | |||
563 | //========================================================================= | ||
564 | |||
565 | 'handleKeyDownOnNewFieldValue': function (anEvent) { | ||
566 | MochiKit.Signal.signal(this, 'keyPressed', anEvent); | ||
567 | /* | ||
568 | if ((anEvent.key().string == 'KEY_TAB') && this.newFieldHasPendingChanges()) { | ||
569 | anEvent.preventDefault(); | ||
570 | |||
571 | MochiKit.Signal.signal(this, 'addField'); | ||
572 | this.getElement('newFieldLabel').focus(); | ||
573 | } | ||
574 | */ | ||
575 | }, | ||
576 | |||
577 | //------------------------------------------------------------------------- | ||
578 | |||
579 | 'handleAddClick': function (anEvent) { | ||
580 | anEvent.preventDefault(); | ||
581 | MochiKit.Signal.signal(this, 'addField'); | ||
582 | this.getElement('newFieldLabel').focus(); | ||
583 | }, | ||
584 | |||
585 | //========================================================================= | ||
586 | |||
587 | 'handleDeleteClick': function (aFieldKey, anEvent) { | ||
588 | anEvent.preventDefault(); | ||
589 | MochiKit.Signal.signal(this, 'deleteField', aFieldKey); | ||
590 | }, | ||
591 | |||
592 | //------------------------------------------------------------------------- | ||
593 | |||
594 | 'toggleLock': function (aFieldKey, anEvent) { | ||
595 | var shouldRedrawAsLocked; | ||
596 | var currentTRElement; | ||
597 | |||
598 | anEvent.preventDefault(); | ||
599 | |||
600 | currentTRElement = Clipperz.DOM.get(aFieldKey); | ||
601 | shouldRedrawAsLocked = (MochiKit.DOM.hasElementClass(currentTRElement, 'locked') ? false : true); | ||
602 | |||
603 | this.renderFieldTR(currentTRElement, { | ||
604 | label:MochiKit.Selector.findChildElements(currentTRElement, ['td.fieldLabel input'])[0].value, | ||
605 | value:MochiKit.Selector.findChildElements(currentTRElement, ['td.fieldValue input'])[0].value | ||
606 | }, shouldRedrawAsLocked, MochiKit.DOM.hasElementClass(currentTRElement, 'new')); | ||
607 | }, | ||
608 | |||
609 | //========================================================================= | ||
610 | |||
611 | 'fixNotesHeight': function () { | ||
612 | var element; | ||
613 | |||
614 | element = this.getElement('recordNote'); | ||
615 | |||
616 | if (element.scrollHeight == 0) { | ||
617 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'fixNotesHeight')); | ||
618 | } else { | ||
619 | var textareaHeight; | ||
620 | |||
621 | textareaHeight = Math.min(Math.max(50, element.scrollHeight), 500); | ||
622 | |||
623 | MochiKit.Style.setElementDimensions(element, {h:textareaHeight}, 'px'); | ||
624 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'fixRendering')); | ||
625 | } | ||
626 | }, | ||
627 | |||
628 | //------------------------------------------------------------------------- | ||
629 | |||
630 | 'fixRendering': function () { | ||
631 | // varheight; | ||
632 | var y; | ||
633 | varscrollHeight; | ||
634 | var viewportHeight; | ||
635 | var viewportY; | ||
636 | var footerElement; | ||
637 | var footerElementPosition; | ||
638 | var footerElementDimensions; | ||
639 | var footerComputedHeight; | ||
640 | |||
641 | // height = MochiKit.Style.getElementDimensions(this.displayElement())['h']; | ||
642 | y = MochiKit.Style.getElementPosition(this.displayElement())['y']; | ||
643 | |||
644 | footerElement = MochiKit.Selector.findChildElements(this.displayElement(), ['div.footer'])[0]; | ||
645 | footerElementPosition = MochiKit.Style.getElementPosition(footerElement); | ||
646 | footerElementDimensions = MochiKit.Style.getElementDimensions(footerElement); | ||
647 | footerComputedHeight = footerElementPosition['y'] + footerElementDimensions['h'] - y; | ||
648 | |||
649 | // scrollHeight = this.displayElement().scrollHeight; | ||
650 | scrollHeight = footerComputedHeight; | ||
651 | |||
652 | viewportHeight = MochiKit.Style.getViewportDimensions()['h']; | ||
653 | viewportY = MochiKit.Style.getViewportPosition()['y']; | ||
654 | |||
655 | if ((y + scrollHeight) > (viewportY + viewportHeight)) { | ||
656 | this.setDisplayMode('scrollable'); | ||
657 | MochiKit.DOM.addElementClass(this.element(), 'scrollable'); | ||
658 | MochiKit.DOM.removeElementClass(this.element(), 'fixed'); | ||
659 | MochiKit.Style.setElementPosition(this.displayElement(), {y:Math.max(0, Math.min(y, (viewportY + viewportHeight) - scrollHeight))}, 'px'); | ||
660 | MochiKit.Visual.ScrollTo(this.displayElement(), {duration:0.5}); | ||
661 | } else { | ||
662 | this.setDisplayMode('fixed'); | ||
663 | MochiKit.DOM.removeElementClass(this.element(), 'scrollable'); | ||
664 | MochiKit.DOM.addElementClass(this.element(), 'fixed'); | ||
665 | } | ||
666 | }, | ||
667 | |||
668 | //========================================================================= | ||
669 | |||
670 | 'unselectCurrentSelectedItems': function () { | ||
671 | MochiKit.Iter.forEach(MochiKit.Selector.findChildElements(this.displayElement(), ['.selectedField']), function (anElement) { | ||
672 | MochiKit.DOM.removeElementClass(anElement, 'selectedField'); | ||
673 | }); | ||
674 | }, | ||
675 | |||
676 | //========================================================================= | ||
677 | |||
678 | 'hideProgressMask': function () { | ||
679 | MochiKit.DOM.removeElementClass(this.getId('panel'), 'loading'); | ||
680 | }, | ||
681 | |||
682 | 'showProgressMask': function () { | ||
683 | this.getElement('progressDescription').innerHTML = "Saving"; | ||
684 | MochiKit.DOM.addElementClass(this.getId('panel'), 'loading'); | ||
685 | }, | ||
686 | |||
687 | 'showError': function (anError) { | ||
688 | //console.log(">>> showError", anError); | ||
689 | MochiKit.Style.hideElement(this.getId('progress')); | ||
690 | this.getElement('errorMessage').innerHTML = Clipperz.PM.Strings.errorDescriptionForException(anError['message']); | ||
691 | MochiKit.Style.showElement(this.getId('error')); | ||
692 | }, | ||
693 | |||
694 | //------------------------------------------------------------------------- | ||
695 | |||
696 | 'cancel': function () { | ||
697 | /* | ||
698 | var deferredResult; | ||
699 | |||
700 | deferredResult = new Clipperz.Async.Deferred("CardDialogComponent.cancel", {trace:false}); | ||
701 | deferredResult.addCallback(MochiKit.Base.method(this, 'isSavingEnabled')); | ||
702 | deferredResult.addIf([ | ||
703 | MochiKit.Base.method(this, 'askConfirmationForLoosingPendingChanges') | ||
704 | ], []); | ||
705 | deferredResult.addCallback(MochiKit.Base.partial(MochiKit.Signal.signal, this, 'cancel')); | ||
706 | deferredResult.callback(); | ||
707 | |||
708 | return deferredResult; | ||
709 | */ | ||
710 | MochiKit.Signal.signal(this, 'cancel'); | ||
711 | }, | ||
712 | |||
713 | 'handleCancelEvent': function (anEvent) { | ||
714 | anEvent.preventDefault(); | ||
715 | this.cancel(); | ||
716 | }, | ||
717 | |||
718 | //------------------------------------------------------------------------- | ||
719 | |||
720 | 'handleSaveEvent': function (anEvent) { | ||
721 | anEvent.preventDefault(); | ||
722 | |||
723 | if (! MochiKit.DOM.hasElementClass(anEvent.src(), 'disabled')) { | ||
724 | MochiKit.Signal.signal(this, 'save'); | ||
725 | } | ||
726 | }, | ||
727 | |||
728 | //------------------------------------------------------------------------- | ||
729 | |||
730 | 'handleAddDirectLogin': function (anEvent) { | ||
731 | anEvent.preventDefault(); | ||
732 | |||
733 | MochiKit.Signal.signal(this, 'addDirectLogin'); | ||
734 | }, | ||
735 | |||
736 | //------------------------------------------------------------------------- | ||
737 | |||
738 | 'handleOnFocusEvent': function (anElement, anEvent) { | ||
739 | this.unselectCurrentSelectedItems(); | ||
740 | MochiKit.DOM.addElementClass(anElement, 'selectedField'); | ||
741 | }, | ||
742 | |||
743 | 'handleLooseFocusEvent': function (anElement, anEvent) { | ||
744 | this.unselectCurrentSelectedItems(); | ||
745 | }, | ||
746 | |||
747 | //------------------------------------------------------------------------- | ||
748 | |||
749 | 'handleTabSelected': function (aSelectedTab) { | ||
750 | this.unselectCurrentSelectedItems(); | ||
751 | |||
752 | switch (aSelectedTab) { | ||
753 | case 'DETAILS': | ||
754 | // MochiKit.Style.hideElement(this.getElement('addDirectLoginButton')); | ||
755 | break; | ||
756 | case 'DIRECT_LOGINS': | ||
757 | // MochiKit.Style.showElement(this.getElement('addDirectLoginButton')); | ||
758 | break; | ||
759 | case 'SHARING': | ||
760 | // MochiKit.Style.hideElement(this.getElement('addDirectLoginButton')); | ||
761 | break; | ||
762 | } | ||
763 | }, | ||
764 | |||
765 | //------------------------------------------------------------------------- | ||
766 | |||
767 | 'handleKeyEvent': function (anEvent) { | ||
768 | //console.log("####", anEvent.key().string); | ||
769 | if (anEvent.key().string == 'KEY_ESCAPE') { | ||
770 | MochiKit.Signal.signal(this, 'changedValue'); | ||
771 | this.cancel(); | ||
772 | } else if (anEvent.key().string == 'KEY_ENTER') { | ||
773 | if (anEvent.target().nodeName == 'TEXTAREA') { | ||
774 | |||
775 | } else { | ||
776 | anEvent.preventDefault(); | ||
777 | } | ||
778 | } | ||
779 | }, | ||
780 | |||
781 | //========================================================================= | ||
782 | |||
783 | 'askConfirmationForLoosingPendingChanges': function () { | ||
784 | var deferredResult; | ||
785 | var confirmationDialog; | ||
786 | |||
787 | confirmationDialog = new Clipperz.PM.UI.Common.Components.SimpleMessagePanel({ | ||
788 | title:"Alert", | ||
789 | text:"Should lost pending changes?", | ||
790 | type:'ALERT', | ||
791 | buttons: [ | ||
792 | {text:"Cancel",result:'CANCEL', isDefault:true}, | ||
793 | {text:"Ok", result:'OK'} | ||
794 | ] | ||
795 | }); | ||
796 | |||
797 | deferredResult = new Clipperz.Async.Deferred("CardDialogComponent.askConfirmationForLoosingPendingChanges", {trace:false}); | ||
798 | // deferredResult = confirmationDialog.deferredShow({openFromElement:anEvent.src(), onOkCloseToElement:MochiKit.DOM.currentDocument().body, onCancelCloseToElement:anEvent.src()}); | ||
799 | deferredResult.addMethod(confirmationDialog, 'deferredShow', { | ||
800 | 'openFromElement': this.getElement('cancelButton'), | ||
801 | 'onOkCloseToElement': null, //this.getElement('cancelButton'), | ||
802 | 'onCancelCloseToElement':this.getElement('cancelButton') | ||
803 | }); | ||
804 | // deferredResult.addCallback(function () { console.log("DELETE: " + anObject.toString(), anObject); }); | ||
805 | // deferredResult.addErrbackPass(function () { console.log("skip deletion: " + anObject.toString(), anObject); }); | ||
806 | deferredResult.callback(); | ||
807 | |||
808 | return deferredResult; | ||
809 | }, | ||
810 | |||
811 | //========================================================================= | ||
812 | |||
813 | 'showDirectLoginEditingComponent': function () { | ||
814 | varwidth; | ||
815 | var transition; | ||
816 | var duration; | ||
817 | |||
818 | width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w']; | ||
819 | transition = MochiKit.Visual.Transitions.sinoidal; | ||
820 | duration = 1; | ||
821 | |||
822 | return Clipperz.Async.callbacks("CardDialogComponent.showDirectLoginEditingComponent", [ | ||
823 | MochiKit.Base.method(this, 'disableCardTitleEditing'), | ||
824 | MochiKit.Base.method(this.tabPanelController(), 'disable'), | ||
825 | |||
826 | MochiKit.Base.bind(function () { | ||
827 | MochiKit.Style.setElementPosition (this.getElement('directLoginEditDetail'), {x:width, y:-MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']}); | ||
828 | MochiKit.Style.setElementDimensions(this.getElement('directLoginEditDetail'), {w:width}); | ||
829 | MochiKit.Style.showElement(this.getElement('directLoginEditDetail')); | ||
830 | MochiKit.Style.setOpacity(this.getElement('directLoginEditDetail'), 0); | ||
831 | MochiKit.Style.setElementDimensions(this.getElement('directLoginsComponentContainer'), { | ||
832 | h:Math.max( | ||
833 | MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h'], | ||
834 | MochiKit.Style.getElementDimensions(this.getElement('directLoginEditDetail'))['h'] | ||
835 | ) | ||
836 | }); | ||
837 | // MochiKit.Style.setElementDimensions(this.getElement('directLoginsComponentContainer'), {h:MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']}); | ||
838 | }, this), | ||
839 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimations,MochiKit.Visual.Parallel, [ | ||
840 | new MochiKit.Visual.Move(this.getElement('directLogins'), {x:-width, y:0, mode:'relative', transition:transition, sync:true}), | ||
841 | new MochiKit.Visual.Opacity(this.getElement('directLogins'), {from:1.0, to:0.0, transition:transition, sync:true}), | ||
842 | new MochiKit.Visual.Move(this.getElement('directLoginEditDetail'), {x:-width, y:0, mode:'relative', transition:transition, sync:true}), | ||
843 | new MochiKit.Visual.Opacity(this.getElement('directLoginEditDetail'),{from:0.0, to:1.0, transition:transition, sync:true}) | ||
844 | ], {duration:duration}), | ||
845 | |||
846 | MochiKit.Base.noop | ||
847 | ], {trace:false}); | ||
848 | }, | ||
849 | |||
850 | //------------------------------------------------------------------------- | ||
851 | |||
852 | 'hideDirectLoginEditingComponent': function () { | ||
853 | varwidth; | ||
854 | var transition; | ||
855 | var duration; | ||
856 | |||
857 | width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w']; | ||
858 | transition = MochiKit.Visual.Transitions.sinoidal; | ||
859 | duration = 1; | ||
860 | |||
861 | return Clipperz.Async.callbacks("CardDialogComponent.hideDirectLoginEditingComponent", [ | ||
862 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimations,MochiKit.Visual.Parallel, [ | ||
863 | new MochiKit.Visual.Move(this.getElement('directLogins'), {x:width, y:0, mode:'relative', transition:transition, sync:true}), | ||
864 | new MochiKit.Visual.Opacity(this.getElement('directLogins'), {from:0.0, to:1.0, transition:transition, sync:true}), | ||
865 | new MochiKit.Visual.Move(this.getElement('directLoginEditDetail'), {x:width, y:0, mode:'relative', transition:transition, sync:true}), | ||
866 | new MochiKit.Visual.Opacity(this.getElement('directLoginEditDetail'),{from:1.0, to:0.0, transition:transition, sync:true}) | ||
867 | ], {duration:duration}), | ||
868 | // MochiKit.Base.partial(MochiKit.Visual.appear, this.getElement('addDirectLoginButton'), {duration:0.3}), | ||
869 | Clipperz.Async.clearResult, | ||
870 | MochiKit.Base.partial(MochiKit.Style.hideElement, this.getElement('directLoginEditDetail')), | ||
871 | // MochiKit.Base.partial(MochiKit.Style.showElement, this.getElement('directLogins')), | ||
872 | MochiKit.Base.partial(MochiKit.Style.setElementDimensions, this.getElement('directLoginsComponentContainer'), {h:MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']}), | ||
873 | |||
874 | MochiKit.Base.method(this, 'enableCardTitleEditing'), | ||
875 | MochiKit.Base.method(this.tabPanelController(), 'enable') | ||
876 | ], {trace:false}); | ||
877 | }, | ||
878 | |||
879 | //========================================================================= | ||
880 | __syntaxFix__: "syntax fix" | ||
881 | }); | ||