arittner/documentation
1
0
Fork 0
forked from plume/documentation
Code Issues Pull requests Projects Releases Wiki Activity

Refactor language switcher using class

Browse source
This commit is contained in:
Kitaiti Makoto 2020-12-29 19:40:22 +09:00
parent 77bb510e93
commit c4ebde8951
1 changed files with 34 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
source/javascripts/site.js
View file

@ -3,20 +3,41 @@ document.getElementById('menu').addEventListener('click', evt =>
)
document.addEventListener('DOMContentLoaded', () => {
for (const switcher of document.getElementsByClassName('language-switcher')) {
const control = switcher.querySelector('[aria-haspopup]');
control.addEventListener('click', event => {
const popupId = control.getAttribute('aria-controls');
if (! popupId) return;
const popup = document.getElementById(popupId);
if (! popup) return;
if (control.getAttribute('aria-expanded') === 'true') {
control.setAttribute('aria-expanded', 'false');
popup.setAttribute('aria-hidden', 'true');
} else {
control.setAttribute('aria-expanded', 'true');
popup.setAttribute('aria-hidden', 'false');
class LanguageSwitcher {
constructor(element) {
this.element = element;
this.control = this.element.querySelector('[aria-haspopup]');
const popupId = this.control.getAttribute('aria-controls');
this.popup = document.getElementById(popupId);
this.control.addEventListener('click', _ => {this.toggle();});
}
});
get expanded() {
return this.control.getAttribute('aria-expanded') === 'true';
}
toggle() {
if (this.expanded) {
this.collapse();
} else {
this.expand();
}
}
expand() {
if (this.expanded) return;
this.control.setAttribute('aria-expanded', 'true');
this.popup.setAttribute('aria-hidden', 'false');
}
collapse() {
if (! this.expanded) return;
this.control.setAttribute('aria-expanded', 'false');
this.popup.setAttribute('aria-hidden', 'true');
}
}
for (const switcher of document.getElementsByClassName('language-switcher')) {
new LanguageSwitcher(switcher);
}
});