Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js | 481 |
1 files changed, 481 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js new file mode 100644 index 0000000..d254c29 --- a/dev/null +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js | |||
@@ -0,0 +1,481 @@ | |||
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.DirectLoginEditingComponent = function(args) { | ||
32 | args = args || {}; | ||
33 | |||
34 | Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent.superclass.constructor.apply(this, arguments); | ||
35 | |||
36 | this._tabPanelController = null; | ||
37 | |||
38 | this._initiallySelectedTab = args.selected || 'TYPE'; | ||
39 | this._tabPanelControllerConfiguration = { | ||
40 | 'LABEL': { | ||
41 | tab:'labelTab', | ||
42 | panel:'labelTabpanel' | ||
43 | }, | ||
44 | 'TYPE': { | ||
45 | tab:'typeTab', | ||
46 | panel:'typeTabpanel' | ||
47 | }, | ||
48 | 'CONFIGURATION': { | ||
49 | tab:'configurationTab', | ||
50 | panel:'configurationTabpanel' | ||
51 | }, | ||
52 | 'BINDINGS': { | ||
53 | tab:'bindingsTab', | ||
54 | panel:'bindingsTabpanel' | ||
55 | }, | ||
56 | 'FAVICON': { | ||
57 | tab:'faviconTab', | ||
58 | panel:'faviconTabpanel' | ||
59 | }, | ||
60 | 'DONE': { | ||
61 | tab:'doneTab', | ||
62 | panel:'doneTabpanel' | ||
63 | } | ||
64 | }; | ||
65 | |||
66 | this._directLoginReference = null; | ||
67 | |||
68 | this._directLoginFavicon = null; | ||
69 | |||
70 | this._updateFaviconCounter = 0; | ||
71 | this._faviconComponent = null; | ||
72 | |||
73 | this._bindingComponents= []; | ||
74 | this._formValueComponents = []; | ||
75 | |||
76 | return this; | ||
77 | } | ||
78 | |||
79 | //============================================================================= | ||
80 | |||
81 | //Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent, Clipperz.PM.UI.Common.Components.BaseComponent, { | ||
82 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent, Clipperz.PM.UI.Common.Components.TabPanelComponent, { | ||
83 | |||
84 | //------------------------------------------------------------------------- | ||
85 | |||
86 | 'toString': function () { | ||
87 | return "Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent component"; | ||
88 | }, | ||
89 | |||
90 | //========================================================================= | ||
91 | |||
92 | 'directLoginReference': function () { | ||
93 | return this._directLoginReference; | ||
94 | }, | ||
95 | |||
96 | //------------------------------------------------------------------------- | ||
97 | |||
98 | 'setDirectLoginReference': function (aDirectLoginReference) { | ||
99 | this._directLoginReference = aDirectLoginReference; | ||
100 | |||
101 | return this._directLoginReference; | ||
102 | }, | ||
103 | |||
104 | //========================================================================= | ||
105 | |||
106 | 'label': function () { | ||
107 | return this.getElement('label').value | ||
108 | }, | ||
109 | |||
110 | 'setLabel': function (aValue) { | ||
111 | //console.log("##> LABEL: " + aValue); | ||
112 | this.getElement('label').value = (aValue ? aValue : ''); | ||
113 | }, | ||
114 | |||
115 | //------------------------------------------------------------------------- | ||
116 | |||
117 | 'favicon': function () { | ||
118 | return this.getElement('faviconURL').value; | ||
119 | }, | ||
120 | |||
121 | 'setFavicon': function (aValue) { | ||
122 | var regexp; | ||
123 | var displayValue; | ||
124 | |||
125 | regexp = new RegExp('^data\:\/\/.*', 'i'); | ||
126 | if (regexp.test(aValue)) { | ||
127 | displayValue = '' | ||
128 | } else { | ||
129 | displayValue = (aValue ? aValue : ''); | ||
130 | } | ||
131 | |||
132 | this.getElement('faviconURL').value = displayValue; | ||
133 | this.faviconComponent().setSrc(aValue); | ||
134 | }, | ||
135 | |||
136 | //'setFaviconData': function (aValue) { | ||
137 | // this.getElement('faviconIcon').src = aValue; | ||
138 | //}, | ||
139 | |||
140 | 'directLoginFavicon': function () { | ||
141 | return this._directLoginFavicon; | ||
142 | }, | ||
143 | |||
144 | 'setDirectLoginFavicon': function (aValue) { | ||
145 | this._directLoginFavicon = aValue; | ||
146 | this.setFavicon(aValue); | ||
147 | }, | ||
148 | |||
149 | //------------------------------------------------------------------------- | ||
150 | |||
151 | 'bookmarkletConfiguration': function () { | ||
152 | return this.getElement('bookmarkletConfiguration').value | ||
153 | }, | ||
154 | |||
155 | 'setBookmarkletConfiguration': function (aValue) { | ||
156 | this.getElement('bookmarkletConfiguration').value = aValue; | ||
157 | }, | ||
158 | |||
159 | 'highlightConfigurationSyntaxError': function () { | ||
160 | MochiKit.DOM.addElementClass(this.getElement('bookmarkletConfiguration'), 'error'); | ||
161 | }, | ||
162 | |||
163 | 'removeHighlightConfigurationSyntaxError': function () { | ||
164 | MochiKit.DOM.removeElementClass(this.getElement('bookmarkletConfiguration'), 'error'); | ||
165 | }, | ||
166 | |||
167 | //========================================================================= | ||
168 | |||
169 | 'disableAllPanels': function () { | ||
170 | this.getElement('label').disabled = true; | ||
171 | MochiKit.DOM.addElementClass(this.getElement('label').parentNode, 'disabled'); | ||
172 | |||
173 | this.tabPanelController().selectTab(null); | ||
174 | }, | ||
175 | |||
176 | //------------------------------------------------------------------------- | ||
177 | |||
178 | //'disableLabelField': function () { | ||
179 | // this.getElement('label').disabled = true; | ||
180 | // MochiKit.DOM.addElementClass(this.getElement('label').parentNode, 'disabled'); | ||
181 | //}, | ||
182 | |||
183 | 'enableLabelField': function () { | ||
184 | this.getElement('label').disabled = false; | ||
185 | MochiKit.DOM.removeElementClass(this.getElement('label').parentNode, 'disabled'); | ||
186 | this.tabPanelController().selectTab('LABEL'); | ||
187 | }, | ||
188 | |||
189 | //------------------------------------------------------------------------- | ||
190 | |||
191 | //'disableTypeField': function () { | ||
192 | // this.tabPanelController().selectTab(null); | ||
193 | //}, | ||
194 | |||
195 | 'enableTypeField': function () { | ||
196 | this.tabPanelController().selectTab('TYPE'); | ||
197 | }, | ||
198 | |||
199 | //------------------------------------------------------------------------- | ||
200 | |||
201 | //'disableConfigurationField': function () { | ||
202 | // this.tabPanelController().selectTab(null); | ||
203 | //}, | ||
204 | |||
205 | 'enableConfigurationField': function () { | ||
206 | this.tabPanelController().selectTab('CONFIGURATION'); | ||
207 | }, | ||
208 | |||
209 | //------------------------------------------------------------------------- | ||
210 | |||
211 | //'disableBindingFields': function () { | ||
212 | // this.tabPanelController().selectTab(null); | ||
213 | //}, | ||
214 | |||
215 | 'enableBindingFields': function () { | ||
216 | this.tabPanelController().selectTab('BINDINGS'); | ||
217 | }, | ||
218 | |||
219 | //------------------------------------------------------------------------- | ||
220 | |||
221 | //'disableFaviconField': function () { | ||
222 | // this.tabPanelController().selectTab(null); | ||
223 | //}, | ||
224 | |||
225 | 'enableFaviconField': function () { | ||
226 | this.tabPanelController().selectTab('FAVICON'); | ||
227 | }, | ||
228 | |||
229 | //------------------------------------------------------------------------- | ||
230 | |||
231 | 'enableDonePanel': function () { | ||
232 | this.tabPanelController().selectTab('DONE'); | ||
233 | }, | ||
234 | |||
235 | //========================================================================= | ||
236 | |||
237 | 'shouldShowElementWhileRendering': function() { | ||
238 | return false; | ||
239 | }, | ||
240 | |||
241 | //========================================================================= | ||
242 | |||
243 | 'faviconComponent': function () { | ||
244 | if (this._faviconComponent == null) { | ||
245 | this._faviconComponent = new Clipperz.PM.UI.Common.Components.FaviconComponent({element:this.getId('favicon')}); | ||
246 | } | ||
247 | |||
248 | return this._faviconComponent; | ||
249 | }, | ||
250 | |||
251 | //========================================================================= | ||
252 | |||
253 | 'tabPanelController': function () { | ||
254 | if (this._tabPanelController == null) { | ||
255 | this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({ | ||
256 | component:this, | ||
257 | configuration:this._tabPanelControllerConfiguration | ||
258 | }); | ||
259 | |||
260 | MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected') | ||
261 | } | ||
262 | |||
263 | return this._tabPanelController; | ||
264 | }, | ||
265 | |||
266 | //------------------------------------------------------------------------- | ||
267 | |||
268 | 'renderSelf': function() { | ||
269 | varbookmarkletComponent; | ||
270 | |||
271 | this.append(this.element(), {tag:'div', cls:'directLoginEditing', id:this.getId('panel'), children: [ | ||
272 | // {tag:'div', cls:'back', children:[ | ||
273 | // {tag:'a', href:'#', id:this.getId('back'), html:" "} | ||
274 | // ]}, | ||
275 | {tag:'form', id:this.getId('form'), cls:'directLoginEditingForm', children:[ | ||
276 | {tag:'div', cls:'title', children:[ | ||
277 | {tag:'img', id:this.getId('favicon'), cls:'favicon'}, | ||
278 | {tag:'input', type:'text', id:this.getId('label')}//, | ||
279 | // {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.LABEL.description')}]}, | ||
280 | ]}, | ||
281 | {tag:'div', cls:'tabContainer', children:[ | ||
282 | {tag:'ul', cls:'tabs', children:[ | ||
283 | {tag:'li', id:this.getId('labelTab'), children:[{tag:'span', html:"label"}]}, | ||
284 | {tag:'li', id:this.getId('typeTab'), children:[{tag:'span', html:"type"}]}, | ||
285 | {tag:'li', id:this.getId('configurationTab'),children:[{tag:'span', html:"configuration"}]}, | ||
286 | {tag:'li', id:this.getId('bindingsTab'), children:[{tag:'span', html:"bindings"}]}, | ||
287 | {tag:'li', id:this.getId('faviconTab'), children:[{tag:'span', html:"favicon"}]}, | ||
288 | {tag:'li', id:this.getId('doneTab'), children:[{tag:'span', html:"done"}]} | ||
289 | ]}, | ||
290 | {tag:'ul', cls:'tabPanels', children:[ | ||
291 | {tag:'li', id:this.getId('labelTabpanel'), cls:'tabPanel label', children:[ | ||
292 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.LABEL.description')}]} | ||
293 | ]}, | ||
294 | {tag:'li', id:this.getId('typeTabpanel'), cls:'tabPanel type', children:[ | ||
295 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.TYPE.description')}]}, | ||
296 | {tag:'h2', html:"type"} | ||
297 | ]}, | ||
298 | {tag:'li', id:this.getId('configurationTabpanel'), cls:'tabPanel configuration', children:[ | ||
299 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.CONFIGURATION.description')}]}, | ||
300 | {tag:'div', cls:'bookmarkletConfigurationWrapper', children:[ | ||
301 | {tag:'textarea', id:this.getId('bookmarkletConfiguration'), value:""}, | ||
302 | // {tag:'div', cls:'bookmarkletComponentWrapper', children:[{tag:'div', id:this.getId('bookmarkletComponent'), cls:'bookmarkletComponent'}]} | ||
303 | {tag:'div', id:this.getId('bookmarkletComponent'), cls:'bookmarkletComponent'} | ||
304 | ]} | ||
305 | ]}, | ||
306 | {tag:'li', id:this.getId('bindingsTabpanel'), cls:'tabPanel bindings', children:[ | ||
307 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.BINDINGS.description')}]}, | ||
308 | {tag:'div', cls:'bindings', id:this.getId('bindings'), children:[]}, | ||
309 | {tag:'div', cls:'formValues', id:this.getId('formValues'), children:[]} | ||
310 | ]}, | ||
311 | {tag:'li', id:this.getId('faviconTabpanel'), cls:'tabPanel favicon', children:[ | ||
312 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.FAVICON.description')}]}, | ||
313 | {tag:'div', cls:'favicon', children:[ | ||
314 | {tag:'input', type:'text', id:this.getId('faviconURL')} | ||
315 | ]} | ||
316 | ]}, | ||
317 | {tag:'li', id:this.getId('doneTabpanel'), cls:'tabPanel done', children:[ | ||
318 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', id:this.getId('doneDescription')/*, html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description')*/}]} | ||
319 | ]} | ||
320 | ]} | ||
321 | ]} | ||
322 | ]}, | ||
323 | {tag:'div', cls:'clear'} | ||
324 | ]}); | ||
325 | |||
326 | bookmarkletComponent = new Clipperz.PM.UI.Web.Components.BookmarkletComponent({element:this.getElement('bookmarkletComponent')}); | ||
327 | bookmarkletComponent.render(); | ||
328 | |||
329 | this.tabPanelController().setup(/*{selected:this.initiallySelectedTab()}*/); | ||
330 | |||
331 | MochiKit.Signal.connect(this.getId('label'), 'onchange', this, 'changedValue'); | ||
332 | MochiKit.Signal.connect(this.getId('label'), 'onkeyup', this, 'changedValue'); | ||
333 | |||
334 | MochiKit.Signal.connect(this.getId('bookmarkletConfiguration'),'onchange', this, 'changedValue'); | ||
335 | MochiKit.Signal.connect(this.getId('bookmarkletConfiguration'),'onkeyup', this, 'changedValue'); | ||
336 | |||
337 | MochiKit.Signal.connect(this.getId('faviconURL'), 'onchange', this, 'changedValue'); | ||
338 | MochiKit.Signal.connect(this.getId('faviconURL'), 'onkeyup', this, 'changedValue'); | ||
339 | |||
340 | MochiKit.Signal.connect(this.getId('panel'), 'onkeydown',this, 'handleKeyEvent'); | ||
341 | }, | ||
342 | |||
343 | //------------------------------------------------------------------------- | ||
344 | |||
345 | 'handleTabSelected': function (aSelectedTab) { | ||
346 | switch (aSelectedTab) { | ||
347 | case 'DETAILS': | ||
348 | break; | ||
349 | case 'DIRECT_LOGINS': | ||
350 | MochiKit.Style.hideElement(this.getElement('backToDirectLoginList')); | ||
351 | break; | ||
352 | case 'SHARING': | ||
353 | break; | ||
354 | } | ||
355 | }, | ||
356 | |||
357 | //========================================================================= | ||
358 | |||
359 | 'incrementUpdateFaviconCounter': function () { | ||
360 | this._updateFaviconCounter ++; | ||
361 | }, | ||
362 | |||
363 | 'decrementUpdateFaviconCounter': function () { | ||
364 | this._updateFaviconCounter --; | ||
365 | }, | ||
366 | |||
367 | 'updateFaviconCounter': function () { | ||
368 | return this._updateFaviconCounter; | ||
369 | }, | ||
370 | |||
371 | //------------------------------------------------------------------------- | ||
372 | |||
373 | 'updateFavicon': function () { | ||
374 | this.decrementUpdateFaviconCounter(); | ||
375 | |||
376 | if (this.updateFaviconCounter() == 0) { | ||
377 | this.setFavicon(this.favicon()); | ||
378 | } | ||
379 | }, | ||
380 | |||
381 | //========================================================================= | ||
382 | |||
383 | 'bindingComponents': function () { | ||
384 | return this._bindingComponents; | ||
385 | }, | ||
386 | |||
387 | 'clearAllBindingsComponents': function () { | ||
388 | MochiKit.Iter.forEach(this.bindingComponents(), MochiKit.Base.methodcaller('remove')); | ||
389 | this._bindingComponents = []; | ||
390 | this.getElement('bindings').innerHTML = ''; | ||
391 | }, | ||
392 | |||
393 | 'addBindingComponent': function (aBindingComponent) { | ||
394 | this.bindingComponents().push(aBindingComponent); | ||
395 | aBindingComponent.renderInNode(this.append(this.getElement('bindings'), {tag:'div'})); | ||
396 | }, | ||
397 | |||
398 | //========================================================================= | ||
399 | |||
400 | 'formValueComponents': function () { | ||
401 | return this._formValueComponents; | ||
402 | }, | ||
403 | |||
404 | 'clearAllFormValueComponents': function () { | ||
405 | MochiKit.Iter.forEach(this.formValueComponents(), MochiKit.Base.methodcaller('remove')); | ||
406 | this._formValueComponents = []; | ||
407 | this.getElement('formValues').innerHTML = ''; | ||
408 | }, | ||
409 | |||
410 | 'addFormValueComponent': function (aFormValueComponent) { | ||
411 | this.formValueComponents().push(aFormValueComponent); | ||
412 | aFormValueComponent.renderInNode(this.append(this.getElement('formValues'), {tag:'div'})); | ||
413 | }, | ||
414 | |||
415 | //========================================================================= | ||
416 | |||
417 | 'changedValue': function (anEvent) { | ||
418 | MochiKit.Signal.signal(this, 'changedValue', anEvent); | ||
419 | |||
420 | this.incrementUpdateFaviconCounter(); | ||
421 | MochiKit.Async.callLater(1, MochiKit.Base.method(this, 'updateFavicon')); | ||
422 | }, | ||
423 | |||
424 | //------------------------------------------------------------------------- | ||
425 | |||
426 | 'handleBackClick': function (anEvent) { | ||
427 | anEvent.preventDefault(); | ||
428 | |||
429 | MochiKit.Signal.signal(this, 'back'); | ||
430 | }, | ||
431 | |||
432 | //========================================================================= | ||
433 | |||
434 | 'bottomMargin': function () { | ||
435 | returnMochiKit.Style.getElementPosition(this.element().parentNode)['y'] + | ||
436 | MochiKit.Style.getElementDimensions(this.element())['h']; | ||
437 | }, | ||
438 | |||
439 | //========================================================================= | ||
440 | |||
441 | 'focusOnLabelElement': function () { | ||
442 | this.getElement('label').focus(); | ||
443 | }, | ||
444 | |||
445 | 'focusOnBookmarkletConfigurationElement': function () { | ||
446 | this.getElement('bookmarkletConfiguration').focus(); | ||
447 | }, | ||
448 | |||
449 | 'focusOnFaviconElement': function () { | ||
450 | this.getElement('faviconURL').focus(); | ||
451 | }, | ||
452 | |||
453 | //========================================================================= | ||
454 | |||
455 | 'setDoneDescriptionWithKeys': function (someKeys) { | ||
456 | // {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', id:this.getId('doneDescription')/*, html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description')*/}]} | ||
457 | this.getElement('doneDescription').innerHTML = Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description', someKeys); | ||
458 | }, | ||
459 | |||
460 | //========================================================================= | ||
461 | |||
462 | 'handleKeyEvent': function (anEvent) { | ||
463 | MochiKit.Signal.signal(this, 'keyPressed', anEvent); | ||
464 | /* | ||
465 | if (anEvent.key().string == 'KEY_ENTER') { | ||
466 | if (anEvent.target().nodeName != 'TEXTAREA') { | ||
467 | MochiKit.Signal.signal(this, 'moveForward'); | ||
468 | anEvent.preventDefault(); | ||
469 | } | ||
470 | } else if (anEvent.key().string == 'KEY_TAB') { | ||
471 | if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) { | ||
472 | MochiKit.Signal.signal(this, 'moveForward'); | ||
473 | anEvent.preventDefault(); | ||
474 | } | ||
475 | } | ||
476 | */ | ||
477 | }, | ||
478 | |||
479 | //========================================================================= | ||
480 | __syntaxFix__: "syntax fix" | ||
481 | }); | ||