雪阅模式|SNOREAD

Greasy Fork is available in English.
雪阅模式|SNOREAD

【自用，目前还有很多BUG】豪华广角宽屏视角 / 横向滚动阅读模式 / 翻页模式 /
当前为 2019-11-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         雪阅模式|SNOREAD
// @namespace    https://userscript.snomiao.com/
// @version      0.2
// @description  【自用，目前还有很多BUG】豪华广角宽屏视角 / 横向滚动阅读模式 / 翻页模式 /
// @author       [email protected]
// @match        http*://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    var listenScrollHorizon = e => {
        [...e.children].map(listenScrollHorizon)

        if (e.flag_handleScrollHorizon) return;
        e.flag_handleScrollHorizon = 1;


        var zoom = 1//window.detectZoom()
        var handleScroll = (event) => {
            // [...e.children].map(listenScrollHorizon)
            var scroll_y = (event.detail || -event.wheelDelta) / 120

            var scrollBefore = e.scrollLeft
            // console.log(e.tagName)
            // console.log("L1", e.scrollLeft, scroll_y * e.clientWidth * 0.5)
            // e.scrollLeft += scroll_y * e.clientWidth * 0.5;
            e.scrollBy(scroll_y * e.clientWidth * 0.5,0)
            // console.log("L2", e.scrollLeft,  scrollBefore,  scrollBefore!==e.scrollLeft)
            // e.scrollLeft += -event.wheelDelta * zoom;
            if (e.scrollLeft !== scrollBefore) {
                // e.scrollIntoView(true);
                // window.scrollBy(0, wHeight * -0.1)

                e.scrollIntoViewIfNeeded()
                event.preventDefault();
                return;
            }else{

                var scrollBefore2 = e.scrollTop;
                e.scrollTop += scroll_y * e.clientHeight * 0.5;
                // console.log("T",e.scrollTop)
                // e.scrollLeft += -event.wheelDelta * zoom;
                if (e.scrollTop !== scrollBefore2) {
                    // e.scrollIntoView(true);
                    // window.scrollBy(0, wHeight * -0.1)
                    e.scrollIntoViewIfNeeded()
                    event.preventDefault();
                    return;
                }
            }
        }
        e.addEventListener("mousewheel"    , handleScroll, {passive: false})     // Chrome/Edge
        e.addEventListener("DOMMouseScroll", handleScroll, {passive: false}) // FF


    }
    //listenScrollHorizon(document.documentElement)
    var turnBackNormal = e => {
        e.setAttribute("style", ``);
        [...e.children].map(e => e.setAttribute("style", ``))
        e.classList.remove("snomiao-article")
    }
    var listenClick = e => {
        if (e.flag_handleClickToggleSnoReadMode) return;
        // click to update this article
        e.addEventListener("click", function (event) {
            listenScrollHorizon(e);
            e.classList.contains("snomiao-article")
                && processArticle(e)
        }, false);
        // dblclick to turn back
        e.addEventListener("dblclick", function (event) {
            // console.log(e, e.classList.contains("snomiao-article"))
            e.classList.contains("snomiao-article")
                && (turnBackNormal(e) || true)
                || processArticle(e)
            // e.scrollLeft += e.clientWidth + 100
            event.preventDefault();
        }, true);
        e.flag_handleClickToggleSnoReadMode = 1
    }
    var wHeight = window.innerHeight;
    var screenWidth = window.innerWidth;

    var processArticle = (e) => {

        listenScrollHorizon(e)
        listenClick(e)

        var charCountOfLine = 35
        // console.log("setStyle", e, level)
        e.setAttribute("style", `position: relative;left: 0;top: 0;`)
        var { left, top } = e.getBoundingClientRect()
        e.classList.add("snomiao-article")

        e.setAttribute("style", `
        transition: left 0.2s top 0.2s width 0.2s;

        position: relative;
        left: calc(1em + ${-left}px);
        top: 0;
        height: ${wHeight * 0.9}px;
        width: ${charCountOfLine}em;
        box-sizing: border-box;
        padding-right:calc(${screenWidth}px - 2em);

        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
        overflow-x: scroll;
        overflow-y: hidden;
        z-index:1;
        box-shadow: 0 0 1px blue;
        background: white;
        color: black;

        text-align: justify;
        text-indent: 0;
    `);
        [...e.children].map(c => {
            c.setAttribute("style",
                `
            margin: 0 1em 0 0;
            padding: 0 0 1em 0;
            max-width: ${charCountOfLine + 5}em;
            min-width: ${charCountOfLine - 5}em;
            max-height: ${wHeight * 0.9}px;
            overflow-x: hidden;
            overflow-y: auto;
            `)
        })
        // var e2 = document.create(e.tagName)
        // e.parentElement.appendChild()
        // e.innerHTML
        // e.scrollTo()

        // e.scrollIntoView(true);
        // window.scrollBy(0, wHeight * -0.05)
        // window.a = e
    }
    // processArticle(window.article)


    var getArticles = (e, level = 0) => {
        level == 0 && [...document.querySelectorAll(".snomiao-article")].map(turnBackNormal)
        var parentHeight = e.offsetHeight;
        var children = [...e.children].reverse()
        var large = children.filter(e => e && e.offsetHeight && e.offsetHeight > wHeight)
        // var small = children.filter(e=>e&&e.offsetHeight&&e.offsetHeight<wHeight)
        var levelMark = Array(level + 1).join("/")
        // console.debug(levelMark, large)
        // console.debug(levelMark, large.map(e => e.offsetHeight / parentHeight))
        var large2 = large.filter(e => e.offsetHeight / parentHeight > 0.5)
        // large.map(e=>({e,r:}))

        var re = large.map(e => getArticles(e, level + 1))
        if (re.filter(e=>e).length) return true;
        if (!large2.length) {
            large.map(e => {
                // console.log("setHeight", e)
                // e.setAttribute("style", `
                //     max-height: ${wHeight * 0.9}px;
                // `)
            })
            window.e = e

            // console.debug(levelMark, large.map(e => e.offsetHeight / parentHeight))
            console.log(levelMark, "setStyle", e)

            processArticle(e)

            // if(undefined!==processArticle){
            //     processArticle(e)
            // } else{
            // }

            return true
        }
    }

    var main = () => {
        console.log("LAUNCH：SNOREAD")
        getArticles(document.body)
    }
    // setInterval(main, 3000)
    // document.addEventListener("onload", main)
    window.addEventListener("load", main)
    main()




})();