bs5 0.0.27 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|