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
    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")
    }
  }
}

export function upgradeNativeElement(element) {
  if (element && element.tagName !== 'COUP-DOEIL' && !element.customCoupdoeilElement) {
    element.customCoupdoeilElement = true
    element.uniqueId = generateUniqueId()
    element.popoverController = new PopoverController(element)
    element.openPopover = function(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 })
    }
    element.closePopover = function() {
      closeNow(this.popoverController)
    }
  }
}

export function downgradeNativeElement(element, {force = false} = {}) {
  if (element.customCoupdoeilElement || force) {
    delete element.closePopover
    delete element.openPopover
    delete element.popoverController
    delete element.uniqueId
    delete element.customCoupdoeilElement

    delete element.dataset.popoverOptions
    delete element.dataset.popoverParams
    delete element.dataset.popoverType
    delete element.dataset.popoverAnimation
    delete element.dataset.popoverCache
    delete element.dataset.popoverLoading
    delete element.dataset.popoverOffset
    delete element.dataset.popoverOpeningDelay
    delete element.dataset.popoverPlacement
    delete element.dataset.popoverTrigger
  }
}