blob: 799fca08cfe2a0545890f9eb16b1ef725ef7344f (
plain) (
blame)
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
|
---
interface Props {
open?: boolean;
}
const { open = false } = Astro.props;
---
<hn-toggle open={open ? '' : undefined}>
<div class="toggle">
<a>{open ? '[-]' : '[+] comments collapsed'}</a>
</div>
<ul class="comment-children">
<slot />
</ul>
</hn-toggle>
<style>
hn-toggle[open] > .toggle {
padding: 0;
background-color: transparent;
margin-bottom: -0.5em;
}
hn-toggle:not([open]) > .toggle {
background-color: rgb(255 247 237);
}
hn-toggle:not([open]) ul {
display: none;
}
.toggle {
font-size: 0.9em;
margin: 1em 0;
padding: 0.3em 0.5em;
border-radius: 4px;
}
a {
color: rgb(51 65 85);
cursor: pointer;
}
</style>
<script>
class HnToggle extends HTMLElement {
#btn = this.querySelector<HTMLAnchorElement>('a')!;
#toggleOpen = this.toggleOpen.bind(this);
connectedCallback() {
this.#btn.addEventListener('click', this.#toggleOpen, false);
}
disconnectedCallback() {
this.#btn.addEventListener('click', this.#toggleOpen);
}
get open() {
return this.hasAttribute('open');
}
set open(value: boolean) {
if (value) {
this.setAttribute('open', '');
this.#btn.textContent = '[-]';
} else {
this.removeAttribute('open');
this.#btn.textContent = '[+] comments collapsed';
}
}
toggleOpen() {
this.open = !this.open;
}
}
customElements.define('hn-toggle', HnToggle);
</script>
|
