X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FSearchInput.vue;h=165c99299a552b7a893db4339aca64150805ac7d;hb=585844394d7a4cc4a58e30fd42cb1f8e83ac02f7;hp=9419db3293e710817735e5f725b12fdde0fadcba;hpb=ed8b17e0df7ffa64e392bacbd2abf6492fdfb3f1;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 9419db3..165c992 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -5,9 +5,9 @@
       type="text"
       ref="search"
       :value="value"
-      @input="$emit('input', $event.target.value.toLowerCase())"
-      @keyup.enter.exact="$emit('search-open')"
-      @keyup.alt.enter="$emit('search-open', '_blank')"
+      @input="search($event.target.value)"
+      @keyup.enter.exact="open()"
+      @keyup.alt.enter="open('_blank')"
     />
   </div>
 </template>
@@ -15,23 +15,65 @@
 <script>
 export default {
   name: "SearchInput",
-  props: ["value"],
+  props: {
+    value: String,
+    hotkey: {
+      type: String,
+      default: "/",
+    },
+  },
   mounted() {
     this._keyListener = function (event) {
-      if (event.key === "/") {
+      if (event.key === this.hotkey) {
         event.preventDefault();
-        this.$emit("search-focus");
-        this.$nextTick(() => {
-          this.$refs.search.focus();
-        });
+        this.focus();
       }
       if (event.key === "Escape") {
-        this.$refs.search.value = "";
-        this.$refs.search.blur();
-        this.$emit("search-cancel");
+        this.cancel();
       }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
+
+    // fill search from get parameter.
+    const search = new URLSearchParams(window.location.search).get("search");
+    if (search) {
+      this.$refs.search.value = search;
+      this.search(search);
+      this.focus();
+    }
+  },
+  methods: {
+    open: function (target = null) {
+      if (!this.$refs.search.value) {
+        return;
+      }
+      this.$emit("search-open", target);
+    },
+    focus: function () {
+      this.$emit("search-focus");
+      this.$nextTick(() => {
+        this.$refs.search.focus();
+      });
+    },
+    setSearchURL: function (value) {
+      const url = new URL(window.location);
+      if (value === "") {
+        url.searchParams.delete("search");
+      } else {
+        url.searchParams.set("search", value);
+      }
+      window.history.replaceState("search", null, url);
+    },
+    cancel: function () {
+      this.setSearchURL("");
+      this.$refs.search.value = "";
+      this.$refs.search.blur();
+      this.$emit("search-cancel");
+    },
+    search: function (value) {
+      this.setSearchURL(value);
+      this.$emit("input", value.toLowerCase());
+    },
   },
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener);