app-bar.html
2.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<dom-module id="app-bar">
<!--<link rel="import" type="css" href="app-bar.css">-->
<style>
:host * {
box-sizing: border-box;
}
:host(.search-on) {
left: 0;
background: inherit;
z-index: 1001;
}
:host ::content iron-icon {
margin-right: 15px;
cursor: pointer;
}
#search {
position: relative;
}
#search iron-icon {
margin-right: 0;
}
#search[show] {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 16px;
background: #fff;
}
#search input {
display: none;
font-family: var(--primary-font-family);
font-size: 15px;
width: 100%;
padding: 10px;
border: 0;
border-radius: 2px;
-webkit-appearance: none;
}
#search[show] input {
display: block;
}
#search input:focus {
outline: 0;
}
</style>
<template>
<content></content>
<div id="search" class="horizontal layout center" show$="{{showingSearch}}" on-tap="toggleSearch">
<iron-icon icon="search" hidden$="[[noSearch]]"></iron-icon>
<form on-submit="performSearch" class="flex">
<input type="search" id="query" value="{{query::keyup}}" autocomplete="off" placeholder="Search Elements" on-blur="clearSearch">
</form>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'app-bar',
properties: {
query: {
type: String,
notify: true
},
showingSearch: {
type: Boolean,
value: false
},
noSearch: {
type: Boolean,
value: false
}
},
observers: [
'updateSearchDisplay(showingSearch)'
],
listeners: {
keyup: 'hotkeys'
},
toggleSearch: function(e) {
if (e) {
e.stopPropagation();
}
if (e.target === this.$.query) {
return;
}
this.showingSearch = !this.showingSearch;
},
clearSearch: function() {
this.showingSearch = false;
},
updateSearchDisplay: function(showingSearch) {
if (showingSearch) {
this.classList.add('search-on');
this.async(function() {
this.$.query.focus();
});
} else {
this.classList.remove('search-on');
}
},
hotkeys: function(e) {
// ESC
if (e.keyCode === 27 && Polymer.dom(e).rootTarget === this.$.query) {
this.showingSearch = false;
}
},
performSearch: function(e) {
e.preventDefault();
this.fire('nav', {url: '/browse?q=' + this.query});
}
});
</script>