third_party/polymer/v1_0/components-chromium/more-routing/more-route-selector-extracted.js

   1 Polymer({
   2
   3   is: 'more-route-selector',
   4
   5   behaviors: [
   6     MoreRouting.ContextAware,
   7   ],
   8
   9   properties: {
  10
  11     /**
  12      * The attribute to read route expressions from (on children).
  13      */
  14     routeAttribute: {
  15       type: String,
  16       value: 'route',
  17     },
  18
  19     /**
  20      * The routes managed by this element (inferred from the items that are
  21      * defined by the selector it targets).
  22      */
  23     routes: {
  24       type:     Array,
  25       readOnly: true,
  26       notify:   true,
  27     },
  28
  29     /**
  30      * The selected `MoreRouting.Route` object, or `null`.
  31      *
  32      * @type {MoreRouting.Route}
  33      */
  34     selectedRoute: {
  35       type:     Object,
  36       value:    null,
  37       readOnly: true,
  38       notify:   true,
  39     },
  40
  41     /**
  42      * The index of the selected route (relative to `routes`). -1 when there
  43      * is no active route.
  44      */
  45     selectedIndex: {
  46       type:     Number,
  47       value:    -1,
  48       readOnly: true,
  49       notify:   true,
  50     },
  51
  52     /**
  53      * The _full_ path expression of the selected route, or `null`.
  54      */
  55     selectedPath: {
  56       type:     String,
  57       readOnly: true,
  58       notify:   true,
  59     },
  60
  61     /**
  62      * The params of the selected route, or an empty object if no route.
  63      */
  64     selectedParams: {
  65       type:     Object,
  66       readOnly: true,
  67       notify:   true,
  68     },
  69
  70   },
  71
  72   /**
  73    * @event more-route-selected fires when a new route is selected.
  74    * @param {{
  75    *   newRoute:  MoreRouting.Route, oldRoute: MoreRouting.Route,
  76    *   newIndex:  number,  oldIndex:  number,
  77    *   newPath:   ?string, oldPath:   ?string,
  78    *   newParams: Object,  oldParams: Object,
  79    * }}
  80    */
  81
  82   attached: function() {
  83     this._managedSelector = this._findTargetSelector();
  84     if (!this._managedSelector) {
  85       console.warn(this, 'was built without a selector to manage. It will do nothing.');
  86       return;
  87     }
  88
  89     this._managedSelector.addEventListener(
  90         'selected-item-changed', this._onSelectedItemChanged.bind(this));
  91     this._updateRoutes();
  92   },
  93
  94   /**
  95    * Handle a change in selected item, driven by the targeted selector.
  96    *
  97    * Note that this will fail if a route is chosen that requires params not
  98    * defined by the current URL.
  99    */
 100   _onSelectedItemChanged: function(event) {
 101     if (this._settingSelection) return;
 102     var route = this._routeForItem(event.detail.value);
 103     if (!route) return;
 104     route.navigateTo();
 105   },
 106
 107   _updateRoutes: function() {
 108     var routes = [];
 109     if (this._managedSelector) {
 110       routes = this._managedSelector.items.map(this._routeForItem.bind(this));
 111     }
 112     this._setRoutes(routes);
 113   },
 114
 115   _onMoreRouteChange: function(event) {
 116     if (!this._managedSelector) return;
 117
 118     var selected = '';
 119
 120     var index = this.routes.indexOf(event.detail.newRoute);
 121     var attrForSelected = this._managedSelector.attrForSelected;
 122     if (!attrForSelected) {
 123       selected = index;
 124     } else {
 125       var item = this._managedSelector.items[index];
 126       if (item)
 127         selected = item[attrForSelected] || item.getAttribute(attrForSelected);
 128     }
 129
 130     // Make sure that we don't turn around and re-navigate
 131     this._settingSelection = true;
 132     this._managedSelector.select(selected);
 133     this._settingSelection = false;
 134   },
 135
 136   _findTargetSelector: function() {
 137     var children = Polymer.dom(this).children;
 138     if (children.length !== 1) {
 139       console.error(this, 'expects only a single selector child');
 140       return null;
 141     }
 142
 143     var child = children[0];
 144     if ('selected' in child && 'items' in child) {
 145       return child;
 146     } else {
 147       console.error(this, 'can only manage children that are selectors');
 148       return null;
 149     }
 150   },
 151
 152   _routeForItem: function(item) {
 153     if (!item) return null;
 154     if (item.moreRouteContext && item.moreRouteContext instanceof MoreRouting.Route) {
 155       return item.moreRouteContext;
 156     }
 157
 158     if (!item.hasAttribute(this.routeAttribute)) {
 159       console.warn(item, 'is missing a context route or "' + this.routeAttribute + '" attribute');
 160       return null;
 161     }
 162     var expression = item.getAttribute(this.routeAttribute);
 163     var route      = MoreRouting.getRoute(expression, this.parentRoute);
 164     // Associate the route w/ its element while we're here.
 165     item.moreRouteContext = route;
 166
 167     return route;
 168   },
 169
 170 });