☰

Better Gallections

Do horizontal folders bother you? What about those huge titles and wasted space?

// ==UserScript==
// @name        Better Gallections
// @version     4.0.1
// @description Do horizontal folders bother you? What about those huge titles and wasted space?
// @author      Valognir (https://www.deviantart.com/valognir)
// @namespace   https://greasyfork.org/en/scripts/404189-better-gallections
// @grant       GM_addStyle
// @run-at      document-start

// @match       https://www.deviantart.com/*
// @exclude     https://www.deviantart.com/_nsfgfb/?realEstateId=*

// ==/UserScript==

(function() {
    'use strict';

    var folderlinks;
    var folderscontainer;

    function changeLayout() {
        folderscontainer = folderlinks[0].parentNode.parentNode;
        folderscontainer.style.width = '250px';
        folderscontainer.style.height = 'calc(100vh - 140px)';
        folderscontainer.style.maxHeight = 'calc(100vh - 121px)';
        folderscontainer.style.overflow = 'hidden scroll';
        folderscontainer.style.scrollbarWidth = 'thin';
        folderscontainer.style.scrollbarColor = 'rgba(155, 155, 155, 0.5) transparent';
        folderscontainer.style.display = 'inline-block';
        folderscontainer.style.verticalAlign = 'top';

        var folderssection = folderscontainer.parentNode;
        folderssection.style.width = '250px';
        folderssection.style.margin = '-39px 0 0 -290px';
        folderssection.style.padding = '0 8px 0 0';
        folderssection.style.overflow = 'hidden';
        folderssection.style.float = 'left';
        folderssection.style.height = 'auto';
        folderssection.style.position = 'sticky';
        folderssection.style.top = '130px';

        if (folderssection.parentNode.id === 'content') {
            folderssection.parentNode.parentNode.removeAttribute("style");
        }

        var contentcontainer = folderssection.parentNode;
        contentcontainer.style.width = 'calc(100% - 290px)';
        contentcontainer.style.minHeight = '100vh';
        contentcontainer.style.marginLeft = '290px';

        var lrbuttons = folderssection.querySelectorAll('button[aria-hidden="true"]');
        lrbuttons.forEach(function(element) {
            element.style.display = 'none'
        });

        folderlinks.forEach(function(element) {

            if (element.querySelector('span:last-child')) {
                if (element.querySelector('span:last-child').textContent.trim() === "0 deviations") {
                    element.style.opacity = '0.5';
                }
            }

            var folder = element.parentNode;
            folder.style.margin = '0 0 16px';
            folder.style.overflow = 'hidden';

            if (!element.classList.contains('BGclickerAttached')) {

                element.classList.add('BGclickerAttached');
                element.addEventListener("click", function() {
                    window.scrollTo(0, 335);
                });
            }

            if (element.querySelector('img')) { // Thumbnail
                var folderimg = element.querySelector('img');
                folderimg.style.height = '227px';
            } else if (element.querySelector('section')) { // Text
                folderimg = element.querySelector('section');
                folderimg.style.height = '210px';
                folderimg.style.paddingTop = '30px';
                folderimg.style.justifyContent = 'flex-start';
            } else if (element.querySelector('div > div > div[style]')) { // Empty
                folderimg = element.querySelector('div > div > div[style]');
                folderimg.style.height = '227px';
            }
            if (folderimg) {
                folderimg.style.width = '248px';
                var folderimgcontainer = folderimg.parentNode;
                folderimgcontainer.style.width = '248px';
                folderimgcontainer.style.height = '210px';
                folderimgcontainer.style.borderRadius = '4px';
            }

            var foldertitle = element.firstElementChild.lastElementChild;
            foldertitle.style.margin = '-60px 0 0 0';
            foldertitle.style.textShadow = `0 0 5px ${bgcolor}`;
            var bgcolor = getComputedStyle(foldertitle).getPropertyValue('--g-bg-secondary');
            foldertitle.firstElementChild.style.padding = '4px 10px';
            foldertitle.firstElementChild.style.background = `linear-gradient(132deg, ${bgcolor} 0%, ${bgcolor}40 70%, transparent 88%)`;
            element.firstElementChild.style.padding = '0';

            var ughlit = element.querySelector('section[data-type="nano"]');
            if (ughlit) {
                console.log("AAAAA");
                ughlit.style.paddingTop = "0px";
                ughlit.querySelector('div:last-child>div:last-child').style.fontSize = '14px';
                ughlit.querySelector('div:last-child>div:last-child').style.marginTop = '15px';
                ughlit.querySelector('div:last-child>div:last-child').style.display = "-webkit-box";
                ughlit.querySelector('div:last-child>div:last-child').style.webkitBoxOrient = "vertical";
                ughlit.querySelector('div:last-child>div:last-child').style.webkitLineClamp = "2";
                ughlit.querySelector('div:last-child>div:last-child').style.textOverflow = 'ellipsis';
                ughlit.querySelector('div:first-child').style.flex = 'unset';
                ughlit.querySelector('div:first-child').style.height = '50px';
                ughlit.querySelector('div:first-child h3').style.fontSize = '20px';
            }
        });
    }

    function waitForFolders() {
        folderlinks = document.querySelectorAll('section>a[href*="/gallery/"], section>a[href*="/favourites/"], section>a[href*="/private-collections/"]');
        if (folderlinks.length > 0) {
            changeLayout();
        } else {
            setTimeout(waitForFolders, 100);
        }
    }

    function onmutation(mutations) {
        checkForGallection();
    }

    function checkForGallection() {
        if (window.location.pathname.includes("/gallery") || window.location.pathname.includes("/favourites") || window.location.pathname.includes("/private-collections")) {
            waitForFolders();
        }
    }

    checkForGallection();
    document.addEventListener("click", () => {
        setTimeout(() => {
            checkForGallection();
        }, 100);
    });

    document.addEventListener("keydown", (e) => {
        if (e.key === "Enter") {

            setTimeout(() => {
                checkForGallection();
            }, 100);
        }
    });

    window.addEventListener('popstate', function (event) {
        setTimeout(() => {
            checkForGallection();
        }, 100);
    });

    window.addEventListener('popstate', function (event) {
        setTimeout(() => {
            checkForGallection();
        }, 100);
    });
})();