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 * @typedef {{about: boolean, basic: boolean, advanced: boolean}} | 6 * @typedef {{about: boolean, settings: boolean}} |
7 */ | 7 */ |
8 var MainPageVisibility; | 8 var MainPageVisibility; |
9 | 9 |
10 /** | 10 /** |
11 * @fileoverview | 11 * @fileoverview |
12 * 'settings-main' displays the selected settings page. | 12 * 'settings-main' displays the selected settings page. |
13 */ | 13 */ |
14 Polymer({ | 14 Polymer({ |
15 is: 'settings-main', | 15 is: 'settings-main', |
16 | 16 |
17 behaviors: [settings.RouteObserverBehavior], | 17 behaviors: [settings.RouteObserverBehavior], |
18 | 18 |
19 properties: { | 19 properties: { |
20 /** | 20 /** |
21 * Preferences state. | 21 * Preferences state. |
22 */ | 22 */ |
23 prefs: { | 23 prefs: { |
24 type: Object, | 24 type: Object, |
25 notify: true, | 25 notify: true, |
26 }, | 26 }, |
27 | 27 |
28 advancedToggleExpanded: { | 28 advancedToggleExpanded: { |
29 type: Boolean, | 29 type: Boolean, |
30 notify: true, | 30 notify: true, |
31 observer: 'updatePagesShown_', | |
32 }, | 31 }, |
33 | 32 |
34 /** | |
35 * True if a section is fully expanded to hide other sections beneath it. | |
36 * Not true otherwise (even while animating a section open/closed). | |
37 * @private | |
38 */ | |
39 hasExpandedSection_: Boolean, | |
40 | |
41 /** @private */ | 33 /** @private */ |
42 overscroll_: { | 34 overscroll_: { |
43 type: Number, | 35 type: Number, |
44 observer: 'overscrollChanged_', | 36 observer: 'overscrollChanged_', |
45 }, | 37 }, |
46 | 38 |
47 /** | 39 /** |
48 * Controls which main pages are displayed via dom-ifs, based on the current | 40 * Controls which main pages are displayed via dom-ifs, based on the current |
49 * route and the Advanced toggle state. | 41 * route. |
50 * @private {!MainPageVisibility} | 42 * @private {!MainPageVisibility} |
51 */ | 43 */ |
52 showPages_: { | 44 showPages_: { |
53 type: Object, | 45 type: Object, |
54 value: function() { | 46 value: function() { |
55 return {about: false, basic: false, advanced: false}; | 47 return {about: false, settings: false}; |
56 }, | 48 }, |
57 }, | 49 }, |
58 | 50 |
59 /** | 51 /** |
60 * Whether a search operation is in progress or previous search results are | 52 * Whether a search operation is in progress or previous search results are |
61 * being displayed. | 53 * being displayed. |
62 * @private {boolean} | 54 * @private {boolean} |
63 */ | 55 */ |
64 inSearchMode_: { | 56 inSearchMode_: { |
65 type: Boolean, | 57 type: Boolean, |
(...skipping 18 matching lines...) Expand all Loading... |
84 */ | 76 */ |
85 pageVisibility: { | 77 pageVisibility: { |
86 type: Object, | 78 type: Object, |
87 value: function() { return {}; }, | 79 value: function() { return {}; }, |
88 }, | 80 }, |
89 }, | 81 }, |
90 | 82 |
91 /** @override */ | 83 /** @override */ |
92 attached: function() { | 84 attached: function() { |
93 this.listen(this, 'freeze-scroll', 'onFreezeScroll_'); | 85 this.listen(this, 'freeze-scroll', 'onFreezeScroll_'); |
94 var currentRoute = settings.getCurrentRoute(); | |
95 this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage(); | |
96 }, | 86 }, |
97 | 87 |
98 /** @override */ | 88 /** @override */ |
99 detached: function() { | 89 detached: function() { |
100 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_'); | 90 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_'); |
101 }, | 91 }, |
102 | 92 |
103 /** @private */ | 93 /** @private */ |
104 overscrollChanged_: function() { | 94 overscrollChanged_: function() { |
105 if (!this.overscroll_ && this.boundScroll_) { | 95 if (!this.overscroll_ && this.boundScroll_) { |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
153 this.offsetParent.style.overflow = 'hidden'; | 143 this.offsetParent.style.overflow = 'hidden'; |
154 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth; | 144 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth; |
155 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)'; | 145 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)'; |
156 } else { | 146 } else { |
157 this.ignoreScroll_ = false; | 147 this.ignoreScroll_ = false; |
158 this.offsetParent.style.overflow = ''; | 148 this.offsetParent.style.overflow = ''; |
159 this.offsetParent.style.width = ''; | 149 this.offsetParent.style.width = ''; |
160 } | 150 } |
161 }, | 151 }, |
162 | 152 |
163 /** | |
164 * @param {boolean} opened Whether the menu is expanded. | |
165 * @return {string} Which icon to use. | |
166 * @private | |
167 */ | |
168 arrowState_: function(opened) { | |
169 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; | |
170 }, | |
171 | |
172 /** | |
173 * @return {boolean} | |
174 * @private | |
175 */ | |
176 showAdvancedToggle_: function() { | |
177 return !this.inSearchMode_ && this.showPages_.basic && | |
178 !this.hasExpandedSection_; | |
179 }, | |
180 | |
181 /** | |
182 * @return {boolean} Whether to show the basic page, taking into account both | |
183 * routing and search state. | |
184 * @private | |
185 */ | |
186 showBasicPage_: function() { | |
187 return this.showPages_.basic || ( | |
188 this.inSearchMode_ && !this.hasExpandedSection_); | |
189 }, | |
190 | |
191 /** | |
192 * @return {boolean} Whether to show the advanced page, taking into account | |
193 * both routing and search state. | |
194 * @private | |
195 */ | |
196 showAdvancedPage_: function() { | |
197 return this.showPages_.advanced || ( | |
198 this.inSearchMode_ && !this.hasExpandedSection_); | |
199 }, | |
200 | |
201 /** @param {!settings.Route} newRoute */ | 153 /** @param {!settings.Route} newRoute */ |
202 currentRouteChanged: function(newRoute) { | 154 currentRouteChanged: function(newRoute) { |
203 // When the route changes from a sub-page to the main page, immediately | |
204 // update hasExpandedSection_ to unhide the other sections. | |
205 if (!newRoute.isSubpage()) | |
206 this.hasExpandedSection_ = false; | |
207 | |
208 if (settings.Route.ADVANCED.contains(newRoute)) | |
209 this.advancedToggleExpanded = true; | |
210 | |
211 this.updatePagesShown_(); | 155 this.updatePagesShown_(); |
212 }, | 156 }, |
213 | 157 |
214 /** @private */ | 158 /** @private */ |
215 onSubpageExpand_: function() { | 159 onSubpageExpand_: function() { |
216 // The subpage finished expanding fully. Hide pages other than the current | |
217 // section's parent page. | |
218 this.hasExpandedSection_ = true; | |
219 this.updatePagesShown_(); | 160 this.updatePagesShown_(); |
220 }, | 161 }, |
221 | 162 |
222 /** | 163 /** |
223 * Updates the hidden state of the about, basic and advanced pages, based on | 164 * Updates the hidden state of the about and settings pages based on the |
224 * the current route and the Advanced toggle state. | 165 * current route. |
225 * @private | 166 * @private |
226 */ | 167 */ |
227 updatePagesShown_: function() { | 168 updatePagesShown_: function() { |
228 var currentRoute = settings.getCurrentRoute(); | 169 var inAbout = settings.Route.ABOUT.contains(settings.getCurrentRoute()); |
229 if (settings.Route.ABOUT.contains(currentRoute)) { | 170 this.showPages_ = {about: inAbout, settings: !inAbout}; |
230 this.showPages_ = {about: true, basic: false, advanced: false}; | |
231 } else { | |
232 this.showPages_ = { | |
233 about: false, | |
234 basic: settings.Route.BASIC.contains(currentRoute) || | |
235 !this.hasExpandedSection_, | |
236 advanced: this.hasExpandedSection_ ? | |
237 settings.Route.ADVANCED.contains(currentRoute) : | |
238 this.advancedToggleExpanded, | |
239 }; | |
240 } | |
241 | 171 |
242 // Calculate and set the overflow padding. | 172 // Calculate and set the overflow padding. |
243 this.updateOverscrollForPage_(); | 173 this.updateOverscrollForPage_(); |
244 | 174 |
245 // Wait for any other changes, then calculate the overflow padding again. | 175 // Wait for any other changes, then calculate the overflow padding again. |
246 setTimeout(function() { | 176 setTimeout(function() { |
247 // Ensure any dom-if reflects the current properties. | 177 // Ensure any dom-if reflects the current properties. |
248 Polymer.dom.flush(); | 178 Polymer.dom.flush(); |
249 this.updateOverscrollForPage_(); | 179 this.updateOverscrollForPage_(); |
250 }.bind(this)); | 180 }.bind(this)); |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
283 if (!section || !section.offsetParent) | 213 if (!section || !section.offsetParent) |
284 return 0; | 214 return 0; |
285 | 215 |
286 // Find the distance from the section's top to the overscroll. | 216 // Find the distance from the section's top to the overscroll. |
287 var sectionTop = section.offsetParent.offsetTop + section.offsetTop; | 217 var sectionTop = section.offsetParent.offsetTop + section.offsetTop; |
288 var distance = this.$.overscroll.offsetTop - sectionTop; | 218 var distance = this.$.overscroll.offsetTop - sectionTop; |
289 | 219 |
290 return Math.max(0, this.offsetParent.clientHeight - distance); | 220 return Math.max(0, this.offsetParent.clientHeight - distance); |
291 }, | 221 }, |
292 | 222 |
293 /** @private */ | |
294 toggleAdvancedPage_: function() { | |
295 this.advancedToggleExpanded = !this.advancedToggleExpanded; | |
296 }, | |
297 | |
298 /** | 223 /** |
299 * Returns the root page (if it exists) for a route. | 224 * Returns the root page (if it exists) for a route. |
300 * @param {!settings.Route} route | 225 * @param {!settings.Route} route |
301 * @return {(?SettingsAboutPageElement|?SettingsAdvancedPageElement| | 226 * @return {(?SettingsAboutPageElement|?SettingsBasicPageElement)} |
302 * ?SettingsBasicPageElement)} | |
303 */ | 227 */ |
304 getPage_: function(route) { | 228 getPage_: function(route) { |
305 if (settings.Route.ABOUT.contains(route)) { | 229 if (settings.Route.ABOUT.contains(route)) { |
306 return /** @type {?SettingsAboutPageElement} */( | 230 return /** @type {?SettingsAboutPageElement} */( |
307 this.$$('settings-about-page')); | 231 this.$$('settings-about-page')); |
308 } | 232 } |
309 if (settings.Route.ADVANCED.contains(route)) { | 233 if (settings.Route.BASIC.contains(route) || |
310 return /** @type {?SettingsAdvancedPageElement} */( | 234 settings.Route.ADVANCED.contains(route)) { |
311 this.$$('settings-advanced-page')); | |
312 } | |
313 if (settings.Route.BASIC.contains(route)) { | |
314 return /** @type {?SettingsBasicPageElement} */( | 235 return /** @type {?SettingsBasicPageElement} */( |
315 this.$$('settings-basic-page')); | 236 this.$$('settings-basic-page')); |
316 } | 237 } |
317 assertNotReached(); | 238 assertNotReached(); |
318 }, | 239 }, |
319 | 240 |
320 /** | 241 /** |
321 * @param {string} query | 242 * @param {string} query |
322 * @return {!Promise} A promise indicating that searching finished. | 243 * @return {!Promise} A promise indicating that searching finished. |
323 */ | 244 */ |
324 searchContents: function(query) { | 245 searchContents: function(query) { |
325 // Trigger rendering of the basic and advanced pages and search once ready. | 246 // Trigger rendering of the basic and advanced pages and search once ready. |
326 this.inSearchMode_ = true; | 247 this.inSearchMode_ = true; |
327 this.toolbarSpinnerActive = true; | 248 this.toolbarSpinnerActive = true; |
328 | 249 |
329 return new Promise(function(resolve, reject) { | 250 return new Promise(function(resolve, reject) { |
330 setTimeout(function() { | 251 setTimeout(function() { |
331 var whenSearchDone = settings.getSearchManager().search( | 252 var whenSearchDone = |
332 query, assert(this.getPage_(settings.Route.BASIC))); | 253 assert(this.getPage_(settings.Route.BASIC)).searchContents(query); |
333 | |
334 if (this.pageVisibility.advancedSettings !== false) { | |
335 assert(whenSearchDone === settings.getSearchManager().search( | |
336 query, assert(this.getPage_(settings.Route.ADVANCED)))); | |
337 } | |
338 | |
339 whenSearchDone.then(function(request) { | 254 whenSearchDone.then(function(request) { |
340 resolve(); | 255 resolve(); |
341 if (!request.finished) { | 256 if (!request.finished) { |
342 // Nothing to do here. A previous search request was canceled | 257 // Nothing to do here. A previous search request was canceled |
343 // because a new search request was issued before the first one | 258 // because a new search request was issued before the first one |
344 // completed. | 259 // completed. |
345 return; | 260 return; |
346 } | 261 } |
347 | 262 |
348 this.toolbarSpinnerActive = false; | 263 this.toolbarSpinnerActive = false; |
349 this.inSearchMode_ = !request.isSame(''); | 264 this.inSearchMode_ = !request.isSame(''); |
350 this.showNoResultsFound_ = | 265 this.showNoResultsFound_ = |
351 this.inSearchMode_ && !request.didFindMatches(); | 266 this.inSearchMode_ && !request.didFindMatches(); |
352 }.bind(this)); | 267 }.bind(this)); |
353 }.bind(this), 0); | 268 }.bind(this), 0); |
354 }.bind(this)); | 269 }.bind(this)); |
355 }, | 270 }, |
356 | |
357 /** | |
358 * @param {(boolean|undefined)} visibility | |
359 * @return {boolean} True unless visibility is false. | |
360 * @private | |
361 */ | |
362 showAdvancedSettings_: function(visibility) { | |
363 return visibility !== false; | |
364 }, | |
365 }); | 271 }); |
OLD | NEW |