coupdoeil 1.0.0.pre.alpha.1

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

@@ -0,0 +1,117 @@
+const OPTIONS = {
+  animation: { getter: getAnimation },
+  cache: { getter: getCache },
+  offset: { getter: getOffset },
+  placement: { getter: getPlacement },
+  loading: { getter: getLoading },
+  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
+]
+
+const TRIGGERS = ["hover", "click"]
+const ANIMATIONS = [false, "slide-in", "fade-in", "slide-out", "custom"]
+const PLACEMENTS = [
+  'auto',
+  'top', 'top-start', 'top-end',
+  'right', 'right-start', 'right-end',
+  'bottom', 'bottom-start', 'bottom-end',
+  'left', 'left-start', 'left-end'
+]
+const LOADINGS = ["asyn", "preload", "lazy"]
+
+function parseCSSSize(value) {
+  if (typeof value === 'number') {
+    return value
+  } else if ((/^(-?\d+\.?\d+)px$/).test(value)) {
+    return parseFloat(value)
+  } else if ((/^(-?\d*\.?\d+)rem$/).test(value)) {
+    return parseFloat(value) * parseFloat(getComputedStyle(document.documentElement).fontSize)
+  }
+  return 0
+}
+
+function getOffset(optionsInt) {
+  // shift is BigInt(16 + 3 + 1 + 2 + 1)
+  const offsetBits = Number(BigInt(optionsInt) >> BigInt(23))
+  if (offsetBits === 0)
+    return 0
+
+  const isNegative = (offsetBits & 1) === 1
+  const isREM = (offsetBits & 2) === 2
+  // decimals mask is 2 ** 11 - 1
+  const decimals = (offsetBits >> 2) & 2047
+  const integer = (offsetBits >> (2 + 11))
+
+  const CSSSize = `${isNegative ? '-' : ''}${integer}.${decimals}${isREM ? 'rem' : 'px'}`
+  return parseCSSSize(CSSSize)
+}
+
+function getPlacement(optionsInt) {
+  // shift is 3 + 1 + 2 + 1, mask is 2 ** 16 - 1
+  const placementBits = (optionsInt >> 7) & 65535
+  let shift = 0
+  let lastPlacement = null
+  const placements = []
+  while (lastPlacement !== "auto" && shift < 16) {
+    // mask is 2 ** 4 - 1
+    lastPlacement = PLACEMENTS[(placementBits >> shift) & 15]
+    placements.push(lastPlacement)
+    shift += 4
+  }
+  return placements
+}
+
+function getAnimation(optionsInt) {
+  return ANIMATIONS[(optionsInt & 56) >> 4]
+}
+
+function getCache(optionsInt) {
+  return (optionsInt & 8) === 8
+}
+
+function getLoading(optionsInt) {
+  return LOADINGS[optionsInt & 3 >> 1]
+}
+
+function getTrigger(optionsInt) {
+  return TRIGGERS[optionsInt & 1]
+}
+
+const HovercardOptions = {
+  animation: undefined,
+  cache: undefined,
+  offset: undefined,
+  placement: undefined,
+  loading: undefined,
+  trigger: undefined,
+}
+
+export function extractOptionsFromElement(coupdoeilElement) {
+  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+  const options = Object.create(HovercardOptions)
+
+  for (const option of ORDERED_OPTIONS) {
+    options[option] = OPTIONS[option].getter(optionsInt)
+  }
+
+  return options
+}
+
+function parseOtionsInt(coupdoeilElement) {
+  const optionsString = coupdoeilElement.getAttribute("hc")
+  return parseInt(optionsString, 36)
+}
+
+export function extractOptionFromElement(coupdoeilElement, optionName) {
+  const optionsInt = coupdoeilElement.hovercardController.optionsInt ||= parseOtionsInt((coupdoeilElement))
+
+  return OPTIONS[optionName].getter(optionsInt)
+}

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

@@ -0,0 +1,74 @@
+import {
+  autoPlacement,
+  computePosition,
+  detectOverflow,
+  offset,
+  arrow
+} from "@floating-ui/dom"
+
+export async function positionHovercard(controller, options) {
+  let { placement: placements, offset: offsetValue } = options
+  const placement = placements[0]
+  const arrowElement = controller.card.querySelector('[data-hovercard-arrow]')
+  const middleware = [AutoPositioningWithFallbacks(placements)]
+
+  if (arrowElement) {
+    const arrowSize = arrowElement.clientWidth
+    offsetValue += arrowSize
+    middleware.push(arrow({ element: arrowElement }))
+  }
+
+  middleware.push(offset(offsetValue))
+
+  const computedPosition = await computePosition(
+    controller.coupdoeilElement, controller.card, { placement, middleware }
+  )
+  const { x, y, placement: actualPlacement} = computedPosition
+
+  if (arrowElement) {
+    positionArrow(arrowElement, computedPosition)
+  }
+
+  controller.card.dataset.placement = actualPlacement
+  Object.assign(controller.card.style, { left: `${x}px`, top: `${y}px` })
+}
+
+const AutoPositioningWithFallbacks = (placements) => {
+  let placementIndex = 0
+  return {
+    name: 'autoPlacement',
+    async fn(state) {
+      if (state.placement === 'auto') {
+        return autoPlacement().fn(state)
+      }
+
+      const { top, bottom, left, right } = await detectOverflow(state)
+      const isOverflowing = (top > 0 || bottom > 0 || left > 0 || right > 0)
+
+      if (placements[placementIndex] !== 'auto' && isOverflowing) {
+        placementIndex++
+        return { reset: { placement: placements[placementIndex] || 'auto' } }
+      } else if (isOverflowing) {
+        return autoPlacement().fn(state)
+      }
+      return {}
+    }
+  }
+}
+
+const OPPOSITE_SIDES = { right: 'left', left: 'right', top: 'bottom', bottom: 'top' }
+
+function positionArrow(arrowElement, computedData) {
+  const arrowSize = arrowElement.clientWidth
+  const { placement, middlewareData: { arrow: arrowData } } = computedData
+  const side = placement.split("-")[0]
+  const oppositeSide = OPPOSITE_SIDES[side]
+  const { x, y } = arrowData
+  const { borderWidth: parentBorderWidht } = getComputedStyle(arrowElement.parentElement)
+
+  Object.assign(arrowElement.style, {
+    left: x != null ? `${x}px` : '',
+    top: y != null ? `${y}px` : '',
+    [oppositeSide]: `calc(${-arrowSize}px + ${parentBorderWidht})`
+  })
+}

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

@@ -0,0 +1,11 @@
+import {HOVERCARD_CLOSE_BTN_SELECTOR} from "./config";
+import {currentHovercardsById} from "./actions";
+
+export function isElementCloseHovercardButton(element) {
+  return element.closest(HOVERCARD_CLOSE_BTN_SELECTOR) ||
+    element.dataset.hasOwnProperty("hovercardClose")
+}
+
+export function isAnyHovercardOpened() {
+  return currentHovercardsById().size > 0
+}

data/app/javascript/coupdoeil/hovercard.js

@@ -0,0 +1,6 @@
+import CoupdoeilElement from "./elements/coupdoeil_element"
+import './events'
+
+if (customElements.get("coup-doeil") === undefined) {
+  customElements.define("coup-doeil", CoupdoeilElement)
+}

data/app/javascript/coupdoeil/index.js

@@ -0,0 +1 @@
+import './hovercard'

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Animation < Coupdoeil::Hovercard::Option
+        self.bit_size = 3
+
+        VALUES = %w[slide-in fade-in slide-out custom].unshift(false).freeze
+        INDEX_BY_VALUES = VALUES.each_with_index.to_h.with_indifferent_access.freeze
+
+        class << self
+          def parse(value) = INDEX_BY_VALUES.fetch(value)
+        end
+
+        def validate! = validate_inclusion!
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Cache < 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/option/loading.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Loading < Coupdoeil::Hovercard::Option
+        self.bit_size = 2
+
+        VALUES = %w[async preload lazy].freeze
+
+        class << self
+          def parse(value) = VALUES.index(value.to_s)
+        end
+
+        def validate! = validate_inclusion!
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Offset < Coupdoeil::Hovercard::Option
+        self.bit_size = 8 + 11 + 2
+
+        class << self
+          def parse(value)
+            float_value = value.to_f
+            return 0 if float_value.zero?
+
+            base = 0
+            base |= 1 if float_value.negative?
+            base |= 2 if value.is_a?(String) && value.end_with?("rem")
+
+            integer, decimals = float_value.abs.to_s.split(".")
+            base |= (decimals.to_i << 2)
+            base |= (integer.to_i << 2 + 11)
+
+            base
+          end
+        end
+
+        def validate!
+          return if value in Float | Integer
+          return if value.to_s.match?(/^-?\d+(\.\d{1,3})?(px|rem)?$/)
+
+          raise_invalid_option "Value should be a signed float or integer, followed or not by 'rem' or 'px'."
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Placement < Coupdoeil::Hovercard::Option
+        self.bit_size = 4 * 4
+
+        VALUES = %w[
+          auto
+          top top-start top-end
+          right right-start right-end
+          bottom bottom-start bottom-end
+          left left-start left-end
+        ].freeze
+        INDEX_BY_VALUES = VALUES.each_with_index.to_h.with_indifferent_access.freeze
+
+        class << self
+          def parse(value)
+            values = value.to_s.split(",")
+            4.times.sum do |index|
+              next 0 unless (placement = values[index])
+
+              placement.strip!
+              placement_index = INDEX_BY_VALUES[placement]
+              placement_index << (index * 4)
+            end
+          end
+        end
+
+        def validate!
+          values = value.to_s.split(",")
+
+          values.each do |placement_value|
+            next if placement_value.strip.in?(VALUES)
+
+            values_sentence = VALUES.to_sentence(last_word_connector: " or ")
+            raise_invalid_option "Value must be one of: #{values_sentence}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Option
+      class Trigger < Coupdoeil::Hovercard::Option
+        self.bit_size = 1
+
+        VALUES = %w[click hover].freeze
+
+        class << self
+          def parse(value) = value.to_s == "click" ? 1 : 0
+        end
+
+        def validate! = validate_inclusion!
+      end
+    end
+  end
+end

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+module Coupdoeil
+  class Hovercard
+    class Option
+      InvalidOptionError = Class.new(StandardError)
+
+      class << self
+        attr_accessor :bit_size, :key
+
+        def into_bits(value) = parse(value)
+
+        def inherited(subclass)
+          super
+          subclass.class_eval do
+            @key = name.demodulize.underscore.to_sym
+          end
+        end
+      end
+
+      attr_reader :value
+
+      def initialize(value)
+        value = value.to_s if value.is_a? Symbol
+        @value = value
+      end
+
+      def validate! = raise(NotImplementedError)
+
+      private
+
+      def raise_invalid_option(message)
+        raise InvalidOptionError,
+              "Invalid value '#{value}' (#{value.class.name}) for #{self.class.key} option. #{message}"
+      end
+
+      def validate_inclusion!
+        values = self.class.const_get("VALUES")
+        return if value.in?(values)
+
+        values_sentence = values.to_sentence(two_words_connector: " or ", last_word_connector: " or ")
+        raise_invalid_option "Value must be one of: #{values_sentence}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class OptionsSet
+      ORDERED_OPTIONS = [
+        Option::Offset,
+        Option::Placement,
+        Option::Animation,
+        Option::Cache,
+        Option::Loading,
+        Option::Trigger
+      ].freeze
+
+      OPTION_NAMES = ORDERED_OPTIONS.map(&:key)
+
+      attr_reader :options
+
+      def dup = OptionsSet.new(options.deep_dup)
+      def preload? = options[:loading] == :preload
+      def custom_animation? = options[:animation].to_s == "custom"
+      def to_h = options
+
+      def initialize(options = {})
+        @options = options
+      end
+
+      def merge(options_set)
+        OptionsSet.new(@options.merge(options_set.options))
+      end
+
+      def validate!
+        ORDERED_OPTIONS.map do |option|
+          next unless @options.key?(option.key)
+
+          value = @options[option.key]
+          option.new(value).validate!
+        end
+        @options.assert_valid_keys(ORDERED_OPTIONS.map(&:key))
+      end
+
+      def to_base36
+        @to_base36 ||= begin
+          shift = 0
+          ORDERED_OPTIONS.reverse.sum do |option|
+            bits = option.into_bits(@options[option.key])
+            result = bits << shift
+            shift += option.bit_size
+            result
+          end.to_s(36).freeze
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Registry
+      attr_reader :registry, :semaphore
+
+      def initialize
+        @semaphore = Mutex.new
+        @registry = Hash.new
+      end
+
+      def register(type, klass) = @semaphore.synchronize { @registry[type] = klass }
+      def lookup(type) = @semaphore.synchronize {@registry.fetch(type) }
+      def safe_lookup(type) = @semaphore.synchronize {@registry[type] }
+
+      def lookup_or_register(type)
+        safe_lookup(type) ||
+          begin
+            register(type, (type.classify + "Hovercard").constantize)
+          end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    class Setup
+      attr_reader :klass, :type, :params
+
+      EMPTY_PARAMS = {}.freeze
+
+      def initialize(klass)
+        @klass = klass
+        @type = nil
+        @params = EMPTY_PARAMS
+      end
+
+      def default_options = klass.default_options_for(type)
+      def identifier = "#{type}@#{klass.hovercard_resource_name}"
+      def render_in(view_context) = klass.new(params, view_context).process(type)
+
+      def with_type(type)
+        @type = type
+        self
+      end
+
+      def with_params(**params)
+        @params = params
+        self
+      end
+
+      def method_missing(method_name, *args, &)
+        if klass.action_methods.include?(method_name.name)
+          raise ArgumentError, "expected no arguments, given #{args.size}" if args.any?
+          with_type(method_name)
+        else
+          super
+        end
+      end
+
+      def respond_to_missing?(method, include_all = false)
+        klass.action_methods.include?(method.name) || super
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard
+    module ViewContextDelegation
+      attr_accessor :__cp_view_context
+
+      # For CSRF authenticity tokens in forms
+      def config = __cp_view_context.config
+      def form_authenticity_token(...) = __cp_view_context.form_authenticity_token(...)
+      def protect_against_forgery? = __cp_view_context.protect_against_forgery?
+      def request_forgery_protection_token = __cp_view_context.request_forgery_protection_token
+
+      def helpers = __cp_view_context
+      def controller = __cp_view_context.controller
+    end
+  end
+end

data/app/models/coupdoeil/hovercard.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+module Coupdoeil
+  class Hovercard < AbstractController::Base
+    abstract!
+
+    include AbstractController::Rendering
+
+    include AbstractController::Logger
+    include AbstractController::Helpers
+    include AbstractController::Translation
+    include AbstractController::Callbacks
+    include AbstractController::Caching
+
+    include ActionView::Layouts
+    include ActionView::Rendering
+
+    include Rails.application.routes.url_helpers
+
+    layout "hovercard"
+
+    # so coupdoeil helpers are always available within hovercards
+    helper Coupdoeil::ApplicationHelper
+
+    @registry = Registry.new
+    @default_options_by_method = {}.with_indifferent_access
+
+    DEFAULT_OPTIONS_KEY = Object.new
+    private_constant :DEFAULT_OPTIONS_KEY
+
+    @default_options_by_method[DEFAULT_OPTIONS_KEY] = OptionsSet.new(
+      offset: 0,
+      placement: "auto",
+      animation: "slide-in",
+      cache: true,
+      loading: :async,
+      trigger: "hover"
+    )
+
+    DoubleRenderError = Class.new(::AbstractController::DoubleRenderError)
+
+    # See engine initialization for view paths
+
+    class << self
+      attr_reader :registry
+
+      def hovercard_resource_name = @hovercard_resource_name ||= name.delete_suffix("Hovercard").underscore
+      def with(...) = Setup.new(self).with_params(...)
+
+      def inherited(subclass)
+        super
+        Coupdoeil::Hovercard.registry.register(subclass.hovercard_resource_name, subclass)
+        subclass.instance_variable_set(:@default_options_by_method, @default_options_by_method.dup)
+      end
+
+      def default_options(...) = default_options_for(DEFAULT_OPTIONS_KEY, ...)
+
+      def default_options_for(*action_names, **option_values)
+        if option_values.blank?
+          @default_options_by_method[action_names.first] || default_options
+        else
+          action_names.each do |action_name|
+            options = @default_options_by_method[action_name] || default_options
+            @default_options_by_method[action_name] = options.merge(OptionsSet.new(option_values))
+          end
+        end
+      end
+
+      def method_missing(method_name, *args, &)
+        return super unless action_methods.include?(method_name.name)
+        raise ArgumentError, "expected no arguments" if args.any?
+
+        Setup.new(self).with_type(method_name)
+      end
+
+      def respond_to_missing?(method, include_all = false)
+        action_methods.include?(method.name) || super
+      end
+    end
+
+    attr_reader :params
+
+    def initialize(params, cp_view_context)
+      super()
+      @params = params
+      @__cp_view_context = cp_view_context
+    end
+
+    def helpers = @__cp_view_context
+    def controller = @__cp_view_context.controller
+
+    def view_context
+      super.tap do |context|
+        context.extend ViewContextDelegation
+        context.__cp_view_context = @__cp_view_context
+      end
+    end
+
+    def render(...)
+      return super unless response_body
+
+      raise DoubleRenderError, "Render was called multiple times in this action. \
+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
+          super
+          response_body || render(action_name)
+        end
+      end
+    end
+  end
+end