psa: using 2 flickables
[feedingit] / psa_harmattan / feedingit / qml / Articles.qml
index 671b536..5019df4 100644 (file)
@@ -5,61 +5,30 @@ import QtWebKit 1.0
 Item {
     id: articlePage
     property int buffer: 60
-    property string mainArticleId: parent.mainArticleId;
     property string feedid: parent.feedid
     property bool zoomEnabled: false
     property bool vertPanningEnabled: true
     width: parent.width; height: parent.height;
     property int webviewFontSize: settings.webviewFontSize
 
-
-
-    Flipable {
-        id: flipable
-        front: flickableBack
-        back: flickableFront
-
-        width: parent.width
-        height: parent.height
-
-        property bool flipped: false
-        property int targetAngle: 0
-
-        state: "back"
-
-        transform: Rotation {
-            id: rotation
-            origin.x: flipable.width/2
-            origin.y: flipable.height/2
-            axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
-            angle: 0    // the default angle
-        }
-
-        states: [State {
-            name: "back"
-            PropertyChanges { target: rotation; angle: 180 }
-            when: flipable.flipped
-        }, State {
-                name: "front"
-                PropertyChanges { target: rotation; angle: 0 }
-                when: !flipable.flipped
-        }]
-
-        transitions: Transition {
-            NumberAnimation { target: rotation; property: "angle"; easing.type: Easing.InOutQuad; duration: 500 }
+    function next() {
+        if (flickableFront.state == "visible") {
+            flickableBack.moveFromRight();
+        } else {
+            flickableFront.moveFromRight();
         }
+    }
 
-        function flipRight() {
-            targetAngle = rotation.angle + 180
-            flipable.flipped = !flipable.flipped
-            //flipped = !flipped
+    function prev() {
+        if (flickableFront.state == "visible") {
+            flickableBack.moveFromLeft();
+        } else {
+            flickableFront.moveFromLeft();
         }
+    }
 
-        function flipLeft() {
-            targetAngle = rotation.angle - 180
-            flipable.flipped = !flipable.flipped
-            //flipped = !flipped
-        }
+    Component.onCompleted: {
+        webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
     }
 
     Flickable {
@@ -69,24 +38,24 @@ Item {
         width: articlePage.width;
         contentWidth: boundsRecFront.width
         contentHeight: boundsRecFront.height
+        boundsBehavior: Flickable.StopAtBounds
         //contentWidth: childrenRect.width; contentHeight: childrenRect.height
         //interactive: parent.vertPanningEnabled;
 
-        flickDeceleration: 1500;
+        flickDeceleration: 5000;
         //flickableDirection: Flickable.VerticalFlick
 
         property bool contentIsReady: false
         Rectangle {
             id: boundsRecFront
             color: "white"
-            width: webViewFront.width*webViewFront.scale + 2*buffer
+            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;
-                html: controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
                 preferredWidth: articlePage.width
                 //preferredHeight: articleView.height
                 //scale: 1.25;
@@ -95,19 +64,64 @@ Item {
                 settings.defaultFontSize: articlePage.webviewFontSize
 
                 onLoadFinished: {
-                    flickableFront.contentX = buffer //flickable.width/2
+                    flickableFront.contentX = buffer
+                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
+                     //flickable.width/2
                     flickableFront.contentIsReady = true
-                    flipable.flipRight();
                 }
 
 
             }
 
-    //        onFlickStarted: {
-    //            console.log("start contentx"+contentX)
-    //            console.log("start contenty"+contentY)
-    //        }
         }
+
+        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
@@ -121,37 +135,17 @@ Item {
 
         onAtXBeginningChanged: {
             if (atXBeginning && contentIsReady) {
-                flickableBack.contentIsReady = false
-                //console.log("previous")
-                articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
-//                if (flipable.side == Flipable.Back) {
-//                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                } else {
-                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                }
-                //flickableBack.contentY = 0
-                flickableFront.contentX = buffer
-                //flipable.flipped = !flipable.flipped
-                //flipable.flipLeft()
+                flickableBack.moveFromLeft()
             }
         }
 
         onAtXEndChanged: {
             if (atXEnd && contentIsReady) {
                 //console.log("next")
-                flickableBack.contentIsReady = false
-                articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
-//                if (flipable.side == Flipable.Back) {
-//                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                } else {
-                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                }
-                //flickableBack.contentY = 0
-                flickableFront.contentX = buffer
-                //flipable.flipped = !flipable.flipped
-                //flipable.flipRight();
+                flickableBack.moveFromRight()
             }
         }
+
     }
 
 
@@ -162,23 +156,26 @@ Item {
         width: articlePage.width;
         contentWidth: boundsRecBack.width
         contentHeight: boundsRecBack.height
+        boundsBehavior: Flickable.StopAtBounds
+
         //contentWidth: childrenRect.width; contentHeight: childrenRect.height
         //interactive: parent.vertPanningEnabled;
 
-        flickDeceleration: 1500;
+        flickDeceleration: 5000;
         //flickableDirection: Flickable.VerticalFlick
 
         property bool contentIsReady: false
         Rectangle {
             id: boundsRecBack
             color: "white"
-            width: webViewBack.width*webViewBack.scale + 2*buffer // flickable.width
+            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;
@@ -187,24 +184,66 @@ Item {
                 settings.defaultFontSize: articlePage.webviewFontSize
 
                 onLoadFinished: {
-                    flickableBack.contentX = buffer //flickable.width/2
+                    flickableBack.contentX = buffer
+                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
                     flickableBack.contentIsReady = true
-                    flipable.flipRight();
                 }
+            }
+        }
 
-
+        state: "toRight"
+
+        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; }
             }
+        ]
+
+        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 }
+            }
+        ]
+
+        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"
+        }
 
-    //        onFlickStarted: {
-    //            console.log("start contentx"+contentX)
-    //            console.log("start contenty"+contentY)
-    //        }
+        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
@@ -213,71 +252,17 @@ Item {
 
         onAtXBeginningChanged: {
             if (atXBeginning && contentIsReady) {
-                flickableFront.contentIsReady = false
-                //console.log("previous")
-                articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
-//                if (flipable.side == Flipable.Back) {
-                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                } else {
-//                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                }
-                //flickableFront.contentY = 0
-                //flickableBack.contentX = buffer
-                //flipable.flipped = !flipable.flipped
-                //flipable.flipLeft()
+                flickableFront.moveFromLeft()
             }
         }
 
         onAtXEndChanged: {
             if (atXEnd && contentIsReady) {
-                flickableFront.contentIsReady = false
-                //console.log("next")
-                articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
-//                if (flipable.side == Flipable.Back) {
-                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                } else {
-//                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
-//                }
-                //flickableFront.contentY = 0
-                //flickableBack.contentX = buffer
-                //flipable.flipped = !flipable.flipped
-                //flipable.flipRight();
+                flickableFront.moveFromRight()
             }
         }
     }
 
-
-
-//    ListView {
-//        id: articleView;
-//        model: articlesModel;
-//        delegate: viewer;
-//        property int webviewFontSize: settings.webviewFontSize
-//        orientation: ListView.Horizontal
-//        width: parent.width;
-//        height: updateBarArticles.visible? parent.height-updateBarArticles.height : parent.height;
-//        //onCurrentIndexChanged: articleView.positionViewAtIndex(currentIndex, ListView.Contain)
-//        highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem
-//        cacheBuffer: width;
-//        onMovementStarted: articlePage.vertPanningEnabled=false;
-//        onMovementEnded: articlePage.vertPanningEnabled=true;
-//        highlightMoveDuration: 300;
-//        clip: true
-//        boundsBehavior: Flickable.DragOverBounds
-
-//        onCurrentIndexChanged: {
-//            if (currentIndex >= count-1) {
-//                articlesModel.append({articleid: controller.getNextId(feedid, articlesModel.get(currentIndex).articleid)})
-//            }
-//        }
-
-//        onCountChanged: {
-//            if (count == 3) {
-//                articleView.currentIndex = 1
-//            }
-//        }
-//    }
-
     ProgressBar {
         id: updateBarArticles
         minimumValue: 0
@@ -294,54 +279,4 @@ Item {
 
 
     }
-
-    Component {
-        id: viewer
-        Item {
-            id: flipItem;
-            width: articleDisplay.width;
-            height: articleView.height;
-
-            //property string url: (articleView.visible && Math.abs(articleView.currentIndex-index)<2) ? path: "";
-            property string html: controller.getArticle(articlePage.feedid, articleid)
-            ArticleDisplay {
-                id: articleDisplay
-                zoomEnabled: articlePage.zoomEnabled;
-                property bool vertPanningEnabled: articlePage.vertPanningEnabled;
-
-                states: [ State {
-                        name: 'articleIsRead';
-                    when: articleView.currentIndex == index;
-                    StateChangeScript {
-                        name: "myScript"
-                        script: {
-                            //flipItem.url=path;
-                            controller.setEntryRead(articlePage.feedid, articleid)
-//                            if (articlesModel.count==1) {
-//                                timer.start()
-//                            }
-                        }
-                    }
-                    }
-                ]
-            }
-        }
-    }
-
-    Component.onCompleted: {
-        articlesModel.append({articleid: mainArticleId})
-        //articlesModel.append({articleid: controller.getPreviousId(feedid, mainArticleId)})
-
-        //articleView.currentIndex = 1
-    }
-
-//    Timer {
-//        id: timer
-//        interval: 500; running: false; repeat: false
-//        onTriggered: {
-//            articlesModel.insert(0,{articleid: controller.getNextId(feedid, mainArticleId)})
-//            articlesModel.append({articleid: controller.getPreviousId(feedid, mainArticleId)})
-//        }
-//    }
-
 }