Bionic Reading

Enanched reading for all webpages, based in https://greasyfork.org/en/scripts/445268-bionic-reading

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name         Bionic Reading
// @namespace    http://tampermonkey.net/
// @version      0.1.10
// @description  Enanched reading for all webpages, based in https://greasyfork.org/en/scripts/445268-bionic-reading
// @author       ****
// @match        *://*/*
// @grant        none
// @require      https://code.jquery.com/jquery-2.1.1.min.js
// @license      MIT
// ==/UserScript==

// Not the best way but easy and fast
const styleBold = document.createElement('style');
const styleOpacity = document.createElement('style');
styleBold.innerHTML = 'bbb{font-weight:bold;}';
styleOpacity.innerHTML = "ccc { opacity: 70% }";
var isBold = true;
var isOpacity = true;

// Quit 'a' from the list if you want to be applied to links
const excludeTagNames = ['script','style','xmp','input','textarea','pre','code','a'].map(a=>a.toUpperCase());

let textEls = [];
const gather = el=>{
    el.childNodes.forEach(el=>{
        if(el.isEnB) return;
        if(el.nodeType === 3){
            textEls.push(el);
        }else if(el.childNodes){
            if(excludeTagNames.includes(el.tagName)) return;
            gather(el)
        }
    })
};

let body = document.body;

const enCodeHTML = s=> s.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
    return '&#'+i.charCodeAt(0)+';';
 });

const run = _=>{
    textEls = [];
    gather(body);

    textEls.forEach(textEl=>{
        const text = textEl.data;
        if(!/[a-z][a-z0-9]+/i.test(text))return;

        const spanEl = document.createElement('spann');
        spanEl.isEnB = true;
        spanEl.innerHTML = enCodeHTML(text).replace(/[a-z][a-z0-9]+/ig,word=>{
            return '<bbb>'+word.substr(0,Math.ceil(word.length/2))+'</bbb>'+'<ccc>'+word.substr(Math.ceil(word.length/2))+'</ccc>'
        })
        textEl.after(spanEl);
        textEl.remove();
    });
    document.head.appendChild(styleBold);
    document.head.appendChild(styleOpacity);
}

// Menu
var BionicMenu = document.createElement("div");
BionicMenu.style.margin = "0";
BionicMenu.style.padding = "0";
BionicMenu.style.position = "fixed";
BionicMenu.style.width = "20px";
BionicMenu.style.right = "0px";
BionicMenu.style.bottom = "50vh";
BionicMenu.style.color = "black";
BionicMenu.style.background = "white";
BionicMenu.style.opacity = "80%";

// Button for bold
var BoldOption = document.createElement("p");
BoldOption.id = "toggleBold";
BoldOption.textContent = "b"
BoldOption.style.textAlign = "center";
BoldOption.style.padding = "4px 0";
BoldOption.style.margin = "0";
BoldOption.style.fontSize = "16px";
BoldOption.style.userSelect = "none";
BoldOption.style.background = "#646464";

// Copy of the button and changed for opacity
var OpacityOption = BoldOption.cloneNode(true)
OpacityOption.id = "toggleOpacity";
OpacityOption.textContent = "o"

// Add all to the page
BionicMenu.appendChild(BoldOption);
BionicMenu.appendChild(OpacityOption);
body.appendChild(BionicMenu);

// button toggle behaviour
$("#toggleBold").on("click", function () {
    if (isBold)
        styleBold.innerHTML = 'bbb{font-weight:none;}';
    else
        styleBold.innerHTML = 'bbb{font-weight:bold;}';
    isBold = !isBold;
    $(this).css("background", isBold ? "#646464" : "none");
});

$("#toggleOpacity").on("click", function () {
    if (isOpacity)
        styleOpacity.innerHTML = "ccc { opacity: 100% }";
    else
        styleOpacity.innerHTML = "ccc { opacity: 70% }";
    isOpacity = !isOpacity;
    $(this).css("background", isOpacity ? "#646464" : "none");
    run();
});

// Apply all on load
function load() {
    document.head.appendChild(styleBold);
    document.head.appendChild(styleOpacity);
    run();
}

const _run = ms=> _=>setTimeout(load(),ms);
const {open,send} = XMLHttpRequest.prototype;
XMLHttpRequest.prototype.open = function(){
    this.addEventListener('load',_run(200));
    return open.apply(this,arguments);
};

document.addEventListener('click',_run(250));
window.addEventListener('load',_run(200));
document.addEventListener("DOMContentLoaded",_run(200));

setTimeout(function(){
        $(window).trigger('load');
    }, 3500);