Merge branch 'js-event-cleanup' into 'master'

Js event listener cleanup

Closes #308

See merge request !157

static/css/utils/asyncForm.scss

@@ -4,6 +4,6 @@
 
 .async-form-loading {
   opacity: 0.1;
-  transition: opacity 800ms ease-in-out;
+  transition: opacity 800ms ease-out;
   pointer-events: none;
 }

static/css/utils/asyncTable.scss

@@ -1,5 +1,5 @@
 .async-table--loading {
   opacity: 0.7;
   pointer-events: none;
-  transition: opacity 400ms ease-in-out;
+  transition: opacity 400ms ease-out;
 }

static/css/utils/asyncTableFilter.scss

@@ -1,5 +1,5 @@
 .async-table-filter--loading {
   opacity: 0.7;
   pointer-events: none;
-  transition: opacity 400ms ease-in-out;
+  transition: opacity 400ms ease-out;
 }

static/js/utils/alerts.js

@@ -87,5 +87,9 @@
 
     initToggler();
     alertElements.forEach(initAlert);
+
+    return {
+      destroy: function() {},
+    };
   };
 })();

static/js/utils/asidenav.js

@@ -55,5 +55,9 @@
 
     initFavoritesButton();
     initAsidenavSubmenus();
+
+    return {
+      destroy: function() {},
+    };
   };
 })();

static/js/utils/asyncForm.js

@@ -56,5 +56,9 @@
     }
 
     setup();
+
+    return {
+      destroy: function() {},
+    };
   };
 })();

static/js/utils/asyncTable.js

@@ -21,6 +21,8 @@
     var pagesizeForm;
     var scrollTable;
 
+    var utilInstances = [];
+
     function init() {
       var table = wrapper.querySelector('#' + tableIdent);
 
@@ -47,13 +49,13 @@
       pagesizeForm = wrapper.querySelector('#' + tableIdent + '-pagesize-form');
 
       // check all
-      window.utils.setup('checkAll', wrapper);
+      utilInstances.push(window.utils.setup('checkAll', wrapper));
 
       // filter
       var filterForm = wrapper.querySelector('.' + TABLE_FILTER_FORM_CLASS);
       if (filterForm) {
         options.updateTableFrom = updateTableFrom;
-        window.utils.setup('asyncTableFilter', filterForm, options);
+        utilInstances.push(window.utils.setup('asyncTableFilter', filterForm, options));
       }
 
       // take options into account
@@ -177,9 +179,8 @@
       wrapper.classList.remove(JS_INITIALIZED_CLASS);
       wrapper.classList.add(ASYNC_TABLE_CONTENT_CHANGED_CLASS);
 
-      // setup the wrapper and its components to behave async again
-      window.utils.teardown('asyncTable');
-      window.utils.teardown('form');
+      destroyUtils();
+
       // merge global options and table specific options
       var resetOptions = {};
       Object.keys(options)
@@ -205,13 +206,23 @@
       window.utils.setup('asyncTable', wrapper, combinedOptions);
 
       Array.from(wrapper.querySelectorAll('form')).forEach(function(form) {
-        window.utils.setup('form', form);
+        utilInstances.push(window.utils.setup('form', form));
       });
       Array.from(wrapper.querySelectorAll('.modal')).forEach(function(modal) {
-        window.utils.setup('modal', modal);
+        utilInstances.push(window.utils.setup('modal', modal));
+      });
+    }
+
+    function destroyUtils() {
+      utilInstances.forEach(function(utilInstance) {
+        utilInstance.destroy();
       });
     }
 
     init();
+
+    return {
+      destroy: destroyUtils,
+    };
   };
 })();

static/js/utils/asyncTableFilter.js

@@ -157,5 +157,9 @@
     }
 
     setup();
+
+    return {
+      destroy: function() {},
+    };
   }
 })();

static/js/utils/checkAll.js

@@ -22,6 +22,8 @@
     var checkboxColumn = [];
     var checkAllCheckbox = null;
 
+    var utilInstances = [];
+
     function init() {
 
       columns = gatherColumns(wrapper);
@@ -80,7 +82,7 @@
       checkAllCheckbox.setAttribute('id', getCheckboxId());
       th.innerHTML = '';
       th.insertBefore(checkAllCheckbox, null);
-      window.utils.setup('checkboxRadio', checkAllCheckbox);
+      utilInstances.push(window.utils.setup('checkboxRadio', checkAllCheckbox));
 
       checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
       setupCheckboxListeners();
@@ -113,6 +115,16 @@
       });
     }
 
+    function destroy() {
+      utilInstances.forEach(function(util) {
+        util.destroy();
+      });
+    }
+
     init();
+
+    return {
+      destroy: destroy,
+    };
   };
 })();

static/js/utils/form.js

@@ -25,25 +25,37 @@
       return false;
     }
 
+    var utilInstances = [];
+
     // reactive buttons
-    window.utils.setup('reactiveButton', form);
+    utilInstances.push(window.utils.setup('reactiveButton', form));
 
     // conditonal fieldsets
     var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
-    window.utils.setup('interactiveFieldset', form, { fieldSets });
+    utilInstances.push(window.utils.setup('interactiveFieldset', form, { fieldSets }));
 
     // hide autoSubmit submit button
-    window.utils.setup('autoSubmit', form, options);
+    utilInstances.push(window.utils.setup('autoSubmit', form, options));
 
     // async form
     if (AJAX_SUBMIT_FLAG in form.dataset) {
-      window.utils.setup('asyncForm', form, options);
+      utilInstances.push(window.utils.setup('asyncForm', form, options));
     }
 
     // inputs
-    window.utils.setup('inputs', form, options);
+    utilInstances.push(window.utils.setup('inputs', form, options));
 
     form.classList.add(JS_INITIALIZED);
+
+    function destroyUtils() {
+      utilInstances.forEach(function(utilInstance) {
+        utilInstance.destroy();
+      });
+    }
+
+    return {
+      destroy: destroyUtils,
+    };
   };
 
   // registers input-listener for each element in <inputs> (array) and
@@ -83,6 +95,10 @@
         button.setAttribute('disabled', 'true');
       }
     }
+
+    return {
+      destroy: function() {},
+    };
   };
 
   window.utils.interactiveFieldset = function(form, options) {
@@ -120,6 +136,10 @@
       addEventListeners();
       updateFields();
     }
+
+    return {
+      destroy: function() {},
+    };
   };
 
   window.utils.autoSubmit = function(form, options) {
@@ -127,5 +147,9 @@
     if (button) {
       button.classList.add('hidden');
     }
+
+    return {
+      destroy: function() {},
+    };
   };
 })();

static/js/utils/inputs.js

@@ -10,22 +10,36 @@
   }
 
   window.utils.inputs = function(wrapper, options) {
+
+    var utilInstances = [];
+
     // checkboxes / radios
     var checkboxes = Array.from(wrapper.querySelectorAll('input[type="checkbox"], input[type="radio"]'));
-    checkboxes.filter(isNotInitialized).forEach(window.utils.checkboxRadio);
+    checkboxes.filter(isNotInitialized).forEach(function(checkbox) {
+      utilInstances.push(window.utils.setup('checkboxRadio', checkbox));
+    });
 
     // file-uploads
     var fileUploads = Array.from(wrapper.querySelectorAll('input[type="file"]'));
     fileUploads.filter(isNotInitialized).forEach(function(input) {
-      window.utils.fileUpload(input, options);
+      utilInstances.push(window.utils.setup('fileUpload', input, options));
     });
 
     // file-checkboxes
     var fileCheckboxes = Array.from(wrapper.querySelectorAll('.file-checkbox'));
-    fileCheckboxes.filter(isNotInitialized).forEach(function(inp) {
-      window.utils.fileCheckbox(inp);
-      inp.classList.add(JS_INITIALIZED_CLASS);
+    fileCheckboxes.filter(isNotInitialized).forEach(function(input) {
+      utilInstances.push(window.utils.setup('fileCheckbox', input, options));
     });
+
+    function destroyUtils() {
+      utilInstances.forEach(function(utilInstance) {
+        utilInstance.destroy();
+      });
+    }
+
+    return {
+      destroy: destroyUtils,
+    };
   };
 
   // (multiple) dynamic file uploads
@@ -113,6 +127,10 @@
 
       updateLabel(input.files);
     });
+
+    return {
+      destroy: function() {},
+    };
   }
 
   // to remove previously uploaded files
@@ -141,7 +159,12 @@
       input.classList.add(JS_INITIALIZED_CLASS);
       cont.classList.add(JS_INITIALIZED_CLASS);
     }
+
     setup();
+
+    return {
+      destroy: function() {},
+    };
   }
 
   // turns native checkboxes and radio buttons into custom ones
@@ -166,6 +189,10 @@
         parentEl.appendChild(wrapperEl);
       }
     }
+
+    return {
+      destroy: function() {},
+    };
   }
 
 })();

static/js/utils/modal.js

@@ -23,6 +23,8 @@
       return;
     }
 
+    var utilInstances = [];
+
     var overlayElement = document.createElement('div');
     var closerElement = document.createElement('div');
     var triggerElement = document.querySelector('#' + modalElement.dataset.trigger);
@@ -73,7 +75,7 @@
     function setupForm() {
       var form = modalElement.querySelector('form');
       if (form) {
-        window.utils.setup('form', form, { headers: MODAL_HEADERS });
+        utilInstances.push(window.utils.setup('form', form, { headers: MODAL_HEADERS }));
       }
     }
 
@@ -112,10 +114,23 @@
       if (previousModalContent) {
         previousModalContent.remove();
       }
+
+      modalContent = withPrefixedInputIDs(modalContent);
       modalElement.insertBefore(modalContent, null);
       setupForm();
     }
 
+    function withPrefixedInputIDs(modalContent) {
+      var idAttrs = ['id', 'for', 'data-conditional-id'];
+      idAttrs.forEach(function(attr) {
+        modalContent.querySelectorAll('[' + attr + ']').forEach(function(input) {
+          var value = modalElement.id + '__' + input.getAttribute(attr);
+          input.setAttribute(attr, value);
+        });
+      });
+      return modalContent;
+    }
+
     function keyupHandler(event) {
       if (event.key === 'Escape') {
         close();
@@ -123,5 +138,15 @@
     }
 
     setup();
+
+    function destroyUtils() {
+      utilInstances.forEach(function(utilInstance) {
+        utilInstance.destroy();
+      });
+    }
+
+    return {
+      destroy: destroyUtils,
+    };
   };
 })();

static/js/utils/setup.js

@@ -14,6 +14,8 @@
 
   window.utils.setup = function(utilName, scope, options) {
 
+    var utilInstance;
+
     if (!utilName || !scope) {
       return;
     }
@@ -27,21 +29,21 @@
       }
 
       if (options.setupFunction) {
-        options.setupFunction(scope, options);
+        utilInstance = options.setupFunction(scope, options);
       } else {
         var util = window.utils[utilName];
         if (!util) {
           throw new Error('"' + utilName + '" is not a known js util');
         }
 
-        util(scope, options);
+        utilInstance = util(scope, options);
       }
     };
 
+    window.utils.teardown(utilName);
     if (registeredSetupListeners[utilName] && !options.singleton) {
       registeredSetupListeners[utilName].push(listener);
     } else {
-      window.utils.teardown(utilName);
       registeredSetupListeners[utilName] = [ listener ];
     }
 
@@ -52,6 +54,8 @@
       bubbles: true,
       cancelable: true,
     }));
+
+    return utilInstance;
   };
 
   window.utils.teardown = function(utilName) {

static/js/utils/showHide.js

@@ -51,5 +51,9 @@
         });
         addEventHandler(el);
     });
+
+    return {
+      destroy: function() {},
+    };
   };
 })();

static/js/utils/tabber.js

@@ -86,5 +86,9 @@
         $(t).tabgroup();
       });
     }
+
+    return {
+      destroy: function() {},
+    };
   });
 })($);