Limpiar eventos cuando el elemento o controlador que los escucha desaparece

Squashed commit of the following:

commit 482eea28821868f03ace33562e7bd34ab9a4478f
Merge: 5f48528 1c128f2
Author: f <f@sutty.nl>
Date:   Thu Nov 25 18:31:35 2021 -0300

    Merge branch 'master' into limpiar-eventos

commit 5f48528c28b0709bd859a4dc52a830f60bfedc6e
Author: f <f@sutty.nl>
Date:   Thu Nov 25 18:23:23 2021 -0300

    pretty

commit 70d05bc90a6cb64d1c4bfc39f48388af3fbc3c18
Merge: c4f33c0 ff1bc21
Author: Nulo <nulo@sutty.nl>
Date:   Thu Oct 28 16:46:31 2021 -0300

    Merge branch 'master' into limpiar-eventos

commit c4f33c084058002a10fc0ec2137ffe045826cfd2
Author: f <f@sutty.nl>
Date:   Thu Oct 28 14:52:41 2021 -0300

    limpiar eventos

_packs/controllers/cart_contact_controller.js

@@ -4,10 +4,19 @@ export default class extends CartBaseController {
   static targets = ["form", "username"];
 
   connect() {
+    this.focusout_event = this._focusout_event.bind(this);
+
     if (!this.hasUsernameTarget) return;
     if (!this.hasFormTarget) return;
 
-    this.formTarget.addEventListener("focusout", (event) => {
+    this.formTarget.addEventListener("focusout", this.focusout_event);
+  }
+
+  disconnect() {
+    this.formTarget.removeEventListener("focusout", this.focusout_event);
+  }
+
+  _focusout_event(event) {
     if (!this.formTarget.checkValidity()) {
       this.formTarget.classList.add("was-validated");
       return;
@@ -19,6 +28,5 @@ export default class extends CartBaseController {
     if (username.length === 0) return;
 
     this.email = username;
-    });
   }
 }

_packs/controllers/cart_controller.js

@@ -22,13 +22,22 @@ export default class extends CartBaseController {
   connect() {
     if (!this.hasQuantityTarget) return;
 
+    this.change_event = this._change_event.bind(this);
+
     /*
      * When the quantity selector changes, we update the order to have
      * that amount of items.
      *
      * TODO: Go back to previous amount if there's not enough.
      */
-    this.quantityTarget.addEventListener("change", async (event) => {
+    this.quantityTarget.addEventListener("change", this.change_event);
+  }
+
+  disconnect() {
+    this.quantityTarget.removeEventListener("change", this.change_event);
+  }
+
+  async _change_event(event) {
     const quantity = event.target.value;
 
     if (quantity < 1) return;
@@ -68,7 +77,6 @@ export default class extends CartBaseController {
 
     this.subtotalTarget.innerText =
       product.line_item.attributes.discounted_amount;
-    });
   }
 
   subtotalUpdate() {

_packs/controllers/cart_counter_controller.js

@@ -9,20 +9,31 @@ export default class extends CartBaseController {
       return;
     }
 
-    window.addEventListener(
-      "cart:counter",
-      (event) => (this.counter = event.detail.item_count)
-    );
-    window.addEventListener("storage", (event) => {
-      if (event.key == "cart:counter") this.counter = event.newValue;
-    });
+    this.cart_count_event = this._cart_count_event.bind(this);
+    this.storage_event = this._storage_event.bind(this);
+
+    window.addEventListener("cart:counter", this.cart_count_event);
+    window.addEventListener("storage", this.storage_event);
 
     if (!this.cart) return;
 
     this.counter = this.cart.data.attributes.item_count;
   }
 
+  disconnect() {
+    window.removeEventListener("cart:counter", this.cart_count_event);
+    window.removeEventListener("storage", this.storage_event);
+  }
+
   set counter(quantity) {
     this.counterTarget.innerText = quantity;
   }
+
+  _cart_count_event(event) {
+    this.counter = event.detail.item_count;
+  }
+
+  _storage_event(event) {
+    if (event.key == "cart:counter") this.counter = event.newValue;
+  }
 }

_packs/controllers/cart_coupon_controller.js

@@ -7,10 +7,18 @@ export default class extends CartBaseController {
   static targets = ["couponCodeInvalid", "preDiscount", "total"];
 
   connect() {
-    this.couponCode.addEventListener("input", (event) => {
+    this.input_event = this._input_event.bind(this);
+
+    this.couponCode.addEventListener("input", this.input_event);
+  }
+
+  disconnect() {
+    this.couponCode.removeEventListener("input", this.input_event);
+  }
+
+  _input_event(event) {
     this.couponCode.parentElement.classList.remove("was-validated");
     this.couponCode.setCustomValidity("");
-    });
   }
 
   get couponCode() {

_packs/controllers/cart_payment_methods_controller.js

@@ -10,6 +10,8 @@ export default class extends CartBaseController {
     const orderToken = this.token;
     const response = await this.spree.checkout.paymentMethods({ orderToken });
 
+    this.change_event = this._change_event.bind(this);
+
     if (response.isFail()) {
       this.handleFailure(response);
       return;
@@ -31,10 +33,22 @@ export default class extends CartBaseController {
 
     if (!this.hasSubmitTarget) return;
     this.formTarget.elements.forEach((p) =>
-      p.addEventListener("change", (e) => (this.submitTarget.disabled = false))
+      p.addEventListener("change", this.change_event)
     );
   }
 
+  disconnect() {
+    if (!this.hasSubmitTarget) return;
+
+    this.formTarget.elements.forEach((p) =>
+      p.removeEventListener("change", this.change_event)
+    );
+  }
+
+  _change_event(event) {
+    this.submitTarget.disabled = false;
+  }
+
   async pay(event) {
     event.preventDefault();
     event.stopPropagation();

_packs/controllers/cart_shipping_controller.js

@@ -4,9 +4,17 @@ export default class extends CartBaseController {
   static targets = ["methods", "rates", "form"];
 
   connect() {
-    this.formTarget.addEventListener("formdata", (event) =>
-      this.processShippingAddress(event.formData)
-    );
+    this.formdata_event = this._formdata_event.bind(this);
+
+    this.formTarget.addEventListener("formdata", this.formdata_event);
+  }
+
+  disconnect() {
+    this.formTarget.removeEventListener("formdata", this.formdata_event);
+  }
+
+  _formdata_event(event) {
+    this.processShippingAddress(event.formData);
   }
 
   async rates(event) {

_packs/controllers/country_controller.js

@@ -23,20 +23,42 @@ export default class extends CartBaseController {
       this.listTarget.appendChild(option);
     });
 
-    const site = window.site;
+    this.input_event = this._input_event.bind(this);
+    this.invalid_event = this._invalid_event.bind(this);
+    this.change_event = this._change_event.bind(this);
 
     // Only allow names on this list
     this.nameTarget.pattern = countries.map((x) => x.attributes.name).join("|");
-    this.nameTarget.addEventListener("input", (event) =>
-      this.nameTarget.setCustomValidity("")
-    );
-    this.nameTarget.addEventListener("invalid", (event) =>
-      this.nameTarget.setCustomValidity(site.i18n.countries.validation)
-    );
+    this.nameTarget.addEventListener("input", this.input_event);
+    this.nameTarget.addEventListener("invalid", this.invalid_event);
 
     // When the input changes we update the actual value and also the
     // state list via an Event
-    this.nameTarget.addEventListener("change", (event) => {
+    this.nameTarget.addEventListener("change", this.change_event);
+
+    // The input is disabled at this point
+    this.nameTarget.disabled = false;
+    // Load data if the input is autocompleted
+    if (this.nameTarget.value.trim() !== "")
+      this.nameTarget.dispatchEvent(new CustomEvent("change"));
+  }
+
+  disconnect() {
+    this.nameTarget.removeEventListener("input", this.input_event);
+    this.nameTarget.removeEventListener("invalid", this.invalid_event);
+    this.nameTarget.removeEventListener("change", this.change_event);
+  }
+
+  _input_event(event) {
+    this.nameTarget.setCustomValidity("");
+  }
+
+  _invalid_event(event) {
+    const site = window.site;
+    this.nameTarget.setCustomValidity(site.i18n.countries.validation);
+  }
+
+  _change_event(event) {
     const value = this.nameTarget.value.trim();
 
     if (value === "") return;
@@ -58,13 +80,6 @@ export default class extends CartBaseController {
     // XXX: Prevent mixing data
     delete this.nameTarget.dataset.selectedState;
     delete this.nameTarget.dataset.selectedZipcode;
-    });
-
-    // The input is disabled at this point
-    this.nameTarget.disabled = false;
-    // Load data if the input is autocompleted
-    if (this.nameTarget.value.trim() !== "")
-      this.nameTarget.dispatchEvent(new CustomEvent("change"));
   }
 
   /*

_packs/controllers/floating_alert_controller.js

@@ -8,7 +8,16 @@ export default class extends Controller {
   static targets = ["content"];
 
   connect() {
-    window.addEventListener("toast", (event) => {
+    this.toast_event = this._toast_event.bind(this);
+
+    window.addEventListener("toast", this.toast_event);
+  }
+
+  disconnect() {
+    window.removeEventListener("toast", this.toast_event);
+  }
+
+  _toast_event(event) {
     this.contentTarget.innerText = event.detail.content;
     this.set(true);
 
@@ -19,7 +28,6 @@ export default class extends Controller {
       this.set(false);
       this.interval = null;
     }, 3000);
-    });
   }
 
   set(show) {

_packs/controllers/menu_controller.js

@@ -4,9 +4,17 @@ export default class extends Controller {
   static targets = ["item"];
 
   connect() {
-    window.addEventListener("scroll:section", (event) =>
-      this.update(event.detail.id)
-    );
+    this.scroll_section_event = this._scroll_section_event.bind(this);
+
+    window.addEventListener("scroll:section", this.scroll_section_event);
+  }
+
+  disconnect() {
+    window.removeEventListener("scroll:section", this.scroll_section_event);
+  }
+
+  _scroll_section_event(event) {
+    this.update(event.detail.id);
   }
 
   get items() {

_packs/controllers/order_controller.js

@@ -15,14 +15,27 @@ export default class extends CartBaseController {
     this.render({ products, site });
     this.subtotalUpdate();
     this.itemCountUpdate();
-    this.subscribe();
+
+    this.storage_event = this._storage_event.bind(this);
+    this.cart_subtotal_update_event =
+      this._cart_subtotal_update_event.bind(this);
+
+    window.addEventListener("storage", this.storage_event);
+    window.addEventListener(
+      "cart:subtotal:update",
+      this.cart_subtotal_update_event
+    );
   }
 
-  /*
-   * Subscribe to change on the storage to update the cart.
-   */
-  subscribe() {
-    window.addEventListener("storage", async (event) => {
+  disconnect() {
+    window.removeEventListener("storage", this.storage_event);
+    window.removeEventListener(
+      "cart:subtotal:update",
+      this.cart_subtotal_update_event
+    );
+  }
+
+  async _storage_event(event) {
     if (!event.key?.startsWith("cart:item:")) return;
 
     const products = this.products;
@@ -31,12 +44,11 @@ export default class extends CartBaseController {
     this.render({ products, site });
     this.subtotalUpdate();
     this.itemCountUpdate();
-    });
+  }
 
-    window.addEventListener("cart:subtotal:update", (event) => {
+  _cart_subtotal_update_event(event) {
     this.itemCountUpdate();
     this.subtotalUpdate();
-    });
   }
 
   /*

_packs/controllers/postal_code_controller.js

@@ -175,7 +175,22 @@ export default class extends Controller {
   };
 
   connect() {
-    window.addEventListener("cart:country:update", (event) => {
+    this.cart_country_update_event = this._cart_country_update_event.bind(this);
+
+    window.addEventListener(
+      "cart:country:update",
+      this.cart_country_update_event
+    );
+  }
+
+  disconnect() {
+    window.removeEventListener(
+      "cart:country:update",
+      this.cart_country_update_event
+    );
+  }
+
+  _cart_country_update_event(event) {
     if (this.data.get("group") !== event.detail.group) return;
 
     const zipcodeRequired = event.detail.data.zipcodeRequired == "true";
@@ -193,6 +208,5 @@ export default class extends Controller {
       this.codeTarget.value = event.detail.selectedZipcode;
       this.codeTarget.dispatchEvent(new Event("change"));
     }
-    });
   }
 }

_packs/controllers/state_controller.js

@@ -10,7 +10,28 @@ export default class extends CartBaseController {
   static targets = ["id", "list", "name"];
 
   connect() {
-    window.addEventListener("cart:country:update", async (event) => {
+    this.cart_country_update_event = this._cart_country_update_event.bind(this);
+    this.change_event = this._change_event.bind(this);
+
+    window.addEventListener(
+      "cart:country:update",
+      this.cart_country_update_event
+    );
+
+    // When the input changes we update the actual value and also the
+    // state list via an Event
+    this.nameTarget.addEventListener("change", this.change_event);
+  }
+
+  disconnect() {
+    window.removeEventListener(
+      "cart:country:update",
+      this.cart_country_update_event
+    );
+    this.nameTarget.removeEventListener("change", this.change_event);
+  }
+
+  async _cart_country_update_event(event) {
     if (this.data.get("group") !== event.detail.group) return;
 
     this.idTarget.value = "";
@@ -47,11 +68,9 @@ export default class extends CartBaseController {
       this.nameTarget.value = event.detail.selectedState;
       this.nameTarget.dispatchEvent(new Event("change"));
     }
-    });
+  }
 
-    // When the input changes we update the actual value and also the
-    // state list via an Event
-    this.nameTarget.addEventListener("change", (event) => {
+  _change_event(event) {
     const options = Array.from(this.listTarget.options);
     const option = options.find((x) => x.value == this.nameTarget.value);
 
@@ -60,7 +79,6 @@ export default class extends CartBaseController {
 
     this.idTarget.value = option.dataset.id;
     this.idTarget.dispatchEvent(new Event("change"));
-    });
   }
 
   /*