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
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]();
}
}