]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <div class="search-bar"> | |
3 | <label for="search" class="search-label"></label> | |
4 | <input | |
5 | type="text" | |
6 | ref="search" | |
7 | :value="value" | |
31bd77c8 | 8 | @input="search($event.target.value)" |
c1b5f6ad BW |
9 | @keyup.enter.exact="open()" |
10 | @keyup.alt.enter="open('_blank')" | |
b9c5fcf0 BW |
11 | /> |
12 | </div> | |
13 | </template> | |
14 | ||
15 | <script> | |
16 | export default { | |
17 | name: "SearchInput", | |
584f2b4b RS |
18 | props: { |
19 | value: String, | |
20 | hotkey: { | |
21 | type: String, | |
22 | default: "/" | |
23 | } | |
24 | }, | |
b9c5fcf0 BW |
25 | mounted() { |
26 | this._keyListener = function (event) { | |
584f2b4b | 27 | if (event.key === this.hotkey) { |
b9c5fcf0 | 28 | event.preventDefault(); |
31bd77c8 | 29 | this.focus(); |
b9c5fcf0 BW |
30 | } |
31 | if (event.key === "Escape") { | |
31bd77c8 | 32 | this.cancel(); |
b9c5fcf0 BW |
33 | } |
34 | }; | |
35 | document.addEventListener("keydown", this._keyListener.bind(this)); | |
31bd77c8 | 36 | |
b64b17a4 | 37 | // fill search from get parameter. |
31bd77c8 BW |
38 | const search = new URLSearchParams(window.location.search).get("search"); |
39 | if (search) { | |
40 | this.$refs.search.value = search; | |
41 | this.search(search); | |
42 | this.focus(); | |
43 | } | |
44 | }, | |
45 | methods: { | |
c1b5f6ad BW |
46 | open: function (target = null) { |
47 | if (!this.$refs.search.value) { | |
48 | return; | |
49 | } | |
50 | this.$emit("search-open", target); | |
51 | }, | |
31bd77c8 BW |
52 | focus: function () { |
53 | this.$emit("search-focus"); | |
54 | this.$nextTick(() => { | |
55 | this.$refs.search.focus(); | |
56 | }); | |
57 | }, | |
58 | setSearchURL: function (value) { | |
59 | const url = new URL(window.location); | |
60 | if (value === "") { | |
61 | url.searchParams.delete("search"); | |
62 | } else { | |
63 | url.searchParams.set("search", value); | |
64 | } | |
65 | window.history.replaceState("search", null, url); | |
66 | }, | |
67 | cancel: function () { | |
68 | this.setSearchURL(""); | |
69 | this.$refs.search.value = ""; | |
70 | this.$refs.search.blur(); | |
71 | this.$emit("search-cancel"); | |
72 | }, | |
73 | search: function (value) { | |
74 | this.setSearchURL(value); | |
75 | this.$emit("input", value.toLowerCase()); | |
76 | }, | |
b9c5fcf0 BW |
77 | }, |
78 | beforeDestroy() { | |
79 | document.removeEventListener("keydown", this._keyListener); | |
80 | }, | |
81 | }; | |
82 | </script> | |
83 | ||
84 | <style lang="scss" scoped></style> |