☰

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 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Change a card size in darkino
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Supprimer les styles en ligne des images et ajuster la taille et la marge des cartes sur une page web
  6. // @author       Mtx1
  7. // @match        https://www2.darkino.net/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const images = document.querySelectorAll('img[loading="lazy"]');
  15.     const cards = document.querySelectorAll('.home-page-categories .videos .video-list.short, .video-latest-list.video-wrapper.short');
  16.  
  17.     function removeImageInlineStyles() {
  18.         for (let img of images) {
  19.             img.removeAttribute('style');
  20.         }
  21.     }
  22.  
  23.     function resizeCards(size) {
  24.         for (let card of cards) {
  25.             card.style.width = size + 'px';
  26.         }
  27.     }
  28.  
  29.     function adjustCardMargin(margin) {
  30.         for (let card of cards) {
  31.             card.style.margin = margin + 'px';
  32.         }
  33.     }
  34.  
  35.     const slider = document.createElement('input');
  36.     slider.type = 'range';
  37.     slider.min = '100';
  38.     slider.max = '300';
  39.     slider.value = localStorage.getItem('cardSize') || '300';
  40.     slider.style.marginLeft = '10px';
  41.  
  42.     const valueDisplay = document.createElement('span');
  43.     const percentage = Math.round((((slider.value - 100) / 200) * 100));
  44.     valueDisplay.textContent = `${percentage}%`;
  45.     valueDisplay.style.marginLeft = '5px';
  46.  
  47.     slider.addEventListener('input', (event) => {
  48.         const size = parseInt(event.target.value);
  49.         const percentage = Math.round(((size - 100) / 200) * 100);
  50.         valueDisplay.textContent = `${percentage}%`;
  51.         resizeCards(size);
  52.         adjustCardMargin(size / 10);
  53.         localStorage.setItem('cardSize', size);
  54.     });
  55.  
  56.     const container = document.querySelector('.flex.justify-center.p-6');
  57.     container.appendChild(slider);
  58.     container.appendChild(valueDisplay);
  59.  
  60.     removeImageInlineStyles();
  61.  
  62.     const savedCardSize = localStorage.getItem('cardSize');
  63.     if (savedCardSize) {
  64.         resizeCards(savedCardSize);
  65.         adjustCardMargin(savedCardSize / 10);
  66.     }
  67. })();