X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FSearchInput.vue;h=40c5a1de1e02981705ca763e50234c9130f34e64;hb=077be43473ebdb241c6a70e4d06795ca80a591fb;hp=22b5eef497784fd6e1b6d76dd54d738c0f9a0376;hpb=b9c5fcf085bed9c6100283133531b36bfbb06cf0;p=github%2Fbastienwirtz%2Fhomer.git diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue index 22b5eef..40c5a1d 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')" /> @@ -20,18 +20,54 @@ export default { this._keyListener = function (event) { if (event.key === "/") { 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 seach 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);