Raw Source Toggle Dropdown

• Minified Source

flxemt / Mini-posters

// ==UserScript==
// @name         Mini-posters
// @namespace    https://shikimori.me/
// @downloadURL  https://openuserjs.org/install/flxemt/Mini-posters.user.js
// @updateURL    https://openuserjs.org/meta/flxemt/Mini-posters.meta.js
// @version      1.0.2
// @description  Mini-posters in users' lists
// @author       FLX
// @match        https://shikimori.me/*
// @grant        none
// @license      MIT
// ==/UserScript==

function loadMiniPosters() {
    if(!window.location.href.includes('/list/')) return;
    $(".l-content").on("postloader:success", () => {
        loadMiniPosters();
    });
    let additionalCSS = document.createElement('style');
    document.head.appendChild(additionalCSS);
    additionalCSS.appendChild(document.createTextNode(`.p-user_rates-index .list-lines tr.editable, .p-user_rates-index .list-lines tr td { height: 46px; vertical-align: middle; } .b-table td { padding: 0; } .p-user_rates-index .list-lines tr .name a { margin-left: 50px; } .added-img { position: absolute; width: 32.56px; height: inherit; margin-top: -11px; } .p-user_rates-index .list-lines .selectable:hover { filter: none !important; transform: none !important; }`));
    document.querySelectorAll('.user_rate.selectable').forEach((item, index) => {
        if (item.querySelector('.name .added-img') != null) return;
        let miniPoster = document.createElement('img');
        let posterLink = item.querySelector('.name > a');
        item.querySelector('.name').insertBefore(miniPoster, posterLink);
        miniPoster.classList = 'added-img';
        let imageLink = posterLink.href.slice((posterLink.href.includes('/w') || posterLink.href.includes('/x') || posterLink.href.includes('/y') || posterLink.href.includes('/z')) ? posterLink.href.lastIndexOf('/') + 2 : posterLink.href.lastIndexOf('/') + 1, posterLink.href.length);
        miniPoster.onerror = () => {
            miniPoster.src = 'https://dere.shikimori.me/assets/globals/missing_preview.jpg';
        };
        miniPoster.src = (posterLink.href.includes('/animes/')) ? `https://desu.shikimori.me/system/animes/preview/${imageLink}.jpg` : `https://desu.shikimori.me/system/mangas/preview/${imageLink}.jpg`;
        if (posterLink.innerText.length > 85) posterLink.style.fontSize = '.5vw';
        if (item.querySelector('.name .rate-text').hasChildNodes()) {
            item.querySelector('.name .rate-text div').style.marginTop = '30px';
            changeCommentStyleVisibility(item, true);
        }
    });
    // Reload additional styles after adding comment
    document.querySelectorAll('.user_rate.selectable.editable').forEach((item) => {
        item.addEventListener('click', () => {
            setTimeout(() => {
                document.querySelector('#submit_user_rate').addEventListener('click', e => {
                    let targetElement = document.querySelector('.edit-form').previousSibling;
                    if (document.querySelector('#user_rate_text').value.trim() == '') {
                        changeCommentStyleVisibility(targetElement, false);
                    }
                    else {
                        changeCommentStyleVisibility(targetElement, true);
                        setTimeout(() => { targetElement.querySelector('.name .rate-text div').style.marginTop = '30px' }, 500);
                    }
                });
            }, 500);
        });
    });
}

function changeCommentStyleVisibility(targetElement, isVisible) {
    if (isVisible) {
        targetElement.querySelector('.added-img').style.marginTop = '0px';
        targetElement.querySelector('.name > a').style.position = 'relative';
        targetElement.querySelector('.name > a').style.top = '10px';
    }
    else {
        targetElement.querySelector('.added-img').style.marginTop = '';
        targetElement.querySelector('.name > a').style.position = '';
        targetElement.querySelector('.name > a').style.top = '';
    }
}

function ready(fn) {
    document.addEventListener('page:load', fn);
    document.addEventListener('turbolinks:load', fn);
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") fn();
    else document.addEventListener('DOMContentLoaded', fn);
}

ready(loadMiniPosters);