chrome/browser/resources/settings/settings_page/settings_page_header.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-page-header' shows a basic heading with a 'iron-icon'.
   8  *
   9  * Example:
  10  *
  11  *    <cr-settings-page-header page="{{page}}">
  12  *    </cr-settings-page-header>
  13  *
  14  * @group Chrome Settings Elements
  15  * @element cr-settings-page-header
  16  */
  17 Polymer({
  18   is: 'cr-settings-page-header',
  19
  20   properties: {
  21     /**
  22      * The current stack of pages being viewed. I.e., may contain subpages.
  23      * @type {!Array<!HTMLElement>}
  24      */
  25     pageStack: {
  26       type: Array,
  27       value: function() { return []; },
  28     },
  29
  30     /**
  31      * The currently selected page.
  32      * @type {?HTMLElement}
  33      */
  34     selectedPage: {
  35       type: Object,
  36       observer: 'selectedPageChanged_',
  37     },
  38
  39     /**
  40      * The icon of the page at the root of the stack.
  41      * @private
  42      */
  43     topPageIcon_: {
  44       type: String,
  45       computed: 'getTopPageIcon_(pageStack)',
  46     },
  47
  48     /**
  49      * The parent pages of the current page.
  50      * @private {!Array<!HTMLElement>}
  51      */
  52     parentPages_: {
  53       type: Array,
  54       computed: 'getParentPages_(pageStack)',
  55     },
  56
  57     /**
  58      * The title of the current page.
  59      * @private
  60      */
  61     currentPageTitle_: {
  62       type: String,
  63       computed: 'getCurrentPageTitle_(pageStack)',
  64     },
  65   },
  66
  67   /**
  68    * @param {!Array<!HTMLElement>} pageStack
  69    * @return {string} The icon for the top page in the stack.
  70    * @private
  71    */
  72   getTopPageIcon_: function(pageStack) {
  73     if (pageStack.length == 0)
  74       return '';
  75     return pageStack[0].icon;
  76   },
  77
  78   /**
  79    * @param {!HTMLElement} page
  80    * @return {string} A url link to the given page.
  81    * @private
  82    */
  83   urlFor_: function(page) {
  84     return page.route ? MoreRouting.urlFor(page.route) : '';
  85   },
  86
  87   /**
  88    * @param {!Array<!HTMLElement>} pageStack
  89    * @return {string} The title of the current page.
  90    * @private
  91    */
  92   getCurrentPageTitle_: function(pageStack) {
  93     if (pageStack.length == 0)
  94       return '';
  95     return pageStack[pageStack.length - 1].pageTitle;
  96   },
  97
  98   /** @private */
  99   selectedPageChanged_: function() {
 100     if (this.selectedPage && this.selectedPage.subpage) {
 101       // NOTE: Must reassign pageStack rather than doing push() so that the
 102       // computed property (parentPages) will be notified of the update.
 103       this.pageStack = this.pageStack.concat(this.selectedPage);
 104     } else if (this.selectedPage) {
 105       this.pageStack = [this.selectedPage];
 106     }
 107   },
 108
 109   /**
 110    * Gets the parent pages in the given page stack; i.e. returns all pages but
 111    * the topmost subpage.
 112    *
 113    * @param {Array<HTMLElement>} stack
 114    * @return {!Array<HTMLElement>}
 115    * @private
 116    */
 117   getParentPages_: function(stack) {
 118     if (!stack || stack.length <= 1) {
 119       return [];
 120     }
 121
 122     return stack.slice(0, stack.length - 1);
 123   },
 124 });