MauiKit Controls

GalleryRollTemplate.qml
1import QtQuick
2import QtQuick.Controls
3
4import org.mauikit.controls as Maui
5import QtQuick.Effects
6
7/**
8 * @inherit ShadowedRectangle
9 * @brief A template control to display images in a carousel form. This element is use with the GalleryRollItem to display the images, so consider using that control instead of this one.
10 *
11 * This control inherits all properties from the MauiKit ShadowedRectangle control. Thus, the corners radius can be modified individually, and a drop shadow can be added, using the `corners` and `shadow` properties respectively.
12 *
13 * The transition of the images can be set as vertical or horizontal using the `orientation` property, and the transition time is picked randomly.
14 * @see orientation
15 *
16 * @note If not images are set, then the area is filled with a solid color block. This color can be changed using the `color` property.
17 */
18Maui.ShadowedRectangle
19{
20 id: control
21
22 color: "#333"
24 /**
25 * @brief Whether the images in the carousel can be flicked with touch gestures.
26 * @property bool GalleryRollTemplate::interactive
27 */
28 property alias interactive : _featuredRoll.interactive
29
30 /**
31 * @brief The orientation of the transition of the images.
32 * By default this is set to `ListView.Horizontal`.
33 * The possible values are:
34 * - ListView.Horizontal
35 * - ListView.Vertical
36 * @property enum GalleryRollTemplate::orientation.
37 */
38 property alias orientation : _featuredRoll.orientation
39
40 /**
41 * @brief Whether the images should be saved in cache memory to save loading time.
42 * By default this is set to `true`.
43 */
44 property bool cache : !Maui.Handy.isMobile
45
46 /**
47 * @brief A callback function to manage what image is positioned. This callback function is called for each image source set in the model `images`, so the final source can be modified. This function should return a - new or modified - image source URL.
48 *
49 * As an example, if the `images` model looks like: `["page1", "page2", "page3"]` - which are not file URLs, this callback function can be use to map each individual source to an actual file URL.
50 * @code
51 * images: ["page1", "page2", "page3"]
52 * cb : (source) =>
53 * {
54 * return mapSourceToImageFile(source) //here the "page1" could be mapped to "file:///some/path/to/image1.jpg" and return this new source to be use.
55 * }
56 * @endcode
57 */
58 property var cb
59
60 /**
61 * @brief A list of images to be used. This will be use as the model.
62 */
63 property var images : []
64
65 /**
66 * @brief The border radius of the images.
67 * By default this is set to `0`.
68 */
69 radius : 0
70
71 /**
72 * @brief The fill mode of the images. To see possible values refer to the QQC2 Image documentation form Qt.
73 * By default this is set to `Image.PreserveAspectCrop`.
74 */
75 property int fillMode: Image.PreserveAspectCrop
76
77 /**
78 * @brief Checks and sets whether the transition animation is running or not.
79 * @property bool GalleryRollTemplate::running
80 */
81 property alias running: _featuredTimer.running
82
83 /**
84 * @brief Sets the painted width size of the image.
85 * @note If the image has a big resolution it will take longer to load, so make it faster set this property to a lower value.
86 *
87 * By default this is set to `-1`, which means that the image will be painted using the full image resolution.
88 * This is the same as setting the QQC2 Image `sourceSize.width` property.
89 */
90 property int imageWidth : -1
91
92 /**
93 * @brief Sets the painted height size of the image.
94 * @note If the image has a big resolution it will take longer to load, so make it faster set this property to a lower value.
95 *
96 * By default this is set to `-1`, which means that the image will be painted using the full image resolution.
97 * This is the same as setting the QQC2 Image `sourceSize.height` property.
98 */
99 property int imageHeight : -1
100
101 corners
102 {
103 topLeftRadius: control.radius
104 topRightRadius: control.radius
105 bottomLeftRadius: control.radius
106 bottomRightRadius: control.radius
107 }
108
109 ListView
110 {
111 id: _featuredRoll
112 anchors.fill: parent
113
114 interactive: false
115 orientation: Qt.Horizontal
116 snapMode: ListView.SnapOneItem
117 clip: true
118
119 boundsBehavior: Flickable.StopAtBounds
120 boundsMovement: Flickable.StopAtBounds
121
122 model: control.images
123
124 Component.onCompleted: _featuredTimer.start()
125
126 Timer
127 {
128 id: _featuredTimer
129 interval: _featuredRoll.randomInteger(6000, 8000)
130 repeat: true
131 onTriggered: _featuredRoll.cycleSlideForward()
132 }
133
134 function cycleSlideForward()
135 {
136 if(_featuredRoll.dragging)
137 {
138 return
139 }
140
141 if (_featuredRoll.currentIndex === _featuredRoll.count - 1)
142 {
143 _featuredRoll.currentIndex = 0
144 } else
145 {
146 _featuredRoll.incrementCurrentIndex()
147 }
148 _featuredTimer.restart()
149 }
150
151 function cycleSlideBackward()
152 {
153 if(_featuredRoll.dragging)
154 {
155 return
156 }
157
158 if (_featuredRoll.currentIndex === 0)
159 {
160 _featuredRoll.currentIndex = _featuredRoll.count - 1;
161 } else
162 {
163 _featuredRoll.decrementCurrentIndex();
164 }
165
166 _featuredTimer.restart()
167 }
168
169 function randomInteger(min, max)
170 {
171 return Math.floor(Math.random() * (max - min + 1)) + min;
172 }
173
174 delegate: Item
175 {
176 width: ListView.view.width
177 height: ListView.view.height
178
179 Image
180 {
181 anchors.fill: parent
182 sourceSize.width: (control.imageWidth > -1 ? control.imageWidth : control.width) * 1.5
183 sourceSize.height: (control.imageHeight > -1 ? control.imageHeight : control.height) * 1.5
184 asynchronous: true
185 smooth: !Maui.Handy.isMobile
186 cache: control.cache
187 source: control.cb ? control.cb(modelData) : modelData
188 fillMode: control.fillMode
189 }
190
191 Behavior on height
192 {
193 NumberAnimation
194 {
195 duration: Maui.Style.units.shortDuration
196 easing.type: Easing.InOutQuad
197 }
198 }
199 }
200
201 layer.enabled: control.radius > 0
202 layer.effect: MultiEffect
203 {
204 maskEnabled: true
205 maskThresholdMin: 0.5
206 maskSpreadAtMin: 1.0
207 maskSpreadAtMax: 0.0
208 maskThresholdMax: 1.0
209 maskSource: ShaderEffectSource
210 {
211 sourceItem: Maui.ShadowedRectangle
212 {
213 width: control.width
214 height: control.height
215
216 corners
217 {
218 topLeftRadius: control.corners.topLeftRadius
219 topRightRadius: control.corners.topRightRadius
220 bottomLeftRadius: control.corners.bottomLeftRadius
221 bottomRightRadius: control.corners.bottomRightRadius
222 }
223 }
224 }
225 }
226 }
227}
The Handy class.
Definition handy.h:41
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 8 2024 11:48:43 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.