Kbin enhancement suite

// ==UserScript==
// @name        kbin.social image hover
// @version     0.1
// @description Expand images by clicking, added collapse comment button
// @author      [email protected]
// @match       https://kbin.social/*
// @grant       none
// ==/UserScript==
//Feel free to alter this code however you want, credit me if you want but don't worry about it.

(function() {
    'use strict';

    let figures = document.querySelectorAll('figure a img');
    let isDragging = false;
    let initialPosition;

    figures.forEach(img => {
        img.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent the <a> tag from navigating

            // Find the footer for the article containing this image
            let footer = e.target.closest('article').querySelector('footer');

            let overlay = footer.querySelector('#imgOverlay');
            if (!overlay) {
                let src = e.target.getAttribute('src');
                overlay = document.createElement('img');
                overlay.src = src;
                overlay.style.width = '300px'; // Set initial width
                overlay.id = 'imgOverlay'; // ID to easily remove it later
                overlay.style.userSelect = 'none'; // Prevent the image from being highlighted
                overlay.ondragstart = function() { return false; }; // Prevent the image from being dragged
                overlay.addEventListener('mousedown', startDrag);
                overlay.addEventListener('mousemove', drag);
                overlay.addEventListener('mouseup', endDrag);
                overlay.addEventListener('mouseleave', endDrag);
                footer.appendChild(overlay);
            } else {
                // If overlay is already present, remove it
                overlay.remove();
            }
        });
    });

    function startDrag(e) {
        isDragging = true;
        initialPosition = e.clientX; // Get the initial x-position of the mouse
    }

    function drag(e) {
        if (isDragging) {
            let widthChange = e.clientX - initialPosition; // Calculate the change in mouse position
            e.target.style.width = (e.target.offsetWidth + widthChange) + 'px'; // Change the width based on the mouse movement
            initialPosition = e.clientX; // Update the initial position for the next mousemove event
        }
    }

    function endDrag(e) {
        isDragging = false;
    }
})();

//comment collapse

(function() {
    'use strict';

    let blockquotes = document.querySelectorAll('blockquote');
    let levelRegex = /comment-level--(\d+)/;

    blockquotes.forEach(blockquote => {
        // Get the first figure element inside the blockquote
        let figure = blockquote.querySelector('figure');

        if (!figure) {
            return;
        }

        // Add a collapse button
        let button = document.createElement('div');
        button.style.backgroundColor = 'rgb(28, 28, 28)';
        button.style.width = '35px';
        button.style.height = '35px';
        button.style.position = 'absolute';
        button.style.top = '50px';  // Position it below the figure
        button.style.left = '3px';
        button.style.cursor = 'pointer';
        button.style.zIndex = '100';
        button.style.display = 'flex';
        button.style.justifyContent = 'center';
        button.style.alignItems = 'center';
        button.style.fontSize = '20px';
        button.style.color = 'white';
        button.textContent = '-'; // "-" symbol
        button.addEventListener('mouseenter', () => button.style.backgroundColor = 'rgb(48, 48, 48)');
        button.addEventListener('mouseleave', () => button.style.backgroundColor = 'rgb(28, 28, 28)');
        button.addEventListener('click', e => {
            e.stopPropagation(); // Stop event from propagating to blockquote click handler
            blockquote.style.height = '60px';
            blockquote.style.overflow = 'hidden';
            hideChildComments(blockquote);
        });

        // Add the button to the beginning of the figure
        figure.style.position = 'relative';  // To position the button relative to the figure
        figure.insertBefore(button, figure.firstChild);

        // Add a click handler to the blockquote to expand it
        blockquote.addEventListener('click', () => {
            blockquote.style.height = 'auto';
            showChildComments(blockquote);
        });
    });

    function hideChildComments(blockquote) {
        let level = getLevel(blockquote);
        let next = blockquote.nextElementSibling;
        while (next && getLevel(next) > level) {
            next.style.height = '0';
          	next.style.marginTop = '-2px';
            next.style.padding = '0';
            next.style.visibility = 'hidden';
            next = next.nextElementSibling;
        }
    }

    function showChildComments(blockquote) {
        let level = getLevel(blockquote);
        let next = blockquote.nextElementSibling;
        while (next && getLevel(next) > level) {
            next.style.height = 'auto';
          	next.style.marginTop = '0';
            next.style.visibility = 'visible';
            next.style.padding = '16px 8px 16px 8px';
            next = next.nextElementSibling;
        }
    }

    function getLevel(blockquote) {
        let level = levelRegex.exec(blockquote.className);
        return level ? parseInt(level[1]) : 0;
    }
})();