1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "theme.slint";
5
6export component Carousel inherits FocusScope {
7 in-out property <int> selected-index;
8 in property <length> spacing;
9 in property <length> itemWidth;
10 in property <int> count: 0;
11
12 callback move-right();
13 callback move-left();
14 callback move-focus-up();
15
16 move-right => {
17 root.selected-index = min(root.selected-index + 1, root.count - 1);
18 }
19
20 move-left => {
21 root.selected-index = max(root.selected-index - 1, 0);
22 }
23
24 private property <length> center-x: (root.width - Theme.size-big) / 2;
25 private property <duration> duration: Theme.duration-regular;
26
27 forward-focus: focus-scope;
28 height: Theme.size-big;
29
30 focus-scope:= FocusScope {
31 key-pressed(event) => {
32 if(event.text == Key.UpArrow) {
33 root.move-focus-up();
34 return accept;
35 }
36
37 if(event.text == Key.RightArrow) {
38 root.move-right();
39 return accept;
40 }
41
42 if(event.text == Key.LeftArrow) {
43 root.move-left();
44 return accept;
45 }
46
47 return accept;
48 }
49 }
50
51 TouchArea {
52 clicked => {
53 focus-scope.focus()
54 }
55
56 width: parent.width;
57 height: parent.height;
58 }
59
60 Rectangle {
61 clip: true;
62 background: transparent;
63
64 Flickable {
65 interactive: false;
66 viewport-x: root.center-x - root.selected-index * (root.itemWidth + root.spacing);
67
68 animate viewport-x { duration: root.duration; easing: ease-in; }
69
70 HorizontalLayout {
71 spacing <=> root.spacing;
72
73 @children
74 }
75 }
76 }
77}
78