rails_accordion 0.2.2.pre.beta → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +1 -1
- data/app/assets/builds/rails_accordion.js +52 -46
- data/app/assets/builds/rails_accordion.js.map +3 -3
- data/app/components/accordion_component.rb +9 -9
- data/app/components/item_component.rb +2 -8
- data/app/javascript/controllers/accordion_controller.js +29 -30
- data/lib/rails_accordion/version.rb +1 -1
- data/rails_accordion.gemspec +1 -1
- metadata +6 -6
@@ -1,23 +1,23 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
class AccordionComponent < ViewComponent::Base
|
4
|
-
|
5
4
|
def initialize(**args)
|
6
|
-
super
|
7
5
|
@args = args.presence || {}
|
8
|
-
set_data_params
|
9
6
|
end
|
10
7
|
|
11
8
|
def call
|
12
|
-
content_tag(:div, content, **@args)
|
9
|
+
content_tag(:div, content, data: data_options, **@args)
|
13
10
|
end
|
14
11
|
|
15
12
|
private
|
16
13
|
|
17
|
-
def
|
18
|
-
@args
|
19
|
-
|
20
|
-
|
21
|
-
|
14
|
+
def data_options
|
15
|
+
data = @args.delete(:data) || {}
|
16
|
+
{
|
17
|
+
controller: [data.delete(:controller), "accordion"].compact.join(" "),
|
18
|
+
accordion_multiple_open_value: @args.delete(:multiple_open) || RailsAccordion.configuration.multiple_open,
|
19
|
+
accordion_default_state_value: @args.delete(:default_state) || RailsAccordion.configuration.default_state,
|
20
|
+
**data
|
21
|
+
}
|
22
22
|
end
|
23
23
|
end
|
@@ -5,13 +5,11 @@ class ItemComponent < ViewComponent::Base
|
|
5
5
|
renders_one :header
|
6
6
|
|
7
7
|
def initialize(**args)
|
8
|
-
super
|
9
8
|
@args = args.presence || {}
|
10
|
-
set_classes
|
11
9
|
end
|
12
10
|
|
13
11
|
def call
|
14
|
-
content_tag :div, **@args do
|
12
|
+
content_tag :div, class: [@args.delete(:class), "accordion_item"].compact.join(" "), data: { accordion_target: "item" }, **@args do
|
15
13
|
header_component + body_component
|
16
14
|
end
|
17
15
|
end
|
@@ -19,7 +17,7 @@ class ItemComponent < ViewComponent::Base
|
|
19
17
|
private
|
20
18
|
|
21
19
|
def header_component
|
22
|
-
content_tag :div, header, class: "accordion_toggle"
|
20
|
+
content_tag :div, header, class: "accordion_toggle", data: { action: "click->accordion#toggle" }
|
23
21
|
end
|
24
22
|
|
25
23
|
def body_component
|
@@ -32,10 +30,6 @@ class ItemComponent < ViewComponent::Base
|
|
32
30
|
end
|
33
31
|
end
|
34
32
|
|
35
|
-
def set_classes
|
36
|
-
@args[:class] = [@args[:class], "accordion_item"].compact.join(" ")
|
37
|
-
end
|
38
|
-
|
39
33
|
def content_styles
|
40
34
|
"transition-duration: #{parse_duration}ms;"
|
41
35
|
end
|
@@ -1,46 +1,39 @@
|
|
1
1
|
import { Controller } from "@hotwired/stimulus";
|
2
2
|
|
3
3
|
export default class extends Controller {
|
4
|
-
|
5
|
-
this.initAccordion();
|
4
|
+
static targets = [ "item" ]
|
6
5
|
|
7
|
-
|
6
|
+
static values = {
|
7
|
+
multipleOpen: Boolean,
|
8
|
+
defaultState: String
|
8
9
|
}
|
9
10
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
switch($(this.element).data('default-state')) {
|
11
|
+
connect() {
|
12
|
+
// inits default state for accordion
|
13
|
+
switch(this.defaultStateValue) {
|
14
14
|
case 'all_closed':
|
15
|
-
this.hideAll(
|
15
|
+
this.hideAll(this.itemTargets);
|
16
16
|
break;
|
17
17
|
case 'all_opened':
|
18
|
-
this.showAll(
|
18
|
+
this.showAll(this.itemTargets);
|
19
19
|
break;
|
20
20
|
case 'first_opened':
|
21
|
-
this.hideAll(
|
22
|
-
this.open(
|
21
|
+
this.hideAll(this.itemTargets)
|
22
|
+
this.open(this.itemTargets[0].querySelector('.accordion_content'))
|
23
23
|
}
|
24
24
|
}
|
25
25
|
|
26
|
-
|
27
|
-
const
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
if ($(this.element).data('multiple-open') != true) {
|
38
|
-
this.hideAll(items);
|
39
|
-
}
|
40
|
-
this.open(content);
|
41
|
-
}
|
42
|
-
});
|
43
|
-
});
|
26
|
+
toggle(e) {
|
27
|
+
const content = e.currentTarget.parentNode.querySelector('.accordion_content')
|
28
|
+
|
29
|
+
if (content.classList.contains('accordion_active')) {
|
30
|
+
this.hide(content);
|
31
|
+
} else {
|
32
|
+
if (!this.multipleOpenValue) {
|
33
|
+
this.hideAll(this.itemTargets);
|
34
|
+
}
|
35
|
+
this.open(content);
|
36
|
+
}
|
44
37
|
}
|
45
38
|
|
46
39
|
hideAll(items) {
|
@@ -58,6 +51,12 @@ export default class extends Controller {
|
|
58
51
|
|
59
52
|
open(item) {
|
60
53
|
item.classList.add("accordion_active")
|
61
|
-
item.style.height = item.scrollHeight + 'px'
|
54
|
+
item.style.height = item.scrollHeight + 'px';
|
55
|
+
|
56
|
+
item.querySelectorAll('.accordion_content').forEach(function(child) {
|
57
|
+
new ResizeObserver(function() {
|
58
|
+
item.style.height = item.scrollHeight + 'px';
|
59
|
+
}).observe(child);
|
60
|
+
});
|
62
61
|
}
|
63
62
|
}
|
data/rails_accordion.gemspec
CHANGED
@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
|
|
10
10
|
|
11
11
|
spec.summary = "rails_accordion is a Ruby gem that provides an easy-to-use accordion component for use in Rails web applications."
|
12
12
|
spec.description = "rails_accordion is a Ruby gem that provides an easy-to-use accordion component for use in Rails web applications. With this gem, developers can create collapsible sections of content that can be expanded or collapsed with a single click. The accordion is a great way to improve the user experience of your web application, by providing a clean and intuitive way to display complex information."
|
13
|
-
spec.homepage = "https://
|
13
|
+
spec.homepage = "https://github.com/Tajbrains/rails_accordion"
|
14
14
|
spec.license = "MIT"
|
15
15
|
spec.required_ruby_version = ">= 2.6.0"
|
16
16
|
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rails_accordion
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 1.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ahmadshoh Nasrullozoda
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-06-
|
11
|
+
date: 2023-06-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: stimulus-rails
|
@@ -88,11 +88,11 @@ files:
|
|
88
88
|
- vendor/assets/javascripts/rails_accordion.js
|
89
89
|
- vendor/assets/javascripts/rails_accordion.js.map
|
90
90
|
- vendor/assets/stylesheets/rails_accordion.css
|
91
|
-
homepage: https://
|
91
|
+
homepage: https://github.com/Tajbrains/rails_accordion
|
92
92
|
licenses:
|
93
93
|
- MIT
|
94
94
|
metadata:
|
95
|
-
homepage_uri: https://
|
95
|
+
homepage_uri: https://github.com/Tajbrains/rails_accordion
|
96
96
|
source_code_uri: https://github.com/Tajbrains/rails_accordion
|
97
97
|
changelog_uri: https://github.com/Tajbrains/rails_accordion/blob/master/CHANGELOG.md
|
98
98
|
post_install_message:
|
@@ -106,9 +106,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
106
106
|
version: 2.6.0
|
107
107
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
108
108
|
requirements:
|
109
|
-
- - "
|
109
|
+
- - ">="
|
110
110
|
- !ruby/object:Gem::Version
|
111
|
-
version:
|
111
|
+
version: '0'
|
112
112
|
requirements: []
|
113
113
|
rubygems_version: 3.0.1
|
114
114
|
signing_key:
|