Incorporate dialog polyfill for better browser support

index.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="/bosca-coeil-js/assets/mdl-selectfield.min.css">
     <script defer src="/bosca-coeil-js/assets/mdl-selectfield.min.js"></script>
 
+    <link rel="stylesheet" href="/bosca-coeil-js/assets/dialog-polyfill.min.css">
+
     <link rel="stylesheet" href="/bosca-coeil-js/index.css">
 </head>
 

package-lock.json

@@ -1665,6 +1665,11 @@
       "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
       "dev": true
     },
+    "dialog-polyfill": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.5.0.tgz",
+      "integrity": "sha512-fOj68T8KB6UIsDFmK7zYbmORJMLYkRmtsLM1W6wbCVUWu4Hdcud5bqbvuueTxO84JXtK9HcpCHV9vNwlWUdCIw=="
+    },
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",

package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/mtkennerly/bosca-coeil-js#readme",
   "dependencies": {
+    "dialog-polyfill": "^0.5.0",
     "tone": "^13.4.9"
   },
   "devDependencies": {

src/player.ts

@@ -1,5 +1,6 @@
 import * as tone from 'tone';
 import { getSampler } from "./index";
+const dialogPolyfill = require("dialog-polyfill");
 
 let playing = false;
 const letters = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
@@ -234,6 +235,9 @@ function onLoad() {
     let helpButton = document.getElementById("helpButton");
     let helpModal = document.getElementById("helpModal");
     if (helpButton !== null && helpModal !== null) {
+        if (!(helpModal as any).showModal) {
+            dialogPolyfill.default.registerDialog(helpModal);
+        }
         helpButton.addEventListener("click", () => { (helpModal as any).showModal(); });
         const helpModalClose = helpModal.querySelector(".close");
         if (helpModalClose !== null) {

task-assets.js

@@ -34,3 +34,7 @@ download(
     `${assets}/mdl-selectfield.min.js`,
     "https://cdn.rawgit.com/kybarg/mdl-selectfield/mdl-menu-implementation/mdl-selectfield.min.js"
 );
+download(
+    `${assets}/dialog-polyfill.min.css`,
+    "https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.css"
+);