jellyfin-web/dashboard-ui/bower_components/iron-demo-helpers/url-bar.html

<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>