aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/SearchInput.vue
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-12-11 11:30:59 -0800
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-12-11 11:30:59 -0800
commit31bd77c81d6b8343a9ea5b81656d5b7ac962d58b (patch)
treefd3facf9b4c86b08baa251f8077bf09a3d7f2145 /src/components/SearchInput.vue
parent16a86df3e4d03ae38a8c30c1235d079a1756e866 (diff)
downloadhomer-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.vue46
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);