Duplicate addEventListeners

500Foods commented 1 year ago

At the moment, when switching Forms or SubForms, the DOMContentLoaded event is fired to try and get the AdminLTE JS to attach itself to whatever new components are on the page. The downside to this is that it wasn't designed for this. As a result, it re-attaches itself to any elements it finds, including those that it was already attached to previously.

As this attachment mechanism - addEventListener - uses anonymous functions rather than named functions, there isn't really any good way to remove the event handlers short of cloning the node in place. However, doing so removes other event handlers, including our own.

The resolution, for now, is to alter their JS code to add a class to the objects they've attached themselves to (the LTE class) and then only add new event listeners if that class is not present. Hack-ish, certainly. But it works. So we end up with an adminlte-custom.js that we use instead. A new function is inserted, and then the existing functions are replaced with references to this new function just by doing search and replace. Another approach would be to override the addEventListener function itself, but that's not very fun and besides, we only want these specific functions overridden.

 /* CUSTOMIZATION
 **
 ** Calling the DomLoaded event repeatedly to "apply" this JS to whatever has changed in the page
 ** results in multiple anonymous addEventListener instances and thus breaks the functionality.
 ** To get around this, an addCUSTOMEventListener function is used, with a search/replace to find
 ** the occurences of the original addEventListener calls.  In this custom version, we just check
 ** if there is an LTE class.  If it does, we skip the event.  If it doesn't, we add the class
 ** and then issue the normal addEventListener call.
 **
 ** search:  btn.addEventListener(
 ** replace: window.addCUSTOMEventListener(btn,
 **
 ** search:  selSidebar.addEventListener(
 ** replace: window.addCUSTOMEventListener(selSidebar,
 **
 ** search:  window.addCUSTOMEventListener(targetContentWrapper,
 ** replace: window.addCUSTOMEventListener(targetContentWrapper,
 */

window.addCUSTOMEventListener = function(element,a,b,c) {
  if (element.classList.contains('LTE')) {
//    console.log(element+'aEV orverride: blocked');
  } else {
//    console.log(element+'aEV orverride: added');
    element.classList.add('LTE');
    element.addEventListener(a,b,c);
  }
};

500Foods commented 1 year ago

The only thing that doesn't quite seem to work properly is that the "hide menu" option at the top hides the entire menu all the time, whereas previously it would show an icon column when the screen was wide enough.

500Foods commented 1 year ago

Will revisit this after their official AdminLTE 4 release as they've been fiddling with this code even since this TMS WEB Core Template project was first posted a few weeks ago.

500Foods / TMS-WEB-Core-TemplateDemo

Duplicate addEventListeners #4