coupdoeil 1.0.0.pre.alpha.1

data/app/controllers/coupdoeil/hovercards_controller.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class HovercardsController < ApplicationController
+    before_action :set_action_and_resource_name
+    before_action :set_hovercard_class
+    before_action :set_hovercard_params
+
+    filters = _process_action_callbacks.map(&:filter) - %i[set_action_and_resource_name set_hovercard_class set_hovercard_params]
+    skip_before_action(*filters, raise: false)
+    skip_after_action(*filters, raise: false)
+    skip_around_action(*filters, raise: false)
+
+    def create
+      hovercard = @hovercard_klass.new(@hovercard_params, view_context)
+      render plain: hovercard.process(@action_name), layout: false
+    end
+
+    private
+
+    def set_action_and_resource_name
+      @action_name, @resource_name = params[:action_name].split("@")
+    end
+
+    if Rails.env.development?
+      def set_hovercard_class
+        @hovercard_klass = Coupdoeil::Hovercard.registry.lookup_or_register(@resource_name)
+      end
+    else
+      def set_hovercard_class
+        @hovercard_klass = Coupdoeil::Hovercard.registry.lookup(@resource_name)
+      end
+    end
+
+    def set_hovercard_params
+      @hovercard_params =
+        if params[:params].blank?
+          @hovercard_params = {}.freeze
+        else
+          raw_params = JSON.parse(params[:params])
+          card_params = Coupdoeil::Params.deserialize(raw_params).sole
+          card_params.with_indifferent_access
+        end
+    end
+  end
+end

data/app/helpers/coupdoeil/application_helper.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  module ApplicationHelper
+    def coupdoeil_hovercard_tag(hovercard, options = nil, **attributes_or_options, &)
+      if options.present?
+        attributes = attributes_or_options
+      else
+        options = attributes_or_options.extract!(*Hovercard::OptionsSet::OPTION_NAMES)
+        attributes = attributes_or_options
+      end
+      hovercard_options = options
+      render(Coupdoeil::Tag.new(hovercard:, hovercard_options:, attributes:), &)
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+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";
+
+function generateUniqueId() {
+  const array = new Uint32Array(1)
+  window.crypto.getRandomValues(array)
+  return array[0]
+}
+
+export default class extends HTMLElement {
+  constructor() {
+    super()
+    this.uniqueId = generateUniqueId()
+    this.hovercardController = new HovercardController(this)
+  }
+
+  openHovercard() {
+    if (this.openingHovercard || this.hovercardController.isOpen) return;
+
+    this.openingHovercard = true
+
+    const parent = this.closest(HOVERCARD_SELECTOR)?.controller
+    addToCurrents(this)
+    return openHovercard(this.hovercardController, { parent })
+  }
+
+  closeHovercard() {
+    closeNow(this.hovercardController)
+  }
+}

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

@@ -0,0 +1,68 @@
+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";
+
+export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
+  const coupdoeilElement = clickedElement.closest('coup-doeil')
+  const hovercardElement = clickedElement.closest(HOVERCARD_SELECTOR)
+
+  if (coupdoeilElement && hovercardElement) {
+    handleClickedCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement)
+  }
+  else if (coupdoeilElement) {
+    handleClickedCoupdoeilOutsideHovercard(coupdoeilElement)
+  }
+  else if (hovercardElement) {
+    handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement)
+  }
+  else {
+    handleClickOutsideCoupdoeilAndHovercard()
+  }
+}
+
+function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardElement) {
+  const hovercard = coupdoeilElement.hovercardController
+  if(noTriggeredOnClick(hovercard))
+    return;
+
+  if (hovercard.isOpen) {
+    // second click on an open hovercard trigger closes it
+    closeNow(hovercard)
+  } 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()
+  }
+}
+
+function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement) {
+  const hovercard = coupdoeilElement.hovercardController
+  if(noTriggeredOnClick(hovercard))
+    return;
+
+  if (hovercard.isOpen) {
+    // second click on an open hovercard trigger closes it
+    closeNow(hovercard)
+  } else {
+    // close any other open hovercard
+    closeAllNow()
+    // first click on a closed hovercard trigger opens it
+    coupdoeilElement.openHovercard()
+  }
+}
+
+function handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement) {
+  const hovercard = hovercardElement.controller;
+
+  if (isElementCloseHovercardButton(clickedElement)) {
+    closeNow(hovercard)
+  } else if (hovercard.children.size > 0) {
+    closeChildrenNow(hovercard)
+  }
+}
+
+function handleClickOutsideCoupdoeilAndHovercard() {
+  closeAllNow()
+}

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

@@ -0,0 +1,86 @@
+import {HOVERCARD_SELECTOR} from "../hovercard/config";
+import {isAnyHovercardOpened} from "../hovercard/state_check";
+import {
+  addToCurrents as addToCurrentHovercards,
+  closeTriggeredOnHoverLater, closeTriggeredOnHoverNow
+} from "../hovercard/actions";
+import {notTriggeredOnHover} from "../hovercard/attributes";
+import {cancelCloseRequest, closeChildrenNow, closeOnHoverChildrenLater} from "../hovercard/closing";
+
+export const onMouseOver = ({ target: hoveredElement }) => {
+  const coupdoeilElement = hoveredElement.closest('coup-doeil')
+  const hovercardElement = hoveredElement.closest(HOVERCARD_SELECTOR)
+
+  if (coupdoeilElement && hovercardElement) {
+    handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement)
+  }
+  else if (coupdoeilElement) {
+    handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement)
+  }
+  else if (hovercardElement) {
+    handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement)
+  }
+  else {
+    handleOverOutsideCoupdoeilAndHovercard()
+  }
+}
+
+function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement) {
+  const childHovercard = coupdoeilElement.hovercardController
+  const parentHovercard = hovercardElement.controller
+  if(notTriggeredOnHover(childHovercard))
+    return;
+
+  if (childHovercard.isOpen) {
+    // when 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)
+    coupdoeilElement.openHovercard()
+  }
+}
+
+function handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement) {
+  const hovercard = coupdoeilElement.hovercardController
+  if(notTriggeredOnHover(hovercard))
+    return;
+
+  if (hovercard.isClosed) {
+    // Close any other open hovercard before opening this one
+    closeTriggeredOnHoverNow()
+    coupdoeilElement.openHovercard()
+  } 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
+    cancelCloseRequest(hovercard)
+    addToCurrentHovercards(coupdoeilElement)
+  }
+}
+
+function handleOverOutsideCoupdoeilAndHovercard() {
+  // mouse is not within any hovercard and not over any coupdoeil element
+  // Therefore all hovercards that trigger on hover should be closed if any is open.
+  if (isAnyHovercardOpened()) {
+    closeTriggeredOnHoverLater()
+  }
+}
+
+function handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement) {
+  const hovercard = hovercardElement.controller
+
+  if (hovercard.closingRequest) {
+    // hovercard is still open but was requested to close, then it clears this closing request
+    // and ensures the hovercards stays in current hovercards register
+    // This typically happens when mouse was on coupdoeil element, then it moves toward the hovercard
+    // but because of a small gap, it triggers the closing request, but when the mouse finally enters the hovercard
+    // this closing request must be aborted.
+    cancelCloseRequest(hovercard)
+    addToCurrentHovercards(hovercard.coupdoeilElement)
+  } else if (hovercard.children.size > 0) {
+    // Happens when a child hovercard was open but mouse moved outside of it or its coupdoeil element,
+    // but stays within the parent hovercard
+    closeOnHoverChildrenLater(hovercard)
+  }
+}

data/app/javascript/coupdoeil/events.js

@@ -0,0 +1,19 @@
+import {coupdoeilOnClickEvent} from "./events/onclick";
+import {onMouseOver} from "./events/onmouseover";
+import {clearHovercardContentCache, clearAll} from "./hovercard/actions";
+
+document.addEventListener("DOMContentLoaded", () => {
+  clearHovercardContentCache()
+  document.addEventListener("click", coupdoeilOnClickEvent)
+  document.documentElement.addEventListener("mouseover", onMouseOver, { passive: true })
+
+  if (window.Turbo) {
+    document.addEventListener('turbo:before-cache', (_event) => {
+      clearAll()
+    })
+    document.addEventListener('turbo:load', (_event) => {
+      clearAll()
+      clearHovercardContentCache()
+    })
+  }
+})

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

@@ -0,0 +1,60 @@
+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/attributes.js

@@ -0,0 +1,33 @@
+import {extractOptionFromElement} from "./optionsParser";
+
+export function getType(controller) {
+  return controller.coupdoeilElement.getAttribute('hc-type')
+}
+
+export function getParams(controller) {
+  return controller.coupdoeilElement.getAttribute('hc-params')
+}
+
+export function getTrigger(controller) {
+  return extractOptionFromElement(controller.coupdoeilElement, 'trigger')
+}
+
+export function triggeredOnClick(controller) {
+  return getTrigger(controller) === 'click'
+}
+
+export function noTriggeredOnClick(controller) {
+  return getTrigger(controller) !== 'click'
+}
+
+export function triggeredOnHover(controller) {
+  return getTrigger(controller) === 'hover'
+}
+
+export function notTriggeredOnHover(controller) {
+  return getTrigger(controller) !== 'hover'
+}
+
+export function preloadedContentElement(controller) {
+  return controller.coupdoeilElement.querySelector('.hovercard-content')
+}

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

@@ -0,0 +1,18 @@
+import {getType, getParams, preloadedContentElement} from './attributes'
+
+export const hovercardContentHTMLMap = new Map()
+
+function cacheMapKey(controller) {
+  if (preloadedContentElement(controller)) {
+    return controller.coupdoeilElement.uniqueId
+  }
+  return getType(controller) + getParams(controller)
+}
+
+export function getHovercardContentHTML(controller) {
+  return hovercardContentHTMLMap.get(cacheMapKey(controller))
+}
+
+export function setHovercardContentHTML(controller, value) {
+  hovercardContentHTMLMap.set(cacheMapKey(controller), value)
+}

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

@@ -0,0 +1,81 @@
+import {triggeredOnHover} from "./attributes";
+import {defaultConfig} from "./config";
+import {leave} from "el-transition";
+import {cancelOpenCloseActions} from "./actions";
+
+function detachFromParent(controller) {
+  if (controller.parent) {
+    controller.parent.children.delete(controller)
+    controller.parent = null
+  }
+}
+
+export function cancelCloseRequest(controller) {
+  clearTimeout(controller.closingRequest)
+  controller.closingRequest = null
+}
+
+export function closeNow(controller, allowAnimation = true) {
+  if (controller.closing || controller.isClosed) return;
+
+  controller.closing = true
+
+  cancelOpenCloseActions(controller)
+
+  controller.children.forEach((childController) => {
+    closeNow(childController)
+  })
+
+  detachFromParent(controller)
+
+  if (allowAnimation && controller.card.dataset.animation) {
+    closeWithAnimation(controller)
+  } else {
+    closeWithoutAnimation(controller)
+  }
+}
+
+async function closeWithAnimation(controller) {
+  await leave(controller.card, 'hovercard')
+
+  closeWithoutAnimation(controller)
+}
+
+function closeWithoutAnimation(controller) {
+  controller.card.remove()
+  controller.card = null
+  delete controller.closing
+  delete controller.coupdoeilElement.dataset.hovercardOpen
+}
+
+export function clear(controller) {
+  closeNow(controller, false)
+}
+
+export function closeLater(controller) {
+  cancelOpenCloseActions(controller)
+  controller.closingRequest = setTimeout(() => {
+    closeNow(controller)
+  }, defaultConfig.closingDelay)
+}
+
+export function closeChildrenNow(controller) {
+  controller.children.forEach((childController) => {
+    closeNow(childController)
+  })
+}
+
+export function closeChildrenLater(controller) {
+  controller.children.forEach((childController) => {
+    closeLater(childController)
+  })
+}
+
+
+export function closeOnHoverChildrenLater(controller) {
+  controller.children.forEach((childController) => {
+    if (triggeredOnHover(childController)) {
+      closeLater(childController)
+    }
+  })
+}

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

@@ -0,0 +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 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,
+}

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

@@ -0,0 +1,22 @@
+export class HovercardController {
+  constructor(coupdoeilElement) {
+    this.coupdoeilElement = coupdoeilElement
+
+    this.card = null // can go on coupdoeil element, renamed 'hovercardElement'
+
+    this.children = new Set() // can go on hovercardElement
+    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() {
+    return !!this.coupdoeilElement.dataset.hovercardOpen
+  }
+
+  get isClosed() {
+    return !this.isOpen
+  }
+}

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

@@ -0,0 +1,139 @@
+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
+}
+
+export async function openHovercard(controller, { parent }) {
+  if (controller.isOpen) {
+    cancelCloseRequest(controller)
+    return addToCurrents(controller.coupdoeilElement)
+  }
+  if (parent) {
+    controller.parent = parent
+    parent.children.add(controller)
+  }
+
+  const delayOptions = 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 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
+    await display(controller, options)
+  }
+}
+
+async function display(controller, options) {
+  if (controller.isOpen) return;
+
+  cancelCloseRequest(controller)
+
+  controller.card = buildHovercardElement(controller, options)
+  document.body.appendChild(controller.card)
+
+  if (options.animation) {
+    controller.card.dataset.animation = options.animation
+  }
+
+  requestAnimationFrame(async () => {
+    controller.card.style.opacity = '0'
+    controller.card.classList.remove('hidden')
+
+    requestAnimationFrame(async () => {
+      await positionHovercard(controller, options)
+
+      controller.card.classList.add('hidden')
+      controller.card.style.removeProperty('opacity')
+
+      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')
+      })
+    })
+  })
+}
+
+function getDelayOptionsForController(controller) {
+  if (triggeredOnClick(controller)) {
+    return { reOpening: 0, actualOpening: 0, fetch: 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 })
+  }
+  return fetch(url, opts)
+    .then((response) => {
+      if (response.status >= 400) {
+        throw 'error while fetching hovercard content'
+      }
+      return response.text()
+    })
+}
+
+function buildHovercardElement(controller, options) {
+  const el = document.createElement('div')
+  el.setAttribute('role', 'dialog')
+  el.classList.add(HOVERCARD_CLASS_NAME, 'hidden')
+  el.style.cssText = 'position: absolute; left: 0; top: 0;'
+  el.innerHTML = getHovercardContentHTML(controller)
+  el.controller = controller
+  el.dataset.placement = options.placement
+  return el
+}