naver-cuttoon-cutter

naver-cuttoon-cutter.user.js

// ==UserScript==
// @name         Cuttoon Cutter
// @namespace    https://saschanaz.github.io/
// @version      0.11.2
// @description  try to take over the cuttoons!
// @author       Kagami Sascha Rosylight
// @match        https://m.comic.naver.com/webtoon/detail.nhn?*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    if (!window.mflick) {
        // not a cuttoon
        console.log("Not a cuttoon");
        return;
    }
    console.log("Detected a cuttoon");

    // Detach event listeners
    const original = mflick.children[0];
    original.remove();
    const detached = original.cloneNode(true);
    cleanInlineStyle(detached);
    attachIntersectionObserver(detached);
    enableKeyboardNavigation(detached);
    enableWheelNavigation(detached);

    document.head.appendChild(createStyle());
    const lastSlide = detached.querySelector(".cut_viewer_last").parentElement;
    const lastSlideParent = lastSlide.parentElement;

    const originalLastSlide = original.querySelector(".cut_viewer_last").parentElement;
    originalLastSlide.removeAttribute("style");
    originalLastSlide.remove();
    lastSlideParent.insertBefore(originalLastSlide, lastSlide);
    lastSlide.remove();
    mflick.appendChild(detached);

    detached.addEventListener("click", ev => {
        document.body.querySelector(".viewer_gnb").classList.toggle("hide");
        document.body.querySelector(".viewer_btns").classList.toggle("hide");
    });
    slider.onchange = () => {
        detached.scrollLeft = slider.value * detached.clientWidth;
    };

    function cleanInlineStyle(root) {
        for (const element of descendants(root, NodeFilter.SHOW_ELEMENT)) {
            element.removeAttribute("style");
        }
    }
    function attachIntersectionObserver(root) {
        const observer = new IntersectionObserver(entries => {
            for (const entry of entries) {
                if (!entry.isIntersecting) {
                    continue;
                }
                const img = entry.target.getElementsByTagName("img")[0];
                if (img && img.dataset.src) {
                    img.src = img.dataset.src;
                }
                observer.unobserve(entry.target);
            }
        }, { root });
        for (const element of descendants(root, NodeFilter.SHOW_ELEMENT)) {
            if (element.classList.contains("swiper-slide")) {
                observer.observe(element);
            }
        }
    }
    function* descendants(root, nodeFilter) {
        const walker = document.createTreeWalker(root, nodeFilter);
        while (walker.nextNode()) {
            yield walker.currentNode;
        }
    }
    function enableKeyboardNavigation(detached) {
        document.addEventListener("keydown", ev => {
            switch (ev.key) {
                case "ArrowLeft":
                    detached.scrollBy({ left: -detached.clientWidth })
                    break;
                case "ArrowRight":
                    detached.scrollBy({ left: detached.clientWidth })
                    break;
            }
        });
    }
    function enableWheelNavigation(detached) {
        if (CSS.supports("-ms-scroll-translation", "vertical-to-horizontal")) {
            return;
        }
        document.addEventListener("wheel", ev => {
            if (ev.deltaX || !ev.deltaY) {
                return;
            }
            if (ev.deltaY < 0) {
                detached.scrollBy({ left: -detached.clientWidth })
            }
            else {
                detached.scrollBy({ left: detached.clientWidth })
            }
        });
    }
    function createStyle() {
        const style = document.createElement("style");
        style.textContent = `
.swiper-wrapper {
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  -ms-scroll-translation: vertical-to-horizontal;
  scroll-behavior: smooth;

  overflow-x: auto;
  overflow-y: hidden;
}
.swiper-slide {
  min-width: 100%;
  min-height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
.swiper-lazy {
  max-width: 100%;
  max-height: 100%;
}
`;
        return style;
    }
})();