From 91940f1e26856a11c9929e1f627898a0548ce128 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it> Date: Sat, 9 Nov 2024 18:21:21 +0100 Subject: [PATCH] Data entry menu JS (finally...) --- assets/controllers/menu_controller.js | 46 +++++++++++++++++++++++++-- templates/data_entry.html.twig | 41 +++++++++++++++++++++--- 2 files changed, 80 insertions(+), 7 deletions(-) diff --git a/assets/controllers/menu_controller.js b/assets/controllers/menu_controller.js index 995c79f..6db5572 100644 --- a/assets/controllers/menu_controller.js +++ b/assets/controllers/menu_controller.js @@ -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'); } } - diff --git a/templates/data_entry.html.twig b/templates/data_entry.html.twig index 7d6b9ba..a8cd84c 100644 --- a/templates/data_entry.html.twig +++ b/templates/data_entry.html.twig @@ -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>