Greasy Fork

Greasy Fork is available in English.

AO3: Fic's style [originale]

Tweaks for the fic's style. You can change font, size, color, page's width...

当前为 2015-07-17 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         AO3: Fic's style [originale]
// @namespace    http://greasyfork.icu/it/users/12632-schegge
// @version      1.0.1
// @history      1.0.1: a minor fix
// @description  Tweaks for the fic's style. You can change font, size, color, page's width...
// @author       Schegge
// @include      http*://archiveofourown.org*/works/*
// @grant        none
// ==/UserScript==

(function($) {

    fontNameDefault = $("body").css("font-family");
//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//* OPTIONS *//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//

    var Options = {
        fontName: [fontNameDefault, "Georgia", "Garamond", "Book Antiqua", "Verdana", "Segoe UI"],
        fontSize: 100, //%
        fontColor: "#000",
        chapterWidth: 90, //% ( min = 10; max = 90 )
        showBackground: "no", //or "yes"
        backgroundColor: "#f6f6f6"
    };

//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//

    numChapters = $("#chapters > .chapter").length; // it counts how many chapters the fic has
    var chapters;
    if (numChapters) { // if the fic has several chapters, even if only one chapter is displayed
        chapters = $("#chapters > .chapter");
    } else { // if the fic is a one-shot
        chapters = $("#chapters");
    }
    
    var Variables = {
        fontName: function() {
            var fontName = localStorage.getItem("ficstyle_fontName");
            if (!fontName) {
                fontName = Options.fontName[0];
                localStorage.setItem("ficstyle_fontName", fontName);
            }
            return fontName;
        },      
        fontSize: function() {
            var fontSize = localStorage.getItem("ficstyle_fontSize");
            if (!fontSize) {
                fontSize = Options.fontSize;
                localStorage.setItem("ficstyle_fontSize", fontSize);
            }
            return fontSize;
        },        
        chapterWidth: function() {
            var chapterWidth = localStorage.getItem("ficstyle_chapterWidth");
            if (!chapterWidth) {
                chapterWidth = Options.chapterWidth;
                localStorage.setItem("ficstyle_chapterWidth", chapterWidth);
            }
            return chapterWidth;
        },        
        showBackground: function() {
            var showBackground = localStorage.getItem("ficstyle_showBackground");
            if(!showBackground) {
                showBackground = Options.showBackground;
                localStorage.setItem("ficstyle_showBackground", showBackground);
            }
            return showBackground;
        },        
        hide: function() {
            var hide = localStorage.getItem("ficstyle_hide");
            if (!hide) {
                hide = "no";
                localStorage.setItem("ficstyle_hide", hide);
            }
            return hide;
        },        
        background: function() {
            chapters.css({
                "background-color": Options.backgroundColor,
                "box-shadow": "inset 0 0 8px 0 rgba(0, 0, 0, .2)"                           
            });
            $(".chapter .preface[role='complementary']").css("border-top-width", "0"); // the chapter title
            $("#chapters .userstuff blockquote").css({
                "background-image": "linear-gradient(to right, rgba(0, 0, 0, .035), transparent)",
                "border-width": "0"
            });
        },
        noBackground: function() {
            chapters.css({
                "background-color": "transparent",
                "box-shadow": "none"
            });
            $(".chapter .preface[role='complementary']").css("border-top-width", "1px"); // the chapter title
            $("#chapters .userstuff blockquote").css({
                "background-image": "none",
                "border-width": "2px",
                "border-color": "rgba(0, 0, 0, .1)"
            });
        },
        changingCSS: function(a, b) { // a = "Variables" (user changes) or "Options" (default); b = "no" background or "yes"
            var chapterWidth, fontName, fontSize;
            if (a == "Variables") {
                chapterWidth = this.chapterWidth();
                fontName = this.fontName();
                fontSize = this.fontSize();
            } else { // a = "Options"       
                chapterWidth = Options.chapterWidth;
                fontName = Options.fontName[0];
                fontSize = Options.fontSize;
            }
            chapters.css({
                "width": chapterWidth + "%",
                "font-family": fontName,
                "font-size": fontSize + "%"
            });
            if (b == "no") {
                this.noBackground();
            } else { // b = "yes"
                this.background();
            }
        }
    };

    // here start the changes
    Variables.changingCSS("Variables", Variables.showBackground());
    chapters.css({
        "color": Options.fontColor,
        "margin": "auto",
        "text-align": "justify",
        "padding-top": "30px",
        "padding-bottom": "30px",
        "border-radius": "100% / 60px",
        "margin-bottom": "20px",
        "padding-right": "3%",
        "padding-left": "3%"
    });
    $(".chapter .preface").css("margin-bottom", "0");
    $(".chapter .preface[role='complementary']").css({"margin-top": "0", "padding-top": "0"}); // the chapter title
    $("#workskin .notes").css("font-size", ".95rem"); // so they don't change if font-size is increased/de.
    $("#workskin .summary").css("font-size", ".95rem"); // same    
    $("#chapters .userstuff p").each(function(){ if(!$(this).text().trim().length){$(this).remove();} }) // it removes empty paragraphs
    $("#chapters .userstuff br").after("<p>").remove(); // add a empty paragraph after a '<br>' in order to add spaces between the paragraphs, and remove <br>
    $("#chapters .userstuff p").css({"text-indent": "0.3em", "margin": "0.6em auto"});
    $("#chapters .userstuff blockquote").css({
        "font-family": "inherit",
        "padding-top": "1px",
        "padding-bottom": "1px",
        "margin": "0 .5em"
    });
    $(".userstuff hr").css({
        "width": "100%",
        "height": "1px",
        "border": "0",
        "background-image": "linear-gradient(to right, transparent, rgba(0, 0, 0, .2), transparent)"
    });
    $(".userstuff img").css({"max-width": "100%", "height": "auto"});

    // the options displayed on the page
    $options = $("<div>", {id: "options", css: {
        "position": "fixed",
        "bottom": "1.5%",
        "left": ".5%",
        "margin": "0",
        "padding": " 0 5px 5px 5px",
        "font-family": "Consolas, monospace",
        "font-size": "16px",
        "color": "#000",
        "text-shadow": "0 0 2px rgba(0, 0, 0, .3)",
        "z-index": "999"
    } })    
    .append( $("<div>", {html: "x", id: "show-hide", attr: {"title": "show/hide"}, css: {"color": "#900"} }) )
    .append( $("<div>", {html: "r", id: "reset-local-storage", attr: {"title": "reset"} }) )
    .append( $("<div>", {html: "b", id: "chapter-background", attr: {"title": "add/remove background"} }) )
    .append( $("<div>", {html: "▫", id: "chapter-width-minus", attr: {"title": "decrease width"} }) )
    .append( $("<div>", {html: "□", id: "chapter-width-plus", attr: {"title": "increase width"} }) )
    .append( $("<div>", {html: "-", id: "font-size-minus", attr: {"title": "decrease font size"} }) )
    .append( $("<div>", {html: "+", id: "font-size-plus", attr: {"title": "increase font size"} }) )
    .append( $("<div>", {html: "«", id: "font-name-minus", attr: {"title": "previous font"} }) )
    .append( $("<div>", {html: "»", id: "font-name-plus", attr: {"title": "next font"} }) );
    $("body").append($options);    
    $("#options > div").css({
        "margin": "5px 0 0 0",
        "padding": "0",
        "cursor": "pointer"
    });

    if(Variables.hide() == "no") {
        $("#options > div").css("display", "block");
    } else {
        $("#options > div:nth-child(n+2)").css("display", "none");
    }

    var childrenOrig = $("#chapters .userstuff").children(),
        children = childrenOrig,
        child,
        checkChildren = function() { // find which paragraph the user is reading when changes are made
            var i = 0;            
            children.each(function() {
                pTop = $(this).offset().top;
                pHeight = $(this).height();
                pMargin = parseFloat($(this).css("margin-top"));
                if( (pTop-pMargin) <= documentTop && (pTop+pHeight+pMargin) >= documentTop) { // the p. which is on the top of the window screen
                    child = i;
                }
                i++;
            });
        },
        checkPosition = function() { // find the position using the 'index' of the p.
            documentTop = $(document).scrollTop();
            child = undefined;
            checkChildren();
            if (child === undefined) {
                children = $("#chapters .chapter").children();
                checkChildren();
            }
        },
        returnBack = function() { // scroll to the p. found above
            if(child !== undefined) {
                var r = $(children[child]).offset().top;
                $(document).scrollTop(r);
            }
            if(children !== childrenOrig) {
                children = childrenOrig;
            }
        };

    // changes triggered by the user    
    $("#show-hide").click(function() {
        $("#options > div:nth-child(n+2)").slideToggle("300");
        if(localStorage.getItem("ficstyle_hide") == "no") {
            localStorage.setItem("ficstyle_hide", "yes");
        } else { localStorage.setItem("ficstyle_hide", "no"); }
    });

    $("#reset-local-storage").click(function() {
        checkPosition();
        localStorage.setItem("ficstyle_fontName", Options.fontName[0]);
        localStorage.setItem("ficstyle_fontSize", Options.fontSize);
        localStorage.setItem("ficstyle_chapterWidth", Options.chapterWidth);        
        localStorage.setItem("ficstyle_showBackground", Options.showBackground);
        Variables.changingCSS("Options", Options.showBackground);
        returnBack();
    });

    $("#chapter-background").click(function() {        
        checkPosition();
        if(localStorage.getItem("ficstyle_showBackground") == "no") {
            localStorage.setItem("ficstyle_showBackground", "yes");
            Variables.background();
        } else {
            localStorage.setItem("ficstyle_showBackground", "no");
            Variables.noBackground();
        }
        returnBack();
    });

    var curFont, curFontIncr;
    $("#font-name-minus").click(function() {
        checkPosition();
        curFont = localStorage.getItem("ficstyle_fontName");    
        for(var i = 0; i < Options.fontName.length; i++) {
            if(curFont == Options.fontName[i]) {
                var j = i - 1;
                if(j === -1) {
                    var u = Options.fontName.length - 1;
                    curFontIncr = Options.fontName[u];
                } else {
                    curFontIncr = Options.fontName[j];
                }
                $(chapters).css("font-family", curFontIncr);
                localStorage.setItem("ficstyle_fontName", curFontIncr);
            }
        }
        returnBack();
    });
    $("#font-name-plus").click(function() {
        checkPosition();
        curFont = localStorage.getItem("ficstyle_fontName");    
        for(var i = 0; i < Options.fontName.length; i++) {
            if(curFont == Options.fontName[i]) {
                var j = i + 1;
                if(j === Options.fontName.length) {                                        
                    curFontIncr = Options.fontName[0];
                } else {
                    curFontIncr = Options.fontName[j];
                }
                $(chapters).css("font-family", curFontIncr);
                localStorage.setItem("ficstyle_fontName", curFontIncr);
            }
        }
        returnBack();
    });

    var curSize;
    $("#font-size-minus").click(function() {
        checkPosition();
        curSize = parseFloat(localStorage.getItem("ficstyle_fontSize")) - 2.5;
        $(chapters).css("font-size", curSize+"%");
        localStorage.setItem("ficstyle_fontSize", curSize);
        returnBack();
    });
    $("#font-size-plus").click(function() { 
        checkPosition();       
        curSize = parseFloat(localStorage.getItem("ficstyle_fontSize")) + 2.5;
        $(chapters).css("font-size", curSize+"%");
        localStorage.setItem("ficstyle_fontSize", curSize);
        returnBack();
    });

    var curWidth;
    $("#chapter-width-minus").click(function() {
        checkPosition();
        curWidth = parseInt(localStorage.getItem("ficstyle_chapterWidth")) - 10;
        if(curWidth < 10) { curWidth = 10; }
        $(chapters).css("width", curWidth+"%");
        localStorage.setItem("ficstyle_chapterWidth", curWidth);
        returnBack();
    });
    $("#chapter-width-plus").click(function() {
        checkPosition();
        curWidth = parseInt(localStorage.getItem("ficstyle_chapterWidth")) + 10;
        if(curWidth > 90) { curWidth = 90; }
        $(chapters).css("width", curWidth+"%");
        localStorage.setItem("ficstyle_chapterWidth", curWidth);
        returnBack();
    });

})(window.jQuery);