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

Left menu and dropdown JS to Stimulus

Browse Source
This commit is contained in:
Nicolò P 2024-11-06 18:54:30 +01:00
parent a67f5d3659
commit ca48e20ce7
5 changed files with 78 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/app.js
View File

@ -5,53 +5,4 @@ import './bootstrap.js';
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './styles/app.css';
if (! location.pathname.includes('login')) {
const vocabs = document.querySelector('#vocabs');
const records = document.querySelector('#records');
const userMenu = document.querySelector('.dropdown-trigger');
const userCaret = document.querySelector('#user-caret');
const forVocabs = document.querySelector('#for-vocabs')
const forRecords = document.querySelector('#for-records')
if (forVocabs) {
forVocabs.addEventListener('click', function () {
vocabs.classList.toggle('is-hidden');
if (this.firstElementChild.classList.contains('fa-angle-right')) {
this.firstElementChild.classList.remove('fa-angle-right');
this.firstElementChild.classList.add('fa-angle-down');
} else {
this.firstElementChild.classList.remove('fa-angle-down');
this.firstElementChild.classList.add('fa-angle-right');
}
});
}
if (forRecords) {
forRecords.addEventListener('click', function () {
records.classList.toggle('is-hidden');
if (this.firstElementChild.classList.contains('fa-angle-right')) {
this.firstElementChild.classList.remove('fa-angle-right');
this.firstElementChild.classList.add('fa-angle-down');
} else {
this.firstElementChild.classList.remove('fa-angle-down');
this.firstElementChild.classList.add('fa-angle-right');
}
});
}
userMenu.addEventListener('click', function () {
document.querySelector('.dropdown').classList.toggle('is-active');
if (userCaret.classList.contains('fa-caret-down')) {
userCaret.classList.remove('fa-caret-down');
userCaret.classList.add('fa-caret-up');
} else {
userCaret.classList.remove('fa-caret-up');
userCaret.classList.add('fa-caret-down');
}
});
}
import './styles/app.css';

2
assets/controllers.json
View File

@ -2,7 +2,7 @@
"controllers": {
"@symfony/ux-turbo": {
"turbo-core": {
"enabled": false,
"enabled": true,
"fetch": "eager"
},
"mercure-turbo-stream": {

26
assets/controllers/dropdown_controller.js Normal file
View File

@ -0,0 +1,26 @@
import { Controller } from '@hotwired/stimulus';
/**
* Activate a dropdown menu and toggle icon
* [template: data_entry.html.twig]
*/
export default class extends Controller {
static targets = ['drop', 'caret'];
toggle() {
// Show / hide dropdown
this.dropTarget.classList.toggle('is-active');
const caretTarget = this.caretTarget;
const caretState = caretTarget.className.includes('down') ? 'down' : 'up';
const caretAction = {
'down': function(target) {
target.className = target.className.replace('down', 'up');
},
'up': function(target) {
target.className = target.className.replace('up', 'down');
}
};
caretAction[caretState](this.caretTarget);
}
}

34
assets/controllers/menu_controller.js Normal file
View File

@ -0,0 +1,34 @@
import { Controller } from '@hotwired/stimulus';
/**
* Show / hide items in left-hand menu
* [template: data_entry.html.twig]
*/
export default class extends Controller {
static targets = ['vocabs', 'records'];
toggle(event) {
if (event.currentTarget.id === 'for-vocabs') {
this.vocabsTarget.classList.toggle('is-hidden');
}
if (event.currentTarget.id === 'for-records') {
this.recordsTarget.classList.toggle('is-hidden');
}
const icon = event.currentTarget.firstElementChild;
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]();
}
}

27
templates/data_entry.html.twig
View File

@ -13,9 +13,9 @@
</div>
{% if app.user %}
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons dropdown is-right">
<div class="dropdown-trigger">
<div class="navbar-item" data-controller="dropdown">
<div class="buttons dropdown is-right" data-dropdown-target="drop">
<div class="dropdown-trigger" data-action="click->dropdown#toggle">
<a class="button is-primary">
<span class="icon">
<i class="fa fa-user-circle"></i>
@ -24,7 +24,7 @@
{{ app.user.firstname }} {{ app.user.lastname }}
</span>
<span class="icon">
<i class="fa fa-caret-down" id="user-caret"></i>
<i class="fa fa-caret-down" data-dropdown-target="caret"></i>
</span>
</a>
</div>
@ -59,15 +59,15 @@
</nav>
<div class="columns mb-0">
<div class="column is-one-fifth arcoa-menu mb-0">
<aside class="menu">
<aside class="menu" data-controller="menu">
{% 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">
<span class="icon is-clickable pl-4" id="for-vocabs" data-action="click->menu#toggle">
<i class="fa fa-angle-right"></i>
</span>
</p>
<ul class="pl-6 is-hidden has-text-white" id="vocabs">
<ul class="pl-6 is-hidden has-text-white" data-menu-target="vocabs" id="vocabs">
<li>
<a>
<span class="icon pr-3">
@ -208,21 +208,26 @@
{% endif %}
<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">
<span class="icon is-clickable pl-4" id="for-records" data-action="click->menu#toggle">
<i class="fa fa-angle-right"></i>
</span>
</p>
<ul class="pl-6 is-hidden has-text-white" id="records">
<li>
<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
</a>
</li>
<li>
<li class="pt-1 pb-1">
<a href="{{ path('app_collection_landing') }}">
Collection
</a>
</li>
<li class="pt-1 pb-1">
<a href="{{ path('app_collector_landing') }}">
Collector
</a>
</li>
</ul>
</aside>
</div>