-
-
Notifications
You must be signed in to change notification settings - Fork 747
/
split.component.ts
122 lines (105 loc) · 2.69 KB
/
split.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import {
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
HostBinding,
Input,
OnInit,
Output,
Renderer2,
ViewChild
} from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'split',
templateUrl: './split.component.html',
styleUrls: ['./split.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SplitComponent implements OnInit {
@Input() splitEl1;
@Input() splitEl2;
@Input() containerEl;
@Output() onHide: EventEmitter<'TOP' | 'BOTTOM'> = new EventEmitter();
pos: number;
subscription: Subscription;
@ViewChild('buttonEl') buttonEl;
@HostBinding('class.is2Visible') get is2Visible() {
return this.pos !== 100;
}
@Input() set splitPos(pos: number) {
this._updatePos(pos);
}
constructor(private _renderer: Renderer2,
private _el: ElementRef) {
}
ngOnInit() {
console.log(this.splitEl1);
console.log(this.containerEl);
console.log(this.splitEl2);
console.log(this.buttonEl);
}
toggle() {
let newPos = 50;
if (this.pos === 50) {
newPos = 100;
}
this._updatePos(newPos);
}
onMouseDown(ev) {
console.log('onMouseDown', ev);
const mouseup$ = fromEvent(document, 'mouseup');
this.subscription = mouseup$.subscribe((e: MouseEvent) => this.onMouseUp(e));
const mousemove$ = fromEvent(document, 'mousemove')
.pipe(takeUntil(mouseup$))
.subscribe((e: MouseEvent) => this.onMouseMove(e));
this.subscription.add(mousemove$);
}
onMouseUp(ev): void {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = undefined;
}
}
onMouseMove(ev) {
console.log('onMouseDown', ev);
const h = this.containerEl.offsetHeight;
const handleHeight = this.buttonEl._elementRef.nativeElement.offsetHeight * 3 / 2;
console.log(handleHeight);
let percentage = (ev.clientY - handleHeight) / h * 100;
if (percentage > 100) {
this.onHide.emit('BOTTOM');
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
this.onHide.emit('TOP');
}
console.log(percentage, h, ev.clientY);
this._updatePos(percentage);
}
private _updatePos(pos: number) {
this.pos = pos;
if (pos === 100) {
}
if (this.splitEl1 && this.splitEl2) {
this._renderer.setStyle(
this.splitEl1,
'height',
`${pos}%`,
);
this._renderer.setStyle(
this.splitEl2,
'height',
`${100 - pos}%`,
);
// this._renderer.setStyle(
// this._el.nativeElement,
// 'top',
// `${pos}%`,
// );
}
}
}