aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
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
parent16a86df3e4d03ae38a8c30c1235d079a1756e866 (diff)
downloadhomer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.tar.gz
homer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.tar.zst
homer-31bd77c81d6b8343a9ea5b81656d5b7ac962d58b.zip
Adding search url support
Diffstat (limited to 'src')
-rw-r--r--src/components/SearchInput.vue46
-rw-r--r--src/components/services/AdGuardHome.vue2
-rw-r--r--src/components/services/Generic.vue5
3 files changed, 42 insertions, 11 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);
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 9c6eb34..6ef5302 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -11,7 +11,7 @@
11 </div> 11 </div>
12 <div v-if="item.icon" class="media-left"> 12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48"> 13 <figure class="image is-48x48">
14 <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i> 14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure> 15 </figure>
16 </div> 16 </div>
17 <div class="media-content"> 17 <div class="media-content">
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
index 627bcde..3238ead 100644
--- a/src/components/services/Generic.vue
+++ b/src/components/services/Generic.vue
@@ -2,7 +2,8 @@
2export default {}; 2export default {};
3</script> 3</script>
4 4
5<style></style> */ 5<style></style>
6*/
6 7
7<script> 8<script>
8export default {}; 9export default {};
@@ -27,7 +28,7 @@ export default {};
27 </div> 28 </div>
28 <div v-if="item.icon" class="media-left"> 29 <div v-if="item.icon" class="media-left">
29 <figure class="image is-48x48"> 30 <figure class="image is-48x48">
30 <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i> 31 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
31 </figure> 32 </figure>
32 </div> 33 </div>
33 <div class="media-content"> 34 <div class="media-content">