compat-table · 80avin · Aug 31, 2024
diff --git a/index.html b/index.html
@@ -15,6 +15,8 @@
       gtag('config', 'G-07N0XX7S5Z');
     </script>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   </head>
 </html>
 <body>
@@ -23,6 +25,9 @@
   <input id="showInfoCode" type="checkbox">
   <label for="showInfoCode">show code examples</label>
   <div id="credits">Created by&nbsp;<a href="https://github.com/williamkapke" target="_blank">William Kapke</a></div>
+  <div class="select-version">
+    <select id="select-version" multiple></select>
+  </div>
   <header class="global"><a id="node-compat-logo" href="./"><img src="logo.png"></a>
     <div id="subheading"><a href="https://github.com/kangax/compat-table" target="_blank">kangax's compat-table</a>&nbsp;applied only to Node.js</div>
     <div id="more"><a href="https://github.com/williamkapke/node-compat-table" target="_blank"><img alt="github" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=">Learn more</a></div>
@@ -117653,4 +117658,48 @@ <h3>
         </tr>
       </table>
     </article>
+  <script src="https://unpkg.com/[email protected]/dist/multiple-select.min.js"></script>
+  <script>
+    const nodeVersions = [...new Set($('th.version').contents().filter((i,n) => n.nodeType===3 && n.textContent.trim()).map((i,e) => e.textContent.trim()).toArray())]
+
+    function toggleNodeVersion(option, selected) {
+      if (option === 'all') {
+        document.querySelectorAll('th.version,td.result').forEach(el => {
+            el.style.display = '';
+        })
+        localStorage.setItem('visible-versions', JSON.stringify(nodeVersions))
+      }
+      if (option === 'none') {
+        document.querySelectorAll('th.version,td.result').forEach(el => {
+            el.style.display = 'none';
+        })
+        localStorage.setItem('visible-versions', '[]')
+      }
+      if (typeof option === 'number') {
+        document .querySelectorAll(`th.version:nth-child(${option+1}), td.result:nth-child(${option+2})`)
+          .forEach(el => {
+            el.style.display = selected ? '' : 'none';
+          })
+        let visibleVersions = JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions
+        if (selected) visibleVersions.push(nodeVersions[option])
+        else visibleVersions = visibleVersions.filter(v => v!== nodeVersions[option])
+        localStorage.setItem('visible-versions', JSON.stringify([ ...new Set(visibleVersions) ]))
+      }
+    }
+    const visibleVersions = new Set(JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions)
+    function initVisibleVersions() {
+      const visibleVersions = new Set(JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions)
+      nodeVersions.forEach((v,i) => {
+        toggleNodeVersion(i, visibleVersions.has(v))
+      })
+    }
+    initVisibleVersions()
+    const selectNodeEl = $('select#select-version').multipleSelect({
+      placeholder: 'Node Versions',
+      data: nodeVersions.map((text, i) => ({ text, value: i, selected: visibleVersions.has(text) })),
+      onClick: (args) => toggleNodeVersion(args.value, args.selected),
+      onCheckAll: () => toggleNodeVersion('all'),
+      onUncheckAll: () => toggleNodeVersion('none'),
+    })
+  </script>
 </body>
diff --git a/index.pug b/index.pug
@@ -15,6 +15,8 @@ html
 
       gtag('config', 'G-07N0XX7S5Z');
     link(rel="stylesheet", href="style.css")
+    link(rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css")
+    script(src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous")
 body
   if (flaggable)
     input#flagged(type='checkbox')
@@ -26,6 +28,8 @@ body
   #credits
     | Created by&nbsp;
     a(href='https://github.com/williamkapke', target="_blank") William Kapke
+  div.select-version
+    select#select-version(multiple)
 
   header.global
     a#node-compat-logo(href='./')
@@ -102,3 +106,47 @@ body
 
   each version in Object.keys(testers)
     +article(version)
+  script(src="https://unpkg.com/[email protected]/dist/multiple-select.min.js")
+  script.
+    const nodeVersions = [...new Set($('th.version').contents().filter((i,n) => n.nodeType===3 && n.textContent.trim()).map((i,e) => e.textContent.trim()).toArray())]
+
+    function toggleNodeVersion(option, selected) {
+      if (option === 'all') {
+        document.querySelectorAll('th.version,td.result').forEach(el => {
+            el.style.display = '';
+        })
+        localStorage.setItem('visible-versions', JSON.stringify(nodeVersions))
+      }
+      if (option === 'none') {
+        document.querySelectorAll('th.version,td.result').forEach(el => {
+            el.style.display = 'none';
+        })
+        localStorage.setItem('visible-versions', '[]')
+      }
+      if (typeof option === 'number') {
+        document .querySelectorAll(`th.version:nth-child(${option+1}), td.result:nth-child(${option+2})`)
+          .forEach(el => {
+            el.style.display = selected ? '' : 'none';
+          })
+        let visibleVersions = JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions
+        if (selected) visibleVersions.push(nodeVersions[option])
+        else visibleVersions = visibleVersions.filter(v => v!== nodeVersions[option])
+        localStorage.setItem('visible-versions', JSON.stringify([ ...new Set(visibleVersions) ]))
+      }
+    }
+    const visibleVersions = new Set(JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions)
+    function initVisibleVersions() {
+      const visibleVersions = new Set(JSON.parse(localStorage.getItem('visible-versions', 'null')) || nodeVersions)
+      nodeVersions.forEach((v,i) => {
+        toggleNodeVersion(i, visibleVersions.has(v))
+      })
+    }
+    initVisibleVersions()
+    const selectNodeEl = $('select#select-version').multipleSelect({
+      placeholder: 'Node Versions',
+      data: nodeVersions.map((text, i) => ({ text, value: i, selected: visibleVersions.has(text) })),
+      onClick: (args) => toggleNodeVersion(args.value, args.selected),
+      onCheckAll: () => toggleNodeVersion('all'),
+      onUncheckAll: () => toggleNodeVersion('none'),
+    })
+
diff --git a/style.css b/style.css
@@ -46,6 +46,7 @@ label[for=flagged] {
 }
 label[for=flagged],
 label[for=showInfoCode],
+div.select-version,
 #credits {
   z-index: 101;
   position: fixed;
@@ -312,3 +313,25 @@ table.results {
 tr:hover > td > .anchor {
   visibility: visible;
 }
+
+select#select-version {
+  right: 600px;
+  width: 150px;
+}
+select[multiple] {
+  height: 16px;
+}
+select[multiple]:focus {
+  height: auto;
+}
+div.select-version {
+  right: 540px;
+  font-size: 12px;
+}
+button.ms-choice {
+  height: 16px;
+}
+button.ms-choice > span {
+  font-size: 14px;
+  line-height: 14px;
+}