eSales Media Git repositories
Browse code

Update htmx lib

Benjamin Roth authored on08/03/2024 10:15:01
Showing1 changed files
public/ext/loading-states.js
History View file @99ecf62
... ... 
@@ -25,28 +25,28 @@
25 25 
 		if (delayElt) {
26 26 
 			const delayInMilliseconds =
27 27 
 				delayElt.getAttribute('data-loading-delay') || 200
28 
-			const timeout = setTimeout(() => {
28 
+			const timeout = setTimeout(function () {
29 29 
 				doCallback()
30 30
31 
-				loadingStatesUndoQueue.push(() => {
32 
-					mayProcessUndoCallback(targetElt, () => undoCallback())
31 
+				loadingStatesUndoQueue.push(function () {
32 
+					mayProcessUndoCallback(targetElt, undoCallback)
33 33 
 				})
34 34 
 			}, delayInMilliseconds)
35 35
36 
-			loadingStatesUndoQueue.push(() => {
37 
-				mayProcessUndoCallback(targetElt, () => clearTimeout(timeout))
36 
+			loadingStatesUndoQueue.push(function () {
37 
+				mayProcessUndoCallback(targetElt, function () { clearTimeout(timeout) })
38 38 
 			})
39 39 
 		} else {
40 40 
 			doCallback()
41 
-			loadingStatesUndoQueue.push(() => {
42 
-				mayProcessUndoCallback(targetElt, () => undoCallback())
41 
+			loadingStatesUndoQueue.push(function () {
42 
+				mayProcessUndoCallback(targetElt, undoCallback)
43 43 
 			})
44 44 
 		}
45 45 
 	}
46 46
47 47 
 	function getLoadingStateElts(loadingScope, type, path) {
48 
-		return Array.from(htmx.findAll(loadingScope, `[${type}]`)).filter(
49 
-			(elt) => mayProcessLoadingStateByPath(elt, path)
48 
+		return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
49 
+			function (elt) { return mayProcessLoadingStateByPath(elt, path) }
50 50 
 		)
51 51 
 	}
52 52
... ... 
@@ -74,7 +74,7 @@
74 74
75 75 
 				let loadingStateEltsByType = {}
76 76
77 
-				loadingStateTypes.forEach((type) => {
77 
+				loadingStateTypes.forEach(function (type) {
78 78 
 					loadingStateEltsByType[type] = getLoadingStateElts(
79 79 
 						container,
80 80 
 						type,
... ... 
@@ -82,87 +82,91 @@
82 82 
 					)
83 83 
 				})
84 84
85 
-				loadingStateEltsByType['data-loading'].forEach((sourceElt) => {
86 
-					getLoadingTarget(sourceElt).forEach((targetElt) => {
85 
+				loadingStateEltsByType['data-loading'].forEach(function (sourceElt) {
86 
+					getLoadingTarget(sourceElt).forEach(function (targetElt) {
87 87 
 						queueLoadingState(
88 88 
 							sourceElt,
89 89 
 							targetElt,
90 
-							() =>
91 
-								(targetElt.style.display =
90 
+							function () {
91 
+								targetElt.style.display =
92 92 
 									sourceElt.getAttribute('data-loading') ||
93 
-									'inline-block'),
94 
-							() => (targetElt.style.display = 'none')
93 
+									'inline-block' },
94 
+							function () { targetElt.style.display = 'none' }
95 95 
 						)
96 96 
 					})
97 97 
 				})
98 98
99 99 
 				loadingStateEltsByType['data-loading-class'].forEach(
100 
-					(sourceElt) => {
100 
+					function (sourceElt) {
101 101 
 						const classNames = sourceElt
102 102 
 							.getAttribute('data-loading-class')
103 103 
 							.split(' ')
104 104
105 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
105 
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
106 106 
 							queueLoadingState(
107 107 
 								sourceElt,
108 108 
 								targetElt,
109 
-								() =>
110 
-									classNames.forEach((className) =>
111 
-										targetElt.classList.add(className)
112 
-									),
113 
-								() =>
114 
-									classNames.forEach((className) =>
115 
-										targetElt.classList.remove(className)
116 
-									)
109 
+								function () {
110 
+									classNames.forEach(function (className) {
111 
+                                        targetElt.classList.add(className)
112 
+                                    })
113 
+                                },
114 
+								function() {
115 
+									classNames.forEach(function (className) {
116 
+                                        targetElt.classList.remove(className)
117 
+                                    })
118 
+                                }
117 119 
 							)
118 120 
 						})
119 121 
 					}
120 122 
 				)
121 123
122 124 
 				loadingStateEltsByType['data-loading-class-remove'].forEach(
123 
-					(sourceElt) => {
125 
+					function (sourceElt) {
124 126 
 						const classNames = sourceElt
125 127 
 							.getAttribute('data-loading-class-remove')
126 128 
 							.split(' ')
127 129
128 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
130 
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
129 131 
 							queueLoadingState(
130 132 
 								sourceElt,
131 133 
 								targetElt,
132 
-								() =>
133 
-									classNames.forEach((className) =>
134 
-										targetElt.classList.remove(className)
135 
-									),
136 
-								() =>
137 
-									classNames.forEach((className) =>
138 
-										targetElt.classList.add(className)
139 
-									)
134 
+								function () {
135 
+									classNames.forEach(function (className) {
136 
+                                        targetElt.classList.remove(className)
137 
+                                    })
138 
+                                },
139 
+								function() {
140 
+									classNames.forEach(function (className) {
141 
+                                        targetElt.classList.add(className)
142 
+                                    })
143 
+                                }
140 144 
 							)
141 145 
 						})
142 146 
 					}
143 147 
 				)
144 148
145 149 
 				loadingStateEltsByType['data-loading-disable'].forEach(
146 
-					(sourceElt) => {
147 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
150 
+					function (sourceElt) {
151 
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
148 152 
 							queueLoadingState(
149 153 
 								sourceElt,
150 154 
 								targetElt,
151 
-								() => (targetElt.disabled = true),
152 
-								() => (targetElt.disabled = false)
155 
+								function() { targetElt.disabled = true },
156 
+                                function() { targetElt.disabled = false }
153 157 
 							)
154 158 
 						})
155 159 
 					}
156 160 
 				)
157 161
158 162 
 				loadingStateEltsByType['data-loading-aria-busy'].forEach(
159 
-					(sourceElt) => {
160 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
163 
+					function (sourceElt) {
164 
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
161 165 
 							queueLoadingState(
162 166 
 								sourceElt,
163 167 
 								targetElt,
164 
-								() => (targetElt.setAttribute("aria-busy", "true")),
165 
-								() => (targetElt.removeAttribute("aria-busy"))
168 
+								function () { targetElt.setAttribute("aria-busy", "true") },
169 
+								function () { targetElt.removeAttribute("aria-busy") }
166 170 
 							)
167 171 
 						})
168 172 
 					}
Browse code

Initial htmx npm packages installation

Benjamin Roth authored on25/05/2023 09:52:13
Showing1 changed files
public/ext/loading-states.js
History View file @13d4372
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,179 @@
1 
+;(function () {
2 
+	let loadingStatesUndoQueue = []
3 
+
4 
+	function loadingStateContainer(target) {
5 
+		return htmx.closest(target, '[data-loading-states]') || document.body
6 
+	}
7 
+
8 
+	function mayProcessUndoCallback(target, callback) {
9 
+		if (document.body.contains(target)) {
10 
+			callback()
11 
+		}
12 
+	}
13 
+
14 
+	function mayProcessLoadingStateByPath(elt, requestPath) {
15 
+		const pathElt = htmx.closest(elt, '[data-loading-path]')
16 
+		if (!pathElt) {
17 
+			return true
18 
+		}
19 
+
20 
+		return pathElt.getAttribute('data-loading-path') === requestPath
21 
+	}
22 
+
23 
+	function queueLoadingState(sourceElt, targetElt, doCallback, undoCallback) {
24 
+		const delayElt = htmx.closest(sourceElt, '[data-loading-delay]')
25 
+		if (delayElt) {
26 
+			const delayInMilliseconds =
27 
+				delayElt.getAttribute('data-loading-delay') || 200
28 
+			const timeout = setTimeout(() => {
29 
+				doCallback()
30 
+
31 
+				loadingStatesUndoQueue.push(() => {
32 
+					mayProcessUndoCallback(targetElt, () => undoCallback())
33 
+				})
34 
+			}, delayInMilliseconds)
35 
+
36 
+			loadingStatesUndoQueue.push(() => {
37 
+				mayProcessUndoCallback(targetElt, () => clearTimeout(timeout))
38 
+			})
39 
+		} else {
40 
+			doCallback()
41 
+			loadingStatesUndoQueue.push(() => {
42 
+				mayProcessUndoCallback(targetElt, () => undoCallback())
43 
+			})
44 
+		}
45 
+	}
46 
+
47 
+	function getLoadingStateElts(loadingScope, type, path) {
48 
+		return Array.from(htmx.findAll(loadingScope, `[${type}]`)).filter(
49 
+			(elt) => mayProcessLoadingStateByPath(elt, path)
50 
+		)
51 
+	}
52 
+
53 
+	function getLoadingTarget(elt) {
54 
+		if (elt.getAttribute('data-loading-target')) {
55 
+			return Array.from(
56 
+				htmx.findAll(elt.getAttribute('data-loading-target'))
57 
+			)
58 
+		}
59 
+		return [elt]
60 
+	}
61 
+
62 
+	htmx.defineExtension('loading-states', {
63 
+		onEvent: function (name, evt) {
64 
+			if (name === 'htmx:beforeRequest') {
65 
+				const container = loadingStateContainer(evt.target)
66 
+
67 
+				const loadingStateTypes = [
68 
+					'data-loading',
69 
+					'data-loading-class',
70 
+					'data-loading-class-remove',
71 
+					'data-loading-disable',
72 
+					'data-loading-aria-busy',
73 
+				]
74 
+
75 
+				let loadingStateEltsByType = {}
76 
+
77 
+				loadingStateTypes.forEach((type) => {
78 
+					loadingStateEltsByType[type] = getLoadingStateElts(
79 
+						container,
80 
+						type,
81 
+						evt.detail.pathInfo.requestPath
82 
+					)
83 
+				})
84 
+
85 
+				loadingStateEltsByType['data-loading'].forEach((sourceElt) => {
86 
+					getLoadingTarget(sourceElt).forEach((targetElt) => {
87 
+						queueLoadingState(
88 
+							sourceElt,
89 
+							targetElt,
90 
+							() =>
91 
+								(targetElt.style.display =
92 
+									sourceElt.getAttribute('data-loading') ||
93 
+									'inline-block'),
94 
+							() => (targetElt.style.display = 'none')
95 
+						)
96 
+					})
97 
+				})
98 
+
99 
+				loadingStateEltsByType['data-loading-class'].forEach(
100 
+					(sourceElt) => {
101 
+						const classNames = sourceElt
102 
+							.getAttribute('data-loading-class')
103 
+							.split(' ')
104 
+
105 
+						getLoadingTarget(sourceElt).forEach((targetElt) => {
106 
+							queueLoadingState(
107 
+								sourceElt,
108 
+								targetElt,
109 
+								() =>
110 
+									classNames.forEach((className) =>
111 
+										targetElt.classList.add(className)
112 
+									),
113 
+								() =>
114 
+									classNames.forEach((className) =>
115 
+										targetElt.classList.remove(className)
116 
+									)
117 
+							)
118 
+						})
119 
+					}
120 
+				)
121 
+
122 
+				loadingStateEltsByType['data-loading-class-remove'].forEach(
123 
+					(sourceElt) => {
124 
+						const classNames = sourceElt
125 
+							.getAttribute('data-loading-class-remove')
126 
+							.split(' ')
127 
+
128 
+						getLoadingTarget(sourceElt).forEach((targetElt) => {
129 
+							queueLoadingState(
130 
+								sourceElt,
131 
+								targetElt,
132 
+								() =>
133 
+									classNames.forEach((className) =>
134 
+										targetElt.classList.remove(className)
135 
+									),
136 
+								() =>
137 
+									classNames.forEach((className) =>
138 
+										targetElt.classList.add(className)
139 
+									)
140 
+							)
141 
+						})
142 
+					}
143 
+				)
144 
+
145 
+				loadingStateEltsByType['data-loading-disable'].forEach(
146 
+					(sourceElt) => {
147 
+						getLoadingTarget(sourceElt).forEach((targetElt) => {
148 
+							queueLoadingState(
149 
+								sourceElt,
150 
+								targetElt,
151 
+								() => (targetElt.disabled = true),
152 
+								() => (targetElt.disabled = false)
153 
+							)
154 
+						})
155 
+					}
156 
+				)
157 
+
158 
+				loadingStateEltsByType['data-loading-aria-busy'].forEach(
159 
+					(sourceElt) => {
160 
+						getLoadingTarget(sourceElt).forEach((targetElt) => {
161 
+							queueLoadingState(
162 
+								sourceElt,
163 
+								targetElt,
164 
+								() => (targetElt.setAttribute("aria-busy", "true")),
165 
+								() => (targetElt.removeAttribute("aria-busy"))
166 
+							)
167 
+						})
168 
+					}
169 
+				)
170 
+			}
171 
+
172 
+			if (name === 'htmx:beforeOnLoad') {
173 
+				while (loadingStatesUndoQueue.length > 0) {
174 
+					loadingStatesUndoQueue.shift()()
175 
+				}
176 
+			}
177 
+		},
178 
+	})
179 
+})()