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 | 23 |
1 files changed, 10 insertions, 13 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 index 69c1ede..ad8d677 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js | |||
@@ -1,243 +1,240 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2011 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz Community Edition. | 5 | This file is part of Clipperz, the online password manager. |
6 | Clipperz Community Edition is an online password manager. | ||
7 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
8 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
9 | 8 | ||
10 | * Clipperz Community Edition is free software: you can redistribute | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
11 | it and/or modify it under the terms of the GNU Affero General Public | 10 | under the terms of the GNU Affero General Public License as published |
12 | License as published by the Free Software Foundation, either version | 11 | by the Free Software Foundation, either version 3 of the License, or |
13 | 3 of the License, or (at your option) any later version. | 12 | (at your option) any later version. |
14 | 13 | ||
15 | * Clipperz Community Edition is distributed in the hope that it will | 14 | * Clipperz is distributed in the hope that it will be useful, but |
16 | be useful, but WITHOUT ANY WARRANTY; without even the implied | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
17 | warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
18 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
19 | 18 | ||
20 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
21 | License along with Clipperz Community Edition. If not, see | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
22 | <http://www.gnu.org/licenses/>. | ||
23 | 21 | ||
24 | */ | 22 | */ |
25 | 23 | ||
26 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); |
27 | 25 | ||
28 | Clipperz.PM.UI.Web.Components.RulerComponent = function(args) { | 26 | Clipperz.PM.UI.Web.Components.RulerComponent = function(args) { |
29 | args = args || {}; | 27 | args = args || {}; |
30 | Clipperz.PM.UI.Web.Components.RulerComponent.superclass.constructor.apply(this, arguments); | 28 | Clipperz.PM.UI.Web.Components.RulerComponent.superclass.constructor.apply(this, arguments); |
31 | 29 | ||
32 | this._translationContext = args.translationContext|| Clipperz.Base.exception.raise('MandatoryParameter'); | 30 | this._translationContext = args.translationContext|| Clipperz.Base.exception.raise('MandatoryParameter'); |
33 | // this._steps = args.steps || Clipperz.Base.exception.raise('MandatoryParameter'); | 31 | // this._steps = args.steps || Clipperz.Base.exception.raise('MandatoryParameter'); |
34 | this._steps = args.steps; | 32 | this._steps = args.steps; |
35 | 33 | ||
36 | this._currentStep = -1; | 34 | this._currentStep = -1; |
37 | 35 | ||
38 | return this; | 36 | return this; |
39 | } | 37 | } |
40 | 38 | ||
41 | //============================================================================= | 39 | //============================================================================= |
42 | 40 | ||
43 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.RulerComponent, Clipperz.PM.UI.Common.Components.BaseComponent, { | 41 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.RulerComponent, Clipperz.PM.UI.Common.Components.BaseComponent, { |
44 | 42 | ||
45 | //------------------------------------------------------------------------- | 43 | //------------------------------------------------------------------------- |
46 | 44 | ||
47 | 'toString': function () { | 45 | 'toString': function () { |
48 | return "Clipperz.PM.UI.Web.Components.RulerComponent component"; | 46 | return "Clipperz.PM.UI.Web.Components.RulerComponent component"; |
49 | }, | 47 | }, |
50 | 48 | ||
51 | //------------------------------------------------------------------------- | 49 | //------------------------------------------------------------------------- |
52 | 50 | ||
53 | 'resetStatus': function (args) { | 51 | 'resetStatus': function (args) { |
54 | args = args || {}; | 52 | args = args || {}; |
55 | 53 | ||
56 | if (this.currentStep() != 0) { | 54 | if (this.currentStep() != 0) { |
57 | var shouldAnimateTransition; | 55 | var shouldAnimateTransition; |
58 | 56 | ||
59 | shouldAnimateTransition = args.animateTransition || false; | 57 | shouldAnimateTransition = args.animateTransition || false; |
60 | 58 | ||
61 | if (shouldAnimateTransition) { | 59 | if (shouldAnimateTransition) { |
62 | this.moveToFirstStep(MochiKit.Base.method(this, 'cursorMoved')); | 60 | this.moveToFirstStep(MochiKit.Base.method(this, 'cursorMoved')); |
63 | } else { | 61 | } else { |
64 | this._currentStep = 0; | 62 | this._currentStep = 0; |
65 | this.cursorMoved(); | 63 | this.cursorMoved(); |
66 | } | 64 | } |
67 | } | 65 | } |
68 | }, | 66 | }, |
69 | 67 | ||
70 | //------------------------------------------------------------------------- | 68 | //------------------------------------------------------------------------- |
71 | 69 | ||
72 | 'translationContext': function () { | 70 | 'translationContext': function () { |
73 | return this._translationContext; | 71 | return this._translationContext; |
74 | }, | 72 | }, |
75 | 73 | ||
76 | 'steps': function () { | 74 | 'steps': function () { |
77 | return this._steps; | 75 | return this._steps; |
78 | }, | 76 | }, |
79 | 77 | ||
80 | 'setSteps': function (aValue) { | 78 | 'setSteps': function (aValue) { |
81 | this._steps = aValue; | 79 | this._steps = aValue; |
82 | this.renderStepsComponents(); | 80 | this.renderStepsComponents(); |
83 | this.resetStatus(); | 81 | this.resetStatus(); |
84 | }, | 82 | }, |
85 | 83 | ||
86 | 'translatedStepDescription': function (aStep) { | 84 | 'translatedStepDescription': function (aStep) { |
87 | return Clipperz.PM.Strings.getValue(this.translationContext() + '.' + aStep + '.' + 'name'); | 85 | return Clipperz.PM.Strings.getValue(this.translationContext() + '.' + aStep + '.' + 'name'); |
88 | }, | 86 | }, |
89 | 87 | ||
90 | //------------------------------------------------------------------------- | 88 | //------------------------------------------------------------------------- |
91 | 89 | ||
92 | 'renderSelf': function(/*aContainer, aPosition*/) { | 90 | 'renderSelf': function(/*aContainer, aPosition*/) { |
93 | this.setElement(this.append(MochiKit.DOM.currentDocument().body, [ | 91 | this.setElement(this.append(MochiKit.DOM.currentDocument().body, [ |
94 | {tag:'div', id:this.getId('rulerWrapper'), cls:'rulerWrapper fixed', children:[ | 92 | {tag:'div', id:this.getId('rulerWrapper'), cls:'rulerWrapper fixed', children:[ |
95 | {tag:'div', cls:'ruler', children:[ | 93 | {tag:'div', cls:'ruler', children:[ |
96 | {tag:'a', href:'#', id:this.getId('exit'), cls:'exit', html:' '}, | 94 | {tag:'a', href:'#', id:this.getId('exit'), cls:'exit', html:' '}, |
97 | {tag:'a', href:'#', id:this.getId('smallPreviousButton'),cls:'smallButton previous', html:' '}, | 95 | {tag:'a', href:'#', id:this.getId('smallPreviousButton'),cls:'smallButton previous', html:' '}, |
98 | {tag:'a', href:'#', id:this.getId('smallNextButton'), cls:'smallButton next', html:' '}, | 96 | {tag:'a', href:'#', id:this.getId('smallNextButton'), cls:'smallButton next', html:' '}, |
99 | {tag:'div', cls:'marker', id:this.getId('marker'), children:[ | 97 | {tag:'div', cls:'marker', id:this.getId('marker'), children:[ |
100 | {tag:'div', cls:'previous', id:this.getId('previousButton')}, | 98 | {tag:'div', cls:'previous', id:this.getId('previousButton')}, |
101 | {tag:'div', cls:'markerBody'}, | 99 | {tag:'div', cls:'markerBody'}, |
102 | {tag:'div', cls:'next', id:this.getId('nextButton')} | 100 | {tag:'div', cls:'next', id:this.getId('nextButton')} |
103 | ]}, | 101 | ]}, |
104 | {tag:'div', cls:'steps', id:this.getId('stepsFrame')}, | 102 | {tag:'div', cls:'steps', id:this.getId('stepsFrame')}, |
105 | // {tag:'div', cls:'steps' + ' ' + 'steps_' + this.steps().length, children:[ | 103 | // {tag:'div', cls:'steps' + ' ' + 'steps_' + this.steps().length, children:[ |
106 | // {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())} | 104 | // {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())} |
107 | // ]}, | 105 | // ]}, |
108 | {tag:'div', cls:'dots', id:this.getId('dotsFrame')} | 106 | {tag:'div', cls:'dots', id:this.getId('dotsFrame')} |
109 | // {tag:'div', cls:'dots' + ' ' + 'steps_' + this.steps().length, children:[ | 107 | // {tag:'div', cls:'dots' + ' ' + 'steps_' + this.steps().length, children:[ |
110 | // {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}}, this.steps())} | 108 | // {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}}, this.steps())} |
111 | // ]} | 109 | // ]} |
112 | ]} | 110 | ]} |
113 | ]} | 111 | ]} |
114 | ])); | 112 | ])); |
115 | //console.log("ELEMENT", this.element()); | ||
116 | 113 | ||
117 | MochiKit.Signal.connect(this.getElement('exit'), 'onclick', this, 'handleExit'); | 114 | MochiKit.Signal.connect(this.getElement('exit'), 'onclick', this, 'handleExit'); |
118 | 115 | ||
119 | MochiKit.Signal.connect(this.getElement('previousButton'), 'onclick', this, 'handlePrevious'); | 116 | MochiKit.Signal.connect(this.getElement('previousButton'), 'onclick', this, 'handlePrevious'); |
120 | MochiKit.Signal.connect(this.getElement('smallPreviousButton'),'onclick', this, 'handlePrevious'); | 117 | MochiKit.Signal.connect(this.getElement('smallPreviousButton'),'onclick', this, 'handlePrevious'); |
121 | 118 | ||
122 | MochiKit.Signal.connect(this.getElement('nextButton'), 'onclick', this, 'handleNext'); | 119 | MochiKit.Signal.connect(this.getElement('nextButton'), 'onclick', this, 'handleNext'); |
123 | MochiKit.Signal.connect(this.getElement('smallNextButton'), 'onclick', this, 'handleNext'); | 120 | MochiKit.Signal.connect(this.getElement('smallNextButton'), 'onclick', this, 'handleNext'); |
124 | 121 | ||
125 | this.enablePrevious(false); | 122 | this.enablePrevious(false); |
126 | this.enableNext(false); | 123 | this.enableNext(false); |
127 | 124 | ||
128 | // this.cursorMoved(); | 125 | // this.cursorMoved(); |
129 | }, | 126 | }, |
130 | 127 | ||
131 | //......................................................................... | 128 | //......................................................................... |
132 | 129 | ||
133 | 'renderStepsComponents': function () { | 130 | 'renderStepsComponents': function () { |
134 | varstepsFrame; | 131 | varstepsFrame; |
135 | var dotsFrame; | 132 | var dotsFrame; |
136 | 133 | ||
137 | stepsFrames = this.getElement('stepsFrame'); | 134 | stepsFrames = this.getElement('stepsFrame'); |
138 | MochiKit.DOM.setElementClass(stepsFrames, 'steps'); | 135 | MochiKit.DOM.setElementClass(stepsFrames, 'steps'); |
139 | MochiKit.DOM.addElementClass(stepsFrames, 'steps_' + this.steps().length); | 136 | MochiKit.DOM.addElementClass(stepsFrames, 'steps_' + this.steps().length); |
140 | 137 | ||
141 | stepsFrames.innerHTML = ""; | 138 | stepsFrames.innerHTML = ""; |
142 | this.append(stepsFrames, {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map( | 139 | this.append(stepsFrames, {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map( |
143 | MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this), | 140 | MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this), |
144 | this.steps())} | 141 | this.steps())} |
145 | ); | 142 | ); |
146 | 143 | ||
147 | dotsFrames = this.getElement('dotsFrame'); | 144 | dotsFrames = this.getElement('dotsFrame'); |
148 | MochiKit.DOM.setElementClass(dotsFrames, 'dots'); | 145 | MochiKit.DOM.setElementClass(dotsFrames, 'dots'); |
149 | MochiKit.DOM.addElementClass(dotsFrames, 'steps_' + this.steps().length); | 146 | MochiKit.DOM.addElementClass(dotsFrames, 'steps_' + this.steps().length); |
150 | 147 | ||
151 | dotsFrames.innerHTML = ""; | 148 | dotsFrames.innerHTML = ""; |
152 | this.append(dotsFrames, {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map( | 149 | this.append(dotsFrames, {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map( |
153 | function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}; }, | 150 | function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}; }, |
154 | this.steps())} | 151 | this.steps())} |
155 | ); | 152 | ); |
156 | }, | 153 | }, |
157 | 154 | ||
158 | //------------------------------------------------------------------------- | 155 | //------------------------------------------------------------------------- |
159 | 156 | ||
160 | 'handleExit': function (anEvent) { | 157 | 'handleExit': function (anEvent) { |
161 | anEvent.preventDefault(); | 158 | anEvent.preventDefault(); |
162 | 159 | ||
163 | MochiKit.Signal.signal(this, 'exit'); | 160 | MochiKit.Signal.signal(this, 'exit'); |
164 | }, | 161 | }, |
165 | 162 | ||
166 | //------------------------------------------------------------------------- | 163 | //------------------------------------------------------------------------- |
167 | 164 | ||
168 | 'handlePrevious': function (anEvent) { | 165 | 'handlePrevious': function (anEvent) { |
169 | anEvent.preventDefault(); | 166 | anEvent.preventDefault(); |
170 | 167 | ||
171 | // if (!MochiKit.DOM.hasElementClass(this.getElement('previousButton'), 'disabled')) { | 168 | // if (!MochiKit.DOM.hasElementClass(this.getElement('previousButton'), 'disabled')) { |
172 | // this.moveBackward(); | 169 | // this.moveBackward(); |
173 | // } | 170 | // } |
174 | 171 | ||
175 | MochiKit.Signal.signal(this, 'moveBackward'); | 172 | MochiKit.Signal.signal(this, 'moveBackward'); |
176 | }, | 173 | }, |
177 | 174 | ||
178 | 'handleNext': function (anEvent) { | 175 | 'handleNext': function (anEvent) { |
179 | anEvent.preventDefault(); | 176 | anEvent.preventDefault(); |
180 | 177 | ||
181 | // if (!MochiKit.DOM.hasElementClass(this.getElement('nextButton'), 'disabled')) { | 178 | // if (!MochiKit.DOM.hasElementClass(this.getElement('nextButton'), 'disabled')) { |
182 | // this.moveForward(); | 179 | // this.moveForward(); |
183 | // } | 180 | // } |
184 | 181 | ||
185 | MochiKit.Signal.signal(this, 'moveForward'); | 182 | MochiKit.Signal.signal(this, 'moveForward'); |
186 | }, | 183 | }, |
187 | 184 | ||
188 | //------------------------------------------------------------------------- | 185 | //------------------------------------------------------------------------- |
189 | 186 | ||
190 | 'currentStep': function () { | 187 | 'currentStep': function () { |
191 | return this._currentStep; | 188 | return this._currentStep; |
192 | }, | 189 | }, |
193 | 190 | ||
194 | 'markerInitialOffset': function () { | 191 | 'markerInitialOffset': function () { |
195 | return -246; | 192 | return -246; |
196 | }, | 193 | }, |
197 | 194 | ||
198 | 'markerStepOffset': function () { | 195 | 'markerStepOffset': function () { |
199 | return 410 / (this.steps().length - 1); | 196 | return 410 / (this.steps().length - 1); |
200 | // return 100; | 197 | // return 100; |
201 | }, | 198 | }, |
202 | 199 | ||
203 | //------------------------------------------------------------------------- | 200 | //------------------------------------------------------------------------- |
204 | 201 | ||
205 | 'moveToFirstStep': function (aCallback) { | 202 | 'moveToFirstStep': function (aCallback) { |
206 | varstepsToMove; | 203 | varstepsToMove; |
207 | 204 | ||
208 | stepsToMove = this._currentStep; | 205 | stepsToMove = this._currentStep; |
209 | this._currentStep = 0; | 206 | this._currentStep = 0; |
210 | 207 | ||
211 | this.enablePrevious(false); | 208 | this.enablePrevious(false); |
212 | this.enableNext(false); | 209 | this.enableNext(false); |
213 | // MochiKit.Signal.signal(this, 'moveBackward'); | 210 | // MochiKit.Signal.signal(this, 'moveBackward'); |
214 | MochiKit.Base.map( | 211 | MochiKit.Base.map( |
215 | function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); }, | 212 | function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); }, |
216 | MochiKit.Selector.findChildElements(this.element(), ['li.selected']) | 213 | MochiKit.Selector.findChildElements(this.element(), ['li.selected']) |
217 | ); | 214 | ); |
218 | new MochiKit.Visual.Move(this.getElement('marker'), { | 215 | new MochiKit.Visual.Move(this.getElement('marker'), { |
219 | x:-(this.markerStepOffset() * stepsToMove), | 216 | x:-(this.markerStepOffset() * stepsToMove), |
220 | mode:'relative', | 217 | mode:'relative', |
221 | duration:(0.5 * (stepsToMove/2)), | 218 | duration:(0.5 * (stepsToMove/2)), |
222 | // afterFinish:MochiKit.Base.method(this, 'cursorMoved') | 219 | // afterFinish:MochiKit.Base.method(this, 'cursorMoved') |
223 | afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback) | 220 | afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback) |
224 | }); | 221 | }); |
225 | }, | 222 | }, |
226 | 223 | ||
227 | 'moveBackward': function (aCallback) { | 224 | 'moveBackward': function (aCallback) { |
228 | this._currentStep --; | 225 | this._currentStep --; |
229 | 226 | ||
230 | this.enablePrevious(false); | 227 | this.enablePrevious(false); |
231 | this.enableNext(false); | 228 | this.enableNext(false); |
232 | // MochiKit.Signal.signal(this, 'moveBackward'); | 229 | // MochiKit.Signal.signal(this, 'moveBackward'); |
233 | MochiKit.Base.map( | 230 | MochiKit.Base.map( |
234 | function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); }, | 231 | function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); }, |
235 | MochiKit.Selector.findChildElements(this.element(), ['li.selected']) | 232 | MochiKit.Selector.findChildElements(this.element(), ['li.selected']) |
236 | ); | 233 | ); |
237 | new MochiKit.Visual.Move(this.getElement('marker'), { | 234 | new MochiKit.Visual.Move(this.getElement('marker'), { |
238 | x:-this.markerStepOffset(), | 235 | x:-this.markerStepOffset(), |
239 | mode:'relative', | 236 | mode:'relative', |
240 | duration:0.5, | 237 | duration:0.5, |
241 | // afterFinish:MochiKit.Base.method(this, 'cursorMoved') | 238 | // afterFinish:MochiKit.Base.method(this, 'cursorMoved') |
242 | afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback) | 239 | afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback) |
243 | }); | 240 | }); |