☰

civitai.com fast react

Fast keyboard 1-5 emoji reactions for civitai.com instead of clicking the buttons. First 1-5 press will expand the reaction toolbar. Subsequent presses will react with the matching emoji from left to right (thumbs up 👍, heart ❤️, tears 😂, crying 😢). Make sure your mouse is over the image you want to react to.

当前为 2024-02-13 提交的版本，查看 最新版本。

// ==UserScript==
// @name        civitai.com fast react
// @namespace   Violentmonkey Scripts
// @match       https://civitai.com/images
// @match       https://civitai.com/posts/*
// @match       https://civitai.com/search/images
// @match       https://civitai.com/user/*
// @grant       none
// @version     1.1
// @author      tryitandsee
// @license     MIT
// @description Fast keyboard 1-5 emoji reactions for civitai.com instead of clicking the buttons. First 1-5 press will expand the reaction toolbar. Subsequent presses will react with the matching emoji from left to right (thumbs up 👍, heart ❤️, tears 😂, crying 😢). Make sure your mouse is over the image you want to react to.
// ==/UserScript==


// Should I use elementFromPoint or keep track of IMG tags as the mouseenter/mouseexit them?
// mousemove seems inefficient but it works and works with infinite scroll
let mouseX, mouseY;
document.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
});


function getControls(img) {
  return img.nextElementSibling.querySelector('button[data-button="true"]')?.parentElement;
}

document.addEventListener('keydown', function(event) {
  if (!['1', '2', '3', '4'].includes(event.key)) {
    console.log('ZZ wrong keydown', event.key);
    return;
  }

  const $img = document.elementFromPoint(mouseX, mouseY);

  // Check if the found element is an <img> tag
  if ($img.tagName.toLowerCase() === 'img') {
    console.log('ZZ Found <img> tag:', $img);
  } else {
    console.log('ZZ No <img> tag found under the cursor.', $img);
    return;
  }

  const $toolbar = getControls($img);
  console.log('ZZ $toolbar', $toolbar)
  if (!$toolbar) {
    console.log('ZZ post instead of image, nothing to do...', $img)
    return;
  }

  const numberPressed = parseInt(event.key, 10);
  if ($toolbar.firstElementChild.textContent === '') {
    if ($toolbar.childNodes.length != 6) {
      // For posts, it's an info button instead of a toolbar, but click on it anyways because it's a noop
      // FIXME: sometimes there is no expand and the first button is the thumbsup
      $toolbar.firstElementChild.click();
      // console.log('ZZ is this expand button?', $toolbar.firstElementChild.textContent)
      return;
    }

    $toolbar.childNodes[numberPressed].click();
  } else {
    // The first button was not an expand button
    $toolbar.childNodes[numberPressed - 1].click();

  }

});