Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Keyboard event handling and focus styles for layers

Browse Source
This commit is contained in:
James Lyne 2021-05-28 23:25:55 +01:00
parent dd1a1b3c97
commit 0ca26beb8e
3 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/leaflet/control/DynmapLayerControl.ts
View File

@ -27,6 +27,7 @@ import '@/assets/icons/checkbox.svg';
import {useStore} from "@/store"; import {useStore} from "@/store";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {watch} from "vue"; import {watch} from "vue";
import {handleKeyboardEvent} from "@/util/events";
const store = useStore(); const store = useStore();
@ -70,6 +71,12 @@ export class DynmapLayerControl extends Control.Layers {
this._section!.style.display = ''; this._section!.style.display = '';
this.handleResize(); this.handleResize();
const firstCheckbox = this._container!.querySelector('input');
if(firstCheckbox) {
(firstCheckbox as HTMLElement).focus();
}
// @ts-ignore // @ts-ignore
super._checkDisabledLayers(); super._checkDisabledLayers();
return this; return this;
@ -89,6 +96,11 @@ export class DynmapLayerControl extends Control.Layers {
DomEvent.disableClickPropagation(container); DomEvent.disableClickPropagation(container);
DomEvent.disableScrollPropagation(container); DomEvent.disableScrollPropagation(container);
DomEvent.on(container, 'keydown', (e: Event) => {
const elements = Array.from(container.querySelectorAll('input')) as HTMLElement[];
handleKeyboardEvent(e as KeyboardEvent, elements);
});
const section = this._section = DomUtil.create('section', className + '-list'), const section = this._section = DomUtil.create('section', className + '-list'),
button = this._layersButton = DomUtil.create('button', className + '-toggle', container); button = this._layersButton = DomUtil.create('button', className + '-toggle', container);

2
src/scss/_mixins.scss
View File

@ -53,8 +53,6 @@
@mixin button-focused { @mixin button-focused {
outline: var(--outline-focus) auto thick !important; outline: var(--outline-focus) auto thick !important;
//background-color: var(--background-base);
//color: var(--text-base);
z-index: 1; z-index: 1;
border-color: var(--background-dark); border-color: var(--background-dark);
} }

13
src/scss/style.scss
View File

@ -130,6 +130,19 @@ input {
opacity: 1; opacity: 1;
} }
} }
@include focus {
& ~ span:after {
content: '';
outline: var(--outline-focus) 2px solid;
position: absolute;
top: 0;
right: -0.5rem;
bottom: 0;
left: -0.5rem;
border-radius: 0.5rem;
}
}
} }
svg { svg {