From 4b75b3aeb6df1d5da0f423b373d4c15db2870fa4 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Sat, 30 May 2020 02:42:08 +0200
Subject: [PATCH] fix: update code to support IE & Edge Legacy

---
 docs/index.html |  9 ++++++---
 docs/script.js  | 13 ++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 87ba315..95cbc0a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -70,7 +70,10 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
     <script>
       window.dataLayer = window.dataLayer || []
-      const gtag = (...args) => window.dataLayer.push(args)
+      // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+      const gtag = function () {
+        window.dataLayer.push(arguments)
+      }
       gtag('js', new Date())
       gtag('config', 'UA-116663597-6')
     </script>
@@ -118,9 +121,9 @@
           Copy to clipboard
         </button>
       </header>
-    
+
       <pre><code id="link-snippet">Oh noes, the JavaScript hasn't loaded!</code></pre>
-    
+
       <h3>Options</h3>
       <form id="theme-form">
         <input type="radio" value="auto" checked name="theme" id="theme-auto" />
diff --git a/docs/script.js b/docs/script.js
index ef7a9d6..cd877a6 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,3 +1,5 @@
+'use strict'
+
 const cdnBase = 'https://cdn.jsdelivr.net/npm/water.css@2/dist/'
 const localBase = './water.css/'
 
@@ -25,7 +27,8 @@ const updateProductHunt = (theme) => {
 }
 
 const updateTheme = () => {
-  const theme = themeForm.theme.value
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+
   const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
   const cdnUrl = `${cdnBase}${fileName}`
   const localUrl = `${localBase}${fileName}`
@@ -40,7 +43,7 @@ const updateTheme = () => {
     table.theme.innerHTML = 'Defaults to dark, but respects user-defined theme settings. Detected via <code>prefers-color-scheme</code>'
     table.browserSupport.innerHTML = `
       All current browsers
-      (<a href="https://caniuse.com/#feat=css-variables" target="_blank">support for CSS Custom Properties</a>)
+      (<a href="https://caniuse.com/#feat=css-variables" target="_blank" rel="noopener">support for CSS Custom Properties</a>)
     `
   } else {
     table.theme.innerText = `Theme is forced to ${theme}`
@@ -49,14 +52,14 @@ const updateTheme = () => {
   }
 }
 
-themeForm.addEventListener('input', updateTheme)
+themeForm.addEventListener('change', updateTheme)
 
 const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
 updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
-prefersColorScheme.addEventListener('change', () => {
+prefersColorScheme.addListener(() => {
   if (themeForm.theme.value !== 'auto') return
   updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
 })
 
 updateTheme()
-startupStylesheet.remove()
+startupStylesheet.parentElement.removeChild(startupStylesheet)