@@ -18,26 +18,50 @@ import QtQuick 2.0
18import Ubuntu.Components 0.1
18import Ubuntu.Components 0.1
19import "carousel.js" as CarouselJS
19import "carousel.js" as CarouselJS
21+/*! The Carousel component presents the items of a model in a carousel view. It's similar to a
22+ cover flow. But it stops at it's boundaries (therefore no PathView is used).
22 id: carousel
25 id: carousel
27+ /// The component to be used as delegate. This component has to be derived from BaseCarouselDelegate
24 property Component itemComponent
28 property Component itemComponent
29+ /// Model for the Carousel, which has to be a model usable by a ListView
25− property var model
30+ property alias model: listView.model
31+ /// A minimal width of a tile can be set here. Per default a best fit will be calculated
26− property alias minimumTileWidth: flickable.minimumTileWidth
32+ property alias minimumTileWidth: listView.minimumTileWidth
33+ /// Sets the number of tiles that are visible
27− property alias pathItemCount: flickable.pathItemCount
34+ property alias pathItemCount: listView.pathItemCount
35+ /// Aspect ratio of the tiles width/height
28− property alias tileAspectRatio: flickable.tileAspectRatio
36+ property alias tileAspectRatio: listView.tileAspectRatio
29− property int cacheBuffer: 0
37+ /// Used to cache some delegates for performance reasons. See the ListView documentation for details
38+ property alias cacheBuffer: listView.cacheBuffer
39+ /// Width of the "draw buffer" in pixel. The drawBuffer is an additional area at start/end where
40+ /// items drawn, even if it is not in the visible area.
41+ /// cacheBuffer controls only the to retain delegates outside the visible area (and is used on top of the drawBuffer)
42+ /// see https://bugreports.qt-project.org/browse/QTBUG-29173
43+ property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
44+ /// The selected item can be shown in a different size controlled by selectedItemScaleFactor
30 property real selectedItemScaleFactor: 1.1
45 property real selectedItemScaleFactor: 1.1
47+ /// Emitted when the user clicked on an item
48+ /// @param index is the index of the clicked item
49+ /// @param delegateItem is the clicked component/delegate itself
50+ /// @param itemY is y of the clicked delegate
32 signal clicked(int index, var delegateItem, real itemY)
51 signal clicked(int index, var delegateItem, real itemY)
34− implicitHeight: flickable.tileHeight * selectedItemScaleFactor
53+ implicitHeight: listView.tileHeight * selectedItemScaleFactor
36− /* TODO: evaluate if the component could be more efficient with a ListView,
55+ /* Basic idea behind the carousel effect is to move the items of the delegates (compacting /stuffing them).
56+ One drawback is, that more delegates have to be drawn than usually. As some items are moved from the
57+ invisible to the visible area. Setting the cacheBuffer does not fix this.
37− using this technique https://bugreports.qt-project.org/browse/QTBUG-29173 */
58+ See https://bugreports.qt-project.org/browse/QTBUG-29173
59+ Therefore the ListView has negative left and right anchors margins, and in addition a header
60+ and footer item to compensate that.
39− Flickable {
62+ The scaling of the items is controlled by the variable continuousIndex, described below. */
40− id: flickable
63+ ListView {
42 property real minimumTileWidth: 0
66 property real minimumTileWidth: 0
43 property real newContentX: -1
67 property real newContentX: -1
@@ -57,20 +81,27 @@ Item {
57 - 'gapToEndPhase' gap in pixels between middle and end phase
81 - 'gapToEndPhase' gap in pixels between middle and end phase
58 - 'kGapEnd' constant used to calculate 'continuousIndex' in end phase
82 - 'kGapEnd' constant used to calculate 'continuousIndex' in end phase
59 - 'kMiddleIndex' constant used to calculate 'continuousIndex' in middle phase
83 - 'kMiddleIndex' constant used to calculate 'continuousIndex' in middle phase
60− - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase. */
84+ - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase
85+ - 'realContentWidth' the width of all the delegates only (without header/footer)
86+ - 'realContentX' the 'contentX' of the listview ignoring the 'drawBuffer'
87+ - 'realWidth' the 'width' of the listview, as it is used as component. */
62− readonly property real gapToMiddlePhase: Math.min(width / 2 - tileWidth / 2, (contentWidth - width) / 2)
89+ readonly property real gapToMiddlePhase: Math.min(realWidth / 2 - tileWidth / 2, (realContentWidth - realWidth) / 2)
63− readonly property real gapToEndPhase: contentWidth - width - gapToMiddlePhase
90+ readonly property real gapToEndPhase: realContentWidth - realWidth - gapToMiddlePhase
64 readonly property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
91 readonly property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
65− readonly property real kMiddleIndex: (width / 2) / tileWidth - 0.5
92+ readonly property real kMiddleIndex: (realWidth / 2) / tileWidth - 0.5
66 readonly property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
93 readonly property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
94+ readonly property real maximumItemTranslation: (listView.tileWidth * 3) / listView.scaleFactor
95+ readonly property real realContentWidth: contentWidth - 2 * carousel.drawBuffer
96+ readonly property real realContentX: contentX + carousel.drawBuffer
67− readonly property real realPathItemCount: Math.min(width / tileWidth, pathItemCount)
97+ readonly property real realPathItemCount: Math.min(realWidth / tileWidth, pathItemCount)
98+ readonly property real realWidth: carousel.width
68− readonly property real referenceGapToMiddlePhase: width / 2 - tileWidth / 2
99+ readonly property real referenceGapToMiddlePhase: realWidth / 2 - tileWidth / 2
69 readonly property real referencePathItemCount: referenceWidth / referenceTileWidth
100 readonly property real referencePathItemCount: referenceWidth / referenceTileWidth
70 readonly property real referenceWidth: 848
101 readonly property real referenceWidth: 848
71 readonly property real referenceTileWidth: 175
102 readonly property real referenceTileWidth: 175
72 readonly property real scaleFactor: tileWidth / referenceTileWidth
103 readonly property real scaleFactor: tileWidth / referenceTileWidth
73− readonly property real tileWidth: Math.max(width / pathItemCount, minimumTileWidth)
104+ readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
74 readonly property real tileHeight: tileWidth / tileAspectRatio
105 readonly property real tileHeight: tileWidth / tileAspectRatio
75 readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
106 readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
76 readonly property real verticalMargin: (parent.height - tileHeight) / 2
107 readonly property real verticalMargin: (parent.height - tileHeight) / 2
@@ -80,20 +111,36 @@ Item {
80 fill: parent
111 fill: parent
81 topMargin: verticalMargin
112 topMargin: verticalMargin
82 bottomMargin: verticalMargin
113 bottomMargin: verticalMargin
114+ // extending the "drawing area"
115+ leftMargin: -carousel.drawBuffer
116+ rightMargin: -carousel.drawBuffer
84− contentWidth: view.width
118+
85− contentHeight: height
119+ /* The header and footer help to "extend" the area, the listview draws items.
120+ This together with anchors.leftMargin and anchors.rightMargin. */
122+ width: carousel.drawBuffer
123+ height: listView.tileHeight
126+ width: carousel.drawBuffer
127+ height: listView.tileHeight
86 boundsBehavior: Flickable.StopAtBounds
130 boundsBehavior: Flickable.StopAtBounds
131+ cacheBuffer: carousel.cacheBuffer
87− flickDeceleration: Math.max(1500 * Math.pow(width / referenceWidth, 1.5), 1500) // 1500 is platform default
132+ flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
88− maximumFlickVelocity: Math.max(2500 * Math.pow(width / referenceWidth, 1.5), 2500) // 2500 is platform default
133+ maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
134+ orientation: ListView.Horizontal
90 function itemClicked(index, delegateItem) {
136 function itemClicked(index, delegateItem) {
91 var x = CarouselJS.getXFromContinuousIndex(index,
137 var x = CarouselJS.getXFromContinuousIndex(index,
92− width,
138+ realWidth,
93− contentWidth,
139+ realContentWidth,
94 tileWidth,
140 tileWidth,
95 gapToMiddlePhase,
141 gapToMiddlePhase,
96− gapToEndPhase)
142+ gapToEndPhase,
143+ carousel.drawBuffer)
98 if (Math.abs(x - contentX) < 1) {
145 if (Math.abs(x - contentX) < 1) {
99 /* We're clicking the selected item and
146 /* We're clicking the selected item and
@@ -116,22 +163,22 @@ Item {
116 newContentX = -1
163 newContentX = -1
118 onMovementEnded: {
165 onMovementEnded: {
119− if (contentX > 0 && contentX < contentWidth - width)
166+ if (realContentX > 0 && realContentX < realContentWidth - realWidth)
120 stepAnimation.start()
167 stepAnimation.start()
123 SmoothedAnimation {
170 SmoothedAnimation {
124 id: stepAnimation
171 id: stepAnimation
126− target: flickable
173+ target: listView
127 property: "contentX"
174 property: "contentX"
128− from: flickable.contentX
129− to: CarouselJS.getXFromContinuousIndex(view.selectedIndex,
175+ to: CarouselJS.getXFromContinuousIndex(listView.selectedIndex,
130− flickable.width,
176+ listView.realWidth,
131− flickable.contentWidth,
177+ listView.realContentWidth,
132− flickable.tileWidth,
178+ listView.tileWidth,
133− flickable.gapToMiddlePhase,
179+ listView.gapToMiddlePhase,
134− flickable.gapToEndPhase)
180+ listView.gapToEndPhase,
181+ carousel.drawBuffer)
135 duration: 450
182 duration: 450
136 velocity: 200
183 velocity: 200
137 easing.type: Easing.InOutQuad
184 easing.type: Easing.InOutQuad
@@ -141,112 +188,96 @@ Item {
141 id: newContentXAnimation
188 id: newContentXAnimation
143 NumberAnimation {
190 NumberAnimation {
144− target: flickable
191+ target: listView
145 property: "contentX"
192 property: "contentX"
146− from: flickable.contentX
193+ from: listView.contentX
147− to: flickable.newContentX
194+ to: listView.newContentX
148 duration: 300
195 duration: 300
149 easing.type: Easing.InOutQuad
196 easing.type: Easing.InOutQuad
151 ScriptAction {
198 ScriptAction {
152− script: flickable.newContentX = -1
199+ script: listView.newContentX = -1
159− readonly property int selectedIndex: Math.round(continuousIndex)
203+ readonly property int selectedIndex: Math.round(continuousIndex)
160− readonly property real continuousIndex: CarouselJS.getContinuousIndex(flickable.contentX,
204+ readonly property real continuousIndex: CarouselJS.getContinuousIndex(listView.realContentX,
161− flickable.tileWidth,
205+ listView.tileWidth,
162− flickable.gapToMiddlePhase,
206+ listView.gapToMiddlePhase,
163− flickable.gapToEndPhase,
207+ listView.gapToEndPhase,
164− flickable.kGapEnd,
208+ listView.kGapEnd,
165− flickable.kMiddleIndex,
209+ listView.kMiddleIndex,
166− flickable.kXBeginningEnd)
210+ listView.kXBeginningEnd)
168− height: parent.height
212+ property real viewTranslation: CarouselJS.getViewTranslation(listView.realContentX,
169− anchors.verticalCenter: parent.verticalCenter
213+ listView.tileWidth,
214+ listView.gapToMiddlePhase,
215+ listView.gapToEndPhase,
216+ listView.translationXViewFactor)
219+ property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
220+ property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
221+ readonly property bool explicitScale: (!listView.moving ||
222+ listView.realContentX <= 0 ||
223+ listView.realContentX >= listView.realContentWidth - listView.realWidth) &&
224+ listView.newContentX < 0 &&
225+ index === listView.selectedIndex
226+ readonly property real cachedTiles: listView.realPathItemCount + carousel.drawBuffer / listView.tileWidth
227+ readonly property real distance: listView.continuousIndex - index
228+ readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
229+ (index + 0.5), // good approximation of scale while changing selected item
231+ listView.visibleTilesScaleFactor)
232+ readonly property real itemScale: CarouselJS.getItemScale(distance,
233+ listView.continuousIndex,
235+ listView.visibleTilesScaleFactor)
236+ readonly property real translationX: CarouselJS.getItemTranslation(index,
237+ listView.selectedIndex,
240+ itemTranslationScale,
241+ listView.maximumItemTranslation)
243+ width: listView.tileWidth
244+ height: listView.tileHeight
245+ scale: itemScale * explicitScaleFactor
246+ sourceComponent: itemComponent
247+ z: cachedTiles - Math.abs(index - listView.selectedIndex)
171 transform: Translate {
249 transform: Translate {
172− x: CarouselJS.getViewTranslation(flickable.contentX,
250+ x: listView.viewTranslation + translationX * listView.scaleFactor
173− flickable.tileWidth,
174− flickable.gapToMiddlePhase,
175− flickable.gapToEndPhase,
176− flickable.translationXViewFactor)
179− Repeater {
253+ Behavior on explicitScaleFactor {
180− id: repeater
254+ SequentialAnimation {
182− model: carousel.model
256+ script: if (!explicitScale)
183−
257+ explicitlyScaled = false
185− property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
186− property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
187− readonly property bool explicitScale: (!flickable.moving ||
188− flickable.contentX <= 0 ||
189− flickable.contentX >= flickable.contentWidth - flickable.width) &&
190− flickable.newContentX < 0 &&
191− index === view.selectedIndex
192− readonly property real cachedTiles: flickable.realPathItemCount + carousel.cacheBuffer / flickable.tileWidth
193− readonly property real distance: view.continuousIndex - index
194− readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
195− (index + 0.5), // good approximation of scale while changing selected item
197− flickable.visibleTilesScaleFactor)
198− readonly property real itemScale: CarouselJS.getItemScale(distance,
199− view.continuousIndex,
201− flickable.visibleTilesScaleFactor)
202− readonly property real translationFactor: (flickable.tileWidth * 3) / flickable.scaleFactor
203− readonly property real translationX: index === view.selectedIndex ? 0 :
204− CarouselJS.getItemTranslation(distance,
206− itemTranslationScale,
209− width: flickable.tileWidth
210− height: flickable.tileHeight
211− scale: itemScale * explicitScaleFactor
212− opacity: scale > 0.02 ? 1 : 0
213− sourceComponent: z > 0 ? itemComponent : undefined
214− z: cachedTiles - Math.abs(index - view.selectedIndex)
216− transform: Translate {
217− x: translationX * flickable.scaleFactor
220− Behavior on explicitScaleFactor {
221− SequentialAnimation {
223− script: if (!explicitScale)
224− explicitlyScaled = false
226− NumberAnimation {
259+ NumberAnimation {
227− duration: explicitScaleFactor === 1.0 ? 250 : 150
260+ duration: explicitScaleFactor === 1.0 ? 250 : 150
228− easing.type: Easing.InOutQuad
261+ easing.type: Easing.InOutQuad
231− script: if (explicitScale)
232− explicitlyScaled = true
237− onLoaded: {
264+ script: if (explicitScale)
238− item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
265+ explicitlyScaled = true
239− item.model = Qt.binding(function() { return model; })
242− MouseArea {
270+ onLoaded: {
243− id: mouseArea
271+ item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
272+ item.model = Qt.binding(function() { return model; })
245− anchors.fill: parent
275+ MouseArea {
278+ anchors.fill: parent
247− onClicked: flickable.itemClicked(index, item)
280+ onClicked: listView.itemClicked(index, item)