coupdoeil 1.0.0.pre.alpha.1 → 1.0.0.pre.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 169910fbcad5cad39a93e1decd6f720e9ef85e9d51c692f3341e0112050e6161
-  data.tar.gz: e3b4aec3d619240cfbdf1c324026f30d1ccc9e6d501fbd4a15af9aadf478b98b
+  metadata.gz: 692dde641a7454618ccdfced914f4a42fcba0259e69147598b0c95bc51c8fae0
+  data.tar.gz: 5c384435d015f13eaa720d1710c7f789dae8c3b8619cf9202abfe3284c554cc1
 SHA512:
-  metadata.gz: e48dd152e215b65f18f298b53fb71420068acd52121d0a849fa160bee5807e090b6bee3347c75c497c7d5f248592f3b9e260ee749e84ff017ed07d7635d62ea4
-  data.tar.gz: 68829f5765f8c808dceec92c226b820bb202093bfb66b7b4d38d1d1f41d5e902b905292201386c72c7364f221a198c754b011e6243a13f6f0ec562c09e4f86f7
+  metadata.gz: 84570a2fbca462e2c611b9c0064bc8864097e2bdbea4828ba09c85978d00a7bdb49fe73ef2ccf2efe9ea722c6a952507e3784c7d0faa0a052b3dddd2156e0121
+  data.tar.gz: fa9bddb68087382174d222bf4160973655d95433d7d222396204c08a98b9bead48bf3dfb64b6984e5ba614726d49e22493a64b5ab5c5b584fdbe170e1e544be9

data/CHANGELOG.md

@@ -1 +1,5 @@
 # CHANGELOG
+
+### 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,191 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-async function positionHovercard(controller, options) {
+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) {
+  console.log("deleting openingHovercard: ", controller.coupdoeilElement.uniqueId);
+  delete controller.coupdoeilElement.openingHovercard;
+}
+
+function cancelCloseRequest(controller) {
+  clearTimeout(controller.closingRequest);
+  controller.closingRequest = null;
+  addToCurrents(controller.coupdoeilElement);
+}
+
+function closeNow(controller, allowAnimation = true) {
+  console.log("closing: ", controller.coupdoeilElement.uniqueId);
+  console.log({
+    closing: controller.closing,
+    isClosed: controller.isClosed && !controller.coupdoeilElement.openingHovercard
+  });
+  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);
+  }
+}
+
+async function closeWithAnimation(controller) {
+  await leave(controller.card, "hovercard");
+  closeWithoutAnimation(controller);
+}
+
+function closeWithoutAnimation(controller) {
+  if (controller.card) {
+    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);
+    }
+  }));
+}
+
+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()) {
+    clearHovercard(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);
+    }
+  }
+}
+
+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 +1957,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 +1965,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,49 +2018,64 @@ function positionArrow(arrowElement, computedData) {
   });
 }
 
-function cancelOpening(controller) {
-  clearTimeout(controller.openingDelay);
-  controller.openingDelay = null;
-  clearTimeout(controller.fetchDelay);
-  controller.fetchDelay = null;
-  delete controller.coupdoeilElement.openingHovercard;
+function fetchHovercardContent(controller) {
+  const type = getType(controller);
+  const params = getParams(controller);
+  const authenticityToken = document.querySelector("meta[name=csrf-token]").content;
+  let url = `/coupdoeil/hovercard`;
+  const opts = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      params: params,
+      action_name: type,
+      authenticity_token: authenticityToken
+    })
+  };
+  return fetch(url, opts).then((response => {
+    if (response.status >= 400) {
+      throw "error while fetching hovercard content";
+    }
+    return response.text();
+  }));
+}
+
+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}) {
+  console.log("opening: ", controller.coupdoeilElement.uniqueId);
   if (controller.isOpen) {
-    cancelCloseRequest(controller);
-    return addToCurrents(controller.coupdoeilElement);
+    return cancelCloseRequest(controller);
   }
   if (parent) {
     controller.parent = parent;
     parent.children.add(controller);
   }
-  const delayOptions = getDelayOptionsForController(controller);
+  const delays = 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);
-    }
-  }));
-  if (!getHovercardContentHTML(controller) || !cache) {
-    controller.fetchDelay = new Promise((resolve => {
-      setTimeout(resolve, delayOptions.fetch);
-    }));
-    await controller.fetchDelay;
-    if (!controller.fetchDelay) {
-      return;
-    }
-    controller.fetchDelay = null;
-    const html = preloadedContentElement(controller)?.innerHTML || await fetchHovercardContent(controller);
-    setHovercardContentHTML(controller, html);
-  }
-  await controller.openingDelay;
+  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.openingDelay && !parentIsClosedOrClosing) {
-    controller.openingDelay = null;
+  if (controller.coupdoeilElement.openingHovercard && !parentIsClosedOrClosing) {
     await display(controller, options);
   }
 }
@@ -2065,13 +2089,22 @@ async function display(controller, options) {
     controller.card.dataset.animation = options.animation;
   }
   requestAnimationFrame((async () => {
+    if (!controller.coupdoeilElement.openingHovercard) {
+      return clear(controller);
+    }
     controller.card.style.opacity = "0";
     controller.card.classList.remove("hidden");
     requestAnimationFrame((async () => {
-      await positionHovercard(controller, options);
+      if (!controller.coupdoeilElement.openingHovercard) {
+        return clear(controller);
+      }
+      await positionHovercard(controller.coupdoeilElement, controller.card, options);
       controller.card.classList.add("hidden");
       controller.card.style.removeProperty("opacity");
       requestAnimationFrame((async () => {
+        if (!controller.coupdoeilElement.openingHovercard) {
+          return clear(controller);
+        }
         addToCurrents(controller.coupdoeilElement);
         delete controller.coupdoeilElement.openingHovercard;
         controller.coupdoeilElement.dataset.hovercardOpen = true;
@@ -2084,42 +2117,20 @@ async function display(controller, options) {
 function getDelayOptionsForController(controller) {
   if (triggeredOnClick(controller)) {
     return {
-      reOpening: 0,
-      actualOpening: 0,
-      fetch: 0
+      fetch: 0,
+      opening: 0
     };
   }
+  let fetchDelay;
+  {
+    fetchDelay = defaultConfig.openingDelay / 2;
+  }
   return {
-    fetch: defaultConfig.fetchDelay,
-    reOpening: defaultConfig.fetchDelay + defaultConfig.openingDelay,
-    actualOpening: defaultConfig.openingDelay - defaultConfig.fetchDelay
+    fetch: fetchDelay,
+    opening: defaultConfig.openingDelay
   };
 }
 
-function fetchHovercardContent(controller) {
-  const type = getType(controller);
-  const params = getParams(controller);
-  const authenticityToken = document.querySelector("meta[name=csrf-token]").content;
-  let url = `/coupdoeil/hovercard`;
-  const opts = {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      params: params,
-      action_name: type,
-      authenticity_token: authenticityToken
-    })
-  };
-  return fetch(url, opts).then((response => {
-    if (response.status >= 400) {
-      throw "error while fetching hovercard content";
-    }
-    return response.text();
-  }));
-}
-
 function buildHovercardElement(controller, options) {
   const el = document.createElement("div");
   el.setAttribute("role", "dialog");