-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UHF-10276: Replace old dialog.js implementation from forms (#1511)
* UHF-10276: Replace the dialog.js functionality with custom dialog * UHF-10276: Fix translations, style the close button on the dialog * UHF-10276: Add focus trap for the dialog * UHF-10276: Refactor dialog and survey styles together * UHF-10276: Add comment about survey similarities * UHF-10276: Refactor dialog to a separate file so it can be used by other grants modules, refactored dialog.js away from grants_profile, add translations and remove old dialog.js --------- Co-authored-by: Janne Suominen <[email protected]>
- Loading branch information
1 parent
279c894
commit cf2b04c
Showing
17 changed files
with
246 additions
and
1,264 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
public/modules/custom/grants_handler/js/grants-dialog.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
3 changes: 2 additions & 1 deletion
3
public/modules/custom/grants_profile/grants_profile.libraries.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.