/
w3-tags.js
313 lines (298 loc) · 19.8 KB
/
w3-tags.js
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
/*
*
* additional custom elements to have fun with
* adds all classes from w3.css as HTML tags that you can use by nesting.
* designed to be used with qhtml.js but works standalone too
*
*
*/
function createW3CustomElementClass() {
return class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.applyClassesRecursively(this, []);
}
applyClassesRecursively(element, classes) {
// Add the current element's classes to the array
if (element.tagName.startsWith('W3-')) {
const classToAdd = element.tagName.toLowerCase().replace('w3-', 'w3-');
classes.push(classToAdd);
}
// Iterate over each child
Array.from(element.children).forEach((child) => {
if (child.tagName.startsWith('W3-')) {
// If child is a W3 element, recursively apply classes
this.applyClassesRecursively(child, [...classes]);
} else {
// Apply all collected classes to the final non-W3 element
child.classList.add(...classes);
}
});
// If the element is a W3 element, remove it after processing its children
if (element.tagName.startsWith('W3-') && element.parentNode) {
Array.from(element.children).forEach((child) => {
element.parentNode.insertBefore(child, element);
});
element.parentNode.removeChild(element);
}
}
};
}
// Define the new element for each W3 component you want to use
// implements <w3-row> </w3-row> and other HTML elements for use anywhere on a page
// very convenient for styling your q-html with minimal extra code
customElements.define('w3-row', createW3CustomElementClass());
customElements.define('w3-row-padding', createW3CustomElementClass());
customElements.define('w3-auto', createW3CustomElementClass());
customElements.define('w3-stretch', createW3CustomElementClass());
customElements.define('w3-half', createW3CustomElementClass());
customElements.define('w3-third', createW3CustomElementClass());
customElements.define('w3-twothird', createW3CustomElementClass());
customElements.define('w3-quarter', createW3CustomElementClass());
customElements.define('w3-threequarter', createW3CustomElementClass());
customElements.define('w3-col', createW3CustomElementClass());
customElements.define('w3-rest', createW3CustomElementClass());
customElements.define('w3-container', createW3CustomElementClass());
customElements.define('w3-panel', createW3CustomElementClass());
customElements.define('w3-badge', createW3CustomElementClass());
customElements.define('w3-tag', createW3CustomElementClass());
customElements.define('w3-ul', createW3CustomElementClass());
customElements.define('w3-display-container', createW3CustomElementClass());
customElements.define('w3-block', createW3CustomElementClass());
customElements.define('w3-code', createW3CustomElementClass());
customElements.define('w3-codespan', createW3CustomElementClass());
customElements.define('w3-content', createW3CustomElementClass());
customElements.define('w3-table', createW3CustomElementClass());
customElements.define('w3-striped', createW3CustomElementClass());
customElements.define('w3-bordered', createW3CustomElementClass());
customElements.define('w3-centered', createW3CustomElementClass());
customElements.define('w3-hoverable', createW3CustomElementClass());
customElements.define('w3-table-all', createW3CustomElementClass());
customElements.define('w3-responsive', createW3CustomElementClass());
customElements.define('w3-card', createW3CustomElementClass()); // Same as w3-card-2
customElements.define('w3-card-2', createW3CustomElementClass()); // 2px bordered shadow
customElements.define('w3-card-4', createW3CustomElementClass()); // 4px bordered shadow
// The following are repeats from earlier, but included for completeness
customElements.define('w3-cell-row', createW3CustomElementClass());
customElements.define('w3-cell', createW3CustomElementClass());
customElements.define('w3-cell-top', createW3CustomElementClass());
customElements.define('w3-cell-middle', createW3CustomElementClass());
customElements.define('w3-cell-bottom', createW3CustomElementClass());
customElements.define('w3-bar', createW3CustomElementClass()); // Horizontal bar
customElements.define('w3-bar-block', createW3CustomElementClass()); // Vertical bar
customElements.define('w3-bar-item', createW3CustomElementClass()); // Common style for bar items
customElements.define('w3-sidebar', createW3CustomElementClass()); // Side bar
customElements.define('w3-collapse', createW3CustomElementClass()); // Responsive side navigation
customElements.define('w3-main', createW3CustomElementClass()); // Page content container
customElements.define('w3-dropdown-click', createW3CustomElementClass()); // Clickable dropdown
customElements.define('w3-dropdown-hover', createW3CustomElementClass()); // Hoverable dropdown
customElements.define('w3-button', createW3CustomElementClass()); // Rectangular button
customElements.define('w3-btn', createW3CustomElementClass()); // Rectangular button with shadows
customElements.define('w3-circle', createW3CustomElementClass()); // Circular button
customElements.define('w3-ripple', createW3CustomElementClass()); // Button with ripple effect
customElements.define('w3-input', createW3CustomElementClass()); // General input elements
customElements.define('w3-check', createW3CustomElementClass()); // Checkbox input type
customElements.define('w3-radio', createW3CustomElementClass()); // Radio input type
customElements.define('w3-select', createW3CustomElementClass()); // Input select element
customElements.define('w3-animate-input', createW3CustomElementClass()); // Animate input width
customElements.define('w3-modal', createW3CustomElementClass()); // Modal container
customElements.define('w3-modal-content', createW3CustomElementClass()); // Modal pop-up element
customElements.define('w3-tooltip', createW3CustomElementClass()); // Tooltip element
customElements.define('w3-text', createW3CustomElementClass()); // Tooltip text
customElements.define('w3-animate-top', createW3CustomElementClass()); // Animate from top
customElements.define('w3-animate-left', createW3CustomElementClass()); // Animate from left
customElements.define('w3-animate-bottom', createW3CustomElementClass()); // Animate from bottom
customElements.define('w3-animate-right', createW3CustomElementClass()); // Animate from right
customElements.define('w3-animate-opacity', createW3CustomElementClass()); // Animate opacity
customElements.define('w3-animate-zoom', createW3CustomElementClass()); // Animate zoom
customElements.define('w3-animate-fading', createW3CustomElementClass()); // Animate fading
customElements.define('w3-spin', createW3CustomElementClass()); // Spin animation
customElements.define('w3-tiny', createW3CustomElementClass()); // Font size 10px
customElements.define('w3-small', createW3CustomElementClass()); // Font size 12px
customElements.define('w3-large', createW3CustomElementClass()); // Font size 18px
customElements.define('w3-xlarge', createW3CustomElementClass()); // Font size 24px
customElements.define('w3-xxlarge', createW3CustomElementClass()); // Font size 32px
customElements.define('w3-xxxlarge', createW3CustomElementClass()); // Font size 48px
customElements.define('w3-jumbo', createW3CustomElementClass()); // Font size 64px
customElements.define('w3-wide', createW3CustomElementClass()); // Wider text
customElements.define('w3-serif', createW3CustomElementClass()); // Serif font
customElements.define('w3-sans-serif', createW3CustomElementClass()); // Sans-serif font
customElements.define('w3-cursive', createW3CustomElementClass()); // Cursive font
customElements.define('w3-monospace', createW3CustomElementClass()); // Monospace font
customElements.define('w3-center', createW3CustomElementClass()); // Centered content
customElements.define('w3-left', createW3CustomElementClass()); // Float left
customElements.define('w3-right', createW3CustomElementClass()); // Float right
customElements.define('w3-left-align', createW3CustomElementClass()); // Text align left
customElements.define('w3-right-align', createW3CustomElementClass()); // Text align right
customElements.define('w3-justify', createW3CustomElementClass()); // Text justify
customElements.define('w3-hide', createW3CustomElementClass()); // Hide content
customElements.define('w3-show', createW3CustomElementClass()); // Show content
customElements.define('w3-show-block', createW3CustomElementClass()); // Show content as block
customElements.define('w3-show-inline-block', createW3CustomElementClass()); // Show content as inline-block
customElements.define('w3-top', createW3CustomElementClass()); // Fixed content at top
customElements.define('w3-bottom', createW3CustomElementClass()); // Fixed content at bottom
customElements.define('w3-display-topleft', createW3CustomElementClass()); // Content at top left
customElements.define('w3-display-topright', createW3CustomElementClass()); // Content at top right
customElements.define('w3-display-bottomleft', createW3CustomElementClass()); // Content at bottom left
customElements.define('w3-display-bottomright', createW3CustomElementClass()); // Content at bottom right
customElements.define('w3-display-left', createW3CustomElementClass()); // Content at middle left
customElements.define('w3-display-right', createW3CustomElementClass()); // Content at middle right
customElements.define('w3-display-middle', createW3CustomElementClass()); // Content in the middle
customElements.define('w3-display-topmiddle', createW3CustomElementClass()); // Content at top middle
customElements.define('w3-display-bottommiddle', createW3CustomElementClass()); // Content at bottom middle
customElements.define('w3-display-position', createW3CustomElementClass()); // Specified position content
customElements.define('w3-display-hover', createW3CustomElementClass()); // Display content on hover
customElements.define('w3-opacity', createW3CustomElementClass()); // Opacity effect
customElements.define('w3-opacity-off', createW3CustomElementClass()); // Turn off opacity
customElements.define('w3-opacity-min', createW3CustomElementClass()); // Min opacity
customElements.define('w3-opacity-max', createW3CustomElementClass()); // Max opacity
customElements.define('w3-grayscale-min', createW3CustomElementClass()); // Min grayscale
customElements.define('w3-grayscale', createW3CustomElementClass()); // Grayscale effect
customElements.define('w3-grayscale-max', createW3CustomElementClass()); // Max grayscale
customElements.define('w3-sepia-min', createW3CustomElementClass()); // Min sepia
customElements.define('w3-sepia', createW3CustomElementClass()); // Sepia effect
customElements.define('w3-sepia-max', createW3CustomElementClass()); // Max sepia
customElements.define('w3-overlay', createW3CustomElementClass()); // Overlay effect
customElements.define('w3-red', createW3CustomElementClass());
customElements.define('w3-pink', createW3CustomElementClass());
customElements.define('w3-purple', createW3CustomElementClass());
customElements.define('w3-deep-purple', createW3CustomElementClass());
customElements.define('w3-indigo', createW3CustomElementClass());
customElements.define('w3-blue', createW3CustomElementClass());
customElements.define('w3-light-blue', createW3CustomElementClass());
customElements.define('w3-cyan', createW3CustomElementClass());
customElements.define('w3-aqua', createW3CustomElementClass());
customElements.define('w3-teal', createW3CustomElementClass());
customElements.define('w3-green', createW3CustomElementClass());
customElements.define('w3-light-green', createW3CustomElementClass());
customElements.define('w3-lime', createW3CustomElementClass());
customElements.define('w3-sand', createW3CustomElementClass());
customElements.define('w3-khaki', createW3CustomElementClass());
customElements.define('w3-yellow', createW3CustomElementClass());
customElements.define('w3-amber', createW3CustomElementClass());
customElements.define('w3-orange', createW3CustomElementClass());
customElements.define('w3-deep-orange', createW3CustomElementClass());
customElements.define('w3-blue-grey', createW3CustomElementClass());
customElements.define('w3-brown', createW3CustomElementClass());
customElements.define('w3-light-grey', createW3CustomElementClass());
customElements.define('w3-grey', createW3CustomElementClass());
customElements.define('w3-dark-grey', createW3CustomElementClass());
customElements.define('w3-black', createW3CustomElementClass());
customElements.define('w3-pale-red', createW3CustomElementClass());
customElements.define('w3-pale-yellow', createW3CustomElementClass());
customElements.define('w3-pale-green', createW3CustomElementClass());
customElements.define('w3-pale-blue', createW3CustomElementClass());
customElements.define('w3-transparent', createW3CustomElementClass());
customElements.define('w3-hover-white', createW3CustomElementClass());
customElements.define('w3-hover-black', createW3CustomElementClass());
customElements.define('w3-hover-red', createW3CustomElementClass());
customElements.define('w3-hover-blue', createW3CustomElementClass());
customElements.define('w3-hover-green', createW3CustomElementClass());
customElements.define('w3-hover-aqua', createW3CustomElementClass());
customElements.define('w3-hover-orange', createW3CustomElementClass());
customElements.define('w3-hover-grey', createW3CustomElementClass());
customElements.define('w3-hover-pale-green', createW3CustomElementClass());
customElements.define('w3-text-red', createW3CustomElementClass());
customElements.define('w3-text-green', createW3CustomElementClass());
customElements.define('w3-text-blue', createW3CustomElementClass());
customElements.define('w3-text-yellow', createW3CustomElementClass());
customElements.define('w3-text-light-grey', createW3CustomElementClass());
customElements.define('w3-text-grey', createW3CustomElementClass());
customElements.define('w3-text-dark-grey', createW3CustomElementClass());
customElements.define('w3-text-black', createW3CustomElementClass());
customElements.define('w3-text-white', createW3CustomElementClass());
customElements.define('w3-text-pink', createW3CustomElementClass());
customElements.define('w3-text-purple', createW3CustomElementClass());
customElements.define('w3-text-teal', createW3CustomElementClass());
customElements.define('w3-text-light-green', createW3CustomElementClass());
customElements.define('w3-text-lime', createW3CustomElementClass());
customElements.define('w3-text-deep-purple', createW3CustomElementClass());
customElements.define('w3-text-indigo', createW3CustomElementClass());
customElements.define('w3-text-light-blue', createW3CustomElementClass());
customElements.define('w3-text-blue-grey', createW3CustomElementClass());
customElements.define('w3-text-cyan', createW3CustomElementClass());
customElements.define('w3-text-aqua', createW3CustomElementClass());
customElements.define('w3-text-amber', createW3CustomElementClass());
customElements.define('w3-text-orange', createW3CustomElementClass());
customElements.define('w3-text-deep-orange', createW3CustomElementClass());
customElements.define('w3-text-sand', createW3CustomElementClass());
customElements.define('w3-text-khaki', createW3CustomElementClass());
customElements.define('w3-text-brown', createW3CustomElementClass());
customElements.define('w3-hover-border-color', createW3CustomElementClass());
customElements.define('w3-hover-opacity', createW3CustomElementClass());
customElements.define('w3-hover-opacity-off', createW3CustomElementClass());
customElements.define('w3-hover-shadow', createW3CustomElementClass());
customElements.define('w3-hover-grayscale', createW3CustomElementClass());
customElements.define('w3-hover-sepia', createW3CustomElementClass());
customElements.define('w3-hover-none', createW3CustomElementClass());
customElements.define('w3-round', createW3CustomElementClass());
customElements.define('w3-round-small', createW3CustomElementClass());
customElements.define('w3-round-medium', createW3CustomElementClass()); // Same as w3-round, for consistency in naming convention
customElements.define('w3-round-large', createW3CustomElementClass());
customElements.define('w3-round-xlarge', createW3CustomElementClass());
customElements.define('w3-round-xxlarge', createW3CustomElementClass());
customElements.define('w3-padding-small', createW3CustomElementClass());
customElements.define('w3-padding', createW3CustomElementClass());
customElements.define('w3-padding-large', createW3CustomElementClass());
customElements.define('w3-padding-16', createW3CustomElementClass());
customElements.define('w3-padding-24', createW3CustomElementClass());
customElements.define('w3-padding-32', createW3CustomElementClass());
customElements.define('w3-padding-48', createW3CustomElementClass());
customElements.define('w3-padding-64', createW3CustomElementClass());
customElements.define('w3-padding-top-64', createW3CustomElementClass());
customElements.define('w3-padding-top-48', createW3CustomElementClass());
customElements.define('w3-padding-top-32', createW3CustomElementClass());
customElements.define('w3-padding-top-24', createW3CustomElementClass());
customElements.define('w3-margin', createW3CustomElementClass());
customElements.define('w3-margin-top', createW3CustomElementClass());
customElements.define('w3-margin-right', createW3CustomElementClass());
customElements.define('w3-margin-bottom', createW3CustomElementClass());
customElements.define('w3-margin-left', createW3CustomElementClass());
customElements.define('w3-section', createW3CustomElementClass());
customElements.define('w3-border', createW3CustomElementClass());
customElements.define('w3-border-top', createW3CustomElementClass());
customElements.define('w3-border-right', createW3CustomElementClass());
customElements.define('w3-border-bottom', createW3CustomElementClass());
customElements.define('w3-border-left', createW3CustomElementClass());
customElements.define('w3-border-0', createW3CustomElementClass());
customElements.define('w3-border-color', createW3CustomElementClass());
customElements.define('w3-bottombar', createW3CustomElementClass());
customElements.define('w3-leftbar', createW3CustomElementClass());
customElements.define('w3-rightbar', createW3CustomElementClass());
customElements.define('w3-topbar', createW3CustomElementClass());
customElements.define('w3-hide-medium', createW3CustomElementClass());
customElements.define('w3-hide-small', createW3CustomElementClass());
customElements.define('w3-hide-large', createW3CustomElementClass());
customElements.define('w3-mobile', createW3CustomElementClass());
// w3-hover-border-color is already defined in the hover effect classes
(async function() {
async function loadStylesheet(url) {
try {
// Fetch the CSS file
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// Read the response as a Blob
const blob = await response.blob();
// Create a URL for the Blob
const blobUrl = URL.createObjectURL(blob);
// Create a new link element for the stylesheet
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = blobUrl;
// Append the link to the end of the document
document.body.appendChild(link);
// Optional: Cleanup the blob URL once it is no longer needed
link.onload = () => {
URL.revokeObjectURL(blobUrl);
};
} catch (error) {
console.error('Failed to load stylesheet:', error);
}
}
// Example usage
loadStylesheet('w3.css');
})()