Greasy Fork is available in English.

DTF.ru. Show me avatars. Without button press for avatar showing

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

  1. // ==UserScript==
  2. // @name DTF.ru. Show me avatars. Without button press for avatar showing
  3. // @namespace Violentmonkey Scripts
  4. // @match https://dtf.ru/*
  5. // @grant none
  6. // @version 1.3.1
  7. // @author Tentacle Tenticals
  8. // @description Показ аватарок пользователей, а также копирование ссылки на аватарку. Курсор на аватарку и Ctrl для её показа, или Ctrl+Shift для копирования URL ссылки в буфер обмена.
  9. // @homepage https://github.com/TentacleTenticals/DTF-showAvatar
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. /* jshint esversion:6 */
  14.  
  15. (function() {
  16. 'use strict';
  17. window.addEventListener('load', run)
  18.  
  19. function run(){
  20. console.log('Loaded!');
  21. 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}`),
  22. commentsRightBarFilter = new RegExp(document.querySelector("div[class='layout__right-column'] div[style^='background-image").className),
  23. ctrlPressed, shiftPressed, hovered,
  24. // Настройки максимального размера превью аватарки
  25. userAvatarSize = '400px', // Аватарка пользователя (комментарий)
  26. userProfileCoverSizeWidth = '990px', // Обложка пользователя в профиле (длина)
  27. userProfileCoverSizeHeight = '400px', // Обложка пользователя в профиле (ширина)
  28. userProfileAvatarSize = '400px', // Аватар пользователя в профиле
  29. authorAvatarSizeHeader = '400px', // Аватарка подсайта статьи (хеадер)
  30. authorAvatarSizeFooter = '400px', // Аватарка автора статьи (футер)
  31. userAvatarSizeCommentsPanel = '250px'; // Аватарка пользователя (боковая панель комментариев, aka "live-список" комментариев к статьям)
  32. document.addEventListener('mouseover', hover, true);
  33. function hover(s){
  34. /* Аватарка пользователя в комментарии / Аватарка автора статьи в хеадере (шапке) / Аватарка автора статьи в футере (конце статьи) /
  35. Аватарка пользователя в комментарии в 'live-списке' комментариев справа */
  36. if(s.target.classList.value.match(mainFilter) && !ctrlPressed && !shiftPressed){
  37. hovered = s.target;
  38. if(!document.querySelector(`div[class='avatar-preview']`)){
  39. let img = new Image();
  40. img.src = s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1');
  41. let avatarPreview = document.createElement('div');
  42. avatarPreview.className = 'avatar-preview';
  43. avatarPreview.style.position = 'fixed';
  44. avatarPreview.style.zIndex = '1000';
  45. if(s.target.classList.value.match(/comment__avatar/)){
  46. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 20}px`;
  47. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
  48. img.style.maxWidth = userAvatarSize;
  49. img.style.maxHeight = userAvatarSize;
  50. }else
  51. if(s.target.classList.value.match(/v-header-avatar/)){
  52. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 170}px`
  53. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 20}px`
  54. img.style.maxWidth = userProfileAvatarSize;
  55. img.style.maxHeight = userProfileAvatarSize;
  56. }else
  57. if(s.target.classList.value.match(/v-header__cover/)){
  58. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 300}px`
  59. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 0}px`
  60. img.style.maxWidth = userProfileCoverSizeWidth;
  61. img.style.maxHeight = userProfileCoverSizeHeight;
  62. }else
  63. if(s.target.classList.value.match(/content-header-author__avatar/)){
  64. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
  65. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 40}px`;
  66. img.style.maxWidth = authorAvatarSizeHeader;
  67. img.style.maxHeight = authorAvatarSizeHeader;
  68. }else
  69. if(s.target.classList.value.match(/subsite-card__avatar/)){
  70. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 35}px`;
  71. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 50}px`;
  72. img.style.maxWidth = authorAvatarSizeFooter;
  73. img.style.maxHeight = authorAvatarSizeFooter;
  74. }else
  75. if(s.target.classList.value.match(commentsRightBarFilter)){
  76. avatarPreview.style.top = `${s.target.getBoundingClientRect().top + 25}px`;
  77. avatarPreview.style.left = `${s.target.getBoundingClientRect().left + 30}px`;
  78. img.style.maxWidth = userAvatarSizeCommentsPanel;
  79. img.style.maxHeight = userAvatarSizeCommentsPanel;
  80. }
  81. img.style.borderRadius = '3px';
  82. img.style.backgroundColor = 'rgb(0, 0, 0)';
  83. img.style.boxShadow = '0px 0px 6px 2px black';
  84. s.target.parentNode.appendChild(avatarPreview);
  85. document.querySelector(`div[class='avatar-preview']`).appendChild(img);
  86. }
  87. }else
  88. if(s.target.classList.value.match(mainFilter) && ctrlPressed && shiftPressed){
  89. hovered = s.target;
  90. navigator.clipboard.writeText(s.target.style.backgroundImage.replace(/.+(http.+)\/-\/scale.+/, '$1'));
  91. if(!document.querySelector(`div[class='avatar-link-copyed']`)){
  92. let alert = document.createElement('div');
  93. alert.className = 'avatar-link-copyed';
  94. alert.textContent = 'Ссылка на аватарку успешно скопирована';
  95. alert.style.position = 'fixed';
  96. alert.style.zIndex = '1000';
  97. if(s.target.classList.value.match(/v-header-avatar|v-header__cover/)){
  98. alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
  99. alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  100. }else
  101. if(s.target.classList.value.match(/comment__avatar|content-header-author__avatar|subsite-card__avatar/)){
  102. alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
  103. alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
  104. }else
  105. if(s.target.classList.value.match(commentsRightBarFilter))
  106. {
  107. alert.style.top = `${s.target.getBoundingClientRect().top - 25}px`;
  108. alert.style.left = `${s.target.getBoundingClientRect().left + 20}px`;
  109. }else
  110. {
  111. alert.style.top = `${s.target.getBoundingClientRect().top + 300}px`;
  112. alert.style.left = `${s.target.getBoundingClientRect().left + 0}px`;
  113. }
  114. alert.style.background = 'rgb(165 235 189)';
  115. alert.style.borderRadius = '3px';
  116. alert.style.padding = '3px';
  117. alert.style.color = 'rgb(0 0 0)';
  118. alert.style.fontSize = '12px';
  119. alert.style.lineHeight = '12px';
  120. alert.style.fontWeight = '500';
  121. alert.style.boxShadow = '0px 0px 6px 1px black';
  122. s.target.parentNode.appendChild(alert);
  123. setTimeout(() => {
  124. if(document.querySelector(`div[class='avatar-link-copyed']`)){
  125. document.querySelector(`div[class='avatar-link-copyed']`).remove();
  126. }
  127. }, 2000);
  128. }
  129. }else
  130. if(!s.target.classList.value.match(mainFilter) && ctrlPressed && !shiftPressed){
  131. hovered = false;
  132. if(document.querySelector(`div[class='avatar-preview']`)){
  133. document.querySelector(`div[class='avatar-preview']`).remove();
  134. }
  135. }else
  136. if(!s.target.classList.value.match(mainFilter) && ctrlPressed && !shiftPressed){
  137. hovered = false;
  138. if(document.querySelector(`div[class='avatar-preview']`)){
  139. document.querySelector(`div[class='avatar-preview']`).remove();
  140. }
  141. }else
  142. if(!s.target.classList.value.match(mainFilter) && !ctrlPressed && !shiftPressed){
  143. hovered = false;
  144. if(document.querySelector(`div[class='avatar-preview']`)){
  145. document.querySelector(`div[class='avatar-preview']`).remove();
  146. }
  147. }
  148. }
  149. document.addEventListener('keydown', kDown, true)
  150. function kDown(s){
  151. if(s.code === 'ControlLeft'||s.code === 'ControlRight'){
  152. ctrlPressed = true;
  153. if(hovered){
  154. hovered.dispatchEvent(new MouseEvent('mouseover', {
  155. view: window,
  156. bubbles: true,
  157. cancelable: true
  158. }));
  159. }
  160. }else
  161. if(s.code === 'ShiftLeft'||s.code === 'ShiftRight'){
  162. shiftPressed = true;
  163. if(hovered){
  164. hovered.dispatchEvent(new MouseEvent('mouseover', {
  165. view: window,
  166. bubbles: true,
  167. cancelable: true
  168. }));
  169. }
  170. }
  171. }
  172. document.addEventListener('keyup', kUp, true)
  173. function kUp(s){
  174. if(s.code === 'ControlLeft'||s.code === 'ControlRight'){
  175. ctrlPressed = false;
  176. }else
  177. if(s.code === 'ShiftLeft'||s.code === 'ShiftRight'){
  178. shiftPressed = false;
  179. }
  180. if(document.querySelector(`div[class='avatar-preview']`)){
  181. document.querySelector(`div[class='avatar-preview']`).remove();
  182. }
  183. }
  184. }
  185. })();