nekrochan/static/js/expand.js

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

    setup_events($(".expandable"));

    function setup_events(elements) {
        elements.each(function() {
            $(this).click(function() {
                let src_link = $(this).attr("href");
    
                let is_video = [".mpeg", ".mov", ".mp4", ".webm", ".mkv", ".ogg"].some(
                    (ext) => src_link.endsWith(ext)
                );
        
                if (!is_video) {
                    toggle_image($(this), src_link);
                } else {
                    toggle_video($(this), src_link);
                }
        
                $(this).toggleClass("expanded");
    
                return false;
            })
        })
    }
    
    function toggle_image(parent, src_link) {
        let thumb = parent.find(".thumb");
        let src = parent.find(".src");
    
        if (src.length === 0) {
            thumb.addClass("loading");
    
            parent.append(`<img class="src" src="${src_link}">`);
    
            let src = parent.find(".src");
    
            src.hide();
            src.on("load", function () {
                thumb.removeClass("loading");
                thumb.hide();
                src.show();
    
                parent.closest(".post-files").addClass("float-none-b");
            });
    
            return;
        }
    
        thumb.toggle();
        src.toggle();
    
        parent.closest(".post-files").toggleClass("float-none-b");
    }
    
    function toggle_video(parent, src_link) {
        let expanded = parent.hasClass("expanded");
        let thumb = parent.find(".thumb");
        let src = parent.parent().find(".src");
    
        if (src.length === 0) {
            thumb.addClass("loading");
    
            parent.append('<b class="closer">[Zavřít]<br></b>');
            parent
                .parent()
                .append(
                    `<video class="src" src="${src_link}" controls="" loop=""></video>`
                );
    
            let src = parent.parent().find(".src");
    
            src.hide();
    
            src.on("loadstart", function () {
                thumb.removeClass("loading");
                thumb.hide();
                src.show();
                src.get(0).play();
    
                parent.closest(".post-files").addClass("float-none-b");
            });
    
            return;
        }
    
        thumb.toggle();
        src.toggle();
    
        if (expanded) {
            src.get(0).pause();
            src.get(0).currentTime = 0;
        } else {
            src.get(0).play();
        }
    
        parent.closest(".post-files").toggleClass("float-none-b");
        parent.find(".closer").toggle();
    }    
});