resize-handle.ts

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");
    }
}