summaryrefslogtreecommitdiff
path: root/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js
Unidiff
Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js324
1 files changed, 324 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js
new file mode 100644
index 0000000..ab8a38c
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js
@@ -0,0 +1,324 @@
1/*
2
3Copyright 2008-2011 Clipperz Srl
4
5This file is part of Clipperz's Javascript Crypto Library.
6Javascript Crypto Library provides web developers with an extensive
7and efficient set of cryptographic functions. The library aims to
8obtain maximum execution speed while preserving modularity and
9reusability.
10For further information about its features and functionalities please
11refer 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
29Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
30
31Clipperz.PM.UI.Web.Components.RulerComponent = function(args) {
32 args = args || {};
33 Clipperz.PM.UI.Web.Components.RulerComponent.superclass.constructor.apply(this, arguments);
34
35 this._translationContext = args.translationContext|| Clipperz.Base.exception.raise('MandatoryParameter');
36 // this._steps = args.steps || Clipperz.Base.exception.raise('MandatoryParameter');
37 this._steps = args.steps;
38
39 this._currentStep = -1;
40
41 return this;
42}
43
44//=============================================================================
45
46Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.RulerComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
47
48 //-------------------------------------------------------------------------
49
50 'toString': function () {
51 return "Clipperz.PM.UI.Web.Components.RulerComponent component";
52 },
53
54 //-------------------------------------------------------------------------
55
56 'resetStatus': function (args) {
57 args = args || {};
58
59 if (this.currentStep() != 0) {
60 var shouldAnimateTransition;
61
62 shouldAnimateTransition = args.animateTransition || false;
63
64 if (shouldAnimateTransition) {
65 this.moveToFirstStep(MochiKit.Base.method(this, 'cursorMoved'));
66 } else {
67 this._currentStep = 0;
68 this.cursorMoved();
69 }
70 }
71 },
72
73 //-------------------------------------------------------------------------
74
75 'translationContext': function () {
76 return this._translationContext;
77 },
78
79 'steps': function () {
80 return this._steps;
81 },
82
83 'setSteps': function (aValue) {
84 this._steps = aValue;
85 this.renderStepsComponents();
86 this.resetStatus();
87 },
88
89 'translatedStepDescription': function (aStep) {
90 return Clipperz.PM.Strings.getValue(this.translationContext() + '.' + aStep + '.' + 'name');
91 },
92
93 //-------------------------------------------------------------------------
94
95 'renderSelf': function(/*aContainer, aPosition*/) {
96 this.setElement(this.append(MochiKit.DOM.currentDocument().body, [
97 {tag:'div', id:this.getId('rulerWrapper'), cls:'rulerWrapper fixed', children:[
98 {tag:'div', cls:'ruler', children:[
99 {tag:'a', href:'#', id:this.getId('exit'), cls:'exit', html:'&nbsp;'},
100 {tag:'a', href:'#', id:this.getId('smallPreviousButton'),cls:'smallButton previous', html:'&nbsp;'},
101 {tag:'a', href:'#', id:this.getId('smallNextButton'), cls:'smallButton next', html:'&nbsp;'},
102 {tag:'div', cls:'marker', id:this.getId('marker'), children:[
103 {tag:'div', cls:'previous', id:this.getId('previousButton')},
104 {tag:'div', cls:'markerBody'},
105 {tag:'div', cls:'next', id:this.getId('nextButton')}
106 ]},
107 {tag:'div', cls:'steps', id:this.getId('stepsFrame')},
108 // {tag:'div', cls:'steps' + ' ' + 'steps_' + this.steps().length, children:[
109 // {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map(MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this), this.steps())}
110 // ]},
111 {tag:'div', cls:'dots', id:this.getId('dotsFrame')}
112 // {tag:'div', cls:'dots' + ' ' + 'steps_' + this.steps().length, children:[
113 // {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}}, this.steps())}
114 // ]}
115 ]}
116 ]}
117 ]));
118//console.log("ELEMENT", this.element());
119
120 MochiKit.Signal.connect(this.getElement('exit'), 'onclick', this, 'handleExit');
121
122 MochiKit.Signal.connect(this.getElement('previousButton'), 'onclick', this, 'handlePrevious');
123 MochiKit.Signal.connect(this.getElement('smallPreviousButton'),'onclick', this, 'handlePrevious');
124
125 MochiKit.Signal.connect(this.getElement('nextButton'), 'onclick', this, 'handleNext');
126 MochiKit.Signal.connect(this.getElement('smallNextButton'), 'onclick', this, 'handleNext');
127
128 this.enablePrevious(false);
129 this.enableNext(false);
130
131 // this.cursorMoved();
132 },
133
134 //.........................................................................
135
136 'renderStepsComponents': function () {
137 varstepsFrame;
138 var dotsFrame;
139
140 stepsFrames = this.getElement('stepsFrame');
141 MochiKit.DOM.setElementClass(stepsFrames, 'steps');
142 MochiKit.DOM.addElementClass(stepsFrames, 'steps_' + this.steps().length);
143
144 stepsFrames.innerHTML = "";
145 this.append(stepsFrames, {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map(
146 MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this),
147 this.steps())}
148 );
149
150 dotsFrames = this.getElement('dotsFrame');
151 MochiKit.DOM.setElementClass(dotsFrames, 'dots');
152 MochiKit.DOM.addElementClass(dotsFrames, 'steps_' + this.steps().length);
153
154 dotsFrames.innerHTML = "";
155 this.append(dotsFrames, {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(
156 function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}; },
157 this.steps())}
158 );
159 },
160
161 //-------------------------------------------------------------------------
162
163 'handleExit': function (anEvent) {
164 anEvent.preventDefault();
165
166 MochiKit.Signal.signal(this, 'exit');
167 },
168
169 //-------------------------------------------------------------------------
170
171 'handlePrevious': function (anEvent) {
172 anEvent.preventDefault();
173
174 // if (!MochiKit.DOM.hasElementClass(this.getElement('previousButton'), 'disabled')) {
175 // this.moveBackward();
176 // }
177
178 MochiKit.Signal.signal(this, 'moveBackward');
179 },
180
181 'handleNext': function (anEvent) {
182 anEvent.preventDefault();
183
184 // if (!MochiKit.DOM.hasElementClass(this.getElement('nextButton'), 'disabled')) {
185 // this.moveForward();
186 // }
187
188 MochiKit.Signal.signal(this, 'moveForward');
189 },
190
191 //-------------------------------------------------------------------------
192
193 'currentStep': function () {
194 return this._currentStep;
195 },
196
197 'markerInitialOffset': function () {
198 return -246;
199 },
200
201 'markerStepOffset': function () {
202 return 410 / (this.steps().length - 1);
203 // return 100;
204 },
205
206 //-------------------------------------------------------------------------
207
208 'moveToFirstStep': function (aCallback) {
209 varstepsToMove;
210
211 stepsToMove = this._currentStep;
212 this._currentStep = 0;
213
214 this.enablePrevious(false);
215 this.enableNext(false);
216 // MochiKit.Signal.signal(this, 'moveBackward');
217 MochiKit.Base.map(
218 function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
219 MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
220 );
221 new MochiKit.Visual.Move(this.getElement('marker'), {
222 x:-(this.markerStepOffset() * stepsToMove),
223 mode:'relative',
224 duration:(0.5 * (stepsToMove/2)),
225 // afterFinish:MochiKit.Base.method(this, 'cursorMoved')
226 afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
227 });
228 },
229
230 'moveBackward': function (aCallback) {
231 this._currentStep --;
232
233 this.enablePrevious(false);
234 this.enableNext(false);
235 // MochiKit.Signal.signal(this, 'moveBackward');
236 MochiKit.Base.map(
237 function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
238 MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
239 );
240 new MochiKit.Visual.Move(this.getElement('marker'), {
241 x:-this.markerStepOffset(),
242 mode:'relative',
243 duration:0.5,
244 // afterFinish:MochiKit.Base.method(this, 'cursorMoved')
245 afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
246 });
247 },
248
249 'moveForward': function (aCallback) {
250 this._currentStep ++;
251
252 if (this._currentStep < this.steps().length) {
253 this.enablePrevious(false);
254 this.enableNext(false);
255 // MochiKit.Signal.signal(this, 'moveForward');
256 MochiKit.Base.map(
257 function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
258 MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
259 );
260 new MochiKit.Visual.Move(this.getElement('marker'), {
261 x:this.markerStepOffset(),
262 mode:'relative',
263 duration:0.5,
264 // afterFinish:MochiKit.Base.method(this, 'cursorMoved')
265 afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
266 });
267 } else {
268 MochiKit.Signal.signal(this, 'done');
269 }
270 },
271
272 //-------------------------------------------------------------------------
273
274 'enablePrevious': function (aValue) {
275 if (aValue == true) {
276 MochiKit.DOM.removeElementClass(this.getElement('previousButton'), 'disabled');
277 MochiKit.DOM.removeElementClass(this.getElement('smallPreviousButton'), 'disabled');
278 } else {
279 MochiKit.DOM.addElementClass(this.getElement('previousButton'), 'disabled');
280 MochiKit.DOM.addElementClass(this.getElement('smallPreviousButton'), 'disabled');
281 }
282 },
283
284 //'disablePrevious': function () {
285 // MochiKit.DOM.addElementClass(this.getElement('previousButton'), 'disabled');
286 //},
287
288 //.........................................................................
289
290 'enableNext': function (aValue) {
291 if (aValue == true) {
292 MochiKit.DOM.removeElementClass(this.getElement('nextButton'), 'disabled');
293 MochiKit.DOM.removeElementClass(this.getElement('smallNextButton'), 'disabled');
294 } else {
295 MochiKit.DOM.addElementClass(this.getElement('nextButton'), 'disabled');
296 MochiKit.DOM.addElementClass(this.getElement('smallNextButton'), 'disabled');
297 }
298 },
299
300 //'disableNext': function () {
301 // MochiKit.DOM.addElementClass(this.getElement('nextButton'), 'disabled');
302 //},
303
304 //-------------------------------------------------------------------------
305
306 'cursorMoved': function () {
307 MochiKit.Style.setElementPosition(this.getElement('marker'), {x:this.markerStepOffset() * this.currentStep() + this.markerInitialOffset()})
308 MochiKit.Signal.signal(this, 'cursorMoved');
309
310 MochiKit.DOM.addElementClass(this.getElement('steps').childNodes[this.currentStep()], 'selected');
311 MochiKit.DOM.addElementClass(this.getElement('dots').childNodes[this.currentStep()], 'selected');
312 },
313
314 //-------------------------------------------------------------------------
315
316 'setDisplayMode': function (aValue) {
317 MochiKit.DOM.removeElementClass(this.getElement('rulerWrapper'), 'fixed');
318 MochiKit.DOM.removeElementClass(this.getElement('rulerWrapper'), 'scrollable');
319 MochiKit.DOM.addElementClass(this.getElement('rulerWrapper'), aValue);
320 },
321
322 //-------------------------------------------------------------------------
323 __syntaxFix__: "syntax fix"
324});