https://fddb.info/static/js/loading-states.js?t=1789549514

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 = delayElt.getAttribute("data-loading-delay") ||
27        200;
28      const timeout = setTimeout(function () {
29        doCallback();
30
31        loadingStatesUndoQueue.push(function () {
32          mayProcessUndoCallback(targetElt, undoCallback);
33        });
34      }, delayInMilliseconds);
35
36      loadingStatesUndoQueue.push(function () {
37        mayProcessUndoCallback(targetElt, function () {
38          clearTimeout(timeout);
39        });
40      });
41    } else {
42      doCallback();
43      loadingStatesUndoQueue.push(function () {
44        mayProcessUndoCallback(targetElt, undoCallback);
45      });
46    }
47  }
48
49  function getLoadingStateElts(loadingScope, type, path) {
50    return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
51      function (elt) {
52        return mayProcessLoadingStateByPath(elt, path);
53      },
54    );
55  }
56
57  function getLoadingTarget(elt) {
58    if (elt.getAttribute("data-loading-target")) {
59      return Array.from(
60        htmx.findAll(elt.getAttribute("data-loading-target")),
61      );
62    }
63    return [elt];
64  }
65
66  htmx.defineExtension("loading-states", {
67    onEvent: function (name, evt) {
68      if (name === "htmx:beforeRequest") {
69        const container = loadingStateContainer(evt.target);
70
71        const loadingStateTypes = [
72          "data-loading",
73          "data-loading-class",
74          "data-loading-class-remove",
75          "data-loading-disable",
76          "data-loading-aria-busy",
77        ];
78
79        let loadingStateEltsByType = {};
80
81        loadingStateTypes.forEach(function (type) {
82          loadingStateEltsByType[type] = getLoadingStateElts(
83            container,
84            type,
85            evt.detail.pathInfo.requestPath,
86          );
87        });
88
89        loadingStateEltsByType["data-loading"].forEach(function (sourceElt) {
90          getLoadingTarget(sourceElt).forEach(function (targetElt) {
91            queueLoadingState(
92              sourceElt,
93              targetElt,
94              function () {
95                targetElt.style.display =
96                  sourceElt.getAttribute("data-loading") ||
97                  "inline-block";
98              },
99              function () {
100                targetElt.style.display = "none";
101              },
102            );
103          });
104        });
105
106        loadingStateEltsByType["data-loading-class"].forEach(
107          function (sourceElt) {
108            const classNames = sourceElt
109              .getAttribute("data-loading-class")
110              .split(" ");
111
112            getLoadingTarget(sourceElt).forEach(function (targetElt) {
113              queueLoadingState(
114                sourceElt,
115                targetElt,
116                function () {
117                  classNames.forEach(function (className) {
118                    targetElt.classList.add(className);
119                  });
120                },
121                function () {
122                  classNames.forEach(function (className) {
123                    targetElt.classList.remove(className);
124                  });
125                },
126              );
127            });
128          },
129        );
130
131        loadingStateEltsByType["data-loading-class-remove"].forEach(
132          function (sourceElt) {
133            const classNames = sourceElt
134              .getAttribute("data-loading-class-remove")
135              .split(" ");
136
137            getLoadingTarget(sourceElt).forEach(function (targetElt) {
138              queueLoadingState(
139                sourceElt,
140                targetElt,
141                function () {

142                  classNames.forEach(function (className) {
143                    targetElt.classList.remove(className);
144                  });
145                },
146                function () {
147                  classNames.forEach(function (className) {
148                    targetElt.classList.add(className);
149                  });
150                },
151              );
152            });
153          },
154        );
155
156        loadingStateEltsByType["data-loading-disable"].forEach(
157          function (sourceElt) {
158            getLoadingTarget(sourceElt).forEach(function (targetElt) {
159              queueLoadingState(
160                sourceElt,
161                targetElt,
162                function () {
163                  targetElt.disabled = true;
164                },
165                function () {
166                  targetElt.disabled = false;
167                },
168              );
169            });
170          },
171        );
172
173        loadingStateEltsByType["data-loading-aria-busy"].forEach(
174          function (sourceElt) {
175            getLoadingTarget(sourceElt).forEach(function (targetElt) {
176              queueLoadingState(
177                sourceElt,
178                targetElt,
179                function () {
180                  targetElt.setAttribute("aria-busy", "true");
181                },
182                function () {
183                  targetElt.removeAttribute("aria-busy");
184                },
185              );
186            });
187          },
188        );
189      }
190
191      if (name === "htmx:beforeOnLoad") {
192        while (loadingStatesUndoQueue.length > 0) {
193          loadingStatesUndoQueue.shift()();
194        }
195      }
196    },
197  });
198})();