diff options
Diffstat (limited to 'catapult/third_party/polymer/components/app-route/app-route-converter.html')
-rw-r--r-- | catapult/third_party/polymer/components/app-route/app-route-converter.html | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/app-route-converter.html b/catapult/third_party/polymer/components/app-route/app-route-converter.html new file mode 100644 index 00000000..e16b653f --- /dev/null +++ b/catapult/third_party/polymer/components/app-route/app-route-converter.html @@ -0,0 +1,79 @@ +<!-- +@license +Copyright (c) 2016 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="./app-route-converter-behavior.html"> + +<!-- +`app-route-converter` provides a means to convert a path and query +parameters into a route object and vice versa. This produced route object +is to be fed into route-consuming elements such as `app-route`. + +> n.b. This element is intended to be a primitive of the routing system and for +creating bespoke routing solutions from scratch. To simply include routing in +an app, please refer to [app-location](https://github.com/PolymerElements/app-route/blob/master/app-location.html) +and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-route.html). + +An example of a route object that describes +`https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=qux` +and should be passed to other `app-route` elements: + + { + prefix: '', + path: '/elements/app-route-converter', + __queryParams: { + foo: 'bar', + baz: 'qux' + } + } + +`__queryParams` is private to discourage directly data-binding to it. This is so +that routing elements like `app-route` can intermediate changes to the query +params and choose whether to propagate them upstream or not. `app-route` for +example will not propagate changes to its `queryParams` property if it is not +currently active. A public queryParams object will also be produced in which you +should perform data-binding operations. + +Example Usage: + + <iron-location path="{{path}}" query="{{query}}"></iron-location> + <iron-query-params + params-string="{{query}}" + params-object="{{queryParams}}"> + </iron-query-params> + <app-route-converter + path="{{path}}" + query-params="{{queryParams}}" + route="{{route}}"> + </app-route-converter> + <app-route route='{{route}}' pattern='/:page' data='{{data}}'> + </app-route> + +This is a simplified implementation of the `app-location` element. Here the +`iron-location` produces a path and a query, the `iron-query-params` consumes +the query and produces a queryParams object, and the `app-route-converter` +consumes the path and the query params and converts it into a route which is in +turn is consumed by the `app-route`. + +@element app-route-converter +@demo demo/index.html +--> + +<script> + (function() { + 'use strict'; + + Polymer({ + is: 'app-route-converter', + + behaviors: [Polymer.AppRouteConverterBehavior] + }); + })(); +</script> |