diff options
author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-12-11 11:30:59 -0800 |
---|---|---|
committer | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-12-11 11:30:59 -0800 |
commit | 31bd77c81d6b8343a9ea5b81656d5b7ac962d58b (patch) | |
tree | fd3facf9b4c86b08baa251f8077bf09a3d7f2145 /src/components/SearchInput.vue | |
parent | 16a86df3e4d03ae38a8c30c1235d079a1756e866 (diff) | |
download | homer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.tar.gz homer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.tar.zst homer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.zip |
Adding search url support
Diffstat (limited to 'src/components/SearchInput.vue')
-rw-r--r-- | src/components/SearchInput.vue | 46 |
1 files changed, 38 insertions, 8 deletions
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue index 9419db3..eb9c978 100644 --- a/src/components/SearchInput.vue +++ b/src/components/SearchInput.vue | |||
@@ -5,7 +5,7 @@ | |||
5 | type="text" | 5 | type="text" |
6 | ref="search" | 6 | ref="search" |
7 | :value="value" | 7 | :value="value" |
8 | @input="$emit('input', $event.target.value.toLowerCase())" | 8 | @input="search($event.target.value)" |
9 | @keyup.enter.exact="$emit('search-open')" | 9 | @keyup.enter.exact="$emit('search-open')" |
10 | @keyup.alt.enter="$emit('search-open', '_blank')" | 10 | @keyup.alt.enter="$emit('search-open', '_blank')" |
11 | /> | 11 | /> |
@@ -20,18 +20,48 @@ export default { | |||
20 | this._keyListener = function (event) { | 20 | this._keyListener = function (event) { |
21 | if (event.key === "/") { | 21 | if (event.key === "/") { |
22 | event.preventDefault(); | 22 | event.preventDefault(); |
23 | this.$emit("search-focus"); | 23 | this.focus(); |
24 | this.$nextTick(() => { | ||
25 | this.$refs.search.focus(); | ||
26 | }); | ||
27 | } | 24 | } |
28 | if (event.key === "Escape") { | 25 | if (event.key === "Escape") { |
29 | this.$refs.search.value = ""; | 26 | this.cancel(); |
30 | this.$refs.search.blur(); | ||
31 | this.$emit("search-cancel"); | ||
32 | } | 27 | } |
33 | }; | 28 | }; |
34 | document.addEventListener("keydown", this._keyListener.bind(this)); | 29 | document.addEventListener("keydown", this._keyListener.bind(this)); |
30 | |||
31 | // fill seach from get parameter. | ||
32 | const search = new URLSearchParams(window.location.search).get("search"); | ||
33 | if (search) { | ||
34 | this.$refs.search.value = search; | ||
35 | this.search(search); | ||
36 | this.focus(); | ||
37 | } | ||
38 | }, | ||
39 | methods: { | ||
40 | focus: function () { | ||
41 | this.$emit("search-focus"); | ||
42 | this.$nextTick(() => { | ||
43 | this.$refs.search.focus(); | ||
44 | }); | ||
45 | }, | ||
46 | setSearchURL: function (value) { | ||
47 | const url = new URL(window.location); | ||
48 | if (value === "") { | ||
49 | url.searchParams.delete("search"); | ||
50 | } else { | ||
51 | url.searchParams.set("search", value); | ||
52 | } | ||
53 | window.history.replaceState("search", null, url); | ||
54 | }, | ||
55 | cancel: function () { | ||
56 | this.setSearchURL(""); | ||
57 | this.$refs.search.value = ""; | ||
58 | this.$refs.search.blur(); | ||
59 | this.$emit("search-cancel"); | ||
60 | }, | ||
61 | search: function (value) { | ||
62 | this.setSearchURL(value); | ||
63 | this.$emit("input", value.toLowerCase()); | ||
64 | }, | ||
35 | }, | 65 | }, |
36 | beforeDestroy() { | 66 | beforeDestroy() { |
37 | document.removeEventListener("keydown", this._keyListener); | 67 | document.removeEventListener("keydown", this._keyListener); |