From 0aa622d6f03cc019a5cd4b1cad57d0e1e884d9bb Mon Sep 17 00:00:00 2001 From: Juraj Oravec Date: Fri, 21 Oct 2022 18:00:22 +0200 Subject: [PATCH] Fix communication between JS, QML and everything Signed-off-by: Juraj Oravec --- readability/data/Call.js | 15 +++- readability/data/Toolbar.js | 20 ++++- readability/data/style.orig.css | 55 +++++++++++++- readability/main.qml | 126 ++++++++++++++++++-------------- 4 files changed, 154 insertions(+), 62 deletions(-) diff --git a/readability/data/Call.js b/readability/data/Call.js index 9c60772..6a0b08c 100644 --- a/readability/data/Call.js +++ b/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); +} diff --git a/readability/data/Toolbar.js b/readability/data/Toolbar.js index 5b766ee..efe4c0e 100644 --- a/readability/data/Toolbar.js +++ b/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); - if(parseInt(size) < 9){ + var size = container.classList[i].replace("font-size", ""); + 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'); diff --git a/readability/data/style.orig.css b/readability/data/style.orig.css index caa69f1..7630915 100644 --- a/readability/data/style.orig.css +++ b/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; } diff --git a/readability/main.qml b/readability/main.qml index 2d6cdec..dfbcbb3 100644 --- a/readability/main.qml +++ b/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) { - var themes = ["light", "sepia", "dark"] - if (!themes.includes(colorTheme)) { - return + /* 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.colorTheme != colorTheme) { - g_config.colorTheme = colorTheme + if (g_config.font != font) { + 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) { - var fonts = ["sans-serif", "serif"] - if (!fonts.includes(font)) { - return - } - - if (g_config.font != font) { - g_config.font = font - - configChanged() - } - } - - function setFontSize(fontSize) { - if (fontSize < 1 && fontSize > 9) { - return - } - - if (g_config.fontSize != fontSize) { - g_config.fontSize = fontSize - - configChanged() - } + Falkon.UserScript { + id: readabilityUserScript + name: 'readability' + runsOnSubFrames: false + sourceCode: g_readability.script + injectionPoint: Falkon.UserScript.Deferred + worldId: Falkon.UserScript.ApplicationWorld } 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) { - 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 - } - - var initConfigScript = "initConfig('" + g_config.colorTheme + "', '" + g_config.font + "', " + g_config.fontSize + ");" - - var currentTab = findCurrentTab() - currentTab.execJavaScript(g_readability.script + initConfigScript) + g_jsObject.init(g_config.colorTheme, g_config.font, g_config.fontSize) + // var initConfigScript = "initConfig('" + g_config.colorTheme + "', '" + g_config.font + "', " + g_config.fontSize + ");" + // + // var currentTab = findCurrentTab() + // currentTab.execJavaScript(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!')