rails_accordion 0.1.11.pre.beta → 0.1.12.pre.beta

data/app/assets/stylesheets/rails_accordion.css

@@ -3,9 +3,13 @@
 @tailwind utilities;
 
 .accordion_content {
-    @apply h-0 overflow-hidden w-full transition-all duration-300
+    @apply h-0 overflow-hidden w-full transition-all ease-in-out;
 }
 
 .accordion_toggle {
     @apply cursor-pointer;
 }
+
+.accordion_content-container {
+    @apply h-max;
+}

data/app/components/item_component.rb

@@ -24,7 +24,7 @@ class ItemComponent < ViewComponent::Base
 
   def body_component
     if body?
-      content_tag :div, class: "accordion_content" do
+      content_tag :div, class: "accordion_content", style: content_styles do
         content_tag :div, body, class: "accordion_content-container p-2"
       end
     else
@@ -35,4 +35,12 @@ class ItemComponent < ViewComponent::Base
   def set_classes
     @args[:class] = [@args[:class], "accordion_item"].compact.join(" ")
   end
+
+  def content_styles
+    "transition-duration: #{parse_duration}ms;"
+  end
+
+  def parse_duration
+    RailsAccordion.configuration.animation_duration
+  end
 end

data/app/javascript/controllers/accordion_controller.js

@@ -10,34 +10,30 @@ export default class extends Controller {
 
     items.forEach((item) => {
       const toggle = item.querySelector('.accordion_toggle');
+      const content = item.querySelector('.accordion_content')
 
       toggle.addEventListener('click', (e) => {
-        if (item.classList.contains('active')) {
-          this.hide(item);
+        if (content.classList.contains('accordion_active')) {
+          this.hide(content);
         } else {
           this.hideAll(items);
-          this.open(item);
+          this.open(content);
         }
       });
     });
   }
 
   hideAll(items) {
-    items.forEach((item) => this.hide(item));
+    items.forEach((item) => this.hide(item.querySelector('.accordion_content')));
   }
 
   hide(item) {
-    item.classList.remove("active")
-    const content = item.querySelector('.accordion_content');
-    content.style.height = '0px';
+    item.classList.remove("accordion_active")
+    item.style.height = 0;
   }
 
   open(item) {
-    item.classList.add("active")
-    const content = item.querySelector('.accordion_content');
-    content.style.height = 'auto';
-    const contentHeight = content.style.height
-    // content.style.height = '0px';
-    content.animate({ height: contentHeight + 'px' }, 50);
+    item.classList.add("accordion_active")
+    item.style.height = item.scrollHeight + 'px'
   }
 }

data/lib/generators/rails_accordion/install_generator.rb

@@ -9,8 +9,8 @@ module RailsAccordion
       namespace "rails_accordion:install"
       desc "Copies all necessary files"
 
-      def copy_build_files
-        # directory File.join(__dir__, "../", "../", "../", "app", "assets", "builds"), "app/assets/builds"
+      def copy_config_file
+        template 'rails_accordion.tt', 'config/initializers/rails_accordion.rb'
       end
     end
   end

data/lib/generators/rails_accordion/templates/rails_accordion.tt

@@ -0,0 +1,4 @@
+RailsAccordion.configure do |config|
+  config.default_state = :all_closed # :all_closed, :all_opened, :first_opened
+  config.animation_duration = 300 # in ms
+end

data/lib/rails_accordion/configuration.rb

@@ -0,0 +1,22 @@
+module RailsAccordion
+  class Configuration
+    attr_accessor :default_state, :animation_duration
+
+    def initialize
+      @default_state = :closed
+      @animation_duration = 300
+    end
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.configuration=(config)
+    @configuration = config
+  end
+
+  def self.configure
+    yield configuration
+  end
+end

data/lib/rails_accordion/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsAccordion
-  VERSION = "0.1.11-beta"
+  VERSION = "0.1.12-beta"
 end

data/lib/rails_accordion.rb

@@ -11,6 +11,8 @@ module RailsAccordion
   class Error < StandardError; end
 
   class Engine < ::Rails::Engine
+    isolate_namespace RailsAccordion
+
     initializer "rails_accordion.importmap" do |app|
       if defined?(Importmap)
         app.config.assets.precompile << "rails_accordion.js"

data/vendor/assets/stylesheets/rails_accordion.css

@@ -514,7 +514,6 @@ video {
 }
 
 .accordion_content {
-  height: 0px;
   width: 100%;
   overflow: hidden;
   transition-property: all;
@@ -525,3 +524,11 @@ video {
 .accordion_toggle {
   cursor: pointer;
 }
+
+.accordion_item {
+  height: 0px;
+}
+
+.accordion_active {
+  height: max-content;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_accordion
 version: !ruby/object:Gem::Version
-  version: 0.1.11.pre.beta
+  version: 0.1.12.pre.beta
 platform: ruby
 authors:
 - Ahmadshoh Nasrullozoda
@@ -75,8 +75,9 @@ files:
 - bin/rails
 - bin/setup
 - lib/generators/rails_accordion/install_generator.rb
-- lib/generators/rails_accordion/templates/accordion_controller.js.tt
+- lib/generators/rails_accordion/templates/rails_accordion.tt
 - lib/rails_accordion.rb
+- lib/rails_accordion/configuration.rb
 - lib/rails_accordion/version.rb
 - lib/tasks/rails_accordion_tasks.rake
 - rails_accordion.gemspec

data/lib/generators/rails_accordion/templates/accordion_controller.js.tt

@@ -1,38 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.initAccordion();
-  }
-
-  initAccordion() {
-    const $toggles = $(this.element).find('.accordion_toggle');
-
-    const removeAllActiveClass = () => {
-      $toggles.each((el) => {
-        const $parent = $(el).parent();
-        $parent.removeClass('active');
-        $parent.find('.accordion_content').height(0);
-      });
-    };
-
-    $toggles.on('touch click', (e) => {
-      const $toggle = $(e.currentTarget);
-      const $parent = $toggle.parent();
-      const $content = $parent.find('.accordion_content');
-
-      if (!$parent.hasClass('active')) {
-        removeAllActiveClass();
-        $parent.addClass('active');
-        $content.height('100%');
-      } else {
-        $parent.removeClass('active');
-        $content.css({ height: '0px' });
-      }
-    });
-  }
-
-  afterReflex() {
-    this.initAccordion();
-  }
-}