Class: PhlexKit::AspectRatio

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

Overview

Constrains content (typically an ) to a fixed aspect ratio, ported from ruby_ui's RubyUI::AspectRatio. aspect_ratio: is a "w/h" string (e.g. "16/9", "1/1"); the classic padding-bottom box keeps the ratio. Tailwind → vanilla .pk-aspect-ratio* (aspect_ratio.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(aspect_ratio: "16/9", **attrs) ⇒ AspectRatio

Returns a new instance of AspectRatio.



7
8
9
10
11
12
13
14
15
 
# File 'app/components/phlex_kit/aspect_ratio/aspect_ratio.rb', line 7

def initialize(aspect_ratio: "16/9", **attrs)
  # Both terms must be positive integers — "16/0" yields Infinity% and
  # "a/b" NaN% padding, silently breaking the layout.
  unless aspect_ratio.is_a?(String) && aspect_ratio.match?(%r{\A[1-9]\d*/[1-9]\d*\z})
    raise ArgumentError, %(aspect_ratio must be a "w/h" string of positive integers (e.g. "16/9"))
  end
  @aspect_ratio = aspect_ratio
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



17
18
19
20
21
22
23
 
# File 'app/components/phlex_kit/aspect_ratio/aspect_ratio.rb', line 17

def view_template(&block)
  # **mix on the ROOT (kit rule) — caller attrs previously landed on the
  # inner div and could never reach the actual root element.
  div(**mix({ class: "pk-aspect-ratio", style: "padding-bottom: #{padding_bottom}%" }, @attrs)) do
    div(class: "pk-aspect-ratio-inner", &block)
  end
end