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