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

data/app/javascript/coupdoeil/elements/coupdoeil_element.js

@@ -1,8 +1,8 @@
 import {HovercardController} from '../hovercard/controller'
 import {openHovercard} from '../hovercard/opening'
-import {addToCurrents} from "../hovercard/actions";
 import {HOVERCARD_SELECTOR} from "../hovercard/config";
 import {closeNow} from "../hovercard/closing";
+import {addToCurrents} from "../hovercard/current";
 
 function generateUniqueId() {
   const array = new Uint32Array(1)

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

@@ -1,8 +1,7 @@
 import {HOVERCARD_SELECTOR} from "../hovercard/config";
 import {isElementCloseHovercardButton} from "../hovercard/state_check";
-import {closeAllNow} from "../hovercard/actions";
 import {noTriggeredOnClick} from "../hovercard/attributes";
-import {closeChildrenNow, closeNow} from "../hovercard/closing";
+import {closeAllNow, closeChildrenNow, closeNow} from "../hovercard/closing";
 
 export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
   const coupdoeilElement = clickedElement.closest('coup-doeil')

data/app/javascript/coupdoeil/events/onmouseover.js

@@ -1,11 +1,13 @@
 import {HOVERCARD_SELECTOR} from "../hovercard/config";
 import {isAnyHovercardOpened} from "../hovercard/state_check";
+import {notTriggeredOnHover} from "../hovercard/attributes";
 import {
-  addToCurrents as addToCurrentHovercards,
+  cancelCloseRequest,
+  closeChildrenNow,
+  closeOnHoverChildrenLater,
   closeTriggeredOnHoverLater, closeTriggeredOnHoverNow
-} from "../hovercard/actions";
-import {notTriggeredOnHover} from "../hovercard/attributes";
-import {cancelCloseRequest, closeChildrenNow, closeOnHoverChildrenLater} from "../hovercard/closing";
+} from "../hovercard/closing";
+import {addToCurrents as addToCurrentHovercards} from "../hovercard/current";
 
 export const onMouseOver = ({ target: hoveredElement }) => {
   const coupdoeilElement = hoveredElement.closest('coup-doeil')
@@ -32,12 +34,13 @@ function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElem
     return;
 
   if (childHovercard.isOpen) {
-    // when mouse goes back from child hovercard to its coupdoeil element within parent hovercard
+    // when the mouse goes back from child hovercard to its coupdoeil element within parent hovercard
     // it means that this child hovercard was already open
     closeChildrenNow(childHovercard)
   } else {
     // ensures to close other children hovercards before opening the one that current one
     closeChildrenNow(parentHovercard)
+    // should also close any open hovercard outside of parent
     coupdoeilElement.openHovercard()
   }
 }

data/app/javascript/coupdoeil/events.js

@@ -1,6 +1,8 @@
 import {coupdoeilOnClickEvent} from "./events/onclick";
 import {onMouseOver} from "./events/onmouseover";
-import {clearHovercardContentCache, clearAll} from "./hovercard/actions";
+
+import {clearHovercardContentCache} from "./hovercard/cache";
+import {clearAll} from "./hovercard/closing";
 
 document.addEventListener("DOMContentLoaded", () => {
   clearHovercardContentCache()

data/app/javascript/coupdoeil/hovercard/actions.js

@@ -1,60 +0,0 @@
-import {hovercardContentHTMLMap} from "./cache";
-import {triggeredOnHover} from "./attributes";
-import {clear as clearHovercard, closeLater, closeNow, cancelCloseRequest} from "./closing";
-import {cancelOpening} from "./opening";
-
-const CURRENT_HOVERCARDS_BY_ID = new Map()
-window.hovercads = CURRENT_HOVERCARDS_BY_ID
-
-export function clearHovercardContentCache() {
-  hovercardContentHTMLMap.clear()
-}
-
-export function currentHovercardsById() {
-  return CURRENT_HOVERCARDS_BY_ID
-}
-
-export function addToCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement)
-}
-
-export function closeAllNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    closeNow(coupdoeilElement.hovercardController)
-    removeFromCurrents(coupdoeilElement)
-  }
-}
-
-export function clearAll() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    clearHovercard(coupdoeilElement.hovercardController)
-    removeFromCurrents(coupdoeilElement)
-  }
-}
-
-export function closeTriggeredOnHoverNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeNow(coupdoeilElement.hovercardController)
-      removeFromCurrents(coupdoeilElement)
-    }
-  }
-}
-
-export function closeTriggeredOnHoverLater() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeLater(coupdoeilElement.hovercardController)
-      removeFromCurrents(coupdoeilElement)
-    }
-  }
-}
-
-export function removeFromCurrents(coupdoeilElement) {
-  CURRENT_HOVERCARDS_BY_ID.delete(coupdoeilElement.uniqueId)
-}
-
-export function cancelOpenCloseActions(controller) {
-  cancelOpening(controller)
-  cancelCloseRequest(controller)
-}

data/app/javascript/coupdoeil/hovercard/cache.js

@@ -1,4 +1,4 @@
-import {getType, getParams, preloadedContentElement} from './attributes'
+import {getParams, getType, preloadedContentElement} from './attributes'
 
 export const hovercardContentHTMLMap = new Map()
 
@@ -16,3 +16,7 @@ export function getHovercardContentHTML(controller) {
 export function setHovercardContentHTML(controller, value) {
   hovercardContentHTMLMap.set(cacheMapKey(controller), value)
 }
+
+export function clearHovercardContentCache() {
+  hovercardContentHTMLMap.clear()
+}

data/app/javascript/coupdoeil/hovercard/closing.js

@@ -1,7 +1,7 @@
-import {triggeredOnHover} from "./attributes";
-import {defaultConfig} from "./config";
-import {leave} from "el-transition";
-import {cancelOpenCloseActions} from "./actions";
+import {triggeredOnHover} from "./attributes"
+import {defaultConfig} from "./config"
+import {leave} from "el-transition"
+import {addToCurrents, CURRENT_HOVERCARDS_BY_ID, removeFromCurrents} from "./current"
 
 function detachFromParent(controller) {
   if (controller.parent) {
@@ -10,13 +10,23 @@ function detachFromParent(controller) {
   }
 }
 
+export function cancelOpenCloseActions(controller) {
+  cancelOpening(controller)
+  cancelCloseRequest(controller)
+}
+
+function cancelOpening(controller) {
+  delete controller.coupdoeilElement.openingHovercard
+}
+
 export function cancelCloseRequest(controller) {
   clearTimeout(controller.closingRequest)
   controller.closingRequest = null
+  addToCurrents(controller.coupdoeilElement)
 }
 
 export function closeNow(controller, allowAnimation = true) {
-  if (controller.closing || controller.isClosed) return;
+  if (controller.closing || (controller.isClosed && !controller.coupdoeilElement.openingHovercard)) return
 
   controller.closing = true
 
@@ -28,7 +38,7 @@ export function closeNow(controller, allowAnimation = true) {
 
   detachFromParent(controller)
 
-  if (allowAnimation && controller.card.dataset.animation) {
+  if (allowAnimation && controller.card && controller.card.dataset.animation) {
     closeWithAnimation(controller)
   } else {
     closeWithoutAnimation(controller)
@@ -42,8 +52,10 @@ async function closeWithAnimation(controller) {
 }
 
 function closeWithoutAnimation(controller) {
-  controller.card.remove()
-  controller.card = null
+  if (controller.card) {
+    controller.card.remove()
+    controller.card = null
+  }
   delete controller.closing
   delete controller.coupdoeilElement.dataset.hovercardOpen
 }
@@ -79,3 +91,35 @@ export function closeOnHoverChildrenLater(controller) {
     }
   })
 }
+
+export function closeAllNow() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    closeNow(coupdoeilElement.hovercardController)
+    removeFromCurrents(coupdoeilElement)
+  }
+}
+
+export function clearAll() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    clearHovercard(coupdoeilElement.hovercardController)
+    removeFromCurrents(coupdoeilElement)
+  }
+}
+
+export function closeTriggeredOnHoverNow() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
+      closeNow(coupdoeilElement.hovercardController)
+      removeFromCurrents(coupdoeilElement)
+    }
+  }
+}
+
+export function closeTriggeredOnHoverLater() {
+  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
+      closeLater(coupdoeilElement.hovercardController)
+      removeFromCurrents(coupdoeilElement)
+    }
+  }
+}

data/app/javascript/coupdoeil/hovercard/controller.js

@@ -8,8 +8,6 @@ export class HovercardController {
     this.parent = null // can go on hovercardElement
 
     this.closingRequest = null // can go on coupdoeil element
-    this.openingDelay = null // can go on coupdoeil element
-    this.fetchDelay = null // can go on coupdoeil element
   }
 
   get isOpen() {

data/app/javascript/coupdoeil/hovercard/current.js

@@ -0,0 +1,13 @@
+export const CURRENT_HOVERCARDS_BY_ID = new Map()
+
+export function currentHovercardsById() {
+  return CURRENT_HOVERCARDS_BY_ID
+}
+
+export function addToCurrents(coupdoeilElement) {
+  CURRENT_HOVERCARDS_BY_ID.set(coupdoeilElement.uniqueId, coupdoeilElement)
+}
+
+export function removeFromCurrents(coupdoeilElement) {
+  CURRENT_HOVERCARDS_BY_ID.delete(coupdoeilElement.uniqueId)
+}

data/app/javascript/coupdoeil/hovercard/opening.js

@@ -1,60 +1,72 @@
-import {defaultConfig, HOVERCARD_CLASS_NAME} from "./config";
-import {getParams, getType, preloadedContentElement, triggeredOnClick} from "./attributes";
-import {getHovercardContentHTML, setHovercardContentHTML} from "./cache";
-import {addToCurrents} from "./actions";
-import {extractOptionsFromElement} from "./optionsParser";
-import {cancelCloseRequest} from "./closing";
-import {positionHovercard} from "./positioning";
-import {enter} from "el-transition";
-
-export function cancelOpening(controller) {
-  clearTimeout(controller.openingDelay)
-  controller.openingDelay = null
-  clearTimeout(controller.fetchDelay)
-  controller.fetchDelay = null
-  delete controller.coupdoeilElement.openingHovercard
+import {defaultConfig, HOVERCARD_CLASS_NAME} from "./config"
+import {getParams, getType, preloadedContentElement, triggeredOnClick} from "./attributes"
+import {getHovercardContentHTML, setHovercardContentHTML} from "./cache"
+import {extractOptionsFromElement} from "./optionsParser"
+import {positionHovercard} from "./positioning"
+import {enter} from "el-transition"
+import {addToCurrents} from "./current"
+import {cancelCloseRequest, clear as clearHovercard} from "./closing"
+
+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, 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 // opening has been canceled
+
+      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)
+  })
 }
 
 export async function openHovercard(controller, { parent }) {
   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 } = options
 
-  controller.openingDelay = new Promise((resolve) => {
-    if (getHovercardContentHTML(controller) && cache) {
-      setTimeout(resolve, delayOptions.reOpening)
-    } else {
-      setTimeout(resolve, delayOptions.actualOpening)
-    }
-  })
-  if (!getHovercardContentHTML(controller) || !cache) {
-    // prevent fetching if the user hovers in and out quickly
-    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)
-  }
-  // still await the delay even if content is already fetched
-  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)
-  // but if opening has been cancelled (nullified), the wait still happens, so we need to check again
-  if (controller.openingDelay && !parentIsClosedOrClosing) {
-    controller.openingDelay = null
+
+  // but if opening has been canceled (nullified), the wait still happens, so we need to check again
+  if (controller.coupdoeilElement.openingHovercard && !parentIsClosedOrClosing) {
     await display(controller, options)
   }
 }
@@ -71,69 +83,60 @@ async function display(controller, options) {
     controller.card.dataset.animation = options.animation
   }
 
-  requestAnimationFrame(async () => {
-    controller.card.style.opacity = '0'
-    controller.card.classList.remove('hidden')
+  executeNextFrameIfStillOpening(controller, async () => {
+    await positionHovercard(controller.coupdoeilElement, controller.card, options)
 
-    requestAnimationFrame(async () => {
-      await positionHovercard(controller, options)
+    // see buildHovercardElement() about next 2 lines
+    controller.card.classList.add('hidden')
+    controller.card.style.removeProperty('visibility')
 
-      controller.card.classList.add('hidden')
-      controller.card.style.removeProperty('opacity')
+    executeNextFrameIfStillOpening(controller, async () => {
+      // // adding again the card to make sure it is in the map, could be better
+      addToCurrents(controller.coupdoeilElement)
+      delete controller.coupdoeilElement.openingHovercard
+      controller.coupdoeilElement.dataset.hovercardOpen = true
 
-      requestAnimationFrame(async () => {
-        // adding again the card to make sure it is in the map, could be better
-        addToCurrents(controller.coupdoeilElement)
-        delete controller.coupdoeilElement.openingHovercard
-        controller.coupdoeilElement.dataset.hovercardOpen = true
-
-        await enter(controller.card, 'hovercard')
-      })
+      await enter(controller.card, 'hovercard')
     })
   })
 }
 
+function executeNextFrameIfStillOpening(controller, callback) {
+  requestAnimationFrame(() => {
+    if (controller.coupdoeilElement.openingHovercard) {
+      callback.call()
+    } else {
+      clearHovercard(controller)
+    }
+  })
+}
+
 function getDelayOptionsForController(controller) {
   if (triggeredOnClick(controller)) {
-    return { reOpening: 0, actualOpening: 0, fetch: 0 }
+    return { fetch: 0, opening: 0 }
   }
-  return {
-    fetch: defaultConfig.fetchDelay,
-    // the time (ms) to wait if we already have fetched the content
-    reOpening: defaultConfig.fetchDelay + defaultConfig.openingDelay,
-    // the time (ms) to wait if we already have waited to fetch the content
-    actualOpening: defaultConfig.openingDelay - defaultConfig.fetchDelay
-  }
-}
 
-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, action_name: type, authenticity_token: authenticityToken })
+  let fetchDelay
+  if (defaultConfig.openingDelay === 0) {
+    fetchDelay = 0
+  } else {
+    fetchDelay = defaultConfig.openingDelay / 2
   }
-  return fetch(url, opts)
-    .then((response) => {
-      if (response.status >= 400) {
-        throw 'error while fetching hovercard content'
-      }
-      return response.text()
-    })
+  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
+
+  // Initial style is not .hidden (no display: none;) and visibility: 'hidden'; so the card is inserted
+  // in DOM the without being visible.
+  // This allows the browser to compute its actual size so the positioning is computed correctly.
+  el.style.visibility = 'hidden'
   return el
 }

data/app/javascript/coupdoeil/hovercard/optionsParser.js

@@ -25,7 +25,7 @@ const PLACEMENTS = [
   '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') {
@@ -78,7 +78,8 @@ function getCache(optionsInt) {
 }
 
 function getLoading(optionsInt) {
-  return LOADINGS[optionsInt & 3 >> 1]
+  // Shift right 1 time to remove trigger bit, mask with 3 (0b11).
+  return LOADINGS[(optionsInt >> 1) & 3]
 }
 
 function getTrigger(optionsInt) {

data/app/javascript/coupdoeil/hovercard/positioning.js

@@ -6,10 +6,10 @@ import {
   arrow
 } from "@floating-ui/dom"
 
-export async function positionHovercard(controller, options) {
+export 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) {
@@ -21,7 +21,7 @@ export async function positionHovercard(controller, options) {
   middleware.push(offset(offsetValue))
 
   const computedPosition = await computePosition(
-    controller.coupdoeilElement, controller.card, { placement, middleware }
+    target, card, { placement, middleware }
   )
   const { x, y, placement: actualPlacement} = computedPosition
 
@@ -29,8 +29,8 @@ export async function positionHovercard(controller, options) {
     positionArrow(arrowElement, computedPosition)
   }
 
-  controller.card.dataset.placement = actualPlacement
-  Object.assign(controller.card.style, { left: `${x}px`, top: `${y}px` })
+  card.dataset.placement = actualPlacement
+  Object.assign(card.style, { left: `${x}px`, top: `${y}px` })
 }
 
 const AutoPositioningWithFallbacks = (placements) => {

data/app/javascript/coupdoeil/hovercard/state_check.js

@@ -1,5 +1,6 @@
 import {HOVERCARD_CLOSE_BTN_SELECTOR} from "./config";
-import {currentHovercardsById} from "./actions";
+
+import {currentHovercardsById} from "./current";
 
 export function isElementCloseHovercardButton(element) {
   return element.closest(HOVERCARD_CLOSE_BTN_SELECTOR) ||

data/app/models/coupdoeil/hovercard/options_set.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-# frozen_string_literal: true
-
 module Coupdoeil
   class Hovercard
     class OptionsSet
@@ -19,7 +17,7 @@ module Coupdoeil
       attr_reader :options
 
       def dup = OptionsSet.new(options.deep_dup)
-      def preload? = options[:loading] == :preload
+      def preload? = options[:loading].to_s == "preload"
       def custom_animation? = options[:animation].to_s == "custom"
       def to_h = options
 

data/lib/coupdoeil/engine.rb

@@ -1,9 +1,17 @@
 module Coupdoeil
   class Engine < ::Rails::Engine
     isolate_namespace Coupdoeil
-    # config.eager_load_namespaces << Coupdoeil
+    config.eager_load_namespaces << Coupdoeil
     config.coupdoeil = ActiveSupport::OrderedOptions.new
 
+    config.autoload_once_paths = %W(
+      #{root}/app/controllers
+      #{root}/app/controllers/concerns
+      #{root}/app/helpers
+      #{root}/app/models
+      #{root}/app/models/concerns
+    )
+
     # If you don't want to precompile Coupdoeil's assets (eg. because you're using webpack),
     # you can do this in an intiailzer:
     #

data/lib/coupdoeil/version.rb

@@ -1,3 +1,3 @@
 module Coupdoeil
-  VERSION = "1.0.0-alpha.1"
+  VERSION = "1.0.0-alpha.3"
 end

data/lib/generators/coupdoeil/install/templates/layout.html.erb.tt

@@ -4,7 +4,6 @@
     padding: 1rem;
     border: 1px solid rgb(209 213 219);
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    width: max-content;
     max-width: 24rem;
     border-radius: 0.25rem;
   "

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: coupdoeil
 version: !ruby/object:Gem::Version
-  version: 1.0.0.pre.alpha.1
+  version: 1.0.0.pre.alpha.3
 platform: ruby
 authors:
 - PageHey
 bindir: bin
 cert_chain: []
-date: 2025-05-10 00:00:00.000000000 Z
+date: 2025-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -69,6 +69,7 @@ files:
 - app/javascript/coupdoeil/hovercard/closing.js
 - app/javascript/coupdoeil/hovercard/config.js
 - app/javascript/coupdoeil/hovercard/controller.js
+- app/javascript/coupdoeil/hovercard/current.js
 - app/javascript/coupdoeil/hovercard/opening.js
 - app/javascript/coupdoeil/hovercard/optionsParser.js
 - app/javascript/coupdoeil/hovercard/positioning.js