forked from williamkapke/node-compat-table
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.pug
152 lines (145 loc) · 7.36 KB
/
index.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
doctype html
html
head
title
block title
| Node.js ES2015/ES6, ES2016 and ES2017 support
meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
link(href='https://fonts.googleapis.com/css?family=Raleway:400,700',rel='stylesheet',type='text/css')
link(href='favico.ico',rel='shortcut icon')
script(async,src="https://www.googletagmanager.com/gtag/js?id=G-07N0XX7S5Z")
script.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
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')
label(for='flagged') requires
a(href='https://nodejs.org/en/docs/es6/', target="_blank") harmony
| flag ⚐
input#showInfoCode(type='checkbox')
label(for='showInfoCode') show code examples
#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='./')
img(src='logo.png')
#subheading
a(href='https://github.com/kangax/compat-table', target="_blank") kangax's compat-table
| applied only to Node.js
#more
a(href='https://github.com/williamkapke/node-compat-table', target="_blank")
img(alt='github' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=')
| Learn more
mixin header(esVersion)
header
h1: a(href="#"+esVersion) Node.js #{esVersion} Support
table.headings
tr
each details, nodeVersion in headers
th.version(class='v' + details.version.split('.')[0])=details.version
.details
small (these versions have identical results)
each detail in details.includes
table: tr
td=detail.version
td=detail.engine
if(details.super)
sup=details.super
if (flaggable)
sub.flagged=percent(nodeVersion, esVersion) + '% complete'
sub.unflagged=percent(nodeVersion, esVersion, true) + '% complete'
mixin article(esVersion)
article(id=esVersion)
+header(esVersion)
each obj1, category in testers[esVersion]
- category2 = esVersion+'-'+category.replace(/\W/g, '-')
table.results
caption
h2.category
.hash(id=category2)
a(href='#'+category2)=category
each obj2, subcategory in obj1
- subcategory2 = [category2,subcategory.replace(/\W/g, '-')].join('-')
tr
td.feature.sub(colspan=Object.keys(headers).length+1)
h3
.hash(id=subcategory2)
a(href='#'+subcategory2)=subcategory
each obj3, subsubcategory in obj2
- subsubcategory2 = [subcategory2,subsubcategory.replace(/\W/g, '-')].join('-')
tr
td.feature.subsub
.hash(id=subsubcategory2)
a.anchor(href='#'+subsubcategory2) §
a(href=obj3.spec)=subsubcategory
if obj3.code
.info
| ?
.fn
| function(){
.code=obj3.code
| }
each nodeVersion in Object.keys(headers)
- classes = requiresFlag(nodeVersion, esVersion, obj3.path)? 'flag' : ''
td.result(class=classes) !{results(nodeVersion, esVersion, obj3.path)}
if obj3.code
tr.codeExample
td
td(colspan=Object.keys(headers).length)
.fn
| function(){
.code=obj3.code
| }
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'),
})