Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: handle ESC key to close dropdowns

Browse source
This commit is contained in:
Valentin Kaelin 2020-04-08 14:02:21 +02:00
parent 4990bcf06c
commit 9796c98fbb
1 changed files with 54 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
client/src/components/Form/SearchForm.vue
View file

@ -1,6 +1,5 @@
<template> <template>
<form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full"> <form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
<div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
<div class="relative w-full"> <div class="relative w-full">
<button <button
ref="submit" ref="submit"
@ -24,6 +23,7 @@
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" /> <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
</transition> </transition>
<div ref="region-dropdown">
<div <div
:class="{'mr-12': size === 'xl'}" :class="{'mr-12': size === 'xl'}"
class="absolute right-0 z-30 vertical-center flex items-center h-full" class="absolute right-0 z-30 vertical-center flex items-center h-full"
@ -50,7 +50,7 @@
:key="region" :key="region"
@click="updateSettings({name: 'region', value: region.toLowerCase()})" @click="updateSettings({name: 'region', value: region.toLowerCase()})"
:class="classRegions(index)" :class="classRegions(index)"
class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800" class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 select-none hover:bg-blue-800"
> >
<svg <svg
v-if="region.toLowerCase() === selectedRegion" v-if="region.toLowerCase() === selectedRegion"
@ -67,6 +67,7 @@
</div> </div>
</transition> </transition>
</div> </div>
</div>
</form> </form>
</template> </template>
@ -151,16 +152,17 @@ export default {
if (!this.summoner.length) { if (!this.summoner.length) {
this.summoner = this.$route.params.name this.summoner = this.$route.params.name
} }
},
mounted() {
window.addEventListener('mousedown', this.globalClick) window.addEventListener('mousedown', this.globalClick)
window.addEventListener('blur', this.windowBlur) window.addEventListener('blur', this.windowBlur)
document.addEventListener('click', this.clickOutsideRegionDropdown)
document.addEventListener('keydown', this.handleEscape)
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('mousedown', this.globalClick) window.removeEventListener('mousedown', this.globalClick)
window.removeEventListener('blur', this.windowBlur) window.removeEventListener('blur', this.windowBlur)
document.removeEventListener('click', this.clickOutsideRegionDropdown)
document.removeEventListener('keydown', this.handleEscape)
}, },
methods: { methods: {
@ -170,6 +172,13 @@ export default {
'rounded-b': index === this.regions.length - 1 'rounded-b': index === this.regions.length - 1
} }
}, },
clickOutsideRegionDropdown(e) {
e.stopPropagation()
if (e.target === this.$refs['region-dropdown'] || this.$refs['region-dropdown'].contains(e.target)) {
return
}
this.dropdown = false
},
formSubmit() { formSubmit() {
const search = this.summoner.split(' ').join('') const search = this.summoner.split(' ').join('')
if (search.length) { if (search.length) {
@ -183,6 +192,12 @@ export default {
} }
this.clickDropdown = false this.clickDropdown = false
}, },
handleEscape(e) {
if (e.key === 'Esc' || e.key === 'Escape') {
this.dropdown = false
this.selected = false
}
},
windowBlur() { windowBlur() {
this.selected = false this.selected = false
}, },