Incorporate dialog polyfill for better browser support

This commit is contained in:
mtkennerly 2019-07-16 04:49:15 -04:00
parent 3087228256
commit 434ef7a36a
5 changed files with 16 additions and 0 deletions

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

5
package-lock.json generated

@ -1665,6 +1665,11 @@
"integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=", "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
"dev": true "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": { "diff": {
"version": "3.5.0", "version": "3.5.0",
"resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",

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

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

@ -34,3 +34,7 @@ download(
`${assets}/mdl-selectfield.min.js`, `${assets}/mdl-selectfield.min.js`,
"https://cdn.rawgit.com/kybarg/mdl-selectfield/mdl-menu-implementation/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"
);