Chromium Code Reviews| 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: |
| 11 * | 11 * |
| 12 * <settings-animated-pages current-route="{{currentRoute}}" | 12 * <settings-animated-pages section="privacy"> |
| 13 * section="privacy"> | |
| 14 * <!-- Insert your section controls here --> | 13 * <!-- Insert your section controls here --> |
| 15 * </settings-animated-pages> | 14 * </settings-animated-pages> |
| 16 */ | 15 */ |
| 17 Polymer({ | 16 Polymer({ |
| 18 is: 'settings-animated-pages', | 17 is: 'settings-animated-pages', |
| 19 | 18 |
| 19 behaviors: [settings.RouteObserverBehavior], | |
| 20 | |
| 20 properties: { | 21 properties: { |
| 21 /** | 22 /** |
| 22 * Contains the current route. | |
| 23 */ | |
| 24 currentRoute: { | |
| 25 type: Object, | |
| 26 notify: true, | |
| 27 observer: 'currentRouteChanged_', | |
| 28 }, | |
| 29 | |
| 30 /** | |
| 31 * Routes with this section activate this element. For instance, if this | 23 * Routes with this section activate this element. For instance, if this |
| 32 * property is 'search', and currentRoute.section is also set to 'search', | 24 * property is 'search', and currentRoute.section is also set to 'search', |
| 33 * this element will display the subpage in currentRoute.subpage. | 25 * this element will display the subpage in currentRoute.subpage. |
| 34 * | 26 * |
| 35 * The section name must match the name specified in settings_router.js. | 27 * The section name must match the name specified in route.js. |
| 36 */ | 28 */ |
| 37 section: { | 29 section: { |
| 38 type: String, | 30 type: String, |
| 39 }, | 31 }, |
| 40 }, | 32 }, |
| 41 | 33 |
| 42 /** @override */ | 34 /** @override */ |
| 43 created: function() { | 35 created: function() { |
| 44 // Observe the light DOM so we know when it's ready. | 36 // Observe the light DOM so we know when it's ready. |
| 45 this.lightDomObserver_ = Polymer.dom(this).observeNodes( | 37 this.lightDomObserver_ = Polymer.dom(this).observeNodes( |
| 46 this.lightDomChanged_.bind(this)); | 38 this.lightDomChanged_.bind(this)); |
| 47 | 39 |
| 48 this.addEventListener('subpage-back', function() { | 40 this.addEventListener('subpage-back', function() { |
| 49 settings.navigateTo(this.currentRoute.parent); | 41 var parent = settings.getCurrentRoute().parent; |
|
Dan Beam
2016/08/05 18:25:19
all that compilation safety... and we got foiled b
michaelpg
2016/08/05 18:39:28
how do you even fire this w/out a parent? that sou
tommycli
2016/08/05 18:54:06
Done. It could be hypothetically fired when the us
| |
| 42 if (parent) | |
| 43 settings.navigateTo(parent); | |
| 50 }.bind(this)); | 44 }.bind(this)); |
| 51 }, | 45 }, |
| 52 | 46 |
| 53 /** | 47 /** |
| 54 * Called initially once the effective children are ready. | 48 * Called initially once the effective children are ready. |
| 55 * @private | 49 * @private |
| 56 */ | 50 */ |
| 57 lightDomChanged_: function() { | 51 lightDomChanged_: function() { |
| 58 if (this.lightDomReady_) | 52 if (this.lightDomReady_) |
| 59 return; | 53 return; |
| 60 | 54 |
| 61 this.lightDomReady_ = true; | 55 this.lightDomReady_ = true; |
| 62 Polymer.dom(this).unobserveNodes(this.lightDomObserver_); | 56 Polymer.dom(this).unobserveNodes(this.lightDomObserver_); |
| 63 this.runQueuedRouteChange_(); | 57 this.runQueuedRouteChange_(); |
| 64 }, | 58 }, |
| 65 | 59 |
| 66 /** | 60 /** |
| 67 * Calls currentRouteChanged_ with the deferred route change info. | 61 * Calls currentRouteChanged with the deferred route change info. |
| 68 * @private | 62 * @private |
| 69 */ | 63 */ |
| 70 runQueuedRouteChange_: function() { | 64 runQueuedRouteChange_: function() { |
| 71 if (!this.queuedRouteChange_) | 65 if (!this.queuedRouteChange_) |
| 72 return; | 66 return; |
| 73 this.async(this.currentRouteChanged_.bind( | 67 this.async(this.currentRouteChanged.bind( |
| 74 this, | 68 this, |
| 75 this.queuedRouteChange_.newRoute, | 69 this.queuedRouteChange_.newRoute, |
| 76 this.queuedRouteChange_.oldRoute)); | 70 this.queuedRouteChange_.oldRoute)); |
| 77 }, | 71 }, |
| 78 | 72 |
| 79 /** @private */ | 73 /** @protected */ |
| 80 currentRouteChanged_: function(newRoute, oldRoute) { | 74 currentRouteChanged: function(newRoute, oldRoute) { |
| 81 if (newRoute.section == this.section && newRoute.subpage.length > 0) { | 75 if (newRoute.section == this.section && newRoute.subpage.length > 0) { |
| 82 this.switchToSubpage_(newRoute, oldRoute); | 76 this.switchToSubpage_(newRoute, oldRoute); |
| 83 } else { | 77 } else { |
| 84 this.$.animatedPages.exitAnimation = 'fade-out-animation'; | 78 this.$.animatedPages.exitAnimation = 'fade-out-animation'; |
| 85 this.$.animatedPages.entryAnimation = 'fade-in-animation'; | 79 this.$.animatedPages.entryAnimation = 'fade-in-animation'; |
| 86 this.$.animatedPages.selected = 'main'; | 80 this.$.animatedPages.selected = 'main'; |
| 87 } | 81 } |
| 88 }, | 82 }, |
| 89 | 83 |
| 90 /** | 84 /** |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 132 } | 126 } |
| 133 | 127 |
| 134 this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0]; | 128 this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0]; |
| 135 }, | 129 }, |
| 136 | 130 |
| 137 /** | 131 /** |
| 138 * Ensures that the template enclosing the subpage is stamped. | 132 * Ensures that the template enclosing the subpage is stamped. |
| 139 * @private | 133 * @private |
| 140 */ | 134 */ |
| 141 ensureSubpageInstance_: function() { | 135 ensureSubpageInstance_: function() { |
| 142 var id = this.currentRoute.subpage.slice(-1)[0]; | 136 var id = settings.getCurrentRoute().subpage.slice(-1)[0]; |
| 143 var template = Polymer.dom(this).querySelector( | 137 var template = Polymer.dom(this).querySelector( |
| 144 'template[name="' + id + '"]'); | 138 'template[name="' + id + '"]'); |
| 145 | 139 |
| 146 // Nothing to do if the subpage isn't wrapped in a <template> or the | 140 // Nothing to do if the subpage isn't wrapped in a <template> or the |
| 147 // template is already stamped. | 141 // template is already stamped. |
| 148 if (!template || template.if) | 142 if (!template || template.if) |
| 149 return; | 143 return; |
| 150 | 144 |
| 151 // Set the subpage's id for use by neon-animated-pages. | 145 // Set the subpage's id for use by neon-animated-pages. |
| 152 var subpage = /** @type {{_content: DocumentFragment}} */(template)._content | 146 var subpage = /** @type {{_content: DocumentFragment}} */(template)._content |
| 153 .querySelector('settings-subpage'); | 147 .querySelector('settings-subpage'); |
| 154 if (!subpage.id) | 148 if (!subpage.id) |
| 155 subpage.id = id; | 149 subpage.id = id; |
| 156 | 150 |
| 157 // Render synchronously so neon-animated-pages can select the subpage. | 151 // Render synchronously so neon-animated-pages can select the subpage. |
| 158 template.if = true; | 152 template.if = true; |
| 159 template.render(); | 153 template.render(); |
| 160 }, | 154 }, |
| 161 }); | 155 }); |
| OLD | NEW |