1 |
61381
|
k.triantaf
|
import {Directive, Input, HostBinding} from '@angular/core';
|
2 |
|
|
|
3 |
|
|
// todo: add animate
|
4 |
|
|
// todo: add init and on change
|
5 |
|
|
@Directive({selector: '[open]'})
|
6 |
|
|
export class Open {
|
7 |
|
|
@HostBinding('style.display')
|
8 |
|
|
public display:string;
|
9 |
|
|
@HostBinding('class.in')
|
10 |
|
|
@HostBinding('attr.aria-expanded')
|
11 |
|
|
public isExpanded:boolean = true;
|
12 |
|
|
|
13 |
|
|
@Input()
|
14 |
|
|
public set open(value:boolean) {
|
15 |
|
|
this.isExpanded = value;
|
16 |
|
|
this.toggle();
|
17 |
|
|
}
|
18 |
|
|
|
19 |
|
|
public get open():boolean {
|
20 |
|
|
return this.isExpanded;
|
21 |
|
|
}
|
22 |
|
|
|
23 |
|
|
constructor() {
|
24 |
|
|
}
|
25 |
|
|
init() {
|
26 |
|
|
this.isExpanded = false;
|
27 |
|
|
this.display = 'none';
|
28 |
|
|
}
|
29 |
|
|
toggle() {
|
30 |
|
|
if (this.isExpanded) {
|
31 |
|
|
this.hide();
|
32 |
|
|
} else {
|
33 |
|
|
this.show();
|
34 |
|
|
}
|
35 |
|
|
}
|
36 |
|
|
|
37 |
|
|
hide() {
|
38 |
|
|
this.isExpanded = false;
|
39 |
|
|
this.display = 'none';
|
40 |
|
|
if (typeof document !== 'undefined') {
|
41 |
|
|
let backDrop = document.getElementsByClassName("modal-backdrop");
|
42 |
|
|
if(backDrop.length>0){
|
43 |
|
|
document.body.removeChild(backDrop[0]);
|
44 |
|
|
}
|
45 |
|
|
}
|
46 |
|
|
}
|
47 |
|
|
|
48 |
|
|
show() {
|
49 |
|
|
if (typeof document !== 'undefined') {
|
50 |
|
|
// let backDrop = document.createElement('div');
|
51 |
|
|
// backDrop.className="modal-backdrop fade in";
|
52 |
|
|
// document.body.appendChild(backDrop);
|
53 |
|
|
}
|
54 |
|
|
this.isExpanded = true;
|
55 |
|
|
this.display = 'block';
|
56 |
|
|
}
|
57 |
|
|
}
|