html: add conditional polyfill for dialog element

This polyfill comes from Google

1 files changed, 13 insertions, 1 deletions

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 6af387d..a0af582 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -389,10 +389,22 @@
 </footer>
 
 <script>
-// when search is submitted, have submit button animate
+/* when search is submitted, have submit button animate */
 document.getElementById("search_form").onsubmit = function(){
   document.getElementById("search_submit_button").classList.add("loading");
 };
+
+/* conditionally load polyfill for <dialog> */
+if (!(typeof HTMLDialogElement === 'function')) {
+  var js = document.createElement('script');
+  js.src = "/static/dialog-polyfill.js";
+  document.head.appendChild(js);
+  var link = document.createElement('link');
+  link.rel = "stylesheet"
+  link.type = "text/css"
+  link.href= "/static/dialog-polyfill.css";
+  document.head.appendChild(link);
+};
 </script>
 {% if settings.ENABLE_GOATCOUNTER -%}
   {# for local testing: <script>window.goatcounter = {allow_local: true};</script> #}