Skip to content

Commit 2942e5a

Browse files
frankpaganfrankpagan
committed
fix: dispatch end event on action element rather than document
1 parent 2ebea89 commit 2942e5a

File tree

1 file changed

+132
-106
lines changed

1 file changed

+132
-106
lines changed

‎src/index.js

+132-106
Original file line numberDiff line numberDiff line change
@@ -5,137 +5,163 @@
55
* https://github.com/CoCreate-app/CoCreate-conditional-logic/blob/master/LICENSE
66
*/
77
/*globals CustomEvent, CoCreate*/
8-
import observer from '@cocreate/observer';
9-
import action from '@cocreate/actions';
10-
import { queryElements } from '@cocreate/utils';
8+
import observer from "@cocreate/observer";
9+
import action from "@cocreate/actions";
10+
import { queryElements } from "@cocreate/utils";
1111

1212
// TODO: update to listen to document events, find closest action return
1313
function init() {
14-
let elements = document.querySelectorAll(`[show],[hide]`);
15-
initElements(elements);
14+
let elements = document.querySelectorAll(`[show],[hide]`);
15+
initElements(elements);
1616
}
1717

1818
function initElements(elements) {
19-
for (let el of elements)
20-
initElement(el);
19+
for (let el of elements) initElement(el);
2120
}
2221

2322
function initElement(el) {
24-
if (el.tagName.toLowerCase() == "option")
25-
el = el.closest('select');
26-
let actions = el.getAttribute('actions');
27-
if (actions && actions.includes('validate')) {
28-
el.removeEventListener('change', selectShowHideEle);
29-
30-
el.addEventListener("change", selectShowHideEle);
31-
} else {
32-
el.removeEventListener('change', selectShowHideEle);
33-
el.removeEventListener("click", clickShowHideEle);
34-
35-
el.addEventListener("change", selectShowHideEle);
36-
el.addEventListener("click", clickShowHideEle);
37-
}
23+
if (el.tagName.toLowerCase() == "option") el = el.closest("select");
24+
let actions = el.getAttribute("actions");
25+
if (actions && actions.includes("validate")) {
26+
el.removeEventListener("change", selectShowHideEle);
27+
28+
el.addEventListener("change", selectShowHideEle);
29+
} else {
30+
el.removeEventListener("change", selectShowHideEle);
31+
el.removeEventListener("click", clickShowHideEle);
32+
33+
el.addEventListener("change", selectShowHideEle);
34+
el.addEventListener("click", clickShowHideEle);
35+
}
3836
}
3937

4038
function selectShowHideEle(e) {
41-
e.preventDefault();
42-
var select = this;
43-
if (typeof select.options != 'undefined')
44-
for (var i = 0, len = select.options.length; i < len; i++) {
45-
var opt = select.options[i];
46-
var value = opt.value;
47-
if (value != '') {
48-
var show = opt.getAttribute('show');
49-
if (typeof show != 'undefined') {
50-
for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
51-
el.setAttribute('hidden', '');
52-
if (opt.selected === true) {
53-
for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
54-
el.removeAttribute('hidden');
55-
}
56-
}
57-
}
58-
}
39+
e.preventDefault();
40+
var select = this;
41+
if (typeof select.options != "undefined")
42+
for (var i = 0, len = select.options.length; i < len; i++) {
43+
var opt = select.options[i];
44+
var value = opt.value;
45+
if (value != "") {
46+
var show = opt.getAttribute("show");
47+
if (typeof show != "undefined") {
48+
for (let el of queryElements({
49+
element: document,
50+
selector: show,
51+
type: "selector"
52+
}))
53+
el.setAttribute("hidden", "");
54+
if (opt.selected === true) {
55+
for (let el of queryElements({
56+
element: document,
57+
selector: show,
58+
type: "selector"
59+
}))
60+
el.removeAttribute("hidden");
61+
}
62+
}
63+
}
64+
}
5965
}
6066

6167
function clickShowHideEle(e) {
62-
let element = e.currentTarget;
63-
if (!element)
64-
element = e;
65-
var show = element.getAttribute('show');
66-
var hide = element.getAttribute('hide');
67-
let tagName = element.tagName.toLowerCase();
68-
69-
if (tagName == 'input' && element.getAttribute("type").toLowerCase() == 'radio') {
70-
let key = element.getAttribute("key");
71-
let radios = document.querySelectorAll(tagName + '[key="' + key + '"]');
72-
for (let radio of radios) {
73-
74-
show = radio.getAttribute('show');
75-
76-
for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
77-
el.setAttribute('hidden', '');
78-
79-
if (radio.checked) {
80-
for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
81-
el.removeAttribute('hidden');
82-
}
83-
}
84-
} else {
85-
86-
let updated_els = [];
87-
88-
if (show)
89-
for (let el of queryElements({ element: document, selector: show, type: 'selector' })) {
90-
if (el.hasAttribute('hidden')) {
91-
el.removeAttribute('hidden');
92-
updated_els.push(el);
93-
}
94-
}
95-
96-
if (hide)
97-
for (let el of queryElements({ element: document, selector: hide, type: 'selector' })) {
98-
let existEqual = false;
99-
for (let uel of updated_els) {
100-
if (el.isEqualNode(uel)) {
101-
existEqual = true;
102-
break;
103-
}
104-
}
105-
106-
if (!existEqual)
107-
el.setAttribute('hidden', '')
108-
}
109-
}
110-
111-
document.dispatchEvent(new CustomEvent('showHide', {
112-
detail: {}
113-
}));
114-
68+
let element = e.currentTarget;
69+
if (!element) element = e.element;
70+
var show = element.getAttribute("show");
71+
var hide = element.getAttribute("hide");
72+
let tagName = element.tagName.toLowerCase();
73+
74+
if (
75+
tagName == "input" &&
76+
element.getAttribute("type").toLowerCase() == "radio"
77+
) {
78+
let key = element.getAttribute("key");
79+
let radios = document.querySelectorAll(tagName + '[key="' + key + '"]');
80+
for (let radio of radios) {
81+
show = radio.getAttribute("show");
82+
83+
for (let el of queryElements({
84+
element: document,
85+
selector: show,
86+
type: "selector"
87+
}))
88+
el.setAttribute("hidden", "");
89+
90+
if (radio.checked) {
91+
for (let el of queryElements({
92+
element: document,
93+
selector: show,
94+
type: "selector"
95+
}))
96+
el.removeAttribute("hidden");
97+
}
98+
}
99+
} else {
100+
let updated_els = [];
101+
102+
if (show)
103+
for (let el of queryElements({
104+
element: document,
105+
selector: show,
106+
type: "selector"
107+
})) {
108+
if (el.hasAttribute("hidden")) {
109+
el.removeAttribute("hidden");
110+
updated_els.push(el);
111+
}
112+
}
113+
114+
if (hide)
115+
for (let el of queryElements({
116+
element: document,
117+
selector: hide,
118+
type: "selector"
119+
})) {
120+
let existEqual = false;
121+
for (let uel of updated_els) {
122+
if (el.isEqualNode(uel)) {
123+
existEqual = true;
124+
break;
125+
}
126+
}
127+
128+
if (!existEqual) el.setAttribute("hidden", "");
129+
}
130+
}
131+
132+
element.dispatchEvent(
133+
new CustomEvent("showHide", {
134+
detail: {}
135+
})
136+
);
115137
}
116138

117-
document.addEventListener('fetchedData', () => {
118-
init();
139+
document.addEventListener("fetchedData", () => {
140+
init();
119141
});
120142

121143
observer.init({
122-
name: 'CoCreateConditionalLogic',
123-
observe: ['addedNodes'],
124-
selector: '[show], [hide]',
125-
callback: function (mutation) {
126-
initElement(mutation.target);
127-
}
144+
name: "CoCreateConditionalLogic",
145+
observe: ["addedNodes"],
146+
selector: "[show], [hide]",
147+
callback: function (mutation) {
148+
initElement(mutation.target);
149+
}
128150
});
129151

130152
action.init({
131-
name: "showHide",
132-
endEvent: "showHide",
133-
callback: (data) => {
134-
clickShowHideEle(data.element);
135-
}
153+
name: "showHide",
154+
endEvent: "showHide",
155+
callback: (action) => {
156+
clickShowHideEle(action);
157+
}
136158
});
137159

138160
init();
139161

140-
const CoCreateConditionalLogic = { initElements, selectShowHideEle, clickShowHideEle };
162+
const CoCreateConditionalLogic = {
163+
initElements,
164+
selectShowHideEle,
165+
clickShowHideEle
166+
};
141167
export default CoCreateConditionalLogic;

0 commit comments

Comments
 (0)