coupdoeil 1.0.0.pre.beta.1 → 1.0.0.pre.beta.2

data/app/assets/javascripts/coupdoeil.js

@@ -1,4 +1,4 @@
-class HovercardController {
+class PopoverController {
   constructor(coupdoeilElement) {
     this.coupdoeilElement = coupdoeilElement;
     this.card = null;
@@ -7,18 +7,18 @@ class HovercardController {
     this.closingRequest = null;
   }
   get isOpen() {
-    return !!this.coupdoeilElement.dataset.hovercardOpen;
+    return !!this.coupdoeilElement.dataset.popoverOpen;
   }
   get isClosed() {
     return !this.isOpen;
   }
 }
 
-const HOVERCARD_CLASS_NAME = "coupdoeil--hovercard";
+const POPOVER_CLASS_NAME = "coupdoeil--popover";
 
-const HOVERCARD_SELECTOR = `.${HOVERCARD_CLASS_NAME}`;
+const POPOVER_SELECTOR = `.${POPOVER_CLASS_NAME}`;
 
-const HOVERCARD_CLOSE_BTN_SELECTOR = "[data-hovercard-close]";
+const POPOVER_CLOSE_BTN_SELECTOR = "[data-popover-close]";
 
 const CLOSING_DELAY_MS = 75;
 
@@ -115,7 +115,7 @@ function getTrigger$1(optionsInt) {
   return TRIGGERS[optionsInt & 1];
 }
 
-const HovercardOptions = {
+const popoverOptions = {
   animation: undefined,
   cache: undefined,
   loading: undefined,
@@ -126,8 +126,8 @@ const HovercardOptions = {
 };
 
 function extractOptionsFromElement(coupdoeilElement) {
-  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt(coupdoeilElement);
-  const options = Object.create(HovercardOptions);
+  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt(coupdoeilElement);
+  const options = Object.create(popoverOptions);
   for (const option of ORDERED_OPTIONS) {
     options[option] = OPTIONS[option].getter(optionsInt);
   }
@@ -135,21 +135,21 @@ function extractOptionsFromElement(coupdoeilElement) {
 }
 
 function parseOtionsInt(coupdoeilElement) {
-  const optionsString = coupdoeilElement.getAttribute("hc");
+  const optionsString = coupdoeilElement.getAttribute("popover-options");
   return parseInt(optionsString, 36);
 }
 
 function extractOptionFromElement(coupdoeilElement, optionName) {
-  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt(coupdoeilElement);
+  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt(coupdoeilElement);
   return OPTIONS[optionName].getter(optionsInt);
 }
 
 function getType(controller) {
-  return controller.coupdoeilElement.getAttribute("hc-type");
+  return controller.coupdoeilElement.getAttribute("popover-type");
 }
 
 function getParams(controller) {
-  return controller.coupdoeilElement.getAttribute("hc-params");
+  return controller.coupdoeilElement.getAttribute("popover-params");
 }
 
 function getTrigger(controller) {
@@ -173,10 +173,10 @@ function notTriggeredOnHover(controller) {
 }
 
 function preloadedContentElement(controller) {
-  return controller.coupdoeilElement.querySelector(".hovercard-content");
+  return controller.coupdoeilElement.querySelector(".popover-content");
 }
 
-const hovercardContentHTMLMap = new Map;
+const popoverContentHTMLMap = new Map;
 
 function cacheMapKey(controller) {
   if (preloadedContentElement(controller)) {
@@ -185,16 +185,16 @@ function cacheMapKey(controller) {
   return getType(controller) + getParams(controller);
 }
 
-function getHovercardContentHTML(controller) {
-  return hovercardContentHTMLMap.get(cacheMapKey(controller));
+function getPopoverContentHTML(controller) {
+  return popoverContentHTMLMap.get(cacheMapKey(controller));
 }
 
-function setHovercardContentHTML(controller, value) {
-  hovercardContentHTMLMap.set(cacheMapKey(controller), value);
+function setPopoverContentHTML(controller, value) {
+  popoverContentHTMLMap.set(cacheMapKey(controller), value);
 }
 
-function clearHovercardContentCache() {
-  hovercardContentHTMLMap.clear();
+function clearPopoverContentCache() {
+  popoverContentHTMLMap.clear();
 }
 
 const sides = [ "top", "right", "bottom", "left" ];
@@ -1771,10 +1771,10 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-async function positionHovercard(target, card, options) {
+async function positionPopover(target, card, options) {
   let {placement: placements, offset: offsetValue} = options;
   const placement = placements[0];
-  const arrowElement = card.querySelector("[data-hovercard-arrow]");
+  const arrowElement = card.querySelector("[data-popover-arrow]");
   const middleware = [ AutoPositioningWithFallbacks(placements) ];
   if (arrowElement) {
     const arrowSize = arrowElement.clientWidth;
@@ -1898,18 +1898,18 @@ function afterTransition(element) {
   }));
 }
 
-const CURRENT_HOVERCARDS_BY_ID = new Map;
+const CURRENT_POPOVERS_BY_ID = new Map;
 
-function currentHovercardsById() {
-  return CURRENT_HOVERCARDS_BY_ID;
+function currentPopoversById() {
+  return CURRENT_POPOVERS_BY_ID;
 }
 
 function addToCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement);
+  CURRENT_POPOVERS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement);
 }
 
 function removeFromCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.delete(coupdoeilElement.uniqueId);
+  CURRENT_POPOVERS_BY_ID.delete(coupdoeilElement.uniqueId);
 }
 
 function detachFromParent(controller) {
@@ -1925,7 +1925,7 @@ function cancelOpenCloseActions(controller) {
 }
 
 function cancelOpening(controller) {
-  delete controller.coupdoeilElement.openingHovercard;
+  delete controller.coupdoeilElement.openingPopover;
 }
 
 function cancelCloseRequest(controller) {
@@ -1935,7 +1935,7 @@ function cancelCloseRequest(controller) {
 }
 
 function closeNow(controller, allowAnimation = true) {
-  if (controller.closing || controller.isClosed && !controller.coupdoeilElement.openingHovercard) return;
+  if (controller.closing || controller.isClosed && !controller.coupdoeilElement.openingPopover) return;
   controller.closing = true;
   cancelOpenCloseActions(controller);
   controller.children.forEach((childController => {
@@ -1950,7 +1950,7 @@ function closeNow(controller, allowAnimation = true) {
 }
 
 async function closeWithAnimation(controller) {
-  await leave(controller.card, "hovercard");
+  await leave(controller.card, "popover");
   closeWithoutAnimation(controller);
 }
 
@@ -1960,7 +1960,7 @@ function closeWithoutAnimation(controller) {
     controller.card = null;
   }
   delete controller.closing;
-  delete controller.coupdoeilElement.dataset.hovercardOpen;
+  delete controller.coupdoeilElement.dataset.popoverOpen;
 }
 
 function clear(controller) {
@@ -1989,23 +1989,23 @@ function closeOnHoverChildrenLater(controller) {
 }
 
 function closeAllNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    closeNow(coupdoeilElement.hovercardController);
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    closeNow(coupdoeilElement.popoverController);
     removeFromCurrents(coupdoeilElement);
   }
 }
 
 function clearAll() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    clear(coupdoeilElement.hovercardController);
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    clear(coupdoeilElement.popoverController);
     removeFromCurrents(coupdoeilElement);
   }
 }
 
 function closeTriggeredOnHoverLater() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeLater(coupdoeilElement.hovercardController);
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.popoverController)) {
+      closeLater(coupdoeilElement.popoverController);
       removeFromCurrents(coupdoeilElement);
     }
   }
@@ -2017,19 +2017,19 @@ function closeTriggeredOnHoverNowUnlessAncestor(controller) {
     topMostParent = topMostParent.parent;
   }
   const idToSkip = topMostParent.coupdoeilElement.uniqueId;
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (coupdoeilElement.uniqueId !== idToSkip && triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeNow(coupdoeilElement.hovercardController);
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    if (coupdoeilElement.uniqueId !== idToSkip && triggeredOnHover(coupdoeilElement.popoverController)) {
+      closeNow(coupdoeilElement.popoverController);
       removeFromCurrents(coupdoeilElement);
     }
   }
 }
 
-function fetchHovercardContent(controller) {
+function fetchPopoverContent(controller) {
   const type = getType(controller);
   const params = getParams(controller);
   const authenticityToken = document.querySelector("meta[name=csrf-token]").content;
-  let url = `/coupdoeil/hovercard`;
+  let url = `/coupdoeil/popover`;
   const opts = {
     method: "POST",
     headers: {
@@ -2043,31 +2043,31 @@ function fetchHovercardContent(controller) {
   };
   return fetch(url, opts).then((response => {
     if (response.status >= 400) {
-      throw "error while fetching hovercard content";
+      throw "error while fetching popover content";
     }
     return response.text();
   }));
 }
 
-async function loadHovercardContentHTML(controller, options, delayOptions) {
+async function loadPopoverContentHTML(controller, options, delayOptions) {
   return new Promise((resolve => {
     setTimeout((async () => {
-      if (!controller.coupdoeilElement.openingHovercard) return;
-      if (options.cache === false || options.cache && !getHovercardContentHTML(controller)) {
+      if (!controller.coupdoeilElement.openingPopover) return;
+      if (options.cache === false || options.cache && !getPopoverContentHTML(controller)) {
         let html;
         if (options.loading === "preload") {
           html = preloadedContentElement(controller).innerHTML;
         } else {
-          html = await fetchHovercardContent(controller);
+          html = await fetchPopoverContent(controller);
         }
-        setHovercardContentHTML(controller, html);
+        setPopoverContentHTML(controller, html);
       }
       resolve();
     }), delayOptions.fetch);
   }));
 }
 
-async function openHovercard(controller, {parent: parent, beforeDisplay: beforeDisplay}) {
+async function openPopover(controller, {parent: parent, beforeDisplay: beforeDisplay}) {
   if (controller.isOpen) {
     return cancelCloseRequest(controller);
   }
@@ -2078,10 +2078,10 @@ async function openHovercard(controller, {parent: parent, beforeDisplay: beforeD
   const options = extractOptionsFromElement(controller.coupdoeilElement);
   const delays = getDelayOptionsForController(controller, options);
   const openingDelay = new Promise((resolve => setTimeout(resolve, delays.opening)));
-  const fetchDelay = loadHovercardContentHTML(controller, options, delays);
+  const fetchDelay = loadPopoverContentHTML(controller, options, delays);
   await Promise.all([ fetchDelay, openingDelay ]);
   const parentIsClosedOrClosing = controller.parent && (controller.parent.isClosed || controller.parent.closingRequest);
-  if (controller.coupdoeilElement.openingHovercard && !parentIsClosedOrClosing) {
+  if (controller.coupdoeilElement.openingPopover && !parentIsClosedOrClosing) {
     await display(controller, options, beforeDisplay);
   }
 }
@@ -2089,13 +2089,13 @@ async function openHovercard(controller, {parent: parent, beforeDisplay: beforeD
 async function display(controller, options, beforeDisplay) {
   if (controller.isOpen) return;
   cancelCloseRequest(controller);
-  controller.card = buildHovercardElement(controller, options);
+  controller.card = buildPopoverElement(controller, options);
   document.body.appendChild(controller.card);
   if (options.animation) {
     controller.card.dataset.animation = options.animation;
   }
   executeNextFrameIfStillOpening(controller, (async () => {
-    await positionHovercard(controller.coupdoeilElement, controller.card, options);
+    await positionPopover(controller.coupdoeilElement, controller.card, options);
     controller.card.classList.add("hidden");
     controller.card.style.removeProperty("visibility");
     executeNextFrameIfStillOpening(controller, (async () => {
@@ -2103,16 +2103,16 @@ async function display(controller, options, beforeDisplay) {
         beforeDisplay(controller);
       }
       addToCurrents(controller.coupdoeilElement);
-      delete controller.coupdoeilElement.openingHovercard;
-      controller.coupdoeilElement.dataset.hovercardOpen = true;
-      await enter(controller.card, "hovercard");
+      delete controller.coupdoeilElement.openingPopover;
+      controller.coupdoeilElement.dataset.popoverOpen = true;
+      await enter(controller.card, "popover");
     }));
   }));
 }
 
 function executeNextFrameIfStillOpening(controller, callback) {
   requestAnimationFrame((() => {
-    if (controller.coupdoeilElement.openingHovercard) {
+    if (controller.coupdoeilElement.openingPopover) {
       callback.call();
     } else {
       clear(controller);
@@ -2133,12 +2133,12 @@ function getDelayOptionsForController(controller, options) {
   };
 }
 
-function buildHovercardElement(controller, options) {
+function buildPopoverElement(controller, options) {
   const el = document.createElement("div");
   el.setAttribute("role", "dialog");
-  el.classList.add(HOVERCARD_CLASS_NAME);
+  el.classList.add(POPOVER_CLASS_NAME);
   el.style.cssText = "position: absolute; left: 0; top: 0;";
-  el.innerHTML = getHovercardContentHTML(controller);
+  el.innerHTML = getPopoverContentHTML(controller);
   el.controller = controller;
   el.dataset.placement = options.placement;
   el.style.visibility = "hidden";
@@ -2155,20 +2155,20 @@ class CoupdoeilElement extends HTMLElement {
   constructor() {
     super();
     this.uniqueId = generateUniqueId();
-    this.hovercardController = new HovercardController(this);
+    this.popoverController = new PopoverController(this);
   }
-  openHovercard(triggerElement = null, callbacks) {
-    if (this.openingHovercard || this.hovercardController.isOpen || this.disabled || triggerElement === this) return;
-    this.openingHovercard = true;
-    const parent = this.closest(HOVERCARD_SELECTOR)?.controller;
+  openPopover(triggerElement = null, callbacks) {
+    if (this.openingPopover || this.popoverController.isOpen || this.disabled || triggerElement === this) return;
+    this.openingPopover = true;
+    const parent = this.closest(POPOVER_SELECTOR)?.controller;
     addToCurrents(this);
-    return openHovercard(this.hovercardController, {
+    return openPopover(this.popoverController, {
       parent: parent,
       ...callbacks
     });
   }
-  closeHovercard() {
-    closeNow(this.hovercardController);
+  closePopover() {
+    closeNow(this.popoverController);
   }
   get disabled() {
     return !!this.getAttribute("disabled");
@@ -2182,119 +2182,119 @@ class CoupdoeilElement extends HTMLElement {
   }
 }
 
-function isElementCloseHovercardButton(element) {
-  return element.closest(HOVERCARD_CLOSE_BTN_SELECTOR) || element.dataset.hasOwnProperty("hovercardClose");
+function isElementClosePopoverButton(element) {
+  return element.closest(POPOVER_CLOSE_BTN_SELECTOR) || element.dataset.hasOwnProperty("popoverClose");
 }
 
-function isAnyHovercardOpened() {
-  return currentHovercardsById().size > 0;
+function isAnyPopoverOpened() {
+  return currentPopoversById().size > 0;
 }
 
 const coupdoeilOnClickEvent = ({target: clickedElement}) => {
   const coupdoeilElement = clickedElement.closest("coup-doeil");
-  const hovercardElement = clickedElement.closest(HOVERCARD_SELECTOR);
-  if (coupdoeilElement && hovercardElement) {
-    handleClickedCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, clickedElement);
+  const popoverElement = clickedElement.closest(POPOVER_SELECTOR);
+  if (coupdoeilElement && popoverElement) {
+    handleClickedCoupdoeilWithinPopover(coupdoeilElement, popoverElement, clickedElement);
   } else if (coupdoeilElement) {
-    handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement);
-  } else if (hovercardElement) {
-    handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement);
+    handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement);
+  } else if (popoverElement) {
+    handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement);
   } else {
-    handleClickOutsideCoupdoeilAndHovercard();
+    handleClickOutsideCoupdoeilAndPopover();
   }
 };
 
-function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardElement, clickedElement) {
-  const hovercard = coupdoeilElement.hovercardController;
-  if (noTriggeredOnClick(hovercard)) return;
-  if (hovercard.isOpen) {
-    closeNow(hovercard);
+function handleClickedCoupdoeilWithinPopover(coupdoeilElement, _popoverElement, clickedElement) {
+  const popover = coupdoeilElement.popoverController;
+  if (noTriggeredOnClick(popover)) return;
+  if (popover.isOpen) {
+    closeNow(popover);
   } else {
-    coupdoeilElement.openHovercard(clickedElement);
+    coupdoeilElement.openPopover(clickedElement);
   }
 }
 
-function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement) {
-  const hovercard = coupdoeilElement.hovercardController;
-  if (noTriggeredOnClick(hovercard)) return;
-  if (hovercard.isOpen) {
-    closeNow(hovercard);
+function handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement) {
+  const popover = coupdoeilElement.popoverController;
+  if (noTriggeredOnClick(popover)) return;
+  if (popover.isOpen) {
+    closeNow(popover);
   } else {
     closeAllNow();
-    coupdoeilElement.openHovercard(clickedElement);
+    coupdoeilElement.openPopover(clickedElement);
   }
 }
 
-function handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement) {
-  const hovercard = hovercardElement.controller;
-  if (isElementCloseHovercardButton(clickedElement)) {
-    closeNow(hovercard);
-  } else if (hovercard.children.size > 0) {
-    closeChildrenNow(hovercard);
+function handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement) {
+  const popover = popoverElement.controller;
+  if (isElementClosePopoverButton(clickedElement)) {
+    closeNow(popover);
+  } else if (popover.children.size > 0) {
+    closeChildrenNow(popover);
   }
 }
 
-function handleClickOutsideCoupdoeilAndHovercard() {
+function handleClickOutsideCoupdoeilAndPopover() {
   closeAllNow();
 }
 
 const onMouseOver = ({target: hoveredElement}) => {
   const coupdoeilElement = hoveredElement.closest("coup-doeil");
-  const hovercardElement = hoveredElement.closest(HOVERCARD_SELECTOR);
-  if (coupdoeilElement && hovercardElement) {
-    handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement);
+  const popoverElement = hoveredElement.closest(POPOVER_SELECTOR);
+  if (coupdoeilElement && popoverElement) {
+    handleMouseOverCoupdoeilWithinPopover(coupdoeilElement, popoverElement, hoveredElement);
   } else if (coupdoeilElement) {
-    handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement);
-  } else if (hovercardElement) {
-    handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement);
+    handleMouseOverCoupdoeilOutsidePopover(coupdoeilElement, hoveredElement);
+  } else if (popoverElement) {
+    handleOverOutsideCoupdoeilButWithinPopover(popoverElement);
   } else {
-    handleOverOutsideCoupdoeilAndHovercard();
+    handleOverOutsideCoupdoeilAndPopover();
   }
 };
 
-function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement) {
-  const childHovercard = coupdoeilElement.hovercardController;
-  const parentHovercard = hovercardElement.controller;
-  if (notTriggeredOnHover(childHovercard)) return;
-  if (childHovercard.isOpen) {
-    closeChildrenNow(childHovercard);
+function handleMouseOverCoupdoeilWithinPopover(coupdoeilElement, popoverElement, hoveredElement) {
+  const childPopover = coupdoeilElement.popoverController;
+  const parentPopover = popoverElement.controller;
+  if (notTriggeredOnHover(childPopover)) return;
+  if (childPopover.isOpen) {
+    closeChildrenNow(childPopover);
   } else {
-    closeChildrenNow(parentHovercard);
-    coupdoeilElement.openHovercard(hoveredElement);
+    closeChildrenNow(parentPopover);
+    coupdoeilElement.openPopover(hoveredElement);
   }
 }
 
-function handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement) {
-  const hovercard = coupdoeilElement.hovercardController;
-  if (notTriggeredOnHover(hovercard)) return;
-  if (hovercard.isClosed) {
-    coupdoeilElement.openHovercard(hoveredElement, {
+function handleMouseOverCoupdoeilOutsidePopover(coupdoeilElement, hoveredElement) {
+  const popover = coupdoeilElement.popoverController;
+  if (notTriggeredOnHover(popover)) return;
+  if (popover.isClosed) {
+    coupdoeilElement.openPopover(hoveredElement, {
       beforeDisplay: closeTriggeredOnHoverNowUnlessAncestor
     });
-  } else if (hovercard.closingRequest) {
-    cancelCloseRequest(hovercard);
+  } else if (popover.closingRequest) {
+    cancelCloseRequest(popover);
     addToCurrents(coupdoeilElement);
   }
 }
 
-function handleOverOutsideCoupdoeilAndHovercard() {
-  if (isAnyHovercardOpened()) {
+function handleOverOutsideCoupdoeilAndPopover() {
+  if (isAnyPopoverOpened()) {
     closeTriggeredOnHoverLater();
   }
 }
 
-function handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement) {
-  const hovercard = hovercardElement.controller;
-  if (hovercard.closingRequest) {
-    cancelCloseRequest(hovercard);
-    addToCurrents(hovercard.coupdoeilElement);
-  } else if (hovercard.children.size > 0) {
-    closeOnHoverChildrenLater(hovercard);
+function handleOverOutsideCoupdoeilButWithinPopover(popoverElement) {
+  const popover = popoverElement.controller;
+  if (popover.closingRequest) {
+    cancelCloseRequest(popover);
+    addToCurrents(popover.coupdoeilElement);
+  } else if (popover.children.size > 0) {
+    closeOnHoverChildrenLater(popover);
   }
 }
 
 document.addEventListener("DOMContentLoaded", (() => {
-  clearHovercardContentCache();
+  clearPopoverContentCache();
   document.addEventListener("click", coupdoeilOnClickEvent);
   document.documentElement.addEventListener("mouseover", onMouseOver, {
     passive: true
@@ -2305,7 +2305,7 @@ document.addEventListener("DOMContentLoaded", (() => {
     }));
     document.addEventListener("turbo:load", (_event => {
       clearAll();
-      clearHovercardContentCache();
+      clearPopoverContentCache();
     }));
   }
 }));