OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview User pod row implementation. | 6 * @fileoverview User pod row implementation. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('login', function() { | 9 cr.define('login', function() { |
10 /** | 10 /** |
(...skipping 274 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
285 * @param {!string} id The id of the icon that should be shown. Should be | 285 * @param {!string} id The id of the icon that should be shown. Should be |
286 * one of the ids listed in {@code UserPodCustomIcon.ICONS}. | 286 * one of the ids listed in {@code UserPodCustomIcon.ICONS}. |
287 */ | 287 */ |
288 setIcon: function(id) { | 288 setIcon: function(id) { |
289 UserPodCustomIcon.ICONS.forEach(function(icon) { | 289 UserPodCustomIcon.ICONS.forEach(function(icon) { |
290 this.iconElement.classList.toggle(icon.class, id == icon.id); | 290 this.iconElement.classList.toggle(icon.class, id == icon.id); |
291 }, this); | 291 }, this); |
292 }, | 292 }, |
293 | 293 |
294 /** | 294 /** |
| 295 * Sets the ARIA label for the icon. |
| 296 * @param {!string} ariaLabel |
| 297 */ |
| 298 setAriaLabel: function(ariaLabel) { |
| 299 this.iconElement.setAttribute('aria-label', ariaLabel); |
| 300 }, |
| 301 |
| 302 /** |
295 * Shows the icon. | 303 * Shows the icon. |
296 */ | 304 */ |
297 show: function() { | 305 show: function() { |
298 this.resetHideTransitionState_(); | 306 this.resetHideTransitionState_(); |
299 this.hidden = false; | 307 this.hidden = false; |
300 }, | 308 }, |
301 | 309 |
302 /** | 310 /** |
303 * Hides the icon using a fade-out animation. | 311 * Hides the icon using a fade-out animation. |
304 */ | 312 */ |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
345 if (tooltip.text && tooltip.autoshow) { | 353 if (tooltip.text && tooltip.autoshow) { |
346 this.hideTooltip_(true); | 354 this.hideTooltip_(true); |
347 this.showTooltip_(); | 355 this.showTooltip_(); |
348 this.tooltipAutoshown_ = true; | 356 this.tooltipAutoshown_ = true; |
349 // Reset the tooltip active flag, which gets set in |showTooltip_|. | 357 // Reset the tooltip active flag, which gets set in |showTooltip_|. |
350 this.tooltipActive_ = false; | 358 this.tooltipActive_ = false; |
351 return; | 359 return; |
352 } | 360 } |
353 | 361 |
354 this.hideTooltip_(true); | 362 this.hideTooltip_(true); |
355 | |
356 if (this.tooltip_) | |
357 this.iconElement.setAttribute('aria-lablel', this.tooltip_); | |
358 }, | 363 }, |
359 | 364 |
360 /** | 365 /** |
361 * Sets up icon tabIndex attribute and handler for click and 'Enter' key | 366 * Sets up icon tabIndex attribute and handler for click and 'Enter' key |
362 * down events. | 367 * down events. |
363 * @param {?function()} callback If icon should be interactive, the | 368 * @param {?function()} callback If icon should be interactive, the |
364 * function to get called on click and 'Enter' key down events. Should | 369 * function to get called on click and 'Enter' key down events. Should |
365 * be null to make the icon non interactive. | 370 * be null to make the icon non interactive. |
366 */ | 371 */ |
367 setInteractive: function(callback) { | 372 setInteractive: function(callback) { |
(...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
489 * because autoshow flag was set. | 494 * because autoshow flag was set. |
490 * @private | 495 * @private |
491 */ | 496 */ |
492 hideTooltip_: function(force) { | 497 hideTooltip_: function(force) { |
493 this.tooltipActive_ = false; | 498 this.tooltipActive_ = false; |
494 this.ensureTooltipTimeoutCleared_(); | 499 this.ensureTooltipTimeoutCleared_(); |
495 if (!force && this.tooltipAutoshown_) | 500 if (!force && this.tooltipAutoshown_) |
496 return; | 501 return; |
497 $('bubble').hideForElement(this); | 502 $('bubble').hideForElement(this); |
498 this.tooltipAutoshown_ = false; | 503 this.tooltipAutoshown_ = false; |
499 this.iconElement.removeAttribute('aria-label'); | |
500 }, | 504 }, |
501 | 505 |
502 /** | 506 /** |
503 * Clears timaout for showing the tooltip if it's set. | 507 * Clears timaout for showing the tooltip if it's set. |
504 * @private | 508 * @private |
505 */ | 509 */ |
506 ensureTooltipTimeoutCleared_: function() { | 510 ensureTooltipTimeoutCleared_: function() { |
507 if (this.showTooltipTimeout_) { | 511 if (this.showTooltipTimeout_) { |
508 clearTimeout(this.showTooltipTimeout_); | 512 clearTimeout(this.showTooltipTimeout_); |
509 this.showTooltipTimeout_ = null; | 513 this.showTooltipTimeout_ = null; |
(...skipping 1729 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2239 | 2243 |
2240 this.shouldShowApps_ = shouldShowApps; | 2244 this.shouldShowApps_ = shouldShowApps; |
2241 this.rebuildPods(); | 2245 this.rebuildPods(); |
2242 }, | 2246 }, |
2243 | 2247 |
2244 /** | 2248 /** |
2245 * Shows a custom icon on a user pod besides the input field. | 2249 * Shows a custom icon on a user pod besides the input field. |
2246 * @param {string} username Username of pod to add button | 2250 * @param {string} username Username of pod to add button |
2247 * @param {!{id: !string, | 2251 * @param {!{id: !string, |
2248 * hardlockOnClick: boolean, | 2252 * hardlockOnClick: boolean, |
| 2253 * ariaLabel: string | undefined, |
2249 * tooltip: ({text: string, autoshow: boolean} | undefined)}} icon | 2254 * tooltip: ({text: string, autoshow: boolean} | undefined)}} icon |
2250 * The icon parameters. | 2255 * The icon parameters. |
2251 */ | 2256 */ |
2252 showUserPodCustomIcon: function(username, icon) { | 2257 showUserPodCustomIcon: function(username, icon) { |
2253 var pod = this.getPodWithUsername_(username); | 2258 var pod = this.getPodWithUsername_(username); |
2254 if (pod == null) { | 2259 if (pod == null) { |
2255 console.error('Unable to show user pod button for ' + username + | 2260 console.error('Unable to show user pod button for ' + username + |
2256 ': user pod not found.'); | 2261 ': user pod not found.'); |
2257 return; | 2262 return; |
2258 } | 2263 } |
2259 | 2264 |
2260 if (!icon.id) | 2265 if (!icon.id) |
2261 return; | 2266 return; |
2262 | 2267 |
2263 pod.customIconElement.setIcon(icon.id); | 2268 pod.customIconElement.setIcon(icon.id); |
2264 | 2269 |
2265 if (icon.hardlockOnClick) { | 2270 if (icon.hardlockOnClick) { |
2266 pod.customIconElement.setInteractive( | 2271 pod.customIconElement.setInteractive( |
2267 this.hardlockUserPod_.bind(this, username)); | 2272 this.hardlockUserPod_.bind(this, username)); |
2268 } else { | 2273 } else { |
2269 pod.customIconElement.setInteractive(null); | 2274 pod.customIconElement.setInteractive(null); |
2270 } | 2275 } |
2271 | 2276 |
| 2277 var ariaLabel = icon.ariaLabel || (icon.tooltip && icon.tooltip.text); |
| 2278 if (ariaLabel) |
| 2279 pod.customIconElement.setAriaLabel(ariaLabel); |
| 2280 else |
| 2281 console.warn('No ARIA label for user pod custom icon.'); |
| 2282 |
2272 pod.customIconElement.show(); | 2283 pod.customIconElement.show(); |
2273 | 2284 |
2274 // This has to be called after |show| in case the tooltip should be shown | 2285 // This has to be called after |show| in case the tooltip should be shown |
2275 // immediatelly. | 2286 // immediatelly. |
2276 pod.customIconElement.setTooltip( | 2287 pod.customIconElement.setTooltip( |
2277 icon.tooltip || {text: '', autoshow: false}); | 2288 icon.tooltip || {text: '', autoshow: false}); |
2278 }, | 2289 }, |
2279 | 2290 |
2280 /** | 2291 /** |
2281 * Hard-locks user pod for the user. If user pod is hard-locked, it can be | 2292 * Hard-locks user pod for the user. If user pod is hard-locked, it can be |
(...skipping 663 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2945 if (pod && pod.multiProfilesPolicyApplied) { | 2956 if (pod && pod.multiProfilesPolicyApplied) { |
2946 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 2957 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
2947 } | 2958 } |
2948 } | 2959 } |
2949 }; | 2960 }; |
2950 | 2961 |
2951 return { | 2962 return { |
2952 PodRow: PodRow | 2963 PodRow: PodRow |
2953 }; | 2964 }; |
2954 }); | 2965 }); |
OLD | NEW |