Merge lp:~unity-team/unity/8.carousel-listview into lp:unity/8.0

[Michał Sawicz]

Bring back ListView'ed Carousel now that Qt is fixed.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:682
http://jenkins.qa.ubuntu.com/job/unity-phablet-ci/991/
Executed test runs:
    UNSTABLE: http://s-jenkins:8080/job/unity-phablet-qmluitests/963
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-armhf-ci/867
        deb: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-armhf-ci/867/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-i386-ci/871
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner/1581

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity-phablet-ci/991/rebuild

review: Needs Fixing (continuous-integration)

[Andrea Cimitan (cimi)]

Since we are here, shall we add some extra tests? (in case, push as unity-team so I can contribute)

[Michał Sawicz (saviq)]

> Since we are here, shall we add some extra tests? (in case, push as unity-team so I can contribute)

Done. Test away :)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:682
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~unity-team/unity/phablet.carousel-listview/+merge/165081/+edit-commit-message

http://jenkins.qa.ubuntu.com/job/unity-phablet-ci/995/
Executed test runs:
    FAILURE: http://s-jenkins:8080/job/unity-phablet-qmluitests/968/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-armhf-ci/871
        deb: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-armhf-ci/871/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-raring-i386-ci/875
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner/1586

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity-phablet-ci/995/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:2
http://jenkins.qa.ubuntu.com/job/unity-8.0-ci/3/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-8.0-saucy-armhf-ci/3
        deb: http://jenkins.qa.ubuntu.com/job/unity-8.0-saucy-armhf-ci/3/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-8.0-saucy-i386-ci/3
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests/1203
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner/1919

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity-8.0-ci/3/rebuild

review: Approve (continuous-integration)

[Albert Astals Cid (aacid)]

Exactly the same code i have in the branch i had for testing the listview-carousel crashes

review: Approve

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'Components/Carousel.qml'
--- Components/Carousel.qml	2013-06-05 22:03:08 +0000
+++ Components/Carousel.qml	2013-06-06 08:03:28 +0000
@@ -18,26 +18,50 @@
 import Ubuntu.Components 0.1
 import "carousel.js" as CarouselJS
 
+/*! The Carousel component presents the items of a model in a carousel view. It's similar to a
+    cover flow. But it stops at it's boundaries (therefore no PathView is used).
+  */
 Item {
     id: carousel
 
+    /// The component to be used as delegate. This component has to be derived from BaseCarouselDelegate
     property Component itemComponent
-    property var model
-    property alias minimumTileWidth: flickable.minimumTileWidth
-    property alias pathItemCount: flickable.pathItemCount
-    property alias tileAspectRatio: flickable.tileAspectRatio
-    property int cacheBuffer: 0
+    /// Model for the Carousel, which has to be a model usable by a ListView
+    property alias model: listView.model
+    /// A minimal width of a tile can be set here. Per default a best fit will be calculated
+    property alias minimumTileWidth: listView.minimumTileWidth
+    /// Sets the number of tiles that are visible
+    property alias pathItemCount: listView.pathItemCount
+    /// Aspect ratio of the tiles width/height
+    property alias tileAspectRatio: listView.tileAspectRatio
+    /// Used to cache some delegates for performance reasons. See the ListView documentation for details
+    property alias cacheBuffer: listView.cacheBuffer
+    /// Width of the "draw buffer" in pixel. The drawBuffer is an additional area at start/end where
+    /// items drawn, even if it is not in the visible area.
+    /// cacheBuffer controls only the to retain delegates outside the visible area (and is used on top of the drawBuffer)
+    /// see https://bugreports.qt-project.org/browse/QTBUG-29173
+    property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
+    /// The selected item can be shown in a different size controlled by selectedItemScaleFactor
     property real selectedItemScaleFactor: 1.1
 
+    /// Emitted when the user clicked on an item
+    /// @param index is the index of the clicked item
+    /// @param delegateItem is the clicked component/delegate itself
+    /// @param itemY is y of the clicked delegate
     signal clicked(int index, var delegateItem, real itemY)
 
-    implicitHeight: flickable.tileHeight * selectedItemScaleFactor
-
-    /* TODO: evaluate if the component could be more efficient with a ListView,
-             using this technique https://bugreports.qt-project.org/browse/QTBUG-29173 */
-
-    Flickable {
-        id: flickable
+    implicitHeight: listView.tileHeight * selectedItemScaleFactor
+
+    /* Basic idea behind the carousel effect is to move the items of the delegates (compacting /stuffing them).
+       One drawback is, that more delegates have to be drawn than usually. As some items are moved from the
+       invisible to the visible area. Setting the cacheBuffer does not fix this.
+       See https://bugreports.qt-project.org/browse/QTBUG-29173
+       Therefore the ListView has negative left and right anchors margins, and in addition a header
+       and footer item to compensate that.
+
+       The scaling of the items is controlled by the variable continuousIndex, described below. */
+    ListView {
+        id: listView
 
         property real minimumTileWidth: 0
         property real newContentX: -1
@@ -57,20 +81,27 @@
             - 'gapToEndPhase' gap in pixels between middle and end phase
             - 'kGapEnd' constant used to calculate 'continuousIndex' in end phase
             - 'kMiddleIndex' constant used to calculate 'continuousIndex' in middle phase
-            - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase. */
+            - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase
+            - 'realContentWidth' the width of all the delegates only (without header/footer)
+            - 'realContentX' the 'contentX' of the listview ignoring the 'drawBuffer'
+            - 'realWidth' the 'width' of the listview, as it is used as component. */
 
-        readonly property real gapToMiddlePhase: Math.min(width / 2 - tileWidth / 2, (contentWidth - width) / 2)
-        readonly property real gapToEndPhase: contentWidth - width - gapToMiddlePhase
+        readonly property real gapToMiddlePhase: Math.min(realWidth / 2 - tileWidth / 2, (realContentWidth - realWidth) / 2)
+        readonly property real gapToEndPhase: realContentWidth - realWidth - gapToMiddlePhase
         readonly property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
-        readonly property real kMiddleIndex: (width / 2) / tileWidth - 0.5
+        readonly property real kMiddleIndex: (realWidth / 2) / tileWidth - 0.5
         readonly property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
-        readonly property real realPathItemCount: Math.min(width / tileWidth, pathItemCount)
-        readonly property real referenceGapToMiddlePhase: width / 2 - tileWidth / 2
+        readonly property real maximumItemTranslation: (listView.tileWidth * 3) / listView.scaleFactor
+        readonly property real realContentWidth: contentWidth - 2 * carousel.drawBuffer
+        readonly property real realContentX: contentX + carousel.drawBuffer
+        readonly property real realPathItemCount: Math.min(realWidth / tileWidth, pathItemCount)
+        readonly property real realWidth: carousel.width
+        readonly property real referenceGapToMiddlePhase: realWidth / 2 - tileWidth / 2
         readonly property real referencePathItemCount: referenceWidth / referenceTileWidth
         readonly property real referenceWidth: 848
         readonly property real referenceTileWidth: 175
         readonly property real scaleFactor: tileWidth / referenceTileWidth
-        readonly property real tileWidth: Math.max(width / pathItemCount, minimumTileWidth)
+        readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
         readonly property real tileHeight: tileWidth / tileAspectRatio
         readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
         readonly property real verticalMargin: (parent.height - tileHeight) / 2
@@ -80,20 +111,36 @@
             fill: parent
             topMargin: verticalMargin
             bottomMargin: verticalMargin
-        }
-        contentWidth: view.width
-        contentHeight: height
+            // extending the "drawing area"
+            leftMargin: -carousel.drawBuffer
+            rightMargin: -carousel.drawBuffer
+        }
+
+        /* The header and footer help to "extend" the area, the listview draws items.
+           This together with anchors.leftMargin and anchors.rightMargin. */
+        header: Item {
+            width: carousel.drawBuffer
+            height: listView.tileHeight
+        }
+        footer: Item {
+            width: carousel.drawBuffer
+            height: listView.tileHeight
+        }
+
         boundsBehavior: Flickable.StopAtBounds
-        flickDeceleration: Math.max(1500 * Math.pow(width / referenceWidth, 1.5), 1500) // 1500 is platform default
-        maximumFlickVelocity: Math.max(2500 * Math.pow(width / referenceWidth, 1.5), 2500) // 2500 is platform default
+        cacheBuffer: carousel.cacheBuffer
+        flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
+        maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
+        orientation: ListView.Horizontal
 
         function itemClicked(index, delegateItem) {
             var x = CarouselJS.getXFromContinuousIndex(index,
-                                                       width,
-                                                       contentWidth,
+                                                       realWidth,
+                                                       realContentWidth,
                                                        tileWidth,
                                                        gapToMiddlePhase,
-                                                       gapToEndPhase)
+                                                       gapToEndPhase,
+                                                       carousel.drawBuffer)
 
             if (Math.abs(x - contentX) < 1) {
                 /* We're clicking the selected item and
@@ -116,22 +163,22 @@
             newContentX = -1
         }
         onMovementEnded: {
-            if (contentX > 0 && contentX < contentWidth - width)
+            if (realContentX > 0 && realContentX < realContentWidth - realWidth)
                 stepAnimation.start()
         }
 
         SmoothedAnimation {
             id: stepAnimation
 
-            target: flickable
+            target: listView
             property: "contentX"
-            from: flickable.contentX
-            to: CarouselJS.getXFromContinuousIndex(view.selectedIndex,
-                                                   flickable.width,
-                                                   flickable.contentWidth,
-                                                   flickable.tileWidth,
-                                                   flickable.gapToMiddlePhase,
-                                                   flickable.gapToEndPhase)
+            to: CarouselJS.getXFromContinuousIndex(listView.selectedIndex,
+                                                   listView.realWidth,
+                                                   listView.realContentWidth,
+                                                   listView.tileWidth,
+                                                   listView.gapToMiddlePhase,
+                                                   listView.gapToEndPhase,
+                                                   carousel.drawBuffer)
             duration: 450
             velocity: 200
             easing.type: Easing.InOutQuad
@@ -141,113 +188,97 @@
             id: newContentXAnimation
 
             NumberAnimation {
-                target: flickable
+                target: listView
                 property: "contentX"
-                from: flickable.contentX
-                to: flickable.newContentX
+                from: listView.contentX
+                to: listView.newContentX
                 duration: 300
                 easing.type: Easing.InOutQuad
             }
             ScriptAction {
-                script: flickable.newContentX = -1
+                script: listView.newContentX = -1
             }
         }
 
-        Row {
-            id: view
-
-            readonly property int selectedIndex: Math.round(continuousIndex)
-            readonly property real continuousIndex: CarouselJS.getContinuousIndex(flickable.contentX,
-                                                                                  flickable.tileWidth,
-                                                                                  flickable.gapToMiddlePhase,
-                                                                                  flickable.gapToEndPhase,
-                                                                                  flickable.kGapEnd,
-                                                                                  flickable.kMiddleIndex,
-                                                                                  flickable.kXBeginningEnd)
-
-            height: parent.height
-            anchors.verticalCenter: parent.verticalCenter
+        readonly property int selectedIndex: Math.round(continuousIndex)
+        readonly property real continuousIndex: CarouselJS.getContinuousIndex(listView.realContentX,
+                                                                              listView.tileWidth,
+                                                                              listView.gapToMiddlePhase,
+                                                                              listView.gapToEndPhase,
+                                                                              listView.kGapEnd,
+                                                                              listView.kMiddleIndex,
+                                                                              listView.kXBeginningEnd)
+
+        property real viewTranslation: CarouselJS.getViewTranslation(listView.realContentX,
+                                                                     listView.tileWidth,
+                                                                     listView.gapToMiddlePhase,
+                                                                     listView.gapToEndPhase,
+                                                                     listView.translationXViewFactor)
+
+        delegate: Loader {
+            property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
+            property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
+            readonly property bool explicitScale: (!listView.moving ||
+                                                   listView.realContentX <= 0 ||
+                                                   listView.realContentX >= listView.realContentWidth - listView.realWidth) &&
+                                                  listView.newContentX < 0 &&
+                                                  index === listView.selectedIndex
+            readonly property real cachedTiles: listView.realPathItemCount + carousel.drawBuffer / listView.tileWidth
+            readonly property real distance: listView.continuousIndex - index
+            readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
+                                                                                 (index + 0.5), // good approximation of scale while changing selected item
+                                                                                 listView.count,
+                                                                                 listView.visibleTilesScaleFactor)
+            readonly property real itemScale: CarouselJS.getItemScale(distance,
+                                                                      listView.continuousIndex,
+                                                                      listView.count,
+                                                                      listView.visibleTilesScaleFactor)
+            readonly property real translationX: CarouselJS.getItemTranslation(index,
+                                                                               listView.selectedIndex,
+                                                                               distance,
+                                                                               itemScale,
+                                                                               itemTranslationScale,
+                                                                               listView.maximumItemTranslation)
+
+            width: listView.tileWidth
+            height: listView.tileHeight
+            scale: itemScale * explicitScaleFactor
+            sourceComponent: itemComponent
+            z: cachedTiles - Math.abs(index - listView.selectedIndex)
 
             transform: Translate {
-                x: CarouselJS.getViewTranslation(flickable.contentX,
-                                                 flickable.tileWidth,
-                                                 flickable.gapToMiddlePhase,
-                                                 flickable.gapToEndPhase,
-                                                 flickable.translationXViewFactor)
+                x: listView.viewTranslation + translationX * listView.scaleFactor
             }
 
-            Repeater {
-                id: repeater
-
-                model: carousel.model
-
-                Loader {
-                    property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
-                    property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
-                    readonly property bool explicitScale: (!flickable.moving ||
-                                                           flickable.contentX <= 0 ||
-                                                           flickable.contentX >= flickable.contentWidth - flickable.width) &&
-                                                          flickable.newContentX < 0 &&
-                                                          index === view.selectedIndex
-                    readonly property real cachedTiles: flickable.realPathItemCount + carousel.cacheBuffer / flickable.tileWidth
-                    readonly property real distance: view.continuousIndex - index
-                    readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
-                                                                                         (index + 0.5), // good approximation of scale while changing selected item
-                                                                                         repeater.count,
-                                                                                         flickable.visibleTilesScaleFactor)
-                    readonly property real itemScale: CarouselJS.getItemScale(distance,
-                                                                              view.continuousIndex,
-                                                                              repeater.count,
-                                                                              flickable.visibleTilesScaleFactor)
-                    readonly property real translationFactor: (flickable.tileWidth * 3) / flickable.scaleFactor
-                    readonly property real translationX: index === view.selectedIndex ? 0 :
-                                                         CarouselJS.getItemTranslation(distance,
-                                                                                       itemScale,
-                                                                                       itemTranslationScale,
-                                                                                       translationFactor)
-
-                    width: flickable.tileWidth
-                    height: flickable.tileHeight
-                    scale: itemScale * explicitScaleFactor
-                    opacity: scale > 0.02 ? 1 : 0
-                    sourceComponent: z > 0 ? itemComponent : undefined
-                    z: cachedTiles - Math.abs(index - view.selectedIndex)
-
-                    transform: Translate {
-                        x: translationX * flickable.scaleFactor
-                    }
-
-                    Behavior on explicitScaleFactor {
-                        SequentialAnimation {
-                            ScriptAction {
-                                script: if (!explicitScale)
-                                            explicitlyScaled = false
-                            }
-                            NumberAnimation {
-                                duration: explicitScaleFactor === 1.0 ? 250 : 150
-                                easing.type: Easing.InOutQuad
-                            }
-                            ScriptAction {
-                                script: if (explicitScale)
-                                            explicitlyScaled = true
-                            }
-                        }
-                    }
-
-                    onLoaded: {
-                        item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
-                        item.model = Qt.binding(function() { return model; })
-                    }
-
-                    MouseArea {
-                        id: mouseArea
-
-                        anchors.fill: parent
-
-                        onClicked: flickable.itemClicked(index, item)
+            Behavior on explicitScaleFactor {
+                SequentialAnimation {
+                    ScriptAction {
+                        script: if (!explicitScale)
+                                    explicitlyScaled = false
+                    }
+                    NumberAnimation {
+                        duration: explicitScaleFactor === 1.0 ? 250 : 150
+                        easing.type: Easing.InOutQuad
+                    }
+                    ScriptAction {
+                        script: if (explicitScale)
+                                    explicitlyScaled = true
                     }
                 }
             }
+
+            onLoaded: {
+                item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
+                item.model = Qt.binding(function() { return model; })
+            }
+
+            MouseArea {
+                id: mouseArea
+
+                anchors.fill: parent
+
+                onClicked: listView.itemClicked(index, item)
+            }
         }
     }
 }
 
=== modified file 'Components/carousel.js'
--- Components/carousel.js	2013-06-05 22:03:08 +0000
+++ Components/carousel.js	2013-06-06 08:03:28 +0000
@@ -16,7 +16,15 @@
 
 .pragma library
 
-// get the element which is selected accordingly to x, the hero of the view
+/*! get the element which is selected accordingly to x, the hero of the view
+  @param x contentX of the ListView
+  @param tileWidth width of a single tile
+  @param gapToMiddlePhase gap in pixels between beginning and middle phase
+  @param gapToEndPhase gap in pixels between middle and end phase
+  @param kGapEnd
+  @param kMiddleIndex
+  @param kXBeginningEnd
+*/
 function getContinuousIndex(x, tileWidth, gapToMiddlePhase, gapToEndPhase, kGapEnd, kMiddleIndex, kXBeginningEnd) {
     if (x < gapToMiddlePhase) {
         // beginning
@@ -30,8 +38,16 @@
     return x / tileWidth + kMiddleIndex
 }
 
-// obtain x position relative to an index, essentially an inverse of getContinuousIndex()
-function getXFromContinuousIndex(index, viewWidth, contentWidth, tileWidth, gapToMiddlePhase, gapToEndPhase) {
+/*! obtain x position relative to an index, essentially an inverse of getContinuousIndex()
+  @param index index of the item to calcualte the proper X value for
+  @param viewWidth visible width of the view
+  @param contentWidth width off all items in the view
+  @param tileWidth width of one item
+  @param gapToMiddlePhase
+  @param gapToEndPhase
+  @param drawBuffer width of the drawBuffer
+*/
+function getXFromContinuousIndex(index, viewWidth, contentWidth, tileWidth, gapToMiddlePhase, gapToEndPhase, drawBuffer) {
     var middleX = (index + 0.5) * tileWidth - viewWidth / 2
 
     if (middleX < gapToMiddlePhase) {
@@ -40,6 +56,7 @@
                ((1 / tileWidth) +
                 (viewWidth / (2 * tileWidth * gapToMiddlePhase)) -
                 1 / (2 * gapToMiddlePhase))
+               - drawBuffer
     } else if (middleX > gapToEndPhase) {
         // inverse of 'middleIndex + kGap' of getContinuousIndex()
         return (index +
@@ -50,13 +67,19 @@
                (1 / tileWidth +
                 viewWidth / (2 * tileWidth * gapToMiddlePhase) -
                 1 / (2 * gapToMiddlePhase))
+               - drawBuffer
     }
 
     // inverse of 'middleIndex' of getContinuousIndex()
-    return middleX
+    return middleX - drawBuffer
 }
 
-// get translation of the whole view, adds gaps on sides
+/*! get translation of the whole view, adds gaps on sides
+  @param x contentX of the ListView
+  @param gapToMiddlePhase
+  @param gapToEndPhase
+  @param translationXViewFactor
+*/
 function getViewTranslation(x, tileWidth, gapToMiddlePhase, gapToEndPhase, translationXViewFactor) {
     if (x < gapToMiddlePhase) {
         // beginning
@@ -70,16 +93,29 @@
     return 0
 }
 
-// item scale
-function getItemScale(distance, continuousIndex, end, scaleFactor) {
+/*! item scale
+  @param distance is the difference of the item's index to the continuousIndex
+  @param continuousIndex the current index in real number
+  @param numberOfItems the total number of items in the model
+  @param scaleFactor if bigger than 1, the scaling is done slower (more distance needed)
+*/
+function getItemScale(distance, continuousIndex, numberOfItems, scaleFactor) {
     var distanceAbs = Math.abs(distance)
-    var distanceToBounds = Math.min(continuousIndex, end - continuousIndex)
+    var distanceToBounds = Math.min(continuousIndex, numberOfItems - continuousIndex)
     var k = Math.max(200 + 100 * (-distanceToBounds / (3 * scaleFactor)), 50)
     return Math.max(0.01, 1 - Math.pow(distanceAbs, 2.5) / (k * scaleFactor))
 }
 
-// item translation
-function getItemTranslation(distance, scale, maxScale, translationFactor) {
+/*! item translation
+ @param index index of the current item
+ @param selectedIndex index of the selected item
+ @param distance controls the direction wich is left/negative and right/positive
+ @param scale is the current scale factor of the item
+ @param maxScale the maximum scale factor (the one used when the index is on that item
+ @param maxTranslation the maximum translation length in pixel
+*/
+function getItemTranslation(index, selectedIndex, distance, scale, maxScale, maxTranslation) {
+    if (index === selectedIndex) return 0
     var sign = distance > 0 ? 1 : -1
-    return sign * (maxScale - scale) * translationFactor
+    return sign * (maxScale - scale) * maxTranslation
 }
 
=== modified file 'tests/qmltests/Components/tst_Carousel.qml'
--- tests/qmltests/Components/tst_Carousel.qml	2013-06-05 22:03:08 +0000
+++ tests/qmltests/Components/tst_Carousel.qml	2013-06-06 08:03:28 +0000
@@ -19,6 +19,7 @@
 import "../../../Components/carousel.js" as Carousel
 
 TestCase {
+    id: root
     name: "Carousel"
 
     property real carouselWidth
@@ -49,9 +50,9 @@
     }
 
     function test_getContinuousIndex(data) {
-        carouselWidth = data.carouselWidth
-        tileWidth = data.tileWidth
-        itemCount = data.itemCount
+        root.carouselWidth = data.carouselWidth
+        root.tileWidth = data.tileWidth
+        root.itemCount = data.itemCount
 
         var index = Carousel.getContinuousIndex(data.x,
                                                 data.tileWidth,
@@ -69,23 +70,23 @@
                   index: 0, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:0, result: 0},
                  {tag:"in startup",
                   index: 2, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:0, result: 100},
-//                 {tag:"in startup with drawBuffer",
-//                  index: 2, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 0},
+                 {tag:"in startup with drawBuffer",
+                  index: 2, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 0},
                  {tag:"in the middle",
                   index: 5, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:0, result: 350},
-//                 {tag:"in the middle with drawBuffer",
-//                  index: 5, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 250},
+                 {tag:"in the middle with drawBuffer",
+                  index: 5, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 250},
                  {tag:"at end",
                   index: 9, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:0, result: 600},
-//                 {tag:"at end with drawBuffer",
-//                  index: 9, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 500},
+                 {tag:"at end with drawBuffer",
+                  index: 9, carouselWidth:400, tileWidth:100, itemCount:10, drawBuffer:100, result: 500},
                ]
     }
 
     function test_getXFromContinuousIndex(data) {
-        carouselWidth = data.carouselWidth
-        tileWidth = data.tileWidth
-        itemCount = data.itemCount
+        root.carouselWidth = data.carouselWidth
+        root.tileWidth = data.tileWidth
+        root.itemCount = data.itemCount
 
         var x = Carousel.getXFromContinuousIndex(data.index,
                                                  data.carouselWidth,
@@ -113,14 +114,14 @@
     }
 
     function test_getViewTranslation(data) {
-        carouselWidth = data.carouselWidth
-        tileWidth = data.tileWidth
-        itemCount = data.itemCount
+        root.carouselWidth = data.carouselWidth
+        root.tileWidth = data.tileWidth
+        root.itemCount = data.itemCount
 
         var x = Carousel.getViewTranslation(data.x,
                                             data.tileWidth,
-                                            gapToMiddlePhase,
-                                            gapToEndPhase,
+                                            root.gapToMiddlePhase,
+                                            root.gapToEndPhase,
                                             data.translationXViewFactor)
         compare(x, data.result)
     }
@@ -158,30 +159,33 @@
 
     // test for the getItemTranslation() function
     function test_getItemTranslation_data() {
-        return [ // tests if distance only affects the sign
-                 {distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
-//                 {distance: 99, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
-                 {distance: 0, scale: 0, maxScale: 1, maxTranslation: 10, result: -10},
-                 {distance: -1, scale: 0, maxScale: 1, maxTranslation: 10, result: -10},
+        return [ // tests for index and selectedIndex
+                 {index: 1, selectedIndex: 1, distance: 1, scale: 1, maxScale: 1, maxTranslation: 10, result: 0},
+                 // tests if distance only affects the sign
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
+                 {index: 1, selectedIndex: 2, distance: 99, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
+                 {index: 1, selectedIndex: 2, distance: -1, scale: 0, maxScale: 1, maxTranslation: 10, result: -10},
+                 {index: 1, selectedIndex: 2, distance: -99, scale: 0, maxScale: 1, maxTranslation: 10, result: -10},
                  // tests for the scale
-                 {distance: 1, scale: 1, maxScale: 1, maxTranslation: 10, result: 0},
-                 {distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
-                 {distance: 1, scale: 0.5, maxScale: 1, maxTranslation: 10, result: 5},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 1, maxScale: 1, maxTranslation: 10, result: 0},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0.5, maxScale: 1, maxTranslation: 10, result: 5},
                  // tests for maxScale
-                 {distance: 1, scale: 1, maxScale: 1, maxTranslation: 10, result: 0},
-                 {distance: 1, scale: 1, maxScale: 2, maxTranslation: 10, result: 10},
-//                 {distance: 1, scale: 1, maxScale: 0, maxTranslation: 10, result: 0},
-//                 {distance: 1, scale: 1, maxScale: 99, maxTranslation: 10, result: 10},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 0.98, maxTranslation: 10, result: 9.8},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0.5, maxScale: 0.95, maxTranslation: 10, result: 4.5},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0.8, maxScale: 0.93, maxTranslation: 10, result: 1.3},
                  // test for maxTranslation
-                 {distance: 1, scale: 1, maxScale: 1, maxTranslation: 1, result: 0},
-                 {distance: 1, scale: 0, maxScale: 1, maxTranslation: 1, result: 1},
-                 {distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
-                 {distance: 1, scale: 0, maxScale: 1, maxTranslation: 0, result: 0},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 1, maxScale: 1, maxTranslation: 1, result: 0},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 1, maxTranslation: 1, result: 1},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 1, maxTranslation: 10, result: 10},
+                 {index: 1, selectedIndex: 2, distance: 1, scale: 0, maxScale: 1, maxTranslation: 0, result: 0},
                ]
     }
 
     function test_getItemTranslation(data) {
-        var scale = Carousel.getItemTranslation(data.distance,
+        var scale = Carousel.getItemTranslation(data.index,
+                                                data.selectedIndex,
+                                                data.distance,
                                                 data.scale,
                                                 data.maxScale,
                                                 data.maxTranslation)