From 434ef7a36afe203a63e976477f1dc01b8c7d5cb0 Mon Sep 17 00:00:00 2001
From: mtkennerly <mtkennerly@gmail.com>
Date: Tue, 16 Jul 2019 04:49:15 -0400
Subject: [PATCH] Incorporate dialog polyfill for better browser support

---
 index.html        | 2 ++
 package-lock.json | 5 +++++
 package.json      | 1 +
 src/player.ts     | 4 ++++
 task-assets.js    | 4 ++++
 5 files changed, 16 insertions(+)

diff --git a/index.html b/index.html
index 8d3a57f..1446bee 100644
--- a/index.html
+++ b/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>
 
diff --git a/package-lock.json b/package-lock.json
index f8e3b4e..6fe698a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 74bd434..0a24355 100644
--- a/package.json
+++ b/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": {
diff --git a/src/player.ts b/src/player.ts
index f8c7bfa..1bfede9 100644
--- a/src/player.ts
+++ b/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) {
diff --git a/task-assets.js b/task-assets.js
index 750d003..2422134 100644
--- a/task-assets.js
+++ b/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"
+);