Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | 32 |
1 files changed, 30 insertions, 2 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js index fbf58e0..91085cf 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | |||
@@ -105,153 +105,181 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C | |||
105 | var deferredResult; | 105 | var deferredResult; |
106 | var maskElement; | 106 | var maskElement; |
107 | 107 | ||
108 | this.setIsLocked(false); | 108 | this.setIsLocked(false); |
109 | maskElement = this.getId('modalDialogMask'); | 109 | maskElement = this.getId('modalDialogMask'); |
110 | 110 | ||
111 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ | 111 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ |
112 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | 112 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), |
113 | // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | 113 | // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), |
114 | MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') | 114 | MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') |
115 | ], {trace:false}); | 115 | ], {trace:false}); |
116 | }, | 116 | }, |
117 | 117 | ||
118 | //------------------------------------------------------------------------- | 118 | //------------------------------------------------------------------------- |
119 | 119 | ||
120 | 'askForPassphrase': function () { | 120 | 'askForPassphrase': function () { |
121 | varunlockPasswordComponent; | 121 | varunlockPasswordComponent; |
122 | /* | 122 | /* |
123 | vardeferredResult; | 123 | vardeferredResult; |
124 | 124 | ||
125 | deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); | 125 | deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); |
126 | deferredResult.addCallback(MochiKit.Async.succeed, 'test'); | 126 | deferredResult.addCallback(MochiKit.Async.succeed, 'test'); |
127 | 127 | ||
128 | deferredResult.callback(); | 128 | deferredResult.callback(); |
129 | 129 | ||
130 | return deferredResult; | 130 | return deferredResult; |
131 | */ | 131 | */ |
132 | unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ | 132 | unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ |
133 | 'title':"Unlock account", | 133 | 'title':"Unlock account", |
134 | 'text': "Insert the passprase to unlock the account", | 134 | 'text': "Insert the passprase to unlock the account", |
135 | 'type': 'INFO', | 135 | 'type': 'INFO', |
136 | 'buttons': [ | 136 | 'buttons': [ |
137 | {text:"Cancel",result:'CANCEL'}, | 137 | {text:"Cancel",result:'CANCEL'}, |
138 | {text:"Unlock", result:'OK',isDefault:true} | 138 | {text:"Unlock", result:'OK',isDefault:true} |
139 | ], | 139 | ], |
140 | 'openFromElement': this.getElement('lock'), | 140 | 'openFromElement': this.getElement('lock'), |
141 | 'onOkCloseToElement': null, | 141 | 'onOkCloseToElement': null, |
142 | 'onCancelCloseToElement':this.getId('lock') | 142 | 'onCancelCloseToElement':this.getId('lock') |
143 | }); | 143 | }); |
144 | 144 | ||
145 | return unlockPasswordComponent.getPassphrase(); | 145 | return unlockPasswordComponent.getPassphrase(); |
146 | }, | 146 | }, |
147 | 147 | ||
148 | //========================================================================= | 148 | //========================================================================= |
149 | 149 | ||
150 | 'renderSelf': function(/*aContainer, aPosition*/) { | 150 | 'renderSelf': function(/*aContainer, aPosition*/) { |
151 | this.append(this.element(), [ | 151 | this.append(this.element(), [ |
152 | // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, | 152 | // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, |
153 | {tag:'div', cls:'header', children:[ | 153 | {tag:'div', cls:'header', children:[ |
154 | {tag:'h1', html:"Welcome"}, | 154 | {tag:'h1', html:"Welcome"}, |
155 | {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} | 155 | {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} |
156 | ]}, | 156 | ]}, |
157 | {tag:'div', cls:'body', children:[ | 157 | {tag:'div', cls:'body', children:[ |
158 | {tag:'h3', id:this.getId('username'), html:""}, | 158 | {tag:'h3', id:this.getId('username'), html:""}, |
159 | {tag:'ul', children:[ | 159 | {tag:'ul', children:[ |
160 | {tag:'li', id:this.getId('cards'), children:[ | 160 | {tag:'li', id:this.getId('cards'), children:[ |
161 | {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, | 161 | {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, |
162 | {tag:'span', id:this.getId('cardsLabel'), html:"cards"} | 162 | {tag:'span', id:this.getId('cardsLabel'), html:"cards"} |
163 | ]}, | 163 | ]}, |
164 | {tag:'li', id:this.getId('directLogins'), children:[ | 164 | {tag:'li', id:this.getId('directLogins'), children:[ |
165 | {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, | 165 | {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, |
166 | {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} | 166 | {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} |
167 | ]} | 167 | ]} |
168 | ]}, | 168 | ]}, |
169 | {tag:'div', cls:'accountInfo', children:[ | ||
170 | {tag:'div', cls:'payButton', children:[ | ||
171 | {tag:'a', href:'#', id:this.getId('payButton'), cls:'info', html:"info"} | ||
172 | ]}, | ||
173 | {tag:'h5', html:"Account info"}, | ||
174 | {tag:'div', cls:'accountStatus', children:[ | ||
175 | {tag:'span', cls:'label', html:"status"}, | ||
176 | {tag:'span', cls:'status', html:"early adopter"} | ||
177 | ]}, | ||
178 | {tag:'div', cls:'accountLevel', children:[ | ||
179 | {tag:'span', cls:'label', html:"level"}, | ||
180 | // {tag:'span', cls:'level', html:"★☆☆☆"} | ||
181 | {tag:'span', cls:'level', html:"☆☆☆☆"} | ||
182 | ]}, | ||
183 | {tag:'div', cls:'accountExpiration', children:[ | ||
184 | {tag:'span', cls:'label', html:"expires"}, | ||
185 | // {tag:'span', cls:'expriation', html:"on 26 April 2014"} | ||
186 | {tag:'span', cls:'expriation', html:"never"} | ||
187 | ]} | ||
188 | ]}, | ||
169 | {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} | 189 | {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} |
170 | ]}, | 190 | ]}, |
171 | {tag:'div', cls:'footer'} | 191 | {tag:'div', cls:'footer'} |
172 | ]); | 192 | ]); |
173 | 193 | ||
174 | MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); | 194 | MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); |
175 | MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); | 195 | MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); |
196 | MochiKit.Signal.connect(this.getElement('payButton'),'onclick', this, 'handlePayButton'); | ||
176 | 197 | ||
177 | this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ | 198 | this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ |
178 | element:this.getElement('lock'), | 199 | element:this.getElement('lock'), |
179 | text: "Click here to lock/unlock your account.", | 200 | text: "Click here to lock/unlock your account.", |
180 | position:'RIGHT' | 201 | position:'RIGHT' |
181 | }); | 202 | }); |
182 | 203 | ||
183 | Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, | 204 | Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, |
184 | {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ | 205 | {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ |
185 | {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} | 206 | {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} |
186 | ]} | 207 | ]} |
187 | ); | 208 | ); |
188 | MochiKit.Style.hideElement(this.getId('modalDialogMask')); | 209 | MochiKit.Style.hideElement(this.getId('modalDialogMask')); |
189 | 210 | ||
190 | // this.drawUserInfoBackground(this.getElement('canvas')); | 211 | // this.drawUserInfoBackground(this.getElement('canvas')); |
191 | }, | 212 | }, |
192 | 213 | ||
193 | //------------------------------------------------------------------------- | 214 | //------------------------------------------------------------------------- |
215 | |||
216 | 'handlePayButton': function (anEvent) { | ||
217 | anEvent.preventDefault(); | ||
218 | window.open('https://www.clipperz.com/pricing/', '_blank'); | ||
219 | }, | ||
220 | |||
221 | //------------------------------------------------------------------------- | ||
194 | /* | 222 | /* |
195 | 'drawUserInfoBackground': function (canvas) { | 223 | 'drawUserInfoBackground': function (canvas) { |
196 | var kMyDrawingFunctionWidth = 188.0; | 224 | var kMyDrawingFunctionWidth = 188.0; |
197 | var kMyDrawingFunctionHeight = 154.0; | 225 | var kMyDrawingFunctionHeight = 154.0; |
198 | 226 | ||
199 | var context = canvas.getContext("2d"); | 227 | var context = canvas.getContext("2d"); |
200 | var color; | 228 | var color; |
201 | var resolution; | 229 | var resolution; |
202 | var alignStroke; | 230 | var alignStroke; |
203 | var path; | 231 | var path; |
204 | var pointX; | 232 | var pointX; |
205 | var pointY; | 233 | var pointY; |
206 | var controlPoint1X; | 234 | var controlPoint1X; |
207 | var controlPoint1Y; | 235 | var controlPoint1Y; |
208 | var controlPoint2X; | 236 | var controlPoint2X; |
209 | var controlPoint2Y; | 237 | var controlPoint2Y; |
210 | var gradient; | 238 | var gradient; |
211 | if (window.devicePixelRatio) | 239 | if (window.devicePixelRatio) |
212 | resolution = window.devicePixelRatio; | 240 | resolution = window.devicePixelRatio; |
213 | else | 241 | else |
214 | resolution = 1.0; | 242 | resolution = 1.0; |
215 | resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); | 243 | resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); |
216 | 244 | ||
217 | context.save(); | 245 | context.save(); |
218 | context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); | 246 | context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); |
219 | context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); | 247 | context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); |
220 | 248 | ||
221 | // Setup for Shadow Effect | 249 | // Setup for Shadow Effect |
222 | color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; | 250 | color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; |
223 | context.save(); | 251 | context.save(); |
224 | context.shadowColor = color; | 252 | context.shadowColor = color; |
225 | context.shadowBlur = 3.0; | 253 | context.shadowBlur = 3.0; |
226 | context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; | 254 | context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; |
227 | context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; | 255 | context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; |
228 | 256 | ||
229 | // Layer 1 | 257 | // Layer 1 |
230 | 258 | ||
231 | alignStroke = 0.0; | 259 | alignStroke = 0.0; |
232 | context.beginPath(); | 260 | context.beginPath(); |
233 | pointX = 169.5; | 261 | pointX = 169.5; |
234 | pointY = 141.5; | 262 | pointY = 141.5; |
235 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 263 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
236 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 264 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
237 | context.moveTo(pointX, pointY); | 265 | context.moveTo(pointX, pointY); |
238 | pointX = 177.5; | 266 | pointX = 177.5; |
239 | pointY = 133.5; | 267 | pointY = 133.5; |
240 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 268 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
241 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 269 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
242 | controlPoint1X = 173.889; | 270 | controlPoint1X = 173.889; |
243 | controlPoint1Y = 141.5; | 271 | controlPoint1Y = 141.5; |
244 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | 272 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; |
245 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | 273 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; |
246 | controlPoint2X = 177.5; | 274 | controlPoint2X = 177.5; |
247 | controlPoint2Y = 137.889; | 275 | controlPoint2Y = 137.889; |
248 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | 276 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; |
249 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | 277 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; |
250 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | 278 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); |
251 | pointX = 177.5; | 279 | pointX = 177.5; |
252 | pointY = 19.5; | 280 | pointY = 19.5; |
253 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 281 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
254 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 282 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
255 | context.lineTo(pointX, pointY); | 283 | context.lineTo(pointX, pointY); |
256 | pointX = 169.5; | 284 | pointX = 169.5; |
257 | pointY = 11.5; | 285 | pointY = 11.5; |