Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(251)

Side by Side Diff: ui/webui/resources/js/cr/ui/page_manager/page_manager.js

Issue 2597013002: Run clang-format on ui/webui/resources (Closed)
Patch Set: remove cr_shared_menu.js Created 3 years, 12 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 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 cr.define('cr.ui.pageManager', function() { 5 cr.define('cr.ui.pageManager', function() {
6 /** 6 /**
7 * PageManager contains a list of root Page and overlay Page objects and 7 * PageManager contains a list of root Page and overlay Page objects and
8 * handles "navigation" by showing and hiding these pages and overlays. On 8 * handles "navigation" by showing and hiding these pages and overlays. On
9 * initial load, PageManager can use the path to open the correct hierarchy 9 * initial load, PageManager can use the path to open the correct hierarchy
10 * of pages and overlay(s). Handlers for user events, like pressing buttons, 10 * of pages and overlay(s). Handlers for user events, like pressing buttons,
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
54 initialize: function(defaultPage) { 54 initialize: function(defaultPage) {
55 this.defaultPage_ = defaultPage; 55 this.defaultPage_ = defaultPage;
56 56
57 cr.ui.FocusOutlineManager.forDocument(document); 57 cr.ui.FocusOutlineManager.forDocument(document);
58 document.addEventListener('scroll', this.handleScroll_.bind(this)); 58 document.addEventListener('scroll', this.handleScroll_.bind(this));
59 59
60 // Trigger the scroll handler manually to set the initial state. 60 // Trigger the scroll handler manually to set the initial state.
61 this.handleScroll_(); 61 this.handleScroll_();
62 62
63 // Shake the dialog if the user clicks outside the dialog bounds. 63 // Shake the dialog if the user clicks outside the dialog bounds.
64 var containers = /** @type {!NodeList<!HTMLElement>} */( 64 var containers = /** @type {!NodeList<!HTMLElement>} */ (
65 document.querySelectorAll('body > .overlay')); 65 document.querySelectorAll('body > .overlay'));
66 for (var i = 0; i < containers.length; i++) { 66 for (var i = 0; i < containers.length; i++) {
67 var overlay = containers[i]; 67 var overlay = containers[i];
68 cr.ui.overlay.setupOverlay(overlay); 68 cr.ui.overlay.setupOverlay(overlay);
69 overlay.addEventListener('cancelOverlay', 69 overlay.addEventListener(
70 this.cancelOverlay.bind(this)); 70 'cancelOverlay', this.cancelOverlay.bind(this));
71 } 71 }
72 72
73 cr.ui.overlay.globalInitialization(); 73 cr.ui.overlay.globalInitialization();
74 }, 74 },
75 75
76 /** 76 /**
77 * Registers new page. 77 * Registers new page.
78 * @param {!cr.ui.pageManager.Page} page Page to register. 78 * @param {!cr.ui.pageManager.Page} page Page to register.
79 */ 79 */
80 register: function(page) { 80 register: function(page) {
81 this.registeredPages[page.name.toLowerCase()] = page; 81 this.registeredPages[page.name.toLowerCase()] = page;
82 page.initializePage(); 82 page.initializePage();
83 }, 83 },
84 84
85 /** 85 /**
86 * Registers a new Overlay page. 86 * Registers a new Overlay page.
87 * @param {!cr.ui.pageManager.Page} overlay Overlay to register. 87 * @param {!cr.ui.pageManager.Page} overlay Overlay to register.
88 * @param {cr.ui.pageManager.Page} parentPage Associated parent page for 88 * @param {cr.ui.pageManager.Page} parentPage Associated parent page for
89 * this overlay. 89 * this overlay.
90 * @param {Array} associatedControls Array of control elements associated 90 * @param {Array} associatedControls Array of control elements associated
91 * with this page. 91 * with this page.
92 */ 92 */
93 registerOverlay: function(overlay, 93 registerOverlay: function(overlay, parentPage, associatedControls) {
94 parentPage,
95 associatedControls) {
96 this.registeredOverlayPages[overlay.name.toLowerCase()] = overlay; 94 this.registeredOverlayPages[overlay.name.toLowerCase()] = overlay;
97 overlay.parentPage = parentPage; 95 overlay.parentPage = parentPage;
98 if (associatedControls) { 96 if (associatedControls) {
99 overlay.associatedControls = associatedControls; 97 overlay.associatedControls = associatedControls;
100 if (associatedControls.length) { 98 if (associatedControls.length) {
101 overlay.associatedSection = 99 overlay.associatedSection =
102 this.findSectionForNode_(associatedControls[0]); 100 this.findSectionForNode_(associatedControls[0]);
103 } 101 }
104 102
105 // Sanity check. 103 // Sanity check.
106 for (var i = 0; i < associatedControls.length; ++i) { 104 for (var i = 0; i < associatedControls.length; ++i) {
107 assert(associatedControls[i], 'Invalid element passed.'); 105 assert(associatedControls[i], 'Invalid element passed.');
108 } 106 }
109 } 107 }
110 108
111 overlay.tab = undefined; 109 overlay.tab = undefined;
112 overlay.isOverlay = true; 110 overlay.isOverlay = true;
113 111
114 overlay.reverseButtonStrip(); 112 overlay.reverseButtonStrip();
115 overlay.initializePage(); 113 overlay.initializePage();
116 }, 114 },
117 115
118 /** 116 /**
119 * Shows the default page. 117 * Shows the default page.
120 * @param {boolean=} opt_updateHistory If we should update the history after 118 * @param {boolean=} opt_updateHistory If we should update the history after
121 * showing the page (defaults to true). 119 * showing the page (defaults to true).
122 */ 120 */
123 showDefaultPage: function(opt_updateHistory) { 121 showDefaultPage: function(opt_updateHistory) {
124 assert(this.defaultPage_ instanceof cr.ui.pageManager.Page, 122 assert(
125 'PageManager must be initialized with a default page.'); 123 this.defaultPage_ instanceof cr.ui.pageManager.Page,
124 'PageManager must be initialized with a default page.');
126 this.showPageByName(this.defaultPage_.name, opt_updateHistory); 125 this.showPageByName(this.defaultPage_.name, opt_updateHistory);
127 }, 126 },
128 127
129 /** 128 /**
130 * Shows a registered page. This handles both root and overlay pages. 129 * Shows a registered page. This handles both root and overlay pages.
131 * @param {string} pageName Page name. 130 * @param {string} pageName Page name.
132 * @param {boolean=} opt_updateHistory If we should update the history after 131 * @param {boolean=} opt_updateHistory If we should update the history after
133 * showing the page (defaults to true). 132 * showing the page (defaults to true).
134 * @param {Object=} opt_propertyBag An optional bag of properties including 133 * @param {Object=} opt_propertyBag An optional bag of properties including
135 * replaceState (if history state should be replaced instead of pushed). 134 * replaceState (if history state should be replaced instead of pushed).
136 * hash (a hash state to attach to the page). 135 * hash (a hash state to attach to the page).
137 */ 136 */
138 showPageByName: function(pageName, 137 showPageByName: function(pageName, opt_updateHistory, opt_propertyBag) {
139 opt_updateHistory,
140 opt_propertyBag) {
141 opt_updateHistory = opt_updateHistory !== false; 138 opt_updateHistory = opt_updateHistory !== false;
142 opt_propertyBag = opt_propertyBag || {}; 139 opt_propertyBag = opt_propertyBag || {};
143 140
144 // If a bubble is currently being shown, hide it. 141 // If a bubble is currently being shown, hide it.
145 this.hideBubble(); 142 this.hideBubble();
146 143
147 // Find the currently visible root-level page. 144 // Find the currently visible root-level page.
148 var rootPage = null; 145 var rootPage = null;
149 for (var name in this.registeredPages) { 146 for (var name in this.registeredPages) {
150 var page = this.registeredPages[name]; 147 var page = this.registeredPages[name];
(...skipping 30 matching lines...) Expand all
181 this.forEachPage_(!isRootPageLocked, function(page) { 178 this.forEachPage_(!isRootPageLocked, function(page) {
182 if (page.name != pageName && !this.isAncestorOfPage(page, targetPage)) 179 if (page.name != pageName && !this.isAncestorOfPage(page, targetPage))
183 page.willHidePage(); 180 page.willHidePage();
184 }); 181 });
185 182
186 // Update the page's hash. 183 // Update the page's hash.
187 targetPage.hash = opt_propertyBag.hash || ''; 184 targetPage.hash = opt_propertyBag.hash || '';
188 185
189 // Update visibilities to show only the hierarchy of the target page. 186 // Update visibilities to show only the hierarchy of the target page.
190 this.forEachPage_(!isRootPageLocked, function(page) { 187 this.forEachPage_(!isRootPageLocked, function(page) {
191 page.visible = page.name == pageName || 188 page.visible =
192 this.isAncestorOfPage(page, targetPage); 189 page.name == pageName || this.isAncestorOfPage(page, targetPage);
193 }); 190 });
194 191
195 // Update the history and current location. 192 // Update the history and current location.
196 if (opt_updateHistory) 193 if (opt_updateHistory)
197 this.updateHistoryState_(!!opt_propertyBag.replaceState); 194 this.updateHistoryState_(!!opt_propertyBag.replaceState);
198 195
199 // Update focus if any other control was focused on the previous page, 196 // Update focus if any other control was focused on the previous page,
200 // or the previous page is not known. 197 // or the previous page is not known.
201 if (document.activeElement != document.body && 198 if (document.activeElement != document.body &&
202 (!rootPage || rootPage.pageDiv.contains(document.activeElement))) { 199 (!rootPage || rootPage.pageDiv.contains(document.activeElement))) {
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after
269 }, 266 },
270 267
271 /** 268 /**
272 * Returns true if the page is a direct descendent of a root page, or if 269 * Returns true if the page is a direct descendent of a root page, or if
273 * the page is considered always on top. Doesn't consider visibility. 270 * the page is considered always on top. Doesn't consider visibility.
274 * @param {cr.ui.pageManager.Page} page Page to check. 271 * @param {cr.ui.pageManager.Page} page Page to check.
275 * @return {boolean} True if |page| is a top-level overlay. 272 * @return {boolean} True if |page| is a top-level overlay.
276 */ 273 */
277 isTopLevelOverlay: function(page) { 274 isTopLevelOverlay: function(page) {
278 return page.isOverlay && 275 return page.isOverlay &&
279 (page.alwaysOnTop || this.getNestingLevel(page) == 1); 276 (page.alwaysOnTop || this.getNestingLevel(page) == 1);
280 }, 277 },
281 278
282 /** 279 /**
283 * Called when an page is shown or hidden to update the root page 280 * Called when an page is shown or hidden to update the root page
284 * based on the page's new visibility. 281 * based on the page's new visibility.
285 * @param {cr.ui.pageManager.Page} page The page being made visible or 282 * @param {cr.ui.pageManager.Page} page The page being made visible or
286 * invisible. 283 * invisible.
287 */ 284 */
288 onPageVisibilityChanged: function(page) { 285 onPageVisibilityChanged: function(page) {
289 this.updateRootPageFreezeState(); 286 this.updateRootPageFreezeState();
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after
402 /** 399 /**
403 * Callback for window.onpopstate to handle back/forward navigations. 400 * Callback for window.onpopstate to handle back/forward navigations.
404 * @param {string} pageName The current page name. 401 * @param {string} pageName The current page name.
405 * @param {string} hash The hash to pass into the page. 402 * @param {string} hash The hash to pass into the page.
406 * @param {Object} data State data pushed into history. 403 * @param {Object} data State data pushed into history.
407 */ 404 */
408 setState: function(pageName, hash, data) { 405 setState: function(pageName, hash, data) {
409 var currentOverlay = this.getVisibleOverlay_(); 406 var currentOverlay = this.getVisibleOverlay_();
410 var lowercaseName = pageName.toLowerCase(); 407 var lowercaseName = pageName.toLowerCase();
411 var newPage = this.registeredPages[lowercaseName] || 408 var newPage = this.registeredPages[lowercaseName] ||
412 this.registeredOverlayPages[lowercaseName] || 409 this.registeredOverlayPages[lowercaseName] || this.defaultPage_;
413 this.defaultPage_;
414 if (currentOverlay && !this.isAncestorOfPage(currentOverlay, newPage)) { 410 if (currentOverlay && !this.isAncestorOfPage(currentOverlay, newPage)) {
415 currentOverlay.visible = false; 411 currentOverlay.visible = false;
416 currentOverlay.didClosePage(); 412 currentOverlay.didClosePage();
417 } 413 }
418 this.showPageByName(pageName, false, {hash: hash}); 414 this.showPageByName(pageName, false, {hash: hash});
419 }, 415 },
420 416
421 417
422 /** 418 /**
423 * Whether the page is still loading (i.e. onload hasn't finished running). 419 * Whether the page is still loading (i.e. onload hasn't finished running).
(...skipping 20 matching lines...) Expand all
444 updateRootPageFreezeState: function() { 440 updateRootPageFreezeState: function() {
445 var topPage = this.getTopmostVisiblePage(); 441 var topPage = this.getTopmostVisiblePage();
446 if (topPage) 442 if (topPage)
447 this.setRootPageFrozen_(topPage.isOverlay); 443 this.setRootPageFrozen_(topPage.isOverlay);
448 }, 444 },
449 445
450 /** 446 /**
451 * Change the horizontal offset used to reposition elements while showing an 447 * Change the horizontal offset used to reposition elements while showing an
452 * overlay from the default. 448 * overlay from the default.
453 */ 449 */
454 set horizontalOffset(value) { 450 set horizontalOffset(value) { this.horizontalOffset_ = value; },
455 this.horizontalOffset_ = value;
456 },
457 451
458 /** 452 /**
459 * @param {!cr.ui.pageManager.PageManager.Observer} observer The observer to 453 * @param {!cr.ui.pageManager.PageManager.Observer} observer The observer to
460 * register. 454 * register.
461 */ 455 */
462 addObserver: function(observer) { 456 addObserver: function(observer) { this.observers_.push(observer); },
463 this.observers_.push(observer);
464 },
465 457
466 /** 458 /**
467 * Shows a registered overlay page. Does not update history. 459 * Shows a registered overlay page. Does not update history.
468 * @param {string} overlayName Page name. 460 * @param {string} overlayName Page name.
469 * @param {string} hash The hash state to associate with the overlay. 461 * @param {string} hash The hash state to associate with the overlay.
470 * @param {cr.ui.pageManager.Page} rootPage The currently visible root-level 462 * @param {cr.ui.pageManager.Page} rootPage The currently visible root-level
471 * page. 463 * page.
472 * @return {boolean} Whether we showed an overlay. 464 * @return {boolean} Whether we showed an overlay.
473 * @private 465 * @private
474 */ 466 */
475 showOverlay_: function(overlayName, hash, rootPage) { 467 showOverlay_: function(overlayName, hash, rootPage) {
476 var overlay = this.registeredOverlayPages[overlayName.toLowerCase()]; 468 var overlay = this.registeredOverlayPages[overlayName.toLowerCase()];
477 if (!overlay || !overlay.canShowPage()) 469 if (!overlay || !overlay.canShowPage())
478 return false; 470 return false;
479 471
480 var focusOutlineManager = cr.ui.FocusOutlineManager.forDocument(document); 472 var focusOutlineManager = cr.ui.FocusOutlineManager.forDocument(document);
481 473
482 // Save the currently focused element in the page for restoration later. 474 // Save the currently focused element in the page for restoration later.
483 var currentPage = this.getTopmostVisiblePage(); 475 var currentPage = this.getTopmostVisiblePage();
484 if (currentPage && focusOutlineManager.visible) 476 if (currentPage && focusOutlineManager.visible)
485 currentPage.lastFocusedElement = document.activeElement; 477 currentPage.lastFocusedElement = document.activeElement;
486 478
487 if ((!rootPage || !rootPage.sticky) && 479 if ((!rootPage || !rootPage.sticky) && overlay.parentPage &&
488 overlay.parentPage &&
489 !overlay.parentPage.visible) { 480 !overlay.parentPage.visible) {
490 this.showPageByName(overlay.parentPage.name, false); 481 this.showPageByName(overlay.parentPage.name, false);
491 } 482 }
492 483
493 overlay.hash = hash; 484 overlay.hash = hash;
494 if (!overlay.visible) { 485 if (!overlay.visible) {
495 overlay.visible = true; 486 overlay.visible = true;
496 overlay.didShowPage(); 487 overlay.didShowPage();
497 } else { 488 } else {
498 overlay.didChangeHash(); 489 overlay.didChangeHash();
(...skipping 12 matching lines...) Expand all
511 } 502 }
512 503
513 return true; 504 return true;
514 }, 505 },
515 506
516 /** 507 /**
517 * Returns whether or not an overlay is visible. 508 * Returns whether or not an overlay is visible.
518 * @return {boolean} True if an overlay is visible. 509 * @return {boolean} True if an overlay is visible.
519 * @private 510 * @private
520 */ 511 */
521 isOverlayVisible_: function() { 512 isOverlayVisible_: function() { return this.getVisibleOverlay_() != null; },
522 return this.getVisibleOverlay_() != null;
523 },
524 513
525 /** 514 /**
526 * Returns the currently visible overlay, or null if no page is visible. 515 * Returns the currently visible overlay, or null if no page is visible.
527 * @return {cr.ui.pageManager.Page} The visible overlay. 516 * @return {cr.ui.pageManager.Page} The visible overlay.
528 * @private 517 * @private
529 */ 518 */
530 getVisibleOverlay_: function() { 519 getVisibleOverlay_: function() {
531 var topmostPage = null; 520 var topmostPage = null;
532 for (var name in this.registeredOverlayPages) { 521 for (var name in this.registeredOverlayPages) {
533 var page = this.registeredOverlayPages[name]; 522 var page = this.registeredOverlayPages[name];
534 if (!page.visible) 523 if (!page.visible)
535 continue; 524 continue;
536 525
537 if (page.alwaysOnTop) 526 if (page.alwaysOnTop)
538 return page; 527 return page;
539 528
540 if (!topmostPage || 529 if (!topmostPage ||
541 this.getNestingLevel(page) > this.getNestingLevel(topmostPage)) { 530 this.getNestingLevel(page) > this.getNestingLevel(topmostPage)) {
542 topmostPage = page; 531 topmostPage = page;
543 } 532 }
544 } 533 }
545 return topmostPage; 534 return topmostPage;
546 }, 535 },
547 536
548 /** 537 /**
549 * Returns the topmost visible page (overlays excluded). 538 * Returns the topmost visible page (overlays excluded).
550 * @return {cr.ui.pageManager.Page} The topmost visible page aside from any 539 * @return {cr.ui.pageManager.Page} The topmost visible page aside from any
551 * overlays. 540 * overlays.
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
677 container.style.right = ''; 666 container.style.right = '';
678 container.style.width = ''; 667 container.style.width = '';
679 } 668 }
680 }, 669 },
681 670
682 /** 671 /**
683 * Called when the page is scrolled; moves elements that are position:fixed 672 * Called when the page is scrolled; moves elements that are position:fixed
684 * but should only behave as if they are fixed for vertical scrolling. 673 * but should only behave as if they are fixed for vertical scrolling.
685 * @private 674 * @private
686 */ 675 */
687 handleScroll_: function() { 676 handleScroll_: function() { this.updateAllFrozenElementPositions_(); },
688 this.updateAllFrozenElementPositions_();
689 },
690 677
691 /** 678 /**
692 * Updates all frozen pages to match the horizontal scroll position. 679 * Updates all frozen pages to match the horizontal scroll position.
693 * @private 680 * @private
694 */ 681 */
695 updateAllFrozenElementPositions_: function() { 682 updateAllFrozenElementPositions_: function() {
696 var frozenElements = document.querySelectorAll('.frozen'); 683 var frozenElements = document.querySelectorAll('.frozen');
697 for (var i = 0; i < frozenElements.length; i++) 684 for (var i = 0; i < frozenElements.length; i++)
698 this.updateFrozenElementHorizontalPosition_(frozenElements[i]); 685 this.updateFrozenElementHorizontalPosition_(frozenElements[i]);
699 }, 686 },
(...skipping 18 matching lines...) Expand all
718 * for the root pages. 705 * for the root pages.
719 * @param {function(cr.ui.pageManager.Page)} callback The callback. 706 * @param {function(cr.ui.pageManager.Page)} callback The callback.
720 * @private 707 * @private
721 */ 708 */
722 forEachPage_: function(includeRootPages, callback) { 709 forEachPage_: function(includeRootPages, callback) {
723 var pageNames = Object.keys(this.registeredOverlayPages); 710 var pageNames = Object.keys(this.registeredOverlayPages);
724 if (includeRootPages) 711 if (includeRootPages)
725 pageNames = Object.keys(this.registeredPages).concat(pageNames); 712 pageNames = Object.keys(this.registeredPages).concat(pageNames);
726 713
727 pageNames.forEach(function(name) { 714 pageNames.forEach(function(name) {
728 callback.call(this, this.registeredOverlayPages[name] || 715 callback.call(
729 this.registeredPages[name]); 716 this,
717 this.registeredOverlayPages[name] || this.registeredPages[name]);
730 }, this); 718 }, this);
731 }, 719 },
732 }; 720 };
733 721
734 /** 722 /**
735 * An observer of PageManager. 723 * An observer of PageManager.
736 * @interface 724 * @interface
737 */ 725 */
738 PageManager.Observer = function() {} 726 PageManager.Observer = function() {};
739 727
740 PageManager.Observer.prototype = { 728 PageManager.Observer.prototype = {
741 /** 729 /**
742 * Called when a page is being shown or has been hidden. 730 * Called when a page is being shown or has been hidden.
743 * @param {cr.ui.pageManager.Page} page The page being shown or hidden. 731 * @param {cr.ui.pageManager.Page} page The page being shown or hidden.
744 */ 732 */
745 onPageVisibilityChanged: function(page) {}, 733 onPageVisibilityChanged: function(page) {},
746 734
747 /** 735 /**
748 * Called when a new title should be set. 736 * Called when a new title should be set.
749 * @param {string} title The title to set. 737 * @param {string} title The title to set.
750 */ 738 */
751 updateTitle: function(title) {}, 739 updateTitle: function(title) {},
752 740
753 /** 741 /**
754 * Called when a page is navigated to. 742 * Called when a page is navigated to.
755 * @param {string} path The path of the page being visited. 743 * @param {string} path The path of the page being visited.
756 * @param {boolean} replace If true, allow no history events to be created. 744 * @param {boolean} replace If true, allow no history events to be created.
757 */ 745 */
758 updateHistory: function(path, replace) {}, 746 updateHistory: function(path, replace) {},
759 }; 747 };
760 748
761 // Export 749 // Export
762 return { 750 return {PageManager: PageManager};
763 PageManager: PageManager
764 };
765 }); 751 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698