Class: Ariadne::ModalComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/ariadne/modal_component.rb

Overview

Renders a full screen modal

Constant Summary collapse

DEFAULT_TAG = 
:div
DEFAULT_SHADOW_TAG = 
:div
TAG_OPTIONS = 
[DEFAULT_TAG].freeze
DEFAULT_CLASSES = 
{
  wrapper: "ariadne-group",
  shadow: "ariadne-w-screen ariadne-h-screen ariadne-bg-black/20 ariadne-fixed ariadne-top-0 ariadne-left-0 ariadne-flex ariadne-justify-center ariadne-items-center data-[close-on-click=true]:ariadne-cursor-pointer",
  content: "ariadne-bg-white ariadne-p-2 ariadne-relative ariadne-cursor-default",
  close_button: "ariadne-absolute ariadne-right-2 ariadne-pt-1 ariadne-pb-1 ariadne-pl-1 ariadne-pr-1",
}
DEFAULT_ATTRIBUTES = 
{
  wrapper: {
    "data-controller": "toggleable",
    "data-action": "click->toggleable#toggle",
    "data-toggleable-anti-attrs-value": '["aria-hidden"]',
  },
  shadow: {},
  content: { role: :dialog },
  close_button: {},
}
SHADOW_VISIBILITY_CLASSES = 
"group-aria-hidden:ariadne-hidden"

Constants inherited from Component

Component::BASE_HIDDEN_CLASS, Component::BASE_MAIN_CLASSES, Component::BASE_WRAPPER_CLASSES, Component::INVALID_ARIA_LABEL_TAGS

Constants included from ActionViewExtensions::FormHelper

ActionViewExtensions::FormHelper::DEFAULT_FORM_CLASSES

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::INTEGER_TYPES, FetchOrFallbackHelper::InvalidValueError, FetchOrFallbackHelper::TRUE_OR_FALSE

Instance Method Summary collapse

Methods included from ActionViewExtensions::FormHelper

#ariadne_form_with

Methods included from ClassNameHelper

#merge_class_names

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from FetchOrFallbackHelper

#check_incoming_attribute, #check_incoming_tag, #check_incoming_value, #fetch_or_raise, #fetch_or_raise_boolean, #fetch_or_raise_integer

Constructor Details

#initialize(tag: DEFAULT_TAG, classes: "", attributes: {}, initial_visible: false, shadow_tag: DEFAULT_SHADOW_TAG, shadow_classes: "", shadow_attributes: {}, content_classes: "", content_attributes: {}, close_button_classes: "", close_button_attributes: {}, close_button_aria_label: "Close modal button", close_on_shadow_click: true) ⇒ ModalComponent

Returns a new instance of ModalComponent.

Examples:

Default


<%= render(Ariadne::ModalComponent.new) { "Example" } %>

Parameters:

  • tag (Symbol, String) (defaults to: DEFAULT_TAG) —

    The rendered tag name.

  • classes (String) (defaults to: "") —

    <%= link_to_classes_docs %>

  • attributes (Hash) (defaults to: {}) —

    <%= link_to_attributes_docs %>



41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
# File 'app/components/ariadne/modal_component.rb', line 41

def initialize(
  tag: DEFAULT_TAG,
  classes: "",
  attributes: {},
  initial_visible: false,
  shadow_tag: DEFAULT_SHADOW_TAG,
  shadow_classes: "",
  shadow_attributes: {},
  content_classes: "",
  content_attributes: {},
  close_button_classes: "",
  close_button_attributes: {},
  close_button_aria_label: "Close modal button",
  close_on_shadow_click: true
)
  @tag = check_incoming_tag(DEFAULT_TAG, tag)
  @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
  @attributes = DEFAULT_ATTRIBUTES[:wrapper]
    .merge({
      "aria-hidden": true,
      "data-toggleable-state-value": false,
    })
    .merge(attributes)

  @initial_visible = initial_visible
  @shadow_tag = check_incoming_tag(DEFAULT_SHADOW_TAG, shadow_tag)
  @shadow_classes = merge_class_names(
    DEFAULT_CLASSES[:shadow],
    SHADOW_VISIBILITY_CLASSES,
    shadow_classes,
  )
  @shadow_attributes = DEFAULT_ATTRIBUTES[:shadow]
    .merge({
      "data-controller": "events",
      "data-close-on-click": close_on_shadow_click,
      "data-action": close_on_shadow_click ? "" : "click->events#stopPropagation",
    })
    .merge(shadow_attributes)

  @content_classes = merge_class_names(DEFAULT_CLASSES[:content], content_classes)
  @content_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)

  @close_button_aria_label = close_button_aria_label
  @close_button_classes = merge_class_names(DEFAULT_CLASSES[:close_button], close_button_classes)
  @close_button_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
end