bs5_expandable_list_group 0.1.0
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 +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +192 -0
- data/Rakefile +18 -0
- data/app/assets/config/bs5_expandable_list_group_manifest.js +1 -0
- data/app/assets/stylesheets/bs5_expandable_list_group/application.css +15 -0
- data/app/components/bs5/expandable_list_group_component.html.erb +5 -0
- data/app/components/bs5/expandable_list_group_component.rb +33 -0
- data/app/components/bs5/expandable_list_item_component.html.erb +9 -0
- data/app/components/bs5/expandable_list_item_component.rb +52 -0
- data/app/components/bs5/expandable_list_item_header_actions_component.html.erb +12 -0
- data/app/components/bs5/expandable_list_item_header_actions_component.rb +14 -0
- data/app/components/bs5/expandable_list_item_header_title_component.html.erb +12 -0
- data/app/components/bs5/expandable_list_item_header_title_component.rb +20 -0
- data/app/controllers/bs5_expandable_list_group/application_controller.rb +4 -0
- data/app/helpers/bs5_expandable_list_group/application_helper.rb +4 -0
- data/app/jobs/bs5_expandable_list_group/application_job.rb +4 -0
- data/app/mailers/bs5_expandable_list_group/application_mailer.rb +6 -0
- data/app/models/bs5_expandable_list_group/application_record.rb +5 -0
- data/app/views/layouts/bs5_expandable_list_group/application.html.erb +15 -0
- data/config/routes.rb +2 -0
- data/lib/bs5_expandable_list_group.rb +7 -0
- data/lib/bs5_expandable_list_group/engine.rb +11 -0
- data/lib/bs5_expandable_list_group/version.rb +3 -0
- data/lib/generators/bs5_expandable_list_group/install/USAGE +8 -0
- data/lib/generators/bs5_expandable_list_group/install/install_generator.rb +17 -0
- data/lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js +34 -0
- data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss +28 -0
- data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_stretchable-items.scss +19 -0
- data/lib/tasks/bs5_expandable_list_group_tasks.rake +4 -0
- data/lib/tasks/ci.rake +3 -0
- metadata +152 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: b3cf656df05f0efc37c63c574dc62e39dfc143911398bc3346f5641a1ac14400
|
4
|
+
data.tar.gz: 1122074157406c6c4a52aa579d59c64fe8162e3c320c5bb03d6dc56b8e5f9b12
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 2e225cb6367f28f3e31123bf1a9af9d6735bf441ef64e5d2276f04ebbfbf6d6b7545f7e00fc64741ca81b293b6273a9363cb802832f39fbc426a7a22998b819e
|
7
|
+
data.tar.gz: 3294f3b18925ebf3f7317bf07f67816e03e4fe54c700a8156de928675c88ec7183a1175de4aeebf738e0ecab9cda4bb0d5f8d971f0651e733121c67135671c3a
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2021 Patrick Baselier
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,192 @@
|
|
1
|
+
# Bootstrap 5 expandable list group
|
2
|
+
|
3
|
+
[](https://travis-ci.org/bazzel/Bs5ExpandableListGroup)
|
4
|
+
|
5
|
+
**Bootstrap 5 expandable list group** gives you a simple API for creating expandable and stretchable list groups. A bit like [Bootstrap 5](https://getbootstrap.com/)'s [Accordion](https://getbootstrap.com/docs/5.0/components/accordion/), [Collapse](https://getbootstrap.com/docs/5.0/components/collapse/) and [List group](https://getbootstrap.com/docs/5.0/components/list-group/) components combined.
|
6
|
+
|
7
|
+
https://user-images.githubusercontent.com/7672/120296188-27170580-c2c8-11eb-936a-a93c16326acb.mp4
|
8
|
+
|
9
|
+
## TL;DR
|
10
|
+
|
11
|
+
```erb
|
12
|
+
<%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
|
13
|
+
<% @posts.each do |post| %>
|
14
|
+
<% c.item do |i| %>
|
15
|
+
<%= i.title { post.title } %>
|
16
|
+
<%= i.body { post.text } %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
<% end %>
|
20
|
+
```
|
21
|
+
|
22
|
+
## Features
|
23
|
+
|
24
|
+
- Choose to show a different title when the item is expanded
|
25
|
+
- Show one or more actions (buttons, links, icons, ...) when hovering over an item
|
26
|
+
- Choose to show a different set of items when the item is expanded
|
27
|
+
- When configured as an *accordion* only one item can expanded
|
28
|
+
- When configured as *expandable* expanded items are shown a little bit bigger as if they come out a bit.
|
29
|
+
|
30
|
+
|
31
|
+
## Prerequisites
|
32
|
+
|
33
|
+
- [Stimulus](https://github.com/hotwired/stimulus-rails) or [Hotwire](https://github.com/hotwired/hotwire-rails) added to your project
|
34
|
+
- [Bootstrap 5](https://getbootstrap.com/) added to your project. There are different ways to do this, but you should use [Yarn](https://getbootstrap.com/docs/5.0/getting-started/download/#rubygems) with Webpacker.
|
35
|
+
|
36
|
+
## Installation
|
37
|
+
|
38
|
+
Add this line to your application's Gemfile:
|
39
|
+
|
40
|
+
```ruby
|
41
|
+
gem 'bs5_expandable_list_group'
|
42
|
+
```
|
43
|
+
|
44
|
+
And then execute:
|
45
|
+
|
46
|
+
```bash
|
47
|
+
$ bundle
|
48
|
+
```
|
49
|
+
|
50
|
+
Run the following command to setup your project to use Bootstrap 5 expandable list group:
|
51
|
+
|
52
|
+
```bash
|
53
|
+
$ bin/rails generate bs5_expandable_list_group:install
|
54
|
+
```
|
55
|
+
|
56
|
+
This copies the required assets to your application directory:
|
57
|
+
|
58
|
+
Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can the following line to your `application.scss` to import them:
|
59
|
+
|
60
|
+
```scss
|
61
|
+
@import "bootstrap";
|
62
|
+
@import "stylesheets/expandable-items";
|
63
|
+
@import "stylesheets/stretchable-items";
|
64
|
+
```
|
65
|
+
|
66
|
+
When you use Webpacker for your CSS, you should move these added stylesheets to the proper location (propably somewhere in `app/javascript` and import them in `application.scss` (or alike) located there.
|
67
|
+
|
68
|
+
## Usage
|
69
|
+
|
70
|
+
To render a **Bootstrap 5 expandable list group** you use `render(Bs5::ExpandableListGroupComponent.new)` and pass it a block for rendering every list item.
|
71
|
+
|
72
|
+
Let's say, in the `index` action of your `PostsController`, you have assigned `@posts` that contains a list of `Post` instances. To render these `@posts` in a **Bootstrap 5 expandable list group**, you put the following code in your `index.html.erb` template:
|
73
|
+
|
74
|
+
```erb
|
75
|
+
<%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
|
76
|
+
<% @posts.each do |post| %>
|
77
|
+
<% c.item do |i| %>
|
78
|
+
<%= i.title { post.title } %>
|
79
|
+
<%= i.body { post.text } %>
|
80
|
+
<% end %>
|
81
|
+
<% end %>
|
82
|
+
<% end %>
|
83
|
+
```
|
84
|
+
|
85
|
+
This will render a [List group](https://getbootstrap.com/docs/5.0/components/list-group/) showing the title of every post. When you click a title, it will expand the item and the text of the post will be shown.
|
86
|
+
|
87
|
+
You are not limited to passing a simple attribute as title or body:
|
88
|
+
|
89
|
+
```erb
|
90
|
+
...
|
91
|
+
<% c.item do |i| %>
|
92
|
+
<%= i.title do %>
|
93
|
+
<div class="ms-2 me-auto">
|
94
|
+
<div class="fw-bold"><%= post.title %></div>
|
95
|
+
<%= post.author_name %>
|
96
|
+
</div>
|
97
|
+
<span class="badge bg-primary rounded-pill"><%= post.comments_count %></span>
|
98
|
+
<% end %>
|
99
|
+
<%= i.body { ... } %>
|
100
|
+
<% end %>
|
101
|
+
```
|
102
|
+
|
103
|
+
### Show different titles
|
104
|
+
|
105
|
+
You can show a different title when the item is expanded then when it is collapsed. Use the `.collapsed` and `.expanded` methods on the `title` object:
|
106
|
+
|
107
|
+
```erb
|
108
|
+
...
|
109
|
+
<% c.item do |i| %>
|
110
|
+
<%= i.title do |t| %>
|
111
|
+
<%= t.collapsed { 'Collapsed title' } %>
|
112
|
+
<%= t.expanded { 'Expanded title' } %>
|
113
|
+
<% end %>
|
114
|
+
<%= i.body { ... } %>
|
115
|
+
<% end %>
|
116
|
+
```
|
117
|
+
|
118
|
+
### Show actions
|
119
|
+
|
120
|
+
Actions can be used for defining links or buttons that will become visible when hovering over an item and are aligned to the right. When the item is expanded, the actions are permanently visible.
|
121
|
+
|
122
|
+
You can choose to either show one set of actions of using a different set when the item is expanded.
|
123
|
+
|
124
|
+
To show one set:
|
125
|
+
|
126
|
+
```erb
|
127
|
+
...
|
128
|
+
<% c.item do |i| %>
|
129
|
+
<%= i.title do |t| %>
|
130
|
+
...
|
131
|
+
<% end %>
|
132
|
+
<% i.actions do %>
|
133
|
+
<%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
|
134
|
+
<%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
|
135
|
+
<% end %>
|
136
|
+
<%= i.body { ... } %>
|
137
|
+
<% end %>
|
138
|
+
```
|
139
|
+
|
140
|
+
To show a different set on hovering:
|
141
|
+
|
142
|
+
```erb
|
143
|
+
...
|
144
|
+
<% c.item do |i| %>
|
145
|
+
<%= i.title do |t| %>
|
146
|
+
...
|
147
|
+
<% end %>
|
148
|
+
<% i.actions do |a| %>
|
149
|
+
<% a.collapsed %>
|
150
|
+
<%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
|
151
|
+
<%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
|
152
|
+
<% end %>
|
153
|
+
<% a.expanded %>
|
154
|
+
<%= link_to 'Details', post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
|
155
|
+
<%= link_to 'Comment' ... %>
|
156
|
+
<%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
|
157
|
+
<%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
|
158
|
+
<% end %>
|
159
|
+
<% end %>
|
160
|
+
<%= i.body { ... } %>
|
161
|
+
<% end %>
|
162
|
+
```
|
163
|
+
|
164
|
+
### Passing options
|
165
|
+
|
166
|
+
The following options can be passed to `Bs5::ExpandableListGroupComponent.new`:
|
167
|
+
|
168
|
+
| name | default | description |
|
169
|
+
|---|---|---|
|
170
|
+
| `id` | | is used to assign an id HTML attribute to the rendered container |
|
171
|
+
| `class` | | is added to the class attribute of the rendered container |
|
172
|
+
| `accordion` | `false` | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded |
|
173
|
+
| `expandable` | `false` | Expanded items are shown a little bit bigger as if they come out a bit|
|
174
|
+
|
175
|
+
|
176
|
+
Example:
|
177
|
+
|
178
|
+
```erb
|
179
|
+
<%= render(Bs5::ExpandableListGroupComponent.new(accordion: true, expandable: true) do |c| %>
|
180
|
+
...
|
181
|
+
<% end %>
|
182
|
+
```
|
183
|
+
|
184
|
+
## Running tests
|
185
|
+
|
186
|
+
```bash
|
187
|
+
$ bin/rails app:ci
|
188
|
+
```
|
189
|
+
|
190
|
+
## License
|
191
|
+
|
192
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
require 'bundler/setup'
|
2
|
+
|
3
|
+
APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
|
4
|
+
load 'rails/tasks/engine.rake'
|
5
|
+
|
6
|
+
load 'rails/tasks/statistics.rake'
|
7
|
+
|
8
|
+
require 'bundler/gem_tasks'
|
9
|
+
|
10
|
+
require 'rake/testtask'
|
11
|
+
|
12
|
+
Rake::TestTask.new(:test) do |t|
|
13
|
+
t.libs << 'test'
|
14
|
+
t.pattern = 'test/**/*_test.rb'
|
15
|
+
t.verbose = false
|
16
|
+
end
|
17
|
+
|
18
|
+
task default: :test
|
@@ -0,0 +1 @@
|
|
1
|
+
//= link_directory ../stylesheets/bs5_expandable_list_group .css
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
10
|
+
* files in this directory. Styles in this file should be added after the last require_* statement.
|
11
|
+
* It is generally better to create a new file per style scope.
|
12
|
+
*
|
13
|
+
*= require_tree .
|
14
|
+
*= require_self
|
15
|
+
*/
|
@@ -0,0 +1,33 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class ExpandableListGroupComponent < ViewComponent::Base
|
5
|
+
renders_many :items, lambda {
|
6
|
+
ExpandableListItemComponent.new(parent_id: accordion? && id, stretchable: stretchable?)
|
7
|
+
}
|
8
|
+
|
9
|
+
attr_reader :accordion, :stretchable
|
10
|
+
|
11
|
+
def initialize(options = {})
|
12
|
+
@accordion = options.delete(:accordion)
|
13
|
+
@stretchable = options.delete(:stretchable)
|
14
|
+
@id = options[:id]
|
15
|
+
@options = options
|
16
|
+
end
|
17
|
+
|
18
|
+
private
|
19
|
+
|
20
|
+
def id
|
21
|
+
@id || "list-group-#{object_id}"
|
22
|
+
end
|
23
|
+
|
24
|
+
def component_class
|
25
|
+
class_names = ['list-group']
|
26
|
+
class_names << @options[:class]
|
27
|
+
class_names
|
28
|
+
end
|
29
|
+
|
30
|
+
alias accordion? accordion
|
31
|
+
alias stretchable? stretchable
|
32
|
+
end
|
33
|
+
end
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<%= tag.div(class: "list-group-item expandable-item", data: component_data_options) do %>
|
2
|
+
<div class="expandable-item-header">
|
3
|
+
<%= title %>
|
4
|
+
<%= actions %>
|
5
|
+
</div>
|
6
|
+
<%= tag.div(id: target_id, class: "expandable-item-body collapse", data: body_data_options) do %>
|
7
|
+
<%= body %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
@@ -0,0 +1,52 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class ExpandableListItemComponent < ViewComponent::Base
|
5
|
+
renders_one :title, lambda {
|
6
|
+
ExpandableListItemHeaderTitleComponent.new(target_id: target_id)
|
7
|
+
}
|
8
|
+
renders_one :actions, ExpandableListItemHeaderActionsComponent
|
9
|
+
renders_one :body
|
10
|
+
|
11
|
+
attr_reader :parent_id, :stretchable
|
12
|
+
|
13
|
+
def initialize(options = {})
|
14
|
+
@parent_id = options.delete(:parent_id)
|
15
|
+
@stretchable = options.delete(:stretchable)
|
16
|
+
@options = options
|
17
|
+
end
|
18
|
+
|
19
|
+
private
|
20
|
+
|
21
|
+
def target_id
|
22
|
+
"expandable-list-item-#{object_id}"
|
23
|
+
end
|
24
|
+
|
25
|
+
def body_data_options
|
26
|
+
{}.tap do |h|
|
27
|
+
h['bs-parent'] = "##{parent_id}" if parent_id
|
28
|
+
end
|
29
|
+
end
|
30
|
+
|
31
|
+
def component_data_options
|
32
|
+
{}.tap do |h|
|
33
|
+
h.merge!(stimulus_attributes) if stretchable?
|
34
|
+
end
|
35
|
+
end
|
36
|
+
|
37
|
+
def stimulus_attributes
|
38
|
+
{
|
39
|
+
controller: stimulus_controller,
|
40
|
+
"#{stimulus_controller}-target": 'container',
|
41
|
+
"#{stimulus_controller}-item-class": 'stretchable-item',
|
42
|
+
"#{stimulus_controller}-stretched-class": 'stretched'
|
43
|
+
}
|
44
|
+
end
|
45
|
+
|
46
|
+
def stimulus_controller
|
47
|
+
'stretchable-item'
|
48
|
+
end
|
49
|
+
|
50
|
+
alias stretchable? stretchable
|
51
|
+
end
|
52
|
+
end
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<div class="expandable-item-header-actions">
|
2
|
+
<% if variable_actions? %>
|
3
|
+
<%= tag.div(class: "expandable-item-header-actions-collaped") do %>
|
4
|
+
<%= collapsed %>
|
5
|
+
<% end %>
|
6
|
+
<%= tag.div(class: "expandable-item-header-actions-expanded") do %>
|
7
|
+
<%= expanded %>
|
8
|
+
<% end %>
|
9
|
+
<% else %>
|
10
|
+
<%= content %>
|
11
|
+
<% end %>
|
12
|
+
</div>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" } ) do %>
|
2
|
+
<% if variable_title? %>
|
3
|
+
<%= tag.div(class: "expandable-item-header-title-collaped") do %>
|
4
|
+
<%= collapsed %>
|
5
|
+
<% end %>
|
6
|
+
<%= tag.div(class: "expandable-item-header-title-expanded") do %>
|
7
|
+
<%= expanded %>
|
8
|
+
<% end %>
|
9
|
+
<% else %>
|
10
|
+
<%= content %>
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class ExpandableListItemHeaderTitleComponent < ViewComponent::Base
|
5
|
+
renders_one :collapsed
|
6
|
+
renders_one :expanded
|
7
|
+
|
8
|
+
attr_reader :target_id
|
9
|
+
|
10
|
+
def initialize(target_id:)
|
11
|
+
@target_id = target_id
|
12
|
+
end
|
13
|
+
|
14
|
+
private
|
15
|
+
|
16
|
+
def variable_title?
|
17
|
+
collapsed || expanded
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Bs5 expandable list group</title>
|
5
|
+
<%= csrf_meta_tags %>
|
6
|
+
<%= csp_meta_tag %>
|
7
|
+
|
8
|
+
<%= stylesheet_link_tag "bs5_expandable_list_group/application", media: "all" %>
|
9
|
+
</head>
|
10
|
+
<body>
|
11
|
+
|
12
|
+
<%= yield %>
|
13
|
+
|
14
|
+
</body>
|
15
|
+
</html>
|
data/config/routes.rb
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
class Bs5ExpandableListGroup::InstallGenerator < Rails::Generators::Base
|
2
|
+
source_root File.expand_path('templates', __dir__)
|
3
|
+
|
4
|
+
def list_prerequisites
|
5
|
+
# We can add functionality to install hotwire automatically.
|
6
|
+
exit if no?('Do you have Stimulus or Hotwire installed? [Y/n]')
|
7
|
+
exit if no?('Do you have Bootstrap 5 installed and configured properly? [Y/n]')
|
8
|
+
end
|
9
|
+
|
10
|
+
def copy_js
|
11
|
+
directory 'controllers', 'app/javascript/controllers'
|
12
|
+
end
|
13
|
+
|
14
|
+
def copy_css
|
15
|
+
directory 'stylesheets', 'app/javascript/stylesheets'
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import { Controller } from "stimulus";
|
2
|
+
|
3
|
+
const SHOW_EVENT = "show.bs.collapse";
|
4
|
+
const HIDE_EVENT = "hide.bs.collapse";
|
5
|
+
|
6
|
+
export default class extends Controller {
|
7
|
+
static targets = ["container"];
|
8
|
+
static classes = ["item", "stretched"];
|
9
|
+
|
10
|
+
initialize() {
|
11
|
+
this.onShow = this._onShow.bind(this);
|
12
|
+
this.onHide = this._onHide.bind(this);
|
13
|
+
this.contentNode = this.element.querySelector(".collapse");
|
14
|
+
}
|
15
|
+
|
16
|
+
connect() {
|
17
|
+
this.containerTarget.classList.add(this.itemClass);
|
18
|
+
this.contentNode.addEventListener(SHOW_EVENT, this.onShow);
|
19
|
+
this.contentNode.addEventListener(HIDE_EVENT, this.onHide);
|
20
|
+
}
|
21
|
+
|
22
|
+
disconnect() {
|
23
|
+
this.contentNode.removeEventListener(SHOW_EVENT, this.onShow);
|
24
|
+
this.contentNode.removeEventListener(HIDE_EVENT, this.onHide);
|
25
|
+
}
|
26
|
+
|
27
|
+
_onShow() {
|
28
|
+
this.containerTarget.classList.add(this.stretchedClass);
|
29
|
+
}
|
30
|
+
|
31
|
+
_onHide() {
|
32
|
+
this.containerTarget.classList.remove(this.stretchedClass);
|
33
|
+
}
|
34
|
+
}
|
data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
.expandable-item {
|
2
|
+
&-header {
|
3
|
+
position: relative;
|
4
|
+
cursor: pointer;
|
5
|
+
|
6
|
+
&-actions {
|
7
|
+
position: absolute;
|
8
|
+
top: 0;
|
9
|
+
right: 0;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
&:hover &-header-actions,
|
14
|
+
&-header-title[aria-expanded="true"] &-header-title-expanded,
|
15
|
+
&-header-title:not([aria-expanded="true"]) &-header-title-collaped,
|
16
|
+
&-header-title[aria-expanded="true"] + &-header-actions,
|
17
|
+
&-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded {
|
18
|
+
display: revert;
|
19
|
+
}
|
20
|
+
|
21
|
+
&-header &-header-actions,
|
22
|
+
&-header-title[aria-expanded="true"] &-header-title-collaped,
|
23
|
+
&-header-title:not([aria-expanded="true"]) &-header-title-expanded,
|
24
|
+
&-header-actions-expanded,
|
25
|
+
&-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collaped {
|
26
|
+
display: none;
|
27
|
+
}
|
28
|
+
}
|
data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_stretchable-items.scss
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
$stretched-item-padding-x: (-1 * $grid-gutter-width) !default;
|
2
|
+
$stretched-item-padding-y: (-1 * $stretched-item-padding-x) !default;
|
3
|
+
|
4
|
+
.stretchable-item {
|
5
|
+
transition: all .2s;
|
6
|
+
|
7
|
+
&.stretched {
|
8
|
+
margin: $stretched-item-padding-y $stretched-item-padding-x;
|
9
|
+
@extend .shadow-lg;
|
10
|
+
}
|
11
|
+
|
12
|
+
&:not(.stretched) {
|
13
|
+
@extend .shadow-sm;
|
14
|
+
|
15
|
+
&:hover {
|
16
|
+
@extend .shadow;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
data/lib/tasks/ci.rake
ADDED
metadata
ADDED
@@ -0,0 +1,152 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: bs5_expandable_list_group
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Patrick Baselier
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2021-06-01 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 6.1.3
|
20
|
+
- - ">="
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: 6.1.3.2
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - "~>"
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 6.1.3
|
30
|
+
- - ">="
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: 6.1.3.2
|
33
|
+
- !ruby/object:Gem::Dependency
|
34
|
+
name: view_component
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
36
|
+
requirements:
|
37
|
+
- - "~>"
|
38
|
+
- !ruby/object:Gem::Version
|
39
|
+
version: '2.32'
|
40
|
+
type: :runtime
|
41
|
+
prerelease: false
|
42
|
+
version_requirements: !ruby/object:Gem::Requirement
|
43
|
+
requirements:
|
44
|
+
- - "~>"
|
45
|
+
- !ruby/object:Gem::Version
|
46
|
+
version: '2.32'
|
47
|
+
- !ruby/object:Gem::Dependency
|
48
|
+
name: capybara
|
49
|
+
requirement: !ruby/object:Gem::Requirement
|
50
|
+
requirements:
|
51
|
+
- - "~>"
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: 3.35.3
|
54
|
+
type: :development
|
55
|
+
prerelease: false
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
57
|
+
requirements:
|
58
|
+
- - "~>"
|
59
|
+
- !ruby/object:Gem::Version
|
60
|
+
version: 3.35.3
|
61
|
+
- !ruby/object:Gem::Dependency
|
62
|
+
name: rspec-rails
|
63
|
+
requirement: !ruby/object:Gem::Requirement
|
64
|
+
requirements:
|
65
|
+
- - "~>"
|
66
|
+
- !ruby/object:Gem::Version
|
67
|
+
version: 5.0.1
|
68
|
+
type: :development
|
69
|
+
prerelease: false
|
70
|
+
version_requirements: !ruby/object:Gem::Requirement
|
71
|
+
requirements:
|
72
|
+
- - "~>"
|
73
|
+
- !ruby/object:Gem::Version
|
74
|
+
version: 5.0.1
|
75
|
+
- !ruby/object:Gem::Dependency
|
76
|
+
name: sqlite3
|
77
|
+
requirement: !ruby/object:Gem::Requirement
|
78
|
+
requirements:
|
79
|
+
- - ">="
|
80
|
+
- !ruby/object:Gem::Version
|
81
|
+
version: '0'
|
82
|
+
type: :development
|
83
|
+
prerelease: false
|
84
|
+
version_requirements: !ruby/object:Gem::Requirement
|
85
|
+
requirements:
|
86
|
+
- - ">="
|
87
|
+
- !ruby/object:Gem::Version
|
88
|
+
version: '0'
|
89
|
+
description: Description of Bs5ExpandableListGroup.
|
90
|
+
email:
|
91
|
+
- patrick.baselier@gmail.com
|
92
|
+
executables: []
|
93
|
+
extensions: []
|
94
|
+
extra_rdoc_files: []
|
95
|
+
files:
|
96
|
+
- MIT-LICENSE
|
97
|
+
- README.md
|
98
|
+
- Rakefile
|
99
|
+
- app/assets/config/bs5_expandable_list_group_manifest.js
|
100
|
+
- app/assets/stylesheets/bs5_expandable_list_group/application.css
|
101
|
+
- app/components/bs5/expandable_list_group_component.html.erb
|
102
|
+
- app/components/bs5/expandable_list_group_component.rb
|
103
|
+
- app/components/bs5/expandable_list_item_component.html.erb
|
104
|
+
- app/components/bs5/expandable_list_item_component.rb
|
105
|
+
- app/components/bs5/expandable_list_item_header_actions_component.html.erb
|
106
|
+
- app/components/bs5/expandable_list_item_header_actions_component.rb
|
107
|
+
- app/components/bs5/expandable_list_item_header_title_component.html.erb
|
108
|
+
- app/components/bs5/expandable_list_item_header_title_component.rb
|
109
|
+
- app/controllers/bs5_expandable_list_group/application_controller.rb
|
110
|
+
- app/helpers/bs5_expandable_list_group/application_helper.rb
|
111
|
+
- app/jobs/bs5_expandable_list_group/application_job.rb
|
112
|
+
- app/mailers/bs5_expandable_list_group/application_mailer.rb
|
113
|
+
- app/models/bs5_expandable_list_group/application_record.rb
|
114
|
+
- app/views/layouts/bs5_expandable_list_group/application.html.erb
|
115
|
+
- config/routes.rb
|
116
|
+
- lib/bs5_expandable_list_group.rb
|
117
|
+
- lib/bs5_expandable_list_group/engine.rb
|
118
|
+
- lib/bs5_expandable_list_group/version.rb
|
119
|
+
- lib/generators/bs5_expandable_list_group/install/USAGE
|
120
|
+
- lib/generators/bs5_expandable_list_group/install/install_generator.rb
|
121
|
+
- lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js
|
122
|
+
- lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss
|
123
|
+
- lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_stretchable-items.scss
|
124
|
+
- lib/tasks/bs5_expandable_list_group_tasks.rake
|
125
|
+
- lib/tasks/ci.rake
|
126
|
+
homepage: https://github.com/bazzel/Bs5ExpandableListGroup
|
127
|
+
licenses:
|
128
|
+
- MIT
|
129
|
+
metadata:
|
130
|
+
homepage_uri: https://github.com/bazzel/Bs5ExpandableListGroup
|
131
|
+
source_code_uri: https://github.com/bazzel/Bs5ExpandableListGroup
|
132
|
+
changelog_uri: https://github.com/bazzel/Bs5ExpandableListGroup/CHANGELOG.md
|
133
|
+
post_install_message:
|
134
|
+
rdoc_options: []
|
135
|
+
require_paths:
|
136
|
+
- lib
|
137
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
138
|
+
requirements:
|
139
|
+
- - ">="
|
140
|
+
- !ruby/object:Gem::Version
|
141
|
+
version: '0'
|
142
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
143
|
+
requirements:
|
144
|
+
- - ">="
|
145
|
+
- !ruby/object:Gem::Version
|
146
|
+
version: '0'
|
147
|
+
requirements: []
|
148
|
+
rubygems_version: 3.2.3
|
149
|
+
signing_key:
|
150
|
+
specification_version: 4
|
151
|
+
summary: Summary of Bs5ExpandableListGroup.
|
152
|
+
test_files: []
|