saloe 0.0.64 → 0.0.65
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/listener.cjs.js +31 -30
- package/dist/listener.es.js +31 -30
- package/package.json +1 -1
- package/src/listener.js +44 -42
package/dist/listener.cjs.js
CHANGED
|
@@ -16,8 +16,8 @@ const listener = ({
|
|
|
16
16
|
"focus",
|
|
17
17
|
"invalid"
|
|
18
18
|
];
|
|
19
|
-
const addListener = ({ srcElement,
|
|
20
|
-
srcElement == null ? void 0 : srcElement.addEventListener(
|
|
19
|
+
const addListener = ({ srcElement, eventName, listeners }) => {
|
|
20
|
+
srcElement == null ? void 0 : srcElement.addEventListener(eventName, (e) => {
|
|
21
21
|
executeListeners({ e, srcElement, listeners });
|
|
22
22
|
});
|
|
23
23
|
};
|
|
@@ -26,27 +26,27 @@ const listener = ({
|
|
|
26
26
|
if (listener2) listener2({ e, srcElement });
|
|
27
27
|
});
|
|
28
28
|
};
|
|
29
|
-
const getListenerFromScript = ({ script,
|
|
29
|
+
const getListenerFromScript = ({ script, eventName }) => {
|
|
30
30
|
var _a;
|
|
31
31
|
if (!script) return null;
|
|
32
|
-
if (script[
|
|
33
|
-
const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][
|
|
32
|
+
if (script[eventName]) return script[eventName];
|
|
33
|
+
const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][eventName]);
|
|
34
34
|
if (!prev) return null;
|
|
35
|
-
return script[prev][
|
|
35
|
+
return script[prev][eventName];
|
|
36
36
|
};
|
|
37
|
-
const fetchListeners = async ({ srcElement,
|
|
37
|
+
const fetchListeners = async ({ srcElement, eventName, e }) => {
|
|
38
38
|
var _a;
|
|
39
39
|
if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
|
|
40
|
-
const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${
|
|
40
|
+
const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${eventName}`);
|
|
41
41
|
if (!scriptNames) return;
|
|
42
|
-
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(
|
|
42
|
+
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault();
|
|
43
43
|
const scripts = await Promise.all(
|
|
44
44
|
(_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
|
|
45
45
|
const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
|
|
46
46
|
return importScriptDynamically({ path: scriptToImport });
|
|
47
47
|
})
|
|
48
48
|
);
|
|
49
|
-
const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script,
|
|
49
|
+
const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, eventName }));
|
|
50
50
|
return listeners;
|
|
51
51
|
};
|
|
52
52
|
const addScripts = () => {
|
|
@@ -101,12 +101,12 @@ const listener = ({
|
|
|
101
101
|
});
|
|
102
102
|
};
|
|
103
103
|
const fireLoadListener = () => {
|
|
104
|
-
const
|
|
105
|
-
const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${
|
|
104
|
+
const eventName = "load";
|
|
105
|
+
const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${eventName}]`);
|
|
106
106
|
srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
|
|
107
|
-
const listeners = await fetchListeners({ srcElement,
|
|
107
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null });
|
|
108
108
|
executeListeners({ e: null, srcElement, listeners });
|
|
109
|
-
srcElement == null ? void 0 : srcElement.removeAttribute(`on-${
|
|
109
|
+
srcElement == null ? void 0 : srcElement.removeAttribute(`on-${eventName}`);
|
|
110
110
|
});
|
|
111
111
|
};
|
|
112
112
|
const fireObserverListeners = () => {
|
|
@@ -122,7 +122,7 @@ const listener = ({
|
|
|
122
122
|
uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
|
|
123
123
|
const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
|
|
124
124
|
const script = await importScriptDynamically({ path: `/${scriptName == null ? void 0 : scriptName.trim()}.js` });
|
|
125
|
-
const listener2 = getListenerFromScript({ script,
|
|
125
|
+
const listener2 = getListenerFromScript({ script, eventName: "observe" });
|
|
126
126
|
if (!listener2) return;
|
|
127
127
|
const observer = new IntersectionObserver((entries) => {
|
|
128
128
|
entries.forEach((entry) => listener2({ entry, observer }));
|
|
@@ -139,9 +139,9 @@ const listener = ({
|
|
|
139
139
|
});
|
|
140
140
|
});
|
|
141
141
|
};
|
|
142
|
-
const getSrcElement = ({ srcElement,
|
|
142
|
+
const getSrcElement = ({ srcElement, eventName }) => {
|
|
143
143
|
if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
|
|
144
|
-
const attribute = `on-${
|
|
144
|
+
const attribute = `on-${eventName}`;
|
|
145
145
|
const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
|
|
146
146
|
if (hasScriptName) return srcElement;
|
|
147
147
|
const query = `:is(${["a", "button", ...SRC_ELEMEMENTS_QUERY].join(",")})[${attribute}]`;
|
|
@@ -161,32 +161,33 @@ const listener = ({
|
|
|
161
161
|
const anchors = document.querySelectorAll("a[on-click]");
|
|
162
162
|
anchors == null ? void 0 : anchors.forEach((anchor) => {
|
|
163
163
|
const srcElement = anchor;
|
|
164
|
-
const
|
|
165
|
-
anchor.addEventListener(
|
|
164
|
+
const eventName = "click";
|
|
165
|
+
anchor.addEventListener(eventName, async (e) => {
|
|
166
166
|
e.preventDefault();
|
|
167
|
-
const listeners = await fetchListeners({ srcElement,
|
|
167
|
+
const listeners = await fetchListeners({ srcElement, eventName, e });
|
|
168
168
|
executeListeners({ e, srcElement, listeners });
|
|
169
|
+
console.log("--- eventName =", eventName);
|
|
169
170
|
const newAnchor = cloneSrcElement({ srcElement });
|
|
170
171
|
newAnchor.click();
|
|
171
172
|
});
|
|
172
|
-
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${
|
|
173
|
+
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
|
|
173
174
|
});
|
|
174
175
|
};
|
|
175
176
|
const fireListeners = () => {
|
|
176
|
-
EVENTS.forEach((
|
|
177
|
-
document.body[`on${
|
|
178
|
-
const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement,
|
|
179
|
-
if ((srcElement == null ? void 0 : srcElement.tagName) === "A" &&
|
|
180
|
-
const listeners = await fetchListeners({ srcElement,
|
|
177
|
+
EVENTS.forEach((eventName) => {
|
|
178
|
+
document.body[`on${eventName}`] = async (e) => {
|
|
179
|
+
const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, eventName });
|
|
180
|
+
if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && eventName === "click") return;
|
|
181
|
+
const listeners = await fetchListeners({ srcElement, eventName, e });
|
|
181
182
|
executeListeners({ e, srcElement, listeners });
|
|
182
|
-
addListener({ srcElement,
|
|
183
|
-
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${
|
|
183
|
+
addListener({ srcElement, eventName, listeners });
|
|
184
|
+
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
|
|
184
185
|
};
|
|
185
186
|
});
|
|
186
187
|
const saloeListenEvent = new CustomEvent("saloeListen", {
|
|
187
|
-
detail: { message: "This is a custom
|
|
188
|
+
detail: { message: "This is a custom eventName!" }
|
|
188
189
|
});
|
|
189
|
-
document.body.addEventListener("saloeListen", async (
|
|
190
|
+
document.body.addEventListener("saloeListen", async (e) => {
|
|
190
191
|
await addScripts();
|
|
191
192
|
fireLoadListener();
|
|
192
193
|
fireObserverListeners();
|
package/dist/listener.es.js
CHANGED
|
@@ -14,8 +14,8 @@ const listener = ({
|
|
|
14
14
|
"focus",
|
|
15
15
|
"invalid"
|
|
16
16
|
];
|
|
17
|
-
const addListener = ({ srcElement,
|
|
18
|
-
srcElement == null ? void 0 : srcElement.addEventListener(
|
|
17
|
+
const addListener = ({ srcElement, eventName, listeners }) => {
|
|
18
|
+
srcElement == null ? void 0 : srcElement.addEventListener(eventName, (e) => {
|
|
19
19
|
executeListeners({ e, srcElement, listeners });
|
|
20
20
|
});
|
|
21
21
|
};
|
|
@@ -24,27 +24,27 @@ const listener = ({
|
|
|
24
24
|
if (listener2) listener2({ e, srcElement });
|
|
25
25
|
});
|
|
26
26
|
};
|
|
27
|
-
const getListenerFromScript = ({ script,
|
|
27
|
+
const getListenerFromScript = ({ script, eventName }) => {
|
|
28
28
|
var _a;
|
|
29
29
|
if (!script) return null;
|
|
30
|
-
if (script[
|
|
31
|
-
const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][
|
|
30
|
+
if (script[eventName]) return script[eventName];
|
|
31
|
+
const prev = (_a = Object.keys(script)) == null ? void 0 : _a.find((key) => script[key][eventName]);
|
|
32
32
|
if (!prev) return null;
|
|
33
|
-
return script[prev][
|
|
33
|
+
return script[prev][eventName];
|
|
34
34
|
};
|
|
35
|
-
const fetchListeners = async ({ srcElement,
|
|
35
|
+
const fetchListeners = async ({ srcElement, eventName, e }) => {
|
|
36
36
|
var _a;
|
|
37
37
|
if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
|
|
38
|
-
const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${
|
|
38
|
+
const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${eventName}`);
|
|
39
39
|
if (!scriptNames) return;
|
|
40
|
-
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(
|
|
40
|
+
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault();
|
|
41
41
|
const scripts = await Promise.all(
|
|
42
42
|
(_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
|
|
43
43
|
const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
|
|
44
44
|
return importScriptDynamically({ path: scriptToImport });
|
|
45
45
|
})
|
|
46
46
|
);
|
|
47
|
-
const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script,
|
|
47
|
+
const listeners = scripts == null ? void 0 : scripts.map((script) => getListenerFromScript({ script, eventName }));
|
|
48
48
|
return listeners;
|
|
49
49
|
};
|
|
50
50
|
const addScripts = () => {
|
|
@@ -99,12 +99,12 @@ const listener = ({
|
|
|
99
99
|
});
|
|
100
100
|
};
|
|
101
101
|
const fireLoadListener = () => {
|
|
102
|
-
const
|
|
103
|
-
const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${
|
|
102
|
+
const eventName = "load";
|
|
103
|
+
const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${eventName}]`);
|
|
104
104
|
srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
|
|
105
|
-
const listeners = await fetchListeners({ srcElement,
|
|
105
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null });
|
|
106
106
|
executeListeners({ e: null, srcElement, listeners });
|
|
107
|
-
srcElement == null ? void 0 : srcElement.removeAttribute(`on-${
|
|
107
|
+
srcElement == null ? void 0 : srcElement.removeAttribute(`on-${eventName}`);
|
|
108
108
|
});
|
|
109
109
|
};
|
|
110
110
|
const fireObserverListeners = () => {
|
|
@@ -120,7 +120,7 @@ const listener = ({
|
|
|
120
120
|
uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
|
|
121
121
|
const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
|
|
122
122
|
const script = await importScriptDynamically({ path: `/${scriptName == null ? void 0 : scriptName.trim()}.js` });
|
|
123
|
-
const listener2 = getListenerFromScript({ script,
|
|
123
|
+
const listener2 = getListenerFromScript({ script, eventName: "observe" });
|
|
124
124
|
if (!listener2) return;
|
|
125
125
|
const observer = new IntersectionObserver((entries) => {
|
|
126
126
|
entries.forEach((entry) => listener2({ entry, observer }));
|
|
@@ -137,9 +137,9 @@ const listener = ({
|
|
|
137
137
|
});
|
|
138
138
|
});
|
|
139
139
|
};
|
|
140
|
-
const getSrcElement = ({ srcElement,
|
|
140
|
+
const getSrcElement = ({ srcElement, eventName }) => {
|
|
141
141
|
if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
|
|
142
|
-
const attribute = `on-${
|
|
142
|
+
const attribute = `on-${eventName}`;
|
|
143
143
|
const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
|
|
144
144
|
if (hasScriptName) return srcElement;
|
|
145
145
|
const query = `:is(${["a", "button", ...SRC_ELEMEMENTS_QUERY].join(",")})[${attribute}]`;
|
|
@@ -159,32 +159,33 @@ const listener = ({
|
|
|
159
159
|
const anchors = document.querySelectorAll("a[on-click]");
|
|
160
160
|
anchors == null ? void 0 : anchors.forEach((anchor) => {
|
|
161
161
|
const srcElement = anchor;
|
|
162
|
-
const
|
|
163
|
-
anchor.addEventListener(
|
|
162
|
+
const eventName = "click";
|
|
163
|
+
anchor.addEventListener(eventName, async (e) => {
|
|
164
164
|
e.preventDefault();
|
|
165
|
-
const listeners = await fetchListeners({ srcElement,
|
|
165
|
+
const listeners = await fetchListeners({ srcElement, eventName, e });
|
|
166
166
|
executeListeners({ e, srcElement, listeners });
|
|
167
|
+
console.log("--- eventName =", eventName);
|
|
167
168
|
const newAnchor = cloneSrcElement({ srcElement });
|
|
168
169
|
newAnchor.click();
|
|
169
170
|
});
|
|
170
|
-
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${
|
|
171
|
+
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
|
|
171
172
|
});
|
|
172
173
|
};
|
|
173
174
|
const fireListeners = () => {
|
|
174
|
-
EVENTS.forEach((
|
|
175
|
-
document.body[`on${
|
|
176
|
-
const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement,
|
|
177
|
-
if ((srcElement == null ? void 0 : srcElement.tagName) === "A" &&
|
|
178
|
-
const listeners = await fetchListeners({ srcElement,
|
|
175
|
+
EVENTS.forEach((eventName) => {
|
|
176
|
+
document.body[`on${eventName}`] = async (e) => {
|
|
177
|
+
const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, eventName });
|
|
178
|
+
if ((srcElement == null ? void 0 : srcElement.tagName) === "A" && eventName === "click") return;
|
|
179
|
+
const listeners = await fetchListeners({ srcElement, eventName, e });
|
|
179
180
|
executeListeners({ e, srcElement, listeners });
|
|
180
|
-
addListener({ srcElement,
|
|
181
|
-
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${
|
|
181
|
+
addListener({ srcElement, eventName, listeners });
|
|
182
|
+
if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${eventName}`);
|
|
182
183
|
};
|
|
183
184
|
});
|
|
184
185
|
const saloeListenEvent = new CustomEvent("saloeListen", {
|
|
185
|
-
detail: { message: "This is a custom
|
|
186
|
+
detail: { message: "This is a custom eventName!" }
|
|
186
187
|
});
|
|
187
|
-
document.body.addEventListener("saloeListen", async (
|
|
188
|
+
document.body.addEventListener("saloeListen", async (e) => {
|
|
188
189
|
await addScripts();
|
|
189
190
|
fireLoadListener();
|
|
190
191
|
fireObserverListeners();
|
package/package.json
CHANGED
package/src/listener.js
CHANGED
|
@@ -16,8 +16,8 @@ const listener = ({
|
|
|
16
16
|
'invalid',
|
|
17
17
|
]
|
|
18
18
|
|
|
19
|
-
const addListener = ({ srcElement,
|
|
20
|
-
srcElement?.addEventListener(
|
|
19
|
+
const addListener = ({ srcElement, eventName, listeners }) => {
|
|
20
|
+
srcElement?.addEventListener(eventName, (e) => {
|
|
21
21
|
executeListeners({ e, srcElement, listeners })
|
|
22
22
|
})
|
|
23
23
|
}
|
|
@@ -28,21 +28,21 @@ const listener = ({
|
|
|
28
28
|
})
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
const getListenerFromScript = ({ script,
|
|
31
|
+
const getListenerFromScript = ({ script, eventName }) => {
|
|
32
32
|
if (!script) return null
|
|
33
|
-
if (script[
|
|
34
|
-
const prev = Object.keys(script)?.find((key) => script[key][
|
|
33
|
+
if (script[eventName]) return script[eventName]
|
|
34
|
+
const prev = Object.keys(script)?.find((key) => script[key][eventName])
|
|
35
35
|
if (!prev) return null
|
|
36
|
-
return script[prev][
|
|
36
|
+
return script[prev][eventName]
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
const fetchListeners = async ({ srcElement,
|
|
39
|
+
const fetchListeners = async ({ srcElement, eventName, e }) => {
|
|
40
40
|
if (!srcElement?.getAttribute) return
|
|
41
41
|
|
|
42
|
-
const scriptNames = srcElement?.getAttribute(`on-${
|
|
42
|
+
const scriptNames = srcElement?.getAttribute(`on-${eventName}`)
|
|
43
43
|
if (!scriptNames) return
|
|
44
44
|
|
|
45
|
-
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(
|
|
45
|
+
if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(eventName)) e.preventDefault()
|
|
46
46
|
|
|
47
47
|
const scripts = await Promise.all(
|
|
48
48
|
scriptNames?.split(',')?.map((scriptName) => {
|
|
@@ -51,7 +51,7 @@ const listener = ({
|
|
|
51
51
|
})
|
|
52
52
|
)
|
|
53
53
|
|
|
54
|
-
const listeners = scripts?.map((script) => getListenerFromScript({ script,
|
|
54
|
+
const listeners = scripts?.map((script) => getListenerFromScript({ script, eventName }))
|
|
55
55
|
|
|
56
56
|
return listeners
|
|
57
57
|
}
|
|
@@ -118,47 +118,47 @@ const listener = ({
|
|
|
118
118
|
|
|
119
119
|
// load
|
|
120
120
|
const fireLoadListener = () => {
|
|
121
|
-
const
|
|
122
|
-
const srcElements = document?.querySelectorAll(`[on-${
|
|
121
|
+
const eventName = 'load'
|
|
122
|
+
const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
|
|
123
123
|
|
|
124
124
|
srcElements?.forEach(async (srcElement) => {
|
|
125
|
-
const listeners = await fetchListeners({ srcElement,
|
|
125
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null })
|
|
126
126
|
executeListeners({ e: null, srcElement, listeners })
|
|
127
127
|
|
|
128
|
-
srcElement?.removeAttribute(`on-${
|
|
128
|
+
srcElement?.removeAttribute(`on-${eventName}`)
|
|
129
129
|
})
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
// invalid
|
|
133
133
|
const fireInvalidListener = () => {
|
|
134
|
-
const
|
|
135
|
-
const srcElements = document?.querySelectorAll(`[on-${
|
|
134
|
+
const eventName = 'invalid'
|
|
135
|
+
const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
|
|
136
136
|
|
|
137
137
|
srcElements?.forEach(async (srcElement) => {
|
|
138
|
-
const listeners = await fetchListeners({ srcElement,
|
|
139
|
-
addListener({ srcElement,
|
|
138
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null })
|
|
139
|
+
addListener({ srcElement, eventName, listeners })
|
|
140
140
|
})
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
// blur
|
|
144
144
|
const fireBlurListener = () => {
|
|
145
|
-
const
|
|
146
|
-
const srcElements = document?.querySelectorAll(`[on-${
|
|
145
|
+
const eventName = 'blur'
|
|
146
|
+
const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
|
|
147
147
|
|
|
148
148
|
srcElements?.forEach(async (srcElement) => {
|
|
149
|
-
const listeners = await fetchListeners({ srcElement,
|
|
150
|
-
addListener({ srcElement,
|
|
149
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null })
|
|
150
|
+
addListener({ srcElement, eventName, listeners })
|
|
151
151
|
})
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
// focus
|
|
155
155
|
const fireFocusListener = () => {
|
|
156
|
-
const
|
|
157
|
-
const srcElements = document?.querySelectorAll(`[on-${
|
|
156
|
+
const eventName = 'focus'
|
|
157
|
+
const srcElements = document?.querySelectorAll(`[on-${eventName}]`)
|
|
158
158
|
|
|
159
159
|
srcElements?.forEach(async (srcElement) => {
|
|
160
|
-
const listeners = await fetchListeners({ srcElement,
|
|
161
|
-
addListener({ srcElement,
|
|
160
|
+
const listeners = await fetchListeners({ srcElement, eventName, e: null })
|
|
161
|
+
addListener({ srcElement, eventName, listeners })
|
|
162
162
|
})
|
|
163
163
|
}
|
|
164
164
|
|
|
@@ -180,7 +180,7 @@ const listener = ({
|
|
|
180
180
|
const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`)
|
|
181
181
|
|
|
182
182
|
const script = await importScriptDynamically({ path: `/${scriptName?.trim()}.js` })
|
|
183
|
-
const listener = getListenerFromScript({ script,
|
|
183
|
+
const listener = getListenerFromScript({ script, eventName: 'observe' })
|
|
184
184
|
if (!listener) return
|
|
185
185
|
|
|
186
186
|
const observer = new IntersectionObserver((entries) => {
|
|
@@ -201,9 +201,9 @@ const listener = ({
|
|
|
201
201
|
})
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
const getSrcElement = ({ srcElement,
|
|
204
|
+
const getSrcElement = ({ srcElement, eventName }) => {
|
|
205
205
|
if (!srcElement?.hasAttribute) return srcElement
|
|
206
|
-
const attribute = `on-${
|
|
206
|
+
const attribute = `on-${eventName}`
|
|
207
207
|
const hasScriptName = srcElement?.hasAttribute(attribute)
|
|
208
208
|
if (hasScriptName) return srcElement
|
|
209
209
|
|
|
@@ -229,42 +229,44 @@ const listener = ({
|
|
|
229
229
|
const anchors = document.querySelectorAll('a[on-click]')
|
|
230
230
|
anchors?.forEach((anchor) => {
|
|
231
231
|
const srcElement = anchor
|
|
232
|
-
const
|
|
232
|
+
const eventName = 'click'
|
|
233
233
|
|
|
234
|
-
anchor.addEventListener(
|
|
234
|
+
anchor.addEventListener(eventName, async (e) => {
|
|
235
235
|
e.preventDefault()
|
|
236
236
|
|
|
237
|
-
const listeners = await fetchListeners({ srcElement,
|
|
237
|
+
const listeners = await fetchListeners({ srcElement, eventName, e })
|
|
238
238
|
executeListeners({ e, srcElement, listeners })
|
|
239
239
|
|
|
240
|
+
console.log('--- eventName =', eventName)
|
|
241
|
+
|
|
240
242
|
const newAnchor = cloneSrcElement({ srcElement })
|
|
241
243
|
newAnchor.click()
|
|
242
244
|
})
|
|
243
245
|
|
|
244
|
-
if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${
|
|
246
|
+
if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${eventName}`)
|
|
245
247
|
})
|
|
246
248
|
}
|
|
247
249
|
|
|
248
250
|
const fireListeners = () => {
|
|
249
|
-
EVENTS.forEach((
|
|
250
|
-
document.body[`on${
|
|
251
|
-
const srcElement = getSrcElement({ srcElement: e?.srcElement,
|
|
252
|
-
if (srcElement?.tagName === 'A' &&
|
|
251
|
+
EVENTS.forEach((eventName) => {
|
|
252
|
+
document.body[`on${eventName}`] = async (e) => {
|
|
253
|
+
const srcElement = getSrcElement({ srcElement: e?.srcElement, eventName })
|
|
254
|
+
if (srcElement?.tagName === 'A' && eventName === 'click') return
|
|
253
255
|
|
|
254
|
-
const listeners = await fetchListeners({ srcElement,
|
|
256
|
+
const listeners = await fetchListeners({ srcElement, eventName, e })
|
|
255
257
|
|
|
256
258
|
executeListeners({ e, srcElement, listeners })
|
|
257
|
-
addListener({ srcElement,
|
|
259
|
+
addListener({ srcElement, eventName, listeners })
|
|
258
260
|
|
|
259
|
-
if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${
|
|
261
|
+
if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${eventName}`)
|
|
260
262
|
}
|
|
261
263
|
})
|
|
262
264
|
|
|
263
265
|
const saloeListenEvent = new CustomEvent('saloeListen', {
|
|
264
|
-
detail: { message: 'This is a custom
|
|
266
|
+
detail: { message: 'This is a custom eventName!' }
|
|
265
267
|
})
|
|
266
268
|
|
|
267
|
-
document.body.addEventListener('saloeListen', async (
|
|
269
|
+
document.body.addEventListener('saloeListen', async (e) => {
|
|
268
270
|
await addScripts()
|
|
269
271
|
fireLoadListener()
|
|
270
272
|
fireObserverListeners()
|