nekrochan/static/js/hover.js

$.fn.isInViewport = function () {
    let element_top = $(this).offset().top;
    let element_bottom = element_top + $(this).outerHeight();
    let viewport_top = $(window).scrollTop();
    let viewport_bottom = viewport_top + $(window).height();

    return element_bottom > viewport_top && element_top < viewport_bottom;
};

$(function () {
    let cache = {};
    let hovering = false;
    let preview_w = 0;
    let preview_h = 0;

    $(window).on("setup_post_events", function (event) {
        setup_events($(`#${event.id}`).find(".quote"));
    });

    setup_events($(".quote"));

    function setup_events(elements) {
        elements.on("mouseenter", function (event) {
            toggle_hover($(this), event);
        });

        elements.on("mouseout", function (event) {
            toggle_hover($(this), event);
        });

        elements.on("click", function (event) {
            toggle_hover($(this), event);
        });

        elements.on("mousemove", move_preview);
    }

    function toggle_hover(quote, event) {
        hovering = event.type === "mouseenter";

        let path_segments = quote.prop("pathname").split("/");
        let board = path_segments[2];
        let id = quote.prop("hash").slice(1);

        let post = $(`#${id}[data-board="${board}"]`);

        if (post.length > 0) {
            if (post.isInViewport()) {
                post.toggleClass("highlighted", hovering);
                return;
            }

            if (hovering) {
                create_preview(post.clone(), event.clientX, event.clientY);
                return;
            }
        }

        if ($("#preview").length > 0 && !hovering) {
            remove_preview();
            return;
        }

        let html = cache[`${board}/${id}`];

        if (html) {
            post = $($.parseHTML(html));
            create_preview(post, event.clientX, event.clientY);
            return;
        }

        quote.css("cursor", "wait");

        try {
            $.get(`/post-json/${board}/${id}`, function (data) {
                quote.css("cursor", "");

                html = data.html;
                cache[`${board}/${id}`] = html;
                post = $($.parseHTML(html));

                if (hovering)
                    create_preview(post, event.clientX, event.clientY);
            });
        } catch (e) {
            quote.css("cursor", "");
            console.error(e);
        }
    }

    function move_preview(event) {
        position_preview($("#preview"), event.clientX, event.clientY);
    }

    function create_preview(preview, x, y) {
        preview.attr("id", "preview");
        preview.addClass("box");
        preview.removeClass("highlighted");
        preview.css("position", "fixed");

        let existing = $("#preview");

        if (existing.length > 0) {
            existing.replaceWith(preview);
        } else {
            preview.appendTo("body");
        }

        preview_w = preview.outerWidth();
        preview_h = preview.outerHeight();

        position_preview(preview, x, y);

        $(window).trigger({ type: "setup_post_events", id: "preview" });
    }

    function remove_preview() {
        $("#preview").remove();
    }

    function position_preview(preview, x, y) {
        let ww = $(window).width();
        let wh = $(window).height();

        preview.css("left", `${Math.min(x + 4, ww - preview_w)}px`);

        if (preview_h + y < wh) {
            preview.css("top", `${y + 4}px`);
            preview.css("bottom", "");
        } else {
            preview.css("bottom", `${wh - y + 4}px`);
            preview.css("top", "");
        }
    }
});