Skip to content

Commit df67ec9

Browse files
wooormwooorm
committed
Refactor code-style
1 parent 546e250 commit df67ec9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1941
-1739
lines changed

‎example/viewscreen/index.html

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
<!doctype html>
22
<html lang=en>
33
<meta charset=utf8>
4-
<meta content=width=device-width,initial-scale=1 name=viewport>
4+
<meta content=initial-scale=1,width=device-width name=viewport>
55
<title>example</title>
6-
<link rel=stylesheet href=https://esm.sh/github-markdown-css@5/github-markdown.css>
6+
<link href=https://esm.sh/github-markdown-css@5/github-markdown.css rel=stylesheet>
77
<style>
88
body {
9-
margin: 0;
10-
11-
/* Dark mode */
12-
--color-danger-subtle: rgba(248,81,73,0.1);
9+
--color-accent-muted: rgba(56,139,253,0.4);
10+
--color-accent-subtle: rgba(56,139,253,0.1);
1311
--color-danger-muted: rgba(248,81,73,0.4);
12+
--color-danger-subtle: rgba(248,81,73,0.1);
1413
--color-fg-default: #e6edf3;
1514

16-
--color-accent-subtle: rgba(56,139,253,0.1);
17-
--color-accent-muted: rgba(56,139,253,0.4);
15+
margin: 0;
1816
}
1917

2018
.flash {
@@ -24,8 +22,8 @@
2422
border-style: solid;
2523
border-width: 1px;
2624
color: var(--color-fg-default);
27-
padding: 20px 16px;
2825
margin: 16px 0;
26+
padding: 20px 16px;
2927
position: relative;
3028
}
3129

@@ -41,9 +39,9 @@
4139

4240
.markdown-body {
4341
box-sizing: border-box;
44-
min-width: 200px;
45-
max-width: 980px;
4642
margin: 0 auto;
43+
max-width: 980px;
44+
min-width: 200px;
4745
padding: 45px;
4846
}
4947

@@ -54,13 +52,13 @@
5452
}
5553

5654
.render-viewer {
57-
border-radius: 3px;
58-
background-color: transparent;
59-
display: block;
60-
width: 100%;
6155
aspect-ratio: 8 / 5;
56+
background-color: transparent;
57+
border-radius: 3px;
6258
border: 0;
59+
display: block;
6360
margin: calc(1em + 1ex) 0;
61+
width: 100%;
6462
}
6563
</style>
6664
<div class=markdown-body>
@@ -629,7 +627,7 @@ <h1>STL</h1>
629627
endfacet
630628
endsolid
631629
</code></pre>
632-
<!-- From: https://people.sc.fsu.edu/~jburkardt/data/stla/stla.html -->
630+
<!-- From: <https://people.sc.fsu.edu/~jburkardt/data/stla/stla.html> -->
633631
<pre><code class=language-stl>solid MYSOLID
634632
facet normal -0.470578 -0.335539 0.816070
635633
outer loop
@@ -9363,4 +9361,4 @@ <h1>STL</h1>
93639361
endsolid MYSOLID
93649362
</code></pre>
93659363
</div>
9366-
<script type=module src=outside.min.js></script>
9364+
<script src=outside.min.js type=module></script>

‎example/viewscreen/lib/outside.js

+31-17
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
/* eslint-env browser */
22

33
/**
4-
* @typedef {import('./shared.js').ToViewscreenMessage} ToViewscreenMessage
5-
* @typedef {import('./shared.js').FromViewscreenMessage} FromViewscreenMessage
4+
* @import {FromViewscreenMessage, ToViewscreenMessage} from './shared.js'
65
*/
76

8-
const hasOwn = {}.hasOwnProperty
9-
107
/** @type {Record<string, string>} */
118
const types = {
129
geojson: '/viewscreen-geojson.html',
@@ -27,9 +24,11 @@ window.addEventListener(
2724
* Handle a message from any viewscreen iframe.
2825
*
2926
* @param {MessageEvent<FromViewscreenMessage>} event
27+
* Event.
28+
* @returns {undefined}
29+
* Nothing.
3030
*/
3131
function (event) {
32-
// eslint-disable-next-line unicorn/prefer-switch
3332
if (event.data.type === 'resize') {
3433
// We use unique names, but not bad to handle arrays.
3534
const nodes = document.getElementsByName(event.data.id)
@@ -65,11 +64,19 @@ const nodes = Array.from(document.body.querySelectorAll('code'))
6564
const prefix = 'language-'
6665

6766
for (const node of nodes) {
68-
const className = Array.from(node.classList).find((d) => d.startsWith(prefix))
69-
if (!className) continue
70-
const name = className.slice(prefix.length)
67+
/** @type {string | undefined} */
68+
let name
69+
70+
for (const className of node.classList) {
71+
if (className.startsWith(prefix)) {
72+
name = className.slice(prefix.length)
73+
break
74+
}
75+
}
76+
77+
if (!name) continue
7178

72-
const specifier = hasOwn.call(types, name) ? types[name] : undefined
79+
const specifier = Object.hasOwn(types, name) ? types[name] : undefined
7380

7481
if (!specifier) continue
7582

@@ -92,14 +99,21 @@ for (const node of nodes) {
9299
// Hide for now.
93100
iframe.setAttribute('style', 'opacity:0')
94101

95-
iframe.addEventListener('load', function () {
96-
const otherWindow = iframe.contentWindow
97-
if (!otherWindow) throw new Error('Expected `contentWindow`')
98-
/** @type {ToViewscreenMessage} */
99-
const message = {type: 'content', id, value}
100-
iframe.setAttribute('style', '')
101-
otherWindow.postMessage(message)
102-
})
102+
iframe.addEventListener(
103+
'load',
104+
/**
105+
* @returns {undefined}
106+
* Nothing.
107+
*/
108+
function () {
109+
const otherWindow = iframe.contentWindow
110+
if (!otherWindow) throw new Error('Expected `contentWindow`')
111+
/** @type {ToViewscreenMessage} */
112+
const message = {id, type: 'content', value}
113+
iframe.setAttribute('style', '')
114+
otherWindow.postMessage(message)
115+
}
116+
)
103117

104118
const scope =
105119
node.parentElement && node.parentElement.nodeName === 'PRE'

‎example/viewscreen/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
},
4747
"type": "module",
4848
"xo": {
49-
"prettier": true
49+
"prettier": true,
50+
"rules": {
51+
"unicorn/prefer-switch": "off"
52+
}
5053
}
5154
}

‎example/viewscreen/viewscreen-geojson.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!doctype html>
22
<html lang=en>
3-
<meta content=width=device-width,initial-scale=1 name=viewport>
3+
<meta content=initial-scale=1,width=device-width name=viewport>
44
<meta charset=utf8>
55
<title>viewscreen: geojson</title>
6-
<link rel=stylesheet href=https://esm.sh/leaflet@1.9/dist/leaflet.css>
7-
<link rel=stylesheet href=https://esm.sh/leaflet.markercluster@1.5/dist/MarkerCluster.css>
8-
<link rel=stylesheet href=https://esm.sh/leaflet.markercluster@1.5/dist/MarkerCluster.Default.css>
6+
<link href=https://esm.sh/leaflet@1.9/dist/leaflet.css rel=stylesheet>
7+
<link href=https://esm.sh/leaflet.markercluster@1.5/dist/MarkerCluster.css rel=stylesheet>
8+
<link href=https://esm.sh/leaflet.markercluster@1.5/dist/MarkerCluster.Default.css rel=stylesheet>
99
<style>
1010
:root {
11+
color-scheme: light;
1112
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
1213
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
13-
color-scheme: light;
1414
}
1515

1616
@media (prefers-color-scheme: dark) {
@@ -29,8 +29,8 @@
2929
}
3030

3131
body {
32-
margin: 0;
3332
aspect-ratio: 8 / 5;
33+
margin: 0;
3434
}
3535
</style>
3636
<script type=module>
@@ -43,13 +43,13 @@
4343

4444
const viewer = viewscreenGeojson(document.body, {
4545
onReject(value) {
46-
parent.postMessage({type: 'reject', id, value})
46+
parent.postMessage({id, type: 'reject', value})
4747
},
4848
onSizeSuggestion(width, height) {
49-
parent.postMessage({type: 'resize', id, value: {width, height}})
49+
parent.postMessage({id, type: 'resize', value: {height, width}})
5050
},
5151
onResolve() {
52-
parent.postMessage({type: 'resolve', id})
52+
parent.postMessage({id, type: 'resolve'})
5353
}
5454
})
5555

‎example/viewscreen/viewscreen-mermaid.html

+22-24
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
22
<html lang=en>
3-
<meta content=width=device-width,initial-scale=1 name=viewport>
3+
<meta content=initial-scale=1,width=device-width name=viewport>
44
<meta charset=utf8>
55
<title>viewscreen: mermaid</title>
66
<style>
77
:root {
8+
color-scheme: light;
89
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
910
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
10-
color-scheme: light;
1111

1212
--color-accent-fg: #0969da;
1313
--color-btn-active-bg: hsl(220, 14%, 93%);
@@ -49,32 +49,30 @@
4949
}
5050

5151
button {
52-
position: relative;
52+
appearance: none;
53+
background-color: var(--color-btn-bg);
54+
border-radius: 6px;
55+
border: 1px solid var(--color-btn-border);
56+
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
57+
color: var(--color-btn-text);
58+
cursor: pointer;
5359
display: inline-block;
54-
padding: 5px 7px;
5560
font-size: 14px;
5661
font-weight: 500;
5762
line-height: 20px;
58-
white-space: nowrap;
59-
vertical-align: middle;
60-
cursor: pointer;
61-
user-select: none;
62-
border: 1px solid;
63-
border-radius: 6px;
64-
appearance: none;
65-
66-
color: var(--color-btn-text);
67-
background-color: var(--color-btn-bg);
68-
border-color: var(--color-btn-border);
69-
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
63+
padding: 5px 7px;
64+
position: relative;
7065
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
7166
transition-property: color, background-color, box-shadow, border-color;
67+
user-select: none;
68+
vertical-align: middle;
69+
white-space: nowrap;
7270
}
7371

7472
button:disabled {
75-
color: var(--color-primer-fg-disabled);
7673
background-color: var(--color-btn-bg);
7774
border-color: var(--color-btn-border);
75+
color: var(--color-primer-fg-disabled);
7876
}
7977

8078
button:hover {
@@ -84,9 +82,9 @@
8482
}
8583

8684
button:focus {
85+
box-shadow: none;
8786
outline: 2px solid var(--color-accent-fg);
8887
outline-offset: -2px;
89-
box-shadow: none;
9088
}
9189

9290
button:active {
@@ -100,19 +98,19 @@
10098
}
10199

102100
.octicon {
103-
margin-right: 4px;
104101
fill: currentColor; /* Inherit from (disabled) buttons. */
102+
margin-right: 4px;
105103
vertical-align: text-bottom;
106104
}
107105

108106
.panel {
109-
position: absolute;
110-
z-index: 1;
111107
bottom: 0.5ex;
112-
right: 0.5ex;
113108
display: grid;
114-
grid-template-columns: 1fr 1fr 1fr;
115109
gap: 0.5ex;
110+
grid-template-columns: 1fr 1fr 1fr;
111+
position: absolute;
112+
right: 0.5ex;
113+
z-index: 1;
116114
}
117115

118116
.up { grid-column: 2; grid-row: 1; }
@@ -133,7 +131,7 @@
133131

134132
const viewer = viewscreenMermaid(document.body, {
135133
onSizeSuggestion(width, height) {
136-
parent.postMessage({type: 'resize', id, value: {width, height}})
134+
parent.postMessage({id, type: 'resize', value: {height, width}})
137135
}
138136
})
139137

0 commit comments

Comments
 (0)