65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { BaseElement } from "../../../shared/_base";
|
|
import { CodeEditor } from "../code-editor/code-editor";
|
|
import './resize-handle.less';
|
|
|
|
export class ResizeHandle extends BaseElement {
|
|
|
|
public isDowned = false;
|
|
|
|
onInit(): void {
|
|
this.setDragEvents();
|
|
}
|
|
|
|
setDragEvents() {
|
|
this.addEventListener("mousedown", (evt: MouseEvent) => {
|
|
this.isDowned = true;
|
|
this.getIframe().style.display = "none";
|
|
});
|
|
|
|
window.addEventListener("mousemove", (evt: MouseEvent) => {
|
|
if (this.isDowned) {
|
|
this.setPosition(evt.pageX);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("mouseup", (evt: MouseEvent) => {
|
|
if (this.isDowned) {
|
|
this.getIframe().style.display = "block";
|
|
this.isDowned = false;
|
|
}
|
|
});
|
|
|
|
this.addEventListener("touchstart", (evt: TouchEvent) => {
|
|
this.isDowned = true;
|
|
this.getIframe().style.display = "none";
|
|
});
|
|
|
|
window.addEventListener("touchmove", (evt: TouchEvent) => {
|
|
if (this.isDowned) {
|
|
this.setPosition(evt.touches[0].pageX);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("touchend", (evt: TouchEvent) => {
|
|
if (this.isDowned) {
|
|
this.getIframe().style.display = "block";
|
|
this.isDowned = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
setPosition(x: number) {
|
|
var t = this.getTarget();
|
|
|
|
t.style.minWidth = x + "px";
|
|
t.style.maxWidth = x + "px";
|
|
}
|
|
|
|
getTarget() {
|
|
return <CodeEditor>this.find("code-editor");
|
|
}
|
|
|
|
getIframe() {
|
|
return <HTMLIFrameElement>this.find("iframe");
|
|
}
|
|
} |