third_party/polymer/v1_0/components/more-routing/more-route.html

   1 <!--
   2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <link rel="import" href="../polymer/polymer.html">
  10
  11 <link rel="import" href="routing.html">
  12 <link rel="import" href="more-route-context-aware.html">
  13
  14 <script>
  15
  16   Polymer({
  17
  18     is: 'more-route',
  19
  20     behaviors: [
  21       MoreRouting.ContextAware,
  22     ],
  23
  24     properties: {
  25
  26       /**
  27        * The name of this route. Behavior differs based on the presence of
  28        * `path` during _declaration_.
  29        *
  30        * If `path` is present during declaration, it is registered via `name`.
  31        *
  32        * Otherwise, this `more-route` becomes a `reference` to the route with
  33        * `name`. Changing `name` will update which route is referenced.
  34        */
  35       name: {
  36         type:     String,
  37         observer: '_nameChanged',
  38       },
  39
  40       /**
  41        * A path expression used to parse parameters from the window's URL.
  42        */
  43       path: {
  44         type:     String,
  45         obserer: '_pathChanged',
  46       },
  47
  48       /**
  49        * Whether this route should become a context for the element that
  50        * contains it.
  51        */
  52       context: {
  53         type: Boolean,
  54       },
  55
  56       /**
  57        * The underlying `MoreRouting.Route` object that is being wrapped.
  58        *
  59        * @type {MoreRouting.Route}
  60        */
  61       route: {
  62         type:     Object,
  63         readOnly: true,
  64         notify:   true,
  65         observer: '_routeChanged',
  66       },
  67
  68       /**
  69        * The full path expression for this route, including routes this is
  70        * nested within.
  71        */
  72       fullPath: {
  73         type:     String,
  74         readOnly: true,
  75         notify:   true,
  76       },
  77
  78       /**
  79        * Param values matching the current URL, or an empty object if not
  80        * `active`.
  81        */
  82       params: {
  83         type:     Object,
  84         // readOnly: true,
  85         notify:   true,
  86       },
  87
  88       /**
  89        * Whether the route matches the current URL.
  90        */
  91       active: {
  92         type:     Boolean,
  93         readOnly: true,
  94         notify:   true,
  95       },
  96
  97     },
  98
  99     routingReady: function() {
 100       this._identityChanged();
 101     },
 102
 103     _nameChanged: function(newName, oldName) {
 104       if (oldName) {
 105         console.error('Changing the `name` property is not supported for', this);
 106         return;
 107       }
 108       this._identityChanged();
 109     },
 110
 111     _pathChanged: function(newPath, oldPath) {
 112       if (oldPath) {
 113         console.error('Changing the `path` property is not supported for', this);
 114         return;
 115       }
 116       this._identityChanged();
 117     },
 118
 119     _identityChanged: function() {
 120       if (!this.routingIsReady) return;
 121
 122       if (this.name && this.path) {
 123         this._setRoute(MoreRouting.registerNamedRoute(this.name, this.path, this.parentRoute));
 124       } else if (this.name) {
 125         this._setRoute(MoreRouting.getRouteByName(this.name));
 126       } else if (this.path) {
 127         this._setRoute(MoreRouting.getRouteByPath(this.path, this.parentRoute));
 128       } else {
 129         this._setRoute(null);
 130       }
 131     },
 132
 133     _routeChanged: function() {
 134       this._observeRoute();
 135       this._setFullPath(this.route.fullPath);
 136       // this._setParams(this.route.params);
 137       this.params = this.route.params;
 138       this._setActive(this.route.active);
 139
 140       // @see MoreRouting.ContextAware
 141       this.moreRouteContext = this.route;
 142
 143       if (this.context) {
 144         var parent = Polymer.dom(this).parentNode;
 145         if (parent.nodeType !== Node.ELEMENT_NODE) {
 146           parent = parent.host;
 147         }
 148
 149         if (parent.nodeType === Node.ELEMENT_NODE) {
 150           parent.moreRouteContext = this.route;
 151         } else {
 152           console.warn('Unable to determine parent element for', this, '- not setting a context');
 153         }
 154       }
 155     },
 156
 157     _observeRoute: function() {
 158       // TODO(nevir) https://github.com/Polymore/more-routing/issues/24
 159       if (this._routeListener) {
 160         this._routeListener.close();
 161         this._routeListener = null;
 162       }
 163       if (this._paramListener) {
 164         this._paramListener.close();
 165         this._paramListener = null;
 166       }
 167       if (!this.route) return;
 168
 169       this._routeListener = this.route.__subscribe(function() {
 170         this._setActive(this.route && this.route.active);
 171       }.bind(this));
 172
 173       this._paramListener = this.route.params.__subscribe(function(key, value) {
 174         // https://github.com/Polymer/polymer/issues/1505
 175         this.notifyPath('params.' + key, value);
 176       }.bind(this));
 177     },
 178
 179     urlFor: function(params) {
 180       return this.route.urlFor(params);
 181     },
 182
 183     navigateTo: function(params) {
 184       return this.route.navigateTo(params);
 185     },
 186
 187     isCurrentUrl: function(params) {
 188       return this.route.isCurrentUrl(params);
 189     },
 190
 191   });
 192
 193 </script>