Class: Emjay::Components::MjAccordion

Inherits:
BodyComponent show all
Defined in:
lib/emjay/components/body/mj_accordion.rb

Instance Attribute Summary

Attributes inherited from Emjay::Component

#attributes, #context, #props

Class Method Summary collapse

Instance Method Summary collapse

Methods inherited from BodyComponent

#get_box_widths, #get_shorthand_attr_value, #get_shorthand_border_value, #html_attributes, #render_children, #styles

Methods inherited from Emjay::Component

ending_tag?, #get_attribute, #get_content, #initialize, raw_element?

Constructor Details

This class inherits a constructor from Emjay::Component

Class Method Details

.allowed_attributes ⇒ Object 



29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 29

def self.allowed_attributes
  {
    "container-background-color" => "color",
    "border" => "string",
    "font-family" => "string",
    "icon-align" => "enum(top,middle,bottom)",
    "icon-width" => "unit(px,%)",
    "icon-height" => "unit(px,%)",
    "icon-wrapped-url" => "string",
    "icon-wrapped-alt" => "string",
    "icon-unwrapped-url" => "string",
    "icon-unwrapped-alt" => "string",
    "icon-position" => "enum(left,right)",
    "padding-bottom" => "unit(px,%)",
    "padding-left" => "unit(px,%)",
    "padding-right" => "unit(px,%)",
    "padding-top" => "unit(px,%)",
    "padding" => "unit(px,%){1,4}"
  }
end

.component_name ⇒ Object 



9
10
11
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 9

def self.component_name
  "mj-accordion"
end

.default_attributes ⇒ Object 



13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 13

def self.default_attributes
  {
    "border" => "2px solid black",
    "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
    "icon-align" => "middle",
    "icon-wrapped-url" => "https://i.imgur.com/bIXv1bk.png",
    "icon-wrapped-alt" => "+",
    "icon-unwrapped-url" => "https://i.imgur.com/w4uTygT.png",
    "icon-unwrapped-alt" => "-",
    "icon-position" => "right",
    "icon-height" => "32px",
    "icon-width" => "32px",
    "padding" => "10px 25px"
  }
end

Instance Method Details

#get_child_context ⇒ Object 



66
67
68
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 66

def get_child_context
  @context.merge(accordionFontFamily: get_attribute("font-family"))
end

#get_styles ⇒ Object 



54
55
56
57
58
59
60
61
62
63
64
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 54

def get_styles
  {
    table: {
      "width" => "100%",
      "border-collapse" => "collapse",
      "border" => get_attribute("border"),
      "border-bottom" => "none",
      "font-family" => get_attribute("font-family")
    }
  }
end

#head_style(_breakpoint = nil) ⇒ Object 



50
51
52
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 50

def head_style(_breakpoint = nil)
  "\n      noinput.mj-accordion-checkbox { display:block!important; }\n\n      @media yahoo, only screen and (min-width:0) {\n        .mj-accordion-element { display:block; }\n        .mj-accordion-checkbox[type=\"checkbox\"], .mj-accordion-less { display:none!important; }\n        .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }\n        .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-content { overflow:hidden; display:none; }\n        .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-more { display:block!important; }\n        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }\n        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }\n        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }\n      }\n\n      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }\n      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }\n      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }\n\n      @goodbye { @gmail }\n    "
end

#render ⇒ Object 



70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
# File 'lib/emjay/components/body/mj_accordion.rb', line 70

def render
  children = @props[:children] || []

  children_attr = %w[border icon-align icon-width icon-height icon-position
    icon-wrapped-url icon-wrapped-alt icon-unwrapped-url icon-unwrapped-alt].each_with_object({}) do |attr, hash|
    hash[attr] = get_attribute(attr)
  end

  table_attrs = html_attributes(
    cellspacing: "0",
    cellpadding: "0",
    class: "mj-accordion",
    style: :table
  )

  <<~HTML
    <table
      #{table_attrs}
    >
      <tbody>
        #{render_children(children, attributes: children_attr)}
      </tbody>
    </table>
  HTML
end