500foods / tms-web-core-templatedemo Goto Github PK

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);
  }
};

Discussed in #2