Skip to content

Commit a8fdc78

Browse files
AbomDocPhibesAbomDocPhibes
authored
Merge pull request #13 from AskiaADX/bugfix/event-target
Bugfix/event target
2 parents dc6e5ea + 2a4a2f7 commit a8fdc78

6 files changed

Lines changed: 100 additions & 55 deletions

File tree

‎bin/ResponsiveTable.adc‎

339 Bytes
Binary file not shown.

‎changelog.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,6 @@ Version
128128
#### v4.2.6
129129
- style.css changed for response:hover
130130
#### v4.2.7
131-
- included option for using open response text for loop placeholders
131+
- included option for using open response text for loop placeholders
132+
#### v4.2.8
133+
- fixed event.target syntax that prevented td.response from being selected if text contained HTML styling

‎config.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<info>
88
<name>ResponsiveTable</name>
99
<guid>28609424-856b-40c8-ba88-5b29a439720a</guid>
10-
<version>4.2.7</version>
10+
<version>4.2.8</version>
1111
<date>2023-06-09</date>
1212
<description><![CDATA[Responsive Grid Table]]></description>
1313
<company>Askia</company>

‎example/ResponsiveTable.qex‎

-8.32 KB
Binary file not shown.

‎example/SetValueAjax.qex‎

1.55 KB
Binary file not shown.

‎resources/static/responsiveTable.js‎

Lines changed: 96 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -94,67 +94,110 @@
9494
*
9595
* @param {Object} event Event of the click on the TD or INPUT
9696
*/
97-
function clickTable (event, that) {
98-
var el = event.target || event.srcElement;
99-
if (el.className.indexOf('headerRow') >= 0) {
100-
$(that).next().toggle();
101-
}
102-
if (el.nodeName === 'TD' && el.className.indexOf('response') >= 0) {
103-
if (el.lastElementChild.nodeName == 'LABEL') {
104-
document.getElementById(el.lastElementChild.attributes.for.value).click();
105-
} else if (el.lastElementChild.nodeName == 'SPAN') {
106-
document.getElementById(el.lastElementChild.dataset.for).click();
97+
function clickTable (event, that) {
98+
var el = event.target || event.srcElement;
99+
100+
101+
if (el && el.nodeName === 'INPUT') {
102+
103+
if (el.checked) {
104+
addClass(el.parentNode, 'selected');
105+
manageExclusive(el);
106+
107+
var other = el.parentElement.querySelector('.otherText, .otherLoopText');
108+
if (other) other.style.display = "block";
109+
110+
} else if ((!el.checked) && (el.attributes.type.value === 'checkbox')) {
111+
removeClass(el.parentNode, 'selected');
112+
manageExclusive(el);
113+
114+
var other2 = el.parentElement.querySelector('.otherText, .otherLoopText');
115+
if (other2) other2.style.display = "none";
116+
117+
}
118+
119+
if (that.accordion && window.innerWidth < that.responsiveWidth ) {
120+
if (el.classList.contains('otherText')) {
121+
addClass(el.parentNode.parentNode, 'selected');
122+
el.addEventListener("keydown", function() {
123+
displayCheckmark(that.instanceId);
124+
});
107125
} else {
108-
document.getElementById(el.children[2].dataset.for).click();
109-
}
110-
} else if (el.nodeName === 'SPAN') {
111-
document.getElementById(el.dataset.for).click();
112-
} else if (el.nodeName === 'IMG' && el.parentNode.parentNode.className.indexOf('response') >= 0) {
113-
event.preventDefault();
114-
event.stopPropagation();
115-
document.getElementById(el.parentNode.parentNode.lastElementChild.attributes.for.value).click();
116-
} else if (el.nodeName === 'INPUT') {
117-
if (el.checked) {
118-
addClass(el.parentNode, 'selected');
119-
manageExclusive(el);
120-
if (el.parentElement.lastElementChild.children[0]) {
121-
el.parentElement.lastElementChild.children[0].style.display = "block";
122-
}
123-
} else if ((!el.checked) && (el.attributes.type.value === 'checkbox')) {
124-
removeClass(el.parentNode, 'selected');
125-
manageExclusive(el);
126-
if (el.parentElement.lastElementChild.children[0]) {
127-
el.parentElement.lastElementChild.children[0].style.display = "none";
126+
if (el.parentNode.lastElementChild.nodeName != 'DIV') {
127+
setTimeout(function (){
128+
if (el.classList.contains('askia-exclusive')) {
129+
displayNext(that.instanceId);
130+
}
131+
displayCheckmark(that.instanceId);
132+
}, 150);
128133
}
129134
}
130-
if (that.accordion && window.innerWidth < that.responsiveWidth ) {
131-
if(el.classList.contains('otherText')) {
132-
addClass(el.parentNode.parentNode, 'selected');
133-
el.addEventListener("keydown", function() {
134-
displayCheckmark(that.instanceId);
135-
});
136-
} else {
137-
if (el.parentNode.lastElementChild.nodeName != 'DIV') {
138-
setTimeout(function (){
139-
if (el.classList.contains('askia-exclusive')) {
140-
displayNext(that.instanceId);
141-
}
142-
displayCheckmark(that.instanceId);
143-
}, 150);
144-
}
145-
}
135+
}
136+
137+
if (window.askia &&
138+
window.arrLiveRoutingShortcut &&
139+
window.arrLiveRoutingShortcut.length > 0 &&
140+
window.arrLiveRoutingShortcut.indexOf(that.currentQuestion) >= 0) {
141+
askia.triggerAnswer();
142+
}
143+
return;
144+
}
145+
146+
147+
if (el && el.closest) {
148+
var td = el.closest('td.response');
149+
if (td) {
150+
// Prevent accordion/header click handlers from also firing for this click
151+
event.preventDefault();
152+
event.stopPropagation();
153+
154+
// Prefer span[data-for]
155+
var df = td.querySelector('span[data-for]');
156+
if (df && df.dataset && df.dataset.for) {
157+
var input = document.getElementById(df.dataset.for);
158+
if (input) { input.click(); }
159+
return;
146160
}
147-
if (window.askia &&
148-
window.arrLiveRoutingShortcut &&
149-
window.arrLiveRoutingShortcut.length > 0 &&
150-
window.arrLiveRoutingShortcut.indexOf(that.currentQuestion) >= 0) {
151-
askia.triggerAnswer();
161+
162+
// Fallback: label[for]
163+
var lbl = td.querySelector('label[for]');
164+
if (lbl) {
165+
var input2 = document.getElementById(lbl.getAttribute('for'));
166+
if (input2) { input2.click(); }
167+
return;
152168
}
153-
} else if (el.tagName == "P") {
154-
document.getElementById(el.attributes.for.value).click();
169+
170+
// Last fallback: first input inside TD
171+
var input3 = td.querySelector('input');
172+
if (input3) { input3.click(); }
173+
return;
155174
}
156175
}
157176

177+
178+
if (el.className && el.className.indexOf('headerRow') >= 0) {
179+
$(that).next().toggle();
180+
}
181+
182+
if (el.nodeName === 'TD' && el.className.indexOf('response') >= 0) {
183+
if (el.lastElementChild.nodeName == 'LABEL') {
184+
document.getElementById(el.lastElementChild.attributes.for.value).click();
185+
} else if (el.lastElementChild.nodeName == 'SPAN') {
186+
document.getElementById(el.lastElementChild.dataset.for).click();
187+
} else {
188+
document.getElementById(el.children[2].dataset.for).click();
189+
}
190+
} else if (el.nodeName === 'SPAN') {
191+
document.getElementById(el.dataset.for).click();
192+
} else if (el.nodeName === 'IMG' && el.parentNode.parentNode.className.indexOf('response') >= 0) {
193+
event.preventDefault();
194+
event.stopPropagation();
195+
document.getElementById(el.parentNode.parentNode.lastElementChild.attributes.for.value).click();
196+
} else if (el.tagName == "P") {
197+
document.getElementById(el.attributes.for.value).click();
198+
}
199+
}
200+
158201
/**
159202
* Calculate the offsetTop
160203
*

0 commit comments

Comments
 (0)