coupdoeil/app/javascript/coupdoeil/events/onclick.js

Javascript for Ruby on Rails Coupdoeil gem

import {POPOVER_SELECTOR} from "../popover/config";
import {noTriggeredOnClick} from "../popover/attributes";
import {closeAllNow, closeChildrenNow, closeNow} from "../popover/closing";
import {isElementClosePopoverButton} from "../popover/utils";
import {upgradeNativeElement} from "../elements/coupdoeil_element";

export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
  const coupdoeilElement = clickedElement.closest('coup-doeil, [data-popover-options]')
  upgradeNativeElement(coupdoeilElement)
  const popoverElement = clickedElement.closest(POPOVER_SELECTOR)

  if (coupdoeilElement && popoverElement) {
    handleClickedCoupdoeilWithinPopover(coupdoeilElement, popoverElement, clickedElement)
  }
  else if (coupdoeilElement) {
    handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement)
  }
  else if (popoverElement) {
    handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement)
  }
  else {
    handleClickOutsideCoupdoeilAndPopover()
  }
}

function handleClickedCoupdoeilWithinPopover(coupdoeilElement, _popoverElement, clickedElement) {
  const popover = coupdoeilElement.popoverController
  if(noTriggeredOnClick(popover))
    return;

  if (popover.isOpen) {
    // second click on an open popover trigger closes it
    closeNow(popover)
  } else {
    // first click on a closed popover trigger opens it
    // If any other popover is open, it is the parent popover, hence it should not be closed.
    coupdoeilElement.openPopover(clickedElement)
  }
}

function handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement) {
  const popover = coupdoeilElement.popoverController
  if(noTriggeredOnClick(popover))
    return;

  if (popover.isOpen) {
    // second click on an open popover trigger closes it
    closeNow(popover)
  } else {
    // close any other open popover
    closeAllNow()
    // first click on a closed popover trigger opens it
    coupdoeilElement.openPopover(clickedElement)
  }
}

function handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement) {
  const popover = popoverElement.popoverController;

  if (isElementClosePopoverButton(clickedElement)) {
    requestAnimationFrame(() => closeNow(popover))
  } else if (popover.children.size > 0) {
    closeChildrenNow(popover)
  }
}

function handleClickOutsideCoupdoeilAndPopover() {
  closeAllNow()
}