nekrochan/static/js/post-form.js

$(function () {
    $(".open-post-form").click(function () {
        $("#post-form").attr("data-visible", true);

        return false;
    });

    $(".close-post-form").click(function () {
        if (document.location.hash == "#post-form") {
            document.location.hash = "";
        }

        $("#post-form").attr("data-visible", false);

        return false;
    });
});

// Stolen and modified code from jschan
$(function () {
    let dragging = false;
    let x_offset = 0;
    let y_offset = 0;
    let form = $("#post-form");
    let handle = $("#post-form-handle");

    let saved_top = window.localStorage.getItem("post_form_top");
    let saved_left = window.localStorage.getItem("post_form_left");

    if (saved_top) {
        form.css("top", saved_top);
    }
    
    if (saved_left) {
        form.css("left", saved_left);
        form.css("right", "auto")
    }

    handle.on("mousedown", start);
    handle.get(0).addEventListener("touchstart", start, { passive: true });
    $(document).on("mouseup", stop);
    $(document).on("touchend", stop);
    $(window).on("resize", update_max);
    $(window).on("orientationchange", update_max);

    function start(event) {
        dragging = true;

        const rect = form.get(0).getBoundingClientRect();

        switch (event.type) {
            case "mousedown":
                x_offset = event.clientX - rect.left;
                y_offset = event.clientY - rect.top;
                $(window).on("mousemove", drag);
                break;
            case "touchstart":
                event.preventDefault();
                event.stopPropagation();
                x_offset = event.targetTouches[0].clientX - rect.left;
                y_offset = event.targetTouches[0].clientY - rect.top;
                $(window).on("touchmove", drag);
                break;
            default:
                break;
        }
    }

    function drag(event) {
        if (!dragging) {
            return;
        }

        update_max(event);

        switch (event.type) {
            case "mousemove":
                form.css(
                    "left",
                    `${in_bounds(
                        event.clientX,
                        x_offset,
                        form.outerWidth(),
                        document.documentElement.clientWidth
                    )}px`
                );
                form.css(
                    "top",
                    `${in_bounds(
                        event.clientY,
                        y_offset,
                        form.outerHeight(),
                        document.documentElement.clientHeight
                    )}px`
                );
                break;
            case "touchmove":
                form.css(
                    "left",
                    `${in_bounds(
                        event.targetTouches[0].clientX,
                        x_offset,
                        form.outerWidth(),
                        document.documentElement.clientWidth
                    )}px`
                );
                form.css(
                    "top",
                    `${in_bounds(
                        event.targetTouches[0].clientY,
                        y_offset,
                        form.outerHeight(),
                        document.documentElement.clientHeight
                    )}px`
                );
                break;
            default:
                break;
        }

        form.css("right", "auto");

        window.localStorage.setItem("post_form_top", form.css("top"));
        window.localStorage.setItem("post_form_left", form.css("left"));
    }

    function stop() {
        if (dragging) {
            dragging = false;
            $(window).off("mousemove");
            $(window).off("touchmove");
        }
    }

    function update_max() {
        let rect = form.get(0).getBoundingClientRect();

        if (rect.width === 0) {
            return;
        }

        if (rect.right > document.documentElement.clientWidth) {
            form.css("left", 0);
        }

        if (rect.bottom > document.documentElement.clientHeight) {
            form.css("top", 0);
        }

        rect = form.get(0).getBoundingClientRect();

        form.css(
            "max-height",
            `${document.documentElement.clientHeight - rect.top}px`
        );

        form.css(
            "max-width",
            `${document.documentElement.clientWidth - rect.left}px`
        );
    }

    function in_bounds(pos, offset, size, limit) {
        if (pos - offset <= 0) {
            return 0;
        } else if (pos - offset + size > limit) {
            return limit - size;
        } else {
            return pos - offset;
        }
    }
});