Let's Become a Novelist read with a vertical writing mode

小説家になろうを縦書きで表示
当前为 2022-06-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Let's Become a Novelist read with a vertical writing mode
// @license MIT
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  小説家になろうを縦書きで表示
// @author       avan
// @match        ncode.syosetu.com/*
// @grant        none
// ==/UserScript==

const reHeadNav = () => {
    const headNav = document.querySelector("#head_nav")
    const novlBns = document.querySelectorAll(".novel_bn")
    const links = novlBns[novlBns.length-1].querySelectorAll("a")
    links.forEach(element => {
        const tmpLi = document.createElement("li")
        tmpLi.appendChild(element)
        headNav.appendChild(tmpLi)
    });
    headNav.style.width="50rem"
}

const replaceContents = () => {
    const contents = document.querySelector("div#novel_contents")
	contents.innerHTML = contents.innerHTML.replace(/\…/g,"..").replace(/\※/g,"＊").replace(/\―/g,"。")
    document.querySelectorAll("div#novel_contents p").forEach(item => {
        if (item.innerHTML.length == 0) return
        item.innerHTML = item.innerHTML.replace(/0/g,"０").replace(/1/g,"１").replace(/2/g,"２").replace(/3/g,"３").replace(/4/g,"４").replace(/5/g,"５").replace(/6/g,"６").replace(/7/g,"７").replace(/8/g,"８").replace(/9/g,"９")
        item.innerHTML = item.innerHTML.replace(/,/g,"，")
    })
}

const vertical = () => {
    const windowWidth = window.innerWidth*0.9
    const windowHeight = window.innerHeight*0.8
    const container = document.querySelector("#container")
    const novelHonbun = document.querySelector("#novel_honbun")

	const fixDiv = document.createElement("div")
    fixDiv.id="fixDiv"
    fixDiv.style.height = windowHeight+"px"
    novelHonbun.parentNode.insertBefore(fixDiv, novelHonbun)
    const styles = {
        'width': windowWidth+"px",
        'height': windowHeight+"px",
        '-ms-writing-mode': 'tb-rl',
        'writing-mode': 'vertical-rl',
        'overflow-x': 'scroll',
        'padding': '10px',
        'margin':'0 auto',
        'position': 'absolute',
        'top': fixDiv.offsetTop+"px" ,
        'left':'0',
        'right':'0',
    };
    Object.assign(novelHonbun.style,styles)

    window.addEventListener('keydown', function(e){
        if(e.keyCode === 33 || e.keyCode === 38){ //page up、up
            e.preventDefault()
            scrollLeft(novelHonbun, "up")
        } else if(e.keyCode === 32 || e.keyCode === 34 || e.keyCode === 40){ //space、page down、down
            e.preventDefault()
            scrollLeft(novelHonbun, "down")
        } else if(e.keyCode === 37){ //left
            e.preventDefault();
            scrollLeft(novelHonbun, "down", 100)
        } else if(e.keyCode === 39){ //right
            e.preventDefault()
            scrollLeft(novelHonbun, "up", 100)
        }
    });

    novelHonbun.addEventListener('mousewheel', function(e){
        e.preventDefault()
        if(e.wheelDelta > 0) scrollLeft(novelHonbun, "up")
        else scrollLeft(novelHonbun, "down")
    });

    novelHonbun.addEventListener('click', function(e) {
        var xPosition = e.layerX
        var yPosition = e.layerY
        if (xPosition > windowWidth) {
            scrollLeft(novelHonbun, "up")
        } else if (xPosition < windowWidth*0.1) {
            scrollLeft(novelHonbun, "down")
        }
        console.log("x:" + xPosition + ", y:" + yPosition)
    });
}

const scrollLeft = (element, type, value) => {
    if (!value || value <= 0) value = element.clientWidth*0.9
    if (!type) type = "down"
    if (type === "up") element.scrollLeft += value //up
    else if (type === "down") element.scrollLeft -= value //down
}

(function() {
    reHeadNav()
    replaceContents()
    vertical()
})()
欢迎访问Greasy Fork镜像
