Skip to content

Commit

Permalink
fix(collapse): had to disable animation in order to update to rc.1
Browse files Browse the repository at this point in the history
valorkin committed May 6, 2016

Verified

This commit was signed with the committer’s verified signature.
paulober Paul
1 parent 0a8feb1 commit 3443495
Showing 1 changed file with 58 additions and 31 deletions.
89 changes: 58 additions & 31 deletions components/collapse/collapse.directive.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
// FIX: in order to update to rc.1 had to disable animation, sorry
import {Directive, OnInit, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
import {AnimationBuilder} from '@angular/platform-browser/src/animate/animation_builder';

// import {animation, style, animate, state, transition} from '@angular/core';

/*@Directive({
selector: '[collapse]',
// templateUrl: 'app/panel.html',
// styleUrls: ['app/panel.css'],
animations: [
animation('active', [
state('void', style({ height: 0 })),
state('closed', style({ height: 0 })),
state('open', style({ height: '*' })),
transition('void => closed', [ animate(0) ]),
transition('closed => open', [ animate('350ms ease-out') ]),
transition('open => closed', [ animate('350ms ease-out') ])
])
]
})*/
// fix: replace with // '@angular/animate';
// when https://github.com/angular/angular/issues/5984 will be fixed

// TODO: remove ElementRef
// TODO: add on change
@Directive({selector: '[collapse]'})
export class CollapseDirective implements OnInit {
private animation:any;
// private animation:any;

// style
// @HostBinding('style.height')
@@ -28,7 +47,7 @@ export class CollapseDirective implements OnInit {
@HostBinding('class.collapsing')
private isCollapsing:boolean = false;

@Input() private transitionDuration:number = 500; // Duration in ms
// @Input() private transitionDuration:number = 500; // Duration in ms

@Input()
private set collapse(value:boolean) {
@@ -39,7 +58,7 @@ export class CollapseDirective implements OnInit {
private get collapse():boolean {
return this.isExpanded;
}

// private open: boolean;
private _ab:AnimationBuilder;
private _el:ElementRef;
private _renderer:Renderer;
@@ -51,11 +70,12 @@ export class CollapseDirective implements OnInit {
}

public ngOnInit():void {
this.animation = this._ab.css();
this.animation.setDuration(this.transitionDuration);
// this.animation = this._ab.css();
// this.animation.setDuration(this.transitionDuration);
}

public toggle():void {
// this.open = !this.open;
if (this.isExpanded) {
this.hide();
} else {
@@ -70,29 +90,32 @@ export class CollapseDirective implements OnInit {
this.isExpanded = false;
this.isCollapsed = true;

setTimeout(() => {
// 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);
this.isCollapse = true;
this.isCollapsing = false;

/* setTimeout(() => {
// 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);*/
}

public show():void {
@@ -103,8 +126,12 @@ export class CollapseDirective implements OnInit {
this.isCollapsed = false;

this.display = '';

setTimeout(() => {
// this.height = 'auto';
this.isCollapse = true;
this.isCollapsing = false;
this._renderer.setElementStyle(this._el.nativeElement, 'overflow', 'visible');

This comment has been minimized.

Copy link
@inash

inash Jul 30, 2017

This is causing custom overflow properties to be overriden. E.g: when the collapse container overflow is set to scroll with a fixed height, etc. Can this be avoided? The alternative is to set a custom style with overflow: scroll !important.

this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto');
/*setTimeout(() => {
// this.height = 'auto';
// this.isCollapse = true;
// this.isCollapsing = false;
@@ -124,6 +151,6 @@ export class CollapseDirective implements OnInit {
this._renderer.setElementStyle(this._el.nativeElement, 'overflow', 'visible');
this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto');
});
}, 4);
}, 4);*/
}
}

3 comments on commit 3443495

@justin-romano
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming have plans to put the animation back in right?

@valorkin
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeap, as soon as animation will be implemented nice in ng2

@inash
Copy link

@inash inash commented on 3443495 Aug 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No sure whether my code comment was seen, so commenting on the commit as a whole.
Line 132: This is causing custom overflow properties to be overriden. E.g: when the collapse container overflow is set to scroll with a fixed height, etc. Can this be avoided? The alternative is to set a custom style with overflow: scroll !important.

Please sign in to comment.