dev: Provide a JS Switch controller

assets/javascripts/application.js

@@ -20,6 +20,7 @@ import NotificationsController from '@/controllers/notifications_controller.js';
 import PasswordController from '@/controllers/password_controller.js';
 import PopupController from '@/controllers/popup_controller.js';
 import ScrollToController from '@/controllers/scroll_to_controller.js';
+import SwitchController from '@/controllers/switch_controller.js';
 import TabsController from '@/controllers/tabs_controller.js';
 import TinymceController from '@/controllers/tinymce_controller.js';
 
@@ -39,6 +40,7 @@ application.register('notifications', NotificationsController);
 application.register('password', PasswordController);
 application.register('popup', PopupController);
 application.register('scroll-to', ScrollToController);
+application.register('switch', SwitchController);
 application.register('tabs', TabsController);
 application.register('tinymce', TinymceController);
 

assets/javascripts/controllers/modal_controller.js

@@ -5,14 +5,7 @@
 
 import { Controller } from '@hotwired/stimulus';
 
-const FOCUSABLE_ELEMENTS = [
-    'a[href]:not([tabindex="-1"])',
-    'button:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
-    'select:not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([tabindex="-1"])',
-];
+import { FOCUSABLE_ELEMENTS } from '@/query_selectors.js';
 
 // Credits to:
 // - JoliCode: https://jolicode.com/blog/une-fenetre-modale-accessible

assets/javascripts/controllers/switch_controller.js

@@ -0,0 +1,26 @@
+// This file is part of Bileto.
+// Copyright 2022-2023 Probesys
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Controller } from '@hotwired/stimulus';
+
+import { FOCUSABLE_ELEMENTS } from '@/query_selectors.js';
+
+export default class extends Controller {
+    static get targets () {
+        return ['panel'];
+    }
+
+    change (event) {
+        this.panelTargets.forEach((panel) => {
+            panel.hidden = panel.id !== event.params.for;
+
+            if (!panel.hidden) {
+                const focusableElements = Array.from(panel.querySelectorAll(FOCUSABLE_ELEMENTS));
+                if (focusableElements.length > 0) {
+                    focusableElements[0].focus();
+                }
+            }
+        });
+    }
+}

assets/javascripts/query_selectors.js

@@ -0,0 +1,12 @@
+// This file is part of Bileto.
+// Copyright 2022-2023 Probesys
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export const FOCUSABLE_ELEMENTS = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+];