☰

Change a card size in darkino

Supprimer les styles en ligne des images et ajuster la taille et la marge des cartes sur une page web

目前為 2023-04-08 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Change a card size in darkino
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Supprimer les styles en ligne des images et ajuster la taille et la marge des cartes sur une page web
// @author       Mtx1
// @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);
    }
})();