From 31bd77c81d6b8343a9ea5b81656d5b7ac962d58b Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Fri, 11 Dec 2020 11:30:59 -0800 Subject: Adding search url support --- package.json | 26 +- src/components/SearchInput.vue | 46 +- src/components/services/AdGuardHome.vue | 2 +- src/components/services/Generic.vue | 5 +- yarn.lock | 1068 +++++++++++++++---------------- 5 files changed, 582 insertions(+), 565 deletions(-) diff --git a/package.json b/package.json index f4a03b9..61acf31 100644 --- a/package.json +++ b/package.json @@ -10,26 +10,26 @@ "dependencies": { "@fortawesome/fontawesome-free": "^5.15.1", "bulma": "^0.9.1", - "core-js": "^3.6.4", - "js-yaml": "^3.14.0", + "core-js": "^3.8.1", + "js-yaml": "^3.14.1", "lodash.merge": "^4.6.2", - "register-service-worker": "^1.7.1", + "register-service-worker": "^1.7.2", "vue": "^2.6.12" }, "devDependencies": { - "@vue/cli-plugin-babel": "~4.5.8", - "@vue/cli-plugin-eslint": "~4.5.8", - "@vue/cli-plugin-pwa": "~4.5.8", - "@vue/cli-service": "~4.5.8", + "@vue/cli-plugin-babel": "~4.5.9", + "@vue/cli-plugin-eslint": "~4.5.9", + "@vue/cli-plugin-pwa": "~4.5.9", + "@vue/cli-service": "~4.5.9", "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", - "eslint": "^7.11.0", - "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-vue": "^7.1.0", - "prettier": "^2.1.2", + "eslint": "^7.15.0", + "eslint-plugin-prettier": "^3.2.0", + "eslint-plugin-vue": "^7.2.0", + "prettier": "^2.2.1", "raw-loader": "^4.0.2", - "sass": "^1.27.0", - "sass-loader": "^10.0.4", + "sass": "^1.30.0", + "sass-loader": "^10.1.0", "vue-template-compiler": "^2.6.12" } } 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 @@ type="text" ref="search" :value="value" - @input="$emit('input', $event.target.value.toLowerCase())" + @input="search($event.target.value)" @keyup.enter.exact="$emit('search-open')" @keyup.alt.enter="$emit('search-open', '_blank')" /> @@ -20,18 +20,48 @@ 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: { + 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); 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 @@
- +
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 @@ export default {}; - */ + +*/