coupdoeil 1.0.0.pre.alpha.9 → 1.0.0.pre.alpha.10

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

@@ -17,17 +17,29 @@ export default class extends HTMLElement {
     this.hovercardController = new HovercardController(this)
   }
 
-  openHovercard() {
-    if (this.openingHovercard || this.hovercardController.isOpen) return;
+  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
     addToCurrents(this)
-    return openHovercard(this.hovercardController, { parent })
+    return openHovercard(this.hovercardController, { parent, ...callbacks })
   }
 
   closeHovercard() {
     closeNow(this.hovercardController)
   }
+
+  get disabled() {
+    return !!this.getAttribute("disabled")
+  }
+
+  set disabled(disabled) {
+    if (disabled) {
+      this.setAttribute("disabled", true)
+    } else {
+      this.removeAttribute("disabled")
+    }
+  }
 }

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

@@ -8,10 +8,10 @@ export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
   const hovercardElement = clickedElement.closest(HOVERCARD_SELECTOR)
 
   if (coupdoeilElement && hovercardElement) {
-    handleClickedCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement)
+    handleClickedCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, clickedElement)
   }
   else if (coupdoeilElement) {
-    handleClickedCoupdoeilOutsideHovercard(coupdoeilElement)
+    handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement)
   }
   else if (hovercardElement) {
     handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement)
@@ -21,7 +21,7 @@ export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
   }
 }
 
-function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardElement) {
+function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardElement, clickedElement) {
   const hovercard = coupdoeilElement.hovercardController
   if(noTriggeredOnClick(hovercard))
     return;
@@ -32,11 +32,11 @@ function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardEleme
   } else {
     // first click on a closed hovercard trigger opens it
     // If any other hovercard is open, it is the parent hovercard, hence it should not be closed.
-    coupdoeilElement.openHovercard()
+    coupdoeilElement.openHovercard(clickedElement)
   }
 }
 
-function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement) {
+function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement) {
   const hovercard = coupdoeilElement.hovercardController
   if(noTriggeredOnClick(hovercard))
     return;
@@ -48,7 +48,7 @@ function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement) {
     // close any other open hovercard
     closeAllNow()
     // first click on a closed hovercard trigger opens it
-    coupdoeilElement.openHovercard()
+    coupdoeilElement.openHovercard(clickedElement)
   }
 }
 

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

@@ -5,7 +5,8 @@ import {
   cancelCloseRequest,
   closeChildrenNow,
   closeOnHoverChildrenLater,
-  closeTriggeredOnHoverLater, closeTriggeredOnHoverNow
+  closeTriggeredOnHoverLater,
+  closeTriggeredOnHoverNowUnlessAncestor
 } from "../hovercard/closing";
 import {addToCurrents as addToCurrentHovercards} from "../hovercard/current";
 
@@ -14,10 +15,10 @@ export const onMouseOver = ({ target: hoveredElement }) => {
   const hovercardElement = hoveredElement.closest(HOVERCARD_SELECTOR)
 
   if (coupdoeilElement && hovercardElement) {
-    handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement)
+    handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement)
   }
   else if (coupdoeilElement) {
-    handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement)
+    handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement)
   }
   else if (hovercardElement) {
     handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement)
@@ -27,7 +28,7 @@ export const onMouseOver = ({ target: hoveredElement }) => {
   }
 }
 
-function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement) {
+function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement) {
   const childHovercard = coupdoeilElement.hovercardController
   const parentHovercard = hovercardElement.controller
   if(notTriggeredOnHover(childHovercard))
@@ -41,19 +42,18 @@ function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElem
     // 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()
+    coupdoeilElement.openHovercard(hoveredElement)
   }
 }
 
-function handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement) {
+function handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement) {
   const hovercard = coupdoeilElement.hovercardController
   if(notTriggeredOnHover(hovercard))
     return;
 
   if (hovercard.isClosed) {
     // Close any other open hovercard before opening this one
-    closeTriggeredOnHoverNow()
-    coupdoeilElement.openHovercard()
+    coupdoeilElement.openHovercard(hoveredElement, { beforeDisplay: closeTriggeredOnHoverNowUnlessAncestor })
   } else if (hovercard.closingRequest) {
     // hovercard is still open but was requested to close, then it clear this closing request
     // and ensures the hovercards stays in current hovercards register

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

@@ -1,5 +1,5 @@
 import {triggeredOnHover} from "./attributes"
-import {defaultConfig} from "./config"
+import {CLOSING_DELAY_MS} from "./config"
 import {leave} from "el-transition"
 import {addToCurrents, CURRENT_HOVERCARDS_BY_ID, removeFromCurrents} from "./current"
 
@@ -68,7 +68,7 @@ export function closeLater(controller) {
   cancelOpenCloseActions(controller)
   controller.closingRequest = setTimeout(() => {
     closeNow(controller)
-  }, defaultConfig.closingDelay)
+  }, CLOSING_DELAY_MS)
 }
 
 export function closeChildrenNow(controller) {
@@ -123,3 +123,18 @@ export function closeTriggeredOnHoverLater() {
     }
   }
 }
+
+export function closeTriggeredOnHoverNowUnlessAncestor(controller) {
+  let topMostParent = controller
+  while (topMostParent.parent) {
+    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)
+      removeFromCurrents(coupdoeilElement)
+    }
+  }
+}

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

@@ -2,14 +2,14 @@ export const HOVERCARD_CLASS_NAME = 'coupdoeil--hovercard'
 export const HOVERCARD_SELECTOR = `.${HOVERCARD_CLASS_NAME}`
 export const HOVERCARD_CLOSE_BTN_SELECTOR = '[data-hovercard-close]'
 
-export const defaultConfig = {
-  // the time (ms) to wait before closing the hovercard,
-  // to avoid flickering if the user hovers out and in quickly,
-  // or if the user moves the mouse from the target to the hovercard
-  closingDelay: 150,
-  // the time (ms) to wait before starting to fetch the content,
-  // to avoid fetching too soon if the user hovers in and out the target quickly
-  fetchDelay: 100,
-  // the minimum time (ms) the user should wait before seeing the hovercard
-  openingDelay: 200,
-}
+// the time (ms) to wait before closing the hovercard,
+// to avoid flickering if the user hovers out and in quickly,
+// or if the user moves the mouse from the target to the hovercard
+export const CLOSING_DELAY_MS = 75
+
+// the time (ms) to wait before starting to fetch the content,
+// to avoid fetching too soon if the user hovers in and out the target quickly
+export const FETCH_DELAY_MS = 100
+
+// the minimum time (ms) the user should wait before seeing the hovercard
+export const OPENING_DELAY_MS = 200

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

@@ -1,4 +1,4 @@
-import {defaultConfig, HOVERCARD_CLASS_NAME} from "./config"
+import {FETCH_DELAY_MS, HOVERCARD_CLASS_NAME, OPENING_DELAY_MS} from "./config"
 import {getParams, getType, preloadedContentElement, triggeredOnClick} from "./attributes"
 import {getHovercardContentHTML, setHovercardContentHTML} from "./cache"
 import {extractOptionsFromElement} from "./optionsParser"
@@ -47,7 +47,7 @@ async function loadHovercardContentHTML(controller, options, delayOptions) {
   })
 }
 
-export async function openHovercard(controller, { parent }) {
+export async function openHovercard(controller, { parent, beforeDisplay }) {
   if (controller.isOpen) {
     return cancelCloseRequest(controller)
   }
@@ -56,8 +56,8 @@ export async function openHovercard(controller, { parent }) {
     parent.children.add(controller)
   }
 
-  const delays = getDelayOptionsForController(controller)
   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)
@@ -67,11 +67,11 @@ export async function openHovercard(controller, { parent }) {
 
   // 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)
+    await display(controller, options, beforeDisplay)
   }
 }
 
-async function display(controller, options) {
+async function display(controller, options, beforeDisplay) {
   if (controller.isOpen) return;
 
   cancelCloseRequest(controller)
@@ -91,6 +91,9 @@ async function display(controller, options) {
     controller.card.style.removeProperty('visibility')
 
     executeNextFrameIfStillOpening(controller, async () => {
+      if (beforeDisplay) {
+        beforeDisplay(controller)
+      }
       // // adding again the card to make sure it is in the map, could be better
       addToCurrents(controller.coupdoeilElement)
       delete controller.coupdoeilElement.openingHovercard
@@ -111,18 +114,12 @@ function executeNextFrameIfStillOpening(controller, callback) {
   })
 }
 
-function getDelayOptionsForController(controller) {
-  if (triggeredOnClick(controller)) {
+function getDelayOptionsForController(controller, options) {
+  if (options.openingDelay === false || triggeredOnClick(controller)) {
     return { fetch: 0, opening: 0 }
   }
 
-  let fetchDelay
-  if (defaultConfig.openingDelay === 0) {
-    fetchDelay = 0
-  } else {
-    fetchDelay = defaultConfig.openingDelay / 2
-  }
-  return { fetch: fetchDelay, opening: defaultConfig.openingDelay }
+  return { fetch: FETCH_DELAY_MS, opening: OPENING_DELAY_MS }
 }
 
 function buildHovercardElement(controller, options) {

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

@@ -1,19 +1,21 @@
 const OPTIONS = {
   animation: { getter: getAnimation },
   cache: { getter: getCache },
+  loading: { getter: getLoading },
   offset: { getter: getOffset },
+  openingDelay: { getter: getOpeningDelay },
   placement: { getter: getPlacement },
-  loading: { getter: getLoading },
-  trigger: { getter: getTrigger }
+  trigger: { getter: getTrigger },
 }
 
 const ORDERED_OPTIONS = [
-  "trigger",    // bit size: 1  shift: 0
-  "loading",    // bit size: 2  shift: 1
-  "cache",      // bit size: 1  shift: 3
-  "animation",  // bit size: 3  shift: 4
-  "placement",  // bit size: 16 shift: 7
-  "offset"      // bit size: 21 shift: 23
+  "trigger",      // bit size: 1  shift: 0
+  "loading",      // bit size: 2  shift: 1
+  "cache",        // bit size: 1  shift: 3
+  "openingDelay", // bit size: 1  shift: 4
+  "animation",    // bit size: 3  shift: 5
+  "placement",    // bit size: 16 shift: 8
+  "offset"        // bit size: 21 shift: 24
 ]
 
 const TRIGGERS = ["hover", "click"]
@@ -39,8 +41,8 @@ function parseCSSSize(value) {
 }
 
 function getOffset(optionsInt) {
-  // shift is BigInt(16 + 3 + 1 + 2 + 1)
-  const offsetBits = Number(BigInt(optionsInt) >> BigInt(23))
+  // shift is BigInt(16 + 3 + 1 + 1 + 2 + 1)
+  const offsetBits = Number(BigInt(optionsInt) >> BigInt(24))
   if (offsetBits === 0)
     return 0
 
@@ -55,8 +57,8 @@ function getOffset(optionsInt) {
 }
 
 function getPlacement(optionsInt) {
-  // shift is 3 + 1 + 2 + 1, mask is 2 ** 16 - 1
-  const placementBits = (optionsInt >> 7) & 65535
+  // shift is 3 + 1 + 1 + 2 + 1, mask is 2 ** 16 - 1
+  const placementBits = (optionsInt >> 8) & 65535
   let shift = 0
   let lastPlacement = null
   const placements = []
@@ -70,7 +72,12 @@ function getPlacement(optionsInt) {
 }
 
 function getAnimation(optionsInt) {
-  return ANIMATIONS[(optionsInt & 56) >> 4]
+  // return ANIMATIONS[(optionsInt & 56) >> 5]
+  return ANIMATIONS[(optionsInt >> 5) & 7]
+}
+
+function getOpeningDelay(optionsInt) {
+  return ((optionsInt >> 4) & 1) === 1
 }
 
 function getCache(optionsInt) {
@@ -89,9 +96,10 @@ function getTrigger(optionsInt) {
 const HovercardOptions = {
   animation: undefined,
   cache: undefined,
+  loading: undefined,
   offset: undefined,
+  openingDelay: undefined,
   placement: undefined,
-  loading: undefined,
   trigger: undefined,
 }
 

data/app/models/coupdoeil/hovercard/option/opening_delay.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class OpeningDelay < Coupdoeil::Hovercard::Option
+        self.bit_size = 1
+
+        VALUES = [true, false].freeze
+
+        class << self
+          def parse(value) = value ? 1 : 0
+        end
+
+        def validate! = validate_inclusion!
+      end
+    end
+  end
+end

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

@@ -7,6 +7,7 @@ module Coupdoeil
         Option::Offset,
         Option::Placement,
         Option::Animation,
+        Option::OpeningDelay,
         Option::Cache,
         Option::Loading,
         Option::Trigger

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

@@ -3,7 +3,7 @@
 module Coupdoeil
   class Hovercard
     module ViewContextDelegation
-      attr_accessor :__cp_view_context
+      attr_accessor :__cp_view_context, :hovercard
 
       # For CSRF authenticity tokens in forms
       def config = __cp_view_context.config
@@ -13,6 +13,7 @@ module Coupdoeil
 
       def helpers = __cp_view_context
       def controller = __cp_view_context.controller
+      def params = hovercard.params
     end
   end
 end

data/app/models/coupdoeil/hovercard.rb

@@ -34,7 +34,8 @@ module Coupdoeil
       animation: "slide-in",
       cache: true,
       loading: :async,
-      trigger: "hover"
+      trigger: "hover",
+      opening_delay: true
     )
 
     DoubleRenderError = Class.new(::AbstractController::DoubleRenderError)
@@ -92,6 +93,7 @@ module Coupdoeil
     def view_context
       super.tap do |context|
         context.extend ViewContextDelegation
+        context.hovercard = self
         context.__cp_view_context = @__cp_view_context
       end
     end

data/lib/coupdoeil/version.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: coupdoeil
 version: !ruby/object:Gem::Version
-  version: 1.0.0.pre.alpha.9
+  version: 1.0.0.pre.alpha.10
 platform: ruby
 authors:
 - PageHey
 bindir: bin
 cert_chain: []
-date: 2025-05-24 00:00:00.000000000 Z
+date: 2025-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -99,6 +99,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Easy and powerful hovercard system for Ruby On Rails.
 email:
 - pagehey@pm.me
@@ -143,6 +171,7 @@ files:
 - app/models/coupdoeil/hovercard/option/cache.rb
 - app/models/coupdoeil/hovercard/option/loading.rb
 - app/models/coupdoeil/hovercard/option/offset.rb
+- app/models/coupdoeil/hovercard/option/opening_delay.rb
 - app/models/coupdoeil/hovercard/option/placement.rb
 - app/models/coupdoeil/hovercard/option/trigger.rb
 - app/models/coupdoeil/hovercard/options_set.rb