coupdoeil 1.0.0.pre.alpha.1 → 1.0.0.pre.alpha.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 169910fbcad5cad39a93e1decd6f720e9ef85e9d51c692f3341e0112050e6161
-  data.tar.gz: e3b4aec3d619240cfbdf1c324026f30d1ccc9e6d501fbd4a15af9aadf478b98b
+  metadata.gz: '0871a9b627344de4a1fe232f327a356ae872276aad53fe80f02484f597c1f2e2'
+  data.tar.gz: ab0f944bd59bc7459f4e8dd12f3bdfbbbf28d52a7687434db49cffa2e364bd86
 SHA512:
-  metadata.gz: e48dd152e215b65f18f298b53fb71420068acd52121d0a849fa160bee5807e090b6bee3347c75c497c7d5f248592f3b9e260ee749e84ff017ed07d7635d62ea4
-  data.tar.gz: 68829f5765f8c808dceec92c226b820bb202093bfb66b7b4d38d1d1f41d5e902b905292201386c72c7364f221a198c754b011e6243a13f6f0ec562c09e4f86f7
+  metadata.gz: b6c7fe4cdf5617157b0262055890657092d907decb2c73f7873d6a2ffd9664218740a8369615207945dea2e2570a2616aba025d8be39abe8b3bf690b47fa083a
+  data.tar.gz: 98f0fd4ed2eaca581be298319d4de20465490f08dbba2223ab712dcd5be51c3a946d19176a079074451b0d290bf7385f3e5fb22387c86f19ba4d9c5efd22401a

data/CHANGELOG.md

@@ -1 +1,12 @@
 # CHANGELOG
+
+### ???
+- update getting-started docs
+- remove JS console logs
+- remove width: max-content from layout template
+- update docs
+- fix Coupdoeil::Hovercard::OptionSet#preload?
+
+### 1.0.0-alpha.2
+- refactor `opening.js`
+- fix the load of Coupdoeil::Engine

data/app/assets/javascripts/coupdoeil.js

@@ -5,8 +5,6 @@ class HovercardController {
     this.children = new Set;
     this.parent = null;
     this.closingRequest = null;
-    this.openingDelay = null;
-    this.fetchDelay = null;
   }
   get isOpen() {
     return !!this.coupdoeilElement.dataset.hovercardOpen;
@@ -57,7 +55,7 @@ const ANIMATIONS = [ false, "slide-in", "fade-in", "slide-out", "custom" ];
 
 const PLACEMENTS = [ "auto", "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end" ];
 
-const LOADINGS = [ "asyn", "preload", "lazy" ];
+const LOADINGS = [ "async", "preload", "lazy" ];
 
 function parseCSSSize(value) {
   if (typeof value === "number") {
@@ -103,7 +101,7 @@ function getCache(optionsInt) {
 }
 
 function getLoading(optionsInt) {
-  return LOADINGS[optionsInt & 3 >> 1];
+  return LOADINGS[optionsInt >> 1 & 3];
 }
 
 function getTrigger$1(optionsInt) {
@@ -187,180 +185,10 @@ function setHovercardContentHTML(controller, value) {
   hovercardContentHTMLMap.set(cacheMapKey(controller), value);
 }
 
-async function enter(element, transitionName = null) {
-  element.classList.remove("hidden");
-  await transition("enter", element, transitionName);
-}
-
-async function leave(element, transitionName = null) {
-  await transition("leave", element, transitionName);
-  element.classList.add("hidden");
-}
-
-async function transition(direction, element, animation) {
-  const dataset = element.dataset;
-  const animationClass = animation ? `${animation}-${direction}` : direction;
-  let transition = `transition${direction.charAt(0).toUpperCase() + direction.slice(1)}`;
-  const genesis = dataset[transition] ? dataset[transition].split(" ") : [ animationClass ];
-  const start = dataset[`${transition}Start`] ? dataset[`${transition}Start`].split(" ") : [ `${animationClass}-start` ];
-  const end = dataset[`${transition}End`] ? dataset[`${transition}End`].split(" ") : [ `${animationClass}-end` ];
-  addClasses(element, genesis);
-  addClasses(element, start);
-  await nextFrame();
-  removeClasses(element, start);
-  addClasses(element, end);
-  await afterTransition(element);
-  removeClasses(element, end);
-  removeClasses(element, genesis);
-}
-
-function addClasses(element, classes) {
-  element.classList.add(...classes);
-}
-
-function removeClasses(element, classes) {
-  element.classList.remove(...classes);
-}
-
-function nextFrame() {
-  return new Promise((resolve => {
-    requestAnimationFrame((() => {
-      requestAnimationFrame(resolve);
-    }));
-  }));
-}
-
-function afterTransition(element) {
-  return new Promise((resolve => {
-    const computedDuration = getComputedStyle(element).transitionDuration.split(",")[0];
-    const duration = Number(computedDuration.replace("s", "")) * 1e3;
-    setTimeout((() => {
-      resolve();
-    }), duration);
-  }));
-}
-
-function detachFromParent(controller) {
-  if (controller.parent) {
-    controller.parent.children.delete(controller);
-    controller.parent = null;
-  }
-}
-
-function cancelCloseRequest(controller) {
-  clearTimeout(controller.closingRequest);
-  controller.closingRequest = null;
-}
-
-function closeNow(controller, allowAnimation = true) {
-  if (controller.closing || controller.isClosed) return;
-  controller.closing = true;
-  cancelOpenCloseActions(controller);
-  controller.children.forEach((childController => {
-    closeNow(childController);
-  }));
-  detachFromParent(controller);
-  if (allowAnimation && controller.card.dataset.animation) {
-    closeWithAnimation(controller);
-  } else {
-    closeWithoutAnimation(controller);
-  }
-}
-
-async function closeWithAnimation(controller) {
-  await leave(controller.card, "hovercard");
-  closeWithoutAnimation(controller);
-}
-
-function closeWithoutAnimation(controller) {
-  controller.card.remove();
-  controller.card = null;
-  delete controller.closing;
-  delete controller.coupdoeilElement.dataset.hovercardOpen;
-}
-
-function clear(controller) {
-  closeNow(controller, false);
-}
-
-function closeLater(controller) {
-  cancelOpenCloseActions(controller);
-  controller.closingRequest = setTimeout((() => {
-    closeNow(controller);
-  }), defaultConfig.closingDelay);
-}
-
-function closeChildrenNow(controller) {
-  controller.children.forEach((childController => {
-    closeNow(childController);
-  }));
-}
-
-function closeOnHoverChildrenLater(controller) {
-  controller.children.forEach((childController => {
-    if (triggeredOnHover(childController)) {
-      closeLater(childController);
-    }
-  }));
-}
-
-const CURRENT_HOVERCARDS_BY_ID = new Map;
-
-window.hovercads = CURRENT_HOVERCARDS_BY_ID;
-
 function clearHovercardContentCache() {
   hovercardContentHTMLMap.clear();
 }
 
-function currentHovercardsById() {
-  return CURRENT_HOVERCARDS_BY_ID;
-}
-
-function addToCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement);
-}
-
-function closeAllNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    closeNow(coupdoeilElement.hovercardController);
-    removeFromCurrents(coupdoeilElement);
-  }
-}
-
-function clearAll() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    clear(coupdoeilElement.hovercardController);
-    removeFromCurrents(coupdoeilElement);
-  }
-}
-
-function closeTriggeredOnHoverNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeNow(coupdoeilElement.hovercardController);
-      removeFromCurrents(coupdoeilElement);
-    }
-  }
-}
-
-function closeTriggeredOnHoverLater() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeLater(coupdoeilElement.hovercardController);
-      removeFromCurrents(coupdoeilElement);
-    }
-  }
-}
-
-function removeFromCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.delete(coupdoeilElement.uniqueId);
-}
-
-function cancelOpenCloseActions(controller) {
-  cancelOpening(controller);
-  cancelCloseRequest(controller);
-}
-
 const sides = [ "top", "right", "bottom", "left" ];
 
 const alignments = [ "start", "end" ];
@@ -1935,10 +1763,10 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-async function positionHovercard(controller, options) {
+async function positionHovercard(target, card, options) {
   let {placement: placements, offset: offsetValue} = options;
   const placement = placements[0];
-  const arrowElement = controller.card.querySelector("[data-hovercard-arrow]");
+  const arrowElement = card.querySelector("[data-hovercard-arrow]");
   const middleware = [ AutoPositioningWithFallbacks(placements) ];
   if (arrowElement) {
     const arrowSize = arrowElement.clientWidth;
@@ -1948,7 +1776,7 @@ async function positionHovercard(controller, options) {
     }));
   }
   middleware.push(offset(offsetValue));
-  const computedPosition = await computePosition(controller.coupdoeilElement, controller.card, {
+  const computedPosition = await computePosition(target, card, {
     placement: placement,
     middleware: middleware
   });
@@ -1956,8 +1784,8 @@ async function positionHovercard(controller, options) {
   if (arrowElement) {
     positionArrow(arrowElement, computedPosition);
   }
-  controller.card.dataset.placement = actualPlacement;
-  Object.assign(controller.card.style, {
+  card.dataset.placement = actualPlacement;
+  Object.assign(card.style, {
     left: `${x}px`,
     top: `${y}px`
   });
@@ -2009,91 +1837,179 @@ function positionArrow(arrowElement, computedData) {
   });
 }
 
+async function enter(element, transitionName = null) {
+  element.classList.remove("hidden");
+  await transition("enter", element, transitionName);
+}
+
+async function leave(element, transitionName = null) {
+  await transition("leave", element, transitionName);
+  element.classList.add("hidden");
+}
+
+async function transition(direction, element, animation) {
+  const dataset = element.dataset;
+  const animationClass = animation ? `${animation}-${direction}` : direction;
+  let transition = `transition${direction.charAt(0).toUpperCase() + direction.slice(1)}`;
+  const genesis = dataset[transition] ? dataset[transition].split(" ") : [ animationClass ];
+  const start = dataset[`${transition}Start`] ? dataset[`${transition}Start`].split(" ") : [ `${animationClass}-start` ];
+  const end = dataset[`${transition}End`] ? dataset[`${transition}End`].split(" ") : [ `${animationClass}-end` ];
+  addClasses(element, genesis);
+  addClasses(element, start);
+  await nextFrame();
+  removeClasses(element, start);
+  addClasses(element, end);
+  await afterTransition(element);
+  removeClasses(element, end);
+  removeClasses(element, genesis);
+}
+
+function addClasses(element, classes) {
+  element.classList.add(...classes);
+}
+
+function removeClasses(element, classes) {
+  element.classList.remove(...classes);
+}
+
+function nextFrame() {
+  return new Promise((resolve => {
+    requestAnimationFrame((() => {
+      requestAnimationFrame(resolve);
+    }));
+  }));
+}
+
+function afterTransition(element) {
+  return new Promise((resolve => {
+    const computedDuration = getComputedStyle(element).transitionDuration.split(",")[0];
+    const duration = Number(computedDuration.replace("s", "")) * 1e3;
+    setTimeout((() => {
+      resolve();
+    }), duration);
+  }));
+}
+
+const CURRENT_HOVERCARDS_BY_ID = new Map;
+
+function currentHovercardsById() {
+  return CURRENT_HOVERCARDS_BY_ID;
+}
+
+function addToCurrents(coupdoeilElement) {
+  CURRENT_HOVERCARDS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement);
+}
+
+function removeFromCurrents(coupdoeilElement) {
+  CURRENT_HOVERCARDS_BY_ID.delete(coupdoeilElement.uniqueId);
+}
+
+function detachFromParent(controller) {
+  if (controller.parent) {
+    controller.parent.children.delete(controller);
+    controller.parent = null;
+  }
+}
+
+function cancelOpenCloseActions(controller) {
+  cancelOpening(controller);
+  cancelCloseRequest(controller);
+}
+
 function cancelOpening(controller) {
-  clearTimeout(controller.openingDelay);
-  controller.openingDelay = null;
-  clearTimeout(controller.fetchDelay);
-  controller.fetchDelay = null;
   delete controller.coupdoeilElement.openingHovercard;
 }
 
-async function openHovercard(controller, {parent: parent}) {
-  if (controller.isOpen) {
-    cancelCloseRequest(controller);
-    return addToCurrents(controller.coupdoeilElement);
+function cancelCloseRequest(controller) {
+  clearTimeout(controller.closingRequest);
+  controller.closingRequest = null;
+  addToCurrents(controller.coupdoeilElement);
+}
+
+function closeNow(controller, allowAnimation = true) {
+  if (controller.closing || controller.isClosed && !controller.coupdoeilElement.openingHovercard) return;
+  controller.closing = true;
+  cancelOpenCloseActions(controller);
+  controller.children.forEach((childController => {
+    closeNow(childController);
+  }));
+  detachFromParent(controller);
+  if (allowAnimation && controller.card && controller.card.dataset.animation) {
+    closeWithAnimation(controller);
+  } else {
+    closeWithoutAnimation(controller);
   }
-  if (parent) {
-    controller.parent = parent;
-    parent.children.add(controller);
+}
+
+async function closeWithAnimation(controller) {
+  await leave(controller.card, "hovercard");
+  closeWithoutAnimation(controller);
+}
+
+function closeWithoutAnimation(controller) {
+  if (controller.card) {
+    controller.card.remove();
+    controller.card = null;
   }
-  const delayOptions = getDelayOptionsForController(controller);
-  const options = extractOptionsFromElement(controller.coupdoeilElement);
-  const {cache: cache} = options;
-  controller.openingDelay = new Promise((resolve => {
-    if (getHovercardContentHTML(controller) && cache) {
-      setTimeout(resolve, delayOptions.reOpening);
-    } else {
-      setTimeout(resolve, delayOptions.actualOpening);
-    }
+  delete controller.closing;
+  delete controller.coupdoeilElement.dataset.hovercardOpen;
+}
+
+function clear(controller) {
+  closeNow(controller, false);
+}
+
+function closeLater(controller) {
+  cancelOpenCloseActions(controller);
+  controller.closingRequest = setTimeout((() => {
+    closeNow(controller);
+  }), defaultConfig.closingDelay);
+}
+
+function closeChildrenNow(controller) {
+  controller.children.forEach((childController => {
+    closeNow(childController);
   }));
-  if (!getHovercardContentHTML(controller) || !cache) {
-    controller.fetchDelay = new Promise((resolve => {
-      setTimeout(resolve, delayOptions.fetch);
-    }));
-    await controller.fetchDelay;
-    if (!controller.fetchDelay) {
-      return;
+}
+
+function closeOnHoverChildrenLater(controller) {
+  controller.children.forEach((childController => {
+    if (triggeredOnHover(childController)) {
+      closeLater(childController);
     }
-    controller.fetchDelay = null;
-    const html = preloadedContentElement(controller)?.innerHTML || await fetchHovercardContent(controller);
-    setHovercardContentHTML(controller, html);
+  }));
+}
+
+function closeAllNow() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    closeNow(coupdoeilElement.hovercardController);
+    removeFromCurrents(coupdoeilElement);
   }
-  await controller.openingDelay;
-  const parentIsClosedOrClosing = controller.parent && (controller.parent.isClosed || controller.parent.closingRequest);
-  if (controller.openingDelay && !parentIsClosedOrClosing) {
-    controller.openingDelay = null;
-    await display(controller, options);
+}
+
+function clearAll() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    clearHovercard(coupdoeilElement.hovercardController);
+    removeFromCurrents(coupdoeilElement);
   }
 }
 
-async function display(controller, options) {
-  if (controller.isOpen) return;
-  cancelCloseRequest(controller);
-  controller.card = buildHovercardElement(controller, options);
-  document.body.appendChild(controller.card);
-  if (options.animation) {
-    controller.card.dataset.animation = options.animation;
+function closeTriggeredOnHoverNow() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
+      closeNow(coupdoeilElement.hovercardController);
+      removeFromCurrents(coupdoeilElement);
+    }
   }
-  requestAnimationFrame((async () => {
-    controller.card.style.opacity = "0";
-    controller.card.classList.remove("hidden");
-    requestAnimationFrame((async () => {
-      await positionHovercard(controller, options);
-      controller.card.classList.add("hidden");
-      controller.card.style.removeProperty("opacity");
-      requestAnimationFrame((async () => {
-        addToCurrents(controller.coupdoeilElement);
-        delete controller.coupdoeilElement.openingHovercard;
-        controller.coupdoeilElement.dataset.hovercardOpen = true;
-        await enter(controller.card, "hovercard");
-      }));
-    }));
-  }));
 }
 
-function getDelayOptionsForController(controller) {
-  if (triggeredOnClick(controller)) {
-    return {
-      reOpening: 0,
-      actualOpening: 0,
-      fetch: 0
-    };
+function closeTriggeredOnHoverLater() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
+      closeLater(coupdoeilElement.hovercardController);
+      removeFromCurrents(coupdoeilElement);
+    }
   }
-  return {
-    fetch: defaultConfig.fetchDelay,
-    reOpening: defaultConfig.fetchDelay + defaultConfig.openingDelay,
-    actualOpening: defaultConfig.openingDelay - defaultConfig.fetchDelay
-  };
 }
 
 function fetchHovercardContent(controller) {
@@ -2120,14 +2036,100 @@ function fetchHovercardContent(controller) {
   }));
 }
 
+async function loadHovercardContentHTML(controller, options, delayOptions) {
+  return new Promise((resolve => {
+    setTimeout((async () => {
+      if (!controller.coupdoeilElement.openingHovercard) return;
+      if (options.cache === false || options.cache && !getHovercardContentHTML(controller)) {
+        let html;
+        if (options.loading === "preload") {
+          html = preloadedContentElement(controller).innerHTML;
+        } else {
+          html = await fetchHovercardContent(controller);
+        }
+        setHovercardContentHTML(controller, html);
+      }
+      resolve();
+    }), delayOptions.fetch);
+  }));
+}
+
+async function openHovercard(controller, {parent: parent}) {
+  if (controller.isOpen) {
+    return cancelCloseRequest(controller);
+  }
+  if (parent) {
+    controller.parent = parent;
+    parent.children.add(controller);
+  }
+  const delays = getDelayOptionsForController(controller);
+  const options = extractOptionsFromElement(controller.coupdoeilElement);
+  const openingDelay = new Promise((resolve => setTimeout(resolve, delays.opening)));
+  const fetchDelay = loadHovercardContentHTML(controller, options, delays);
+  await Promise.all([ fetchDelay, openingDelay ]);
+  const parentIsClosedOrClosing = controller.parent && (controller.parent.isClosed || controller.parent.closingRequest);
+  if (controller.coupdoeilElement.openingHovercard && !parentIsClosedOrClosing) {
+    await display(controller, options);
+  }
+}
+
+async function display(controller, options) {
+  if (controller.isOpen) return;
+  cancelCloseRequest(controller);
+  controller.card = buildHovercardElement(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);
+    controller.card.classList.add("hidden");
+    controller.card.style.removeProperty("visibility");
+    executeNextFrameIfStillOpening(controller, (async () => {
+      addToCurrents(controller.coupdoeilElement);
+      delete controller.coupdoeilElement.openingHovercard;
+      controller.coupdoeilElement.dataset.hovercardOpen = true;
+      await enter(controller.card, "hovercard");
+    }));
+  }));
+}
+
+function executeNextFrameIfStillOpening(controller, callback) {
+  requestAnimationFrame((() => {
+    if (controller.coupdoeilElement.openingHovercard) {
+      callback.call();
+    } else {
+      clear(controller);
+    }
+  }));
+}
+
+function getDelayOptionsForController(controller) {
+  if (triggeredOnClick(controller)) {
+    return {
+      fetch: 0,
+      opening: 0
+    };
+  }
+  let fetchDelay;
+  {
+    fetchDelay = defaultConfig.openingDelay / 2;
+  }
+  return {
+    fetch: fetchDelay,
+    opening: defaultConfig.openingDelay
+  };
+}
+
 function buildHovercardElement(controller, options) {
   const el = document.createElement("div");
   el.setAttribute("role", "dialog");
-  el.classList.add(HOVERCARD_CLASS_NAME, "hidden");
+  el.classList.add(HOVERCARD_CLASS_NAME);
   el.style.cssText = "position: absolute; left: 0; top: 0;";
   el.innerHTML = getHovercardContentHTML(controller);
   el.controller = controller;
   el.dataset.placement = options.placement;
+  el.style.visibility = "hidden";
   return el;
 }