☰

Change a card size in darkino

Ce script Tampermonkey ajuste la taille et la marge des cartes sur une page web et supprime les styles des images. Un curseur permet de modifier la taille des cartes, et la valeur en pourcentage est affichée à côté. La taille choisie est sauvegardée pour une utilisation sur d'autres pages du site.

// ==UserScript==
// @name         Change a card size in darkino
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Ce script Tampermonkey ajuste la taille et la marge des cartes sur une page web et supprime les styles des images. Un curseur permet de modifier la taille des cartes, et la valeur en pourcentage est affichée à côté. La taille choisie est sauvegardée pour une utilisation sur d'autres pages du site.
// @author       M1tx
// @match        https://www2.darkino.net/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const images = document.querySelectorAll('img[loading="lazy"]');
    const cards = document.querySelectorAll('.home-page-categories .videos .video-list.short, .video-latest-list.video-wrapper.short');

    function removeImageInlineStyles() {
        for (let img of images) {
            img.removeAttribute('style');
        }
    }

    function resizeCards(size) {
        for (let card of cards) {
            card.style.width = size + 'px';
        }
    }

    function adjustCardMargin(margin) {
        for (let card of cards) {
            card.style.margin = margin + 'px';
        }
    }

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = '100';
    slider.max = '300';
    slider.value = localStorage.getItem('cardSize') || '300';
    slider.style.marginLeft = '10px';

    const valueDisplay = document.createElement('span');
    const percentage = Math.round((((slider.value - 100) / 200) * 100));
    valueDisplay.textContent = `${percentage}%`;
    valueDisplay.style.marginLeft = '5px';

    slider.addEventListener('input', (event) => {
        const size = parseInt(event.target.value);
        const percentage = Math.round(((size - 100) / 200) * 100);
        valueDisplay.textContent = `${percentage}%`;
        resizeCards(size);
        adjustCardMargin(size / 10);
        localStorage.setItem('cardSize', size);
    });

    const container = document.querySelector('.flex.justify-center.p-6');
    container.appendChild(slider);
    container.appendChild(valueDisplay);

    removeImageInlineStyles();

    const savedCardSize = localStorage.getItem('cardSize');
    if (savedCardSize) {
        resizeCards(savedCardSize);
        adjustCardMargin(savedCardSize / 10);
    }
})();