☰

civitai.com fast react

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

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


const ACTIVE_CLASS = 'mantine-c49ihw';  // found on the BUTTON on /images

// 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) {
  if (location.pathname.startsWith('/models/')) {
    if (img.parentElement.classList.contains('mantine-AspectRatio-root')) {
      return img.parentElement.parentElement.parentElement.parentElement.nextElementSibling;

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

const allowedKeys = ['1', '2', '3', '4', '!', '@', '#', '$'];

document.addEventListener('keydown', function(event) {
  if (!allowedKeys.includes(event.key)) {
    return;
  }

  let btnIdx = allowedKeys.indexOf(event.key);
  let shift = false;
  if (btnIdx > 3) {
    btnIdx -= 4;
    shift = true;
  }
  console.log('ZZ key pressed shift?', btnIdx, shift)

  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.error('ZZ No <img> tag found under the cursor.', $img);
    return;
  }

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

  let $btnToPress;
  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;
    }

    $btnToPress = $toolbar.childNodes[btnIdx + 1];
  } else {
    // The first button was not an expand button
    $btnToPress = $toolbar.childNodes[btnIdx];
  }
  const btnIsActive = $btnToPress.classList.contains(ACTIVE_CLASS)
  if (shift === btnIsActive) {
    $btnToPress.click();
  }

});