OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 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 * Responds to route changes by expanding, collapsing, or scrolling to sections | 6 * Responds to route changes by expanding, collapsing, or scrolling to sections |
7 * on the page. Expanded sections take up the full height of the container. At | 7 * on the page. Expanded sections take up the full height of the container. At |
8 * most one section should be expanded at any given time. | 8 * most one section should be expanded at any given time. |
9 * @polymerBehavior MainPageBehavior | 9 * @polymerBehavior MainPageBehavior |
10 */ | 10 */ |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
86 // from the main page. It seems sensible to set the flag in those cases, | 86 // from the main page. It seems sensible to set the flag in those cases, |
87 // unfortunately bug 708465 happens. Figure out why that is and then set | 87 // unfortunately bug 708465 happens. Figure out why that is and then set |
88 // this flag more broadly. | 88 // this flag more broadly. |
89 if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage()) | 89 if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage()) |
90 this.isSubpageAnimating = true; | 90 this.isSubpageAnimating = true; |
91 | 91 |
92 // For previously uncreated pages (including on first load), allow the page | 92 // For previously uncreated pages (including on first load), allow the page |
93 // to render before scrolling to or expanding the section. | 93 // to render before scrolling to or expanding the section. |
94 if (!oldRoute) { | 94 if (!oldRoute) { |
95 this.fire('hide-container'); | 95 this.fire('hide-container'); |
96 setTimeout(function() { | 96 setTimeout(() => { |
97 this.fire('show-container'); | 97 this.fire('show-container'); |
98 this.tryTransitionToSection_(scrollToSection, true); | 98 this.tryTransitionToSection_(scrollToSection, true); |
99 }.bind(this)); | 99 }); |
100 } else if (this.scrollHeight == 0) { | 100 } else if (this.scrollHeight == 0) { |
101 setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection)); | 101 setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection)); |
102 } else { | 102 } else { |
103 this.tryTransitionToSection_(scrollToSection); | 103 this.tryTransitionToSection_(scrollToSection); |
104 } | 104 } |
105 }, | 105 }, |
106 | 106 |
107 /** | 107 /** |
108 * When exiting search mode, we need to make another attempt to scroll to | 108 * When exiting search mode, we need to make another attempt to scroll to |
109 * the correct section, since it has just been re-rendered. | 109 * the correct section, since it has just been re-rendered. |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
169 assert(currentRoute.section); | 169 assert(currentRoute.section); |
170 // Hide the container again while Advanced Page template is being loaded. | 170 // Hide the container again while Advanced Page template is being loaded. |
171 this.fire('hide-container'); | 171 this.fire('hide-container'); |
172 promise = this.$$('#advancedPageTemplate').get(); | 172 promise = this.$$('#advancedPageTemplate').get(); |
173 } | 173 } |
174 | 174 |
175 // When this animation ends, another may be necessary. Call this function | 175 // When this animation ends, another may be necessary. Call this function |
176 // again after the promise resolves. | 176 // again after the promise resolves. |
177 if (promise) { | 177 if (promise) { |
178 promise.then(this.tryTransitionToSection_.bind(this, scrollToSection)) | 178 promise.then(this.tryTransitionToSection_.bind(this, scrollToSection)) |
179 .then(function() { | 179 .then(() => { |
180 this.fire('show-container'); | 180 this.fire('show-container'); |
181 }.bind(this)); | 181 }); |
182 } | 182 } |
183 }, | 183 }, |
184 | 184 |
185 /** | 185 /** |
186 * If the current animation is inconsistent with the current route, stops the | 186 * If the current animation is inconsistent with the current route, stops the |
187 * animation by finishing or canceling it so the new route can be animated to. | 187 * animation by finishing or canceling it so the new route can be animated to. |
188 * @private | 188 * @private |
189 */ | 189 */ |
190 maybeStopCurrentAnimation_: function() { | 190 maybeStopCurrentAnimation_: function() { |
191 var currentRoute = settings.getCurrentRoute(); | 191 var currentRoute = settings.getCurrentRoute(); |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
252 this.origScrollTop_ = this.scroller.scrollTop; | 252 this.origScrollTop_ = this.scroller.scrollTop; |
253 this.fire('freeze-scroll', true); | 253 this.fire('freeze-scroll', true); |
254 | 254 |
255 // Freeze the section's height so its card can be removed from the flow. | 255 // Freeze the section's height so its card can be removed from the flow. |
256 section.setFrozen(true); | 256 section.setFrozen(true); |
257 | 257 |
258 this.currentAnimation_ = section.animateExpand(this.scroller); | 258 this.currentAnimation_ = section.animateExpand(this.scroller); |
259 | 259 |
260 return this.currentAnimation_.finished | 260 return this.currentAnimation_.finished |
261 .then( | 261 .then( |
262 function() { | 262 () => { |
263 this.finishedExpanding_(section); | 263 this.finishedExpanding_(section); |
264 }.bind(this), | 264 }, |
265 function() { | 265 () => { |
266 // The animation was canceled; restore the section and scroll | 266 // The animation was canceled; restore the section and scroll |
267 // position. | 267 // position. |
268 section.setFrozen(false); | 268 section.setFrozen(false); |
269 this.scroller.scrollTop = this.origScrollTop_; | 269 this.scroller.scrollTop = this.origScrollTop_; |
270 }.bind(this)) | 270 }) |
271 .then(function() { | 271 .then(() => { |
272 this.fire('freeze-scroll', false); | 272 this.fire('freeze-scroll', false); |
273 this.currentAnimation_ = null; | 273 this.currentAnimation_ = null; |
274 }.bind(this)); | 274 }); |
275 }, | 275 }, |
276 | 276 |
277 /** @private */ | 277 /** @private */ |
278 finishedExpanding_: function(section) { | 278 finishedExpanding_: function(section) { |
279 // Hide other sections and scroll to the top of the subpage. | 279 // Hide other sections and scroll to the top of the subpage. |
280 this.classList.add('showing-subpage'); | 280 this.classList.add('showing-subpage'); |
281 this.toggleOtherSectionsHidden_(section.section, true); | 281 this.toggleOtherSectionsHidden_(section.section, true); |
282 this.scroller.scrollTop = 0; | 282 this.scroller.scrollTop = 0; |
283 section.setFrozen(false); | 283 section.setFrozen(false); |
284 | 284 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
317 this.toggleOtherSectionsHidden_(section.section, false); | 317 this.toggleOtherSectionsHidden_(section.section, false); |
318 this.classList.remove('showing-subpage'); | 318 this.classList.remove('showing-subpage'); |
319 | 319 |
320 if (!shouldAnimateCollapse) { | 320 if (!shouldAnimateCollapse) { |
321 // Finish by restoring the section into the page. | 321 // Finish by restoring the section into the page. |
322 section.setFrozen(false); | 322 section.setFrozen(false); |
323 return Promise.resolve(); | 323 return Promise.resolve(); |
324 } | 324 } |
325 | 325 |
326 // Play the actual collapse animation. | 326 // Play the actual collapse animation. |
327 return new Promise(function(resolve, reject) { | 327 return new Promise((resolve, reject) => { |
328 // Wait for the other sections to show up so we can scroll properly. | 328 // Wait for the other sections to show up so we can scroll properly. |
329 setTimeout(function() { | 329 setTimeout(() => { |
330 var newSection = settings.getCurrentRoute().section && | 330 var newSection = settings.getCurrentRoute().section && |
331 this.getSection(settings.getCurrentRoute().section); | 331 this.getSection(settings.getCurrentRoute().section); |
332 | 332 |
333 // Scroll to the new section or the original position. | 333 // Scroll to the new section or the original position. |
334 if (newSection && !settings.lastRouteChangeWasPopstate() && | 334 if (newSection && !settings.lastRouteChangeWasPopstate() && |
335 !settings.getCurrentRoute().isSubpage()) { | 335 !settings.getCurrentRoute().isSubpage()) { |
336 newSection.scrollIntoView(); | 336 newSection.scrollIntoView(); |
337 } else { | 337 } else { |
338 this.scroller.scrollTop = this.origScrollTop_; | 338 this.scroller.scrollTop = this.origScrollTop_; |
339 } | 339 } |
340 | 340 |
341 this.currentAnimation_ = section.animateCollapse( | 341 this.currentAnimation_ = section.animateCollapse( |
342 /** @type {!HTMLElement} */ (this.scroller)); | 342 /** @type {!HTMLElement} */ (this.scroller)); |
343 | 343 |
344 this.currentAnimation_.finished | 344 this.currentAnimation_.finished |
345 .catch(function() { | 345 .catch(() => { |
346 // The collapse was canceled, so the page is showing a subpage | 346 // The collapse was canceled, so the page is showing a subpage |
347 // still. | 347 // still. |
348 this.fire('subpage-expand'); | 348 this.fire('subpage-expand'); |
349 }.bind(this)) | 349 }) |
350 .then(function() { | 350 .then(() => { |
351 // Clean up after the animation succeeds or cancels. | 351 // Clean up after the animation succeeds or cancels. |
352 section.setFrozen(false); | 352 section.setFrozen(false); |
353 section.classList.remove('collapsing'); | 353 section.classList.remove('collapsing'); |
354 this.fire('freeze-scroll', false); | 354 this.fire('freeze-scroll', false); |
355 this.currentAnimation_ = null; | 355 this.currentAnimation_ = null; |
356 resolve(); | 356 resolve(); |
357 }.bind(this)); | 357 }); |
358 }.bind(this)); | 358 }); |
359 }.bind(this)); | 359 }); |
360 }, | 360 }, |
361 | 361 |
362 /** | 362 /** |
363 /** | 363 /** |
364 * Hides or unhides the sections not being expanded. | 364 * Hides or unhides the sections not being expanded. |
365 * @param {string} sectionName The section to keep visible. | 365 * @param {string} sectionName The section to keep visible. |
366 * @param {boolean} hidden Whether the sections should be hidden. | 366 * @param {boolean} hidden Whether the sections should be hidden. |
367 * @private | 367 * @private |
368 */ | 368 */ |
369 toggleOtherSectionsHidden_: function(sectionName, hidden) { | 369 toggleOtherSectionsHidden_: function(sectionName, hidden) { |
(...skipping 13 matching lines...) Expand all Loading... |
383 return /** @type {?SettingsSectionElement} */ ( | 383 return /** @type {?SettingsSectionElement} */ ( |
384 this.$$('settings-section[section="' + section + '"]')); | 384 this.$$('settings-section[section="' + section + '"]')); |
385 }, | 385 }, |
386 }; | 386 }; |
387 | 387 |
388 /** @polymerBehavior */ | 388 /** @polymerBehavior */ |
389 var MainPageBehavior = [ | 389 var MainPageBehavior = [ |
390 settings.RouteObserverBehavior, | 390 settings.RouteObserverBehavior, |
391 MainPageBehaviorImpl, | 391 MainPageBehaviorImpl, |
392 ]; | 392 ]; |
OLD | NEW |