Module: GlassyLoaderHelper

Defined in:
app/helpers/glassy_loader_helper.rb

Instance Method Summary collapse

Instance Method Details

#glassy_button_loader_tag(text, id: nil, class_name: nil, theme: nil, animation: :"spin-1") ⇒ Object 



84
85
86
87
88
89
90
91
92
93
94
 
# File 'app/helpers/glassy_loader_helper.rb', line 84

def glassy_button_loader_tag(text, id: nil, class_name: nil, theme: nil, animation: :"spin-1")
  theme ||= GlassyLoader.configuration.theme
  content_tag :button, id: id, class: ["glassy-button-loader", "glassy-theme-#{theme}", class_name].compact.join(" ") do
    safe_join([
      content_tag(:span, text, class: "glassy-button-text"),
      content_tag(:div, nil, class: "glassy-button-spinner-container") do
        glassy_loader_tag(id: "#{id}-spinner", animation: animation, full_screen: false, container: true, theme: theme)
      end
    ])
  end
end

#glassy_card_tag(id: nil, class_name: nil, theme: nil, &block) ⇒ Object 



128
129
130
131
132
133
 
# File 'app/helpers/glassy_loader_helper.rb', line 128

def glassy_card_tag(id: nil, class_name: nil, theme: nil, &block)
  theme ||= GlassyLoader.configuration.theme
  content_tag :div, id: id, class: ["glassy-card", "glassy-theme-#{theme}", class_name].compact.join(" ") do
    capture(&block) if block_given?
  end
end

#glassy_loader_tag(message: nil, full_screen: true, id: "glassy-loader", theme: nil, animation: nil, duration: nil, container: false, size: nil, class_name: nil, spinner_class: nil, delay: nil, min_duration: nil) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
# File 'app/helpers/glassy_loader_helper.rb', line 4

def glassy_loader_tag(message: nil, full_screen: true, id: "glassy-loader", theme: nil, animation: nil, duration: nil, container: false, size: nil, class_name: nil, spinner_class: nil, delay: nil, min_duration: nil)
  theme ||= GlassyLoader.configuration.theme
  animation ||= GlassyLoader.configuration.animation
  duration ||= GlassyLoader.configuration.duration

  classes = [
    "glassy-loader",
    "glassy-theme-#{theme}",
    "glassy-anim-#{animation}",
    ("glassy-loader--full-screen" if full_screen && !container),
    ("glassy-loader--container" if container),
    class_name
  ].compact.join(" ")

  style = ["display: none;"]
  style << "font-size: #{size};" if size

  data_attributes = {
    duration: duration,
    delay: delay,
    min_duration: min_duration
  }.compact

  content_tag :div, id: id, class: classes, style: style.join(" "), data: data_attributes, role: "status", aria: { live: "polite", busy: "false" } do
    safe_join([
      content_tag(:div, nil, class: "glassy-loader__spinner-container") do
        case animation.to_s
        when "folding-cube"
          content_tag(:div, nil, class: "glassy-loader__folding-cube") do
            4.times.map { |i| content_tag(:div, nil, class: "glassy-loader__cube-face face-#{i+1}") }.join.html_safe
          end
        when "infinity"
          content_tag(:svg, class: "glassy-loader__infinity", viewBox: "0 0 256 128") do
            content_tag(:path, nil, class: "glassy-loader__infinity-path", d: "M128 64C128 64 153.962 32 192 32C230.038 32 256 64 256 64C256 64 230.038 96 192 96C153.962 96 128 64 128 64C128 64 102.038 32 64 32C25.9619 32 0 64 0 64C0 64 25.9619 96 64 96C102.038 96 128 64 128 64Z")
          end
        else
          safe_join([
            content_tag(:div, nil, class: ["glassy-loader__spinner", ].compact.join(" ")),
            content_tag(:div, nil, class: "glassy-loader__state-icon")
          ])
        end
      end,
      (content_tag(:div, message, class: "glassy-loader__message") if message)
    ].compact)
  end
end

#glassy_progress_bar_tag(id: "glassy-progress-bar", theme: nil, liquid: false) ⇒ Object 



108
109
110
111
112
113
114
115
116
117
118
119
 
# File 'app/helpers/glassy_loader_helper.rb', line 108

def glassy_progress_bar_tag(id: "glassy-progress-bar", theme: nil, liquid: false)
  theme ||= GlassyLoader.configuration.theme
  classes = [
    "glassy-progress-bar-container",
    "glassy-theme-#{theme}",
    ("glassy-progress--liquid" if liquid)
  ].compact.join(" ")

  content_tag :div, id: id, class: classes do
    content_tag :div, nil, class: "glassy-progress-bar"
  end
end

#glassy_skeleton_layout(type: :feed, items: 3, theme: nil, staggered: true) ⇒ Object 



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
 
# File 'app/helpers/glassy_loader_helper.rb', line 51

def glassy_skeleton_layout(type: :feed, items: 3, theme: nil, staggered: true)
  theme ||= GlassyLoader.configuration.theme
  content_tag :div, class: "glassy-skeleton-layout glassy-skeleton-#{type} glassy-theme-#{theme}" do
    items.times.map do |i|
      delay = staggered ? "#{i * 0.1}s" : "0s"
      case type
      when :feed
        content_tag :div, class: "glassy-skeleton-row", style: "animation-delay: #{delay}" do
          safe_join([
            glassy_skeleton_tag(width: "50px", height: "50px", border_radius: "50%"),
            content_tag(:div, class: "glassy-skeleton-stack") do
              safe_join([
                glassy_skeleton_tag(width: "70%", height: "15px"),
                glassy_skeleton_tag(width: "40%", height: "10px")
              ])
            end
          ])
        end
      when :profile
        content_tag :div, class: "glassy-skeleton-profile", style: "animation-delay: #{delay}" do
          safe_join([
            glassy_skeleton_tag(width: "100px", height: "100px", border_radius: "50%"),
            glassy_skeleton_tag(width: "200px", height: "30px"),
            glassy_skeleton_tag(width: "150px", height: "15px")
          ])
        end
      when :grid
        glassy_skeleton_tag(width: "100%", height: "150px", class_name: "glassy-skeleton-item", theme: theme)
      end
    end.join.html_safe
  end
end

#glassy_skeleton_tag(width: "100%", height: "20px", border_radius: "4px", class_name: nil, theme: nil) ⇒ Object 



121
122
123
124
125
126
 
# File 'app/helpers/glassy_loader_helper.rb', line 121

def glassy_skeleton_tag(width: "100%", height: "20px", border_radius: "4px", class_name: nil, theme: nil)
  theme ||= GlassyLoader.configuration.theme
  content_tag :div, nil, 
              class: ["glassy-skeleton", "glassy-theme-#{theme}", class_name].compact.join(" "),
              style: "width: #{width}; height: #{height}; border-radius: #{border_radius};"
end

#glassy_toast_tag(message, id: "glassy-toast", theme: nil, animation: :"dots-1") ⇒ Object 



96
97
98
99
100
101
102
103
104
105
106
 
# File 'app/helpers/glassy_loader_helper.rb', line 96

def glassy_toast_tag(message, id: "glassy-toast", theme: nil, animation: :"dots-1")
  theme ||= GlassyLoader.configuration.theme
  content_tag :div, id: id, class: ["glassy-toast", "glassy-theme-#{theme}"].compact.join(" "), style: "display: none;" do
    safe_join([
      content_tag(:div, nil, class: "glassy-toast__loader") do
        glassy_loader_tag(animation: animation, full_screen: false, container: true, theme: theme)
      end,
      content_tag(:div, message, class: "glassy-toast__message")
    ])
  end
end