☰

DTF Avatar Zoom

Zoom user avatars on dtf.ru

目前为 2025-02-26 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         DTF Avatar Zoom
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.7
  5. // @description  Zoom user avatars on dtf.ru
  6. // @author       Avicenna
  7. // @match        https://dtf.ru/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Функция для создания увеличенного медиа (изображение или видео)
  16.     function createZoomedMedia(src, isVideo) {
  17.         const overlay = document.createElement('div');
  18.         overlay.style.position = 'fixed';
  19.         overlay.style.top = '0';
  20.         overlay.style.left = '0';
  21.         overlay.style.width = '100%';
  22.         overlay.style.height = '100%';
  23.         overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  24.         overlay.style.display = 'flex';
  25.         overlay.style.justifyContent = 'center';
  26.         overlay.style.alignItems = 'center';
  27.         overlay.style.zIndex = '1000';
  28.         overlay.style.cursor = 'zoom-out';
  29.  
  30.         let mediaElement;
  31.         if (isVideo) {
  32.             mediaElement = document.createElement('video');
  33.             mediaElement.src = src;
  34.             mediaElement.autoplay = true;
  35.             mediaElement.loop = true;
  36.             mediaElement.controls = true; // Добавляем элементы управления для видео
  37.             mediaElement.style.maxWidth = '90%';
  38.             mediaElement.style.maxHeight = '90%';
  39.             mediaElement.style.borderRadius = '8px';
  40.         } else {
  41.             mediaElement = document.createElement('img');
  42.             mediaElement.src = src;
  43.             mediaElement.style.maxWidth = '90%';
  44.             mediaElement.style.maxHeight = '90%';
  45.             mediaElement.style.borderRadius = '8px';
  46.         }
  47.  
  48.         overlay.appendChild(mediaElement);
  49.         document.body.appendChild(overlay);
  50.  
  51.         // Закрытие при клике на оверлей
  52.         overlay.addEventListener('click', () => {
  53.             document.body.removeChild(overlay);
  54.         });
  55.     }
  56.  
  57.     // Обработчик клика на аватарку
  58.     function handleAvatarClick(event) {
  59.         const avatarLink = event.target.closest('a.author__avatar');
  60.         if (avatarLink) {
  61.             event.preventDefault(); // Отменяем стандартное действие (переход по ссылке)
  62.             event.stopPropagation(); // Останавливаем всплытие события
  63.  
  64.             // Сохраняем оригинальные атрибуты и содержимое ссылки
  65.             const originalHref = avatarLink.href;
  66.             const originalRouterLink = avatarLink.getAttribute('data-router-link');
  67.             const originalGtmClick = avatarLink.getAttribute('data-gtm-click');
  68.             const originalInnerHTML = avatarLink.innerHTML;
  69.  
  70.             // Временно заменяем ссылку на span
  71.             const span = document.createElement('span');
  72.             span.innerHTML = originalInnerHTML;
  73.             avatarLink.parentNode.replaceChild(span, avatarLink);
  74.  
  75.             // Проверяем, является ли аватарка видео
  76.             const video = span.querySelector('video');
  77.             const img = span.querySelector('img');
  78.  
  79.             if (video) {
  80.                 // Если это видео, используем его src
  81.                 const src = video.src.replace('/scale_crop/', '/'); // Убираем параметры масштабирования
  82.                 createZoomedMedia(src, true);
  83.             } else if (img) {
  84.                 // Если это изображение, используем его src
  85.                 const src = img.src.replace('/scale_crop/', '/'); // Убираем параметры масштабирования
  86.                 createZoomedMedia(src, false);
  87.             }
  88.  
  89.             // Восстанавливаем ссылку после небольшой задержки
  90.             setTimeout(() => {
  91.                 span.parentNode.replaceChild(avatarLink, span);
  92.                 avatarLink.href = originalHref;
  93.                 avatarLink.setAttribute('data-router-link', originalRouterLink);
  94.                 avatarLink.setAttribute('data-gtm-click', originalGtmClick);
  95.                 avatarLink.innerHTML = originalInnerHTML;
  96.             }, 100); // 100 мс достаточно для предотвращения перехода
  97.         }
  98.     }
  99.  
  100.     // Добавляем обработчик клика на все аватарки
  101.     document.addEventListener('click', handleAvatarClick);
  102.     document.addEventListener('mousedown', handleAvatarClick);
  103.  
  104.     // Дополнительно отключаем переход по ссылке через контекстное меню
  105.     document.addEventListener('contextmenu', handleAvatarClick);
  106. })();