☰

DTF.ru. Show me avatars (NEW)

Показ аватарок пользователей, а также копирование ссылки на аватарку. Курсор на аватарку и Ctrl для её показа, или Ctrl+Shift для копирования URL ссылки в буфер обмена.

目前为 2022-04-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        DTF.ru. Show me avatars (NEW)
  3. // @namespace   https://github.com/TentacleTenticals
  4. // @match       https://dtf.ru/*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      Tentacle Tenticals
  8. // @description Показ аватарок пользователей, а также копирование ссылки на аватарку. Курсор на аватарку и Ctrl для её показа, или Ctrl+Shift для копирования URL ссылки в буфер обмена.
  9. // @homepage https://github.com/TentacleTenticals/DTF-showAvatar
  10. // @license MIT
  11. // ==/UserScript==
  12. /* jshint esversion:6 */
  13.  
  14. (function() {
  15.   'use strict';
  16.   
  17.   window.addEventListener('load', run);
  18. function run(){
  19.   let css = document.createElement('style');
  20.   css.textContent = `
  21.    .searchmenuItem {
  22.      display: block;
  23.      background: white;
  24.      color: black;
  25.      border-radius: 3px;
  26.      text-decoration: unset;
  27.      border: unset;
  28.      padding: 3px 10px 3px 10px;
  29.      width: -webkit-fill-available;
  30.      text-align: center;
  31.      font-size: 12px;
  32.      line-height: 12px;
  33.    }
  34.    .searchmenuItem:hover {
  35.      background: rgb(213, 213, 239);
  36.    }
  37.  
  38.    .srcSearch {
  39.      min-width: 100px;
  40.      min-height: 100px;
  41.      max-height: 500px;
  42.      background: rgb(45, 5, 66);
  43.      position: fixed;
  44.      display: grid;
  45.      grid-template-columns: repeat(1, auto);
  46.      gap: 4px;
  47.      align-content: center;
  48.      justify-content: center;
  49.      align-items: center;
  50.      justify-items: center;
  51.      padding: 10px;
  52.      border-radius: 3px;
  53.      z-index: 1000;
  54.    }`
  55.   document.body.appendChild(css);
  56.  
  57. let mainFilter = new RegExp(`comment__avatar|content-header-author__avatar|subsite-card__avatar|v-header__cover|v-header-avatar|${document.querySelector("div[class='layout__right-column'] div[style^='background-image").className}`),
  58.     commentsRightBarFilter = new RegExp(document.querySelector("div[class='layout__right-column'] div[style^='background-image").className),
  59.     button1Pressed, button2Pressed, button3Pressed, hovered,
  60.     
  61.     // Настройки клавиш. Используйте Control/Shift/Alt/и т.п. НЕ используйте буквы алфавита, цифры, знаки.
  62.     useButton1ForAvatarView = true, // Использовать (true), или не использовать (false) button1 для показа аватарки.
  63.     button1 = 'Control', // Клавиша для показа аватарки.
  64.     button2 = 'Shift', // Клавиша, используемая в сочетании клавиш для копирования URL аватарки в буфер обмена.
  65.     button3 = 'Alt', // Клавиша для показа поискового меню.
  66.     
  67.     // Настройки максимального размера превью аватарки
  68.     userAvatarSize = '400px', // Аватарка пользователя (комментарий).
  69.     userProfileCoverSizeWidth = '990px', // Обложка пользователя в профиле (длина).
  70.     userProfileCoverSizeHeight = '400px', // Обложка пользователя в профиле (ширина).
  71.     userProfileAvatarSize = '400px', // Аватар пользователя в профиле.
  72.     authorAvatarSizeHeader = '400px', // Аватарка подсайта статьи (хеадер).
  73.     authorAvatarSizeFooter = '400px', // Аватарка автора статьи (футер).
  74.     userAvatarSizeCommentsPanel = '250px', // Аватарка пользователя (боковая панель комментариев, aka "live-список" комментариев к статьям).
  75.     
  76.     // Настройка вида превью аватарки
  77.     imageBorderRadius = '3px', // Закругление углов.
  78.     imageBackgroundColor = 'rgba(0, 0, 0, 1)', // Фон превью. Необходим, если аватарка это png и т.п. без фона.
  79.     imageBoxShadow = '0px 0px 6px 2px black', // Тень, оставляемая элементом превью аватарки.
  80.     
  81.     // Список поисковиков, что вы хотите использовать. use:true/false (использовать)/(не использовать).
  82.     // Можно добавить абсолютно любой "поиск по картинкам", главное это получить правильную ссылку для его работы.
  83.     // url: - URL ссылка для работы поиска. name: - как будет называться этот поиск в поисковом меню.
  84.     searches = [
  85.       {url:'http://saucenao.com/search.php?db=999&url=', name:'Saucenao', use:true},
  86.       {url:'https://www.bing.com/images/search?view=detailv2&iss=sbi&FORM=SBIHMP&sbisrc=UrlPaste&q=imgurl:', name:'Bing', use:true},
  87.       {url:'https://www.google.com/searchbyimage?site=search&image_url=', name:'Google', use:true},
  88.       {url:'https://yandex.ru/images/search?rdrnd=296405&rpt=imageview&url=', name:'Yandex', use:true},
  89.       {url:'http://tineye.com/search/?url=', name:'TinEye', use:true},
  90.       {url:'http://iqdb.org/?url=', name:'IQDB', use:true}
  91.     ];
  92.  
  93.    class A {
  94.     constructor({name, searchUrl, targetUrl, elem}) {
  95.       this.e=document.createElement('a');
  96.       this.e.className=`searchmenuItem`
  97.       this.e.textContent=name
  98.       this.e.href=`${searchUrl}${targetUrl}`
  99.       this.e.target='_blank'
  100.       this.e.onclick = function(s){
  101.         s.preventDefault()
  102.         s.stopImmediatePropagation();
  103.         window.open(s.target.href, '_blank');
  104.       }
  105.       elem.appendChild(this.e);
  106.       return this.e;
  107.     }
  108.   }
  109.  
  110.   function check(s){
  111.       if(!useButton1ForAvatarView){
  112.           hovered = s.target;
  113.           return (!button1Pressed && !button2Pressed && !button3Pressed);
  114.       }
  115.       if(useButton1ForAvatarView){
  116.           hovered = s.target;
  117.           return (button1Pressed && !button2Pressed && !button3Pressed);
  118.       }
  119.   }
  120.   
  121.   document.addEventListener('mouseover', hover, true);
  122.   function hover(s){
  123.       if(s.target.classList.value.match(mainFilter) && check(s)){
  124.           if(!document.querySelector(`div[class='avatar-preview']`)){
  125.               let img = new Image();
  126.               img.src = s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1');
  127.               let avatarPreview = document.createElement('div');
  128.               avatarPreview.className = 'avatar-preview';
  129.               avatarPreview.style.position = 'fixed';
  130.               avatarPreview.style.zIndex = '1000';
  131.           if(s.target.classList.value.match(/comment__avatar/)){
  132.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 20}px`;
  133.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
  134.               img.style.maxWidth = userAvatarSize;
  135.               img.style.maxHeight = userAvatarSize;
  136.           }else
  137.           if(s.target.classList.value.match(/v-header-avatar/)){
  138.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 170}px`
  139.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 20}px`
  140.               img.style.maxWidth = userProfileAvatarSize;
  141.               img.style.maxHeight = userProfileAvatarSize;
  142.           }else
  143.           if(s.target.classList.value.match(/v-header__cover/)){
  144.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 300}px`
  145.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 0}px`
  146.               img.style.maxWidth = userProfileCoverSizeWidth;
  147.               img.style.maxHeight = userProfileCoverSizeHeight;
  148.           }else
  149.           if(s.target.classList.value.match(/content-header-author__avatar/)){
  150.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
  151.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
  152.               img.style.maxWidth = authorAvatarSizeHeader;
  153.               img.style.maxHeight = authorAvatarSizeHeader;
  154.           }else
  155.           if(s.target.classList.value.match(/subsite-card__avatar/)){
  156.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 35}px`;
  157.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 50}px`;
  158.               img.style.maxWidth = authorAvatarSizeFooter;
  159.               img.style.maxHeight = authorAvatarSizeFooter;
  160.           }else
  161.           if(s.target.classList.value.match(commentsRightBarFilter)){
  162.               avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
  163.               avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 30}px`;
  164.               img.style.maxWidth = userAvatarSizeCommentsPanel;
  165.               img.style.maxHeight = userAvatarSizeCommentsPanel;
  166.           }
  167.             img.style.borderRadius = imageBorderRadius;
  168.             img.style.backgroundColor = imageBackgroundColor;
  169.             img.style.boxShadow = imageBoxShadow;
  170.             s.target.parentNode.appendChild(avatarPreview);
  171.             document.querySelector(`div[class='avatar-preview']`).appendChild(img);
  172.           }
  173.       }else
  174.       if(s.target.classList.value.match(mainFilter) && !button1Pressed && !button2Pressed && button3Pressed) {
  175.         if(!document.querySelector(`div[class='srcSearch']`) && hovered){
  176.             console.log('Creating menu...');
  177.             let menu = document.createElement('div');
  178.             menu.className = 'srcSearch';
  179.             if(s.target.classList.value.match(/v-header-avatar/)){
  180.                 menu.style.top = `${s.target.getBoundingClientRect().top + 120}px`;
  181.                 menu.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  182.             }else
  183.             {
  184.                 menu.style.top = `${s.target.getBoundingClientRect().top + 20}px`;
  185.                 menu.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
  186.             }
  187.             hovered.parentNode.appendChild(menu);
  188.  
  189.             for(let i = 0; i < searches.length; i++){
  190.                 if(searches[i].use){
  191.                   new A({
  192.                     name: searches[i].name,
  193.                     searchUrl: searches[i].url,
  194.                     targetUrl: hovered.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1'),
  195.                     elem: menu
  196.                   });
  197.                 }
  198.             }
  199.         }
  200.       }else
  201.       if(s.target.classList.value.match(mainFilter) && button1Pressed && button2Pressed && !button3Pressed){
  202.         hovered = s.target;
  203.           navigator.clipboard.writeText(s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1'));
  204.           if(!document.querySelector(`div[class='avatar-link-copyed']`)){
  205.           let alert = document.createElement('div');
  206.           alert.className = 'avatar-link-copyed';
  207.           alert.textContent = 'Ссылка на аватарку успешно скопирована';
  208.           alert.style.position = 'fixed';
  209.           alert.style.zIndex = '1000';
  210.           if(s.target.classList.value.match(/v-header-avatar/)){
  211.               alert.style.top = `${s.target.getBoundingClientRect().top + 60}px`;
  212.               alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  213.           }else
  214.           if(s.target.classList.value.match(/v-header__cover/)){
  215.               alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
  216.               alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  217.           }else
  218.           if(s.target.classList.value.match(/comment__avatar|content-header-author__avatar|subsite-card__avatar/)){
  219.               alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
  220.               alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
  221.           }else
  222.           if(s.target.classList.value.match(commentsRightBarFilter)){
  223.               alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
  224.               alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
  225.           }else
  226.           {
  227.               alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
  228.               alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  229.           }
  230.           alert.style.background = 'rgb(165 235 189)';
  231.           alert.style.borderRadius = '3px';
  232.           alert.style.padding = '3px';
  233.           alert.style.color = 'rgb(0 0 0)';
  234.           alert.style.fontSize = '12px';
  235.           alert.style.lineHeight = '12px';
  236.           alert.style.fontWeight = '500';
  237.           alert.style.boxShadow = '0px 0px 6px 1px black';
  238.           s.target.parentNode.appendChild(alert);
  239.               setTimeout(() => {
  240.                   if(document.querySelector(`div[class='avatar-link-copyed']`)){
  241.                       document.querySelector(`div[class='avatar-link-copyed']`).remove();
  242.                   }
  243.               }, 2000);
  244.           }
  245.       }else
  246.       if(!s.target.classList.value.match(mainFilter) && button1Pressed && !button2Pressed && !button3Pressed){
  247.         hovered = false;
  248.           if(document.querySelector(`div[class='avatar-preview']`)){
  249.               document.querySelector(`div[class='avatar-preview']`).remove();
  250.           }
  251.       }else
  252.       if(!s.target.classList.value.match(mainFilter) && !button1Pressed && !button2Pressed){
  253.         hovered = false;
  254.           if(!useButton1ForAvatarView){
  255.               if(document.querySelector(`div[class='avatar-preview']`)){
  256.                   document.querySelector(`div[class='avatar-preview']`).remove();
  257.               }
  258.           }
  259.       }
  260.   }
  261.   document.addEventListener('keydown', kDown, true)
  262.   function kDown(s){
  263.       if(s.code === `${button1}Left`||s.code === `${button1}Right`||s.code === `${button1}`){
  264.           button1Pressed = true;
  265.         if(hovered){
  266.           hovered.dispatchEvent(new MouseEvent('mouseover', {
  267.             view: window,
  268.             bubbles: true,
  269.             cancelable: true
  270.           }));
  271.         }
  272.       }else
  273.       if(s.code === `${button2}Left`||s.code === `${button2}Right`||s.code === `${button2}`){
  274.           button2Pressed = true;
  275.           if(hovered){
  276.             hovered.dispatchEvent(new MouseEvent('mouseover', {
  277.               view: window,
  278.               bubbles: true,
  279.               cancelable: true
  280.             }));
  281.           }
  282.       }else
  283.       if(s.code === `${button3}Left`||s.code === `${button3}Right`||s.code === `${button3}`){
  284.           button3Pressed = true;
  285.         if(hovered){
  286.           hovered.dispatchEvent(new MouseEvent('mouseover', {
  287.             view: window,
  288.             bubbles: true,
  289.             cancelable: true
  290.           }));
  291.         }
  292.       }
  293.   }
  294.   document.addEventListener('keyup', kUp, true)
  295.   function kUp(s){
  296.       if(s.code === `${button1}Left`||s.code === `${button1}Right`||s.code === `${button1}`){
  297.           button1Pressed = false;
  298.       }else
  299.       if(s.code === `${button2}Left`||s.code === `${button2}Right`||s.code === `${button2}`){
  300.           button2Pressed = false;
  301.       }else
  302.       if(s.code === `${button3}Left`||s.code === `${button3}Right`||s.code === `${button3}`){
  303.           button3Pressed = false;
  304.           if(document.querySelector(`div[class='srcSearch']`)){
  305.               document.querySelector(`div[class='srcSearch']`).remove();
  306.           }
  307.       }
  308.       if(document.querySelector(`div[class='avatar-preview']`)){
  309.           document.querySelector(`div[class='avatar-preview']`).remove();
  310.       }
  311.   }
  312.   ///
  313. }
  314. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址