| 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 * 'cr-settings-animated-pages' is a container for a page and animated subpages. | 7 * 'cr-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 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 51 }, | 51 }, |
| 52 | 52 |
| 53 /** @private */ | 53 /** @private */ |
| 54 currentRouteChanged_: function(newRoute, oldRoute) { | 54 currentRouteChanged_: function(newRoute, oldRoute) { |
| 55 // route.section is only non-empty when the user is within a subpage. | 55 // route.section is only non-empty when the user is within a subpage. |
| 56 // When the user is not in a subpage, but on the Basic page, route.section | 56 // When the user is not in a subpage, but on the Basic page, route.section |
| 57 // is an empty string. | 57 // is an empty string. |
| 58 var newRouteIsSubpage = newRoute && newRoute.section == this.section; | 58 var newRouteIsSubpage = newRoute && newRoute.section == this.section; |
| 59 var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section; | 59 var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section; |
| 60 | 60 |
| 61 // If two routes are at the same level, or if either the new or old route is | |
| 62 // not a subpage, fade in and out. | |
| 63 if (!newRouteIsSubpage || !oldRouteIsSubpage || | 61 if (!newRouteIsSubpage || !oldRouteIsSubpage || |
| 64 newRoute.subpage.length == oldRoute.subpage.length) { | 62 newRoute.subpage.length == oldRoute.subpage.length) { |
| 63 // If two routes are at the same level, or if either the new or old route |
| 64 // is not a subpage, fade in and out. |
| 65 this.$.animatedPages.exitAnimation = 'fade-out-animation'; | 65 this.$.animatedPages.exitAnimation = 'fade-out-animation'; |
| 66 this.$.animatedPages.entryAnimation = 'fade-in-animation'; | 66 this.$.animatedPages.entryAnimation = 'fade-in-animation'; |
| 67 } else { | 67 } else { |
| 68 // For transitioning between subpages at different levels, slide. | 68 // For transitioning between subpages at different levels, slide. |
| 69 if (newRoute.subpage.length > oldRoute.subpage.length) { | 69 if (newRoute.subpage.length > oldRoute.subpage.length) { |
| 70 this.$.animatedPages.exitAnimation = 'slide-left-animation'; | 70 this.$.animatedPages.exitAnimation = 'slide-left-animation'; |
| 71 this.$.animatedPages.entryAnimation = 'slide-from-right-animation'; | 71 this.$.animatedPages.entryAnimation = 'slide-from-right-animation'; |
| 72 } else { | 72 } else { |
| 73 this.$.animatedPages.exitAnimation = 'slide-right-animation'; | 73 this.$.animatedPages.exitAnimation = 'slide-right-animation'; |
| 74 this.$.animatedPages.entryAnimation = 'slide-from-left-animation'; | 74 this.$.animatedPages.entryAnimation = 'slide-from-left-animation'; |
| 75 } | 75 } |
| 76 } | 76 } |
| 77 | 77 |
| 78 if (newRouteIsSubpage) { | 78 this.$.animatedPages.selected = |
| 79 // TODO(tommycli): Support paths where the final component carries | 79 newRouteIsSubpage ? newRoute.subpage.slice(-1)[0] : ''; |
| 80 // data rather than referring to a specific subpage. | |
| 81 // E.g. internet > internet/known-networks > internet/detail/wifi1_guid | |
| 82 this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0]; | |
| 83 } else { | |
| 84 this.$.animatedPages.selected = ''; | |
| 85 } | |
| 86 }, | 80 }, |
| 87 | 81 |
| 88 /** | 82 /** |
| 89 * Buttons in this pageset should use this method to transition to subpages. | 83 * Buttons in this pageset should use this method to transition to subpages. |
| 90 */ | 84 */ |
| 91 setSubpageChain: function(subpage) { | 85 setSubpageChain: function(subpage) { |
| 92 this.currentRoute = { | 86 this.currentRoute = { |
| 93 page: this.currentRoute.page, | 87 page: this.currentRoute.page, |
| 94 section: subpage.length > 0 ? this.section : '', | 88 section: subpage.length > 0 ? this.section : '', |
| 95 subpage: subpage, | 89 subpage: subpage, |
| 96 }; | 90 }; |
| 97 }, | 91 }, |
| 98 }); | 92 }); |
| OLD | NEW |