Fix communication between JS, QML and everything

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
This commit is contained in:
Juraj Oravec 2022-10-21 18:00:22 +02:00
parent 5288816eed
commit 0aa622d6f0
Signed by: SGOrava
GPG Key ID: 13660A3F1D9F093B
4 changed files with 154 additions and 62 deletions

View File

@ -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);
}

View File

@ -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');

View File

@ -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;
}

View File

@ -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!')