psa: using 2 flickables
[feedingit] / psa_harmattan / feedingit / deb_dist / feedingit-0.1.0 / qml / Articles.qml
index f3bffe3..91248f0 100644 (file)
 import Qt 4.7
+import com.nokia.meego 1.0
+import QtWebKit 1.0
 
 Item {
-    //anchors.fill: parent;
-    width: parent.width;
-    property string feedid : ""
-    property alias count: articles.count
-    property alias url: articles.source
+    id: articlePage
+    property int buffer: 60
+    property string feedid: parent.feedid
+    property bool zoomEnabled: false
+    property bool vertPanningEnabled: true
+    width: parent.width; height: parent.height;
+    property int webviewFontSize: settings.webviewFontSize
 
-    x: parent.width; height: parent.height;
-    anchors.top: parent.top; anchors.bottom: parent.bottom
-
-    function getArticleid(index) {
-        return articles.get(index).articleid
+    function next() {
+        if (flickableFront.state == "visible") {
+            flickableBack.moveFromRight();
+        } else {
+            flickableFront.moveFromRight();
+        }
     }
 
-    function reload() {
-        //articlesModel.reload()
+    function prev() {
+        if (flickableFront.state == "visible") {
+            flickableBack.moveFromLeft();
+        } else {
+            flickableFront.moveFromLeft();
+        }
     }
 
-    ListView {
-        id: articleList; model: articlesModel; delegate: articleDelegate; z: 6
-        width: parent.width; height: parent.height; /*x: 0;*/
-        cacheBuffer: 100;
-        flickDeceleration: 1500
+    Component.onCompleted: {
+        webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
     }
 
-    XmlListModel {
-        id: articles
+    Flickable {
+        id: flickableFront
+        //anchors.fill: screen;
+        height: articlePage.height;
+        width: articlePage.width;
+        contentWidth: boundsRecFront.width
+        contentHeight: boundsRecFront.height
+        boundsBehavior: Flickable.StopAtBounds
+        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
+        //interactive: parent.vertPanningEnabled;
+
+        flickDeceleration: 2500;
+        //flickableDirection: Flickable.VerticalFlick
+
+        property bool contentIsReady: false
+        Rectangle {
+            id: boundsRecFront
+            color: "white"
+            width: webViewFront.html == "" ? articlePage.width : webViewFront.width*webViewFront.scale + 2*buffer
+            height: Math.max(articlePage.height,webViewFront.height*webViewFront.scale)
+
+            WebView {
+                id: webViewFront
+                anchors.horizontalCenter: parent.horizontalCenter
+                //url: flipItem.url;
+                preferredWidth: articlePage.width
+                //preferredHeight: articleView.height
+                //scale: 1.25;
+                transformOrigin: Item.TopLeft
+                //scale: slider.value;
+                settings.defaultFontSize: articlePage.webviewFontSize
+
+                onLoadFinished: {
+                    flickableFront.contentX = buffer
+                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
+                     //flickable.width/2
+                    flickableFront.contentIsReady = true
+                }
+
+
+            }
+
+        }
+
+        state: "visible"
+
+        states: [ State {
+                name: "visible";
+                PropertyChanges { target: flickableFront; x: 0; }
+            }, State {
+                name: "toRight";
+                PropertyChanges { target: flickableFront; x: boundsRecBack.width; }
+            }, State {
+                name: "toLeft";
+                PropertyChanges { target: flickableFront; x: -boundsRecFront.width; }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "visible";
+                PropertyAnimation { target: flickableFront
+                  easing.type: Easing.InOutSine
+                  properties: "x"; duration: 1000 }
+            },
+            Transition {
+                to: "visible";
+                PropertyAnimation { target: flickableFront
+                easing.type: Easing.InOutSine
+                properties: "x"; duration: 1000 }
+            }
+        ]
+
+        function moveFromLeft() {
+            flickableFront.contentIsReady = false
+            articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
+            webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
+            state = "toLeft"
+            state = "visible"
+            flickableBack.state = "toRight"
+        }
+
+        function moveFromRight() {
+            flickableFront.contentIsReady = false
+            articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
+            webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
+            state = "toRight"
+            state = "visible"
+            flickableBack.state = "toLeft"
+        }
+
+        Behavior on contentX {
+            id: contentXBehavior
+            enabled: flickableFront.contentIsReady
+            NumberAnimation { duration: 200 }
+        }
+        onMovingHorizontallyChanged: {
+            if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
+                flickableFront.contentX = buffer //flickable.width/2
+            }
+        }
+
+        onAtXBeginningChanged: {
+            if (atXBeginning && contentIsReady) {
+                flickableBack.moveFromLeft()
+            }
+        }
 
-        source: feedid == "" ? "" : "http://localhost:8000/articles/" + feedid + "?onlyUnread=" + hideReadArticles
-        query: "/xml/article"
+        onAtXEndChanged: {
+            if (atXEnd && contentIsReady) {
+                //console.log("next")
+                flickableBack.moveFromRight()
+            }
+        }
 
-        XmlRole { name: "title"; query: "title/string()" }
-        XmlRole { name: "articleid"; query: "articleid/string()"; isKey: true }
-        XmlRole { name: "path"; query: "path/string()" }
-        XmlRole { name: "unread"; query: "unread/string()"; isKey: true}
     }
 
-    Component {
-        id: articleDelegate
-
-        Item {
-            id: wrapper; width: wrapper.ListView.view.width; height: 86
-            Item {
-                id: moveMe
-                Rectangle { id: backRect; color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 }
-                Text {
-                    anchors.fill: backRect
-                    anchors.margins: 5
-                    verticalAlignment: Text.AlignVCenter; text: title; color: (model.article.unread=="True") ? "white" : "#7b97fd";
-                    width: wrapper.width; wrapMode: Text.WordWrap; font.bold: false;
+
+    Flickable {
+        id: flickableBack
+        //anchors.fill: screen;
+        height: articlePage.height;
+        width: articlePage.width;
+        contentWidth: boundsRecBack.width
+        contentHeight: boundsRecBack.height
+        boundsBehavior: Flickable.StopAtBounds
+
+        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
+        //interactive: parent.vertPanningEnabled;
+
+        flickDeceleration: 2500;
+        //flickableDirection: Flickable.VerticalFlick
+
+        property bool contentIsReady: false
+        Rectangle {
+            id: boundsRecBack
+            color: "white"
+            width: webViewBack.html == "" ? articlePage.width : webViewBack.width*webViewBack.scale + 2*buffer // flickable.width
+            height: Math.max(articlePage.height,webViewBack.height*webViewBack.scale)
+
+            WebView {
+                id: webViewBack
+                anchors.horizontalCenter: parent.horizontalCenter
+                //url: flipItem.url;
+                //html: controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
+                preferredWidth: articlePage.width
+                //preferredHeight: articleView.height
+                //scale: 1.25;
+                transformOrigin: Item.TopLeft
+                //scale: slider.value;
+                settings.defaultFontSize: articlePage.webviewFontSize
+
+                onLoadFinished: {
+                    flickableBack.contentX = buffer
+                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
+                    flickableBack.contentIsReady = true
                 }
-//                Rectangle {
-//                    x: 3; y: 4; width: 77; height: 77; color: "#ff0000"; smooth: true
+            }
+        }
 
-//                }
+        state: "toRight"
 
-//                Column {
-//                    x: 3;
+        states: [ State {
+                name: "visible";
+                PropertyChanges { target: flickableBack; x: 0; }
+            }, State {
+                name: "toRight";
+                PropertyChanges { target: flickableBack; x: boundsRecFront.width; }
+            }, State {
+                name: "toLeft";
+                PropertyChanges { target: flickableBack; x: -boundsRecBack.width; }
+            }
+        ]
 
-//                    width: wrapper.width - 3; y: 5; spacing: 2
-//                    height: parent.height;
-//                    Text { Rectangle {anchors.fill: parent; color: "white"; opacity: 0.5;}
-//                         verticalAlignment: Text.AlignVCenter; text: model.article.title; color: (model.article.unread=="True") ? "white" : "#7b97fd"; width: parent.width; wrapMode: Text.WordWrap; font.bold: false; /*elide: Text.ElideRight;*/ /*style: Text.Raised;*/ styleColor: "black"; }
-//                    //Text { text: feedname; width: parent.width; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
-//                }
+        transitions: [
+            Transition {
+                from: "visible";
+                PropertyAnimation { target: flickableBack
+                  easing.type: Easing.InOutSine
+                  properties: "x"; duration: 1000 }
+            },
+            Transition {
+                to: "visible";
+                PropertyAnimation { target: flickableBack
+                easing.type: Easing.InOutSine
+                properties: "x"; duration: 1000 }
             }
-            MouseArea { 
-                anchors.fill: wrapper;
-                onClicked: { 
-                    container.articleClicked(model.article.articleid, index) 
-                } 
+        ]
+
+        function moveFromLeft() {
+            flickableBack.contentIsReady = false
+            articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
+            webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
+            state = "toLeft"
+            state = "visible"
+            flickableFront.state = "toRight"
+        }
+
+        function moveFromRight() {
+            flickableBack.contentIsReady = false
+            articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
+            webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
+            state = "toRight"
+            state = "visible"
+            flickableFront.state = "toLeft"
+        }
+
+        Behavior on contentX {
+            id: contentXBehaviorBack
+            enabled: flickableBack.contentIsReady
+            NumberAnimation { duration: 200 }
+        }
+
+        onMovingHorizontallyChanged: {
+            if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
+                flickableBack.contentX = buffer //flickable.width/2
+            }
+        }
+
+        onAtXBeginningChanged: {
+            if (atXBeginning && contentIsReady) {
+                flickableFront.moveFromLeft()
+            }
+        }
+
+        onAtXEndChanged: {
+            if (atXEnd && contentIsReady) {
+                flickableFront.moveFromRight()
             }
         }
+    }
 
+    ProgressBar {
+        id: updateBarArticles
+        minimumValue: 0
+        maximumValue: 100
+        value: window.updateProgressValue
+        visible: window.isUpdateInProgress
+        width: parent.width
+        anchors.bottom: parent.bottom
     }
 
+    ListModel {
+        id: articlesModel
+
+
+
+    }
 }