Readability/readability/data/Toolbar.js

/* ============================================================
* Readability - plugin for Falkon
* Copyright (C) 2016  Jaroslav Bambas <jar.bambas@gmail.com>
* Copyright (C) 2019-2022  Juraj Oravec <jurajoravec@mailo.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program.  If not, see <http://www.gnu.org/licenses/>.
* ============================================================ */

function readablilityToolbar(){
    renderToolbar();
    addListeners();
}

function renderToolbar(){
    var toolbar = document.createElement('div');
    document.getElementById('container').appendChild(toolbar);

    toolbar.innerHTML = '<ul visible="true" id="reader-toolbar" class="toolbar"><li><button id="close-button" class="button close-button"></button></li><ul id="style-dropdown" class="dropdown"><li><button id="style-button" class="dropdown-toggle button style-button"></button></li><li style="top: 48px;" id="reader-popup" class="dropdown-popup"><div id="font-type-buttons"><button id="sans-serif-button" class="sans-serif-button selected"><div class="name">Aa</div><div class="description">Sans-serif</div></button><button id="serif-button" class="serif-button"><div class="name">Aa</div><div class="description">Serif</div></button></div><hr><div id="font-size-buttons"><button id="font-size-minus" class="minus-button"></button><button id="font-size-plus" class="plus-button"></button></div><hr><div id="color-scheme-buttons"><button id="light-button" class="light-button"><div class="name">Light</div></button><button id="dark-button" class="dark-button"><div class="name">Dark</div></button><button id="sepia-button" class="sepia-button selected"><div class="name">Sepia</div></button></div><div class="dropdown-arrow"></div></li></ul></ul>';
}

function addListeners(){
    document.getElementById('close-button').addEventListener("click", closeReadability);
    document.getElementById('style-button').addEventListener("click", toolbarService);

    var lightButton = document.getElementById('light-button');
    lightButton.addEventListener("click", function(){
        switchToLight();
        external.extra.readability.setColorTheme('light');
    });
    var sepiaButton = document.getElementById('sepia-button');
    sepiaButton.addEventListener("click", function(){
        switchToSepia();
        external.extra.readability.setColorTheme('sepia');
    });
    var darkButton = document.getElementById('dark-button');
    darkButton.addEventListener("click", function(){
        switchToDark();
        external.extra.readability.setColorTheme('dark');
    });

    var serifButton = document.getElementById('serif-button');
    serifButton.addEventListener("click", function(){
        switchToSerif();
        external.extra.readability.setFont('serif');
    });
    var sansSerifButton = document.getElementById('sans-serif-button');
    sansSerifButton.addEventListener("click", function(){
        switchToSansSerif();
        external.extra.readability.setFont('sans-serif');
    });

    var fontSizePlusButton = document.getElementById('font-size-plus');
    fontSizePlusButton.addEventListener("click", fontSizePlus);
    var fontSizeMinusButton = document.getElementById('font-size-minus');
    fontSizeMinusButton.addEventListener("click", fontSizeMinus);
}

function closeReadability(){
    location.reload();
}

function toolbarService(){
    var element = document.getElementById('style-dropdown');

    if(element.classList.contains('open')){
        element.classList.remove('open');
    } else {
        element.classList.add('open');
    }
}

function switchToLight(){
    document.body.classList.remove('sepia', 'dark');
    document.body.classList.add('light');

    var toolbar = document.getElementById('reader-toolbar');
    toolbar.classList.remove('sepia', 'dark');
    toolbar.classList.add('light');

    var items = document.getElementById('color-scheme-buttons').children;
    for (var j = items.length - 1; j >= 0; j--) {
        items[j].classList.remove("selected");
    }
    document.getElementById('light-button').classList.add('selected');
}

function switchToSepia(){
    document.body.classList.remove('light', 'dark');
    document.body.classList.add('sepia');

    var toolbar = document.getElementById('reader-toolbar');
    toolbar.classList.remove('light', 'dark');
    toolbar.classList.add('sepia');

    var items = document.getElementById('color-scheme-buttons').children;
    for (var j = items.length - 1; j >= 0; j--) {
        items[j].classList.remove("selected");
    }
    document.getElementById('sepia-button').classList.add('selected');
}

function switchToDark(){
    document.body.classList.remove('sepia', 'light');
    document.body.classList.add('dark');

    var toolbar = document.getElementById('reader-toolbar');
    toolbar.classList.remove('sepia', 'light');
    toolbar.classList.add('dark');

    var items = document.getElementById('color-scheme-buttons').children;
    for (var j = items.length - 1; j >= 0; j--) {
        items[j].classList.remove("selected");
    }
    document.getElementById('dark-button').classList.add('selected');
}

function switchToSerif(){
    document.body.classList.remove('sans-serif');
    document.body.classList.add('serif');
    document.getElementById('sans-serif-button').classList.remove('selected');
    document.getElementById('serif-button').classList.add('selected');
}

function switchToSansSerif(){
    document.body.classList.remove('serif');
    document.body.classList.add('sans-serif');
    document.getElementById('serif-button').classList.remove('selected');
    document.getElementById('sans-serif-button').classList.add('selected');
}

function fontSizePlus(){
    var container = document.getElementById('container');
    var incrementedSize = 0;
    for (var i = 0; i < container.classList.length; i++){
        if(container.classList[i].indexOf('font-size') > -1){
            var size = container.classList[i].replace("font-size", "");
            if(parseInt(size) < 21){
                incrementedSize = parseInt(size) + 1;
                external.extra.readability.setFontSize(incrementedSize);
            } else return;
            container.classList.remove(container.classList[i]);
            container.classList.add('font-size' + incrementedSize);
            return;
        }
    }
}

function fontSizeMinus(){
    var container = document.getElementById('container');
    var decrementedSize = 0;
    for (var i = 0; i < container.classList.length; i++){
        if(container.classList[i].indexOf('font-size') > -1){
            var size = container.classList[i].replace("font-size", "");
            if(parseInt(size) > 1){
                decrementedSize = parseInt(size) - 1;
                external.extra.readability.setFontSize(decrementedSize);
            } else return;
            container.classList.remove(container.classList[i]);
            container.classList.add('font-size' + decrementedSize);
            return;
        }
    }
}

function fontSizeSet(fontSize){
    if (fontSize < 1 || fontSize > 21)
        return

    var container = document.getElementById('container');
    for (var i = 0; i < container.classList.length; i++){
        if(container.classList[i].indexOf('font-size') > -1){
            container.classList.remove(container.classList[i]);
            container.classList.add('font-size' + fontSize);
            return;
        }
    }
}