@creative-web-solution/front-library 7.1.33 → 7.1.35

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.1.35
+
+* [Accordion]: Rework
+
+## 7.1.34
+
+* [DragSlider]: Add new params to onChangeState callback
+
 ## 7.1.33
 
 * [DragSlider]: Update delta computing

package/Modules/Accordion/Tab.ts

@@ -1,17 +1,19 @@
-import { on, off } from '../../Events/EventsManager';
 import { next }    from '../../DOM/Traversing';
 
 
 /**
  * Tab of an accordion
  */
-export default class Tab implements FLib.Accordion.Tab {
+export default class Tab {
     #isOpen:              boolean;
     #originalOpenedState: boolean;
     #$TAB_PANNEL:         HTMLElement | null;
     #options;
     #$TAB;
 
+    get isOpen(): boolean {
+        return this.#isOpen;
+    }
 
     constructor( $TAB: HTMLElement, options: FLib.Accordion.TabOptions ) {
         this.#options     = options;
@@ -22,10 +24,6 @@ export default class Tab implements FLib.Accordion.Tab {
 
         this.#isOpen = this.#originalOpenedState = $TAB.getAttribute( 'aria-expanded' ) === 'true';
 
-        on( $TAB, {
-            "eventsName": "click",
-            "callback": this.#toggleTab
-        } );
 
         if ( this.#isOpen ) {
             this.#openTab( true );
@@ -51,40 +49,28 @@ export default class Tab implements FLib.Accordion.Tab {
                         }
                     } );
 
-        if ( this.#options.onOpenTab ) {
-            this.#options.onOpenTab( this );
-        }
         this.#isOpen = true;
         this.#changeTabState();
     }
 
-
     #closeTab = ( autoClose?: boolean ): void => {
         this.#options.animations
                     .close( this.#$TAB, this.#$TAB_PANNEL )
                     .then( () => {
-                        if ( this.#options.onClose ) {
-                            this.#options.onClose( this.#$TAB, this.#$TAB_PANNEL, autoClose );
-                        }
+                        this.#options.onClose?.( this.#$TAB, this.#$TAB_PANNEL, autoClose );
                     } );
 
         this.#isOpen = false;
         this.#changeTabState();
     }
 
-
-    #toggleTab = ( e: Event ): void => {
-        e.preventDefault();
-
-        if( this.#isOpen && ( !this.#options.atLeastOneOpen || this.#options.allowMultipleTab ) ) {
-            this.#closeTab();
-        }
-        else if( !this.#isOpen ) {
-            this.#openTab();
+    open(): this {
+        if( !this.#isOpen ) {
+            this.#openTab( false );
         }
+        return this;
     }
 
-
     close( autoClose?: boolean ): this {
         if( this.#isOpen ) {
             this.#closeTab( autoClose );
@@ -97,11 +83,6 @@ export default class Tab implements FLib.Accordion.Tab {
     destroy(): this {
         this.#options.animations.destroy( this.#$TAB, this.#$TAB_PANNEL );
 
-        off( this.#$TAB, {
-            "eventsName": "click",
-            "callback":   this.#toggleTab
-        } );
-
         this.#$TAB.setAttribute( 'aria-expanded', this.#originalOpenedState ? 'true' : 'false' );
 
         return this;

package/Modules/Accordion/index.ts

@@ -1,5 +1,6 @@
 import { aClass, rClass }       from '../../DOM/Class';
 import { extend }               from '../../Helpers/Extend';
+import { on, off }              from '../../Events/EventsManager';
 import Tab                      from './Tab';
 
 
@@ -84,11 +85,12 @@ const DEFAULT_OPTIONS = {
  * Set aria-expanded to "true" on the tab you want open at start
  */
 export default class Accordion {
+    #$accordionWrapper: HTMLElement;
     #options:       FLib.Accordion.Options;
     #$tabs:         NodeListOf<HTMLElement>;
-    #tablist:       FLib.Accordion.Tab[];
+    #tablist        = new Map<HTMLElement, Tab>();
     #status:        string;
-    #lastOpenedTab: FLib.Accordion.Tab | null = null;
+    #lastOpenedTabs = new Set<Tab>();
 
 
     #STATUS_ON  = 'STATUS_ON';
@@ -96,26 +98,16 @@ export default class Accordion {
 
 
     constructor( $accordionWrapper: HTMLElement, userOptions: FLib.Accordion.OptionsInit ) {
+        this.#$accordionWrapper = $accordionWrapper;
 
         this.#options       = extend( DEFAULT_OPTIONS, userOptions );
 
         this.#$tabs         = $accordionWrapper.querySelectorAll( this.#options.tabSelector );
-        this.#tablist       = [];
         this.#status        = this.#STATUS_OFF;
 
         this.#on();
     }
 
-
-    #onOpenTab = ( tab: FLib.Accordion.Tab ): void => {
-        if ( this.#lastOpenedTab ) {
-            this.#lastOpenedTab.close( true );
-        }
-
-        this.#lastOpenedTab = tab;
-    }
-
-
     #on = (): void => {
         if( this.#status === this.#STATUS_ON ){
             return;
@@ -124,12 +116,17 @@ export default class Accordion {
         this.#status = this.#STATUS_ON;
 
         this.#$tabs.forEach( ( $tab, index ) => {
-            this.#tablist.push( new Tab( $tab, {
+            this.#tablist.set($tab, new Tab( $tab, {
                 ...this.#options,
                 index,
-                "onOpenTab": this.#options.allowMultipleTab ? undefined : this.#onOpenTab
             } ) );
         } );
+
+        on( this.#$accordionWrapper, {
+            "eventsName": "click",
+            "selector": this.#options.tabSelector,
+            "callback": this.#toggleTab
+        } );
     }
 
 
@@ -144,9 +141,65 @@ export default class Accordion {
             tab.destroy();
         } );
 
-        this.#tablist.length = 0;
+        this.#tablist.clear();
+
+        off( this.#$accordionWrapper, {
+            "eventsName": "click",
+            "callback": this.#toggleTab
+        } );
     }
 
+    #toggleTab = ( e: Event, $target: HTMLElement ): void => {
+        e.preventDefault();
+
+        const tab = this.#tablist.get($target);
+
+        if (!tab) {
+            return;
+        }
+
+        if (tab.isOpen) {
+            this.closeTab(tab)
+            return;
+        }
+
+        this.openTab(tab)
+    }
+
+    closeTab(tab: Tab): this {
+        if (this.#options.atLeastOneOpen && this.#lastOpenedTabs.size < 2) {
+            return this;
+        }
+
+        tab.close(false);
+        this.#lastOpenedTabs.delete(tab);
+
+        return this;
+    }
+
+    openTab(tab: Tab): this {
+        if (!this.#options.allowMultipleTab && this.#lastOpenedTabs.size > 0) {
+            this.#lastOpenedTabs.forEach(tab => {
+                tab.close(true);
+            });
+            this.#lastOpenedTabs.clear();
+        }
+
+        tab.open();
+        this.#lastOpenedTabs.add(tab);
+
+        return this;
+    }
+
+    openTabByElement($tab: HTMLElement): this {
+        const tab = this.#tablist.get($tab);
+
+        if (tab) {
+            this.openTab(tab);
+        }
+
+        return this;
+    }
 
     /**
      * Remove all events, css class, ...

package/Modules/DragSlider.ts

@@ -186,7 +186,7 @@ export default class DragSlider {
         );
 
         if (prevIsDraggingActive !== this.#isDraggingActive) {
-            this.#options.onChangeState?.(this.#isDraggingActive);
+            this.#options.onChangeState?.(this.#isDraggingActive, this.#getCallbackOptions(this.#deltaMove.x));
         }
 
         this.#itemArray.length = 0;
@@ -216,14 +216,6 @@ export default class DragSlider {
 
             if (!flag) {
                 this.#itemArray.push(DATA);
-                // this.#itemArray.push({
-                //     ...DATA,
-                //     "info":    {
-                //         ...ITEM_OFFSET,
-                //         "left": ABS_LIST_DELTA + this.#siteOffsetLeft,
-                //         "x":    ABS_LIST_DELTA + this.#siteOffsetLeft
-                //     }
-                // });
             }
             flag = true;
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.33
+@version: 7.1.35
 
 
 ## Use

package/Types/Accordion.d.ts

@@ -1,11 +1,6 @@
 declare namespace FLib {
     namespace Accordion {
 
-        interface Tab {
-            close( autoClose?: boolean ): this;
-            destroy(): this;
-        }
-
         type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
         type Callback          = ( $tab: HTMLElement, $panel: HTMLElement ) => void;
         type CloseCallback     = ( $tab: HTMLElement, $panel: HTMLElement, autoclose: boolean ) => void;
@@ -34,7 +29,6 @@ declare namespace FLib {
         }
 
         interface TabOptions extends Options {
-            onOpenTab?: ( tab: Tab ) => void;
             index:     number;
         }
     }

package/Types/DragSlider.d.ts

@@ -43,7 +43,7 @@ declare namespace FLib {
             onMouseEnter?:      Callback;
             onMouseLeave?:      Callback;
             onInit?:            Callback;
-            onChangeState?:     ( isDragging: boolean ) => void;
+            onChangeState?:     ( isActive: boolean, options: CallbackParam ) => void;
             /**
              * In px.
              * @defaultValue 40

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.33",
+  "version": "7.1.35",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],