bootstrap4_helper 0.0.0 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +489 -4
- data/lib/bootstrap4_helper.rb +511 -2
- data/lib/bootstrap4_helper/accordion.rb +103 -0
- data/lib/bootstrap4_helper/accordion_group.rb +50 -0
- data/lib/bootstrap4_helper/alert.rb +54 -0
- data/lib/bootstrap4_helper/badge.rb +41 -0
- data/lib/bootstrap4_helper/card.rb +142 -0
- data/lib/bootstrap4_helper/card_column.rb +15 -0
- data/lib/bootstrap4_helper/card_deck.rb +15 -0
- data/lib/bootstrap4_helper/card_group.rb +15 -0
- data/lib/bootstrap4_helper/card_grouping.rb +33 -0
- data/lib/bootstrap4_helper/component.rb +106 -0
- data/lib/bootstrap4_helper/configuration.rb +34 -0
- data/lib/bootstrap4_helper/constants.rb +27 -0
- data/lib/bootstrap4_helper/dropdown.rb +95 -0
- data/lib/bootstrap4_helper/dropdown/menu.rb +140 -0
- data/lib/bootstrap4_helper/initialize.rb +19 -0
- data/lib/bootstrap4_helper/modal.rb +167 -0
- data/lib/bootstrap4_helper/nav.rb +113 -0
- data/lib/bootstrap4_helper/railtie.rb +8 -0
- data/lib/bootstrap4_helper/spinner.rb +44 -0
- data/lib/bootstrap4_helper/tab.rb +70 -0
- data/lib/bootstrap4_helper/tab/content.rb +58 -0
- data/lib/bootstrap4_helper/version.rb +1 -1
- metadata +116 -7
@@ -0,0 +1,103 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Builds a Accordion out of the collapse component of Bootstrap 4.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class Accordion < Component
|
6
|
+
CARD_METHODS = %i[
|
7
|
+
title
|
8
|
+
text
|
9
|
+
image_overlay
|
10
|
+
].freeze
|
11
|
+
|
12
|
+
# Class constructor
|
13
|
+
# -
|
14
|
+
#
|
15
|
+
# @param [ActionView] template
|
16
|
+
# @param [Hash] opts
|
17
|
+
# @option opts [String] :id
|
18
|
+
# @option opts [String] :class
|
19
|
+
# @option opts [Hash] :data
|
20
|
+
# @option opts [String] :parent
|
21
|
+
# @option opts [String] :target
|
22
|
+
#
|
23
|
+
def initialize(template, opts = {}, &block)
|
24
|
+
super(template)
|
25
|
+
|
26
|
+
@id = opts.fetch(:id, uuid)
|
27
|
+
@class = opts.fetch(:class, '')
|
28
|
+
@data = opts.fetch(:data, {})
|
29
|
+
@parent = opts.fetch(:parent, nil)
|
30
|
+
@target = @data.fetch(:target, uuid)
|
31
|
+
@content = block || proc { '' }
|
32
|
+
@card = Card.new(@template)
|
33
|
+
end
|
34
|
+
|
35
|
+
# Builds a header component for the accordion, which is actually the header
|
36
|
+
# of a Card.
|
37
|
+
#
|
38
|
+
# @param [Hash] opts
|
39
|
+
# @return [String]
|
40
|
+
#
|
41
|
+
def header(opts = {}, &block)
|
42
|
+
@card.header(opts) do
|
43
|
+
content_tag(config(:accordion_header, :h5)) do
|
44
|
+
content_tag(
|
45
|
+
:a,
|
46
|
+
data: { toggle: 'collapse', target: "##{@target}" },
|
47
|
+
&block
|
48
|
+
)
|
49
|
+
end
|
50
|
+
end
|
51
|
+
end
|
52
|
+
|
53
|
+
# Builds the body component for the accordion, which is actually the body
|
54
|
+
# of a Card.
|
55
|
+
#
|
56
|
+
# @note The `@parent` gets used to set the parent element for the accordion. This
|
57
|
+
# gets used primarily in the `AccordionGroup`.
|
58
|
+
#
|
59
|
+
# @param [Hash] opts
|
60
|
+
# @return [String]
|
61
|
+
#
|
62
|
+
def body(opts = {}, &block)
|
63
|
+
data = { parent: "##{@parent}" } if @parent.present?
|
64
|
+
|
65
|
+
content_tag :div, id: @target, class: 'collapse', data: data do
|
66
|
+
@card.body(opts, &block)
|
67
|
+
end
|
68
|
+
end
|
69
|
+
|
70
|
+
# Because Accordions are basically `Cards` with a wrapper, we might as
|
71
|
+
# well catch common `Card` methods and send them to the card object. No
|
72
|
+
# point in creating similar methods for `Accordions`.
|
73
|
+
#
|
74
|
+
# @param [Symbol|String] method
|
75
|
+
# @param [Mixed] args
|
76
|
+
#
|
77
|
+
def method_missing(method, *args, &block)
|
78
|
+
if CARD_METHODS.include?(method)
|
79
|
+
@card.send(method, *args, &block)
|
80
|
+
else
|
81
|
+
super
|
82
|
+
end
|
83
|
+
end
|
84
|
+
|
85
|
+
# Checks if the Object reponds to missing.
|
86
|
+
#
|
87
|
+
#
|
88
|
+
def respond_to_missing?(method, include_private = false)
|
89
|
+
CARD_METHODS.include?(method) || super
|
90
|
+
end
|
91
|
+
|
92
|
+
# Leaving off the default `accordion` class because with only 1 accordion,
|
93
|
+
# there is no bottom.
|
94
|
+
#
|
95
|
+
# @return [String]
|
96
|
+
#
|
97
|
+
def to_s
|
98
|
+
content_tag :div, class: "card #{@class}", data: @data do
|
99
|
+
@content.call(self)
|
100
|
+
end
|
101
|
+
end
|
102
|
+
end
|
103
|
+
end
|
@@ -0,0 +1,50 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Used to build groups of Accordions, that are all synced with each other.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class AccordionGroup < Component
|
6
|
+
# Class constructor
|
7
|
+
#
|
8
|
+
# @param [ActionView] template
|
9
|
+
# @param [Hash] opts
|
10
|
+
# @option opts [String] :id
|
11
|
+
# @option opts [String] :class
|
12
|
+
# @option opts [Hash] :data
|
13
|
+
#
|
14
|
+
def initialize(template, opts = {}, &block)
|
15
|
+
super(template)
|
16
|
+
|
17
|
+
@id = opts.fetch(:id, uuid)
|
18
|
+
@class = opts.fetch(:class, '')
|
19
|
+
@data = opts.fetch(:data, {})
|
20
|
+
@content = block || proc { '' }
|
21
|
+
end
|
22
|
+
|
23
|
+
# Used to build a `Accordion` for the `AccordionGroup`.
|
24
|
+
#
|
25
|
+
# @param [Mixed] args
|
26
|
+
# @return [Accordion]
|
27
|
+
#
|
28
|
+
def accordion(*args, &block)
|
29
|
+
opts = *args
|
30
|
+
|
31
|
+
if opts.any? { |opt| opt.is_a?(Hash) }
|
32
|
+
opts.collect! { |opt| opt[:parent] = @id if opt.is_a?(Hash) }
|
33
|
+
else
|
34
|
+
opts << { parent: @id }
|
35
|
+
end
|
36
|
+
|
37
|
+
Accordion.new(self, *opts, &block)
|
38
|
+
end
|
39
|
+
|
40
|
+
# Used to get the HTML markup of the `AccordionGroup`
|
41
|
+
#
|
42
|
+
# @return [String]
|
43
|
+
#
|
44
|
+
def to_s
|
45
|
+
content_tag :div, id: @id, class: "accordion #{@class}", data: @data do
|
46
|
+
@content.call(self)
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
@@ -0,0 +1,54 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# The Alert helper is meant to help you rapidly build Bootstrap Alert
|
3
|
+
# components quickly and easily. The dissmiss button is optional.
|
4
|
+
#
|
5
|
+
class Alert < Component
|
6
|
+
# Class constructor
|
7
|
+
#
|
8
|
+
# @param [Class] template - Template in which your are binding too.
|
9
|
+
# @param [NilClass|String|Symbol|Hash] context_or_options
|
10
|
+
# @param [Hash] opts
|
11
|
+
# @return [Alert]
|
12
|
+
#
|
13
|
+
def initialize(template, context_or_options = nil, opts = {}, &block)
|
14
|
+
super(template)
|
15
|
+
@context, args = parse_arguments(context_or_options, opts)
|
16
|
+
|
17
|
+
@id = args.fetch(:id, nil)
|
18
|
+
@class = args.fetch(:class, '')
|
19
|
+
@dismissible = args.fetch(:dismissible, false)
|
20
|
+
@content = block || proc { '' }
|
21
|
+
end
|
22
|
+
|
23
|
+
# The dissmiss button, if the element has one.
|
24
|
+
#
|
25
|
+
# @return [String]
|
26
|
+
#
|
27
|
+
def close_button
|
28
|
+
content_tag(:button, class: 'close', data: { dismiss: 'alert' }, aria: { label: 'Close' }) do
|
29
|
+
content_tag(:span, aria: { hidden: true }) { '×'.html_safe }
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
33
|
+
# Used to render out the Alert component.
|
34
|
+
#
|
35
|
+
# @return [String]
|
36
|
+
#
|
37
|
+
def to_s
|
38
|
+
content_tag :div, id: @id, class: container_class do
|
39
|
+
concat(@dismissible ? close_button : '')
|
40
|
+
@content.call(self)
|
41
|
+
end
|
42
|
+
end
|
43
|
+
|
44
|
+
private
|
45
|
+
|
46
|
+
# Used to get the container classes.
|
47
|
+
#
|
48
|
+
# @return [String]
|
49
|
+
#
|
50
|
+
def container_class
|
51
|
+
"alert alert-#{@context} #{@class}"
|
52
|
+
end
|
53
|
+
end
|
54
|
+
end
|
@@ -0,0 +1,41 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Creates Bootstrap badge components that can be used anywhere.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class Badge < Component
|
6
|
+
# Class constructor
|
7
|
+
#
|
8
|
+
# @param [ActionView] template
|
9
|
+
# @param [NilClass|String|Symbol|Hash] context_or_options
|
10
|
+
# @param [Hash] opts
|
11
|
+
#
|
12
|
+
def initialize(template, context_or_options = nil, opts = {}, &block)
|
13
|
+
super(template)
|
14
|
+
@context, args = parse_arguments(context_or_options, opts)
|
15
|
+
|
16
|
+
@id = args.fetch(:id, nil)
|
17
|
+
@class = args.fetch(:class, '')
|
18
|
+
@content = block || proc { '' }
|
19
|
+
end
|
20
|
+
|
21
|
+
# String representation of the object.
|
22
|
+
#
|
23
|
+
#
|
24
|
+
def to_s
|
25
|
+
content_tag(config(:badge, :span), id: @id, class: container_class) { @content.call(self) }
|
26
|
+
end
|
27
|
+
|
28
|
+
private
|
29
|
+
|
30
|
+
# Used to get the container classes.
|
31
|
+
#
|
32
|
+
# @return [String]
|
33
|
+
#
|
34
|
+
def container_class
|
35
|
+
string = 'badge '
|
36
|
+
string += @context == 'secondary' ? 'badge-secondary' : "badge-#{@context}"
|
37
|
+
string += " #{@class}"
|
38
|
+
string
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
@@ -0,0 +1,142 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Used to build Bootstrap Card components. Cards are wildly used through Bootstrap 4.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class Card < Component
|
6
|
+
# Used to initialize a new Card component.
|
7
|
+
#
|
8
|
+
# @param [ActionView] template
|
9
|
+
# @param [Hash] opts
|
10
|
+
# @option opts [String] :id
|
11
|
+
# @option opts [String] :class
|
12
|
+
# @option opts [Hash] :data
|
13
|
+
# @return [Card]
|
14
|
+
#
|
15
|
+
def initialize(template, opts = {}, &block)
|
16
|
+
super(template)
|
17
|
+
|
18
|
+
@id = opts.fetch(:id, '')
|
19
|
+
@class = opts.fetch(:class, '')
|
20
|
+
@data = opts.fetch(:data, nil)
|
21
|
+
@content = block || proc { '' }
|
22
|
+
end
|
23
|
+
|
24
|
+
# Builds the Header component.
|
25
|
+
#
|
26
|
+
# @param [Hash] args
|
27
|
+
# @option args [String] :id
|
28
|
+
# @option args [String] :class
|
29
|
+
# @option args [Hash] :data
|
30
|
+
# @return [String]
|
31
|
+
#
|
32
|
+
def header(args = {}, &block)
|
33
|
+
build_base_component :header, args, &block
|
34
|
+
end
|
35
|
+
|
36
|
+
# Builds the Body component.
|
37
|
+
#
|
38
|
+
# @param [Hash] args
|
39
|
+
# @option args [String] :id
|
40
|
+
# @option args [String] :class
|
41
|
+
# @option args [Hash] :data
|
42
|
+
# @return [String]
|
43
|
+
#
|
44
|
+
def body(args = {}, &block)
|
45
|
+
build_base_component :body, args, &block
|
46
|
+
end
|
47
|
+
|
48
|
+
# Builds the Footer component.
|
49
|
+
#
|
50
|
+
# @param [Hash] args
|
51
|
+
# @option args [String] :id
|
52
|
+
# @option args [String] :class
|
53
|
+
# @option args [Hash] :data
|
54
|
+
# @return [String]
|
55
|
+
#
|
56
|
+
def footer(args = {}, &block)
|
57
|
+
build_base_component :footer, args, &block
|
58
|
+
end
|
59
|
+
|
60
|
+
# Builds a Title component.
|
61
|
+
#
|
62
|
+
# @param [Hash] args
|
63
|
+
# @option args [String] :id
|
64
|
+
# @option args [String] :class
|
65
|
+
# @option args [Hash] :data
|
66
|
+
# @return [String]
|
67
|
+
#
|
68
|
+
def title(args = {}, &block)
|
69
|
+
build_sub_component config(:card_title, :h5), :title, args, &block
|
70
|
+
end
|
71
|
+
|
72
|
+
# Builds a Text component.
|
73
|
+
#
|
74
|
+
# @param [Hash] args
|
75
|
+
# @option args [String] :id
|
76
|
+
# @option args [String] :class
|
77
|
+
# @option args [Hash] :data
|
78
|
+
# @return [String]
|
79
|
+
#
|
80
|
+
def text(args = {}, &block)
|
81
|
+
build_sub_component config(:card_text, :p), :text, args, &block
|
82
|
+
end
|
83
|
+
|
84
|
+
# Builds a Img Overlay component.
|
85
|
+
#
|
86
|
+
# @param [Hash] args
|
87
|
+
# @option args [String] :id
|
88
|
+
# @option args [String] :class
|
89
|
+
# @option args [Hash] :data
|
90
|
+
# @return [String]
|
91
|
+
#
|
92
|
+
def image_overlay(args = {}, &block)
|
93
|
+
build_base_component 'img-overlay', args, &block
|
94
|
+
end
|
95
|
+
|
96
|
+
# Outputs the Object in its String representation.
|
97
|
+
#
|
98
|
+
# @return [String]
|
99
|
+
#
|
100
|
+
def to_s
|
101
|
+
content_tag :div, id: @id, class: "card #{@class}", data: @data do
|
102
|
+
@content.call(self)
|
103
|
+
end
|
104
|
+
end
|
105
|
+
|
106
|
+
private
|
107
|
+
|
108
|
+
# Used to build basic DIV components.
|
109
|
+
#
|
110
|
+
# @param [String] type
|
111
|
+
# @param [Mixed] args
|
112
|
+
# @return [String]
|
113
|
+
#
|
114
|
+
def build_base_component(type, args, &block)
|
115
|
+
build_sub_component :div, type, args, &block
|
116
|
+
end
|
117
|
+
|
118
|
+
# Used to build various DOM components.
|
119
|
+
#
|
120
|
+
# @param [Symbol] tag
|
121
|
+
# @param [String] type
|
122
|
+
# @param [Hash] args
|
123
|
+
# @option args [String] :id
|
124
|
+
# @option args [String] :class
|
125
|
+
# @option args [Hash] :data
|
126
|
+
# @return [String]
|
127
|
+
#
|
128
|
+
def build_sub_component(tag, type, args, &block)
|
129
|
+
id = args.fetch(:id, '')
|
130
|
+
klass = args.fetch(:class, '')
|
131
|
+
data = args.fetch(:data, {})
|
132
|
+
|
133
|
+
content_tag(
|
134
|
+
tag,
|
135
|
+
id: id,
|
136
|
+
class: "card-#{type} #{klass}",
|
137
|
+
data: data,
|
138
|
+
&block
|
139
|
+
)
|
140
|
+
end
|
141
|
+
end
|
142
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Creates a Card Column Component.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class CardColumn < CardGrouping
|
6
|
+
# String representation of the object.
|
7
|
+
#
|
8
|
+
#
|
9
|
+
def to_s
|
10
|
+
content_tag :div, id: @id, class: "card-columns #{@class}", data: @data do
|
11
|
+
@content.call(self)
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Creates a Card Deck component
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class CardDeck < CardGrouping
|
6
|
+
# String representation of the object.
|
7
|
+
#
|
8
|
+
#
|
9
|
+
def to_s
|
10
|
+
content_tag :div, id: @id, class: "card-deck #{@class}", data: @data do
|
11
|
+
@content.call(self)
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Creates a Card Group component
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class CardGroup < CardGrouping
|
6
|
+
# String representation of the object
|
7
|
+
#
|
8
|
+
#
|
9
|
+
def to_s
|
10
|
+
content_tag :div, id: @id, class: "card-group #{@class}", data: @data do
|
11
|
+
@content.call(self)
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,33 @@
|
|
1
|
+
module Bootstrap4Helper
|
2
|
+
# Class for other Card group type components to inherit from.
|
3
|
+
#
|
4
|
+
#
|
5
|
+
class CardGrouping < Component
|
6
|
+
# Used to initialize a new Card Grouping.
|
7
|
+
#
|
8
|
+
# @param [Class] template
|
9
|
+
# @param [Hash] opts
|
10
|
+
# @option opts [String] :id
|
11
|
+
# @option opts [String] :class
|
12
|
+
# @option opts [Hash] :data
|
13
|
+
# @return [Card]
|
14
|
+
#
|
15
|
+
def initialize(template, opts = {}, &block)
|
16
|
+
super(template)
|
17
|
+
|
18
|
+
@id = opts.fetch(:id, '')
|
19
|
+
@class = opts.fetch(:class, '')
|
20
|
+
@data = opts.fetch(:data, nil)
|
21
|
+
@content = block || proc { '' }
|
22
|
+
end
|
23
|
+
|
24
|
+
# Builds a `Card` for the grouping class.
|
25
|
+
#
|
26
|
+
# @param [Hash] opts
|
27
|
+
# @return [Card]
|
28
|
+
#
|
29
|
+
def card(opts = {}, &block)
|
30
|
+
Card.new(@template, opts, &block)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|