coupdoeil/app/javascript/coupdoeil/elements/coupdoeil_element.js

Javascript for Ruby on Rails Coupdoeil gem

import {PopoverController} from '../popover/controller'
import {openPopover} from '../popover/opening'
import {POPOVER_SELECTOR} from "../popover/config";
import {closeNow} from "../popover/closing";
import {addToCurrents} from "../popover/current";

function generateUniqueId() {
  const array = new Uint32Array(1)
  window.crypto.getRandomValues(array)
  return array[0]
}

export default class extends HTMLElement {
  constructor() {
    super()
    this.uniqueId = generateUniqueId()
    this.popoverController = new PopoverController(this)
  }

  openPopover(triggerElement = null, callbacks) {
    if (this.openingPopover || this.popoverController.isOpen || this.disabled) return;

    this.openingPopover = true

    const parent = this.closest(POPOVER_SELECTOR)?.popoverController
    addToCurrents(this)
    return openPopover(this.popoverController, { parent, ...callbacks })
  }

  closePopover() {
    closeNow(this.popoverController)
  }

  get disabled() {
    return !!this.getAttribute("disabled")
  }

  set disabled(disabled) {
    if (disabled) {
      this.setAttribute("disabled", true)
    } else {
      this.removeAttribute("disabled")
    }
  }
}