Misskey - Quick reaction

misskey-quick-reaction.user.js

// ==UserScript==
// @name         Misskey - Quick reaction
// @namespace    https://github.com/unarist/
// @version      0.3.1
// @description  Click existing reaction to cast same one
// @author       unarist
// @match        https://misskey.xyz/*
// @require    https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
// @downloadURL https://gist.github.com/unarist/3d99742d3bb2af5d500b494400996aca/raw/misskey-quick-reaction.user.js
// @grant        none
// ==/UserScript==

/*

Known issues:

* You can cast reaction to your own post and posts you already casted it
  (it shows spin effect and counts up)

*/

(function() {
    'use strict';
    const apiOrigin = 'https://api.misskey.xyz';

    const getPostId = (elemInArticle) => elemInArticle.closest('article').querySelector('.created-at').href.match(/[a-f0-9]+$/)[0];

    const handler = (e) => {
        const reaction = e.target.src.match(/reactions\/(\w+)\.png/)[1];

        e.target.addEventListener('transitionend', () => Object.assign(e.target.style, { transition: '0s', transform: 'rotateY(0deg)' }), { once: true });
        Object.assign(e.target.style, { transition: '.5s', transform: 'rotateY(360deg)' });

        const counter = e.target.parentElement.nextElementSibling;
        if (counter.tagName === 'SPAN' && /^\d+$/.test(counter.textContent)) {
            counter.textContent = Number(counter.textContent) + 1;
        }

        fetch(location.origin + '/api/notes/reactions/create', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                i: Cookies.get('i'),
                noteId: getPostId(e.target),
                reaction
            })
        });
    };
    const processNode = (node) => {
        if (!node.querySelector) return;
        node.querySelectorAll('.mk-reaction-icon img:not(.--click-handler-added)').forEach(img => {
            img.style.cursor = 'pointer';
            img.addEventListener('click', handler, false);
            img.classList.add('--click-handler-added');
        });
    };
    const target = document.querySelector('.mk-timeline') || document.body;
    new MutationObserver(records => {
        for (const record of records) {
            if (record.target.matches('.mk-notes, .mk-reactions-viewer')) {
                record.addedNodes.forEach(processNode);
            }
        }
    }).observe(target, { childList: true, subtree: true });
    // Your code here...
})();