From: Yves Marcoz Date: Fri, 13 Jan 2012 05:24:35 +0000 (-0800) Subject: psa: test with flipable X-Git-Url: http://vcs.maemo.org/git/?p=feedingit;a=commitdiff_plain;h=4832c57461d5f133d84c113391d55f497bf05ff3 psa: test with flipable --- diff --git a/psa_harmattan/feedingit/qml/Articles.qml b/psa_harmattan/feedingit/qml/Articles.qml index 1451c28..671b536 100644 --- 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 --- 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(); +// } +// } +// } +// } }