-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbuilder.html
More file actions
243 lines (228 loc) · 18.7 KB
/
Copy pathbuilder.html
File metadata and controls
243 lines (228 loc) · 18.7 KB
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Bar Builder</title>
<link rel="stylesheet" href="/admin-bar.css" />
<script type="module" src="/src/components/AdminBar.ts"></script>
<script type="module" src="/src/components/AdminBarButton.ts"></script>
<script type="module" src="/src/components/AdminBarText.ts"></script>
</head>
<body>
<span id="admin-bar-autorender-target"></span>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto dolorem ea hic magnam optio quae quaerat quis reprehenderit sequi. Architecto autem delectus nam officia quas sint voluptates voluptatibus. Ex!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae cumque cupiditate doloremque dolorum eligendi et facere illum in ipsam maiores officiis provident quaerat quam, quibusdam quod sequi tempora totam!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cum enim eos esse exercitationem inventore ipsa non omnis placeat quam, quasi rem reprehenderit saepe sapiente soluta sunt tempora temporibus voluptatem.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequuntur culpa dignissimos dolor dolorem fugiat fugit hic inventore laboriosam, minus nesciunt officia pariatur placeat, repellendus saepe sapiente sed. Animi, odit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto consequuntur cumque distinctio doloremque dolores eaque enim facilis mollitia nam, obcaecati porro quibusdam quidem vel velit voluptates voluptatum! Molestiae, repellendus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque et, inventore natus nobis odit quos sit tempore. Cupiditate distinctio itaque obcaecati sapiente ut voluptate voluptatem. Maxime omnis quas repellat ut.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dignissimos et, eveniet fuga ipsa iure libero molestias nisi nobis obcaecati perspiciatis, quisquam ratione repudiandae sit sunt! Aliquid amet aspernatur pariatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis cumque ea eveniet excepturi explicabo molestias, possimus quidem recusandae totam! A cupiditate distinctio dolor, eveniet numquam totam ullam ut vitae?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi cupiditate deserunt, dicta ea eius excepturi fugit laboriosam laborum libero mollitia nam nihil, officiis possimus, quasi quo repellendus unde ut.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto cumque deserunt eius, eos eum fugit hic itaque iure laboriosam molestiae neque, nulla quae quasi quos soluta temporibus veniam voluptates.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores corporis dolor eveniet explicabo, fugit necessitatibus quam! Commodi consequatur debitis eum laborum, laudantium molestias nulla perferendis qui, repudiandae sapiente tempore voluptas.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos est, incidunt magnam non odit reiciendis temporibus. Asperiores consectetur dolore pariatur recusandae sint vitae. Autem facere laborum provident quod ut vel!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aspernatur autem beatae commodi cum doloribus ea error illo itaque iure, nihil porro quia, repellendus sunt tenetur velit voluptas voluptatem.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dolore dolores eos esse, et laudantium necessitatibus praesentium. Alias debitis eligendi et fuga laborum modi nulla odio placeat quod, sed soluta?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at, culpa dolorum ea eaque facere fugit, ipsa iste iusto natus neque perspiciatis quia repellat repellendus similique vitae voluptate. Aspernatur, necessitatibus?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus expedita harum iure laboriosam numquam officia quis sequi vel, voluptas. Eum excepturi itaque laboriosam minus modi nulla officiis sint voluptate?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor explicabo ipsa magnam possimus? Asperiores consectetur dolores, fugiat harum labore magni molestiae nisi placeat provident, repudiandae, sequi unde vitae voluptatem!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores, consectetur consequatur deleniti dolore eius error esse excepturi hic ipsam iste nisi possimus quo repellendus soluta velit, voluptatibus? Iure, nesciunt?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eum laborum minima odio quae quidem quis. Accusantium ad, aliquid delectus earum in laboriosam numquam quod similique tenetur, ut voluptas.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet commodi consectetur dolor dolorem dolorum eaque, ex itaque iusto minima molestias nesciunt nobis perferendis quo rem sunt velit, voluptas voluptatum!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores autem delectus deserunt eaque, eius eligendi esse est expedita ipsum iste laudantium magnam necessitatibus nostrum quis totam veniam vero, voluptates?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis culpa, debitis dicta dolore dolores enim et fugit illum iusto laboriosam minus quisquam quod, recusandae, rerum sapiente similique tempora voluptatum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque aut commodi delectus illo nemo nisi numquam, quisquam quo rem tempore, velit voluptate voluptatibus! Blanditiis eos ex laudantium quam repellat!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aliquid aut cupiditate debitis delectus iure minus possimus rem. Accusamus alias corporis distinctio est fuga id ipsum nemo odit, possimus quis?</li>
</ul>
<span id="admin-bar-split-target"></span>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto dolorem ea hic magnam optio quae quaerat quis reprehenderit sequi. Architecto autem delectus nam officia quas sint voluptates voluptatibus. Ex!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae cumque cupiditate doloremque dolorum eligendi et facere illum in ipsam maiores officiis provident quaerat quam, quibusdam quod sequi tempora totam!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cum enim eos esse exercitationem inventore ipsa non omnis placeat quam, quasi rem reprehenderit saepe sapiente soluta sunt tempora temporibus voluptatem.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequuntur culpa dignissimos dolor dolorem fugiat fugit hic inventore laboriosam, minus nesciunt officia pariatur placeat, repellendus saepe sapiente sed. Animi, odit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto consequuntur cumque distinctio doloremque dolores eaque enim facilis mollitia nam, obcaecati porro quibusdam quidem vel velit voluptates voluptatum! Molestiae, repellendus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque et, inventore natus nobis odit quos sit tempore. Cupiditate distinctio itaque obcaecati sapiente ut voluptate voluptatem. Maxime omnis quas repellat ut.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dignissimos et, eveniet fuga ipsa iure libero molestias nisi nobis obcaecati perspiciatis, quisquam ratione repudiandae sit sunt! Aliquid amet aspernatur pariatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis cumque ea eveniet excepturi explicabo molestias, possimus quidem recusandae totam! A cupiditate distinctio dolor, eveniet numquam totam ullam ut vitae?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi cupiditate deserunt, dicta ea eius excepturi fugit laboriosam laborum libero mollitia nam nihil, officiis possimus, quasi quo repellendus unde ut.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto cumque deserunt eius, eos eum fugit hic itaque iure laboriosam molestiae neque, nulla quae quasi quos soluta temporibus veniam voluptates.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores corporis dolor eveniet explicabo, fugit necessitatibus quam! Commodi consequatur debitis eum laborum, laudantium molestias nulla perferendis qui, repudiandae sapiente tempore voluptas.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos est, incidunt magnam non odit reiciendis temporibus. Asperiores consectetur dolore pariatur recusandae sint vitae. Autem facere laborum provident quod ut vel!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aspernatur autem beatae commodi cum doloribus ea error illo itaque iure, nihil porro quia, repellendus sunt tenetur velit voluptas voluptatem.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dolore dolores eos esse, et laudantium necessitatibus praesentium. Alias debitis eligendi et fuga laborum modi nulla odio placeat quod, sed soluta?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at, culpa dolorum ea eaque facere fugit, ipsa iste iusto natus neque perspiciatis quia repellat repellendus similique vitae voluptate. Aspernatur, necessitatibus?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus expedita harum iure laboriosam numquam officia quis sequi vel, voluptas. Eum excepturi itaque laboriosam minus modi nulla officiis sint voluptate?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor explicabo ipsa magnam possimus? Asperiores consectetur dolores, fugiat harum labore magni molestiae nisi placeat provident, repudiandae, sequi unde vitae voluptatem!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores, consectetur consequatur deleniti dolore eius error esse excepturi hic ipsam iste nisi possimus quo repellendus soluta velit, voluptatibus? Iure, nesciunt?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eum laborum minima odio quae quidem quis. Accusantium ad, aliquid delectus earum in laboriosam numquam quod similique tenetur, ut voluptas.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet commodi consectetur dolor dolorem dolorum eaque, ex itaque iusto minima molestias nesciunt nobis perferendis quo rem sunt velit, voluptas voluptatum!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores autem delectus deserunt eaque, eius eligendi esse est expedita ipsum iste laudantium magnam necessitatibus nostrum quis totam veniam vero, voluptates?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis culpa, debitis dicta dolore dolores enim et fugit illum iusto laboriosam minus quisquam quod, recusandae, rerum sapiente similique tempora voluptatum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque aut commodi delectus illo nemo nisi numquam, quisquam quo rem tempore, velit voluptate voluptatibus! Blanditiis eos ex laudantium quam repellat!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aliquid aut cupiditate debitis delectus iure minus possimus rem. Accusamus alias corporis distinctio est fuga id ipsum nemo odit, possimus quis?</li>
</ul>
<script type="module">
/**
* Embeds an `<admin-bar>` element upon load.
*/
import {AdminBarBuilder} from './src/utils/AdminBarBuilder.ts';
const builderData = {
buttons: [
{
buttonHref: '/',
labelText: 'Dashboard',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.93 228.72" style="width: 16px; height: auto;"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>edit</title><path class="cls-1" d="M227.35,48.35a14.64,14.64,0,0,0-2.79-17L197.84,4.58a15.47,15.47,0,0,0-17.42-3.17l-5.95,4.74L14.29,166.33,0,228.72l62.39-14.29L222.57,54.26ZM32.59,210.92a30,30,0,0,0-14.84-14.58l5.53-24.15,14.14,6.91,13.06,13.06,6.86,13,0,0Z"/></svg>',
type: 'button',
},
{
labelText: 'Edit',
// Icon will not render due to `<script>` tag
icon: '<svg><p>Hahaha</p><script>console.log("This should NOT fire!")<' + '/script></svg>',
popover: [
{
textContent: 'Popover content!',
type: 'text',
},
],
type: 'button',
},
{
labelText: 'Will not render',
popover: [
{
textContent: 'Popover content!',
type: 'text',
},
{
// Invalid text element will not let the button render
type: 'text',
},
],
type: 'button',
},
{
textContent: 'This is a message!',
type: 'text',
},
],
environment: {
enable: true,
label: 'DEV',
},
greeting: {
avatarAlt: 'randomly generated image',
avatarSrc: 'https://picsum.photos/150/150',
enable: true,
text: 'Hello, Author',
},
logout: {
enable: true,
href: '/logout',
label: 'Logout',
},
}
new AdminBarBuilder({
options: {
adminBarClass: 'sticky',
},
container: document.getElementById('admin-bar-autorender-target'),
data: builderData,
})
</script>
<script type="module">
/**
* Gets an adminBar object and then renders an `<admin-bar>` element.
*/
import {AdminBarBuilder} from './src/utils/AdminBarBuilder.ts';
const builderContainer = document.getElementById('admin-bar-split-target')
if (builderContainer) {
const builderData = {
buttons: [
{
buttonHref: '/',
labelText: 'Dashboard',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.47 193.88" style="width: 18px; height: auto;"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>dashboard</title><path class="cls-1" d="M125.92,97.18A18.93,18.93,0,0,0,118,92.43L57,55.88l37.48,60.79a19,19,0,1,0,31.48-19.49Z"/><path class="cls-1" d="M114.24,0C51.15,0,0,51.33,0,114.42a115.09,115.09,0,0,0,17.8,61.45c4.25,6,11.17,18,21.67,18h148c10.5,0,18.95-12,23.2-18A114.54,114.54,0,0,0,114.24,0ZM40.63,175.88a96.86,96.86,0,0,1-22.16-61.51,95.76,95.76,0,1,1,169.37,61.51Z"/></svg>',
type: 'button',
},
{
labelText: 'Edit',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.93 228.72" style="width: 16px; height: auto;"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>edit</title><path class="cls-1" d="M227.35,48.35a14.64,14.64,0,0,0-2.79-17L197.84,4.58a15.47,15.47,0,0,0-17.42-3.17l-5.95,4.74L14.29,166.33,0,228.72l62.39-14.29L222.57,54.26ZM32.59,210.92a30,30,0,0,0-14.84-14.58l5.53-24.15,14.14,6.91,13.06,13.06,6.86,13,0,0Z"/></svg>',
popover: [
{
class: 'long-text',
multiLine: true,
style: {
maxWidth: '50ch',
},
textContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!',
type: 'text',
},
{
dlContent: [['Title 1', 'Item 1'],['Title 2', 'Item 2']],
type: 'text',
},
],
type: 'button',
},
{
onclick: () => console.log('This onclick callback worked!'),
labelText: 'Console Log',
type: 'button',
},
{
textContent: 'This is a message!',
type: 'text',
},
],
environment: {
enable: true,
},
greeting: {
enable: true,
},
logout: {
enable: true,
},
}
// Init a new AdminBarBuilder instance.
const adminBarBuilder = new AdminBarBuilder()
// Set options to pass into AdminBarBuilder.
adminBarBuilder.setOptions({
adminBarStyle: {
'--admin-bar-environment-bg-color': 'oklch(0.71 0.33 341.27)',
}
})
// Set a container target that will be replaced later on.
adminBarBuilder.setContainer(builderContainer)
// Set structured data—this can be set on page or after an API call to get this data.
adminBarBuilder.setData(builderData)
// Get an `<admin-bar>` element generated from the options and data passed in above.
// If a required property isn’t set, this will return `null`
const adminBar = adminBarBuilder.getAdminBar()
if (adminBar) {
// Replace container children with new `<admin-bar>` child.
adminBarBuilder.addAdminBar(adminBar)
}
// Example of updating data and replacing the existing `<admin-bar>` element.
setTimeout(() => {
// Change data
builderData.greeting.text = "Hello again!"
// Update internal data
adminBarBuilder.setData(builderData)
// Build `<admin-bar>` element
const adminBar = adminBarBuilder.getAdminBar()
if (adminBar) {
// Place `<admin-bar>` element
adminBarBuilder.addAdminBar(adminBar)
}
}, 2000)
}
</script>
</body>
</html>