Merge pull request #22 from PolymerElements/url-bar

Add a url-bar element for demoing routing.
PolymerElements · Mar 28, 2016 · a7d4536 · a7d4536
2 parents fc9fb6f + baa066b
commit a7d4536
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 2 deletions.
diff --git a/bower.json b/bower.json
@@ -10,7 +10,7 @@
     "polymer",
     "demo"
   ],
-  "main": "demo-snippet.html",
+  "main": ["demo-snippet.html", "url-bar.html"],
   "private": true,
   "repository": {
     "type": "git",
@@ -25,7 +25,8 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
     "marked-element": "polymerelements/marked-element#^1.0.0",
-    "prism-element": "PolymerElements/prism-element#^1.0.0"
+    "prism-element": "PolymerElements/prism-element#^1.0.0",
+    "iron-location": "PolymerElements/iron-location#^0.8.0"
   },
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",

diff --git a/demo/url-bar.html b/demo/url-bar.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!--
+@license
+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 lang="en">
+<head>
+  <title>url-bar demo</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../url-bar.html">
+  <link rel="import" href="../demo-pages-shared-styles.html">
+
+  <style is="custom-style" include="demo-pages-shared-styles">
+    iframe {
+      width: 100%;
+    }
+  </style>
+</head>
+<body unresolved>
+  <url-bar></url-bar>
+
+  <div id='message'></div>
+
+  <script>
+    var message;
+    if (window.top !== window) {
+      message = 'URL Bar should appear above this text';
+    } else {
+      message = 'No URL Bar above this text. iframe below this text with URL bar.';
+      var iframe = document.createElement('iframe');
+      iframe.setAttribute('src', window.location.href);
+      document.body.appendChild(iframe);
+    }
+    document.querySelector('#message').innerText = message;
+  </script>
+</body>
+</html>
diff --git a/url-bar.html b/url-bar.html
@@ -0,0 +1,71 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-location/iron-location.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+
+<!--
+`url-bar` is a helper element that displays a simple read-only URL bar if
+and only if the page is in an iframe. In this way we can demo elements that
+deal with the URL in our iframe-based demo environments.
+
+If the page is not in an iframe, the url-bar element is not displayed.
+
+@element url-bar
+@demo demo/url-bar.html
+-->
+<dom-module id='url-bar'>
+  <template>
+    <style include="iron-flex">
+      :host {
+        margin: 0px;
+        padding: 15px 35px;
+        border-bottom: 2px solid gray;
+        height: 1em;
+        overflow: hidden;
+        display: none;
+      }
+      :host[in-iframe] {
+        /* This element only wants to be displayed if it's in an iframe. */
+        display: block;
+      }
+      label {
+        display: inline-block;
+        padding-right: 25px;
+      }
+      span {
+        font-family: monospace;
+        white-space: pre;
+      }
+    </style>
+    <iron-location path="{{path}}" query="{{query}}" hash="{{hash}}">
+    </iron-location>
+    <div class="layout horizontal">
+      <label>URL</label><span>{{url}}</span>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'url-bar',
+      properties: {
+        url: {
+          computed: '__computeUrl(path, query, hash)'
+        },
+        inIframe: {
+          value: function() {
+            return window.top !== window;
+          },
+          reflectToAttribute: true
+        }
+      },
+      __computeUrl: function(path, query, hash) {
+        var url = path;
+        if (query) {
+          url += '?' + query;
+        }
+        if (hash) {
+          url += '#' + hash;
+        }
+        return url;
+      }
+    })
+  </script>
+</dom-module>