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 @@ - - + +