Commit f9a7ccda authored by Sora Steenvoort's avatar Sora Steenvoort Committed by Nate Graham
Browse files

Implement configurable zoom in web browser widget

While dynamically zooming to simulate a wider display is a good idea,
hardcoding the minimum display width as 1000px is not - this is why I've
implemented configurable dynamic and static zoom levels.
parent 72db0a1b
/*
* Copyright 2020 Sora Steenvoort <sora@dillbox.me>
*
* 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 2 of
* the License or (at your option) version 3 or any later version
* accepted by the membership of KDE e.V. (or its successor approved
* by the membership of KDE e.V.), which shall act as a proxy
* defined in Section 14 of version 3 of the license.
*
* 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/>
*/
import QtQuick 2.0
import org.kde.plasma.configuration 2.0
ConfigModel {
ConfigCategory {
name: i18nc("@title", "General")
icon: "plasma"
source: "ConfigGeneral.qml"
}
}
......@@ -9,5 +9,14 @@
<entry name="url" type="String">
<default>https://www.kde.org/</default>
</entry>
<entry name="useMinViewWidth" type="Bool">
<default>true</default>
</entry>
<entry name="minViewWidth" type="Int">
<default>600</default>
</entry>
<entry name="constantZoomFactor" type="Int">
<default>100</default>
</entry>
</group>
</kcfg>
import QtQuick 2.5
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.12 as QQC2
import org.kde.kirigami 2.8 as Kirigami
import org.kde.plasma.core 2.0 as PlasmaCore
Kirigami.FormLayout {
anchors.right: parent.right
anchors.left: parent.left
property alias cfg_useMinViewWidth: useMinViewWidth.checked
property alias cfg_minViewWidth: minViewWidth.value
property alias cfg_constantZoomFactor: constantZoomFactor.value
QQC2.ButtonGroup { id: zoomGroup }
RowLayout {
Kirigami.FormData.label: i18nc("@title:group", "Content scaling:")
QQC2.RadioButton {
id: useConstantZoom
text: i18nc("@option:radio", "Fixed scale:")
QQC2.ButtonGroup.group: zoomGroup
onClicked: {
constantZoomFactor.forceActiveFocus();
}
}
QQC2.SpinBox {
id: constantZoomFactor
editable: true
enabled: useConstantZoom.checked
validator: RegExpValidator {
regExp: new RegExp("[0-9]?[0-9]{2}[ ]?%");
}
textFromValue: function(value) {
return value+"%";
}
valueFromText: function(text) {
return text.split(" ")[0].split("%")[0];
}
from: 25
to: 500
}
}
RowLayout {
QQC2.RadioButton {
id: useMinViewWidth
text: i18nc("@option:radio", "Automatic scaling if width is below")
QQC2.ButtonGroup.group: zoomGroup
onClicked: {
minViewWidth.forceActiveFocus();
}
}
QQC2.SpinBox {
id: minViewWidth
editable: true
enabled: useMinViewWidth.checked
validator: RegExpValidator {
regExp: new RegExp("[0-9]?[0-9]{3}[ ]?px");
}
textFromValue: function(value) {
return value+"px";
}
valueFromText: function(text) {
return text.split(" ")[0].split("px")[0];
}
from: 320
to: 3840
}
}
}
/***************************************************************************
* Copyright 2014, 2016 by Mikhail Ivchenko <ematirov@gmail.com> *
* Copyright 2018 by Kai Uwe Broulik <kde@privat.broulik.de> *
* Copyright 2020 by Sora Steenvoort <sora@dillbox.me> *
* *
* 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 *
......@@ -99,9 +100,26 @@ ColumnLayout {
Timer {
id: updateZoomTimer
interval: 100
readonly property int minViewWidth: plasmoid.configuration.minViewWidth
readonly property bool useMinViewWidth: plasmoid.configuration.useMinViewWidth
readonly property int constantZoomFactor: plasmoid.configuration.constantZoomFactor
onTriggered: {
// Try to fit contents for a smaller screen
webview.zoomFactor = Math.min(1, webview.width / 1000);
var newZoom = 1;
if (useMinViewWidth) {
// Try to fit contents for a smaller screen
newZoom = Math.min(1, webview.width / minViewWidth);
// make sure value is valid
newZoom = Math.max(0.25, newZoom);
} else {
newZoom = constantZoomFactor / 100.0;
}
webview.zoomFactor = newZoom;
// setting the zoom factor does not always work on the first try; also, numbers get rounded
if (Math.round(1000 * webview.zoomFactor) != Math.round(1000 * newZoom)) {
updateZoomTimer.restart();
}
}
}
......@@ -133,6 +151,20 @@ ColumnLayout {
onUrlChanged: plasmoid.configuration.url = url;
Component.onCompleted: url = plasmoid.configuration.url;
readonly property bool useMinViewWidth : plasmoid.configuration.useMinViewWidth
Connections {
target: plasmoid.configuration
onMinViewWidthChanged: updateZoomTimer.start()
onUseMinViewWidthChanged: updateZoomTimer.start()
onConstantZoomFactorChanged: updateZoomTimer.start()
onUseConstantZoomChanged: updateZoomTimer.start()
}
onLinkHovered: {
if (hoveredUrl.toString() !== "") {
mouseArea.cursorShape = Qt.PointingHandCursor;
......@@ -141,11 +173,16 @@ ColumnLayout {
}
}
onWidthChanged: updateZoomTimer.start()
onWidthChanged: {
if (useMinViewWidth) {
updateZoomTimer.start()
}
}
onLoadingChanged: {
if (loadRequest.status === WebEngineLoadRequest.LoadStartedStatus) {
infoButton.dismiss();
} else if (loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus) {
} else if (loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus && useMinViewWidth) {
updateZoomTimer.start();
}
}
......
......@@ -86,7 +86,7 @@ X-KDE-PluginInfo-Author=Mikhail Ivchenko
X-KDE-PluginInfo-Email=ematirov@gmail.com
X-KDE-PluginInfo-License=GPL-2.0+
X-KDE-PluginInfo-Name=org.kde.plasma.webbrowser
X-KDE-PluginInfo-Version=0.1.0
X-KDE-PluginInfo-Version=0.2.0
X-KDE-PluginInfo-Website=https://kde.org/plasma-desktop
X-KDE-ServiceTypes=Plasma/Applet
X-Plasma-API=declarativeappletscript
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment