psa: test with flipable

diff --git a/psa_harmattan/feedingit/qml/Articles.qml b/psa_harmattan/feedingit/qml/Articles.qml
index 1451c28..671b536 100644 (file)
--- a/psa_harmattan/feedingit/qml/Articles.qml
+++ b/psa_harmattan/feedingit/qml/Articles.qml
@@ -1,43 +1,282 @@
 import Qt 4.7
 import com.nokia.meego 1.0
+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
 
-    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)})
+
+
+    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 flipRight() {
+            targetAngle = rotation.angle + 180
+            flipable.flipped = !flipable.flipped
+            //flipped = !flipped
+        }
+
+        function flipLeft() {
+            targetAngle = rotation.angle - 180
+            flipable.flipped = !flipable.flipped
+            //flipped = !flipped
+        }
+    }
+
+    Flickable {
+        id: flickableFront
+        //anchors.fill: screen;
+        height: articlePage.height;
+        width: articlePage.width;
+        contentWidth: boundsRecFront.width
+        contentHeight: boundsRecFront.height
+        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
+        //interactive: parent.vertPanningEnabled;
+
+        flickDeceleration: 1500;
+        //flickableDirection: Flickable.VerticalFlick
+
+        property bool contentIsReady: false
+        Rectangle {
+            id: boundsRecFront
+            color: "white"
+            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;
+                transformOrigin: Item.TopLeft
+                //scale: slider.value;
+                settings.defaultFontSize: articlePage.webviewFontSize
+
+                onLoadFinished: {
+                    flickableFront.contentX = buffer //flickable.width/2
+                    flickableFront.contentIsReady = true
+                    flipable.flipRight();
+                }
+
+
+            }
+
+    //        onFlickStarted: {
+    //            console.log("start contentx"+contentX)
+    //            console.log("start contenty"+contentY)
+    //        }
+        }
+        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.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()
             }
         }
 
+        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();
+            }
+        }
+    }
+
+
+    Flickable {
+        id: flickableBack
+        //anchors.fill: screen;
+        height: articlePage.height;
+        width: articlePage.width;
+        contentWidth: boundsRecBack.width
+        contentHeight: boundsRecBack.height
+        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
+        //interactive: parent.vertPanningEnabled;
+
+        flickDeceleration: 1500;
+        //flickableDirection: Flickable.VerticalFlick
+
+        property bool contentIsReady: false
+        Rectangle {
+            id: boundsRecBack
+            color: "white"
+            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;
+                preferredWidth: articlePage.width
+                //preferredHeight: articleView.height
+                //scale: 1.25;
+                transformOrigin: Item.TopLeft
+                //scale: slider.value;
+                settings.defaultFontSize: articlePage.webviewFontSize
+
+                onLoadFinished: {
+                    flickableBack.contentX = buffer //flickable.width/2
+                    flickableBack.contentIsReady = true
+                    flipable.flipRight();
+                }
+
+
+            }
+
+    //        onFlickStarted: {
+    //            console.log("start contentx"+contentX)
+    //            console.log("start contenty"+contentY)
+    //        }
+        }
+        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.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()
+            }
+        }
+
+        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();
+            }
+        }
+    }
+
+
+
+//    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

diff --git a/psa_harmattan/feedingit/qml/main.qml b/psa_harmattan/feedingit/qml/main.qml
index cb77f64..efae8d7 100644 (file)
--- a/psa_harmattan/feedingit/qml/main.qml
+++ b/psa_harmattan/feedingit/qml/main.qml
@@ -397,20 +397,20 @@ PageStackWindow {
         //text: "This is an info banner with no icon"
     }
 
-    Item {
-        AutomaticUpdate {
-            id: autoUpdate
-        }
-
-        Connections {
-            target: settings
-            onAutoUpdateEnabledChanged: {
-                if (!settings.autoUpdateEnabled) {
-                    autoUpdate.stop();
-                } else {
-                    autoUpdate.start();
-                }
-            }
-        }
-    }
+//    Item {
+//        AutomaticUpdate {
+//            id: autoUpdate
+//        }
+
+//        Connections {
+//            target: settings
+//            onAutoUpdateEnabledChanged: {
+//                if (!settings.autoUpdateEnabled) {
+//                    autoUpdate.stop();
+//                } else {
+//                    autoUpdate.start();
+//                }
+//            }
+//        }
+//    }
 }