Readability/readability/main.qml

import org.kde.falkon 1.0 as Falkon
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
import QtQuick 2.3

Falkon.PluginInterface {

    QtObject {
        id: g_readability
        property string script
    }

    QtObject {
        id: g_config
        property string icon
        property bool   contextMenu
        property string colorTheme
        property string font
        property int    fontSize
    }

    QtObject {
        id: g_jsObject

        /* Signals, to communicate from QML to webpage JavaScript */
        signal init(string theme, string font, int fontSize)

        /* Normal functions to communicate from webpage JavaScript to QML */
        function setColorTheme(colorTheme) {
            var themes = ["light", "sepia", "dark"]
            if (!themes.includes(colorTheme)) {
                return
            }

            if (g_config.colorTheme != colorTheme) {
                g_config.colorTheme = colorTheme

                saveSettings()
            }
        }
        function setFont(font) {
            var fonts = ["sans-serif", "serif"]
            if (!fonts.includes(font)) {
                return
            }

            if (g_config.font != font) {
                g_config.font = font

                saveSettings()
            }
        }
        function setFontSize(fontSize) {
            if (fontSize < 1 && fontSize > 21) {
                return
            }

            if (g_config.fontSize != fontSize) {
                g_config.fontSize = fontSize

                saveSettings()
            }
        }
    }

    Falkon.UserScript {
        id: readabilityUserScript
        name: 'readability'
        runsOnSubFrames: false
        sourceCode: g_readability.script
        injectionPoint: Falkon.UserScript.Deferred
        worldId: Falkon.UserScript.ApplicationWorld
    }

    init: function(state, settingsPath) {
        g_config.icon        = "dark"
        g_config.contextMenu = true
        g_config.colorTheme  = "sepia"
        g_config.font        = "sans-serif"
        g_config.fontSize    = 5

        loadSettings()

        var scriptReadability = Falkon.FileUtils.readAllFileContents("data/Readability.js")
        var scriptToolbar = Falkon.FileUtils.readAllFileContents("data/Toolbar.js")
        var style = Falkon.FileUtils.readAllFileContents("data/style.css").toString().replace(/[\n\r]/g, '')
        var scriptCall = Falkon.FileUtils.readAllFileContents("data/Call.js").toString()

        scriptCall = scriptCall.replace("{readability.js}", scriptReadability)
        scriptCall = scriptCall.replace("{toolbar.js}", scriptToolbar)
        scriptCall = scriptCall.replace("{style.css}", style)

        g_readability.script = scriptCall

        Falkon.ExternalJsObject.registerExtraObject({
            id: 'readability',
            object: g_jsObject
        })
    }

    testPlugin: function() {
        return true
    }

    unload: function() {
    }

    Falkon.Settings {
        id: settings
        name: 'Readability'
    }

    function findCurrentTab() {
        var window = Falkon.Windows.getCurrent()
        for (var i = 0; i < window.tabs.length; ++i) {
            if (window.tabs[i].current) {
                return window.tabs[i]
            }
        }
    }

    function makeReadability() {
        g_jsObject.init(g_config.colorTheme, g_config.font, g_config.fontSize)
    }

    function loadSettings() {
        g_config.icon        = settings.value({key: 'icon',              defaultValue: g_config.icon})
        g_config.contextMenu = settings.value({key: 'showInContextMenu', defaultValue: g_config.contextMenu})
        g_config.colorTheme  = settings.value({key: 'colorTheme',        defaultValue: g_config.colorTheme})
        g_config.font        = settings.value({key: 'font',              defaultValue: g_config.font})
        g_config.fontSize    = settings.value({key: 'fontSize',          defaultValue: g_config.fontSize})
    }

    function saveSettings() {
        settings.setValue({key: 'icon',              value: g_config.icon})
        settings.setValue({key: 'showInContextMenu', value: g_config.contextMenu})
        settings.setValue({key: 'colorTheme',        value: g_config.colorTheme})
        settings.setValue({key: 'font',              value: g_config.font})
        settings.setValue({key: 'fontSize',          value: g_config.fontSize})

        if (!settings.sync()) {
            console.log("Unable to store the settings!")
            return false
        }
        return true
    }

    function currentIcon() {
        if (g_config.icon == 'light') {
            return 'data/icon-light.png'
        }
        else {
            return 'data/icon-dark.png'
        }
    }

    populateWebViewMenu: function(menu, webHitTestResult) {
        if (g_config.contextMenu) {
            var action = menu.addAction({
                text: i18n('Launch Readability'),
                icon: currentIcon()
            })

            action.triggered.connect(function() {
                makeReadability()
            })
        }
    }

    Falkon.BrowserAction {
        name: i18n('Readability')
        identity: 'readability-id'
        title: i18n('Readability')
        toolTip: i18n('Launch Readability')
        icon: currentIcon()
        location: Falkon.BrowserAction.NavigationToolBar | Falkon.BrowserAction.StatusBar
        onClicked: makeReadability()

        popup: Pane {
            id: mainPane

            ColumnLayout {
                Label {
                    id: infoLabel
                    text: i18n("Trying to convert the page for easier reading.")
                }
            }
        }
    }

    settingsWindow: Pane {
        ColumnLayout {
            RowLayout {
                GroupBox {
                    Layout.alignment: Qt.AlignTop
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    ColumnLayout {
                        Layout.alignment: Qt.AlignTop
                        Label {
                            text: i18n('Menu icon')
                        }
                        RadioButton {
                            id: radioIconLight
                            text: i18n('Light')
                            checked: g_config.icon == 'light'
                        }
                        RadioButton {
                            id: radioIconDark
                            text: i18n('Dark')
                            checked: g_config.icon == 'dark'
                        }
                    }
                }
                GroupBox {
                    Layout.alignment: Qt.AlignTop
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    ColumnLayout {
                        Label {
                            text: i18n('Color Scheme')
                        }
                        RadioButton {
                            id: radioColorThemeLight
                            text: i18n('Light')
                            checked: g_config.colorTheme == 'light'
                        }
                        RadioButton {
                            id: radioColorThemeSepia
                            text: i18n('Sepia')
                            checked: g_config.colorTheme == 'sepia'
                        }
                        RadioButton {
                            id: radioColorThemeDark
                            text: i18n('Dark')
                            checked: g_config.colorTheme == 'dark'
                        }
                    }
                }
            }
            GroupBox {
                Layout.fillWidth: true
                ColumnLayout {
                    Label {
                        text: i18n('Font')
                    }
                    RadioButton {
                        id: radioFontSansSerif
                        text: i18n('Sans-Serif')
                        checked: g_config.font == 'sans-serif'
                    }
                    RadioButton {
                        id: radioFontSerif
                        text: i18n('Serif')
                        checked: g_config.font == 'serif'
                    }
                }
            }
            RowLayout {
                Layout.fillWidth: true
                Label {
                    text: i18n('Font size')
                    Layout.alignment: Qt.AlignLeft
                    Layout.fillWidth: true
                }
                ComboBox {
                    id: comboBoxFontSize
                    Layout.alignment: Qt.AlignRight
                    currentIndex: g_config.fontSize - 1
                    model: ListModel {
                        id: model
                        ListElement { text: "10 px" }
                        ListElement { text: "12 px" }
                        ListElement { text: "14 px" }
                        ListElement { text: "16 px" }
                        ListElement { text: "18 px" }
                        ListElement { text: "20 px" }
                        ListElement { text: "22 px" }
                        ListElement { text: "24 px" }
                        ListElement { text: "26 px" }
                        ListElement { text: "28 px" }
                        ListElement { text: "30 px" }
                        ListElement { text: "32 px" }
                        ListElement { text: "34 px" }
                        ListElement { text: "36 px" }
                        ListElement { text: "38 px" }
                        ListElement { text: "40 px" }
                        ListElement { text: "42 px" }
                        ListElement { text: "44 px" }
                        ListElement { text: "46 px" }
                        ListElement { text: "48 px" }
                        ListElement { text: "50 px" }
                    }
                }
            }
            CheckBox {
                id: checkboxContextMenu
                checked: g_config.contextMenu
                text: i18n('Show in context menu')
                Layout.fillWidth: true;
            }
            Button {
                id: button
                text: i18n('Save')
                hoverEnabled: true
                Layout.fillWidth: true;
                onClicked: function() {
                    function selectedColorTheme() {
                        if (radioColorThemeLight.checked) {return "light"}
                        if (radioColorThemeSepia.checked) {return "sepia"}
                        if (radioColorThemeDark.checked)  {return "dark"}
                        return "dark"
                    }

                    g_config.icon        = radioIconLight.checked ? "light" : "dark"
                    g_config.contextMenu = checkboxContextMenu.checkState == Qt.Checked
                    g_config.colorTheme  = selectedColorTheme()
                    g_config.font        = radioFontSansSerif.checked ? "sans-serif" : "serif"
                    g_config.fontSize    = comboBoxFontSize.currentIndex + 1

                    if (saveSettings()) {
                        button.text = i18n('Saved!')
                    } else {
                        button.text = i18n('Error occurred, try again!')
                    }
                }
            }
        }
    }

}