feat(collapse): added animation, toggle\hide\show methods made public (…

…closes #348, fixes #287)

components/collapse/collapse.component.ts

@@ -1,12 +1,17 @@
-import {Directive, Input, HostBinding} from 'angular2/core';
+import {Directive, OnInit, ElementRef, Input, HostBinding} from 'angular2/core';
+import {AnimationBuilder} from 'angular2/animate';
 
-// todo: add animate
-// todo: add init and on change
+// TODO: remove ElementRef
+// TODO: add on change
 @Directive({selector: '[collapse]'})
-export class Collapse {
+export class Collapse implements OnInit {
+ private animation: any;
+
  // style
- @HostBinding('style.height')
- private height:string;
+ // @HostBinding('style.height')
+ // private height:string;
+ @HostBinding('style.display')
+ private display: string;
  // shown
  @HostBinding('class.in')
  @HostBinding('attr.aria-expanded')
@@ -21,6 +26,9 @@ export class Collapse {
  @HostBinding('class.collapsing')
  private isCollapsing:boolean = false;
 
+ @Input('transition-duration')
+ private transitionDuration: number = 500; // Duration in ms
+
  @Input()
  private set collapse(value:boolean) {
  this.isExpanded = value;
@@ -31,41 +39,79 @@ export class Collapse {
  return this.isExpanded;
  }
 
- constructor() {
+ constructor(private _ab: AnimationBuilder, private _el: ElementRef) {
  }
 
- toggle() {
+ ngOnInit(): void {
+ this.animation = this._ab.css();
+ this.animation.setDuration(this.transitionDuration);
+ }
+
+ public toggle() {
  if (this.isExpanded) {
  this.hide();
  } else {
  this.show();
  }
  }
 
- hide() {
+ public hide() {
  this.isCollapse = false;
  this.isCollapsing = true;
 
  this.isExpanded = false;
  this.isCollapsed = true;
+
  setTimeout(() => {
- this.height = '0';
- this.isCollapse = true;
- this.isCollapsing = false;
+ // this.height = '0';
+ // this.isCollapse = true;
+ // this.isCollapsing = false;
+ this.animation
+ .setFromStyles({
+ height: this._el.nativeElement.scrollHeight + 'px'
+ })
+ .setToStyles({
+ height: '0',
+ overflow: 'hidden'
+ });
+
+ this.animation.start(this._el.nativeElement).onComplete(() => {
+ if (this._el.nativeElement.offsetHeight === 0) {
+ this.display = 'none';
+ }
+
+ this.isCollapse = true;
+ this.isCollapsing = false;
+ });
  }, 4);
  }
 
- show() {
+ public show() {
  this.isCollapse = false;
  this.isCollapsing = true;
 
  this.isExpanded = true;
  this.isCollapsed = false;
+
+ this.display = '';
+
  setTimeout(() => {
- this.height = 'auto';
+ // this.height = 'auto';
+ // this.isCollapse = true;
+ // this.isCollapsing = false;
+ this.animation
+ .setFromStyles({
+ height: this._el.nativeElement.offsetHeight,
+ overflow: 'hidden'
+ })
+ .setToStyles({
+ height: this._el.nativeElement.scrollHeight + 'px'
+ });
 
- this.isCollapse = true;
- this.isCollapsing = false;
+ this.animation.start(this._el.nativeElement).onComplete(() => {
+ this.isCollapse = true;
+ this.isCollapsing = false;
+ });
  }, 4);
  }
 }