mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
feat: handle ESC key to close dropdowns
This commit is contained in:
Valentin Kaelin
parent
4990bcf06c
commit
9796c98fbb
1 changed files with 54 additions and 39 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<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">
|
||||
<button
|
||||
ref="submit"
|
||||
|
|
@ -24,48 +23,50 @@
|
|||
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
|
||||
</transition>
|
||||
|
||||
<div
|
||||
:class="{'mr-12': size === 'xl'}"
|
||||
class="absolute right-0 z-30 vertical-center flex items-center h-full"
|
||||
>
|
||||
<div ref="region-dropdown">
|
||||
<div
|
||||
@click="dropdown = !dropdown"
|
||||
:class="[selectRegionClasses]"
|
||||
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"
|
||||
:class="{'mr-12': size === 'xl'}"
|
||||
class="absolute right-0 z-30 vertical-center flex items-center h-full"
|
||||
>
|
||||
<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 hover:bg-blue-800"
|
||||
@click="dropdown = !dropdown"
|
||||
:class="[selectRegionClasses]"
|
||||
class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
{{ region }}
|
||||
</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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -151,16 +152,17 @@ export default {
|
|||
if (!this.summoner.length) {
|
||||
this.summoner = this.$route.params.name
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('mousedown', this.globalClick)
|
||||
window.addEventListener('blur', this.windowBlur)
|
||||
document.addEventListener('click', this.clickOutsideRegionDropdown)
|
||||
document.addEventListener('keydown', this.handleEscape)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('mousedown', this.globalClick)
|
||||
window.removeEventListener('blur', this.windowBlur)
|
||||
document.removeEventListener('click', this.clickOutsideRegionDropdown)
|
||||
document.removeEventListener('keydown', this.handleEscape)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -170,6 +172,13 @@ export default {
|
|||
'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() {
|
||||
const search = this.summoner.split(' ').join('')
|
||||
if (search.length) {
|
||||
|
|
@ -183,6 +192,12 @@ export default {
|
|||
}
|
||||
this.clickDropdown = false
|
||||
},
|
||||
handleEscape(e) {
|
||||
if (e.key === 'Esc' || e.key === 'Escape') {
|
||||
this.dropdown = false
|
||||
this.selected = false
|
||||
}
|
||||
},
|
||||
windowBlur() {
|
||||
this.selected = false
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue