nicolo/arcoa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Data entry menu JS (finally...)

Browse Source
This commit is contained in:
Nicolò P 2024-11-09 18:21:21 +01:00
parent a622b3c256
commit 91940f1e26
2 changed files with 80 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/controllers/menu_controller.js
View File

@ -3,20 +3,51 @@ 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'];
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);
}
const icon = event.currentTarget.firstElementChild;
this.changeIcon(event.currentTarget.firstElementChild);
}
changeIcon(icon) {
const iconState = icon.className.includes('right') ? 'right' : 'down';
const iconAction = {
@ -29,6 +60,15 @@ export default class extends Controller {
};
iconAction[iconState]();
this.iconClass = icon.className;
}
openIcon(icon) {
return icon.className.replace('right', 'down');
}
closeIcon(icon) {
return icon.className.replace('down', 'right');
}
}

41
templates/data_entry.html.twig
View File

@ -59,12 +59,13 @@
</nav>
<div class="columns mb-0">
<div class="column is-one-fifth arcoa-menu mb-0">
<aside class="menu" data-controller="menu">
<aside class="menu" data-controller="menu"
data-menu-state-value="0">
{% if 'ROLE_READER' not in app.user.roles %}
<p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
Vocabularies
<span class="icon is-clickable pl-4" id="for-vocabs" data-action="click->menu#toggle">
<i class="fa fa-angle-right"></i>
<i class="fa fa-angle-right" data-menu-target="vocabIcon"></i>
</span>
</p>
<ul class="pl-6 is-hidden has-text-white" data-menu-target="vocabs" id="vocabs">
@ -209,10 +210,12 @@
<p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
Records
<span class="icon is-clickable pl-4" id="for-records" data-action="click->menu#toggle">
<i class="fa fa-angle-right"></i>
<i class="fa fa-angle-right" data-menu-target="recordIcon"></i>
</span>
</p>
<ul class="pl-6 is-hidden has-text-white" data-menu-target="records" id="records">
<ul class="pl-6 is-hidden has-text-white"
data-menu-target="records"
id="records">
<li class="pt-1 pb-1">
<a href="{{ path('app_bibliography_landing') }}">
Bibliography
@ -228,6 +231,36 @@
Collector
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
Conservation place
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
Document
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
Image
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
Object
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
Site
</a>
</li>
<li class="pt-1 pb-1">
<a href="">
3D model
</a>
</li>
</ul>
</aside>
</div>