feat: ✨ Aggiunto handler per inizializzare alcune funzionalità al caricamento della pagina

.idea/inspectionProfiles/Project_Default.xml

@@ -416,7 +416,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="20">
+          <list size="21">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -437,6 +437,7 @@
             <item index="17" class="java.lang.String" itemvalue="text-area" />
             <item index="18" class="java.lang.String" itemvalue="icon-button" />
             <item index="19" class="java.lang.String" itemvalue="mwc-circular-progress" />
+            <item index="20" class="java.lang.String" itemvalue="mwc-dialog" />
           </list>
         </value>
       </option>

resources/js/_material.ts

@@ -1,41 +1,78 @@
-import '@material/mwc-button';
 import '@material/mwc-list';
-import '@material/mwc-menu';
 import './WebComponents/IconButton';
 import './WebComponents/MaterialDrawer';
 import './WebComponents/TopAppBar';
 
+import {Button} from '@material/mwc-button';
 import type {Dialog as MWCDialog} from '@material/mwc-dialog';
-import $, {
-  type Cash
-} from 'cash-dom';
+import {Menu as MWCMenu} from '@material/mwc-menu';
+import $ from 'cash-dom';
 
-$(() => {
-  // Submit forms with enter key
-  $('mwc-button[type="submit"], mwc-icon-button[type="submit"]')
-    .closest('form')
-    .find('text-field, select, text-area')
-    .on('keydown', function (this: Cash, event: KeyboardEvent) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
+import {IconButton} from './WebComponents';
+import {Inertia} from '@inertiajs/inertia';
 
-        $(this)
-          .closest('form')
-          .find('mwc-button[type=submit], mwc-icon-button[type="submit"]')
-          .trigger('click');
-      }
-    });
+/**
+ * Handles the click event of the trigger button of a MWC Dialog or Menu.
+ */
+function triggerClickHandler(element: MWCMenu | MWCDialog) {
+  if (element instanceof MWCMenu) {
+    if (element.open) {
+      element.close();
+    } else {
+      element.show();
+    }
+  } else {
+    element.show();
+  }
+}
 
-
-  $('mwc-dialog')
-    .each((index, dialog: HTMLElement & Partial<MWCDialog>) => {
-      const trigger = dialog.getAttribute('trigger');
-      const button = trigger ? $(`#${trigger}`) : $(dialog)
-        .prev('mwc-dialog-button');
+/**
+ * Loads MWCMenu and MWCDialog triggers
+ */
+function loadTriggers() {
+  for (const element of document.querySelectorAll<MWCMenu | MWCDialog>('mwc-menu, mwc-dialog')) {
+    const {trigger} = element.dataset;
+    if (trigger) {
+      const button = document.querySelector<HTMLButtonElement | Button | IconButton>(trigger);
       if (button) {
-        button.on('click', () => {
-          (dialog as MWCDialog).show();
-        });
+        button.addEventListener('click', () => triggerClickHandler(element));
+
+        if (element instanceof MWCMenu) {
+          element.anchor = button;
+        }
       }
+    }
+  }
+}
+
+/**
+ * Better forms accessibility
+ * @example https://codesandbox.io/s/test-mwc-button-form-submit-zqgo5i?file=/src/index.ts
+ */
+function betterFormsAccessibility() {
+  for (const button of document.querySelectorAll<Button>('mwc-button[type="submit"]')) {
+    let previous = button.previousElementSibling;
+    if (!previous || (previous && previous.getAttribute('type') !== 'submit')) {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'submit');
+      input.toggleAttribute('hidden', true);
+      button.before(input);
+      previous = button.previousElementSibling;
+    }
+
+    button.addEventListener('click', () => {
+      button.closest('form')
+        ?.requestSubmit(previous as HTMLInputElement);
     });
+  }
+}
+
+Inertia.on('navigate', () => {
+  loadTriggers();
+  betterFormsAccessibility();
+
+  // Remove the ugly underline under mwc button text when inside <a> tags.
+  $('a')
+    .has('mwc-button')
+    .css('text-decoration', 'none');
 });

resources/js/app.ts

@@ -1,7 +1,5 @@
 import {InertiaProgress} from '@inertiajs/progress';
 import {createInertiaApp} from '@maicol07/inertia-mithril';
-import {Button} from '@material/mwc-button';
-import {Menu as MWCMenu} from '@material/mwc-menu';
 import cash from 'cash-dom';
 import Mithril, {ClassComponent} from 'mithril';
 import {registerSW} from 'virtual:pwa-register';
@@ -12,7 +10,6 @@ import {
   __ as translator,
   showSnackbar
 } from './utils';
-import {IconButton} from './WebComponents';
 
 // Variabili globali
 globalThis.$ = cash;
@@ -24,6 +21,7 @@ InertiaProgress.init();
 const importedModules: Record<string, OpenSTAManager.ImportedModule> = {};
 const moduleURL = `${window.location.origin}/modules/{{modulePath}}/index.js`;
 
+// Load modules bootstrap
 for (const [name, module] of Object.entries(app.modules)) {
   if (module.hasBootstrap) {
     const path = moduleURL.replace('{{modulePath}}', `${module.moduleVendor}/${name}`);
@@ -63,30 +61,10 @@ await createInertiaApp({
     m.mount(el, {
       view: () => m(App, props)
     });
-
-    // TODO: Usare un evento custom
-    // Inizializzazione componenti
-    for (const menu of document.querySelectorAll<MWCMenu>('mwc-menu')) {
-      const {trigger} = menu.dataset;
-      if (trigger) {
-        const button = document.querySelector<HTMLButtonElement | Button | IconButton>(trigger);
-        if (button) {
-          button.addEventListener('click', () => {
-            menu.open = !menu.open;
-          });
-          menu.anchor = button;
-        }
-      }
-    }
-
-    // Remove the ugly underline under mwc button text when inside <a> tags.
-    $('a')
-      .has('mwc-button')
-      .css('text-decoration', 'none');
   }
 });
 
-
+// PWA
 const updateSW = registerSW({
   async onNeedRefresh() {
     const action = await showSnackbar(__('Aggiornamento del frontend disponibile!'), false, __('Ricarica'), __('Annulla'));

resources/js/globals.d.ts

@@ -39,11 +39,13 @@ import {
 declare global {
   const route: typeof router;
 
-  const app: {
-    translations: Record<string, string>,
+  let app: {
+    events: Record<string, Event>,
+    locale: string,
     modules: OpenSTAManager.Modules,
-    user: OpenSTAManager.User | null,
     theme: 'high-contrast' | 'light',
+    translations: Record<string, string>,
+    user: OpenSTAManager.User | null,
     VERSION: string,
     REVISION: string,
   };

resources/views/app.blade.php

@@ -35,13 +35,14 @@
 
 <script>
     app = {
-        modules: @js($modules->pluck('modules')->collapse()->all()),
-        translations: @js($translations),
+        events: {},
         locale: '{{app()->getLocale()}}',
+        modules: @js($modules->pluck('modules')->collapse()->all()),
+        theme: @js(session('high-contrast') ? 'high-contrast' : 'light'),
+        translations: @js($translations),
         user: @js(auth()->user()),
         VERSION: @js(trim(file_get_contents(base_path('VERSION')))),
-        REVISION: @js(trim(file_get_contents(base_path('REVISION')))),
-        theme: @js(session('high-contrast') ? 'high-contrast' : 'light')
+        REVISION: @js(trim(file_get_contents(base_path('REVISION'))))
     };
 </script>
 

tsconfig.json

@@ -37,4 +37,4 @@
     "resources/js/**/*",
     "vite.config.ts"
   ]
-}
+}