diff --git a/assets/app.js b/assets/app.js index 4f1ef41..f0d9b3d 100644 --- a/assets/app.js +++ b/assets/app.js @@ -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'); - } - }); -} \ No newline at end of file +import './styles/app.css'; \ No newline at end of file diff --git a/assets/controllers.json b/assets/controllers.json index 2230c71..29ea244 100644 --- a/assets/controllers.json +++ b/assets/controllers.json @@ -2,7 +2,7 @@ "controllers": { "@symfony/ux-turbo": { "turbo-core": { - "enabled": false, + "enabled": true, "fetch": "eager" }, "mercure-turbo-stream": { diff --git a/assets/controllers/dropdown_controller.js b/assets/controllers/dropdown_controller.js new file mode 100644 index 0000000..39ea1d5 --- /dev/null +++ b/assets/controllers/dropdown_controller.js @@ -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); + } +} diff --git a/assets/controllers/menu_controller.js b/assets/controllers/menu_controller.js new file mode 100644 index 0000000..995c79f --- /dev/null +++ b/assets/controllers/menu_controller.js @@ -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](); + } +} + diff --git a/templates/data_entry.html.twig b/templates/data_entry.html.twig index 818f7c8..7d6b9ba 100644 --- a/templates/data_entry.html.twig +++ b/templates/data_entry.html.twig @@ -13,9 +13,9 @@ {% if app.user %}
-
-
-
+
+
+
@@ -24,7 +24,7 @@ {{ app.user.firstname }} {{ app.user.lastname }} - +
@@ -59,15 +59,15 @@
-