spincycle/lib/spin/src/bower_components/iron-demo-helpers/url-bar.html

A reactive message router and object manager that lets clients subscribe to object property changes on the server

<!--
@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="../iron-location/iron-location.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-styles/typography.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.

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--url-bar` | Mixin applied to the entire element | `{}`

@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: 1.5em;
        display: none;
        overflow-x: auto;
        overflow-y: hidden;
        background-color: white;
        @apply(--url-bar);
      }
      :host[in-iframe] {
        /* This element only wants to be displayed if it's in an iframe. */
        display: block;
      }
      label {
        @apply(--paper-font-common-base);
        display: inline-block;
        padding-right: 25px;
      }
      span {
        @apply(--paper-font-common-code);
        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
        },
        path: {
          type: String
        },
        query: {
          type: String
        },
        hash: {
          type: String
        }
      },
      __computeUrl: function(path, query, hash) {
        var url = path;
        if (query) {
          url += '?' + query;
        }
        if (hash) {
          url += '#' + hash;
        }
        return url;
      }
    })
  </script>
</dom-module>