Piao Tian Xiao Shuo - Reading Mode

ptxs_reading_mode.user.js

// ==UserScript==
// @name         Piao Tian Xiao Shuo
// @namespace    http://www.piaotian.com/
// @version      0.1
// @match        https://www.piaotian.com/*
// @match        http://www.piaotian.com/*
// @match        https://www.ptwxz.com/*
// @match        http://www.piaotianw.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function patchStyles(){
        // bg: #443
        // #edf6d0 #aeaea0 #cc9
        let styles = ""
        + "#main{box-shadow: 0px 0px 4px rgba(100,100,100,0.25); border-radius: 5px;}"
        + "#content { font-family: SimSun; font-size: 18px; line-height: 1.5em; }";
        // + "#content{font-family:'KaiTi'; font-size:24px; line-height:1.7em; }";

        console.info("Patching styles:");
        console.info(styles);

        let el = document.createElement("style");
        el.innerText = styles;
        document.body.appendChild(el);
    }

    function setColor(main, bg, text) {
        $("body").css("background-color", bg);
        $("#main")
            .css("background-color", main)
            .css("color", text);
        $("#content")
            .css("background-color", main)
            .css("color", text);
    }

    function redrawColors(){
        let main = get(K_COLOR_MAIN);
        let bg = get(K_COLOR_BG);
        let text = get(K_COLOR_TEXT);
        console.info(">>> Reset Colors: " + main +", " + bg + ", " + text);
        setColor(main, bg, text);
    }

    function resetColors(){
        save(K_COLOR_MAIN, "#edf6d0");
        save(K_COLOR_BG, "#443");
        save(K_COLOR_TEXT, "#000");
        redrawColors();
    }

    function resetChapterTitle(){
        let title = $("h1")[0].childNodes[1].nodeValue;
        title = title.replace("正文 ", "");
        $("head title")[0].innerText = title;
    }

    function removeAd(){
        try{
            let iframes = top.document.getElementsByTagName("iframe");
            for(let i=0; i<iframes.length; i++){let ifm=iframes[i]; ifm.parentElement.removeChild(ifm);}
            let ad_holder = top.document.getElementById("content").getElementsByTagName("table")[0];
            ad_holder.parentElement.removeChild(ad_holder);
        }catch(e){
            console.error("Cannot remove ad: " + e);
        }
    }

    function adjustLayout(){
        try{
            let c = top.document.getElementById("content");
            c.innerHTML = c.innerHTML.toString().replaceAll("<br><br>", "<br>");
        }catch(e){
            console.error("Cannot adjustLayout: " + e);
        }
    }

    function sendGet(url, onload, onerror) {
        let req = new XMLHttpRequest();
        req.addEventListener("load", onload);
        req.addEventListener("error", onerror);
        req.open("GET", url); req.send();
    }

    function nextPageUrl(doc){
        if (!doc){
            doc = top.document;
        }
        return doc.getElementsByClassName("toplink")[0].children[2].href;
    }

    // return [content, nextPageUrl]
    function extractResponse(resp){
        let html = resp.target.responseText;
        let parser = new DOMParser();
        let doc = parser.parseFromString(html, "text/html");
        let content = parseRawContent(doc);
        let next = nextPageUrl(doc);
        return [content.innerHTML, next];
    }

    function parseRawContent(rawdoc){
        let h1 = rawdoc.getElementsByTagName("h1");

    }

    function appendContent(doc, htmlContent){
        if (!doc){
            doc = top.document;
        }
        let newContent = doc.createElement("div");
        newContent.innerHTML = htmlContent;
        let main = doc.getElementById("main");
        main.appendChild(newContent);
    }

    function updateNextUrl(){

    }

    function loadNextPage(){
        let url = nextPageUrl();
        let onLoad = function(resp){
            let result = extractResponse(resp);
            appendContent(top.document, result[0]);
        };
        let onError = function(err){
            console.error(err);
        };
        sendGet(url, onLoad, onError);
    }

    function onColorPickerJSLoaded(){
        // console.info("!!! COLOR PICKER LOADED");
        // listenColorPickerEvts();
        resetColors();
        resetChapterTitle();
    }

    function loadError(oError) {
        throw new URIError("The script " + oError.target.src + " didn't load correctly.");
    }

    function affixScriptToHead(url, onloadFunction) {
        var newScript = document.createElement("script");
        newScript.onerror = loadError;
        if (onloadFunction) { newScript.onload = onloadFunction; }
        document.head.appendChild(newScript);
        newScript.src = url;
    }

    function patchColorPicker(){
        affixScriptToHead("https://code.jquery.com/jquery-2.2.4.min.js", function(){
            affixScriptToHead("https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js", onColorPickerJSLoaded);
        });
        document.body.innerHTML += '<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">'
    }

    const COLOR_PICKER_ID = "cust_cp";

    function addCP(id, label, container, onChoose, initValue){
        let d = top.document;
        let lbl = d.createElement("label");
        lbl.innerText = label;
        container.appendChild(lbl);
        container.appendChild(d.createElement("br"));

        let ipt = d.createElement("input");
        ipt.id = id;
        ipt.type = "text";
        container.appendChild(ipt);
        container.appendChild(d.createElement("br"));

        let cp = $("#" + id).spectrum({
            flat: true,
            showInput: true,
            preferredFormat: "hex",
            change: function(color){
                onChoose(color);
                removeColorPicker();
            }
        });

        if (initValue) {
            cp.spectrum("set", initValue);
        }
    }

    function buildColorPickers(x, y, onChooseMain, onChooseBg, onChooseText){
        let d = top.document;
        let e = d.createElement("div");
        e.id = COLOR_PICKER_ID;
        d.body.append(e);
        $(e).css(  "background-color", "white" );

        addCP("cust_cp_main", "MAIN", e, onChooseMain, get(K_COLOR_MAIN));
        addCP("cust_cp_bg", "BG", e, onChooseBg, get(K_COLOR_BG));
        addCP("cust_cp_text", "TEXT", e, onChooseText, get(K_COLOR_TEXT));

        let btn = d.createElement("button");
        btn.innerText = "Reset";
        btn.addEventListener("click", function(e){
            removeColorPicker();
            resetColors();
        });
        e.appendChild(btn);

        positionColorPicker(x, y);
    }

    function removeColorPicker(){
        $("#" + COLOR_PICKER_ID).remove();
    }

    function existColorPicker(){
        let d = top.document;
        let e = d.getElementById(COLOR_PICKER_ID);
        return e;
    }

    function positionColorPicker(x, y){
        let e = $("#" + COLOR_PICKER_ID);
        e.css("position", "absolute");
        e.css("top", y);
        e.css("left", x);
    }

    const K_COLOR_MAIN = "key_color_main";
    const K_COLOR_BG = "key_color_bg";
    const K_COLOR_TEXT = "key_color_text";

    function save(key, c) {
        let s = top.localStorage;
        s.setItem(key, c);
    }

    function get(key) {
        return top.localStorage.getItem(key);
    }

    function listenColorPickerEvts() {
        $("#content").dblclick(function(e){
            console.info("dbclick: #content");
            buildColorPickers(
                e.screenX,
                e.screenY,
                function(mainColor) {
                    save(K_COLOR_MAIN, mainColor);
                    redrawColors();
                },
                function(bgColor) {
                    save(K_COLOR_BG, bgColor);
                    redrawColors();
                },
                function(textColor) {
                    save(K_COLOR_TEXT, textColor);
                    redrawColors();
                }
            );
        });
    }

    if (document != top.document){
        return;
    }

    patchColorPicker();
    patchStyles();
    removeAd();
    adjustLayout();
    // loadNextPage();

    top.loadNextPage = loadNextPage;
    top.onColorPickerJSLoaded = onColorPickerJSLoaded;
})();