comparison client/src/application/Topbar.vue @ 965:ac2e51d5bc40

feat: autofocus when search expands
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 17 Oct 2018 15:33:59 +0200
parents ec9c3a111bb7
children 6114c512508b
comparison
equal deleted inserted replaced
964:1e2dce348cfb 965:ac2e51d5bc40
105 105
106 import { displayError } from "../application/lib/errors.js"; 106 import { displayError } from "../application/lib/errors.js";
107 import { HTTP } from "../application/lib/http"; 107 import { HTTP } from "../application/lib/http";
108 import Identify from "../layers/Identify"; 108 import Identify from "../layers/Identify";
109 import Layers from "../layers/Layers"; 109 import Layers from "../layers/Layers";
110
111 const setFocus = () => document.querySelector("#search").focus();
110 112
111 export default { 113 export default {
112 name: "topbar", 114 name: "topbar",
113 components: { 115 components: {
114 Identify: Identify, 116 Identify: Identify,
208 } 210 }
209 // this.searchQuery = ""; // clear search query again 211 // this.searchQuery = ""; // clear search query again
210 this.toggleSearchbar(); 212 this.toggleSearchbar();
211 }, 213 },
212 toggleSearchbar() { 214 toggleSearchbar() {
215 if (this.searchbarCollapsed) {
216 setTimeout(setFocus, 300);
217 }
213 this.searchbarCollapsed = !this.searchbarCollapsed; 218 this.searchbarCollapsed = !this.searchbarCollapsed;
214 }, 219 },
215 toggleSidebar() { 220 toggleSidebar() {
216 this.$store.commit("application/toggleSidebar"); 221 this.$store.commit("application/toggleSidebar");
217 }, 222 },