coupdoeil 1.1.1 → 1.2.1

data/app/controllers/coupdoeil/popovers_controller.rb

@@ -4,7 +4,6 @@ module Coupdoeil
   class PopoversController < ApplicationController
     before_action :set_action_and_resource_name
     before_action :set_popover_class
-    before_action :set_popover_params
 
     filters = _process_action_callbacks.map(&:filter) - [:set_action_and_resource_name, :set_popover_class, :set_popover_params]
     skip_before_action(*filters, raise: false)
@@ -12,14 +11,15 @@ module Coupdoeil
     skip_around_action(*filters, raise: false)
 
     def create
-      popover = @popover_klass.new(@popover_params, self)
-      render plain: popover.process(@action_name), layout: false
+      popover = @popover_klass.new(params[:params].presence, self)
+      popover.lazy_loading! if params[:lazy]
+      render html: popover.process(@action_name), layout: false
     end
 
     private
 
     def set_action_and_resource_name
-      @action_name, @resource_name = params[:action_name].split("@")
+      @action_name, @resource_name = params.require(:action_name).split("@")
     end
 
     if Rails.env.development?
@@ -31,17 +31,6 @@ module Coupdoeil
         @popover_klass = Coupdoeil::Popover.registry.lookup(@resource_name)
       end
     end
-
-    def set_popover_params
-      @popover_params =
-        if params[:params].blank?
-          @popover_params = {}.with_indifferent_access
-        else
-          raw_params = JSON.parse(params[:params])
-          card_params = Coupdoeil::Params.deserialize(raw_params).sole
-          card_params.with_indifferent_access
-        end
-    end
   end
 end
 ActiveSupport.run_load_hooks(:coupdoeil_popovers_controller, Coupdoeil::PopoversController)

data/app/helpers/coupdoeil/application_helper.rb

@@ -5,5 +5,18 @@ module Coupdoeil
     def coupdoeil_popover_tag(popover, popover_options = nil, tag_attributes = nil, &)
       render(Coupdoeil::Tag.new(popover:, popover_options:, attributes: tag_attributes), &)
     end
+
+    def coupdoeil_popover_dataset(popover, popover_options = nil, format: Coupdoeil.config.default_dataset_format)
+      coupdoeil_tag = Coupdoeil::Tag.new(popover:, popover_options:, attributes: nil)
+      case format
+      when :html then tag.attributes(data: coupdoeil_tag.popover_attributes)
+      when :nested then { data: coupdoeil_tag.popover_attributes }
+      when :prefixed then coupdoeil_tag.popover_attributes(prefixed: true)
+      when :raw then coupdoeil_tag.popover_attributes
+      else
+        raise ArgumentError, "unknown format '#{format}' (#{format.class}). \
+Expected :html, :nested, :prefixed or :raw."
+      end
+    end
   end
 end

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

@@ -23,7 +23,6 @@ export default class extends HTMLElement {
     this.openingPopover = true
 
     const parent = this.closest(POPOVER_SELECTOR)?.popoverController
-    addToCurrents(this)
     return openPopover(this.popoverController, { parent, ...callbacks })
   }
 
@@ -43,3 +42,44 @@ export default class extends HTMLElement {
     }
   }
 }
+
+export function upgradeNativeElement(element) {
+  if (element && element.tagName !== 'COUP-DOEIL' && !element.customCoupdoeilElement) {
+    element.customCoupdoeilElement = true
+    element.uniqueId = generateUniqueId()
+    element.popoverController = new PopoverController(element)
+    element.openPopover = function(triggerElement = null, callbacks) {
+      if (this.openingPopover || this.popoverController.isOpen || this.disabled) return;
+
+      this.openingPopover = true
+
+      const parent = this.closest(POPOVER_SELECTOR)?.popoverController
+      addToCurrents(this)
+      return openPopover(this.popoverController, { parent, ...callbacks })
+    }
+    element.closePopover = function() {
+      closeNow(this.popoverController)
+    }
+  }
+}
+
+export function downgradeNativeElement(element, {force = false} = {}) {
+  if (element.customCoupdoeilElement || force) {
+    delete element.closePopover
+    delete element.openPopover
+    delete element.popoverController
+    delete element.uniqueId
+    delete element.customCoupdoeilElement
+
+    delete element.dataset.popoverOptions
+    delete element.dataset.popoverParams
+    delete element.dataset.popoverType
+    delete element.dataset.popoverAnimation
+    delete element.dataset.popoverCache
+    delete element.dataset.popoverLoading
+    delete element.dataset.popoverOffset
+    delete element.dataset.popoverOpeningDelay
+    delete element.dataset.popoverPlacement
+    delete element.dataset.popoverTrigger
+  }
+}

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

@@ -1,10 +1,12 @@
 import {POPOVER_SELECTOR} from "../popover/config";
-import {isElementClosePopoverButton} from "../popover/state_check";
 import {noTriggeredOnClick} from "../popover/attributes";
 import {closeAllNow, closeChildrenNow, closeNow} from "../popover/closing";
+import {isElementClosePopoverButton} from "../popover/utils";
+import {upgradeNativeElement} from "../elements/coupdoeil_element";
 
 export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
-  const coupdoeilElement = clickedElement.closest('coup-doeil')
+  const coupdoeilElement = clickedElement.closest('coup-doeil, [data-popover-options]')
+  upgradeNativeElement(coupdoeilElement)
   const popoverElement = clickedElement.closest(POPOVER_SELECTOR)
 
   if (coupdoeilElement && popoverElement) {

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

@@ -1,8 +1,7 @@
 import {POPOVER_SELECTOR} from "../popover/config";
-import {isAnyPopoverOpened} from "../popover/state_check";
 import {notTriggeredOnHover} from "../popover/attributes";
 import {
-  cancelCloseRequest,
+  cancelClosingRequest,
   closeChildrenNow,
   closeOnHoverChildrenLater,
   closeOnHoverNotParentsLater,
@@ -10,9 +9,12 @@ import {
   closeTriggeredOnHoverNowUnlessAncestor
 } from "../popover/closing";
 import {addToCurrents as addToCurrentPopovers} from "../popover/current";
+import {isAnyPopoverOpened} from "../popover/utils";
+import {upgradeNativeElement} from "../elements/coupdoeil_element";
 
 export const onMouseOver = ({ target: hoveredElement }) => {
-  const coupdoeilElement = hoveredElement.closest('coup-doeil')
+  const coupdoeilElement = hoveredElement.closest('coup-doeil, [data-popover-options]')
+  upgradeNativeElement(coupdoeilElement)
   const popoverElement = hoveredElement.closest(POPOVER_SELECTOR)
 
   if (coupdoeilElement && popoverElement) {
@@ -39,6 +41,9 @@ function handleMouseOverCoupdoeilWithinPopover(coupdoeilElement, popoverElement,
     // when the mouse goes back from child popover to its coupdoeil element within parent popover
     // it means that this child popover was already open
     closeChildrenNow(childPopover)
+    // it should also prevent closing the child popover
+    cancelClosingRequest(childPopover)
+    addToCurrentPopovers(childPopover.coupdoeilElement)
   } else {
     // ensures to close other children popovers before opening the one that current one
     closeChildrenNow(parentPopover)
@@ -56,10 +61,10 @@ function handleMouseOverCoupdoeilOutsidePopover(coupdoeilElement, hoveredElement
     // Close any other open popover before opening this one
     coupdoeilElement.openPopover(hoveredElement, { beforeDisplay: closeTriggeredOnHoverNowUnlessAncestor })
   } else if (popover.closingRequest) {
-    // popover is still open but was requested to close, then it clear this closing request
-    // and ensures the popovers stays in current popovers register
-    cancelCloseRequest(popover)
-    addToCurrentPopovers(coupdoeilElement)
+    // If popover is still open but was requested to close, then it must clear this closing request
+    // and ensures the popovers stays in current popovers register.
+    cancelClosingRequest(popover)
+    addToCurrentPopovers(popover.coupdoeilElement)
   }
 }
 
@@ -75,13 +80,18 @@ function handleOverOutsideCoupdoeilButWithinPopover(popoverElement) {
   const popover = popoverElement.popoverController
 
   if (popover.closingRequest) {
-    // popover is still open but was requested to close, then it clears this closing request
-    // and ensures the popovers stays in current popovers register
-    // This typically happens when mouse was on coupdoeil element, then it moves toward the popover
-    // but because of a small gap, it triggers the closing request, but when the mouse finally enters the popover
-    // this closing request must be aborted.
-    cancelCloseRequest(popover)
-    addToCurrentPopovers(popover.coupdoeilElement)
+    // If popover is still open but was requested to close, then it must clear this closing request
+    // and ensures the popovers stays in current popovers register.
+    // This typically happens when the mouse was on coupdoeil element and moved toward the popover.
+    // But because of a small gap, it triggered the closing request. When the mouse finally enters the popover
+    // the closing request must be aborted. Since it typically happens in a child popover, it means it should also
+    // prevent all parents of this popover to close.
+    let topMostParent = popover
+    while (topMostParent) {
+      cancelClosingRequest(topMostParent)
+      addToCurrentPopovers(topMostParent.coupdoeilElement)
+      topMostParent = topMostParent.parent
+    }
   } else if (popover.children.size > 0) {
     // Happens when a child popover was open but mouse moved outside of it or its coupdoeil element,
     // but stays within the parent popover

data/app/javascript/coupdoeil/popover/attributes.js

@@ -1,11 +1,15 @@
 import {extractOptionFromElement} from "./options_parser";
 
 export function getType(controller) {
-  return controller.coupdoeilElement.getAttribute('popover-type')
+  return controller.coupdoeilElement.dataset.popoverType
 }
 
 export function getParams(controller) {
-  return controller.coupdoeilElement.getAttribute('popover-params')
+  return controller.coupdoeilElement.dataset.popoverParams
+}
+
+export function getOptions(controller) {
+  return controller.coupdoeilElement.dataset.popoverOptions
 }
 
 export function getTrigger(controller) {

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

@@ -1,4 +1,4 @@
-import {triggeredOnHover} from "./attributes"
+import {triggeredOnHover, triggeredOnClick} from "./attributes"
 import {CLOSING_DELAY_MS} from "./config"
 import {leave} from "el-transition"
 import {addToCurrents, CURRENT_POPOVERS_BY_ID, removeFromCurrents} from "./current"
@@ -12,22 +12,24 @@ function detachFromParent(controller) {
 
 export function cancelOpenCloseActions(controller) {
   cancelOpening(controller)
-  cancelCloseRequest(controller)
+  cancelClosingRequest(controller)
 }
 
 function cancelOpening(controller) {
   delete controller.coupdoeilElement.openingPopover
 }
 
-export function cancelCloseRequest(controller) {
-  clearTimeout(controller.closingRequest)
-  controller.closingRequest = null
-  addToCurrents(controller.coupdoeilElement)
+export function cancelClosingRequest(controller) {
+  if (controller.closingRequest) {
+    clearTimeout(controller.closingRequest)
+    controller.closingRequest = null
+  }
 }
 
 export function closeNow(controller, allowAnimation = true) {
   if (controller.closing || (controller.isClosed && !controller.coupdoeilElement.openingPopover)) return
 
+  cancelClosingRequest(controller)
   controller.closing = true
 
   cancelOpenCloseActions(controller)
@@ -39,9 +41,12 @@ export function closeNow(controller, allowAnimation = true) {
   detachFromParent(controller)
 
   if (allowAnimation && controller.card && controller.card.dataset.animation) {
-    closeWithAnimation(controller)
+    closeWithAnimation(controller).then(() => {
+      removeFromCurrents(controller.coupdoeilElement)
+    })
   } else {
     closeWithoutAnimation(controller)
+    removeFromCurrents(controller.coupdoeilElement)
   }
 }
 
@@ -98,25 +103,30 @@ export function closeOnHoverNotParentsLater(controller) {
     topMostParent = topMostParent.parent
   }
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
-    const notTopMostParent = topMostParent.coupdoeilElement.uniqueId !== coupdoeilElement.uniqueId
-    if (notTopMostParent && triggeredOnHover(coupdoeilElement.popoverController)) {
-      closeLater(coupdoeilElement.popoverController)
-      removeFromCurrents(coupdoeilElement)
+    if (
+      // SKIP If:
+      // popover has a parent (Closing topmost parent will close children)
+      coupdoeilElement.popoverController.parent !== null ||
+      // popover is topmost parent of currently hovered popover (the one whose controller was passed as an argument)
+      coupdoeilElement.uniqueId === topMostParent.coupdoeilElement.uniqueId ||
+      // popover is triggered on click
+      triggeredOnClick(coupdoeilElement.popoverController)
+    ) {
+      continue
     }
+      closeLater(coupdoeilElement.popoverController)
   }
 }
 
 export function closeAllNow() {
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
     closeNow(coupdoeilElement.popoverController)
-    removeFromCurrents(coupdoeilElement)
   }
 }
 
 export function clearAll() {
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
     clear(coupdoeilElement.popoverController)
-    removeFromCurrents(coupdoeilElement)
   }
 }
 
@@ -124,7 +134,6 @@ export function closeTriggeredOnHoverNow() {
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
     if (triggeredOnHover(coupdoeilElement.popoverController)) {
       closeNow(coupdoeilElement.popoverController)
-      removeFromCurrents(coupdoeilElement)
     }
   }
 }
@@ -133,7 +142,6 @@ export function closeTriggeredOnHoverLater() {
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
     if (triggeredOnHover(coupdoeilElement.popoverController)) {
       closeLater(coupdoeilElement.popoverController)
-      removeFromCurrents(coupdoeilElement)
     }
   }
 }
@@ -148,7 +156,6 @@ export function closeTriggeredOnHoverNowUnlessAncestor(controller) {
   for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
     if (coupdoeilElement.uniqueId !== idToSkip && triggeredOnHover(coupdoeilElement.popoverController)) {
       closeNow(coupdoeilElement.popoverController)
-      removeFromCurrents(coupdoeilElement)
     }
   }
 }

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

@@ -5,7 +5,7 @@ export const POPOVER_CLOSE_BTN_SELECTOR = '[data-popover-close]'
 // the time (ms) to wait before closing the popover,
 // to avoid flickering if the user hovers out and in quickly,
 // or if the user moves the mouse from the target to the popover
-export const CLOSING_DELAY_MS = 75
+export const CLOSING_DELAY_MS = 100
 
 // 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

data/app/javascript/coupdoeil/popover/lazy_loading.js

@@ -0,0 +1,36 @@
+import {getPopoverContentHTML, setPopoverContentHTML} from "./cache";
+import {positionPopover} from "./positioning";
+import {executeOnNextFrameIfStillOpening, fetchPopoverContent} from "./utils";
+
+const MINIMUM_LAZY_DELAY = 600;
+
+export function lazyLoadPopoverContent(controller, options) {
+  controller.coupdoeilElement.dataset.lazyLoading = "true"
+
+  // This delay ensures that popover won't blink if the actual content is quickly fetched.
+  // It also allows a consistent feeling for users across all lazy loaded popovers.
+  const lazyDelay = new Promise(resolve => setTimeout(resolve, MINIMUM_LAZY_DELAY))
+
+  fetchPopoverContent(controller).then(async (html) => {
+    // Wait for the delay if it is not resolved yet.
+    await lazyDelay
+
+    // Update popover content cache with the actual content,
+    // but doesn't update yet the rendered popover.
+    setPopoverContentHTML(controller, html)
+    delete controller.coupdoeilElement.dataset.lazyLoading
+
+    if (controller.card && !controller.closingRequest) {
+      // If popover has not been close are in the process of being closed,
+      // update its content with the newly fetch HTML.
+      controller.card.innerHTML = getPopoverContentHTML(controller)
+
+      // Since new content may change the rendered size of the popover,
+      // it must be positioned again. It is done one next frame so the browser has at least computed
+      // the new dimensions of the popover.
+      executeOnNextFrameIfStillOpening(controller, () => {
+        positionPopover(controller.coupdoeilElement, controller.card, options)
+      })
+    }
+  })
+}

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

@@ -1,47 +1,41 @@
-import {FETCH_DELAY_MS, POPOVER_CLASS_NAME, OPENING_DELAY_MS} from "./config"
-import {getParams, getType, preloadedContentElement, triggeredOnClick} from "./attributes"
+import {FETCH_DELAY_MS, OPENING_DELAY_MS, POPOVER_CLASS_NAME} from "./config"
+import {preloadedContentElement, triggeredOnClick} from "./attributes"
 import {getPopoverContentHTML, setPopoverContentHTML} from "./cache"
 import {extractOptionsFromElement} from "./options_parser"
 import {positionPopover} from "./positioning"
 import {enter} from "el-transition"
 import {addToCurrents} from "./current"
-import {cancelCloseRequest, clear as clearPopover} from "./closing"
-
-function fetchPopoverContent(controller) {
-  const type = getType(controller)
-  const params = getParams(controller)
-  const authenticityToken = document.querySelector('meta[name=csrf-token]')?.content
-  let url = `/coupdoeil/popover`
-  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 popover content'
-      }
-      return response.text()
-    })
-}
+import {cancelClosingRequest, clear as clearPopover} from "./closing"
+import {lazyLoadPopoverContent} from "./lazy_loading";
+import {executeOnNextFrameIfStillOpening, fetchPopoverContent} from "./utils";
 
 async function loadPopoverContentHTML(controller, options, delayOptions) {
   return new Promise((resolve) => {
     setTimeout(async () => {
-      if (!controller.coupdoeilElement.openingPopover) return // opening has been canceled
-
-      if (options.cache === false || (options.cache && !getPopoverContentHTML(controller))) {
-        let html
-        if (options.loading === "preload") {
-          html = preloadedContentElement(controller).innerHTML
-        } else {
-          html = await fetchPopoverContent(controller)
-        }
-        setPopoverContentHTML(controller, html)
+      // If opening has been canceled then this function aborts. Note that if lazy loading is enable it will still
+      // finish to load the HTML to the content cache.
+      if (!controller.coupdoeilElement.openingPopover) return resolve()
+      // If the cache option is set to true and the content has already been fetched then this function aborts.
+      if (getPopoverContentHTML(controller) && options.cache) return resolve()
+
+      let html
+      if (options.loading === "preload") {
+        // If loading option is set to 'preload', the preloaded content is present in DOM,
+        // nested in the coup-doeil element, in a template tag
+        html = preloadedContentElement(controller).innerHTML
+      } else if (options.loading === "lazy") {
+        // If loading option is set to 'lazy', the HTML is loaded first with the 'lazy' param set to true,
+        // to require the temporary/loader content of the popover.
+        // At the same time, a second call is triggered with 'lazyLoadPopoverContent' to fetch the actual popover
+        // content and update it when received.
+        html = await fetchPopoverContent(controller, options.loading === "lazy")
+
+        lazyLoadPopoverContent(controller, options)
+      } else if (options.loading === "async") {
+        html = await fetchPopoverContent(controller)
       }
+      // Once the HTML has been retrieved by any of the loading mode, the content cache is updated.
+      setPopoverContentHTML(controller, html)
       resolve()
     }, delayOptions.fetch)
   })
@@ -49,7 +43,7 @@ async function loadPopoverContentHTML(controller, options, delayOptions) {
 
 export async function openPopover(controller, { parent, beforeDisplay }) {
   if (controller.isOpen) {
-    return cancelCloseRequest(controller)
+    return cancelClosingRequest(controller)
   }
   if (parent) {
     controller.parent = parent
@@ -74,7 +68,7 @@ export async function openPopover(controller, { parent, beforeDisplay }) {
 async function display(controller, options, beforeDisplay) {
   if (controller.isOpen) return;
 
-  cancelCloseRequest(controller)
+  cancelClosingRequest(controller)
 
   if (controller.card) {
     controller.card.remove()
@@ -86,7 +80,7 @@ async function display(controller, options, beforeDisplay) {
     controller.card.dataset.animation = options.animation
   }
 
-  executeNextFrameIfStillOpening(controller, async () => {
+  executeOnNextFrameIfStillOpening(controller, async () => {
     await positionPopover(controller.coupdoeilElement, controller.card, options)
     // popover can be closed while waiting for positioning promise to resolve
     if (controller.card === null) {
@@ -97,7 +91,7 @@ async function display(controller, options, beforeDisplay) {
     controller.card.classList.add('hidden')
     controller.card.style.removeProperty('visibility')
 
-    executeNextFrameIfStillOpening(controller, async () => {
+    executeOnNextFrameIfStillOpening(controller, async () => {
       if (beforeDisplay) {
         beforeDisplay(controller)
       }
@@ -111,16 +105,6 @@ async function display(controller, options, beforeDisplay) {
   })
 }
 
-function executeNextFrameIfStillOpening(controller, callback) {
-  requestAnimationFrame(() => {
-    if (controller.card && controller.coupdoeilElement.openingPopover && !controller.closingRequest) {
-      callback.call()
-    } else {
-      clearPopover(controller)
-    }
-  })
-}
-
 function getDelayOptionsForController(controller, options) {
   if (options.openingDelay === false || triggeredOnClick(controller)) {
     return { fetch: 0, opening: 0 }

data/app/javascript/coupdoeil/popover/options_parser.js

@@ -1,4 +1,6 @@
-const OPTIONS = {
+import {getOptions} from "./attributes";
+
+export const OPTIONS = {
   animation: { getter: getAnimation },
   cache: { getter: getCache },
   loading: { getter: getLoading },
@@ -116,7 +118,8 @@ const popoverOptions = {
 }
 
 export function extractOptionsFromElement(coupdoeilElement) {
-  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+  const controller = coupdoeilElement.popoverController
+  const optionsInt = controller.optionsInt ||= parseOptionsInt((controller))
   const options = Object.create(popoverOptions)
 
   for (const option of ORDERED_OPTIONS) {
@@ -126,13 +129,14 @@ export function extractOptionsFromElement(coupdoeilElement) {
   return options
 }
 
-function parseOtionsInt(coupdoeilElement) {
-  const optionsString = coupdoeilElement.getAttribute("popover-options")
+function parseOptionsInt(controller) {
+  const optionsString = getOptions(controller)
   return parseInt(optionsString, 36)
 }
 
 export function extractOptionFromElement(coupdoeilElement, optionName) {
-  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+  const controller = coupdoeilElement.popoverController
+  const optionsInt = controller.optionsInt ||= parseOptionsInt((controller))
 
   return OPTIONS[optionName].getter(optionsInt)
 }

data/app/javascript/coupdoeil/popover/utils.js

@@ -0,0 +1,46 @@
+import {getParams, getType} from "./attributes";
+import {clear as clearPopover} from "./closing";
+import {currentPopoversById} from "./current";
+import {POPOVER_CLOSE_BTN_SELECTOR} from "./config";
+
+export function fetchPopoverContent(controller, lazy = false) {
+  const type = getType(controller)
+  const params = getParams(controller)
+  const authenticityToken = document.querySelector('meta[name=csrf-token]')?.content
+  let url = `/coupdoeil/popover`
+  const opts = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({params, action_name: type, authenticity_token: authenticityToken, lazy})
+  }
+  return fetch(url, opts)
+    .then((response) => {
+      if (response.status >= 400) {
+        throw 'error while fetching popover content'
+      }
+      return response.text()
+    })
+}
+
+export function executeOnNextFrameIfStillOpening(controller, callback) {
+  requestAnimationFrame(() => {
+    const openOrOpening = controller.isOpen || controller.coupdoeilElement.openingPopover;
+
+    if (controller.card && openOrOpening && !controller.closingRequest) {
+      callback.call()
+    } else {
+      clearPopover(controller)
+    }
+  })
+}
+
+export function isElementClosePopoverButton(element) {
+  return element.closest(POPOVER_CLOSE_BTN_SELECTOR) ||
+    element.dataset.hasOwnProperty("popoverClose")
+}
+
+export function isAnyPopoverOpened() {
+  return currentPopoversById().size > 0
+}

data/app/javascript/coupdoeil/popover.js

@@ -1,6 +1,17 @@
 import CoupdoeilElement from "./elements/coupdoeil_element"
+import { upgradeNativeElement as internalUpgradeNativeElement, downgradeNativeElement } from "./elements/coupdoeil_element"
 import './events'
 
 if (customElements.get("coup-doeil") === undefined) {
   customElements.define("coup-doeil", CoupdoeilElement)
 }
+
+window.Coupdoeil = {
+  upgradeNativeElement(element) {
+    if (!element.dataset.popoverOptions) {
+      throw 'element is missing Coupdoeil popover dataset'
+    }
+    internalUpgradeNativeElement(element)
+  },
+  downgradeNativeElement
+}

data/app/models/coupdoeil/popover/lazy_loading.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Popover
+    module LazyLoading
+      extend ActiveSupport::Concern
+
+      prepended do
+        # Returns true if template is currently rendered for the first phase of lazy loading,
+        # which is rendering a simple template as fast as possible before fetch the actual content in second phase.
+        # @return [true, false]
+        def lazy_loading?
+          @lazy_loading
+        end
+        helper_method :lazy_loading?
+
+        def loader_variant_for_template?
+          loader_template.present?
+        end
+        helper_method :loader_variant_for_template?
+
+        def no_loader_variant_for_template?
+          loader_template.blank?
+        end
+        helper_method :no_loader_variant_for_template?
+      end
+
+      # @return [true, false]
+      def lazy_loading? = @lazy_loading || false
+      def lazy_loading! = @lazy_loading = true
+
+      # Returns the loader variant for the current action if it exists.
+      # @return [ActionView::Template, nil]
+      def loader_template
+        return @loader_template if defined?(@loader_template)
+
+        paths = ["#{self.class.popover_resource_name}_popover"]
+        found_template = lookup_context.find(action_name, paths, false, [], { variants: :loader })
+        @loader_template = found_template.variant == "loader" ? found_template : nil
+      end
+
+      def process(method_name, ...)
+        return super unless lazy_loading?
+
+        self.action_name = method_name
+
+        instrument_render(method_name) do
+          if loader_template
+            render template: loader_template
+          else
+            render html: "", layout: true
+          end
+        end
+      end
+    end
+  end
+end