Class: PhlexKit::Carousel

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/carousel/carousel.rb

Overview

Carousel, ported from ruby_ui's RubyUI::Carousel. Upstream drives an embla-carousel instance; that npm dependency is dropped — the phlex-kit--carousel controller is a small translate-based engine (loop, x/y axis from the options value, arrow keys, pointer drag/swipe, button disabled state), so only @hotwired/stimulus is needed. Compose Carousel(orientation:) > CarouselContent > CarouselItem(s), plus CarouselPrevious / CarouselNext. Tailwind → vanilla .pk-carousel* (carousel.css).

Constant Summary collapse

ORIENTATIONS = 
{ horizontal: "is-horizontal", vertical: "is-vertical" }.freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(orientation: :horizontal, options: {}, **attrs) ⇒ Carousel

Returns a new instance of Carousel.



12
13
14
15
16
 
# File 'app/components/phlex_kit/carousel/carousel.rb', line 12

def initialize(orientation: :horizontal, options: {}, **attrs)
  @orientation = orientation.to_sym
  @options = options
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



18
19
20
21
22
23
24
25
26
27
28
29
 
# File 'app/components/phlex_kit/carousel/carousel.rb', line 18

def view_template(&)
  div(**mix({
    class: [ "pk-carousel", fetch_option(ORIENTATIONS, @orientation, :orientation) ].join(" "),
    role: "region",
    aria: { roledescription: "carousel" },
    data: {
      controller: "phlex-kit--carousel",
      phlex_kit__carousel_options_value: JSON.generate(default_options.merge(@options)),
      action: "keydown.right->phlex-kit--carousel#scrollNext:prevent keydown.left->phlex-kit--carousel#scrollPrev:prevent"
    }
  }, @attrs), &)
end