going back to HTML

Content.qml

@@ -1,153 +1,65 @@
+import QtWebKit 3.0
+import QtWebKit.experimental 1.0
 import QtQuick 2.0
 import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
 import QtQuick.Controls.Styles 1.3
+import QtQuick.Controls 1.3
 import TTRSS 1.0
 
 ScrollView {
+    id: content
     property Post post
     property int headLinefontSize: 23
     property int textfontSize: 14
     property int scrollJump: 48
     property int pageJump: parent.height
+    Layout.minimumWidth: 400
 
     style: ScrollViewStyle {
         transientScrollBars: true
     }
 
-    function scrollDown(jump) {
+    Label { id: fontLabel }
-        smoothScrolling.enabled = true
 
-        var top = Math.max(contentItem.height - parent.height, 0);
+    WebView {
+        id: webView
+        url: "content.html"
+        // experimental.transparentBackground: true
 
-        if(jump && flickableItem.contentY < top - jump) {
+        property Post post: content.post
-            flickableItem.contentY += jump
-        } else {
-            flickableItem.contentY = top
-        }
-    }
 
-    function scrollUp(jump) {
+        function setPost() {
-        smoothScrolling.enabled = true
+            if(post) {
-        if(jump && flickableItem.contentY >= jump) {
+                experimental.evaluateJavaScript("setArticle(" + post.jsonString + ")")
-            flickableItem.contentY -= jump;
-        } else {
-            flickableItem.contentY = 0;
-        }
-    }
-
-    Behavior on flickableItem.contentY {
-        id: smoothScrolling
-        enabled: false
-        NumberAnimation {
-            easing.type: Easing.OutCubic
-        }
-    }
-
-    Item {
-        height: column.height + 50
-        width: parent.parent.width
-
-        MouseArea {
-            onWheel: {
-                // If we use the mouse wheel we don't want any
-                // animation bahaviour because it slows it down
-                wheel.accepted = false
-                smoothScrolling.enabled = false
-            }
-            anchors.fill: parent
-        }
-
-        Rectangle {
-            anchors.fill: parent
-            width: parent.width
-            height: column.height
-            anchors.margins: 30
-            color: "transparent"
-
-            Column {
-                id: column
-                spacing: 10
-                width: parent.width
-
-                Label {
-                    text: {
-                        if(post) {
-                            var str = post.feedTitle
-                            if(post.author) {
-                                str += " - " + post.author;
-                            }
-                            return str;
-                        } else {
-                            return ""
-                        }
-                    }
-                    color: "gray"
-                    font.pointSize: textfontSize
-                    textFormat: Text.PlainText
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    width: parent.width
-                    renderType: Text.NativeRendering
-                }
-
-                Label {
-                    text: post ? post.title : ""
-                    font.pointSize: headLinefontSize
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    width: parent.width
-                    renderType: Text.NativeRendering
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: Qt.openUrlExternally(post.link)
-                    }
-                }
-
-                Label {
-                    text: post ? post.date.toLocaleString(Qt.locale(), Locale.LongFormat) : ""
-                    color: "gray"
-                    font.pointSize: textfontSize
-                    textFormat: Text.PlainText
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    width: parent.width
-                    renderType: Text.NativeRendering
-                }
-
-                Rectangle {
-                    width: parent.width
-                    height: 14
-                    color: "transparent"
-
-                    Rectangle {
-                        width: parent.width
-                        height: 1
-                        anchors.top: parent.top
-                        anchors.topMargin: 15
-                        color: "lightgray"
-                        visible: {
-                            if(post) {
-                                return true;
-                            }
-                            return false;
-                        }
-                    }
-                }
-
-                Rectangle {
-                    height: contentLabel.height + 20
-                    width: parent.width
-                    color: "transparent"
-
-                    RescalingRichText {
-                        id: contentLabel
-                        text: post ? post.content : ""
-                        fontSize: textfontSize * 1.3
-                        width: parent.width
-                        anchors.top: parent.top
-                        anchors.topMargin: 0
-                        lineHeight: 1.3
-                    }
-                }
             }
         }
+
+        function setDefaults() {
+            // font name needs to be enclosed in single quotes
+            experimental.evaluateJavaScript("document.body.style.fontFamily = \"'" + fontLabel.font.family + "'\";");
+            experimental.evaluateJavaScript("document.body.style.fontSize = '" + fontLabel.font.pointSize + "pt';");
+        }
+
+        // Enable communication between QML and WebKit
+        experimental.preferences.navigatorQtObjectEnabled: true;
+
+        onNavigationRequested: {
+            if (request.navigationType != WebView.LinkClickedNavigation) {
+                request.action = WebView.AcceptRequest;
+            } else {
+                request.action = WebView.IgnoreRequest;
+                Qt.openUrlExternally(request.url);
+            }
+        }
+
+        onLoadingChanged: {
+            if(loadRequest.status === WebView.LoadSucceededStatus) {
+                setDefaults()
+            }
+        }
+
+        onPostChanged: setPost()
     }
 }
+

FeedMonkey.pro

@@ -8,7 +8,8 @@ SOURCES += main.cpp \
     post.cpp
 
 RESOURCES += qml.qrc \
-    images.qrc
+    images.qrc \
+    html.qrc
 
 RC_FILE = Icon.icns
 

RescalingRichText.qml

@@ -1,96 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Controls 1.3
-
-// from: https://github.com/pycage/tidings/blob/master/qml/pages/RescalingRichText.qml
-
-/* Pretty fancy element for displaying rich text fitting the width.
- *
- * Images are scaled down to fit the width, or, technically speaking, the
- * rich text content is actually scaled down so the images fit, while the
- * font size is scaled up to keep the original font size.
- */
-Item {
-    id: root
-
-    property string text
-    property color color
-    property real fontSize
-    property bool showSource: false
-    property real lineHeight: 1
-
-    property real scaling: 1
-
-    property string _style: "<style>" +
-                            "a:link { color: gray }" +
-                            "</style>"
-
-    signal linkActivated(string link)
-
-    height: contentLabel.sourceComponent !== null ? contentLabel.height * scaling
-                                                  : 0
-    clip: true
-
-    onWidthChanged: {
-        rescaleTimer.restart();
-    }
-
-    onTextChanged: {
-        rescaleTimer.restart();
-    }
-
-    Label {
-        id: layoutLabel
-
-        visible: false
-        width: parent.width
-        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-        textFormat: Text.RichText
-
-        // tiny font so that only images are relevant
-        text: "<style>* { font-size: 1px }</style>" + parent.text
-
-        onContentWidthChanged: {
-            // console.log("contentWidth: " + contentWidth);
-            rescaleTimer.restart();
-        }
-    }
-
-    Loader {
-        id: contentLabel
-        sourceComponent: rescaleTimer.running ? null : labelComponent
-    }
-
-    Component {
-        id: labelComponent
-
-        Label {
-            width: root.width / scaling
-            scale: scaling
-
-            transformOrigin: Item.TopLeft
-            color: root.color
-            font.pixelSize: root.fontSize / scaling
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-            textFormat: root.showSource ? Text.PlainText : Text.RichText
-            smooth: true
-            lineHeight: root.lineHeight * scaling
-
-            text: _style + root.text
-
-            onLinkActivated: {
-                root.linkActivated(link);
-            }
-        }
-    }
-
-    Timer {
-        id: rescaleTimer
-        interval: 100
-
-        onTriggered: {
-            var contentWidth = Math.floor(layoutLabel.contentWidth);
-            scaling = Math.min(1, parent.width / (layoutLabel.contentWidth + 0.0));
-            // console.log("scaling: " + scaling);
-        }
-    }
-}

content.css

@@ -1,14 +1,15 @@
 body {
-        font-family: sans-serif;
+    background: #eee;
-        padding: 1em 1.5em;
+    font-family: sans-serif;
-        font-weight: lighter;
+    padding: 1em 1.5em;
-        background: #eee;
+    font-weight: lighter;
+    font-size: 1em;
 }
 
 h1 {
-        font-weight: lighter;
+    font-weight: lighter;
-        margin: 0;
+    margin: 0;
-        padding: 0;
+    padding: 0;
 }
 
 #date:not(:empty) {
@@ -19,25 +20,25 @@ h1 {
 }
 
 .starred:after {
-        content: "*";
+    content: "*";
 }
 
 header p {
-        color: #aaa;
+    color: #aaa;
-        margin: 0;
+    margin: 0;
-        padding: 0
+    padding: 0
 }
 
 a {
-        color: #333;
+    color: #333;
-        text-decoration: none;
+    text-decoration: none;
 }
 
 img {
-        max-width: 100%;
+    max-width: 100%;
-        height: auto;
+    height: auto;
 }
 
 article {
-        line-height: 1.6;
+    line-height: 1.6;
 }

content.html

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-        <meta charset="utf-8">
+    <meta charset="utf-8">
-        <title>TTRSS</title>
+    <title>TTRSS</title>
-        <link href="content.css" media="all" rel="stylesheet" />
+    <link href="content.css" media="all" rel="stylesheet">
-        <script type="text/javascript" src="content.js"></script>
+    <script type="text/javascript" src="content.js"></script>
-        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 </head>
 <body class=''>
-        <header>
+    <header>
-                <p><span id="feed_title"></span> <span id="author"></span></p>
+        <p><span id="feed_title"></span> <span id="author"></span></p>
-                <h1><a id="title" href=""></a></h1>
+        <h1><a id="title" href=""></a></h1>
-                <p><timedate id="date"></timedate></p>
+        <p><timedate id="date"></timedate></p>
-        </header>
+    </header>
-        <article id="article"></article>
+    <article id="article"></article>
 </body>
 </html>

content.js

@@ -42,3 +42,8 @@ function setArticle(article) {
         }
     }
 }
+
+function setFont(font, size) {
+    document.body.style.fontFamily = font;
+    //document.body.style.fontSize = size + "pt";
+}

main.qml

@@ -50,6 +50,7 @@ ApplicationWindow {
 
         Keys.onRightPressed: sidebar.next()
         Keys.onLeftPressed: sidebar.previous()
+        /*
         Keys.onDownPressed: content.scrollDown(content.scrollJump)
         Keys.onUpPressed: content.scrollUp(content.scrollJump)
         Keys.onSpacePressed: content.scrollDown(content.pageJump)
@@ -65,7 +66,7 @@ ApplicationWindow {
             } else if (event.key === Qt.Key_PageDown) {
                 content.scrollDown(content.pageJump)
             }
-        }
+        }*/
     }
 
     Login {

qml.qrc

@@ -6,6 +6,5 @@
         <file>Login.qml</file>
         <file>PostListItem.qml</file>
         <file>Sidebar.qml</file>
-        <file>RescalingRichText.qml</file>
     </qresource>
 </RCC>