1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183
  184
  185
  186
  187
  188
  189
  190
  191
  192
  193
  194
  195
  196
  197
  198
  199
  200
  201
  202
  203
  204
  205
  206
  207
  208
  209
  210
  211
  212
  213
  214
  215
  216
  217
  218
  219
  220
  221
  222
  223
  224
  225
  226
  227
  228
  229
  230
  231
  232
  233
  234
  235
  236
  237
  238
  239
  240
  241
  242
  243
  244
  245
  246
  247
  248
  249
  250
  251
  252
  253
  254
  255
  256
  257
  258
  259
  260
  261
  262
  263
  264
  265
  266
  267
  268
  269
  270
  271
  272
  273
  274
  275
  276
  277
  278
  279
  280
  281
  282
  283
  284
  285
  286
  287
  288
  289
  290
  291
  292
  293
  294
  295
  296
  297
  298
  299
  300
  301
  302
  303
  304
  305
  306
  307
  308
  309
  310
  311
  312
  313
  314
  315
  316
  317
  318
  319
  320
  321
  322
  323
  324
  325
  326
  327
  328
  329
  330
  331
  332
  333
  334
  335
  336
  337
  338
  339
  340
  341
  342
  343
  344
  345
  346

ash / webui / common / resources / navigation_view_panel.js [blame]

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://resources/ash/common/cr_elements/cr_drawer/cr_drawer.js';
import 'chrome://resources/ash/common/cr_elements/icons.html.js';
import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
import 'chrome://resources/polymer/v3_0/iron-media-query/iron-media-query.js';
import './navigation_shared_vars.css.js';
import './page_toolbar.js';

import {assert} from 'chrome://resources/ash/common/assert.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {SelectorItem} from './navigation_selector.js';
import {getTemplate} from './navigation_view_panel.html.js';

const navigationPageChanged = 'onNavigationPageChanged';

/**
 * @fileoverview
 * 'navigation-view-panel' manages the wiring between a display page and
 * <navigation-selector>.
 *
 * Child pages that are interested in navigation page change events will need to
 * implement a public function "onNavigationPageChanged()" to be notified of the
 * event.
 *
 * To send events between pages, the component that has <navigation-view-panel>
 * must call on "notifyEvent(functionName, params)". |params| is an optional
 * parameter.
 *
 * To provide page components with initial data, include a "initialData" object
 * as part of the "addSelector()" function. Page components will then have an
 * implicit property, details, with the object provided.
 */
export class NavigationViewPanelElement extends PolymerElement {
  static get is() {
    return 'navigation-view-panel';
  }

  static get template() {
    return getTemplate();
  }

  static get properties() {
    return {
      /**
       * @type {?SelectorItem}
       * Notifies parent elements of the the selected item.
       */
      selectedItem: {
        type: Object,
        observer: 'selectedItemChanged_',
        value: null,
      },

      /**
       * @type {!Array<!SelectorItem>}
       * @private
       */
      selectorItems_: {
        type: Array,
        value: () => [],
      },

      /**
       * This title only appears if |showToolBar| is True. Is otherwise a
       * no-opt if title is set and |showToolbar| is False.
       */
      title: {
        type: String,
        value: '',
      },

      /**
       * If |hasSearch| is True, the toolbar internal widths will be adjusted
       * to fit the search bar when |showNav| is False.
       */
      hasSearch: {
        type: Boolean,
      },

      /**
       * Can only be set to True if specified from the parent element by
       * adding show-banner as an attribute to <navigation-view-panel>. If
       * True, a banner will appear above the 2 column view (sidebar +
       * page). If False, banner grid-area will not show and regular grid
       * layout will be used based on show-tool-bar property.
       * @type {boolean}
       */
      showBanner: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
      },

      /**
       * Can only be set to True if specified from the parent element by
       * adding show-tool-bar as an attribute to <navigation-view-panel>. If
       * True, a toolbar will appear at the top of the navigation view panel
       * with a 2 column view below it (sidebar + page). If False,
       * navigation view panel will only be a 2 column view (sidebar +
       * page).
       */
      showToolBar: {
        type: Boolean,
        value: false,
      },

      /** @protected {boolean} */
      showNav: {
        type: Boolean,
      },
    };
  }

  /** @override */
  constructor() {
    super();
    window.addEventListener('menu-tap', () => this.onMenuButtonTap_());
    window.addEventListener(
        'navigation-selected', () => this.onNavigationSelected_());

    /**
     * Event callback for 'scroll'.
     * @private {?Function}
     */
    this.scrollClassHandler_ = () => {
      this.onScroll_();
    };
  }

  /** @override */
  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('scroll', this.scrollClassHandler_);
  }

  /**
   * @param {string} name
   * @param {string} pageIs
   * @param {string} icon
   * @param {?string} id
   * @param {?Object} initialData
   * @return {!SelectorItem}
   */
  createSelectorItem(
      name, pageIs, icon = '', id = null, initialData = null) {
    id = id || pageIs;
    return {name, pageIs, icon, id, initialData};
  }

  /**
   * Set the initially active page (defaults to the first selector item),
   * Callers can override this default behavior by providing a
   * query param including the id of a specific page.
   * @protected
   */
  setDefaultPage_() {
    assert(!this.selectedItem);
    const params = new URLSearchParams(window.location.search);

    for (const item of this.selectorItems_) {
      if (params.has(item.id)) {
        this.selectedItem = item;
        return;
      }
    }

    // Default to first entry if query param isn't provided.
    this.selectedItem = this.selectorItems_[0];
  }

  /**
   * @param {!Array<!SelectorItem>} pages
   */
  addSelectors(pages) {
    this.set('selectorItems_', pages);
    this.setDefaultPage_();
  }

  /**
   * Adds a new section to the top level navigation. The name and icon will
   * be displayed in the side navigation. The content panel will create an
   * instance of pageIs when navigated to. If id is null it will default to
   * being equal to pageIs. In the case of adding multiple pages of the same
   * type, id must be specified to distinguish them.
   * @param {string} name
   * @param {string} pageIs
   * @param {string} icon
   * @param {?string} id
   * @param {?Object} initialData
   */
  addSelector(name, pageIs, icon = '', id = null, initialData = null) {
    this.addSelectorItem(
        this.createSelectorItem(name, pageIs, icon, id, initialData));
  }

  /**
   * Adds a new section to the top level navigation. The name and icon will
   * be displayed in the side navigation.
   * @param {!SelectorItem} selectorItem
   */
  addSelectorItem(selectorItem) {
    this.push('selectorItems_', selectorItem);
  }

  /**
   * Removes a section from the top level navigation. If the section is
   * currently selected, the selection will be reset to the top item.
   *
   * @param {string} id The ID of the section to remove.
   */
  removeSelectorById(id) {
    const index =
        this.selectorItems_.findIndex((selector) => selector.id === id);
    if (index < 0) {
      throw new Error('Cannot find selector with ID "' + id + '" to remove.');
    }
    if (this.selectorItems_.length === 1) {
      throw new Error('Removing the last selector is not supported.');
    }
    this.splice('selectorItems_', index, 1);
    if (this.selectedItem && this.selectedItem.id === id) {
      this.selectedItem = this.selectorItems_[0];
    }
  }

  /** @protected */
  selectedItemChanged_() {
    if (!this.selectedItem) {
      return;
    }
    const pageComponent = this.getPage_(this.selectedItem);

    if (this.$.drawer.open) {
      this.$.drawer.close();
    }

    this.showPage_(pageComponent);

    this.notifyEvent(navigationPageChanged);
  }

  /**
   * @param {string} functionName
   * @param {!Object} params
   */
  notifyEvent(functionName, params={}) {
    const components = this.shadowRoot.querySelectorAll('.view-content');
    // Notify all available child pages of the event.
    Array.from(components).map((c) => {
      const functionCall = c[functionName];
      if (typeof functionCall === 'function') {
        if (functionName === navigationPageChanged) {
          const event = {isActive: this.selectedItem.id === c.id};
          functionCall.call(c, event);
        } else {
          functionCall.call(c, params);
        }
      }
    });
  }

  /**
   * Selects the page that has the given id.
   * @param {string} id
   */
  selectPageById(id) {
    const selectorItem = this.selectorItems_.find(item => item.id == id);
    if (selectorItem) {
      this.selectedItem = selectorItem;
    }
  }

  /**
   * @param {!SelectorItem} item
   * @private
   */
  getPage_(item) {
    let pageComponent = this.shadowRoot.querySelector(`#${item.id}`);

    if (pageComponent === null) {
      pageComponent = document.createElement(item.pageIs);
      assert(pageComponent);
      pageComponent.setAttribute('id', item.id);
      pageComponent.setAttribute('class', 'view-content');

      if (item.initialData) {
        pageComponent.initialData = item.initialData;
      }

      pageComponent.hidden = true;

      this.$.navigationBody.appendChild(pageComponent);
    }
    return pageComponent;
  }

  /**
   * @param {!HTMLElement} pageComponent
   * @private
   */
  showPage_(pageComponent) {
    const components = this.shadowRoot.querySelectorAll('.view-content');
    // Hide all existing pages.
    Array.from(components).map((c) => c.hidden = true);
    pageComponent.hidden = false;
  }

  onMenuButtonTap_() {
    this.$.drawer.toggle();
  }

  /** @private */
  onScroll_() {
    if (this.showToolBar) {
      const scrollTop = document.documentElement.scrollTop;
      if (scrollTop <= 0) {
        this.shadowRoot.querySelector('page-toolbar').removeAttribute('shadow');
        return;
      }
      this.shadowRoot.querySelector('page-toolbar').setAttribute('shadow', '');
    }
  }

  /**
   * @param {string} selectorId The ID of the section to search for.
   * @return {boolean}
   */
  pageExists(selectorId) {
    return !!this.selectorItems_.find(({id}) => id === selectorId);
  }

  /** @private */
  onNavigationSelected_() {
    // Don't toggle, but rather only close the drawer if it's opened.
    if (this.$.drawer.open) {
      this.$.drawer.close();
    }
  }
}

customElements.define(NavigationViewPanelElement.is,
    NavigationViewPanelElement);