1 | (function(){
|
2 |
|
3 | function splitOnWhitespace(trigger) {
|
4 | return trigger.split(/\s+/);
|
5 | }
|
6 |
|
7 | function parseClassOperation(trimmedValue) {
|
8 | var split = splitOnWhitespace(trimmedValue);
|
9 | if (split.length > 1) {
|
10 | var operation = split[0];
|
11 | var classDef = split[1].trim();
|
12 | var cssClass;
|
13 | var delay;
|
14 | if (classDef.indexOf(":") > 0) {
|
15 | var splitCssClass = classDef.split(':');
|
16 | cssClass = splitCssClass[0];
|
17 | delay = htmx.parseInterval(splitCssClass[1]);
|
18 | } else {
|
19 | cssClass = classDef;
|
20 | delay = 100;
|
21 | }
|
22 | return {
|
23 | operation:operation,
|
24 | cssClass:cssClass,
|
25 | delay:delay
|
26 | }
|
27 | } else {
|
28 | return null;
|
29 | }
|
30 | }
|
31 |
|
32 | function processClassList(elt, classList) {
|
33 | var runs = classList.split("&");
|
34 | for (var i = 0; i < runs.length; i++) {
|
35 | var run = runs[i];
|
36 | var currentRunTime = 0;
|
37 | var classOperations = run.split(",");
|
38 | for (var j = 0; j < classOperations.length; j++) {
|
39 | var value = classOperations[j];
|
40 | var trimmedValue = value.trim();
|
41 | var classOperation = parseClassOperation(trimmedValue);
|
42 | if (classOperation) {
|
43 | if (classOperation.operation === "toggle") {
|
44 | setTimeout(function () {
|
45 | setInterval(function () {
|
46 | elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
|
47 | }, classOperation.delay);
|
48 | }, currentRunTime);
|
49 | currentRunTime = currentRunTime + classOperation.delay;
|
50 | } else {
|
51 | currentRunTime = currentRunTime + classOperation.delay;
|
52 | setTimeout(function () {
|
53 | elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
|
54 | }, currentRunTime);
|
55 | }
|
56 | }
|
57 | }
|
58 | }
|
59 | }
|
60 |
|
61 | function maybeProcessClasses(elt) {
|
62 | if (elt.getAttribute) {
|
63 | var classList = elt.getAttribute("classes") || elt.getAttribute("data-classes");
|
64 | if (classList) {
|
65 | processClassList(elt, classList);
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | htmx.defineExtension('class-tools', {
|
71 | onEvent: function (name, evt) {
|
72 | if (name === "htmx:processedNode") {
|
73 | var elt = evt.detail.elt;
|
74 | maybeProcessClasses(elt);
|
75 | if (elt.querySelectorAll) {
|
76 | var children = elt.querySelectorAll("[classes], [data-classes]");
|
77 | for (var i = 0; i < children.length; i++) {
|
78 | maybeProcessClasses(children[i]);
|
79 | }
|
80 | }
|
81 | }
|
82 | }
|
83 | });
|
84 | })();
|