chrome/browser/resources/settings/settings_main/settings_main.js

   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
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * 'cr-settings-main' displays the selected settings page.
   8  *
   9  * Example:
  10  *
  11  *     <cr-settings-main pages="{{pages}}" selectedPageId="{{selectedId}}">
  12  *     </cr-settings-main>
  13  *
  14  * See cr-settings-drawer for example of use in 'core-drawer-panel'.
  15  *
  16  * @group Chrome Settings Elements
  17  * @element cr-settings-main
  18  */
  19 Polymer('cr-settings-main', {
  20   publish: {
  21     /**
  22      * Preferences state.
  23      *
  24      * @attribute prefs
  25      * @type CrSettingsPrefsElement
  26      * @default null
  27      */
  28     prefs: null,
  29
  30     /**
  31      * Pages that may be shown.
  32      *
  33      * @attribute pages
  34      * @type Array<!Object>
  35      * @default null
  36      */
  37     pages: null,
  38
  39     /**
  40      * ID of the currently selected page.
  41      *
  42      * @attribute selectedPageId
  43      * @type string
  44      * default ''
  45      */
  46     selectedPageId: '',
  47   },
  48
  49   /** @override */
  50   created: function() {
  51     this.pages = [];
  52   },
  53
  54   /** @override */
  55   ready: function() {
  56     var observer = new MutationObserver(this.pageContainerUpdated_.bind(this));
  57     observer.observe(this.$.pageContainer,
  58                      /** @type {MutationObserverInit} */ {
  59                        childList: true,
  60                      });
  61     this.pages = this.$.pageContainer.items;
  62     this.ensureSelection_();
  63   },
  64
  65   /**
  66    * If no page is selected, selects the first page. This happens on load and
  67    * when a selected page is removed.
  68    *
  69    * @private
  70    */
  71   ensureSelection_: function() {
  72     if (!this.pages.length)
  73       return;
  74     if (this.selectedPageId == '')
  75       this.selectedPageId = this.pages[0].PAGE_ID;
  76   },
  77
  78   /**
  79    * Updates the list of pages using the pages in core-animated-pages.
  80    *
  81    * @private
  82    */
  83   pageContainerUpdated_: function() {
  84     this.pages = this.$.pageContainer.items;
  85     this.ensureSelection_();
  86   },
  87 });