Implement <carbon-location>

bower.json

@@ -19,7 +19,8 @@
     "paper-tabs": "polymerelements/paper-tabs#~1.2.3",
     "paper-input": "polymerelements/paper-input#~1.1.2",
     "paper-slider": "polymerelements/paper-slider#~1.0.8",
-    "neon-animation": "polymerelements/neon-animation#~1.0.8"
+    "neon-animation": "polymerelements/neon-animation#~1.0.8",
+    "web-component-tester": "polymer/web-component-tester#^4.0.0"
   },
   "dependencies": {
     "polymer": "polymer/polymer#~1.2.3"

carbon-location.html

@@ -0,0 +1,59 @@
+link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-page-url/iron-page-url.html">
+<link rel="import" href="../iron-page-url/iron-query-params.html">
+<link rel="import" href="carbon-route-converter.html">
+
+<dom-module id="carbon-location">
+  <template>
+    <iron-page-url path="{{__path}}" query="{{__query}}"></iron-page-url>
+    <iron-query-params
+        params-string="{{__query}}"
+        params-object="{{__queryParams}}">
+    </iron-query-params>
+    <carbon-route-converter
+        path="{{__path}}"
+        query-params="{{__queryParams}}"
+        route="{{route}}">
+    </carbon-route-converter>
+  </template>
+  <script>
+    'use strict';
+
+    Polymer({
+      is: 'carbon-location',
+
+      properties: {
+        /**
+         * A model representing the deserialized path through the route tree, as
+         * well as the current queryParams.
+         */
+        route: {
+          type: Object,
+          notify: true
+        },
+
+        /**
+         * A set of key/value pairs that are universally accessible to branches
+         * of the route tree.
+         */
+        __queryParams: {
+          type: Object
+        },
+
+        /**
+         * The pathname component of the current URL.
+         */
+        __path: {
+          type: String
+        },
+
+        /**
+         * The query string portion of the current URL.
+         */
+        __query: {
+          type: String
+        }
+      }
+    });
+  </script>
+</dom-module>

carbon-route-converter.html

@@ -0,0 +1,76 @@
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+  'use strict';
+
+  Polymer({
+    is: 'carbon-route-converter',
+
+    properties: {
+      /**
+       * A model representing the deserialized path through the route tree, as
+       * well as the current queryParams.
+       *
+       * A route object is the kernel of the routing system. It is intended to
+       * be fed into consuming elements such as `carbon-route`.
+       */
+      route: {
+        type: Object,
+        value: null,
+        notify: true
+      },
+
+      /**
+       * A set of key/value pairs that are universally accessible to branches of
+       * the route tree.
+       */
+      queryParams: {
+        type: Object,
+        value: null,
+        notify: true
+      },
+
+      /**
+       * The serialized path through the route tree. This corresponds to the
+       * `window.location.pathname` value, and will update to reflect changes
+       * to that valaue.
+       */
+      path: {
+        type: String,
+        notify: true
+      }
+    },
+
+    observers: [
+      '_locationChanged(path, queryParams)',
+      '_routeChanged(route.prefix, route.path)',
+      '_routeQueryParamsChanged(route.queryParams)'
+    ],
+
+    created: function() {
+      this.linkPaths('route.queryParams', 'queryParams');
+    },
+
+    _locationChanged: function(path) {
+      this.route = {
+        prefix: '',
+        path: path,
+        queryParams: this.queryParams
+      };
+    },
+
+    _routeChanged: function(prefix, path) {
+      if (!this.route) {
+        return;
+      }
+      this.path = prefix + path;
+    },
+
+    _routeQueryParamsChanged: function(queryParams) {
+      if (!this.route) {
+        return;
+      }
+      this.queryParams = queryParams;
+    }
+  });
+</script>

test/app-example-1.html

@@ -1,10 +1,10 @@
 <link rel='import' href='../carbon-route.html'>
-<link rel='import' href='../carbon-router.html'>
+<link rel='import' href='../carbon-route-converter.html'>
 
 <dom-module id='app-example-1'>
   <template>
-    <carbon-router path='{{path}}' route='{{route}}'>
-    </carbon-router>
+    <carbon-route-converter path='{{path}}' route='{{route}}'>
+    </carbon-route-converter>
     <carbon-route route='{{route}}' match='/:page' data='{{data}}'>
     </carbon-route>
     <carbon-route route='{{route}}' match='/user' tail='{{userRoute}}'>
@@ -24,7 +24,7 @@
 
         },
         userData: {
-          
+
         }
       }
     })

test/carbon-location.html

@@ -0,0 +1,124 @@
+<!doctype 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
+-->
+<html>
+<head>
+  <title>carbon-location</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../carbon-location.html">
+</head>
+<body>
+  <test-fixture id="BasicLocation">
+    <template>
+      <carbon-location></carbon-location>
+    </template>
+  </test-fixture>
+
+  <script>
+    'use strict';
+
+    function setLocation(url) {
+      window.history.pushState({}, '', url);
+      Polymer.Base.fire('location-changed', {}, { node: window });
+    }
+
+    function assign(a, b) {
+      if (Object.assign) {
+        return Object.assign.apply(Object, arguments);
+      }
+
+      for (var property in b) {
+        a[property] = b[property];
+      }
+
+      return a;
+    }
+
+    suite('<carbon-location>', function () {
+      var carbonLocation;
+
+      setup(function() {
+        carbonLocation = fixture('BasicLocation');
+      });
+
+      test('it automatically exposes the current route', function() {
+        expect(carbonLocation.route).to.be.ok;
+        expect(carbonLocation.route.path).to.be.equal(window.location.pathname);
+      });
+
+      suite('manipulating the route', function() {
+        var originalPath;
+        var originalQueryParams;
+
+        setup(function() {
+          originalPath = carbonLocation.route.path;
+          originalQueryParams = assign({}, carbonLocation.route.queryParams);
+        });
+
+        teardown(function() {
+          carbonLocation.set('route.prefix', '');
+          carbonLocation.set('route.path', originalPath);
+          carbonLocation.set('route.queryParams', originalQueryParams);
+        });
+
+        test('it reflects path to location.pathname', function() {
+          carbonLocation.set('route.path', '/foo/bar');
+          expect(window.location.pathname).to.be.equal('/foo/bar');
+        });
+
+        test('it reflects queryParams values to location.search', function() {
+          carbonLocation.set('route.queryParams.foo', 1);
+          expect(window.location.search).to.match(/foo=1/);
+        });
+
+        test('it reflects completely replaced queryParams', function() {
+          carbonLocation.set('route.queryParams', { bar: 1 });
+          expect(window.location.search).to.be.equal('?bar=1');
+        });
+
+        test('it reflects the prefix to location.pathname', function() {
+          carbonLocation.set('route.prefix', '/fiz');
+          expect(window.location.pathname).to.be.equal('/fiz' + originalPath);
+        });
+      });
+
+      /**
+       * NOTE: For a more thorough spec describing this behavior, please refer
+       * to the `iron-page-url` component.
+       */
+      suite('manipulating the history state', function() {
+        var originalLocation;
+
+        setup(function() {
+          originalLocation = window.location.toString();
+        });
+
+        teardown(function() {
+          setLocation(originalLocation);
+        });
+
+        test('it reflects location.pathname to route.path', function() {
+          setLocation('/fiz/buz');
+          expect(carbonLocation.route.path).to.be.equal('/fiz/buz');
+        });
+
+        test('it reflects location.search to route.queryParams', function() {
+          setLocation('?fiz=buz');
+          expect(carbonLocation.route.queryParams).to.be.eql({
+            fiz: 'buz'
+          });
+        });
+      });
+    });
+  </script>
+</body>