45
45
property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
46
46
/// The selected item can be shown in a different size controlled by selectedItemScaleFactor
47
47
property real selectedItemScaleFactor: 1.1
48
/// The index of the item that should be highlighted
49
property alias highlightIndex: listView.highlightIndex
50
/// exposes the delegate of the currentItem
51
readonly property alias currentItem: listView.currentItem
52
/// exposes the distance to the next row (only one row in carousel, so it's the topMargins
53
readonly property alias verticalSpacing: listView.verticalMargin
49
55
/// Emitted when the user clicked on an item
50
56
/// @param index is the index of the clicked item
51
/// @param delegateItem is the clicked component/delegate itself
57
/// @param model is the model of all the items in the carousel
52
58
/// @param itemY is y of the clicked delegate
53
signal clicked(int index, var delegateItem, real itemY)
59
signal clicked(int index, var model, real itemY)
55
61
/// Emitted when the user pressed and held on an item
56
62
/// @param index is the index of the held item
57
/// @param delegateItem is the held component/delegate itself
63
/// @param model is the model of all the items in the carousel
58
64
/// @param itemY is y of the held delegate
59
signal pressAndHold(int index, var delegateItem, real itemY)
65
signal pressAndHold(int index, var model, real itemY)
61
67
implicitHeight: listView.tileHeight * selectedItemScaleFactor
75
81
property real newContentX: disabledNewContentX
76
82
property real pathItemCount: referenceWidth / referenceTileWidth
77
83
property real tileAspectRatio: 1
84
property int highlightIndex: -1
79
86
/* The positioning and scaling of the items in the carousel is based on the variable
80
87
'continuousIndex', a continuous real variable between [0, 'carousel.model.count'],
143
150
orientation: ListView.Horizontal
145
152
function itemClicked(index, delegateItem) {
153
listView.currentIndex = index
146
154
var x = CarouselJS.getXFromContinuousIndex(index,
148
156
realContentWidth,
152
160
carousel.drawBuffer)
154
if (Math.abs(x - contentX) < 1) {
162
if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
155
163
/* We're clicking the selected item and
156
164
we're in the neighbourhood of radius 1 pixel from it.
157
165
Let's emit the clicked signal. */
158
carousel.clicked(index, delegateItem, delegateItem.y)
166
carousel.clicked(index, listView.model, delegateItem.y)
176
184
carousel.drawBuffer);
178
if (Math.abs(x - contentX) < 1) {
186
if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
179
187
/* We're pressAndHold the selected item and
180
188
we're in the neighbourhood of radius 1 pixel from it.
181
189
Let's emit the pressAndHold signal. */
182
carousel.pressAndHold(index, delegateItem, delegateItem.y);
190
carousel.pressAndHold(index, listView.model, delegateItem.y);
190
198
newContentXAnimation.start();
201
onHighlightIndexChanged: {
202
if (highlightIndex != -1) {
203
itemClicked(highlightIndex)
193
207
onMovementStarted: {
194
208
stepAnimation.stop()
195
209
newContentXAnimation.stop()
273
287
itemTranslationScale,
274
288
listView.maximumItemTranslation)
290
readonly property real xTransform: listView.viewTranslation + translationX * listView.scaleFactor
291
readonly property real center: x - listView.contentX + xTransform - drawBuffer + (width/2)
276
293
width: listView.tileWidth
277
294
height: listView.tileHeight
278
295
scale: itemScale * explicitScaleFactor
279
296
sourceComponent: itemComponent
280
297
z: cachedTiles - Math.abs(index - listView.selectedIndex)
298
opacity: highlightIndex == -1 ? 1 : (highlightIndex == index ? 0.6 : 0.2)
282
300
transform: Translate {
283
x: listView.viewTranslation + translationX * listView.scaleFactor
286
304
Behavior on explicitScaleFactor {
added
removed
Components/Carousel.qml
