| 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 |