Class: Shadcn::Carousel::Content::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/carousel/content/component.rb

Overview

CarouselContent — the viewport, with the flex track inside it.

The viewport keeps upstream's overflow-hidden and nothing else, which matters: overflow: hidden still makes an element a scroll container, so scrollLeft works on it even though a person cannot drag it. What turns dragging back on is a rule in shadcn.css keyed on this data-slot, beside the one that hides the scroll area's scrollbars — the same shape of answer, in the same place.

Constant Summary

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(orientation: :horizontal, **attributes) ⇒ Component

Returns a new instance of Component.



25
26
27
28
29
30
31
 
# File 'app/components/shadcn/carousel/content/component.rb', line 25

def initialize(orientation: :horizontal, **attributes)
  @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
  # Held for the track and kept off the viewport, which is upstream's
  # arrangement: `{...props}` and the className land on the inner div.
  @track = attributes
  super()
end

Instance Attribute Details

#orientation ⇒ Object (readonly)

Returns the value of attribute orientation.



23
24
25
 
# File 'app/components/shadcn/carousel/content/component.rb', line 23

def orientation
  @orientation
end

Instance Method Details

#call ⇒ Object

Upstream gives the track the caller's className and leaves the viewport with overflow-hidden and nothing else (carousel.tsx:138-152). This port had it the other way round, so a preview asking for a smaller gutter with -ml-2 put it on the viewport, where it does nothing, while the track kept -ml-4 and the items took pl-2. A gutter that disagrees with its own padding is a slide whose content starts outside the window, which is a card with no left border.



62
63
64
 
# File 'app/components/shadcn/carousel/content/component.rb', line 62

def call
  render_element(body: tag.div(safe_join([ items, content ].flatten.compact), **track_attributes))
end

#element_attributes(**defaults) ⇒ Object

The caller's attributes went to the track above, so the viewport is given only its own.



35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
# File 'app/components/shadcn/carousel/content/component.rb', line 35

def element_attributes(**defaults)
  super(**{
    # Upstream sets no tabindex, and upstream's viewport is not a
    # scroller: embla translates a track inside a hidden overflow, so
    # there is no region for a keyboard to be shut out of. Ours is a
    # scroller, which is the whole mechanism, and axe fails a scrollable
    # region with no keyboard access — the same divergence, for the same
    # reason, as `scroll-area-viewport`.
    #
    # It earns its place beyond the audit: Tab reaches the slides and
    # the arrows move them, where before the only way through was the
    # two buttons.
    tabindex: "0",
    role: "group",
    "aria-roledescription" => "slides",
    "data-orientation" => orientation,
    "data-shadcn--carousel-target" => "viewport"
  }.merge(defaults))
end