☰

DTF.ru. Show me avatars (NEW)

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

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

// ==UserScript==
// @name        DTF.ru. Show me avatars (NEW)
// @namespace   https://github.com/TentacleTenticals
// @match       https://dtf.ru/*
// @grant       none
// @version     1.0
// @author      Tentacle Tenticals
// @description Показ аватарок пользователей, а также копирование ссылки на аватарку. Курсор на аватарку и Ctrl для её показа, или Ctrl+Shift для копирования URL ссылки в буфер обмена.
// @homepage https://github.com/TentacleTenticals/DTF-showAvatar
// @license MIT
// ==/UserScript==
/* jshint esversion:6 */

(function() {
  'use strict';
  
  window.addEventListener('load', run);
function run(){
  let css = document.createElement('style');
  css.textContent = `
   .searchmenuItem {
     display: block;
     background: white;
     color: black;
     border-radius: 3px;
     text-decoration: unset;
     border: unset;
     padding: 3px 10px 3px 10px;
     width: -webkit-fill-available;
     text-align: center;
     font-size: 12px;
     line-height: 12px;
   }
   .searchmenuItem:hover {
     background: rgb(213, 213, 239);
   }

   .srcSearch {
     min-width: 100px;
     min-height: 100px;
     max-height: 500px;
     background: rgb(45, 5, 66);
     position: fixed;
     display: grid;
     grid-template-columns: repeat(1, auto);
     gap: 4px;
     align-content: center;
     justify-content: center;
     align-items: center;
     justify-items: center;
     padding: 10px;
     border-radius: 3px;
     z-index: 1000;
   }`
  document.body.appendChild(css);

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}`),
    commentsRightBarFilter = new RegExp(document.querySelector("div[class='layout__right-column'] div[style^='background-image").className),
    button1Pressed, button2Pressed, button3Pressed, hovered,
    
    // Настройки клавиш. Используйте Control/Shift/Alt/и т.п. НЕ используйте буквы алфавита, цифры, знаки.
    useButton1ForAvatarView = true, // Использовать (true), или не использовать (false) button1 для показа аватарки.
    button1 = 'Control', // Клавиша для показа аватарки.
    button2 = 'Shift', // Клавиша, используемая в сочетании клавиш для копирования URL аватарки в буфер обмена.
    button3 = 'Alt', // Клавиша для показа поискового меню.
    
    // Настройки максимального размера превью аватарки
    userAvatarSize = '400px', // Аватарка пользователя (комментарий).
    userProfileCoverSizeWidth = '990px', // Обложка пользователя в профиле (длина).
    userProfileCoverSizeHeight = '400px', // Обложка пользователя в профиле (ширина).
    userProfileAvatarSize = '400px', // Аватар пользователя в профиле.
    authorAvatarSizeHeader = '400px', // Аватарка подсайта статьи (хеадер).
    authorAvatarSizeFooter = '400px', // Аватарка автора статьи (футер).
    userAvatarSizeCommentsPanel = '250px', // Аватарка пользователя (боковая панель комментариев, aka "live-список" комментариев к статьям).
    
    // Настройка вида превью аватарки
    imageBorderRadius = '3px', // Закругление углов.
    imageBackgroundColor = 'rgba(0, 0, 0, 1)', // Фон превью. Необходим, если аватарка это png и т.п. без фона.
    imageBoxShadow = '0px 0px 6px 2px black', // Тень, оставляемая элементом превью аватарки.
    
    // Список поисковиков, что вы хотите использовать. use:true/false (использовать)/(не использовать).
    // Можно добавить абсолютно любой "поиск по картинкам", главное это получить правильную ссылку для его работы.
    // url: - URL ссылка для работы поиска. name: - как будет называться этот поиск в поисковом меню.
    searches = [
      {url:'http://saucenao.com/search.php?db=999&url=', name:'Saucenao', use:true},
      {url:'https://www.bing.com/images/search?view=detailv2&iss=sbi&FORM=SBIHMP&sbisrc=UrlPaste&q=imgurl:', name:'Bing', use:true},
      {url:'https://www.google.com/searchbyimage?site=search&image_url=', name:'Google', use:true},
      {url:'https://yandex.ru/images/search?rdrnd=296405&rpt=imageview&url=', name:'Yandex', use:true},
      {url:'http://tineye.com/search/?url=', name:'TinEye', use:true},
      {url:'http://iqdb.org/?url=', name:'IQDB', use:true}
    ];

   class A {
    constructor({name, searchUrl, targetUrl, elem}) {
      this.e=document.createElement('a');
      this.e.className=`searchmenuItem`
      this.e.textContent=name
      this.e.href=`${searchUrl}${targetUrl}`
      this.e.target='_blank'
      this.e.onclick = function(s){
        s.preventDefault()
        s.stopImmediatePropagation();
        window.open(s.target.href, '_blank');
      }
      elem.appendChild(this.e);
      return this.e;
    }
  }

  function check(s){
      if(!useButton1ForAvatarView){
          hovered = s.target;
          return (!button1Pressed && !button2Pressed && !button3Pressed);
      }
      if(useButton1ForAvatarView){
          hovered = s.target;
          return (button1Pressed && !button2Pressed && !button3Pressed);
      }
  }
  
  document.addEventListener('mouseover', hover, true);
  function hover(s){
      if(s.target.classList.value.match(mainFilter) && check(s)){
          if(!document.querySelector(`div[class='avatar-preview']`)){
              let img = new Image();
              img.src = s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1');
              let avatarPreview = document.createElement('div');
              avatarPreview.className = 'avatar-preview';
              avatarPreview.style.position = 'fixed';
              avatarPreview.style.zIndex = '1000';
          if(s.target.classList.value.match(/comment__avatar/)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 20}px`;
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
              img.style.maxWidth = userAvatarSize;
              img.style.maxHeight = userAvatarSize;
          }else
          if(s.target.classList.value.match(/v-header-avatar/)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 170}px`
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 20}px`
              img.style.maxWidth = userProfileAvatarSize;
              img.style.maxHeight = userProfileAvatarSize;
          }else
          if(s.target.classList.value.match(/v-header__cover/)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 300}px`
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 0}px`
              img.style.maxWidth = userProfileCoverSizeWidth;
              img.style.maxHeight = userProfileCoverSizeHeight;
          }else
          if(s.target.classList.value.match(/content-header-author__avatar/)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
              img.style.maxWidth = authorAvatarSizeHeader;
              img.style.maxHeight = authorAvatarSizeHeader;
          }else
          if(s.target.classList.value.match(/subsite-card__avatar/)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 35}px`;
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 50}px`;
              img.style.maxWidth = authorAvatarSizeFooter;
              img.style.maxHeight = authorAvatarSizeFooter;
          }else
          if(s.target.classList.value.match(commentsRightBarFilter)){
              avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
              avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 30}px`;
              img.style.maxWidth = userAvatarSizeCommentsPanel;
              img.style.maxHeight = userAvatarSizeCommentsPanel;
          }
            img.style.borderRadius = imageBorderRadius;
            img.style.backgroundColor = imageBackgroundColor;
            img.style.boxShadow = imageBoxShadow;
            s.target.parentNode.appendChild(avatarPreview);
            document.querySelector(`div[class='avatar-preview']`).appendChild(img);
          }
      }else
      if(s.target.classList.value.match(mainFilter) && !button1Pressed && !button2Pressed && button3Pressed) {
        if(!document.querySelector(`div[class='srcSearch']`) && hovered){
            console.log('Creating menu...');
            let menu = document.createElement('div');
            menu.className = 'srcSearch';
            if(s.target.classList.value.match(/v-header-avatar/)){
                menu.style.top = `${s.target.getBoundingClientRect().top + 120}px`;
                menu.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
            }else
            {
                menu.style.top = `${s.target.getBoundingClientRect().top + 20}px`;
                menu.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
            }
            hovered.parentNode.appendChild(menu);

            for(let i = 0; i < searches.length; i++){
                if(searches[i].use){
                  new A({
                    name: searches[i].name,
                    searchUrl: searches[i].url,
                    targetUrl: hovered.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1'),
                    elem: menu
                  });
                }
            }
        }
      }else
      if(s.target.classList.value.match(mainFilter) && button1Pressed && button2Pressed && !button3Pressed){
        hovered = s.target;
          navigator.clipboard.writeText(s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1'));
          if(!document.querySelector(`div[class='avatar-link-copyed']`)){
          let alert = document.createElement('div');
          alert.className = 'avatar-link-copyed';
          alert.textContent = 'Ссылка на аватарку успешно скопирована';
          alert.style.position = 'fixed';
          alert.style.zIndex = '1000';
          if(s.target.classList.value.match(/v-header-avatar/)){
              alert.style.top = `${s.target.getBoundingClientRect().top + 60}px`;
              alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
          }else
          if(s.target.classList.value.match(/v-header__cover/)){
              alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
              alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
          }else
          if(s.target.classList.value.match(/comment__avatar|content-header-author__avatar|subsite-card__avatar/)){
              alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
              alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
          }else
          if(s.target.classList.value.match(commentsRightBarFilter)){
              alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
              alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
          }else
          {
              alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
              alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
          }
          alert.style.background = 'rgb(165 235 189)';
          alert.style.borderRadius = '3px';
          alert.style.padding = '3px';
          alert.style.color = 'rgb(0 0 0)';
          alert.style.fontSize = '12px';
          alert.style.lineHeight = '12px';
          alert.style.fontWeight = '500';
          alert.style.boxShadow = '0px 0px 6px 1px black';
          s.target.parentNode.appendChild(alert);
              setTimeout(() => {
                  if(document.querySelector(`div[class='avatar-link-copyed']`)){
                      document.querySelector(`div[class='avatar-link-copyed']`).remove();
                  }
              }, 2000);
          }
      }else
      if(!s.target.classList.value.match(mainFilter) && button1Pressed && !button2Pressed && !button3Pressed){
        hovered = false;
          if(document.querySelector(`div[class='avatar-preview']`)){
              document.querySelector(`div[class='avatar-preview']`).remove();
          }
      }else
      if(!s.target.classList.value.match(mainFilter) && !button1Pressed && !button2Pressed){
        hovered = false;
          if(!useButton1ForAvatarView){
              if(document.querySelector(`div[class='avatar-preview']`)){
                  document.querySelector(`div[class='avatar-preview']`).remove();
              }
          }
      }
  }
  document.addEventListener('keydown', kDown, true)
  function kDown(s){
      if(s.code === `${button1}Left`||s.code === `${button1}Right`||s.code === `${button1}`){
          button1Pressed = true;
        if(hovered){
          hovered.dispatchEvent(new MouseEvent('mouseover', {
            view: window,
            bubbles: true,
            cancelable: true
          }));
        }
      }else
      if(s.code === `${button2}Left`||s.code === `${button2}Right`||s.code === `${button2}`){
          button2Pressed = true;
          if(hovered){
            hovered.dispatchEvent(new MouseEvent('mouseover', {
              view: window,
              bubbles: true,
              cancelable: true
            }));
          }
      }else
      if(s.code === `${button3}Left`||s.code === `${button3}Right`||s.code === `${button3}`){
          button3Pressed = true;
        if(hovered){
          hovered.dispatchEvent(new MouseEvent('mouseover', {
            view: window,
            bubbles: true,
            cancelable: true
          }));
        }
      }
  }
  document.addEventListener('keyup', kUp, true)
  function kUp(s){
      if(s.code === `${button1}Left`||s.code === `${button1}Right`||s.code === `${button1}`){
          button1Pressed = false;
      }else
      if(s.code === `${button2}Left`||s.code === `${button2}Right`||s.code === `${button2}`){
          button2Pressed = false;
      }else
      if(s.code === `${button3}Left`||s.code === `${button3}Right`||s.code === `${button3}`){
          button3Pressed = false;
          if(document.querySelector(`div[class='srcSearch']`)){
              document.querySelector(`div[class='srcSearch']`).remove();
          }
      }
      if(document.querySelector(`div[class='avatar-preview']`)){
          document.querySelector(`div[class='avatar-preview']`).remove();
      }
  }
  ///
}
})();

QingJ © 2025

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