openfoodnetwork/app/webpacker/controllers/popout_controller.js

import { Controller } from "stimulus";

// Allows a form section to "pop out" and show additional options
export default class PopoutController extends Controller {
  static targets = ["button", "dialog"];
  static values = {
    updateDisplay: { Boolean, default: true },
  };

  connect() {
    this.displayElements = Array.from(this.element.querySelectorAll('input:not([type="hidden"]'));
    this.first_input = this.displayElements[0];

    // Show when click or down-arrow on button
    this.buttonTarget.addEventListener("click", this.show.bind(this));
    this.buttonTarget.addEventListener("keydown", this.applyKeyAction.bind(this));

    this.closeIfOutsideBound = this.closeIfOutside.bind(this); // Store reference for managing listeners.
  }

  disconnect() {
    // Clean up handlers registered outside the controller element.
    // (jest cleans up document too early)
    if (document) {
      this.#removeGlobalEventListeners();
    }
  }

  show(e) {
    this.dialogTarget.style.display = "block";
    this.first_input.focus();
    e.preventDefault();

    // Close when click or tab outside of dialog.
    this.#addGlobalEventListeners();
  }

  // Apply an appropriate action, behaving similar to a dropdown
  // Shows the popout and applies the value where appropriate
  applyKeyAction(e) {
    if ([38, 40].includes(e.keyCode)) {
      // Show if Up or Down arrow
      this.show(e);
    } else if (e.key.match(/^[\d\w]$/)) {
      // Show, and apply value if it's a digit or word character
      this.show(e);
      this.first_input.value = e.key;
      // Notify of change
      this.first_input.dispatchEvent(new Event("input"));
    }
  }

  close() {
    // Close if not already closed
    if (this.dialogTarget.style.display != "none") {
      // Check every element for browser-side validation, before the fields get hidden.
      if (!this.#enabledDisplayElements().every((element) => element.reportValidity())) {
        // If any fail, don't close
        return;
      }

      // Update button to represent any changes
      if (this.updateDisplayValue) {
        this.buttonTarget.textContent = this.#displayValue();
        this.buttonTarget.innerHTML ||= " "; // (with default space to help with styling)
      }
      this.buttonTarget.classList.toggle("changed", this.#isChanged());

      this.dialogTarget.style.display = "none";

      this.#removeGlobalEventListeners();
    }
  }

  closeIfOutside(e) {
    // Note that we need to ignore the clicked button. Even though the listener was only just
    // registered, it still fires sometimes for some unkown reason.
    if (!this.dialogTarget.contains(e.target) && !this.buttonTarget.contains(e.target)) {
      this.close();
    }
  }

  // Close if checked
  closeIfChecked(e) {
    if (e.target.checked) {
      this.close();
      this.buttonTarget.focus();
    }
  }

  // private

  // Summarise the active field(s)
  #displayValue() {
    let values = this.#enabledDisplayElements().map((element) => {
      if (element.type == "checkbox") {
        if (element.checked && element.labels[0]) {
          return element.labels[0].textContent.trim();
        }
      } else {
        return element.value;
      }
    });
    // Filter empty values and convert to string
    return values.filter(Boolean).join();
  }

  #isChanged() {
    return this.#enabledDisplayElements().some((element) => element.classList.contains("changed"));
  }

  #enabledDisplayElements() {
    return this.displayElements.filter((element) => !element.disabled);
  }

  #addGlobalEventListeners() {
    // Run async (don't block primary event handlers).
    document.addEventListener("click", this.closeIfOutsideBound, { passive: true });
    document.addEventListener("focusin", this.closeIfOutsideBound, { passive: true });
  }

  #removeGlobalEventListeners() {
    document.removeEventListener("click", this.closeIfOutsideBound);
    document.removeEventListener("focusin", this.closeIfOutsideBound);
  }
}