Greasy Fork is available in English.
Library allowing to remodel the <html> tag to create a 'reader' view (see screenshots).
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/368324/599006/LightNovels.js
// ==UserScript==
// @name LightNovels
// @description Library allowing to remodel the <html> tag to create a 'reader' view (see screenshots).
// @version 3
// @include *
// @require http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @grant GM.getValue
// @grant GM.setValue
// ==/UserScript==
/** VARS **/
var isDark;
var size;
var isBold;
var debugMode;
/** FUNCTIONS **/
function createBody(){
document.documentElement.innerHTML = '<head>' +
' <meta charset="utf-8">' +
' <title>GreaseMonkey - LightNovels</title>' +
' <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>' +
' <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">' +
' <!--<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>' +
' <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>-->' +
' </head>' +
' <body class="container-fluid h-100 bg-light">' +
' <div class="row h-100">' +
' <section class="col-xs-12 col-sm-11 order-1 d-flex flex-column p-0 pb-4 pb-sm-2 h-100">' +
' <header class="shadow-sm px-3 pt-2">' +
' <h4>' +
' <span id="title"></span><br/>' +
' <small id="subTitle"></small>' +
' </h4>' +
' </header>' +
' <article id="chapterContent" class="flex-grow-1 mb-5 m-sm-0 p-3" style="overflow-y: scroll;"></article>' +
' </section>' +
' <nav id="navBig" class="col-sm-1 order-0 h-100 d-none d-sm-flex shadow-lg flex-wrap p-1">' +
' <div class="btn-group btn-group-vertical w-100 align-self-start">' +
' <button class="buttonLight btn btn-outline-dark px-0 mb-2 rounded" style="border-width: 3px;">' +
' <span class="far fa-lg fa-lightbulb"></span>' +
' </button>' +
' </div>' +
' <div class="btn-group btn-group-vertical w-100 align-self-center">' +
' <a class="buttonPrevious btn btn-outline-info px-0 rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-arrow-alt-circle-left"></span>' +
' </a>' +
' <a class="buttonTOC btn btn-outline-primary px-0 my-1 rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fa fa-lg fa-th-list"></span>' +
' </a>' +
' <a class="buttonNext btn btn-outline-info px-0 mb-2 rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-arrow-alt-circle-right"></span>' +
' </a>' +
' </div>' +
' <div class="btn-group btn-group-vertical w-100 align-self-end">' +
' <button class="buttonSmaller d-inline btn btn-outline-warning px-0 rounded" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-compress"></span>' +
' </button>' +
' <button class="buttonBold d-inline btn btn-outline-dark px-0 my-1 rounded" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-bold"></span>' +
' </button>' +
' <button class="buttonBigger d-inline btn btn-outline-danger px-0 rounded" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-expand"></span>' +
' </button>' +
' </div>' +
' </nav>' +
' </div>' +
' <nav id="navSmall" class="fixed-bottom d-flex d-sm-none p-1 btn-group btn-group-lg">' +
' <button class="buttonLight btn btn-outline-dark px-0 mr-2 flex-fill rounded" style="border-width: 3px;">' +
' <span class="far fa-lg fa-lightbulb"></span>' +
' </button>' +
' <a class="buttonPrevious btn btn-outline-info px-0 flex-fill rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-arrow-alt-circle-left"></span>' +
' </a>' +
' <a class="buttonTOC btn btn-outline-primary px-0 mx-1 flex-fill rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fa fa-lg fa-th-list"></span>' +
' </a>' +
' <a class="buttonNext btn btn-outline-info px-0 mr-3 flex-fill rounded" href="#" role="button" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-arrow-alt-circle-right"></span>' +
' </a>' +
' <a class="buttonSmaller btn btn-outline-warning px-0 flex-fill rounded" href="#" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-compress"></span>' +
' </a>' +
' <a class="buttonBold btn btn-outline-dark px-0 mx-1 flex-fill rounded" href="#" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-bold"></span>' +
' </a>' +
' <a class="buttonBigger btn btn-outline-danger px-0 flex-fill rounded" href="#" style="border-width: 3px;">' +
' <span class="fas fa-lg fa-expand"></span>' +
' </a>' +
' </nav>' +
' </body>';
$("html").addClass("h-100");
(async function() {
setDebugMode(await GM.getValue("debugMode", true));
myLog('"debugMode" was saved as : ${size}.');
myLog('Starting the get/set of size ...');
setSize(await GM.getValue("size", 18));
myLog('"size" was saved as : ${size}.');
myLog('Starting the get/set of isDark ...');
setIsDark(await GM.getValue("isDark", false));
myLog('"isDark" was saved as : ${isDark}.');
myLog('Starting the get/set of isBold ...');
setIsBold(await GM.getValue("isBold", false));
myLog('"isBold" was saved as : ${isBold}.');
})();
$(".buttonLight").each(function(){
$(this).click(function(event) {
setIsDark(!isDark);
})});
$(".buttonBold").each(function(){
$(this).click(function(event) {
setIsBold(!isBold);
})});
$(".buttonSmaller").each(function(){
$(this).click(function(event) {
setSize(size-1);
})});
$(".buttonBigger").each(function(){
$(this).click(function(event) {
setSize(size+1);
})});
}
/** SETTERS **/
function myLog(message){
if(debugMode)
console.log(message);
}
function setDebugMode(newDebugMode){
myLog('Changing value of "DebugMode" from "' + debugMode + '" to "' + newDebugMode + '".');
debugMode = newDebugMode;
GM.setValue("debugMode", debugMode);
}
function setSize(newSize){
myLog('Changing value of "size" from "' + size + '" to "' + newSize + '".');
size = newSize;
GM.setValue("size", size);
$(document.body).css("font-size", size+"px");
}
function setIsDark(newIsDark){
myLog('Changing value of "isDark" from "' + isDark + '" to "' + newIsDark + '".');
isDark = newIsDark;
GM.setValue("isDark", isDark);
$(document.body).toggleClass('bg-dark', isDark);
$(document.body).toggleClass('text-white', isDark);
$("#navSmall").toggleClass('bg-dark', isDark);
$(".buttonLight").each(function(){$(this).toggleClass('btn-outline-dark', !isDark)});
$(".buttonLight").each(function(){$(this).toggleClass('btn-outline-light', isDark)});
$(".buttonBold").each(function(){$(this).toggleClass('btn-outline-dark', !isDark)});
$(".buttonBold").each(function(){$(this).toggleClass('btn-outline-secondary', isDark)});
}
function setIsBold(newIsBold){
myLog('Changing value of "isBold" from "' + isBold + '" to "' + newIsBold + '".');
isBold= newIsBold;
GM.setValue("isBold", isBold);
$(document.body).toggleClass('font-weight-bold', isBold);
}
function setTitle(newTitle){
myLog('Setting title to "' + newTitle + '".');
$("#title").text(newTitle);
$(document).prop('title', newTitle);
}
function setSubTitle(newSubTitle){
myLog('Setting sub-title to "' + newSubTitle + '".');
$("#subTitle").text(newSubTitle);
}
function setContent(newContent){
myLog('Setting content to "' + newContent + '".');
$("#chapterContent").html(newContent);
}
function setTOC(newTOC){
myLog('Setting TOC link to "' + newTOC + '".');
$(".buttonTOC").each(function(){$(this).attr("href", newTOC)});
}
function setPrev(newPrevious){
myLog('Setting previous link to "' + newPrevious + '".');
$(".buttonPrevious").each(function(){$(this).attr("href", newPrevious)});
}
function setNext(newNext){
myLog('Setting next link to "' + newNext + '".');
$(".buttonNext").each(function(){$(this).attr("href", newNext)});
}