[Make DTF Great Again] UserScript показывающий лайки

// ==UserScript== // @name DTF Likers Redesign Edition // @namespace ¯\_(ツ)_/¯ // @match https://dtf.ru/* // @version 0.1.0 // @author ¯\_(ツ)_/¯ // @description ¯\_(ツ)_/¯ // ==/UserScript== (() => { let last__api__likers__params = {}; let likers__popover__elem; let likers = []; let hide_dtf_popover__style_sheet; async function api__likers(type, entity_id) { return new Promise( async (resolve, reject) => { if (last__api__likers__params.type === type && last__api__likers__params.entity_id === entity_id) return resolve(likers); const response = await fetch(`https://api.dtf.ru/v2.5/${type}/likers/${entity_id}`, { method: 'get', headers: new Headers({ 'Accept': 'application/json', }) }); let response_json = await response.json(); if (response_json && response_json.result) { likers = response_json.result; last__api__likers__params = {type: type, entity_id: entity_id}; return resolve(likers); } else { likers = []; return reject(); } }); } async function show_likers_popup(elem, entity_type, entity_id) { await api__likers(entity_type, entity_id); if (likers.length === 0) return; let innerHTML = ` <div class="likers__popover__users_container" >`; likers.forEach(function(liker) { innerHTML += ` <a class="likers__popover__user" href="/u/${liker.id}" target="_blank" > <img class="likers__popover__user__image" src="https://leonardo.osnova.io/${liker.avatar.data.uuid}/-/scale_crop/72x72/" alt="" loading="lazy" /> <span class="likers__popover__user__name"> ${liker.name} </span> </a>`; }); innerHTML += ` </div>`; likers__popover__elem.style = `height: ${Math.min(42*likers.length+10, 430)}px;`; //10 - padding likers__popover__elem.innerHTML=innerHTML; elem.append(likers__popover__elem); likers__popover__elem.style.display = 'block'; let rect = elem.getBoundingClientRect(); likers__popover__elem.style.left = rect.left + 20 + 'px'; likers__popover__elem.style.top = rect.top + 20 + 'px'; hide_dtf_popover__style_sheet.insertRule(`.popover-overlay {display:none !important;}`, 0); } function reaction_buttons__add_listeners() { const reaction_btn__elems = document.querySelectorAll('.reactions > .reaction-button:first-child:not(.likers_init)'); for(let i=0; i<reaction_btn__elems.length; i++) { reaction_btn__elems[i].addEventListener('mouseenter', (event) => { if (likers__popover__elem.style.display === 'block') return; const content_elem = event.target.closest('.content'); if (content_elem) { let content__link = content_elem.querySelector('.content__link'); if (content__link) { show_likers_popup(reaction_btn__elems[i], 'content', get_post_id_by_href(content__link.href)); } else { show_likers_popup(reaction_btn__elems[i], 'content', get_post_id_by_href(window.location.href)); } } const comment__elem = event.target.closest('.comment__content'); if (comment__elem) { let comment_link_elem = comment__elem.querySelector('.comment__detail'); if (!comment_link_elem) comment_link_elem = comment__elem.querySelector('.subsite-comments-feed__comment-date'); if (comment_link_elem) { let comment_id = comment_link_elem.href.split('=')[1]; show_likers_popup(reaction_btn__elems[i], 'comment', comment_id); } } }); reaction_btn__elems[i].addEventListener('mouseleave', (event) => { likers__popover__elem.style.display = 'none'; hide_dtf_popover__style_sheet.deleteRule(0); }); reaction_btn__elems[i].classList.add('likers_init'); function get_post_id_by_href(href) { let href_parts = href.split('/'); return href_parts[href_parts.length - 1].split('-')[0]; } } } function add_css() { let css = ` .likers__popover { position:fixed; width:350px; height:650px; top:25px; left:10px; background:#fff; border-radius:18px; padding:5px; display:none; z-index:100; } .likers__popover * { color: #333; font-size: 15px; } .likers__popover__users_container { max-height:420px; overflow-x: hidden; overflow-y: auto; } .likers__popover__user { display: grid; grid-template-columns: 36px 1fr 54px; grid-gap: 10px; padding: 3px; background: #fff; border-radius: 18px; } img.likers__popover__user__image { display: inline-flex; align-items: center; width:36px; height:36px; border-radius: 18px; } .likers__popover__user__name { line-height:36px; font-weight: bold; width: 268px; overflow: hidden; } .likers__popover__user:hover { background: #ccc; } .comment { overflow: visible !important; contain: inherit; } `; const style_sheet_elem = document.createElement("style"); style_sheet_elem.innerText = css; document.head.appendChild(style_sheet_elem); const style_sheet_elem_2 = document.createElement("style"); document.head.appendChild(style_sheet_elem_2); hide_dtf_popover__style_sheet = style_sheet_elem_2.sheet; } window.addEventListener('load', async () => { add_css(); likers__popover__elem = document.createElement('div'); likers__popover__elem.classList = 'likers__popover'; likers__popover__elem.id = 'likers__popover'; likers__popover__elem.addEventListener('mouseenter', (event) => { event.stopPropagation(); }) document.body.append(likers__popover__elem); await reaction_buttons__add_listeners(); }) let html_tag_observer = new MutationObserver(async (mutationRecords) => { html_tag_observer.disconnect(); await reaction_buttons__add_listeners(); html_tag_observer__start(); }); html_tag_observer__start(); function html_tag_observer__start() { html_tag_observer.observe(document.querySelector(`html`), { attributes: true, childList: true, subtree: true, characterData: false }); } })();