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

93
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,48 +23,50 @@
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" /> <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
</transition> </transition>
<div <div ref="region-dropdown">
:class="{'mr-12': size === 'xl'}"
class="absolute right-0 z-30 vertical-center flex items-center h-full"
>
<div <div
@click="dropdown = !dropdown" :class="{'mr-12': size === 'xl'}"
:class="[selectRegionClasses]" class="absolute right-0 z-30 vertical-center flex items-center h-full"
class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
>
<span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
<svg class="ml-1 -mr-1 w-4 h-4">
<use xlink:href="#caret-down" />
</svg>
</div>
</div>
<transition name="scale-fade">
<div
v-show="dropdown"
:class="[dropdownClasses]"
class="absolute right-0 z-30 text-white shadow cursor-pointer"
> >
<div <div
v-for="(region, index) in regions" @click="dropdown = !dropdown"
:key="region" :class="[selectRegionClasses]"
@click="updateSettings({name: 'region', value: region.toLowerCase()})" class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
:class="classRegions(index)"
class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
> >
<svg <span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
v-if="region.toLowerCase() === selectedRegion" <svg class="ml-1 -mr-1 w-4 h-4">
class="absolute vertical-center offsetIcon w-3 h-3 fill-current" <use xlink:href="#caret-down" />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
/>
</svg> </svg>
{{ region }}
</div> </div>
</div> </div>
</transition> <transition name="scale-fade">
<div
v-show="dropdown"
:class="[dropdownClasses]"
class="absolute right-0 z-30 text-white shadow cursor-pointer"
>
<div
v-for="(region, index) in regions"
:key="region"
@click="updateSettings({name: 'region', value: region.toLowerCase()})"
:class="classRegions(index)"
class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 select-none hover:bg-blue-800"
>
<svg
v-if="region.toLowerCase() === selectedRegion"
class="absolute vertical-center offsetIcon w-3 h-3 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
/>
</svg>
{{ region }}
</div>
</div>
</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
}, },