Greasy Fork is available in English.

LightNovels

Library allowing to remodel the <html> tag to create a 'reader' view (see screenshots).

Version au 21/05/2018. Voir la dernière version.

Ce script ne doit pas être installé directement. C'est une librairie destinée à être incluse dans d'autres scripts avec la méta-directive // @require https://update.greasyfork.org/scripts/368324/599003/LightNovels.js 

// ==UserScript==
// @name     LightNovels
// @description Library allowing to remodel the <html> tag to create a 'reader' view (see screenshots).
// @version  2
// @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 id="title">Titre</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 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)});
}