1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | import '@polymer/polymer/polymer-legacy.js';
|
12 |
|
13 | import '@polymer/iron-location/iron-location.js';
|
14 | import '@polymer/font-roboto/roboto.js';
|
15 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
|
16 | import {html} from '@polymer/polymer/lib/utils/html-tag.js';
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | Polymer({
|
37 | _template: html`
|
38 | <style>
|
39 | :host {
|
40 | margin: 0px;
|
41 | padding: 15px 35px;
|
42 | border-bottom: 2px solid gray;
|
43 | height: 1.5em;
|
44 | display: none;
|
45 | overflow-x: auto;
|
46 | overflow-y: hidden;
|
47 | background-color: white;
|
48 | @apply --url-bar;
|
49 | }
|
50 | :host([in-iframe]) {
|
51 | /* This element only wants to be displayed if it's in an iframe. */
|
52 | display: block;
|
53 | }
|
54 |
|
55 | label {
|
56 | font-family: 'Roboto', 'Noto', sans-serif;
|
57 | -webkit-font-smoothing: antialiased;
|
58 | /* for backwards compat */
|
59 | @apply --paper-font-common-base;
|
60 | display: inline-block;
|
61 | padding-right: 25px;
|
62 | }
|
63 |
|
64 | span {
|
65 | font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
66 | -webkit-font-smoothing: antialiased;
|
67 | /* for backwards compat */
|
68 | @apply --paper-font-common-code;
|
69 | white-space: pre;
|
70 | }
|
71 |
|
72 | .layout.horizontal {
|
73 | display: -ms-flexbox;
|
74 | display: -webkit-flex;
|
75 | display: flex;
|
76 | -ms-flex-direction: row;
|
77 | -webkit-flex-direction: row;
|
78 | flex-direction: row;
|
79 | }
|
80 | </style>
|
81 |
|
82 | <iron-location path="{{path}}" query="{{query}}" hash="{{hash}}">
|
83 | </iron-location>
|
84 | <div class="layout horizontal">
|
85 | <label>URL</label><span>{{url}}</span>
|
86 | </div>
|
87 | `,
|
88 |
|
89 | is: 'url-bar',
|
90 |
|
91 | properties: {
|
92 | url: {
|
93 | computed: '__computeUrl(path, query, hash)',
|
94 | type: String,
|
95 | },
|
96 |
|
97 | inIframe: {
|
98 | value: function() {
|
99 | return window.top !== window;
|
100 | },
|
101 | reflectToAttribute: true,
|
102 | type: Boolean
|
103 | },
|
104 |
|
105 | path: {
|
106 | type: String,
|
107 | },
|
108 |
|
109 | query: {
|
110 | type: String,
|
111 | },
|
112 |
|
113 | hash: {
|
114 | type: String,
|
115 | }
|
116 | },
|
117 |
|
118 | __computeUrl: function(path, query, hash) {
|
119 | var url = path;
|
120 |
|
121 | if (query) {
|
122 | url += '?' + query;
|
123 | }
|
124 |
|
125 | if (hash) {
|
126 | url += '#' + hash;
|
127 | }
|
128 |
|
129 | return url;
|
130 | }
|
131 | })
|