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]]" selected-page-id="{{selectedId}}">
  12  *     </cr-settings-main>
  13  *
  14  * See cr-settings-drawer for example of use in 'paper-drawer-panel'.
  15  *
  16  * @group Chrome Settings Elements
  17  * @element cr-settings-main
  18  */
  19 Polymer({
  20   is: 'cr-settings-main',
  21
  22   properties: {
  23     /**
  24      * Preferences state.
  25      *
  26      * @type {?CrSettingsPrefsElement}
  27      */
  28     prefs: {
  29       type: Object,
  30       notify: true,
  31     },
  32
  33     /**
  34      * Pages that may be shown.
  35      * @type {!Array<!HTMLElement>}
  36      */
  37     pages: {
  38       type: Array,
  39       value: function() { return []; },
  40       notify: true,
  41       readOnly: true,
  42     },
  43
  44     /**
  45      * Currently selected page.
  46      * @type {?HTMLElement}
  47      */
  48     selectedPage: {
  49       type: Object,
  50       notify: true,
  51     },
  52
  53     /**
  54      * ID of the currently selected page.
  55      */
  56     selectedPageId: {
  57       type: String,
  58       notify: true,
  59       value: '',
  60       observer: 'selectedPageIdChanged_',
  61     },
  62   },
  63
  64   /** @override */
  65   ready: function() {
  66     var observer = new MutationObserver(this.pageContainerUpdated_.bind(this));
  67     observer.observe(this.$.pageContainer,
  68                      /** @type {MutationObserverInit} */ {
  69                        childList: true,
  70                      });
  71     this.pageContainerUpdated_();
  72   },
  73
  74   /**
  75    * Polymer changed event for selectedPageId. See note for onIronSelect_ below.
  76    * @private
  77    */
  78   selectedPageIdChanged_: function() {
  79     this.$.pageContainer.selected = this.selectedPageId;
  80   },
  81
  82   /**
  83    * We observe $.pageContainer.on-iron-select instead of using data binding
  84    * for two reasons:
  85    * 1) We need to exclude subpages
  86    * 2) There is a bug with data binding or our useage of it here causing
  87    *    this.selectedPage to get set to the index of $.pageContainer instead of
  88    *    the valueattr identifier (PAGE_ID). TODO(stevenjb/jlklien): Investigate
  89    *    fixing this and using filters once we switch to Polymer 0.8.
  90    * @private
  91    */
  92   onIronSelect_: function(event) {
  93     if (event.target != this.$.pageContainer || event.detail.item.subpage) {
  94       return;
  95     }
  96     this.selectedPageId = event.detail.item.PAGE_ID;
  97   },
  98
  99   /**
 100    * If no page is selected, selects the first page. This happens on load and
 101    * when a selected page is removed.
 102    * @private
 103    */
 104   ensureSelection_: function() {
 105     if (!this.pages.length)
 106       return;
 107     if (this.selectedPageId == '')
 108       this.selectedPageId = this.pages[0].PAGE_ID;
 109   },
 110
 111   /**
 112    * Updates the list of pages using the pages in iron-pages.
 113    * @private
 114    */
 115   pageContainerUpdated_: function() {
 116     this._setPages(this.$.pageContainer.items.filter(function(item) {
 117       return !item.subpage;
 118     }));
 119     this.ensureSelection_();
 120   },
 121 });