mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
103 lines
2.9 KiB
HTML
103 lines
2.9 KiB
HTML
<!--
|
|
@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>
|