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-main' displays the selected settings page. | 7 * 'settings-main' displays the selected settings page. |
8 */ | 8 */ |
9 Polymer({ | 9 Polymer({ |
10 is: 'settings-main', | 10 is: 'settings-main', |
11 | 11 |
12 properties: { | 12 properties: { |
13 /** @private */ | |
14 isAdvancedMenuOpen_: { | |
15 type: Boolean, | |
16 value: false, | |
17 }, | |
18 | |
19 /** | 13 /** |
20 * Preferences state. | 14 * Preferences state. |
21 */ | 15 */ |
22 prefs: { | 16 prefs: { |
23 type: Object, | 17 type: Object, |
24 notify: true, | 18 notify: true, |
25 }, | 19 }, |
26 | 20 |
27 /** | 21 /** |
28 * The current active route. | 22 * The current active route. |
29 * @type {!SettingsRoute} | 23 * @type {!SettingsRoute} |
30 */ | 24 */ |
31 currentRoute: { | 25 currentRoute: { |
32 type: Object, | 26 type: Object, |
33 notify: true, | 27 notify: true, |
34 observer: 'currentRouteChanged_', | 28 observer: 'currentRouteChanged_', |
35 }, | 29 }, |
36 | 30 |
37 /** @private */ | 31 /** @private */ |
Dan Beam
2016/07/12 02:01:54
it might be worth making a separate CL for these c
michaelpg
2016/07/20 22:10:57
Done, see depends-on CL
| |
32 showAboutPage_: { | |
33 type: Boolean, | |
34 computed: 'computeShowAboutPage_(currentRoute.page)', | |
35 }, | |
36 | |
37 /** @private */ | |
38 showBasicPage_: { | |
39 type: Boolean, | |
40 computed: 'computeShowBasicPage_(currentRoute.page, inSubpage_)', | |
41 }, | |
42 | |
43 /** @private */ | |
38 showAdvancedPage_: { | 44 showAdvancedPage_: { |
39 type: Boolean, | 45 type: Boolean, |
46 computed: 'computeShowAdvancedPage_(' + | |
47 'currentRoute.page, advancedToggleExpanded_, inSubpage_)', | |
48 }, | |
49 | |
50 /** @private */ | |
51 advancedToggleExpanded_: { | |
52 type: Boolean, | |
40 value: false, | 53 value: false, |
41 }, | 54 }, |
42 | 55 |
43 /** @private */ | 56 /** |
44 showAdvancedToggle_: { | 57 * True if a section is expanded to show a subpage. Initialized using |
45 type: Boolean, | 58 * currentRoute. Toggles based on expand/collapse events so effects can |
46 value: true, | 59 * be deferred until transitions complete. |
47 }, | 60 * @private |
48 | 61 */ |
49 /** @private */ | 62 inSubpage_: Boolean, |
50 showBasicPage_: { | |
51 type: Boolean, | |
52 value: true, | |
53 }, | |
54 | |
55 /** @private */ | |
56 showAboutPage_: { | |
57 type: Boolean, | |
58 value: false, | |
59 }, | |
60 }, | 63 }, |
61 | 64 |
62 created: function() { | 65 created: function() { |
63 /** @private {!PromiseResolver} */ | 66 /** @private {!PromiseResolver} */ |
64 this.resolver_ = new PromiseResolver; | 67 this.resolver_ = new PromiseResolver; |
65 settings.main.rendered = this.resolver_.promise; | 68 settings.main.rendered = this.resolver_.promise; |
66 }, | 69 }, |
67 | 70 |
68 attached: function() { | 71 attached: function() { |
69 document.addEventListener('toggle-advanced-page', function(e) { | 72 document.addEventListener('toggle-advanced-page', function(e) { |
70 this.showAdvancedPage_ = e.detail; | 73 this.advancedToggleExpanded_ = e.detail; |
71 this.isAdvancedMenuOpen_ = e.detail; | |
72 this.currentRoute = { | 74 this.currentRoute = { |
73 page: this.isAdvancedMenuOpen_ ? 'advanced' : 'basic', | 75 page: this.advancedToggleExpanded_ ? 'advanced' : 'basic', |
74 section: '', | 76 section: '', |
75 subpage: [], | 77 subpage: [], |
76 }; | 78 }; |
77 if (this.showAdvancedPage_) { | 79 if (this.advancedToggleExpanded_) { |
78 doWhenReady( | 80 doWhenReady( |
79 function() { | 81 function() { |
80 var advancedPage = this.$$('settings-advanced-page'); | 82 var advancedPage = this.$$('settings-advanced-page'); |
81 return !!advancedPage && advancedPage.scrollHeight > 0; | 83 return !!advancedPage && advancedPage.scrollHeight > 0; |
82 }.bind(this), | 84 }.bind(this), |
83 function() { | 85 function() { |
84 this.$$('#toggleContainer').scrollIntoView(); | 86 this.$$('#toggleContainer').scrollIntoView(); |
85 }.bind(this)); | 87 }.bind(this)); |
86 } | 88 } |
87 }.bind(this)); | 89 }.bind(this)); |
88 | 90 |
89 doWhenReady( | 91 doWhenReady( |
90 function() { | 92 function() { |
91 var basicPage = this.$$('settings-basic-page'); | 93 var basicPage = this.$$('settings-basic-page'); |
92 return !!basicPage && basicPage.scrollHeight > 0; | 94 return !!basicPage && basicPage.scrollHeight > 0; |
93 }.bind(this), | 95 }.bind(this), |
94 function() { | 96 function() { |
95 this.resolver_.resolve(); | 97 this.resolver_.resolve(); |
96 }.bind(this)); | 98 }.bind(this)); |
99 | |
100 this.inSubpage_ = !!this.currentRoute.subpage.length; | |
97 }, | 101 }, |
98 | 102 |
99 /** | 103 /** |
100 * @param {boolean} opened Whether the menu is expanded. | 104 * @param {boolean} opened Whether the menu is expanded. |
101 * @return {string} Which icon to use. | 105 * @return {string} Which icon to use. |
102 * @private | 106 * @private |
103 * */ | 107 */ |
104 arrowState_: function(opened) { | 108 arrowState_: function(opened) { |
105 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; | 109 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; |
106 }, | 110 }, |
107 | 111 |
108 /** | 112 /** |
109 * @param {!SettingsRoute} newRoute | 113 * @param {!SettingsRoute} newRoute |
110 * @private | 114 * @private |
111 */ | 115 */ |
112 currentRouteChanged_: function(newRoute) { | 116 currentRouteChanged_: function(newRoute) { |
113 var isSubpage = !!newRoute.subpage.length; | 117 // If we navigated to an advanced section, ensure the toggle is opened. |
118 if (newRoute.page == 'advanced') | |
119 this.advancedToggleExpanded_ = true; | |
120 }, | |
114 | 121 |
115 this.showAboutPage_ = newRoute.page == 'about'; | 122 /** @private */ |
123 subpageExpanded_: function() { | |
124 this.inSubpage_ = true; | |
125 }, | |
116 | 126 |
117 this.showAdvancedToggle_ = !this.showAboutPage_ && !isSubpage; | 127 /** @private */ |
118 | 128 subpageCollapsing_: function() { |
119 this.showBasicPage_ = this.showAdvancedToggle_ || newRoute.page == 'basic'; | 129 this.inSubpage_ = false; |
120 | |
121 this.showAdvancedPage_ = | |
122 (this.isAdvancedMenuOpen_ && this.showAdvancedToggle_) || | |
123 newRoute.page == 'advanced'; | |
124 | |
125 this.style.height = isSubpage ? '100%' : ''; | |
126 }, | 130 }, |
127 | 131 |
128 /** @private */ | 132 /** @private */ |
129 toggleAdvancedPage_: function() { | 133 toggleAdvancedPage_: function() { |
130 this.fire('toggle-advanced-page', !this.isAdvancedMenuOpen_); | 134 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_); |
135 }, | |
136 | |
137 /** | |
138 * @return {boolean} | |
139 * @private | |
140 */ | |
141 computeShowAboutPage_: function(page) { | |
142 return page == 'about'; | |
143 }, | |
144 | |
145 /** | |
146 * @return {boolean} | |
147 * @private | |
148 */ | |
149 computeShowBasicPage_: function(page, inSubpage) { | |
150 return page == 'basic' || | |
151 page == 'advanced' && !inSubpage; | |
Dan Beam
2016/07/12 02:01:54
please add ()s to clarify this
| |
152 }, | |
michaelpg
2016/07/20 22:10:57
Removed.
| |
153 | |
154 /** | |
155 * @return {boolean} | |
156 * @private | |
157 */ | |
158 computeShowAdvancedPage_: function(page, advancedToggleExpanded, inSubpage) { | |
159 return page == 'advanced' || | |
160 page == 'basic' && advancedToggleExpanded && !inSubpage; | |
Dan Beam
2016/07/12 02:01:54
same
michaelpg
2016/07/20 22:10:57
Acknowledged.
| |
131 }, | 161 }, |
132 }); | 162 }); |
OLD | NEW |