userscripts/src/ext/shared/Components/Dropdown.svelte at main · Dirtylowdown/userscripts · GitHub

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
void
delete


	export let icon = "plus";
	export let disabled = false;
	export let title;

	let active = false;

	function dropdownClick(event) {
		// button clicks toggle active var which controls dropdown display
		active = !active;
		// add event listener to body when dropdown opens
		// this enables off-clicking to close dropdown
		// add named function so it can be removed when dropdown closes
		document.body.addEventListener("click", function _a(e) {
			// button click events bubble to document body
			// can use to determine if button triggered body event listener func
			// event.target = button, e.target = body event listener trigger el
			if (e.target !== event.target) {
				// the body event listener not triggered by button
				// if omitted, dropdown would close immediately
				active = false;
				document.body.removeEventListener("click", _a);
			} else if (!active) {
				// !active normally means dropdown is not open
				// however, since active is toggled before this func is run
				// in this case !active means dropdown is open

				// remove body event listener when dropdown is closed by button
				// if omitted, multiple body event listeners would be added
				document.body.removeEventListener("click", _a);
			}
		});
	}
</script>

<div class:active>
	<IconButton {icon} on:click={dropdownClick} {title} {disabled} />
	<ul>
		<slot>
			<li>At least one slot is required...</li>
		</slot>
	</ul>
</div>

<style>
	div {
		position: relative;
		z-index: 86;
	}

	ul {
		background-color: var(--color-black);
		border: 1px solid black;
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		color: var(--text-color-secondary);
		display: none;
		font: var(--text-medium);
		left: 0;
		padding: 0.125rem;
		position: absolute;
		top: 100%;
		white-space: nowrap;
	}

	.active ul {
		display: flex;
		flex-direction: column;
	}

	ul :global(li) {
		border-radius: 2px;
		cursor: pointer;
		padding: 0.5rem 1rem;
	}

	.active :global(button svg) {
		opacity: 1;
	}

	ul :global(li.separator) {
		background-color: black;
		height: 1px;
		margin: 0.25rem 0.5rem;
		padding: 0;
	}

	ul :global(li.selected) {
		color: var(--text-color-disabled);
		pointer-events: none;
	}

	ul :global(li:hover:not(.separator)) {
		background-color: var(--color-blue);
		color: var(--color-black);
	}

	ul :global(button) {
		text-align: left;
		background: none;
		width: 100%;
		border-radius: 2px;
		padding: 0.5rem 1rem;
	}

	ul :global(button.selected) {
		color: var(--text-color-disabled);
	}

	ul :global(button:hover) {
		background-color: var(--color-blue);
		color: var(--color-black);
	}

	ul :global(button:active) {
		opacity: 0.75;
	}
</style>