feat(collapse): horizontal prop

Author: xidedix

projects/coreui-angular/src/lib/collapse/collapse.animations.ts

@@ -14,3 +14,18 @@ export const collapseAnimation = animation([
     style({ height: 0, visibility: 'hidden', opacity: 0, overflow: 'hidden', paddingTop: 0, paddingBottom: 0, minHeight: 0 })
   )
 ]);
+
+export const expandHorizontalAnimation = animation([
+  style({ width: 0, visibility: 'hidden', paddingLeft: 0, paddingRight: 0 }),
+  animate('{{ time }} {{ easing }}', style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' })
+  ),
+  animate('{{ time }}', style({opacity: '*'})),
+]);
+
+export const collapseHorizontalAnimation = animation([
+  style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' }),
+  animate(
+    '{{ time }} {{ easing }}',
+    style({ width: 0, visibility: 'hidden', opacity: 0, paddingLeft: 0, paddingRight: 0, minWidth: 0 })
+  )
+]);

projects/coreui-angular/src/lib/collapse/collapse.directive.ts

@@ -14,9 +14,15 @@ import {
 } from '@angular/core';
 import { AnimationBuilder, AnimationPlayer, useAnimation } from '@angular/animations';
 
-import { collapseAnimation, expandAnimation } from './collapse.animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
+import {
+  collapseAnimation,
+  collapseHorizontalAnimation,
+  expandAnimation,
+  expandHorizontalAnimation
+} from './collapse.animations';
+
 // todo
 // tslint:disable-next-line:no-conflicting-lifecycle
 @Directive({
@@ -25,6 +31,7 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterViewInit {
 
+  static ngAcceptInputType_horizontal: BooleanInput;
   static ngAcceptInputType_navbar: BooleanInput;
 
   private _animate = true;
@@ -39,6 +46,18 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
     return this._animate;
   }
 
+  /**
+   * Set horizontal collapsing to transition the width instead of height.
+   */
+  @Input()
+  set horizontal(value: boolean) {
+    this._horizontal = coerceBooleanProperty(value);
+  }
+  get horizontal(): boolean {
+    return this._horizontal;
+  }
+  private _horizontal: boolean = false;
+
   private _visible = false;
   /**
    * Toggle the visibility of collapsible element.
@@ -66,11 +85,11 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
   /**
    * @ignore
    */
-  @Input() duration = '400ms';
+  @Input() duration = '350ms';
   /**
    * @ignore
    */
-  @Input() transition = 'ease-in-out';
+  @Input() transition = 'ease';
   /**
    * Event emitted on visibility change. [docs]
    * @type string
@@ -79,32 +98,45 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
 
   private player!: AnimationPlayer;
   private readonly host: HTMLElement;
+  private scrollHeight!: number;
+  private scrollWidth!: number;
+  private collapsing: boolean = false;
 
   constructor(
     private hostElement: ElementRef,
     private renderer: Renderer2,
     private animationBuilder: AnimationBuilder
   ) {
     this.host = this.hostElement.nativeElement;
-    this.renderer.setStyle(this.host, 'display', 'none');
+    this.setDisplay(false);
   }
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'navbar-collapse': this.navbar,
-      show: this.visible
+      show: this.visible,
+      'collapse-horizontal': this.horizontal,
+      collapsing: this.collapsing
+      // collapse: !this.collapsing
     };
   }
 
+  ngAfterViewInit(): void {
+    if (this.visible) {
+      this.toggle();
+    }
+  }
+
   ngOnDestroy(): void {
     this.destroyPlayer();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['visible']) {
-      // tslint:disable-next-line:no-unused-expression
-      (!changes['visible'].firstChange || !changes['visible'].currentValue) && this.toggle(changes['visible'].currentValue);
+      if (!changes['visible'].firstChange || !changes['visible'].currentValue) {
+        this.toggle(changes['visible'].currentValue);
+      }
     }
   }
 
@@ -115,39 +147,57 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
   }
 
   toggle(visible = this.visible): void {
-    if (visible) {
-      this.renderer.removeStyle(this.host, 'display');
-    }
-    this.visible = visible;
+    this.setDisplay(true);
     this.createPlayer(visible);
-    this.player.play();
+    this.visible = visible;
+    this.player?.play();
   }
 
   destroyPlayer(): void {
-    if (this.player) {
-      this.player.destroy();
-    }
+    this.player?.destroy();
   }
 
   createPlayer(visible: boolean = this.visible): void {
-    if (this.player) {
+    if (this.player?.hasStarted()) {
       this.destroyPlayer();
     }
 
     let animationFactory;
 
     const duration = this.animate ? this.duration : '0ms';
 
+    const expand = this.horizontal ? expandHorizontalAnimation : expandAnimation;
+    const collapse = this.horizontal ? collapseHorizontalAnimation : collapseAnimation;
+
     animationFactory = this.animationBuilder.build(
-      useAnimation(visible ? expandAnimation : collapseAnimation, { params: { time: duration, easing: this.transition } })
+      useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition } })
     );
 
     this.player = animationFactory.create(this.host);
-    this.player.onStart(() => {this.collapseChange.emit(visible ? 'opening' : 'collapsing'); });
-    this.player.onDone(() => {this.collapseChange.emit(visible ? 'open' : 'collapsed'); });
+    this.player.onStart(() => {
+      this.setMaxSize();
+      this.collapsing = true;
+      this.collapseChange.emit(visible ? 'opening' : 'collapsing');
+    });
+    this.player.onDone(() => {
+      this.collapsing = false;
+      this.collapseChange.emit(visible ? 'open' : 'collapsed');
+    });
   }
 
-  ngAfterViewInit(): void {
-    this.toggle();
+  setMaxSize() {
+    setTimeout(() => {
+      if (this.horizontal) {
+        this.scrollWidth = this.host.scrollWidth;
+        this.scrollWidth > 0 && this.renderer.setStyle(this.host, 'maxWidth', `${this.scrollWidth}px`);
+        // } else {
+        // this.scrollHeight = this.host.scrollHeight;
+        // this.scrollHeight > 0 && this.renderer.setStyle(this.host, 'maxHeight', `${this.scrollHeight}px`);
+      }
+    });
+  }
+
+  setDisplay(display: boolean) {
+    display ? this.renderer.removeStyle(this.host, 'display') : this.renderer.setStyle(this.host, 'display', 'none');
   }
 }