75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import { Controller } from '@hotwired/stimulus';
|
|
|
|
/**
|
|
* Show / hide items in left-hand menu
|
|
* [template: data_entry.html.twig]
|
|
* @todo Handle open / closed state
|
|
*/
|
|
export default class extends Controller {
|
|
static targets = [
|
|
'vocabs',
|
|
'records',
|
|
'vocabIcon',
|
|
'recordIcon'
|
|
];
|
|
static values = {
|
|
state: Number,
|
|
};
|
|
|
|
initialize() {
|
|
const recordsClass = localStorage.getItem('recordsClass');
|
|
const vocabsClass = localStorage.getItem('vocabsClass');
|
|
if (recordsClass) {
|
|
this.recordsTarget.className = recordsClass;
|
|
this.recordIconTarget.className = recordsClass.includes('hidden') ?
|
|
this.closeIcon(this.recordIconTarget) :
|
|
this.openIcon(this.recordIconTarget);
|
|
}
|
|
if (vocabsClass) {
|
|
this.vocabsTarget.className = vocabsClass;
|
|
this.vocabIconTarget.className = vocabsClass.includes('hidden') ?
|
|
this.closeIcon(this.vocabIconTarget) :
|
|
this.openIcon(this.vocabIconTarget);
|
|
}
|
|
}
|
|
|
|
toggle(event) {
|
|
if (event.currentTarget.id === 'for-vocabs') {
|
|
this.vocabsTarget.classList.toggle('is-hidden');
|
|
localStorage.setItem('vocabsClass', this.vocabsTarget.className);
|
|
}
|
|
|
|
if (event.currentTarget.id === 'for-records') {
|
|
this.recordsTarget.classList.toggle('is-hidden');
|
|
localStorage.setItem('recordsClass', this.recordsTarget.className);
|
|
}
|
|
|
|
this.changeIcon(event.currentTarget.firstElementChild);
|
|
}
|
|
|
|
changeIcon(icon) {
|
|
const iconState = icon.className.includes('right') ? 'right' : 'down';
|
|
|
|
const iconAction = {
|
|
'right': function() {
|
|
icon.className = icon.className.replace('right', 'down');
|
|
},
|
|
'down': function() {
|
|
icon.className = icon.className.replace('down', 'right');
|
|
}
|
|
};
|
|
|
|
iconAction[iconState]();
|
|
|
|
this.iconClass = icon.className;
|
|
}
|
|
|
|
openIcon(icon) {
|
|
return icon.className.replace('right', 'down');
|
|
}
|
|
|
|
closeIcon(icon) {
|
|
return icon.className.replace('down', 'right');
|
|
}
|
|
}
|