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/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.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/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.js | 324 |
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 | |||
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.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 | |||
46 | Clipperz.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:' '}, | ||
100 | {tag:'a', href:'#', id:this.getId('smallPreviousButton'),cls:'smallButton previous', html:' '}, | ||
101 | {tag:'a', href:'#', id:this.getId('smallNextButton'), cls:'smallButton next', html:' '}, | ||
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 | }); | ||