Class: Ui::PlaceholderComponent

Inherits:
SparkComponents::Component
  • Object
show all
Defined in:
app/components/spark/ui/placeholder_component.rb

Instance Method Summary collapse

Instance Method Details

#after_init ⇒ Object 



7
8
9
10
 
# File 'app/components/spark/ui/placeholder_component.rb', line 7

def after_init
  @height ||= @width ||= size_class
  add_class "size-#{size}" if size
end

#inner_svg_attrs ⇒ Object 



84
85
86
87
88
89
90
91
92
93
94
 
# File 'app/components/spark/ui/placeholder_component.rb', line 84

def inner_svg_attrs
  svg_scale = 0.63
  center_scale = (1 - svg_scale) / 2
  # make size proportional to container
  {
    width: (width * svg_scale).round,
    height: (height * svg_scale).round,
    x: (width * center_scale).round,
    y: (height * center_scale).round
  }
end

#options ⇒ Object 



55
56
57
58
59
60
61
62
63
 
# File 'app/components/spark/ui/placeholder_component.rb', line 55

def options
  {
    width: width || size_class,
    height: height || size_class,
    alt: alt,
    text: text,
    class: shape_class
  }
end

#remote_attrs ⇒ Object 



100
101
102
103
104
 
# File 'app/components/spark/ui/placeholder_component.rb', line 100

def remote_attrs
  tag_attrs.merge(size_attrs).merge({
    class: "#{classnames.modifiers} #{shape_class}"
  })
end

#remote_image ⇒ Object 



69
70
71
72
 
# File 'app/components/spark/ui/placeholder_component.rb', line 69

def remote_image
  url = "https://via.placeholder.com/#{width * 2}x#{height * 2}/78858A/FFFFFF?text=#{text || "%20"}"
  image_tag(url, remote_attrs)
end

#render ⇒ Object 



12
13
14
15
16
 
# File 'app/components/spark/ui/placeholder_component.rb', line 12

def render
  content_tag(:div, tag_attrs) do
    @yield || (remote ? remote_image : svg_placeholder)
  end
end

#shape_class ⇒ Object 



65
66
67
 
# File 'app/components/spark/ui/placeholder_component.rb', line 65

def shape_class
  circle ? "ui-circle-crop" : "ui-roundrect-crop"
end

#size_attrs ⇒ Object 



96
97
98
 
# File 'app/components/spark/ui/placeholder_component.rb', line 96

def size_attrs
  { width: "#{width}px", height: "#{height}px" }
end

#size_class ⇒ Object 



51
52
53
 
# File 'app/components/spark/ui/placeholder_component.rb', line 51

def size_class
  @view.image_size_class(size)
end

#svg_attrs ⇒ Object 



74
75
76
77
78
79
80
81
82
 
# File 'app/components/spark/ui/placeholder_component.rb', line 74

def svg_attrs
  tag_attrs.merge(size_attrs).merge({
    class: "ui-placeholder",
    aria: { presentation: "true" },
    viewBox: "0 0 #{width} #{height}",
    version: "1.1",
    xmlns: "http://www.w3.org/2000/svg"
  })
end

#svg_circle ⇒ Object 



33
34
35
 
# File 'app/components/spark/ui/placeholder_component.rb', line 33

def svg_circle
  tag(:circle, cy: height/2, cx: width/2, r: width/2, fill: "#78858A")
end

#svg_placeholder ⇒ Object 



18
19
20
21
22
23
24
25
26
27
 
# File 'app/components/spark/ui/placeholder_component.rb', line 18

def svg_placeholder
  content_tag(:svg, svg_attrs.merge("aria-label"=>alt)) do
    concat(circle ? svg_circle : svg_rectangle)
    if icon && icon_svg = @view.use_svg(icon, inner_svg_attrs)
      concat(icon_svg)
    elsif text
      concat(svg_text)
    end
  end
end

#svg_rectangle ⇒ Object 



29
30
31
 
# File 'app/components/spark/ui/placeholder_component.rb', line 29

def svg_rectangle
  tag(:rect, width: width, height: height, ry: 4, fill: "#78858A")
end

#svg_text ⇒ Object 



37
38
39
40
41
42
43
44
45
46
47
48
49
 
# File 'app/components/spark/ui/placeholder_component.rb', line 37

def svg_text
  opts = {
    x: width/2,
    y: height/2,
    fill: "#ffffff",
    "font-size" => font_size || "#{width/3}px",
    "text-anchor" => "middle",
    "dominant-baseline" => "central",
    "alignment-baseline" => "central"
  }

  content_tag(:text, text, opts)
end