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

Author: NickColley

_scripts/lib/modal.js

@@ -3,18 +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('<dialog', '<div').replace('</dialog>', '</div>')
+}
+
+function moveToAnchor (id) {
+    const 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(($) => {
-        const $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()
-    })
+    const modalId = 'download-modal'
+    const $downloadModal = document.getElementById(modalId)
+    if (!$downloadModal) {
+        return
+    }
+    const supportsDialog = detectDialogSupport()
+    if (!supportsDialog) {
+        swapDialogToDiv($downloadModal)
+        moveToAnchor(modalId)
+        return
+    }
+    $downloadModal.showModal()
+    const $closeButton = $downloadModal.querySelector('.js-close-button')
+    $closeButton.addEventListener('click', () => {
+        $downloadModal.close()
+    }, { once: true })
 }

_scripts/widgets/download-modal.js

@@ -1018,47 +1018,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),
@@ -1068,41 +1040,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;
+}
+
+@media only screen and (max-width: 425px) {
+  .dialog[open] {
+    width: calc(100vw - 32px);
+  }
 }
 
-.dialog img {
+.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 {
@@ -1121,9 +1113,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;
 }
 
 /*********

_styles/main.css

@@ -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/classList.js@1.1.20170427/classList.min.js"></script><![endif]-->
 <?php
   include $template['footer'];