partly fixed accordions and tabs inside looped carousel (issue #91)

nk-crew · Feb 25, 2020 · b4f947b · b4f947b
1 parent 2633ed3
commit b4f947b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/src/assets/js/block-accordion.js b/src/assets/js/block-accordion.js
@@ -27,10 +27,14 @@ function activateAccordionItem( $heading, animationSpeed = 150, self ) {
     const collapseOne = $accordion.hasClass( 'ghostkit-accordion-collapse-one' );
 
     if ( isActive ) {
-        $content.stop().css( 'display', 'block' ).slideUp( animationSpeed );
+        $content.stop().css( 'display', 'block' ).slideUp( animationSpeed, () => {
+            GHOSTKIT.triggerEvent( 'afterActivateAccordionItem', self, $heading );
+        } );
         $item.removeClass( 'ghostkit-accordion-item-active' );
     } else {
-        $content.stop().css( 'display', 'none' ).slideDown( animationSpeed );
+        $content.stop().css( 'display', 'none' ).slideDown( animationSpeed, () => {
+            GHOSTKIT.triggerEvent( 'afterActivateAccordionItem', self, $heading );
+        } );
         $item.addClass( 'ghostkit-accordion-item-active' );
     }
 
@@ -42,6 +46,8 @@ function activateAccordionItem( $heading, animationSpeed = 150, self ) {
         }
     }
 
+    GHOSTKIT.triggerEvent( 'activateAccordionItem', self, $heading );
+
     self.hasScrolled();
 }
 
@@ -56,13 +62,6 @@ $doc.on( 'initBlocks.ghostkit', function( e, self ) {
 
         $this.addClass( 'ghostkit-accordion-ready' );
 
-        // click action
-        $this.on( 'click', '.ghostkit-accordion-item .ghostkit-accordion-item-heading', function( evt ) {
-            evt.preventDefault();
-
-            activateAccordionItem( $( this ), 150, self );
-        } );
-
         // activate by page hash
         if ( pageHash ) {
             const $activeAccordion = $this.find( `> :not(.ghostkit-accordion-item-active) > .ghostkit-accordion-item-heading[href="${ pageHash }"]` );
@@ -76,6 +75,14 @@ $doc.on( 'initBlocks.ghostkit', function( e, self ) {
     GHOSTKIT.triggerEvent( 'afterPrepareAccordions', self );
 } );
 
+/**
+ * Click Accordions.
+ */
+$doc.on( 'click', '.ghostkit-accordion-item .ghostkit-accordion-item-heading', function( evt ) {
+    evt.preventDefault();
+    activateAccordionItem( $( this ), 150, GHOSTKIT.classObject );
+} );
+
 /*
  * Activate tab on hash change.
  */

diff --git a/src/assets/js/block-carousel.js b/src/assets/js/block-carousel.js
@@ -116,3 +116,18 @@ $doc.on( 'initBlocks.ghostkit', function( e, self ) {
 
     GHOSTKIT.triggerEvent( 'afterPrepareCarousels', self );
 } );
+
+/**
+ * Re-create slides duplicates.
+ * https://github.com/nolimits4web/swiper/issues/2629
+ */
+$doc.on( 'activateTab.ghostkit afterActivateAccordionItem.ghostkit', function( e, self, $item ) {
+    const $carousels = $item.parents( '.ghostkit-carousel-ready' );
+
+    $carousels.each( function() {
+        if ( this.swiper ) {
+            this.swiper.loopDestroy();
+            this.swiper.loopCreate();
+        }
+    } );
+} );
diff --git a/src/assets/js/block-tabs-v2.js b/src/assets/js/block-tabs-v2.js
@@ -44,6 +44,8 @@ function activateTab( $tabs, tabName, self ) {
 
     self.hasScrolled();
 
+    GHOSTKIT.triggerEvent( 'activateTab', self, $tabs, tabName );
+
     return true;
 }
 
@@ -59,16 +61,6 @@ $doc.on( 'initBlocks.ghostkit', function( e, self ) {
 
         $this.addClass( 'ghostkit-tabs-ready' );
 
-        // click action
-        $this.on( 'click', '.ghostkit-tabs-buttons-item', function( evt ) {
-            evt.preventDefault();
-
-            const $thisBtn = $( this );
-            const tabName = $thisBtn.attr( 'data-tab' ) || this.hash;
-
-            activateTab( $this, tabName, self );
-        } );
-
         // activate by page hash
         let tabActivated = false;
         if ( pageHash ) {
@@ -88,6 +80,19 @@ $doc.on( 'initBlocks.ghostkit', function( e, self ) {
     GHOSTKIT.triggerEvent( 'afterPrepareTabs', self );
 } );
 
+/**
+ * Click Tabs.
+ */
+$doc.on( 'click', '.ghostkit-tabs-buttons-item', function( evt ) {
+    evt.preventDefault();
+
+    const $thisBtn = $( this );
+    const $tab = $thisBtn.closest( '.ghostkit-tabs' );
+    const tabName = $thisBtn.attr( 'data-tab' ) || this.hash;
+
+    activateTab( $tab, tabName, GHOSTKIT.classObject );
+} );
+
 /*
  * Activate tab on hash change.
  */