Unbind event handlers upon destruction of the form widget (#49)

Credit to @msimkunas. Refs octobercms/october#5112

modules/backend/widgets/form/assets/js/winter.form.js

@@ -42,6 +42,11 @@
     }
 
     FormWidget.prototype.dispose = function() {
+        this.unbindDependants()
+        this.unbindCheckboxList()
+        this.unbindLazyTabs()
+        this.unbindCollapsibleSections()
+
         this.$el.off('dispose-control', this.proxy(this.dispose))
         this.$el.removeData('oc.formwidget')
 
@@ -75,6 +80,14 @@
 
     }
 
+    /*
+     * Unbind checkboxlist handlers
+     */
+    FormWidget.prototype.unbindCheckboxList = function() {
+        this.$el.off('click', '[data-field-checkboxlist-all]')
+        this.$el.off('click', '[data-field-checkboxlist-none]')
+    }
+
     /*
      * Get all fields elements that belong to this form, nested form
      * fields are removed from this collection.
@@ -94,13 +107,40 @@
      * Bind dependant fields
      */
     FormWidget.prototype.bindDependants = function() {
+        var self = this,
+            fieldMap = this._getDependants()
 
+        /*
+         * When a field is updated, refresh its dependents
+         */
+        $.each(fieldMap, function(fieldName, toRefresh) {
+            $(document).on('change.oc.formwidget',
+                '[data-field-name="' + fieldName + '"]',
+                $.proxy(self.onRefreshDependants, self, fieldName, toRefresh)
+            )
+        })
+    }
+
+    /*
+     * Dispose of the dependant field handlers
+     */
+    FormWidget.prototype.unbindDependants = function() {
+        var fieldMap = this._getDependants()
+
+        $.each(fieldMap, function(fieldName, toRefresh) {
+            $(document).off('change.oc.formwidget', '[data-field-name="' + fieldName + '"]')
+        })
+    }
+
+    /*
+     * Retrieve the dependant fields
+     */
+    FormWidget.prototype._getDependants = function() {
         if (!$('[data-field-depends]', this.$el).length) {
             return;
         }
 
-        var self = this,
-            fieldMap = {},
+        var fieldMap = {},
             fieldElements = this.getFieldElements()
 
         /*
@@ -119,15 +159,7 @@
             })
         })
 
-        /*
-         * When a master is updated, refresh its slaves
-         */
-        $.each(fieldMap, function(fieldName, toRefresh) {
-            $(document).on('change.oc.formwidget',
-                '[data-field-name="' + fieldName + '"]',
-                $.proxy(self.onRefreshDependants, self, fieldName, toRefresh)
-            );
-        })
+        return fieldMap
     }
 
     /*
@@ -204,6 +236,15 @@
         }
     }
 
+    /*
+     * Unbind the lazy tab handlers
+     */
+    FormWidget.prototype.unbindLazyTabs = function() {
+        var tabControl = $('[data-control=tab]', this.$el)
+
+        $('.nav-tabs', tabControl).off('click', '.tab-lazy [data-toggle="tab"]')
+    }
+
     /*
      * Hides tabs that have no content, it is possible this can be
      * called multiple times in a single cycle due to input.trigger.
@@ -263,6 +304,13 @@
             .nextUntil('.section-field').hide()
     }
 
+    /*
+     * Unbinds collapsible section handlers
+     */
+    FormWidget.prototype.unbindCollapsibleSections = function() {
+        $('.section-field[data-field-collapsible]', this.$form).off('click')
+    }
+
     FormWidget.DEFAULTS = {
         refreshHandler: null,
         refreshData: {}

modules/system/assets/ui/js/popup.js

@@ -145,6 +145,7 @@
 
         this.$modal.on('hidden.bs.modal', function(){
             self.triggerEvent('hidden.oc.popup')
+            $.wn.foundation.controlUtils.disposeControls(self.$container.get(0))
             self.$container.remove()
             $(document.body).removeClass('modal-open')
             self.dispose()

modules/system/assets/ui/storm-min.js

@@ -3829,6 +3829,7 @@ this.$modal.on('hide.bs.modal',function(){self.triggerEvent('hide.oc.popup')
 self.isOpen=false
 self.setBackdrop(false)})
 this.$modal.on('hidden.bs.modal',function(){self.triggerEvent('hidden.oc.popup')
+$.wn.foundation.controlUtils.disposeControls(self.$container.get(0))
 self.$container.remove()
 $(document.body).removeClass('modal-open')
 self.dispose()})