diff --git a/index.html b/index.html index 90b5e525f4..206f42dc5c 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,8 @@ gtag('config', 'G-07N0XX7S5Z'); + + @@ -23,6 +25,9 @@
Created by William Kapke
+
+ +
kangax's compat-table applied only to Node.js
githubLearn more
@@ -117653,4 +117658,48 @@

+ + \ No newline at end of file diff --git a/index.pug b/index.pug index 40ad175c9f..4524a8960a 100644 --- 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/multiple-select@1.7.0/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  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/multiple-select@1.7.0/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 index 8b5de8b5ec..d4bcd076b0 100644 --- 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; +}