Context
An asset I’m building for our site that feels like TypeForm - fluid, friendly. I’ve built it based on a slideshow container + controls etc. It works well, except as I start to expand it into more questions and slides, event handlers are building up and I can see for some uses the template won’t be practical - which sucks now it’s refined.
Solutions
Those handlers are eating memory, and I don’t want the page to become slow to load or animate poorly - the whole point is to do the opposite.
What I’ve attempted
For loops on handlers, otherwise collapsed - somewhat messy, and I’m pretty sure Wix architecture doesn’t care anyway.
Custom Handlers - via GTM, messy, slow and not worth it.
Iframe external hosted - not the code direction for the site, security.
What I’d like to do - Parent Child Events
I knocked the code below up on fiddle, knowing we don’t have the APIs to do this, but hoping once I’d found a good approach that there might be an npm module or other option (truly Wix deserves props on how far they’ve come in that area).
Sadly, this time I should have done my research the other way around - I can’t find a good custom event package that won’t break DOM rules, and I’m sure that’s why none have yet been approved.
function expandQuestions() {
$w('#QuestControls').collapse();
let parentBox = $w('#QuestionsNotDone');
parentBox.addEventListener("click", clickReturn, false);
function clickReturn(event) {
if (event.target !== parentBox) {
let clickedQuestion = event.target.id;
$w(clickedQuestion).collapse().then(() => {
$w('#DoneReturn').show();
$w('#SetUpQuestions').changeSlide(key);
});
}
event.stopPropagation();
}
}
}
Any Thoughts or Workarounds?
Repeaters - are probably the best option not mentioned, and of course, would reduce the handlers. Still, I’ve built this avoiding any queries until final page submission, and I’d rather keep it that way if at all possible.
I’d love some input; I’m sure there’s something I haven’t thought about.