comic-days-illustration-zooming.user.js

// ==UserScript==
// @name        コミックDAYSのイラストを実寸表示できるようにする
// @namespace   pastak.net.comic-days.illustration.zooming
// @description 
// @match  https://comic-days.com/illustration/*
// @includes  https://comic-days.com/illustration/*
// ==/UserScript==
'use strict';

function waitForSelector (selectors) {
  return new Promise((resolve) => {
    const timerId = setInterval(() => {
      if (document.querySelector(selectors.join(','))) {
        clearInterval(timerId);
        resolve();
      }
    }, 100);
  });
};

(async () => {
  if (!location.href.startsWith('https://comic-days.com/illustration/')) return;

  const renderIllustSelectors = [
    '.illustration-viewer-content .illustration-pages canvas',
    '.illustration-viewer-content .illustration-pages img'
  ];
  await waitForSelector(renderIllustSelectors);
  const s = document.createElement('style');
  document.head.appendChild(s);
  
  const fullSizingSelectors = renderIllustSelectors.map((selector) => `${selector}.full-size`).join(', ');
  s.innerHTML = (`
  ${renderIllustSelectors.join(',')} {
    cursor: zoom-in;
    pointer-events: auto;
  }
  ${fullSizingSelectors} {
    max-height: none;
    max-width: none;
    cursor: zoom-out;
  }
  `);

  document.querySelectorAll(renderIllustSelectors.join(',')).forEach((elm) => {
    let isFullSized = false;
    elm.addEventListener('click', () => {
      isFullSized = !isFullSized;
      elm.classList.toggle('full-size', isFullSized);
    });
  });
})();