Fix communication between JS, QML and everything

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>

readability/data/Call.js

@@ -132,4 +132,17 @@ function initConfig(colorTheme, font, fontSize){
     fontSizeSet(fontSize);
 }
 
-callReadability();
+function init() {
+    external.extra.readability.init.connect(function(theme, font, fontSize) {
+        if (!document.hidden) {
+            callReadability();
+            initConfig(theme, font, fontSize)
+        }
+    })
+}
+
+if (window._falkon_external) {
+    init();
+} else {
+    document.addEventListener("_falkon_external_created", init);
+}

readability/data/Toolbar.js

@@ -84,6 +84,10 @@ 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");
@@ -95,6 +99,10 @@ 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");
@@ -106,6 +114,10 @@ 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");
@@ -132,8 +144,8 @@ function fontSizePlus(){
     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].substr(-1, 1);
+            var size = container.classList[i].replace("font-size", "");
-            if(parseInt(size) < 9){
+            if(parseInt(size) < 21){
                 incrementedSize = parseInt(size) + 1;
                 external.extra.readability.setFontSize(incrementedSize);
             } else return;
@@ -149,7 +161,7 @@ function fontSizeMinus(){
     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].substr(-1, 1);
+            var size = container.classList[i].replace("font-size", "");
             if(parseInt(size) > 1){
                 decrementedSize = parseInt(size) - 1;
                 external.extra.readability.setFontSize(decrementedSize);
@@ -162,7 +174,7 @@ function fontSizeMinus(){
 }
 
 function fontSizeSet(fontSize){
-    if (fontSize < 1 || fontSize > 9)
+    if (fontSize < 1 || fontSize > 21)
         return
 
     var container = document.getElementById('container');

readability/data/style.orig.css

@@ -91,6 +91,54 @@ body.loaded {
     font-size: 26px;
 }
 
+.font-size10 {
+    font-size: 28px;
+}
+
+.font-size11 {
+    font-size: 30px;
+}
+
+.font-size12 {
+    font-size: 32px;
+}
+
+.font-size13 {
+    font-size: 34px;
+}
+
+.font-size14 {
+    font-size: 36px;
+}
+
+.font-size15 {
+    font-size: 38px;
+}
+
+.font-size16 {
+    font-size: 40px;
+}
+
+.font-size17 {
+    font-size: 42px;
+}
+
+.font-size18 {
+    font-size: 44px;
+}
+
+.font-size19 {
+    font-size: 46px;
+}
+
+.font-size20 {
+    font-size: 48px;
+}
+
+.font-size21 {
+    font-size: 50px;
+}
+
 
 /* Loading/error message */
 
@@ -263,6 +311,10 @@ body.loaded {
     list-style: decimal;
 }
 
+.content, .header {
+    margin-left: 45px;
+}
+
 /*======= Controls toolbar =======*/
 
 .toolbar {
@@ -274,7 +326,6 @@ body.loaded {
     margin: 0;
     padding: 0;
     list-style: none;
-    background-color: #fbfbfb;
     -moz-user-select: none;
     border-right: 1px solid #b5b5b5;
 }
@@ -283,8 +334,6 @@ body.loaded {
     display: block;
     background-size: 24px 24px;
     background-repeat: no-repeat;
-    color: #333;
-    background-color: #fbfbfb;
     height: 40px;
     padding: 0;
 }

readability/main.qml

@@ -21,48 +21,55 @@ Falkon.PluginInterface {
 
     QtObject {
         id: g_jsObject
-        signal configChanged()
-        signal setColorTheme(string colorTheme)
-        signal setFont(string colorTheme)
-        signal setFontSize(string colorTheme)
-    }
 
-    function setColorTheme(colorTheme) {
+        /* Signals, to communicate from QML to webpage JavaScript */
-        var themes = ["light", "sepia", "dark"]
+        signal init(string theme, string font, int fontSize)
-        if (!themes.includes(colorTheme)) {
+
-            return
+        /* 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.colorTheme != colorTheme) {
+            if (g_config.font != font) {
-            g_config.colorTheme = colorTheme
+                g_config.font = font
 
-            configChanged()
+                saveSettings()
+            }
+        }
+        function setFontSize(fontSize) {
+            if (fontSize < 1 && fontSize > 21) {
+                return
+            }
+
+            if (g_config.fontSize != fontSize) {
+                g_config.fontSize = fontSize
+
+                saveSettings()
+            }
         }
     }
 
-    function setFont(font) {
+    Falkon.UserScript {
-        var fonts = ["sans-serif", "serif"]
+        id: readabilityUserScript
-        if (!fonts.includes(font)) {
+        name: 'readability'
-            return
+        runsOnSubFrames: false
-        }
+        sourceCode: g_readability.script
-
+        injectionPoint: Falkon.UserScript.Deferred
-        if (g_config.font != font) {
+        worldId: Falkon.UserScript.ApplicationWorld
-            g_config.font = font
-
-            configChanged()
-        }
-    }
-
-    function setFontSize(fontSize) {
-        if (fontSize < 1 && fontSize > 9) {
-            return
-        }
-
-        if (g_config.fontSize != fontSize) {
-            g_config.fontSize = fontSize
-
-            configChanged()
-        }
     }
 
     init: function(state, settingsPath) {
@@ -74,6 +81,17 @@ Falkon.PluginInterface {
 
         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
@@ -102,23 +120,11 @@ Falkon.PluginInterface {
     }
 
     function makeReadability() {
-        if (g_readability.script.length == 0) {
+        g_jsObject.init(g_config.colorTheme, g_config.font, g_config.fontSize)
-            var scriptReadability = Falkon.FileUtils.readAllFileContents("data/Readability.js")
+        // var initConfigScript = "initConfig('" + g_config.colorTheme + "', '" + g_config.font + "', " + g_config.fontSize + ");"
-            var scriptToolbar = Falkon.FileUtils.readAllFileContents("data/Toolbar.js")
+        //
-            var style = Falkon.FileUtils.readAllFileContents("data/style.css").toString().replace(/[\n\r]/g, '')
+        // var currentTab = findCurrentTab()
-            var scriptCall = Falkon.FileUtils.readAllFileContents("data/Call.js").toString()
+        // currentTab.execJavaScript(initConfigScript)
-
-            scriptCall = scriptCall.replace("{readability.js}", scriptReadability)
-            scriptCall = scriptCall.replace("{toolbar.js}", scriptToolbar)
-            scriptCall = scriptCall.replace("{style.css}", style)
-
-            g_readability.script = scriptCall
-        }
-
-        var initConfigScript = "initConfig('" + g_config.colorTheme + "', '" + g_config.font + "', " + g_config.fontSize + ");"
-
-        var currentTab = findCurrentTab()
-        currentTab.execJavaScript(g_readability.script + initConfigScript)
     }
 
     function loadSettings() {
@@ -264,7 +270,7 @@ Falkon.PluginInterface {
                 ComboBox {
                     id: comboBoxFontSize
                     Layout.alignment: Qt.AlignRight
-                    currentIndex: g_config.fontSize
+                    currentIndex: g_config.fontSize - 1
                     model: ListModel {
                         id: model
                         ListElement { text: "10 px" }
@@ -276,6 +282,18 @@ Falkon.PluginInterface {
                         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" }
                     }
                 }
             }
@@ -302,7 +320,7 @@ Falkon.PluginInterface {
                     g_config.contextMenu = checkboxContextMenu.checkState == Qt.Checked
                     g_config.colorTheme  = selectedColorTheme()
                     g_config.font        = radioFontSansSerif.checked ? "sans-serif" : "serif"
-                    g_config.fontSize    = comboBoxFontSize.currentIndex
+                    g_config.fontSize    = comboBoxFontSize.currentIndex + 1
 
                     if (saveSettings()) {
                         button.text = i18n('Saved!')