58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
|
import {Directive, Input, HostBinding} from '@angular/core';
|
||
|
|
|
||
|
|
// todo: add animate
|
||
|
|
// todo: add init and on change
|
||
|
|
@Directive({selector: '[open]'})
|
||
|
|
export class Open {
|
||
|
|
@HostBinding('style.display')
|
||
|
|
public display:string;
|
||
|
|
@HostBinding('class.in')
|
||
|
|
@HostBinding('attr.aria-expanded')
|
||
|
|
public isExpanded:boolean = true;
|
||
|
|
|
||
|
|
@Input()
|
||
|
|
public set open(value:boolean) {
|
||
|
|
this.isExpanded = value;
|
||
|
|
this.toggle();
|
||
|
|
}
|
||
|
|
|
||
|
|
public get open():boolean {
|
||
|
|
return this.isExpanded;
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
}
|
||
|
|
init() {
|
||
|
|
this.isExpanded = false;
|
||
|
|
this.display = 'none';
|
||
|
|
}
|
||
|
|
toggle() {
|
||
|
|
if (this.isExpanded) {
|
||
|
|
this.hide();
|
||
|
|
} else {
|
||
|
|
this.show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
hide() {
|
||
|
|
this.isExpanded = false;
|
||
|
|
this.display = 'none';
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
let backDrop = document.getElementsByClassName("modal-backdrop");
|
||
|
|
if(backDrop.length>0){
|
||
|
|
document.body.removeChild(backDrop[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
show() {
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
// let backDrop = document.createElement('div');
|
||
|
|
// backDrop.className="modal-backdrop fade in";
|
||
|
|
// document.body.appendChild(backDrop);
|
||
|
|
}
|
||
|
|
this.isExpanded = true;
|
||
|
|
this.display = 'block';
|
||
|
|
}
|
||
|
|
}
|