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
elementary · Jul 24, 2024 · 88c8463 · 88c8463
1 parent 7087e0f
commit 88c8463
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 88 deletions.
diff --git a/_scripts/lib/modal.js b/_scripts/lib/modal.js
diff --git a/_scripts/widgets/download-modal.js b/_scripts/widgets/download-modal.js
@@ -3,19 +3,43 @@
  * 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('<dialog', '<div').replace('</dialog>', '</div>')
+}
+
+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
+    }
+    // If native modal functionality does not exist then assume
+    // The dialog is being show at the bottom of the screen and jump to it.
+    if (typeof $downloadModal.showModal !== 'function') {
+        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
@@ -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 <dialog> element and therefore <dialog open>
+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
@@ -467,21 +467,21 @@
 
     <span id="translate-download" style="display:none;" hidden>Download elementary OS</span>
     <span id="translate-purchase" style="display:none;" hidden>Purchase elementary OS</span>
-    <div id="download-modal" class="dialog modal">
-      <img alt="Download elementary OS icon" src="images/icons/apps/48/system-os-installer.svg">
+    <dialog id="download-modal" class="dialog" aria-labelledby="download-modal-title">
+      <img src="/images/icons/apps/48/system-os-installer.svg" alt=""/>
       <div class="content-area">
-        <p class="primary">Choose a Download</p>
+        <h2 id="download-modal-title" class="dialog-title">Choose a Download</h2>
         <p>Download from a localized server or by magnet link. For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
       </div>
       <div class="action-area">
-        <a class="button clickable close-modal">Close</a>
+        <button class="js-close-button button clickable close-modal">Close</button>
         <div class="linked">
           <a class="button suggested-action download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
           <a class="button suggested-action download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
         </div>
       </div>
-    </div>
-    <a style="display:none;" class="open-modal" href="#download-modal"></a>
+    </dialog>
+
     <!--[if lt IE 10]><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/eligrey/[email protected]/classList.min.js"></script><![endif]-->
 <?php
   include $template['footer'];