coupdoeil 1.0.0.pre.alpha.2 → 1.0.0.pre.alpha.3

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

@@ -16,7 +16,6 @@ export function cancelOpenCloseActions(controller) {
 }
 
 function cancelOpening(controller) {
-  console.log('deleting openingHovercard: ', controller.coupdoeilElement.uniqueId)
   delete controller.coupdoeilElement.openingHovercard
 }
 
@@ -27,8 +26,6 @@ export function cancelCloseRequest(controller) {
 }
 
 export 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

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

@@ -48,7 +48,6 @@ async function loadHovercardContentHTML(controller, options, delayOptions) {
 }
 
 export async function openHovercard(controller, { parent }) {
-  console.log('opening: ', controller.coupdoeilElement.uniqueId)
   if (controller.isOpen) {
     return cancelCloseRequest(controller)
   }
@@ -84,40 +83,34 @@ async function display(controller, options) {
     controller.card.dataset.animation = options.animation
   }
 
-  requestAnimationFrame(async () => {
-    if (!controller.coupdoeilElement.openingHovercard) {
-      return clearHovercard(controller)
-    }
-
-    controller.card.style.opacity = '0'
-    controller.card.classList.remove('hidden')
-
-    requestAnimationFrame(async () => {
-      if (!controller.coupdoeilElement.openingHovercard) {
-        return clearHovercard(controller)
-      }
-
-      await positionHovercard(controller.coupdoeilElement, controller.card, options)
-
-      controller.card.classList.add('hidden')
-      controller.card.style.removeProperty('opacity')
+  executeNextFrameIfStillOpening(controller, async () => {
+    await positionHovercard(controller.coupdoeilElement, controller.card, options)
 
-      requestAnimationFrame(async () => {
-        if (!controller.coupdoeilElement.openingHovercard) {
-          return clearHovercard(controller)
-        }
+    // see buildHovercardElement() about next 2 lines
+    controller.card.classList.add('hidden')
+    controller.card.style.removeProperty('visibility')
 
-        // // 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
+    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
 
-        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 { fetch: 0, opening: 0 }
@@ -135,10 +128,15 @@ function getDelayOptionsForController(controller) {
 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/positioning.js

@@ -5,7 +5,6 @@ import {
   offset,
   arrow
 } from "@floating-ui/dom"
-import {clear as clearHovercard} from "./closing";
 
 export async function positionHovercard(target, card, options) {
   let { placement: placements, offset: offsetValue } = options

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/version.rb

@@ -1,3 +1,3 @@
 module Coupdoeil
-  VERSION = "1.0.0-alpha.2"
+  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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: coupdoeil
 version: !ruby/object:Gem::Version
-  version: 1.0.0.pre.alpha.2
+  version: 1.0.0.pre.alpha.3
 platform: ruby
 authors:
 - PageHey