drab 5.4.2 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/announcer/define.js +3 -0
- package/dist/announcer/index.d.ts +49 -0
- package/dist/announcer/index.js +80 -0
- package/{base → dist/base}/copy/index.d.ts +4 -1
- package/{base → dist/base}/copy/index.js +1 -0
- package/dist/base/define.js +3 -0
- package/{base → dist/base}/index.d.ts +16 -11
- package/{base → dist/base}/index.js +19 -15
- package/dist/contextmenu/define.js +3 -0
- package/dist/contextmenu/index.d.ts +12 -0
- package/{contextmenu → dist/contextmenu}/index.js +6 -12
- package/dist/copy/define.js +3 -0
- package/{copy → dist/copy}/index.d.ts +2 -3
- package/dist/define.js +5 -0
- package/dist/dialog/define.js +3 -0
- package/{dialog → dist/dialog}/index.d.ts +7 -8
- package/{dialog → dist/dialog}/index.js +3 -9
- package/dist/editor/define.js +3 -0
- package/{editor → dist/editor}/index.d.ts +7 -3
- package/dist/fullscreen/define.js +3 -0
- package/{fullscreen → dist/fullscreen}/index.d.ts +3 -7
- package/{fullscreen → dist/fullscreen}/index.js +2 -3
- package/dist/index.d.ts +13 -0
- package/dist/index.js +13 -0
- package/dist/intersect/define.js +3 -0
- package/{intersect → dist/intersect}/index.d.ts +4 -5
- package/dist/prefetch/define.js +3 -0
- package/{prefetch → dist/prefetch}/index.d.ts +7 -10
- package/dist/share/define.js +3 -0
- package/{share → dist/share}/index.d.ts +2 -3
- package/dist/tablesort/define.js +3 -0
- package/{tablesort → dist/tablesort}/index.d.ts +6 -3
- package/{tablesort → dist/tablesort}/index.js +33 -21
- package/dist/util/define.d.ts +8 -0
- package/dist/util/define.js +11 -0
- package/dist/wakelock/define.js +3 -0
- package/{wakelock → dist/wakelock}/index.d.ts +5 -6
- package/{wakelock → dist/wakelock}/index.js +2 -0
- package/dist/youtube/define.js +3 -0
- package/{youtube → dist/youtube}/index.d.ts +6 -3
- package/{youtube → dist/youtube}/index.js +0 -1
- package/package.json +109 -145
- package/LICENSE.md +0 -21
- package/README.md +0 -49
- package/animate/define.iife.js +0 -1
- package/animate/define.js +0 -2
- package/animate/index.d.ts +0 -57
- package/animate/index.iife.js +0 -1
- package/animate/index.js +0 -138
- package/base/define.iife.js +0 -1
- package/base/define.js +0 -2
- package/base/index.iife.js +0 -1
- package/breakpoint/define.iife.js +0 -1
- package/breakpoint/define.js +0 -2
- package/breakpoint/index.d.ts +0 -26
- package/breakpoint/index.iife.js +0 -1
- package/breakpoint/index.js +0 -55
- package/contextmenu/define.iife.js +0 -1
- package/contextmenu/define.js +0 -2
- package/contextmenu/index.d.ts +0 -13
- package/contextmenu/index.iife.js +0 -1
- package/copy/define.iife.js +0 -1
- package/copy/define.js +0 -2
- package/copy/index.iife.js +0 -1
- package/define.iife.js +0 -9
- package/define.js +0 -4
- package/details/define.iife.js +0 -1
- package/details/define.js +0 -2
- package/details/index.d.ts +0 -21
- package/details/index.iife.js +0 -1
- package/details/index.js +0 -46
- package/dialog/define.iife.js +0 -1
- package/dialog/define.js +0 -2
- package/dialog/index.iife.js +0 -1
- package/editor/define.iife.js +0 -9
- package/editor/define.js +0 -2
- package/editor/index.iife.js +0 -9
- package/fullscreen/define.iife.js +0 -1
- package/fullscreen/define.js +0 -2
- package/fullscreen/index.iife.js +0 -1
- package/index.d.ts +0 -17
- package/index.iife.js +0 -9
- package/index.js +0 -17
- package/intersect/define.iife.js +0 -1
- package/intersect/define.js +0 -2
- package/intersect/index.iife.js +0 -1
- package/popover/define.iife.js +0 -1
- package/popover/define.js +0 -2
- package/popover/index.d.ts +0 -25
- package/popover/index.iife.js +0 -1
- package/popover/index.js +0 -72
- package/prefetch/define.iife.js +0 -1
- package/prefetch/define.js +0 -2
- package/prefetch/index.iife.js +0 -1
- package/share/define.iife.js +0 -1
- package/share/define.js +0 -2
- package/share/index.iife.js +0 -1
- package/tablesort/define.d.ts +0 -1
- package/tablesort/define.iife.js +0 -1
- package/tablesort/define.js +0 -2
- package/tablesort/index.iife.js +0 -1
- package/types/index.d.ts +0 -11
- package/types/index.js +0 -1
- package/wakelock/define.d.ts +0 -1
- package/wakelock/define.iife.js +0 -1
- package/wakelock/define.js +0 -2
- package/wakelock/index.iife.js +0 -1
- package/youtube/define.d.ts +0 -1
- package/youtube/define.iife.js +0 -1
- package/youtube/define.js +0 -2
- package/youtube/index.iife.js +0 -1
- /package/{animate → dist/announcer}/define.d.ts +0 -0
- /package/{base → dist/base}/define.d.ts +0 -0
- /package/{breakpoint → dist/contextmenu}/define.d.ts +0 -0
- /package/{contextmenu → dist/copy}/define.d.ts +0 -0
- /package/{copy → dist/copy}/index.js +0 -0
- /package/{copy → dist}/define.d.ts +0 -0
- /package/{define.d.ts → dist/dialog/define.d.ts} +0 -0
- /package/{details → dist/editor}/define.d.ts +0 -0
- /package/{editor → dist/editor}/index.js +0 -0
- /package/{dialog → dist/fullscreen}/define.d.ts +0 -0
- /package/{editor → dist/intersect}/define.d.ts +0 -0
- /package/{intersect → dist/intersect}/index.js +0 -0
- /package/{fullscreen → dist/prefetch}/define.d.ts +0 -0
- /package/{prefetch → dist/prefetch}/index.js +0 -0
- /package/{intersect → dist/share}/define.d.ts +0 -0
- /package/{share → dist/share}/index.js +0 -0
- /package/{popover → dist/tablesort}/define.d.ts +0 -0
- /package/{prefetch → dist/wakelock}/define.d.ts +0 -0
- /package/{share → dist/youtube}/define.d.ts +0 -0
@@ -1,6 +1,9 @@
|
|
1
|
-
import { Base } from "../index.js";
|
2
|
-
|
3
|
-
export type
|
1
|
+
import { Base, type BaseAttributes } from "../base/index.js";
|
2
|
+
export type TableSortAttributes = BaseAttributes;
|
3
|
+
export type TableSortTriggerAttributes = {
|
4
|
+
"data-type": "string" | "boolean" | "number";
|
5
|
+
"data-value": string;
|
6
|
+
};
|
4
7
|
/**
|
5
8
|
* Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
|
6
9
|
* headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Base } from "../index.js";
|
1
|
+
import { Base } from "../base/index.js";
|
2
2
|
/**
|
3
3
|
* Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
|
4
4
|
* headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
|
@@ -20,7 +20,7 @@ export class TableSort extends Base {
|
|
20
20
|
* Removes `data-asc` or `data-desc` from other triggers then sets the correct attribute on the selected trigger.
|
21
21
|
*
|
22
22
|
* @param trigger
|
23
|
-
* @returns true if ascending, false if descending
|
23
|
+
* @returns `true` if ascending, `false` if descending
|
24
24
|
*/
|
25
25
|
#setAttributes(trigger) {
|
26
26
|
const asc = "data-asc";
|
@@ -43,11 +43,24 @@ export class TableSort extends Base {
|
|
43
43
|
mount() {
|
44
44
|
const tbody = this.getContent(HTMLTableSectionElement);
|
45
45
|
for (const trigger of this.getTrigger()) {
|
46
|
-
trigger.
|
46
|
+
trigger.tabIndex = 0;
|
47
|
+
trigger.role = "button";
|
48
|
+
const listener = () => {
|
49
|
+
const asc = this.#setAttributes(trigger);
|
47
50
|
Array.from(tbody.querySelectorAll("tr"))
|
48
|
-
.sort(comparer(trigger,
|
51
|
+
.sort(comparer(trigger, asc))
|
49
52
|
.forEach((tr) => tbody.appendChild(tr));
|
50
|
-
|
53
|
+
this.announce(`sorted table by ${trigger.textContent} in ${asc ? "ascending" : "descending"} order`);
|
54
|
+
};
|
55
|
+
trigger.addEventListener(this.event, listener);
|
56
|
+
if (this.event === "click") {
|
57
|
+
trigger.addEventListener("keydown", (e) => {
|
58
|
+
if (e.key === "Enter" || e.key === " ") {
|
59
|
+
e.preventDefault();
|
60
|
+
listener();
|
61
|
+
}
|
62
|
+
});
|
63
|
+
}
|
51
64
|
}
|
52
65
|
}
|
53
66
|
}
|
@@ -65,23 +78,9 @@ const comparer = (th, ascending) => {
|
|
65
78
|
return collator.compare(aVal, bVal);
|
66
79
|
}
|
67
80
|
else if (dataType === "boolean") {
|
68
|
-
|
69
|
-
* if value is one of these and type is boolean
|
70
|
-
* it should be considered falsy
|
71
|
-
* since actually `Boolean("false") === true`
|
72
|
-
* @param val string pulled from the textContent or attr
|
73
|
-
* @returns a boolean of the provided string
|
74
|
-
*/
|
75
|
-
const convertToBoolean = (val) => {
|
76
|
-
const falsy = ["0", "false", "null", "undefined"];
|
77
|
-
if (falsy.includes(val)) {
|
78
|
-
return false;
|
79
|
-
}
|
80
|
-
return Boolean(val);
|
81
|
-
};
|
82
|
-
return convertToBoolean(aVal) === convertToBoolean(bVal)
|
81
|
+
return falsyBoolean(aVal) === falsyBoolean(bVal)
|
83
82
|
? 0
|
84
|
-
:
|
83
|
+
: falsyBoolean(aVal)
|
85
84
|
? -1
|
86
85
|
: 1;
|
87
86
|
}
|
@@ -107,3 +106,16 @@ const getValue = (tr, i) => {
|
|
107
106
|
}
|
108
107
|
return "";
|
109
108
|
};
|
109
|
+
/**
|
110
|
+
* if value is one of these and type is boolean
|
111
|
+
* it should be considered falsy
|
112
|
+
* since actually `Boolean("false") === true`
|
113
|
+
* @param val string pulled from the textContent or attr
|
114
|
+
* @returns a boolean of the provided string
|
115
|
+
*/
|
116
|
+
const falsyBoolean = (val) => {
|
117
|
+
if (["0", "false", "null", "undefined"].includes(val)) {
|
118
|
+
return false;
|
119
|
+
}
|
120
|
+
return Boolean(val);
|
121
|
+
};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
/**
|
2
|
+
* Define a custom element to the registry. Checks if the element is
|
3
|
+
* defined and then names the element.
|
4
|
+
*
|
5
|
+
* @param name name of the custom element
|
6
|
+
* @param Constructor custom element constructor
|
7
|
+
*/
|
8
|
+
export declare const define: (name: string, Constructor: CustomElementConstructor) => void;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/**
|
2
|
+
* Define a custom element to the registry. Checks if the element is
|
3
|
+
* defined and then names the element.
|
4
|
+
*
|
5
|
+
* @param name name of the custom element
|
6
|
+
* @param Constructor custom element constructor
|
7
|
+
*/
|
8
|
+
export const define = (name, Constructor) => {
|
9
|
+
if (!customElements.get(name))
|
10
|
+
customElements.define(name, Constructor);
|
11
|
+
};
|
@@ -1,9 +1,8 @@
|
|
1
|
-
import { Base } from "../base/index.js";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
}>;
|
1
|
+
import { Base, type BaseAttributes } from "../base/index.js";
|
2
|
+
export type WakeLockAttributes = BaseAttributes & {
|
3
|
+
"auto-lock"?: boolean;
|
4
|
+
locked?: boolean;
|
5
|
+
};
|
7
6
|
/**
|
8
7
|
* `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.
|
9
8
|
*
|
@@ -34,9 +34,11 @@ export class WakeLock extends Base {
|
|
34
34
|
if (this.#wakeLockSupported() && document.visibilityState === "visible") {
|
35
35
|
this.wakeLock = await navigator.wakeLock.request("screen");
|
36
36
|
this.setAttribute("locked", "");
|
37
|
+
this.announce("screen wake lock activated");
|
37
38
|
this.swapContent(false);
|
38
39
|
this.wakeLock.addEventListener("release", () => {
|
39
40
|
this.removeAttribute("locked");
|
41
|
+
this.announce("screen wake lock deactivated");
|
40
42
|
this.swapContent(false);
|
41
43
|
if (!this.#autoLock) {
|
42
44
|
// set to null is required, used to determine if screen should be
|
@@ -1,6 +1,9 @@
|
|
1
|
-
import { Base } from "../base/index.js";
|
2
|
-
|
3
|
-
|
1
|
+
import { Base, type BaseAttributes } from "../base/index.js";
|
2
|
+
export type YouTubeAttributes = BaseAttributes & {
|
3
|
+
autoplay?: boolean;
|
4
|
+
start?: number;
|
5
|
+
uid: string;
|
6
|
+
};
|
4
7
|
/**
|
5
8
|
* Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
|
6
9
|
*/
|
@@ -49,7 +49,6 @@ export class YouTube extends Base {
|
|
49
49
|
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
|
50
50
|
}
|
51
51
|
attributeChangedCallback() {
|
52
|
-
// BREAKING TODO: make consistent with other components - decide on observed attributes
|
53
52
|
queueMicrotask(() => {
|
54
53
|
this.iframe.src = `https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay ? "&autoplay=1" : ""}`;
|
55
54
|
});
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"description": "
|
4
|
-
"version": "
|
3
|
+
"description": "Interactivity for You",
|
4
|
+
"version": "6.1.0",
|
5
5
|
"homepage": "https://drab.robino.dev",
|
6
6
|
"license": "MIT",
|
7
7
|
"author": {
|
@@ -11,192 +11,156 @@
|
|
11
11
|
"keywords": [
|
12
12
|
"web components",
|
13
13
|
"custom elements",
|
14
|
-
"animate",
|
15
|
-
"wakelock",
|
16
|
-
"intersect",
|
17
14
|
"contextmenu",
|
18
|
-
"details",
|
19
|
-
"youtube",
|
20
|
-
"breakpoint",
|
21
|
-
"dialog",
|
22
|
-
"popover",
|
23
|
-
"tablesort",
|
24
|
-
"prefetch",
|
25
15
|
"copy",
|
26
|
-
"
|
27
|
-
"base",
|
16
|
+
"dialog",
|
28
17
|
"editor",
|
29
|
-
"
|
18
|
+
"fullscreen",
|
19
|
+
"intersect",
|
20
|
+
"prefetch",
|
21
|
+
"share",
|
22
|
+
"tablesort",
|
23
|
+
"wakelock",
|
24
|
+
"youtube"
|
30
25
|
],
|
31
|
-
"repository":
|
26
|
+
"repository": {
|
27
|
+
"type": "git",
|
28
|
+
"url": "git+https://github.com/rossrobino/drab.git"
|
29
|
+
},
|
32
30
|
"type": "module",
|
33
|
-
"types": "./index.d.ts",
|
34
|
-
"main": "./index.js",
|
31
|
+
"types": "./dist/index.d.ts",
|
32
|
+
"main": "./dist/index.js",
|
35
33
|
"exports": {
|
34
|
+
"./package.json": {
|
35
|
+
"default": "./package.json"
|
36
|
+
},
|
36
37
|
".": {
|
37
|
-
"types": "./index.d.ts",
|
38
|
-
"default": "./index.js"
|
38
|
+
"types": "./dist/index.d.ts",
|
39
|
+
"default": "./dist/index.js"
|
39
40
|
},
|
40
41
|
"./define": {
|
41
|
-
"types": "./define.d.ts",
|
42
|
-
"default": "./define.js"
|
42
|
+
"types": "./dist/define.d.ts",
|
43
|
+
"default": "./dist/define.js"
|
43
44
|
},
|
44
|
-
"./
|
45
|
-
"types": "./
|
46
|
-
"default": "./
|
45
|
+
"./announcer": {
|
46
|
+
"types": "./dist/announcer/index.d.ts",
|
47
|
+
"default": "./dist/announcer/index.js"
|
47
48
|
},
|
48
|
-
"./
|
49
|
-
"types": "./
|
50
|
-
"default": "./
|
49
|
+
"./announcer/define": {
|
50
|
+
"types": "./dist/announcer/define.d.ts",
|
51
|
+
"default": "./dist/announcer/define.js"
|
51
52
|
},
|
52
|
-
"./
|
53
|
-
"types": "./
|
54
|
-
"default": "./
|
53
|
+
"./base": {
|
54
|
+
"types": "./dist/base/index.d.ts",
|
55
|
+
"default": "./dist/base/index.js"
|
55
56
|
},
|
56
|
-
"./
|
57
|
-
"types": "./
|
58
|
-
"default": "./
|
57
|
+
"./base/define": {
|
58
|
+
"types": "./dist/base/define.d.ts",
|
59
|
+
"default": "./dist/base/define.js"
|
59
60
|
},
|
60
|
-
"./
|
61
|
-
"types": "./
|
62
|
-
"default": "./
|
61
|
+
"./breakpoint": {
|
62
|
+
"types": "./dist/breakpoint/index.d.ts",
|
63
|
+
"default": "./dist/breakpoint/index.js"
|
63
64
|
},
|
64
|
-
"./
|
65
|
-
"types": "./
|
66
|
-
"default": "./
|
65
|
+
"./breakpoint/define": {
|
66
|
+
"types": "./dist/breakpoint/define.d.ts",
|
67
|
+
"default": "./dist/breakpoint/define.js"
|
67
68
|
},
|
68
69
|
"./contextmenu": {
|
69
|
-
"types": "./contextmenu/index.d.ts",
|
70
|
-
"default": "./contextmenu/index.js"
|
70
|
+
"types": "./dist/contextmenu/index.d.ts",
|
71
|
+
"default": "./dist/contextmenu/index.js"
|
71
72
|
},
|
72
73
|
"./contextmenu/define": {
|
73
|
-
"types": "./contextmenu/define.d.ts",
|
74
|
-
"default": "./contextmenu/define.js"
|
75
|
-
},
|
76
|
-
"./details": {
|
77
|
-
"types": "./details/index.d.ts",
|
78
|
-
"default": "./details/index.js"
|
79
|
-
},
|
80
|
-
"./details/define": {
|
81
|
-
"types": "./details/define.d.ts",
|
82
|
-
"default": "./details/define.js"
|
74
|
+
"types": "./dist/contextmenu/define.d.ts",
|
75
|
+
"default": "./dist/contextmenu/define.js"
|
83
76
|
},
|
84
|
-
"./
|
85
|
-
"types": "./
|
86
|
-
"default": "./
|
87
|
-
},
|
88
|
-
"./youtube/define": {
|
89
|
-
"types": "./youtube/define.d.ts",
|
90
|
-
"default": "./youtube/define.js"
|
91
|
-
},
|
92
|
-
"./breakpoint": {
|
93
|
-
"types": "./breakpoint/index.d.ts",
|
94
|
-
"default": "./breakpoint/index.js"
|
77
|
+
"./copy": {
|
78
|
+
"types": "./dist/copy/index.d.ts",
|
79
|
+
"default": "./dist/copy/index.js"
|
95
80
|
},
|
96
|
-
"./
|
97
|
-
"types": "./
|
98
|
-
"default": "./
|
81
|
+
"./copy/define": {
|
82
|
+
"types": "./dist/copy/define.d.ts",
|
83
|
+
"default": "./dist/copy/define.js"
|
99
84
|
},
|
100
85
|
"./dialog": {
|
101
|
-
"types": "./dialog/index.d.ts",
|
102
|
-
"default": "./dialog/index.js"
|
86
|
+
"types": "./dist/dialog/index.d.ts",
|
87
|
+
"default": "./dist/dialog/index.js"
|
103
88
|
},
|
104
89
|
"./dialog/define": {
|
105
|
-
"types": "./dialog/define.d.ts",
|
106
|
-
"default": "./dialog/define.js"
|
90
|
+
"types": "./dist/dialog/define.d.ts",
|
91
|
+
"default": "./dist/dialog/define.js"
|
107
92
|
},
|
108
|
-
"./
|
109
|
-
"types": "./
|
110
|
-
"default": "./
|
93
|
+
"./editor": {
|
94
|
+
"types": "./dist/editor/index.d.ts",
|
95
|
+
"default": "./dist/editor/index.js"
|
111
96
|
},
|
112
|
-
"./
|
113
|
-
"types": "./
|
114
|
-
"default": "./
|
97
|
+
"./editor/define": {
|
98
|
+
"types": "./dist/editor/define.d.ts",
|
99
|
+
"default": "./dist/editor/define.js"
|
115
100
|
},
|
116
|
-
"./
|
117
|
-
"types": "./
|
118
|
-
"default": "./
|
101
|
+
"./fullscreen": {
|
102
|
+
"types": "./dist/fullscreen/index.d.ts",
|
103
|
+
"default": "./dist/fullscreen/index.js"
|
119
104
|
},
|
120
|
-
"./
|
121
|
-
"types": "./
|
122
|
-
"default": "./
|
105
|
+
"./fullscreen/define": {
|
106
|
+
"types": "./dist/fullscreen/define.d.ts",
|
107
|
+
"default": "./dist/fullscreen/define.js"
|
123
108
|
},
|
124
|
-
"./
|
125
|
-
"types": "./
|
126
|
-
"default": "./
|
109
|
+
"./intersect": {
|
110
|
+
"types": "./dist/intersect/index.d.ts",
|
111
|
+
"default": "./dist/intersect/index.js"
|
127
112
|
},
|
128
|
-
"./
|
129
|
-
"types": "./
|
130
|
-
"default": "./
|
113
|
+
"./intersect/define": {
|
114
|
+
"types": "./dist/intersect/define.d.ts",
|
115
|
+
"default": "./dist/intersect/define.js"
|
131
116
|
},
|
132
|
-
"./
|
133
|
-
"types": "./
|
134
|
-
"default": "./
|
117
|
+
"./prefetch": {
|
118
|
+
"types": "./dist/prefetch/index.d.ts",
|
119
|
+
"default": "./dist/prefetch/index.js"
|
135
120
|
},
|
136
|
-
"./
|
137
|
-
"types": "./
|
138
|
-
"default": "./
|
121
|
+
"./prefetch/define": {
|
122
|
+
"types": "./dist/prefetch/define.d.ts",
|
123
|
+
"default": "./dist/prefetch/define.js"
|
139
124
|
},
|
140
|
-
"./
|
141
|
-
"types": "./
|
142
|
-
"default": "./
|
125
|
+
"./share": {
|
126
|
+
"types": "./dist/share/index.d.ts",
|
127
|
+
"default": "./dist/share/index.js"
|
143
128
|
},
|
144
|
-
"./
|
145
|
-
"types": "./
|
146
|
-
"default": "./
|
129
|
+
"./share/define": {
|
130
|
+
"types": "./dist/share/define.d.ts",
|
131
|
+
"default": "./dist/share/define.js"
|
147
132
|
},
|
148
|
-
"./
|
149
|
-
"types": "./
|
150
|
-
"default": "./
|
133
|
+
"./tablesort": {
|
134
|
+
"types": "./dist/tablesort/index.d.ts",
|
135
|
+
"default": "./dist/tablesort/index.js"
|
151
136
|
},
|
152
|
-
"./
|
153
|
-
"types": "./
|
154
|
-
"default": "./
|
137
|
+
"./tablesort/define": {
|
138
|
+
"types": "./dist/tablesort/define.d.ts",
|
139
|
+
"default": "./dist/tablesort/define.js"
|
155
140
|
},
|
156
|
-
"./
|
157
|
-
"types": "./
|
158
|
-
"default": "./
|
141
|
+
"./wakelock": {
|
142
|
+
"types": "./dist/wakelock/index.d.ts",
|
143
|
+
"default": "./dist/wakelock/index.js"
|
159
144
|
},
|
160
|
-
"./
|
161
|
-
"types": "./
|
162
|
-
"default": "./
|
145
|
+
"./wakelock/define": {
|
146
|
+
"types": "./dist/wakelock/define.d.ts",
|
147
|
+
"default": "./dist/wakelock/define.js"
|
163
148
|
},
|
164
|
-
"./
|
165
|
-
"types": "./
|
166
|
-
"default": "./
|
149
|
+
"./youtube": {
|
150
|
+
"types": "./dist/youtube/index.d.ts",
|
151
|
+
"default": "./dist/youtube/index.js"
|
167
152
|
},
|
168
|
-
"./
|
169
|
-
"types": "./
|
170
|
-
"default": "./
|
153
|
+
"./youtube/define": {
|
154
|
+
"types": "./dist/youtube/define.d.ts",
|
155
|
+
"default": "./dist/youtube/define.js"
|
171
156
|
}
|
172
157
|
},
|
158
|
+
"files": [
|
159
|
+
"dist"
|
160
|
+
],
|
173
161
|
"scripts": {
|
174
|
-
"
|
175
|
-
"
|
176
|
-
"
|
177
|
-
"format": "prettier --write .",
|
178
|
-
"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
|
179
|
-
"package:json": "bun src/lib/scripts/packageJson/index.ts && prettier --write package.json",
|
180
|
-
"package:copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./package",
|
181
|
-
"package:tsc": "tsc --project tsconfig.package.json",
|
182
|
-
"package": "bun package:json && tsup && bun package:tsc && bun package:copy",
|
183
|
-
"pub": "bun i && bun doc && bun package && npm publish --access public ./package"
|
184
|
-
},
|
185
|
-
"devDependencies": {
|
186
|
-
"@tailwindcss/typography": "^0.5.13",
|
187
|
-
"@types/node": "^20.12.12",
|
188
|
-
"@vercel/analytics": "^1.2.2",
|
189
|
-
"autoprefixer": "^10.4.19",
|
190
|
-
"domco": "^0.5.19",
|
191
|
-
"prettier": "^3.2.5",
|
192
|
-
"prettier-plugin-tailwindcss": "^0.5.14",
|
193
|
-
"robino": "^0.2.0",
|
194
|
-
"tailwindcss": "^3.4.3",
|
195
|
-
"tsup": "^8.0.2",
|
196
|
-
"typedoc": "^0.25.13",
|
197
|
-
"typedoc-plugin-markdown": "^4.0.2",
|
198
|
-
"typescript": "^5.4.5",
|
199
|
-
"uico": "^0.2.4",
|
200
|
-
"vite": "^5.2.11"
|
162
|
+
"check": "tsc --noEmit",
|
163
|
+
"dev": "tsc --watch",
|
164
|
+
"build": "tsc"
|
201
165
|
}
|
202
166
|
}
|
package/LICENSE.md
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
MIT License
|
2
|
-
|
3
|
-
Copyright (c) 2024 Ross Robino
|
4
|
-
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
7
|
-
in the Software without restriction, including without limitation the rights
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
10
|
-
furnished to do so, subject to the following conditions:
|
11
|
-
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
13
|
-
copies or substantial portions of the Software.
|
14
|
-
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
-
SOFTWARE.
|
package/README.md
DELETED
@@ -1,49 +0,0 @@
|
|
1
|
-
# A Headless Custom Element Library
|
2
|
-
|
3
|
-
## Features
|
4
|
-
|
5
|
-
**drab** focuses on providing JavaScript functionality where it's most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.
|
6
|
-
|
7
|
-
### Built on the web platform
|
8
|
-
|
9
|
-
- Each element is a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). So you can use them [with a framework](http://drab.robino.dev/getting-started/#frameworks), without one, or even directly in a markdown file. These components will work [regardless of your project's architecture](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/).
|
10
|
-
- **drab** does _not_ use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so you can style content within these elements as usual with CSS.
|
11
|
-
- Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at---creating reusable markup that can be server side rendered.
|
12
|
-
- Each element can be imported, extended, named, and used however you see fit.
|
13
|
-
|
14
|
-
### Minimal bundle size
|
15
|
-
|
16
|
-
- **drab** has zero dependencies.
|
17
|
-
|
18
|
-
### Write JavaScript, or don't
|
19
|
-
|
20
|
-
- Elements can be [installed](http://drab.robino.dev/getting-started/#install) as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
|
21
|
-
- Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
|
22
|
-
|
23
|
-
### Built in animations
|
24
|
-
|
25
|
-
- Uses the [web animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) for transitions.
|
26
|
-
- Transitions are disabled for users who prefer reduced motion.
|
27
|
-
- Extend the `Animate` element to build your own elements.
|
28
|
-
|
29
|
-
## Contributing
|
30
|
-
|
31
|
-
Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
|
32
|
-
|
33
|
-
Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
|
34
|
-
|
35
|
-
### Local Development
|
36
|
-
|
37
|
-
This library is built with [TypeScript](https://www.typescriptlang.org/) and [tsup](https://tsup.egoist.dev/). The docs are built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and [TailwindCSS](https://tailwindcss.com). The package contents are located in `src/package`.
|
38
|
-
|
39
|
-
1. Clone the [repository](https://github.com/rossrobino/drab)
|
40
|
-
2. `bun i`
|
41
|
-
3. `bun dev`
|
42
|
-
|
43
|
-
### Making changes
|
44
|
-
|
45
|
-
1. Add or edit the element in `src/package`---each element should extend `Base` or `Animate`. Each element has a `index.ts` file with the source code, and then a `define.ts` file where it is imported and called for use with a CDN.
|
46
|
-
2. Add or edit the example in `src/docs`.
|
47
|
-
3. Export the element from `src/package/index.ts`.
|
48
|
-
4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
|
49
|
-
5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with tsup.
|
package/animate/define.iife.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(()=>{var l=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends l{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let m of a)delete s[m],delete o[m]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(m=>m.offset===r);a?a[o]=e:i.push({[o]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};customElements.define("drab-animate",f);})();
|
package/animate/define.js
DELETED
package/animate/index.d.ts
DELETED
@@ -1,57 +0,0 @@
|
|
1
|
-
import { Base } from "../base/index.js";
|
2
|
-
type AnimationKeyframe = `animation-keyframe-${"from" | "to" | number}-${string}`;
|
3
|
-
type AnimationOption = `animation-option-${"easing" | "duration" | "delay"}`;
|
4
|
-
export type AnimateAttributes = Partial<{
|
5
|
-
[K in AnimationKeyframe | AnimationOption]: string;
|
6
|
-
}>;
|
7
|
-
/**
|
8
|
-
* The `Animate` base class provides a declarative way to use the
|
9
|
-
* [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
|
10
|
-
* through HTML attributes. The `animateElement` method uses these attributes and
|
11
|
-
* persists the final animation state. Other elements in **drab** extend this class
|
12
|
-
* to provide animations. You can also extend this class to create your own custom
|
13
|
-
* animated element.
|
14
|
-
*
|
15
|
-
* Keyframes can be set via HTML attributes on the element in the form of:
|
16
|
-
*
|
17
|
-
* ```html
|
18
|
-
* <drab-animate animation-keyframe-offset-property="value">
|
19
|
-
* ```
|
20
|
-
*
|
21
|
-
* `offset` can be `to`, `from`, or a `number`.
|
22
|
-
*
|
23
|
-
* `property` can be any animatable CSS property separated by dashes.
|
24
|
-
*
|
25
|
-
* Animations `options` can be set:
|
26
|
-
*
|
27
|
-
* ```html
|
28
|
-
* <drab-animate animation-option-property="value">
|
29
|
-
* ```
|
30
|
-
*
|
31
|
-
* `property` can be `duration`, `delay`, or `easing`.
|
32
|
-
*/
|
33
|
-
export declare class Animate extends Base {
|
34
|
-
constructor();
|
35
|
-
/**
|
36
|
-
* @returns An object containing the values of each `animation-option` attribute
|
37
|
-
*/
|
38
|
-
get animationOptions(): KeyframeAnimationOptions;
|
39
|
-
/**
|
40
|
-
* @description
|
41
|
-
* Animates a particular element using the web animations API.
|
42
|
-
*
|
43
|
-
* - Disables animation if the user prefers reduced motion.
|
44
|
-
* - Sets default options
|
45
|
-
* - Uses the keyframes provided from `this.keyframes`
|
46
|
-
* - Waits for the animation to complete
|
47
|
-
* - Sets the start and end styles based on the first and last keyframe
|
48
|
-
*
|
49
|
-
* @param animateOptions - animates `this.content()` by default
|
50
|
-
*/
|
51
|
-
animateElement(animateOptions?: {
|
52
|
-
element?: HTMLElement;
|
53
|
-
options?: KeyframeAnimationOptions;
|
54
|
-
}): Promise<void>;
|
55
|
-
get keyframes(): Keyframe[];
|
56
|
-
}
|
57
|
-
export {};
|
package/animate/index.iife.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(l=>l.offset===r);a?a[o]=e:i.push({[o]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};})();
|