UHF-10276: Replace old dialog.js implementation from forms

public/modules/custom/grants_handler/grants_handler.libraries.yml

@@ -53,3 +53,11 @@ application-timeout-message:
   dependencies:
     - core/jquery
     - core/drupalSettings
+
+# Grants Dialog
+grants-dialog:
+  version: 1.0.0
+  js:
+    js/grants-dialog.js: { }
+  dependencies:
+    - core/drupal

public/modules/custom/grants_handler/grants_handler.module

@@ -2082,3 +2082,11 @@ function grants_handler_options_list_alter(array &$options, array $context): voi
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function grants_handler_preprocess_webform(array &$variables) {
+  $variables['#attached']['library'][] = 'grants_handler/grants-dialog';
+  $variables['#attached']['library'][] = 'hdbt/focus-trap';
+}

public/modules/custom/grants_handler/js/grants-dialog.js

@@ -0,0 +1,110 @@
+(function (Drupal) {
+  Drupal.dialogFunctions = {
+
+    /**
+     * Creates a dialog and appends it to the body.
+     *
+     * @param {string} dialogContent - The title displayed at the top of the
+     *   dialog.
+     * @param {string} actionButtonText - The text for the "leave" button.
+     * @param {string} backButtonText - The text for the "back" button.
+     * @param {string} closeButtonText - The text for the "close" button that
+     *   closes the dialog.
+     * @param {Function} actionButtonCallback - The function to execute when
+     *   the "action" button is clicked.
+     */
+    createDialog: (dialogContent, actionButtonText, backButtonText, closeButtonText, actionButtonCallback = null) => {
+      const dialogTitle = Drupal.t('Attention', {}, { context: 'grants_handler' });
+      const actionButtonHTML = actionButtonText && `<button class="dialog__action-button" id="helfi-dialog__action-button" data-hds-component="button" data-hds-variant="primary">${actionButtonText}</button>`;
+      const backButtonHTML = backButtonText && `<button class="dialog__action-button" id="helfi-dialog__back-button" data-hds-component="button" data-hds-variant="secondary">${backButtonText}</button>`;
+      const closeButtonHTML = closeButtonText && `<button class="dialog__close-button" id="helfi-dialog__close-button"><span class="is-hidden">${closeButtonText}</span></button>`;
+
+      const dialogHTML = `
+        <div class="dialog__container" id="helfi-dialog__container">
+          <div class="dialog__overlay"></div>
+          <dialog class="dialog" id="helfi-dialog" aria-labelledby="helfi-dialog__title" aria-modal="true">
+            <div class="dialog__header">
+              ${closeButtonHTML}
+              <h2 class="dialog__title" id="helfi-dialog__title">${dialogTitle}</h2>
+            </div>
+            <div class="dialog__content">
+             ${dialogContent}
+            </div>
+            <div class="dialog__actions">
+              ${actionButtonHTML}
+              ${backButtonHTML}
+            </div>
+          </dialog>
+        </div>
+      `;
+
+      // TODO: Surveys use very similar javascript dialog implementation.
+      // This and the survey implementation could possibly be merged with some
+      // refactoring.
+
+      // Add the dialog to the body
+      document.body.insertAdjacentHTML('beforeend', dialogHTML);
+
+      Drupal.dialogFunctions.setBodyPaddingRight(true);
+
+      Drupal.dialogFunctions.toggleNoScroll(true);
+
+      const actionButton = document.getElementById('helfi-dialog__action-button');
+      const backButton = document.getElementById('helfi-dialog__back-button');
+      const closeButton = document.getElementById('helfi-dialog__close-button');
+      const dialog = document.getElementById('helfi-dialog__container');
+      const dialogFocusTrap = window.focusTrap.createFocusTrap('#helfi-dialog__container', {
+        initialFocus: () => '#helfi-dialog__title'
+      });
+
+      // Activate the focus trap so that the user needs to react to the dialog.
+      dialogFocusTrap.activate();
+
+      // Add click event listener to action button
+      if (actionButtonCallback && actionButtonText) {
+        actionButton.addEventListener('click', actionButtonCallback);
+      }
+
+      // Add click event listener to back button
+      backButton.addEventListener('click', () => {
+        dialogFocusTrap.deactivate();
+        Drupal.dialogFunctions.removeDialog(dialog);
+      });
+
+      // Add click event listener to close button
+      closeButton.addEventListener('click', () => {
+        dialogFocusTrap.deactivate();
+        Drupal.dialogFunctions.removeDialog(dialog);
+      });
+
+      // Add event listener to ESC button to remove the dialog
+      document.body.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape') {
+          Drupal.dialogFunctions.removeDialog(dialog);
+        }
+      });
+    },
+
+    setBodyPaddingRight: (enable) => {
+      if (enable) {
+        document.body.style.paddingRight = `${
+          window.innerWidth - document.documentElement.clientWidth
+        }px`;
+      }
+      else {
+        document.body.style.removeProperty('padding-right');
+      }
+    },
+
+    toggleNoScroll: (enable) => {
+      const root = document.documentElement;
+      root.classList.toggle('noscroll', enable);
+    },
+
+    removeDialog: (dialog) => {
+      dialog.remove();
+      Drupal.dialogFunctions.toggleNoScroll(false);
+      Drupal.dialogFunctions.setBodyPaddingRight(false);
+    }
+  }
+})(Drupal);

public/modules/custom/grants_handler/js/webform.form.unsaved.js

@@ -46,6 +46,7 @@
       // Set the current unsaved flag state.
       unsaved = value;
     },
+
     attach: function (context) {
       // Detect general unsaved changes.
       // Look for the 'data-webform-unsaved' attribute which indicates that
@@ -109,42 +110,32 @@
       }
     }
   };
+
   $('a').on('click', function (event) {
     let containingElement = document.querySelector('form');
     if (unsaved && !containingElement.contains(event.target) && !event.target.getAttribute('href').startsWith('#')) {
       event.preventDefault();
-      const $previewDialog = $('<div></div>').appendTo('body');
-      Drupal.dialog($previewDialog, {
-        title: Drupal.t('Are you sure you want to leave? Leave without saving.'),
-        width: '33%',
-        closeText: Drupal.t('Close', {}, { context: 'grants_handler' }),
-        buttons: [
-          {
-            text: Drupal.t('Leave the application'),
-            click() {
-              unsaved = false;
-              $(this).dialog('close');
-              modal = true;
-              window.top.location.href = event.currentTarget.href;
-            },
-          },
-          {
-            text: Drupal.t('Back to application'),
-            buttonType: 'secondary',
-            click() {
-              $(this).dialog('close');
-            },
-          },
-        ],
-      }).showModal();
+
+      return Drupal.dialogFunctions.createDialog(
+        Drupal.t('You have unsaved changes. Are you sure you want to leave?', {}, { context: 'grants_handler' }),
+        Drupal.t('Leave the application', {}, { context: 'grants_handler' }),
+        Drupal.t('Back to application', {}, { context: 'grants_handler' }),
+        Drupal.t('Close', {}, { context: 'grants_handler' }),
+        () => {
+          unsaved = false;
+          const dialog = document.getElementById('helfi-dialog__container');
+          Drupal.dialogFunctions.removeDialog(dialog);
+          window.top.location.href = event.currentTarget.href;
+        }
+      );
     }
   });
 
   // Prevent page refresh via keyboard or browser button when unsaved changes are present
   $(window).on('beforeunload', function (event) {
     if (unsaved) {
       // Show a confirmation dialog when the user tries to refresh or leave the page
-      const message = Drupal.t('You have unsaved changes. Are you sure you want to leave?');
+      const message = Drupal.t('You have unsaved changes. Are you sure you want to leave?', {}, { context: 'grants_handler' });
       event.preventDefault();
       event.returnValue = message; // For most browsers
       return message; // For older browsers
@@ -155,35 +146,27 @@
   $(document).on('keydown', function (e) {
     if (unsaved && (e.which === 116 || (e.which === 82 && (e.ctrlKey || e.metaKey)))) {
       e.preventDefault(); // Prevent F5 and Ctrl+R / Cmd+R refresh
-      const $previewDialog = $('<div></div>').appendTo('body');
-      Drupal.dialog($previewDialog, {
-        title: Drupal.t('You have unsaved changes. Are you sure you want to refresh?'),
-        width: '33%',
-        closeText: Drupal.t('Close', {}, { context: 'grants_handler' }),
-        buttons: [
-          {
-            text: Drupal.t('Refresh the page'),
-            click() {
-              unsaved = false;
-              $(this).dialog('close');
-              location.reload(); // Perform the refresh
-            },
-          },
-          {
-            text: Drupal.t('Back to application'),
-            buttonType: 'secondary',
-            click() {
-              $(this).dialog('close');
-            },
-          },
-        ],
-      }).showModal();
+
+      return Drupal.dialogFunctions.createDialog(
+        Drupal.t('You have unsaved changes. Are you sure you want to refresh?', {}, { context: 'grants_handler' }),
+        Drupal.t('Refresh the page', {}, { context: 'grants_handler' }),
+        Drupal.t('Back to application', {}, { context: 'grants_handler' }),
+        Drupal.t('Close', {}, { context: 'grants_handler' }),
+        () => {
+          unsaved = false;
+          const dialog = document.getElementById('helfi-dialog__container');
+          Drupal.dialogFunctions.removeDialog(dialog);
+          location.reload();
+        }
+      );
     }
   });
+
   // Add an event listener for autologout.
   document.addEventListener('autologout', function () {
     autologout = true;
   });
+
   $(window).on('beforeunload', function () {
     if (autologout) {
       return;

public/modules/custom/grants_handler/translations/fi.po

@@ -1,17 +1,5 @@
-# Finnish translation of City of Helsinki Grants Handler Module
-#
-msgctxt "grants_handler"
 msgid ""
 msgstr ""
-"Project-Id-Version: PROJECT VERSION\n"
-"POT-Creation-Date: 2022-01-18 16:58+0300\n"
-"PO-Revision-Date: 2022-10-12 08:58+0300\n"
-"Last-Translator: Petri Leinonen <[email protected]>\n"
-"Language-Team: LANGUAGE <EMAIL@ADDRESS>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=utf-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
 msgctxt "grants_handler"
 msgid "Print table"
@@ -552,16 +540,6 @@ msgstr "Pyyntösi keskeytyi verkkovirheen takia."
 msgid "Are you sure you want to leave? Leave without saving."
 msgstr "Oletko varma että haluat keskeyttää lomakkeen täyttämisen? Poistu tallentamatta."
 
-msgctxt "grants_handler"
-msgid "Close"
-msgstr "Sulje"
-
-msgid "Leave the application"
-msgstr "Poistu hakemukselta"
-
-msgid "Back to application"
-msgstr "Takaisin hakemukselle"
-
 msgctxt "grants_handler"
 msgid "View application"
 msgstr "Katsele hakemusta"
@@ -653,3 +631,27 @@ msgstr "Poista @item @number"
 msgctxt "grants_handler"
 msgid "Refresh the page"
 msgstr "Lataa sivu uudelleen"
+
+msgctxt "grants_handler"
+msgid "Leave the application"
+msgstr "Poistu hakemukselta"
+
+msgctxt "grants_handler"
+msgid "Close"
+msgstr "Sulje"
+
+msgctxt "grants_handler"
+msgid "Back to application"
+msgstr "Takaisin hakemukselle"
+
+msgctxt "grants_handler"
+msgid "You have unsaved changes. Are you sure you want to refresh?"
+msgstr "Sinulla on tallentamattomia muutoksia. Haluatko varmasti ladata sivun uudelleen?"
+
+msgctxt "grants_handler"
+msgid "You have unsaved changes. Are you sure you want to leave?"
+msgstr "Sinulla on tallentamattomia muutoksia. Haluatko varmasti poistua hakemukselta?"
+
+msgctxt "grants_handler"
+msgid "Attention"
+msgstr "Huomio"

public/modules/custom/grants_handler/translations/sv.po

@@ -1,17 +1,5 @@
-# Swedish translation of City of Helsinki Grants Handler Module
-#
-msgctxt "grants_handler"
 msgid ""
 msgstr ""
-"Project-Id-Version: PROJECT VERSION\n"
-"POT-Creation-Date: 2022-01-18 16:58+0300\n"
-"PO-Revision-Date: 2022-10-12 08:58+0300\n"
-"Last-Translator: Petri Leinonen <[email protected]>\n"
-"Language-Team: LANGUAGE <EMAIL@ADDRESS>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=utf-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
 msgctxt "grants_handler"
 msgid "Print table"
@@ -548,19 +536,6 @@ msgstr "Din begäran uppfylldes inte på grund av nätverksfel."
 msgid "Are you sure you want to leave? Leave without saving."
 msgstr "Är du säker att du vill stänga blanketten? Avsluta utan att spara."
 
-msgctxt "grants_handler"
-msgid "Close"
-msgstr "Stäng"
-
-msgid "Leave the application"
-msgstr "Avsluta från ansökningshandling"
-
-msgid "Back to application"
-msgstr "Tillbaka till ansökningshandling"
-
-msgid "Refresh the page"
-msgstr "Uppdatera sidan"
-
 msgctxt "grants_handler"
 msgid "View application"
 msgstr "Visa ansökning"
@@ -648,3 +623,31 @@ msgstr "%mail är inte en giltig e-postadress. Använd formen [email protected]."
 
 msgid "Remove @item @number"
 msgstr "Ta bort @item @number"
+
+msgctxt "grants_handler"
+msgid "Refresh the page"
+msgstr "Uppdatera sidan"
+
+msgctxt "grants_handler"
+msgid "Leave the application"
+msgstr "Avsluta från ansökningshandling"
+
+msgctxt "grants_handler"
+msgid "Close"
+msgstr "Stäng"
+
+msgctxt "grants_handler"
+msgid "Back to application"
+msgstr "Tillbaka till ansökningshandling"
+
+msgctxt "grants_handler"
+msgid "You have unsaved changes. Are you sure you want to refresh?"
+msgstr "Du har osparade ändringar. Är du säker på att du vill uppdatera?"
+
+msgctxt "grants_handler"
+msgid "You have unsaved changes. Are you sure you want to leave?"
+msgstr "Du har osparade ändringar. Är du säker på att du vill lämna?"
+
+msgctxt "grants_handler"
+msgid "Attention"
+msgstr "Observera"

public/modules/custom/grants_profile/grants_profile.libraries.yml

@@ -1,11 +1,12 @@
 profile_dialog:
   version: 1.x
   js:
-    js/profile_dialog.js: {}
+    js/profile_dialog.js: { }
   dependencies:
     - core/drupal
     - core/jquery
     - core/once
+    - grants_handler/grants-dialog
 
 pattern_error:
   js: