From 67846d9f129cbe17f16c3cd9e4ec5925b9b655ed Mon Sep 17 00:00:00 2001 From: Nick Colley <2445413+NickColley@users.noreply.github.com> Date: Sun, 21 Jul 2024 14:59:36 +0100 Subject: [PATCH] Replace leanmodal2 with native dialog element Adds a lot of good features that make it way more accessible like preventing outside elements from being focused, which can be difficult to do otherwise. Removes dependency on leanmodel2 so quicker page loads. TODO before ready: - Fallback gracefully in browsers that dont support it - Test in real screen readers --- _scripts/lib/modal.js | 19 ------ _scripts/widgets/download-modal.js | 44 ++++++++++---- _styles/main.css | 95 ++++++++++++++---------------- index.php | 12 ++-- 4 files changed, 82 insertions(+), 88 deletions(-) delete mode 100644 _scripts/lib/modal.js diff --git a/_scripts/lib/modal.js b/_scripts/lib/modal.js deleted file mode 100644 index fb1d41afdf..0000000000 --- a/_scripts/lib/modal.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * _scripts/lib/modal.js - * Loads jQuery.leanModal2 from cdn address - * - * @exports {Promise} default - a promise of the jQuery with jQuery.leanModal2 loaded - */ - -import Script from 'scriptjs' - -import jQuery from '~/lib/jquery' - -export default jQuery.then(($) => { - return new Promise((resolve, reject) => { - Script('https://cdn.jsdelivr.net/gh/eustasy/jQuery.leanModal2@2.6.3/jQuery.leanModal2.min.js', () => { - console.log('jQuery.leanModal2 loaded') - return resolve(window.jQuery) - }) - }) -}) diff --git a/_scripts/widgets/download-modal.js b/_scripts/widgets/download-modal.js index e435920564..bf0fd3a250 100644 --- a/_scripts/widgets/download-modal.js +++ b/_scripts/widgets/download-modal.js @@ -3,19 +3,37 @@ * Code for opening the download overlay widget on the homepage */ -import modal from '~/lib/modal' +function detectDialogSupport () { + return typeof document.createElement('dialog').showModal === 'function' +} + +// Some browsers have styling for the native dialog element but they dont actually support it. +function swapDialogToDiv ($dialog) { + $dialog.outerHTML = $dialog.outerHTML.replace('', '') +} + +function moveToAnchor (id) { + var originalURL = location.href + window.location.href = window.location.href.split('#')[0] + '#' + id + // Remove hash from URL after jumping + window.history.replaceState(null, null, originalURL) +} export function openDownloadOverlay () { - modal.then(($) => { - var $openModal - $openModal = $('.open-modal') - console.log('Open the download overlay!') - $openModal.leanModal({ - // Add this class to download buttons to make them close it. - closeButton: '.close-modal', - disableCloseOnOverlayClick: true - }) - // This is what actually opens the modal overlay. - $openModal.click() - }) + var modalId = 'download-modal' + var $downloadModal = document.getElementById(modalId) + if (!$downloadModal) { + return + } + var supportsDialog = detectDialogSupport() + if (!supportsDialog) { + swapDialogToDiv($downloadModal) + moveToAnchor(modalId) + return + } + $downloadModal.showModal() + var $closeButton = $downloadModal.querySelector('.js-close-button') + $closeButton.addEventListener('click', () => { + $downloadModal.close() + }, { once: true }) } diff --git a/_styles/main.css b/_styles/main.css index 60f630d551..d9388a64da 100644 --- a/_styles/main.css +++ b/_styles/main.css @@ -1106,47 +1106,19 @@ input:focus::placeholder { * Modal Dialogs * ****************/ -.modal { - background-color: #f5f5f5; - border-radius: 4px; - box-shadow: - inset 1px 0 0 0 rgba(255, 255, 255, 0.2), - inset -1px 0 0 0 rgba(255, 255, 255, 0.2), - inset 0 1px 0 0 #fff, - 0 0 0 1px rgba(0, 0, 0, 0.2), - 0 10px 20px rgba(0, 0, 0, 0.19), - 0 6px 6px rgba(0, 0, 0, 0.23); - max-height: 100vh; - max-width: 100vw; - padding: 12px; - z-index: 11000; - display: none; - text-align: center; -} - -.modal p { - text-align: center; - margin: 0 6px; - max-width: 388px; -} - -.modal .row.actions { - margin-top: 24px; - padding: 0; -} - -.modal .row.actions .column { - margin: 6px !important; -} - -@media only screen and (max-width: 425px) { - .dialog { - width: calc(100vw - 32px); - } -} +/* +The use of the [open] selector is to distinguish between +browsers that support the element and therefore +So that for browsers that dont we can have a sensible inline style that can be anchored to. +*/ .dialog { + padding: 24px; + text-align: center; background-color: #f5f5f5; +} +.dialog[open] { + border: none; border-radius: 3px; box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2), @@ -1156,41 +1128,61 @@ input:focus::placeholder { 0 8px 20px 1px rgba(0, 0, 0, 0.14), 0 3px 28px 2px rgba(0, 0, 0, 0.12), 0 5px 10px -3px rgba(0, 0, 0, 0.4); - margin: 0 auto; padding: 12px; padding-top: 24px; + text-align: initial; } -.dialog img { +@media only screen and (max-width: 425px) { + .dialog[open] { + width: calc(100vw - 32px); + } +} + +.dialog[open]::backdrop { + background: rgba(0, 0, 0, 0.7); +} + +.dialog[open] .dialog-title { + font-weight: 700; + font-size: 1em; + text-align: left; + line-height: 24px; + margin: 0; +} + +.dialog[open] img { display: inline-block; margin-right: 12px; user-select: none; vertical-align: top; } -.dialog .content-area { +.dialog[open] .content-area { display: inline-block; width: calc(100% - 48px - 18px); /* Subtract icon width and right margin */ } .dialog p { + margin: 0 auto; + text-align: left; line-height: 24px; - margin: 6px 0 0; max-width: 380px; - text-align: left; } -.dialog p.primary { - font-weight: 700; - margin-top: 0; +.dialog[open] p { + margin: 6px 0 0; } .dialog .action-area { + margin-top: 12px; +} + +.dialog[open] .action-area { display: flex; flex-flow: row; flex-wrap: wrap; justify-content: flex-end; - margin-top: 12px; } .dialog .button { @@ -1209,9 +1201,12 @@ input:focus::placeholder { margin-left: 6px; } -i.fa.fa-close.close-modal { - cursor: pointer; - float: left; +/* If the dialog is inline hide the close button */ +.dialog .close-modal { + display: none; +} +.dialog[open] .close-modal { + display: block; } /********* diff --git a/index.php b/index.php index 3e9a5dcfd4..05888c2f36 100644 --- a/index.php +++ b/index.php @@ -467,21 +467,21 @@ - - + +