| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 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 | 6 * @fileoverview |
| 7 * 'settings-animated-pages' is a container for a page and animated subpages. | 7 * 'settings-animated-pages' is a container for a page and animated subpages. |
| 8 * It provides a set of common behaviors and animations. | 8 * It provides a set of common behaviors and animations. |
| 9 * | 9 * |
| 10 * Example: | 10 * Example: |
| (...skipping 29 matching lines...) Expand all Loading... |
| 40 | 40 |
| 41 /** | 41 /** |
| 42 * The last "previous" route reported by the router. | 42 * The last "previous" route reported by the router. |
| 43 * @private {?settings.Route} | 43 * @private {?settings.Route} |
| 44 */ | 44 */ |
| 45 previousRoute_: null, | 45 previousRoute_: null, |
| 46 | 46 |
| 47 /** @override */ | 47 /** @override */ |
| 48 created: function() { | 48 created: function() { |
| 49 // Observe the light DOM so we know when it's ready. | 49 // Observe the light DOM so we know when it's ready. |
| 50 this.lightDomObserver_ = Polymer.dom(this).observeNodes( | 50 this.lightDomObserver_ = |
| 51 this.lightDomChanged_.bind(this)); | 51 Polymer.dom(this).observeNodes(this.lightDomChanged_.bind(this)); |
| 52 }, | 52 }, |
| 53 | 53 |
| 54 /** @override */ | 54 /** @override */ |
| 55 attached: function() { | 55 attached: function() { |
| 56 this.outline_ = cr.ui.FocusOutlineManager.forDocument(document); | 56 this.outline_ = cr.ui.FocusOutlineManager.forDocument(document); |
| 57 }, | 57 }, |
| 58 | 58 |
| 59 /** | 59 /** |
| 60 * @param {!Event} e | 60 * @param {!Event} e |
| 61 * @private | 61 * @private |
| 62 */ | 62 */ |
| 63 onIronSelect_: function(e) { | 63 onIronSelect_: function(e) { |
| 64 if (!this.focusConfig || !this.previousRoute_) | 64 if (!this.focusConfig || !this.previousRoute_) |
| 65 return; | 65 return; |
| 66 | 66 |
| 67 // Don't attempt to focus any anchor element, unless last navigation was a | 67 // Don't attempt to focus any anchor element, unless last navigation was a |
| 68 // 'pop' (backwards) navigation. | 68 // 'pop' (backwards) navigation. |
| 69 if (!settings.lastRouteChangeWasPopstate()) | 69 if (!settings.lastRouteChangeWasPopstate()) |
| 70 return; | 70 return; |
| 71 | 71 |
| 72 // Only handle iron-select events from neon-animatable elements and the | 72 // Only handle iron-select events from neon-animatable elements and the |
| 73 // given whitelist of settings-subpage instances. | 73 // given whitelist of settings-subpage instances. |
| 74 if (!e.detail.item.matches( | 74 var whitelist = 'settings-subpage#site-settings, ' + |
| 75 'neon-animatable, ' + | |
| 76 'settings-subpage#site-settings, ' + | |
| 77 'settings-subpage[route-path=\"' + | 75 'settings-subpage[route-path=\"' + |
| 78 settings.Route.SITE_SETTINGS_COOKIES.path + '\"]')) { | 76 settings.Route.SITE_SETTINGS_COOKIES.path + '\"]'; |
| 77 |
| 78 // <if expr="chromeos"> |
| 79 whitelist += ', settings-subpage[route-path=\"' + |
| 80 settings.Route.INTERNET_NETWORKS.path + '\"]'; |
| 81 // </if> |
| 82 |
| 83 if (!e.detail.item.matches('neon-animatable, ' + whitelist)) |
| 79 return; | 84 return; |
| 80 } | |
| 81 | 85 |
| 82 var selector = this.focusConfig.get(this.previousRoute_.path); | 86 var selector = this.focusConfig.get(this.previousRoute_.path); |
| 83 if (selector) { | 87 if (selector) { |
| 84 // neon-animatable has "display: none" until the animation finishes, so | 88 // neon-animatable has "display: none" until the animation finishes, so |
| 85 // calling focus() on any of its children has no effect until | 89 // calling focus() on any of its children has no effect until |
| 86 // "display: none" is removed. Therefore can't call focus() from within | 90 // "display: none" is removed. Therefore can't call focus() from within |
| 87 // the currentRouteChanged callback. Using 'iron-select' listener which | 91 // the currentRouteChanged callback. Using 'iron-select' listener which |
| 88 // fires after the animation has finished allows focus() to work as | 92 // fires after the animation has finished allows focus() to work as |
| 89 // expected. | 93 // expected. |
| 90 var toFocus = this.querySelector(selector); | 94 var toFocus = this.querySelector(selector); |
| (...skipping 26 matching lines...) Expand all Loading... |
| 117 }, | 121 }, |
| 118 | 122 |
| 119 /** | 123 /** |
| 120 * Calls currentRouteChanged with the deferred route change info. | 124 * Calls currentRouteChanged with the deferred route change info. |
| 121 * @private | 125 * @private |
| 122 */ | 126 */ |
| 123 runQueuedRouteChange_: function() { | 127 runQueuedRouteChange_: function() { |
| 124 if (!this.queuedRouteChange_) | 128 if (!this.queuedRouteChange_) |
| 125 return; | 129 return; |
| 126 this.async(this.currentRouteChanged.bind( | 130 this.async(this.currentRouteChanged.bind( |
| 127 this, | 131 this, this.queuedRouteChange_.newRoute, |
| 128 this.queuedRouteChange_.newRoute, | |
| 129 this.queuedRouteChange_.oldRoute)); | 132 this.queuedRouteChange_.oldRoute)); |
| 130 }, | 133 }, |
| 131 | 134 |
| 132 /** @protected */ | 135 /** @protected */ |
| 133 currentRouteChanged: function(newRoute, oldRoute) { | 136 currentRouteChanged: function(newRoute, oldRoute) { |
| 134 this.previousRoute_ = oldRoute; | 137 this.previousRoute_ = oldRoute; |
| 135 | 138 |
| 136 if (newRoute.section == this.section && newRoute.isSubpage()) { | 139 if (newRoute.section == this.section && newRoute.isSubpage()) { |
| 137 this.switchToSubpage_(newRoute, oldRoute); | 140 this.switchToSubpage_(newRoute, oldRoute); |
| 138 } else { | 141 } else { |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 196 var routePath = settings.getCurrentRoute().path; | 199 var routePath = settings.getCurrentRoute().path; |
| 197 var template = Polymer.dom(this).querySelector( | 200 var template = Polymer.dom(this).querySelector( |
| 198 'template[route-path="' + routePath + '"]'); | 201 'template[route-path="' + routePath + '"]'); |
| 199 | 202 |
| 200 // Nothing to do if the subpage isn't wrapped in a <template> or the | 203 // Nothing to do if the subpage isn't wrapped in a <template> or the |
| 201 // template is already stamped. | 204 // template is already stamped. |
| 202 if (!template || template.if) | 205 if (!template || template.if) |
| 203 return; | 206 return; |
| 204 | 207 |
| 205 // Set the subpage's id for use by neon-animated-pages. | 208 // Set the subpage's id for use by neon-animated-pages. |
| 206 var subpage = /** @type {{_content: DocumentFragment}} */(template)._content | 209 var subpage = /** @type {{_content: DocumentFragment}} */ (template) |
| 207 .querySelector('settings-subpage'); | 210 ._content.querySelector('settings-subpage'); |
| 208 subpage.setAttribute('route-path', routePath); | 211 subpage.setAttribute('route-path', routePath); |
| 209 | 212 |
| 210 // Carry over the 'no-search' attribute from the template to the stamped | 213 // Carry over the 'no-search' attribute from the template to the stamped |
| 211 // instance, such that the stamped instance will also be ignored by the | 214 // instance, such that the stamped instance will also be ignored by the |
| 212 // searching algorithm. | 215 // searching algorithm. |
| 213 if (template.hasAttribute('no-search')) | 216 if (template.hasAttribute('no-search')) |
| 214 subpage.setAttribute('no-search', ''); | 217 subpage.setAttribute('no-search', ''); |
| 215 | 218 |
| 216 // Render synchronously so neon-animated-pages can select the subpage. | 219 // Render synchronously so neon-animated-pages can select the subpage. |
| 217 template.if = true; | 220 template.if = true; |
| 218 template.render(); | 221 template.render(); |
| 219 }, | 222 }, |
| 220 }); | 223 }); |
| OLD | NEW |