more-route-selector.html

<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="more-route-context-aware.html">
<link rel="import" href="more-route-selection.html">

<!--
TODO(nevir): Document.

TODO(nevir): Support child addition/removal/reorder.
-->
<dom-module id="more-route-selector">
  <template>
    <more-route-selection
        id="selection"
        routes="[[routes]]"
        selected-route="{{selectedRoute}}"
        selected-index="{{selectedIndex}}"
        selected-path="{{selectedPath}}"
        selected-params="{{selectedParams}}"
        on-more-route-change="_onMoreRouteChange">
    </more-route-selection>
    <content></content>
  </template>
</dom-module>
<script>
Polymer({

  is: 'more-route-selector',

  behaviors: [
    MoreRouting.ContextAware,
  ],

  properties: {

    /**
     * The attribute to read route expressions from (on children).
     */
    routeAttribute: {
      type: String,
      value: 'route',
    },

    /**
     * The routes managed by this element (inferred from the items that are
     * defined by the selector it targets).
     */
    routes: {
      type:     Array,
      readOnly: true,
      notify:   true,
    },

    /**
     * The selected `MoreRouting.Route` object, or `null`.
     *
     * @type {MoreRouting.Route}
     */
    selectedRoute: {
      type:     Object,
      value:    null,
      readOnly: true,
      notify:   true,
    },

    /**
     * The index of the selected route (relative to `routes`). -1 when there
     * is no active route.
     */
    selectedIndex: {
      type:     Number,
      value:    -1,
      readOnly: true,
      notify:   true,
    },

    /**
     * The _full_ path expression of the selected route, or `null`.
     */
    selectedPath: {
      type:     String,
      readOnly: true,
      notify:   true,
    },

    /**
     * The params of the selected route, or an empty object if no route.
     */
    selectedParams: {
      type:     Object,
      readOnly: true,
      notify:   true,
    },

  },

  /**
   * @event more-route-selected fires when a new route is selected.
   * @param {{
   *   newRoute:  MoreRouting.Route, oldRoute: MoreRouting.Route,
   *   newIndex:  number,  oldIndex:  number,
   *   newPath:   ?string, oldPath:   ?string,
   *   newParams: Object,  oldParams: Object,
   * }}
   */

  attached: function() {
    this._managedSelector = this._findTargetSelector();
    if (!this._managedSelector) {
      console.warn(this, 'was built without a selector to manage. It will do nothing.');
      return;
    }

    this._managedSelector.addEventListener(
        'selected-item-changed', this._onSelectedItemChanged.bind(this));
    this._updateRoutes();
  },

  /**
   * Handle a change in selected item, driven by the targeted selector.
   *
   * Note that this will fail if a route is chosen that requires params not
   * defined by the current URL.
   */
  _onSelectedItemChanged: function(event) {
    if (this._settingSelection) return;
    var route = this._routeForItem(event.detail.value);
    if (!route) return;
    route.navigateTo();
  },

  _updateRoutes: function() {
    var routes = [];
    var _this = this;
    setTimeout(function() {
      if (_this._managedSelector) {
        routes = _this._managedSelector.items.map(_this._routeForItem.bind(_this));
      }
      _this._setRoutes(routes);
    }, 100);
  },

  _onMoreRouteChange: function(event) {
    if (!this._managedSelector) return;

    var selected = '';

    var index = this.routes.indexOf(event.detail.newRoute);
    var attrForSelected = this._managedSelector.attrForSelected;
    if (!attrForSelected) {
      selected = index;
    } else {
      var item = this._managedSelector.items[index];
      if (item)
        selected = item[attrForSelected] || item.getAttribute(attrForSelected);
    }

    // Make sure that we don't turn around and re-navigate
    this._settingSelection = true;
    this._managedSelector.select(selected);
    this._settingSelection = false;
  },

  _findTargetSelector: function() {
    var children = Polymer.dom(this).children;
    if (children.length !== 1) {
      console.error(this, 'expects only a single selector child');
      return null;
    }

    var child = children[0];
    if ('selected' in child && 'items' in child) {
      return child;
    } else {
      console.error(this, 'can only manage children that are selectors');
      return null;
    }
  },

  _routeForItem: function(item) {
    if (!item) return null;
    if (item.moreRouteContext && item.moreRouteContext instanceof MoreRouting.Route) {
      return item.moreRouteContext;
    }

    if (!item.hasAttribute(this.routeAttribute)) {
      console.warn(item, 'is missing a context route or "' + this.routeAttribute + '" attribute');
      return null;
    }
    var expression = item.getAttribute(this.routeAttribute);
    var route      = MoreRouting.getRoute(expression, this.parentRoute);
    // Associate the route w/ its element while we're here.
    item.moreRouteContext = route;

    return route;
  },

});
</script>