coupdoeil 1.0.0.pre.beta.1 → 1.0.0.pre.beta.2

data/app/javascript/coupdoeil/{hovercard → popover}/closing.js

@@ -1,7 +1,7 @@
 import {triggeredOnHover} from "./attributes"
 import {CLOSING_DELAY_MS} from "./config"
 import {leave} from "el-transition"
-import {addToCurrents, CURRENT_HOVERCARDS_BY_ID, removeFromCurrents} from "./current"
+import {addToCurrents, CURRENT_POPOVERS_BY_ID, removeFromCurrents} from "./current"
 
 function detachFromParent(controller) {
   if (controller.parent) {
@@ -16,7 +16,7 @@ export function cancelOpenCloseActions(controller) {
 }
 
 function cancelOpening(controller) {
-  delete controller.coupdoeilElement.openingHovercard
+  delete controller.coupdoeilElement.openingPopover
 }
 
 export function cancelCloseRequest(controller) {
@@ -26,7 +26,7 @@ export function cancelCloseRequest(controller) {
 }
 
 export function closeNow(controller, allowAnimation = true) {
-  if (controller.closing || (controller.isClosed && !controller.coupdoeilElement.openingHovercard)) return
+  if (controller.closing || (controller.isClosed && !controller.coupdoeilElement.openingPopover)) return
 
   controller.closing = true
 
@@ -46,7 +46,7 @@ export function closeNow(controller, allowAnimation = true) {
 }
 
 async function closeWithAnimation(controller) {
-  await leave(controller.card, 'hovercard')
+  await leave(controller.card, 'popover')
 
   closeWithoutAnimation(controller)
 }
@@ -57,7 +57,7 @@ function closeWithoutAnimation(controller) {
     controller.card = null
   }
   delete controller.closing
-  delete controller.coupdoeilElement.dataset.hovercardOpen
+  delete controller.coupdoeilElement.dataset.popoverOpen
 }
 
 export function clear(controller) {
@@ -93,32 +93,32 @@ export function closeOnHoverChildrenLater(controller) {
 }
 
 export function closeAllNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    closeNow(coupdoeilElement.hovercardController)
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    closeNow(coupdoeilElement.popoverController)
     removeFromCurrents(coupdoeilElement)
   }
 }
 
 export function clearAll() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    clear(coupdoeilElement.hovercardController)
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    clear(coupdoeilElement.popoverController)
     removeFromCurrents(coupdoeilElement)
   }
 }
 
 export function closeTriggeredOnHoverNow() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeNow(coupdoeilElement.hovercardController)
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.popoverController)) {
+      closeNow(coupdoeilElement.popoverController)
       removeFromCurrents(coupdoeilElement)
     }
   }
 }
 
 export function closeTriggeredOnHoverLater() {
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeLater(coupdoeilElement.hovercardController)
+  for (const coupdoeilElement of CURRENT_POPOVERS_BY_ID.values()) {
+    if (triggeredOnHover(coupdoeilElement.popoverController)) {
+      closeLater(coupdoeilElement.popoverController)
       removeFromCurrents(coupdoeilElement)
     }
   }
@@ -131,9 +131,9 @@ export function closeTriggeredOnHoverNowUnlessAncestor(controller) {
   }
   const idToSkip = topMostParent.coupdoeilElement.uniqueId
 
-  for (const coupdoeilElement of CURRENT_HOVERCARDS_BY_ID.values()) {
-    if (coupdoeilElement.uniqueId !== idToSkip && triggeredOnHover(coupdoeilElement.hovercardController)) {
-      closeNow(coupdoeilElement.hovercardController)
+  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/{hovercard → popover}/config.js

@@ -1,15 +1,15 @@
-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 POPOVER_CLASS_NAME = 'coupdoeil--popover'
+export const POPOVER_SELECTOR = `.${POPOVER_CLASS_NAME}`
+export const POPOVER_CLOSE_BTN_SELECTOR = '[data-popover-close]'
 
-// the time (ms) to wait before closing the hovercard,
+// 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 hovercard
+// or if the user moves the mouse from the target to the popover
 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
+// the minimum time (ms) the user should wait before seeing the popover
 export const OPENING_DELAY_MS = 200

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

@@ -0,0 +1,20 @@
+export class PopoverController {
+  constructor(coupdoeilElement) {
+    this.coupdoeilElement = coupdoeilElement
+
+    this.card = null
+
+    this.children = new Set()
+    this.parent = null
+
+    this.closingRequest = null
+  }
+
+  get isOpen() {
+    return !!this.coupdoeilElement.dataset.popoverOpen
+  }
+
+  get isClosed() {
+    return !this.isOpen
+  }
+}

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

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

data/app/javascript/coupdoeil/{hovercard → popover}/opening.js

@@ -1,17 +1,17 @@
-import {FETCH_DELAY_MS, HOVERCARD_CLASS_NAME, OPENING_DELAY_MS} from "./config"
+import {FETCH_DELAY_MS, POPOVER_CLASS_NAME, OPENING_DELAY_MS} from "./config"
 import {getParams, getType, preloadedContentElement, triggeredOnClick} from "./attributes"
-import {getHovercardContentHTML, setHovercardContentHTML} from "./cache"
+import {getPopoverContentHTML, setPopoverContentHTML} from "./cache"
 import {extractOptionsFromElement} from "./optionsParser"
-import {positionHovercard} from "./positioning"
+import {positionPopover} from "./positioning"
 import {enter} from "el-transition"
 import {addToCurrents} from "./current"
-import {cancelCloseRequest, clear as clearHovercard} from "./closing"
+import {cancelCloseRequest, clear as clearPopover} from "./closing"
 
-function fetchHovercardContent(controller) {
+function fetchPopoverContent(controller) {
   const type = getType(controller)
   const params = getParams(controller)
   const authenticityToken = document.querySelector('meta[name=csrf-token]').content
-  let url = `/coupdoeil/hovercard`
+  let url = `/coupdoeil/popover`
   const opts = {
     method: 'POST',
     headers: {
@@ -22,32 +22,32 @@ function fetchHovercardContent(controller) {
   return fetch(url, opts)
     .then((response) => {
       if (response.status >= 400) {
-        throw 'error while fetching hovercard content'
+        throw 'error while fetching popover content'
       }
       return response.text()
     })
 }
 
-async function loadHovercardContentHTML(controller, options, delayOptions) {
+async function loadPopoverContentHTML(controller, options, delayOptions) {
   return new Promise((resolve) => {
     setTimeout(async () => {
-      if (!controller.coupdoeilElement.openingHovercard) return // opening has been canceled
+      if (!controller.coupdoeilElement.openingPopover) return // opening has been canceled
 
-      if (options.cache === false || (options.cache && !getHovercardContentHTML(controller))) {
+      if (options.cache === false || (options.cache && !getPopoverContentHTML(controller))) {
         let html
         if (options.loading === "preload") {
           html = preloadedContentElement(controller).innerHTML
         } else {
-          html = await fetchHovercardContent(controller)
+          html = await fetchPopoverContent(controller)
         }
-        setHovercardContentHTML(controller, html)
+        setPopoverContentHTML(controller, html)
       }
       resolve()
     }, delayOptions.fetch)
   })
 }
 
-export async function openHovercard(controller, { parent, beforeDisplay }) {
+export async function openPopover(controller, { parent, beforeDisplay }) {
   if (controller.isOpen) {
     return cancelCloseRequest(controller)
   }
@@ -60,13 +60,13 @@ export async function openHovercard(controller, { parent, beforeDisplay }) {
   const delays = getDelayOptionsForController(controller, options)
 
   const openingDelay = new Promise(resolve => setTimeout(resolve, delays.opening))
-  const fetchDelay = loadHovercardContentHTML(controller, options, delays)
+  const fetchDelay = loadPopoverContentHTML(controller, options, delays)
   await Promise.all([fetchDelay, openingDelay])
 
   const parentIsClosedOrClosing = controller.parent && (controller.parent.isClosed || controller.parent.closingRequest)
 
   // but if opening has been canceled (nullified), the wait still happens, so we need to check again
-  if (controller.coupdoeilElement.openingHovercard && !parentIsClosedOrClosing) {
+  if (controller.coupdoeilElement.openingPopover && !parentIsClosedOrClosing) {
     await display(controller, options, beforeDisplay)
   }
 }
@@ -76,7 +76,7 @@ async function display(controller, options, beforeDisplay) {
 
   cancelCloseRequest(controller)
 
-  controller.card = buildHovercardElement(controller, options)
+  controller.card = buildPopoverElement(controller, options)
   document.body.appendChild(controller.card)
 
   if (options.animation) {
@@ -84,9 +84,9 @@ async function display(controller, options, beforeDisplay) {
   }
 
   executeNextFrameIfStillOpening(controller, async () => {
-    await positionHovercard(controller.coupdoeilElement, controller.card, options)
+    await positionPopover(controller.coupdoeilElement, controller.card, options)
 
-    // see buildHovercardElement() about next 2 lines
+    // see buildPopoverElement() about next 2 lines
     controller.card.classList.add('hidden')
     controller.card.style.removeProperty('visibility')
 
@@ -96,20 +96,20 @@ async function display(controller, options, beforeDisplay) {
       }
       // // 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
+      delete controller.coupdoeilElement.openingPopover
+      controller.coupdoeilElement.dataset.popoverOpen = true
 
-      await enter(controller.card, 'hovercard')
+      await enter(controller.card, 'popover')
     })
   })
 }
 
 function executeNextFrameIfStillOpening(controller, callback) {
   requestAnimationFrame(() => {
-    if (controller.coupdoeilElement.openingHovercard) {
+    if (controller.coupdoeilElement.openingPopover) {
       callback.call()
     } else {
-      clearHovercard(controller)
+      clearPopover(controller)
     }
   })
 }
@@ -122,12 +122,12 @@ function getDelayOptionsForController(controller, options) {
   return { fetch: FETCH_DELAY_MS, opening: OPENING_DELAY_MS }
 }
 
-function buildHovercardElement(controller, options) {
+function buildPopoverElement(controller, options) {
   const el = document.createElement('div')
   el.setAttribute('role', 'dialog')
-  el.classList.add(HOVERCARD_CLASS_NAME)
+  el.classList.add(POPOVER_CLASS_NAME)
   el.style.cssText = 'position: absolute; left: 0; top: 0;'
-  el.innerHTML = getHovercardContentHTML(controller)
+  el.innerHTML = getPopoverContentHTML(controller)
   el.controller = controller
   el.dataset.placement = options.placement
 

data/app/javascript/coupdoeil/{hovercard → popover}/optionsParser.js

@@ -93,7 +93,7 @@ function getTrigger(optionsInt) {
   return TRIGGERS[optionsInt & 1]
 }
 
-const HovercardOptions = {
+const popoverOptions = {
   animation: undefined,
   cache: undefined,
   loading: undefined,
@@ -104,8 +104,8 @@ const HovercardOptions = {
 }
 
 export function extractOptionsFromElement(coupdoeilElement) {
-  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt((coupdoeilElement))
-  const options = Object.create(HovercardOptions)
+  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+  const options = Object.create(popoverOptions)
 
   for (const option of ORDERED_OPTIONS) {
     options[option] = OPTIONS[option].getter(optionsInt)
@@ -115,12 +115,12 @@ export function extractOptionsFromElement(coupdoeilElement) {
 }
 
 function parseOtionsInt(coupdoeilElement) {
-  const optionsString = coupdoeilElement.getAttribute("hc")
+  const optionsString = coupdoeilElement.getAttribute("popover-options")
   return parseInt(optionsString, 36)
 }
 
 export function extractOptionFromElement(coupdoeilElement, optionName) {
-  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+  const optionsInt = coupdoeilElement.popoverController.optionsInt ||= parseOtionsInt((coupdoeilElement))
 
   return OPTIONS[optionName].getter(optionsInt)
 }

data/app/javascript/coupdoeil/{hovercard → popover}/positioning.js

@@ -6,10 +6,10 @@ import {
   arrow
 } from "@floating-ui/dom"
 
-export async function positionHovercard(target, card, options) {
+export async function positionPopover(target, card, options) {
   let { placement: placements, offset: offsetValue } = options
   const placement = placements[0]
-  const arrowElement = card.querySelector('[data-hovercard-arrow]')
+  const arrowElement = card.querySelector('[data-popover-arrow]')
   const middleware = [AutoPositioningWithFallbacks(placements)]
 
   if (arrowElement) {

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

@@ -0,0 +1,12 @@
+import {POPOVER_CLOSE_BTN_SELECTOR} from "./config";
+
+import {currentPopoversById} from "./current";
+
+export function isElementClosePopoverButton(element) {
+  return element.closest(POPOVER_CLOSE_BTN_SELECTOR) ||
+    element.dataset.hasOwnProperty("popoverClose")
+}
+
+export function isAnyPopoverOpened() {
+  return currentPopoversById().size > 0
+}

data/app/models/coupdoeil/params.rb

@@ -17,7 +17,7 @@ module Coupdoeil
     def serialized_global_id?(hash) = hash.size == 1 && hash.include?(GLOBAL_ID_KEY)
 
     def serialize(*params)
-      ActiveSupport::Notifications.instrument("serialize_hovercard_params.coupdoeil") do
+      ActiveSupport::Notifications.instrument("serialize_popover_params.coupdoeil") do
         params.map { |param| serialize_param(param) }
       end
     end
@@ -50,18 +50,18 @@ module Coupdoeil
     def serialize_hash_key(key)
       case key
       when *RESERVED_KEYS
-        raise Coupdoeil::SerializationError, "Can't serialize a Hash with reserved key #{key.inspect}"
+        raise SerializationError, "Can't serialize a Hash with reserved key #{key.inspect}"
       when String, Symbol
         key.to_s
       else
-        raise Coupdoeil::SerializationError, "Only string and symbol hash keys may be serialized as hovercard params, but #{key.inspect} is a #{key.class}"
+        raise SerializationError, "Only string and symbol hash keys may be serialized as popover params, but #{key.inspect} is a #{key.class}"
       end
     end
 
     def convert_to_global_id_hash(param)
       { GLOBAL_ID_KEY => param.to_global_id.to_s }
     rescue URI::GID::MissingModelIdError
-      raise Coupdoeil::SerializationError, "Unable to serialize #{param.class} " \
+      raise SerializationError, "Unable to serialize #{param.class} " \
         "without an id. (Maybe you forgot to call save?)"
     end
 

data/app/models/coupdoeil/{hovercard → popover}/option/animation.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Animation < Coupdoeil::Hovercard::Option
+      class Animation < Coupdoeil::Popover::Option
         self.bit_size = 3
 
         VALUES = %w[slide-in fade-in slide-out custom].unshift(false).freeze

data/app/models/coupdoeil/{hovercard → popover}/option/cache.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Cache < Coupdoeil::Hovercard::Option
+      class Cache < Coupdoeil::Popover::Option
         self.bit_size = 1
 
         VALUES = [true, false].freeze

data/app/models/coupdoeil/{hovercard → popover}/option/loading.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Loading < Coupdoeil::Hovercard::Option
+      class Loading < Coupdoeil::Popover::Option
         self.bit_size = 2
 
         VALUES = %w[async preload lazy].freeze

data/app/models/coupdoeil/{hovercard → popover}/option/offset.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Offset < Coupdoeil::Hovercard::Option
+      class Offset < Coupdoeil::Popover::Option
         self.bit_size = 8 + 11 + 2
 
         class << self

data/app/models/coupdoeil/{hovercard → popover}/option/opening_delay.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class OpeningDelay < Coupdoeil::Hovercard::Option
+      class OpeningDelay < Coupdoeil::Popover::Option
         self.bit_size = 1
 
         VALUES = [true, false].freeze

data/app/models/coupdoeil/{hovercard → popover}/option/placement.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Placement < Coupdoeil::Hovercard::Option
+      class Placement < Coupdoeil::Popover::Option
         self.bit_size = 4 * 4
 
         VALUES = %w[

data/app/models/coupdoeil/{hovercard → popover}/option/trigger.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
-      class Trigger < Coupdoeil::Hovercard::Option
+      class Trigger < Coupdoeil::Popover::Option
         self.bit_size = 1
 
         VALUES = %w[click hover].freeze

data/app/models/coupdoeil/{hovercard → popover}/option.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Option
       InvalidOptionError = Class.new(StandardError)
 

data/app/models/coupdoeil/{hovercard → popover}/options_set.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class OptionsSet
       ORDERED_OPTIONS = [
         Option::Offset,

data/app/models/coupdoeil/{hovercard → popover}/registry.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Registry
       attr_reader :registry, :semaphore
 
@@ -17,7 +17,7 @@ module Coupdoeil
       def lookup_or_register(type)
         safe_lookup(type) ||
           begin
-            register(type, (type.classify + "Hovercard").constantize)
+            register(type, (type.classify + "Popover").constantize)
           end
       end
     end

data/app/models/coupdoeil/{hovercard → popover}/setup.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     class Setup
       attr_reader :klass, :type, :params
 
@@ -14,7 +14,7 @@ module Coupdoeil
       end
 
       def default_options = klass.default_options_for(type)
-      def identifier = "#{type}@#{klass.hovercard_resource_name}"
+      def identifier = "#{type}@#{klass.popover_resource_name}"
       def render_in(view_context) = klass.new(params, view_context).process(type)
 
       def with_type(type)

data/app/models/coupdoeil/{hovercard → popover}/view_context_delegation.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard
+  class Popover
     module ViewContextDelegation
-      attr_accessor :__cp_view_context, :hovercard
+      attr_accessor :__cp_view_context, :popover
 
       # For CSRF authenticity tokens in forms
       def config = __cp_view_context.config
@@ -13,7 +13,7 @@ module Coupdoeil
 
       def helpers = __cp_view_context
       def controller = __cp_view_context.controller
-      def params = hovercard.params
+      def params = popover.params
     end
   end
 end

data/app/models/coupdoeil/{hovercard.rb → popover.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class Hovercard < AbstractController::Base
+  class Popover < AbstractController::Base
     abstract!
 
     include AbstractController::Rendering
@@ -17,9 +17,9 @@ module Coupdoeil
 
     include Rails.application.routes.url_helpers
 
-    layout "hovercard"
+    layout "popover"
 
-    # so coupdoeil helpers are always available within hovercards
+    # so coupdoeil helpers are always available within popovers
     helper Coupdoeil::ApplicationHelper
 
     @registry = Registry.new
@@ -45,12 +45,12 @@ module Coupdoeil
     class << self
       attr_reader :registry
 
-      def hovercard_resource_name = @hovercard_resource_name ||= name.delete_suffix("Hovercard").underscore
+      def popover_resource_name = @popover_resource_name ||= name.delete_suffix("Popover").underscore
       def with(...) = Setup.new(self).with_params(...)
 
       def inherited(subclass)
         super
-        Coupdoeil::Hovercard.registry.register(subclass.hovercard_resource_name, subclass)
+        Coupdoeil::Popover.registry.register(subclass.popover_resource_name, subclass)
         subclass.instance_variable_set(:@default_options_by_method, @default_options_by_method.dup)
       end
 
@@ -93,7 +93,7 @@ module Coupdoeil
     def view_context
       super.tap do |context|
         context.extend ViewContextDelegation
-        context.hovercard = self
+        context.popover = self
         context.__cp_view_context = @__cp_view_context
       end
     end
@@ -106,8 +106,8 @@ Also note that render does not terminate execution of the action."
     end
 
     def process(method_name, *)
-      benchmark("processed hovercard #{self.class.hovercard_resource_name}/#{method_name}", silence: true) do
-        ActiveSupport::Notifications.instrument("render_hovercard.coupdoeil") do
+      benchmark("processed popover #{self.class.popover_resource_name}/#{method_name}", silence: true) do
+        ActiveSupport::Notifications.instrument("render_popover.coupdoeil") do
           super
           response_body || render(action_name)
         end