kone 썸네일 + 댓글 개선

kone 썸네일

마우스 오버시 썸네일 표시, 좌우 방향키로 넘기기 가능
当前为 2025-05-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         kone 썸네일
// @namespace    http://tampermonkey.net/
// @version      1.0
// @author       김머시기
// @description  마우스 오버시 썸네일 표시, 좌우 방향키로 넘기기 가능
// @match        https://kone.gg/s/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_xmlhttpRequest
// @license      MIT
// @connect      kone.gg
// @run-at       document-idle
// ==/UserScript==

(async function () {
  'use strict';

  let hoverDelay = await GM_getValue('hoverDelay', 300);
  let thumbSize = await GM_getValue('thumbSize', 400);
  let autoSlide = await GM_getValue('autoSlide', false);
  const MenuID = [null, null, null];

  async function toggleAutoSlide() {
    autoSlide = !autoSlide;
    await GM_setValue('autoSlide', autoSlide);
    updateMenu();
  }

  async function toggleThumbSize() {
    const sizes = [200, 320, 400, 480];
    let idx = sizes.indexOf(thumbSize);
    thumbSize = sizes[(idx + 1) % sizes.length];
    await GM_setValue('thumbSize', thumbSize);
    updateMenu();
  }

  async function toggleHoverDelay() {
    const delays = [300, 500, 700, 1000];
    let idx = delays.indexOf(hoverDelay);
    hoverDelay = delays[(idx + 1) % delays.length];
    await GM_setValue('hoverDelay', hoverDelay);
    updateMenu();
  }

  function updateMenu() {
    if (MenuID[0]) GM_unregisterMenuCommand(MenuID[0]);
    MenuID[0] = GM_registerMenuCommand(
      `자동 슬라이드　: ${autoSlide ? 'ON' : 'OFF'}`,
      toggleAutoSlide,
      { autoClose: false, title: `자동 슬라이드　 ${autoSlide ? '켜짐' : '꺼짐'}` }
    );

    if (MenuID[1]) GM_unregisterMenuCommand(MenuID[1]);
    MenuID[1] = GM_registerMenuCommand(
      `썸네일 크기　　: ${thumbSize}px`,
      toggleThumbSize,
      { autoClose: false, title: `썸네일 크기　　 ${thumbSize}px` }
    );

    if (MenuID[2]) GM_unregisterMenuCommand(MenuID[2]);
    MenuID[2] = GM_registerMenuCommand(
      `마우스 오버　　: ${hoverDelay}ms`,
      toggleHoverDelay,
      { autoClose: false, title: `마우스 오버　　 ${hoverDelay}ms` }
    );
  }

  updateMenu();

  let previewBox = document.createElement('div');
  let previewImage = document.createElement('img');
  let currentIndex = 0;
  let imageList = [];
  let isPreviewVisible = false;
  let currentHoverTarget = null;
  let hoverTimer = null;
  let autoSlideTimer = null;

  Object.assign(previewBox.style, {
    position: 'fixed',
    pointerEvents: 'none',
    zIndex: 9999,
    display: 'none',
    border: '1px solid #ccc',
    background: '#fff',
    padding: '4px',
    boxShadow: '0 0 8px rgba(0,0,0,0.3)',
    borderRadius: '6px'
  });

  Object.assign(previewImage.style, {
    width: '100%',
    height: 'auto',
    objectFit: 'contain',
    display: 'block'
  });

  previewBox.appendChild(previewImage);
  document.body.appendChild(previewBox);

  function applySize() {
    previewBox.style.maxWidth = thumbSize + 'px';
    previewBox.style.maxHeight = thumbSize + 'px';
    previewImage.style.maxWidth = thumbSize + 'px';
    previewImage.style.maxHeight = thumbSize + 'px';
  }

  function updateImage() {
    if (imageList.length > 0) {
      previewImage.src = imageList[currentIndex];
      previewBox.style.display = 'block';
    } else {
      previewBox.style.display = 'none';
    }
  }

  function startAutoSlide() {
    if (autoSlideTimer) clearInterval(autoSlideTimer);
    if (autoSlide) {
      autoSlideTimer = setInterval(() => {
        currentIndex = (currentIndex + 1) % imageList.length;
        updateImage();
      }, 2500);
    }
  }

  function stopAutoSlide() {
    if (autoSlideTimer) clearInterval(autoSlideTimer);
    autoSlideTimer = null;
  }

  function onKeyDown(e) {
    if (!isPreviewVisible) return;
    if (e.key === 'ArrowRight') {
      currentIndex = (currentIndex + 1) % imageList.length;
      updateImage();
    } else if (e.key === 'ArrowLeft') {
      currentIndex = (currentIndex - 1 + imageList.length) % imageList.length;
      updateImage();
    }
  }

  function extractImages(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return [...doc.querySelectorAll('.prose img')].map(img => img.src);
  }

  function showPreviewAtMouse(event, url) {
    previewBox.style.top = (event.clientY + 20) + 'px';
    previewBox.style.left = (event.clientX + 20) + 'px';

    GM_xmlhttpRequest({
      method: 'GET',
      url,
      onload: res => {
        imageList = extractImages(res.responseText);
        currentIndex = 0;
        applySize();
        updateImage();
        isPreviewVisible = true;
        startAutoSlide();
      }
    });

    const moveHandler = e => {
      previewBox.style.top = (e.clientY + 20) + 'px';
      previewBox.style.left = (e.clientX + 20) + 'px';
    };

    document.addEventListener('mousemove', moveHandler);
    document.addEventListener('keydown', onKeyDown);

    event.target.addEventListener('mouseleave', () => {
      previewBox.style.display = 'none';
      imageList = [];
      isPreviewVisible = false;
      clearTimeout(hoverTimer);
      stopAutoSlide();
      currentHoverTarget = null;
      document.removeEventListener('mousemove', moveHandler);
      document.removeEventListener('keydown', onKeyDown);
    }, { once: true });
  }

  function handleMouseEnter(event, link) {
    clearTimeout(hoverTimer);
    currentHoverTarget = link;
    hoverTimer = setTimeout(() => {
      if (currentHoverTarget === link) {
        showPreviewAtMouse(event, link.href);
      }
    }, hoverDelay);
  }

  function attachEvents() {
    const links = document.querySelectorAll('a[href^="/s/"]:not([data-preview-init])');
    for (const link of links) {
      link.dataset.previewInit = '1';
      link.addEventListener('mouseenter', e => handleMouseEnter(e, link));
      link.addEventListener('mouseleave', () => {
        clearTimeout(hoverTimer);
        currentHoverTarget = null;
      });
    }
  }

  const observer = new MutationObserver(attachEvents);
  observer.observe(document.body, { childList: true, subtree: true });
  attachEvents();
})();
欢迎访问Greasy Fork镜像
