bs5 0.0.27 → 0.0.28
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/components/bs5/carousel/caption_component.html.erb +3 -0
- data/app/components/bs5/carousel/caption_component.rb +8 -0
- data/app/components/bs5/carousel/item_component.html.erb +4 -0
- data/app/components/bs5/carousel/item_component.rb +74 -0
- data/app/components/bs5/carousel_component.html.erb +30 -0
- data/app/components/bs5/carousel_component.rb +60 -0
- data/app/helpers/bs5/components_helper.rb +2 -1
- data/app/views/bs5/examples/carousel/_dark_variant.html.erb +2 -0
- data/app/views/bs5/examples/carousel/_examples.html.erb +13 -0
- data/app/views/bs5/examples/carousel/dark_variant/snippet1.html.erb +25 -0
- data/app/views/bs5/examples/carousel/examples/snippet1.html.erb +13 -0
- data/app/views/bs5/examples/carousel/examples/snippet2.html.erb +13 -0
- data/app/views/bs5/examples/carousel/examples/snippet3.html.erb +13 -0
- data/app/views/bs5/examples/carousel/examples/snippet4.html.erb +25 -0
- data/app/views/bs5/examples/carousel/examples/snippet5.html.erb +13 -0
- data/app/views/bs5/examples/carousel/examples/snippet6.html.erb +13 -0
- data/app/views/bs5/pages/carousel.html.erb +3 -0
- data/app/views/layouts/bs5/pages.html.erb +1 -0
- data/lib/bs5/version.rb +1 -1
- metadata +18 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 215200d1f6820e7e163cbd6b214f9952645e225f535c45a34254ef53f445480a
|
4
|
+
data.tar.gz: cc2f9daf0107719ee613670620ddb42e42a08b995bb32a7348003f9b74761584
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8361ad156b1c5aa5a2e8d2e85482a891792fe28693aff0ab0de36a7acc258d1818934512a7b9c76d4be17de2e96f0c6207affa1f5765add53cff6bc83e999b74
|
7
|
+
data.tar.gz: 978c438199e216476b87a1eef92dcab0b9b8d828daca289c4eb7cc8b97fa802f75ef4620c06541870caeca578845303eb874fde87988036bea462918e5d0fc97
|
@@ -0,0 +1,74 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
module Carousel
|
5
|
+
class ItemComponent < ViewComponent::Base
|
6
|
+
include ViewComponent::SlotableV2
|
7
|
+
using HashRefinement
|
8
|
+
|
9
|
+
COMPONENT_OPTIONS = %i[interval].freeze
|
10
|
+
|
11
|
+
renders_one :caption, Bs5::Carousel::CaptionComponent
|
12
|
+
|
13
|
+
attr_accessor :active
|
14
|
+
|
15
|
+
def initialize(options = {})
|
16
|
+
@options = options.symbolize_keys
|
17
|
+
extract_options
|
18
|
+
end
|
19
|
+
|
20
|
+
def active?
|
21
|
+
active
|
22
|
+
end
|
23
|
+
|
24
|
+
private
|
25
|
+
|
26
|
+
def extract_options
|
27
|
+
extract_component_options
|
28
|
+
end
|
29
|
+
|
30
|
+
def extract_component_options
|
31
|
+
@component_options = @options.extract!(*COMPONENT_OPTIONS)
|
32
|
+
end
|
33
|
+
|
34
|
+
def component_attributes
|
35
|
+
{ class: component_classes,
|
36
|
+
data: @component_options.prefix_keys_with_bs }
|
37
|
+
end
|
38
|
+
|
39
|
+
def component_classes
|
40
|
+
class_names = %w[carousel-item]
|
41
|
+
class_names << 'active' if active?
|
42
|
+
|
43
|
+
class_names
|
44
|
+
end
|
45
|
+
|
46
|
+
def content
|
47
|
+
set_element_class_names
|
48
|
+
element.to_html.html_safe # rubocop:disable Rails/OutputSafety
|
49
|
+
end
|
50
|
+
|
51
|
+
def set_element_class_names
|
52
|
+
class_names = Array(element[:class])
|
53
|
+
class_names << element_classes
|
54
|
+
element[:class] = class_names.join(' ')
|
55
|
+
end
|
56
|
+
|
57
|
+
def element_classes
|
58
|
+
%w[d-block w-100]
|
59
|
+
end
|
60
|
+
|
61
|
+
def element
|
62
|
+
@element ||= begin
|
63
|
+
if (elements = Nokogiri::HTML::DocumentFragment.parse(@content).elements).one?
|
64
|
+
elements.first
|
65
|
+
end
|
66
|
+
end
|
67
|
+
end
|
68
|
+
|
69
|
+
def element?
|
70
|
+
!!element
|
71
|
+
end
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<%= tag.div(component_attributes) do %>
|
2
|
+
<% items.each_with_index do |item, index| %>
|
3
|
+
<% item.active = index.zero? %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% if indicators? %>
|
7
|
+
<ol class="carousel-indicators">
|
8
|
+
<% items.each_with_index do |item, index| %>
|
9
|
+
<li data-bs-target="#<%= id %>" data-bs-slide-to="<%= index %>" class="<%= item.active? ? 'active' : '' %>"></li>
|
10
|
+
<% end %>
|
11
|
+
</ol>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<div class="carousel-inner">
|
15
|
+
<% items.each_with_index do |item, index| %>
|
16
|
+
<%= item %>
|
17
|
+
<% end %>
|
18
|
+
</div>
|
19
|
+
|
20
|
+
<% if controls? %>
|
21
|
+
<a class="carousel-control-prev" href="#<%= id %>" role="button" data-bs-slide="prev">
|
22
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
23
|
+
<span class="visually-hidden">Previous</span>
|
24
|
+
</a>
|
25
|
+
<a class="carousel-control-next" href="#<%= id %>" role="button" data-bs-slide="next">
|
26
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
27
|
+
<span class="visually-hidden">Next</span>
|
28
|
+
</a>
|
29
|
+
<% end %>
|
30
|
+
<% end %>
|
@@ -0,0 +1,60 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class CarouselComponent < ViewComponent::Base
|
5
|
+
include ComponentsHelper
|
6
|
+
include ViewComponent::SlotableV2
|
7
|
+
using HashRefinement
|
8
|
+
|
9
|
+
CAROUSEL_OPTIONS = %i[interval keyboard pause slide wrap touch].freeze
|
10
|
+
|
11
|
+
renders_many :items, Bs5::Carousel::ItemComponent
|
12
|
+
|
13
|
+
def initialize(options = {})
|
14
|
+
@options = options.symbolize_keys
|
15
|
+
extract_options
|
16
|
+
end
|
17
|
+
|
18
|
+
private
|
19
|
+
|
20
|
+
def extract_options
|
21
|
+
@controls = @options.delete(:controls)
|
22
|
+
@indicators = @options.delete(:indicators)
|
23
|
+
@crossfade = @options.delete(:crossfade)
|
24
|
+
@dark = @options.delete(:dark)
|
25
|
+
|
26
|
+
extract_carousel_options
|
27
|
+
end
|
28
|
+
|
29
|
+
def extract_carousel_options
|
30
|
+
@carousel_options = @options.extract!(*CAROUSEL_OPTIONS)
|
31
|
+
end
|
32
|
+
|
33
|
+
def id
|
34
|
+
"carousel-#{object_id}"
|
35
|
+
end
|
36
|
+
|
37
|
+
def items_count
|
38
|
+
items.size
|
39
|
+
end
|
40
|
+
|
41
|
+
def component_attributes
|
42
|
+
{ class: component_class,
|
43
|
+
id: id,
|
44
|
+
data: @carousel_options.merge(ride: :carousel).prefix_keys_with_bs }
|
45
|
+
end
|
46
|
+
|
47
|
+
def component_class
|
48
|
+
class_names = %w[carousel slide]
|
49
|
+
class_names << %w[carousel-fade] if crossfade?
|
50
|
+
class_names << %w[carousel-dark] if dark?
|
51
|
+
class_names.join(' ')
|
52
|
+
end
|
53
|
+
|
54
|
+
%i[controls indicators crossfade dark].each do |name|
|
55
|
+
define_method("#{name}?") do
|
56
|
+
!instance_variable_get("@#{name}").nil?
|
57
|
+
end
|
58
|
+
end
|
59
|
+
end
|
60
|
+
end
|
@@ -2,7 +2,8 @@
|
|
2
2
|
|
3
3
|
module Bs5
|
4
4
|
module ComponentsHelper
|
5
|
-
COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar
|
5
|
+
COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar
|
6
|
+
carousel close_button
|
6
7
|
dropdown list_group modal spinner toast toast_container].freeze
|
7
8
|
|
8
9
|
COMPONENTS.each do |name|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<h2>Examples</h2>
|
2
|
+
<h3>Slides only</h3>
|
3
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet1') %>
|
4
|
+
<h3>With controls</h3>
|
5
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet2') %>
|
6
|
+
<h3>With indicators</h3>
|
7
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet3') %>
|
8
|
+
<h3>With captions</h3>
|
9
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet4') %>
|
10
|
+
<h3>Crossfade</h3>
|
11
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet5') %>
|
12
|
+
<h3>Individual <code>.carousel-item</code> interval</h3>
|
13
|
+
<%= bs5_example(snippet: 'carousel/examples/snippet6') %>
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= bs5_carousel(controls: true, indicators: true, dark: true) do |c| %>
|
2
|
+
<% c.item do |i| %>
|
3
|
+
<%= image_tag 'https://picsum.photos/id/131/800/400?grayscale' %>
|
4
|
+
<%= i.caption do %>
|
5
|
+
<h5>First slide label</h5>
|
6
|
+
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do |i| %>
|
11
|
+
<%= image_tag 'https://picsum.photos/id/383/800/400?grayscale' %>
|
12
|
+
<%= i.caption do %>
|
13
|
+
<h5>Second slide label</h5>
|
14
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
<% c.item do |i| %>
|
19
|
+
<%= image_tag 'https://picsum.photos/id/130/800/400' %>
|
20
|
+
<%= i.caption do %>
|
21
|
+
<h5>Third slide label</h5>
|
22
|
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= bs5_carousel do |c| %>
|
2
|
+
<% c.item do %>
|
3
|
+
<%= image_tag 'https://picsum.photos/800/400?random=1' %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% c.item do %>
|
7
|
+
<%= image_tag 'https://picsum.photos/800/400?random=2' %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do %>
|
11
|
+
<%= image_tag 'https://picsum.photos/800/400?random=3' %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= bs5_carousel(controls: true) do |c| %>
|
2
|
+
<% c.item do %>
|
3
|
+
<%= image_tag 'https://picsum.photos/800/400?random=1' %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% c.item do %>
|
7
|
+
<%= image_tag 'https://picsum.photos/800/400?random=2' %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do %>
|
11
|
+
<%= image_tag 'https://picsum.photos/800/400?random=3' %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= bs5_carousel(controls: true, indicators: true) do |c| %>
|
2
|
+
<% c.item do %>
|
3
|
+
<%= image_tag 'https://picsum.photos/800/400?random=1' %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% c.item do %>
|
7
|
+
<%= image_tag 'https://picsum.photos/800/400?random=2' %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do %>
|
11
|
+
<%= image_tag 'https://picsum.photos/800/400?random=3' %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= bs5_carousel(controls: true, indicators: true) do |c| %>
|
2
|
+
<% c.item do |i| %>
|
3
|
+
<%= image_tag 'https://picsum.photos/id/1042/800/400?blur=2' %>
|
4
|
+
<%= i.caption do %>
|
5
|
+
<h5>First slide label</h5>
|
6
|
+
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do |i| %>
|
11
|
+
<%= image_tag 'https://picsum.photos/id/195/800/400?blur=2' %>
|
12
|
+
<%= i.caption do %>
|
13
|
+
<h5>Second slide label</h5>
|
14
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
<% c.item do |i| %>
|
19
|
+
<%= image_tag 'https://picsum.photos/id/960/800/400?blur=2' %>
|
20
|
+
<%= i.caption do %>
|
21
|
+
<h5>Third slide label</h5>
|
22
|
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
|
2
|
+
<% c.item do %>
|
3
|
+
<%= image_tag 'https://picsum.photos/800/400?random=1' %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% c.item do %>
|
7
|
+
<%= image_tag 'https://picsum.photos/800/400?random=2' %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do %>
|
11
|
+
<%= image_tag 'https://picsum.photos/800/400?random=3' %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
|
2
|
+
<% c.item(interval: 10_000) do %>
|
3
|
+
<%= image_tag 'https://picsum.photos/800/400?random=1' %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<% c.item(interval: 2_000) do %>
|
7
|
+
<%= image_tag 'https://picsum.photos/800/400?random=2' %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% c.item do %>
|
11
|
+
<%= image_tag 'https://picsum.photos/800/400?random=3' %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -21,6 +21,7 @@
|
|
21
21
|
<% lg.item(active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
|
22
22
|
<% lg.item(active: current_page?(pages_path('button_group'))) do %><%= link_to 'Button group', pages_path('button_group') %><% end %>
|
23
23
|
<% lg.item(active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
|
24
|
+
<% lg.item(active: current_page?(pages_path('carousel'))) do %><%= link_to 'Carousel', pages_path('carousel') %><% end %>
|
24
25
|
<% lg.item(active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% end %>
|
25
26
|
<% lg.item(active: current_page?(pages_path('dropdowns'))) do %><%= link_to 'Dropdowns', pages_path('dropdowns') %><% end %>
|
26
27
|
<% lg.item(active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
|
data/lib/bs5/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bs5
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.28
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Patrick Baselier
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-12-
|
11
|
+
date: 2020-12-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: nokogiri
|
@@ -141,6 +141,12 @@ files:
|
|
141
141
|
- app/components/bs5/button_to_component.rb
|
142
142
|
- app/components/bs5/button_toolbar_component.html.erb
|
143
143
|
- app/components/bs5/button_toolbar_component.rb
|
144
|
+
- app/components/bs5/carousel/caption_component.html.erb
|
145
|
+
- app/components/bs5/carousel/caption_component.rb
|
146
|
+
- app/components/bs5/carousel/item_component.html.erb
|
147
|
+
- app/components/bs5/carousel/item_component.rb
|
148
|
+
- app/components/bs5/carousel_component.html.erb
|
149
|
+
- app/components/bs5/carousel_component.rb
|
144
150
|
- app/components/bs5/close_button_component.html.erb
|
145
151
|
- app/components/bs5/close_button_component.rb
|
146
152
|
- app/components/bs5/dropdown/item_component.html.erb
|
@@ -229,6 +235,15 @@ files:
|
|
229
235
|
- app/views/bs5/examples/buttons/button_tag/toggle_states/snippet.html.erb
|
230
236
|
- app/views/bs5/examples/buttons/button_to/default/_example.html.erb
|
231
237
|
- app/views/bs5/examples/buttons/button_to/default/snippet.html.erb
|
238
|
+
- app/views/bs5/examples/carousel/_dark_variant.html.erb
|
239
|
+
- app/views/bs5/examples/carousel/_examples.html.erb
|
240
|
+
- app/views/bs5/examples/carousel/dark_variant/snippet1.html.erb
|
241
|
+
- app/views/bs5/examples/carousel/examples/snippet1.html.erb
|
242
|
+
- app/views/bs5/examples/carousel/examples/snippet2.html.erb
|
243
|
+
- app/views/bs5/examples/carousel/examples/snippet3.html.erb
|
244
|
+
- app/views/bs5/examples/carousel/examples/snippet4.html.erb
|
245
|
+
- app/views/bs5/examples/carousel/examples/snippet5.html.erb
|
246
|
+
- app/views/bs5/examples/carousel/examples/snippet6.html.erb
|
232
247
|
- app/views/bs5/examples/close_button/default/_example.html.erb
|
233
248
|
- app/views/bs5/examples/close_button/default/snippet.html.erb
|
234
249
|
- app/views/bs5/examples/close_button/disabled/_example.html.erb
|
@@ -350,6 +365,7 @@ files:
|
|
350
365
|
- app/views/bs5/pages/breadcrumb.html.erb
|
351
366
|
- app/views/bs5/pages/button_group.html.erb
|
352
367
|
- app/views/bs5/pages/buttons.html.erb
|
368
|
+
- app/views/bs5/pages/carousel.html.erb
|
353
369
|
- app/views/bs5/pages/close_button.html.erb
|
354
370
|
- app/views/bs5/pages/collapse.html.erb
|
355
371
|
- app/views/bs5/pages/dropdowns.html.erb
|