tests/manual/delegatemodel/slideshow.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

// Copyright (C) 2018 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only

import QtQuick
import QtQml.Models
import shared as Shared

pragma ComponentBehavior: Bound

Rectangle {
    id: root

    property Item displayItem: null

    width: 300
    height: 400

    color: "black"

    Shared.FlickrRssModel {
        id: flickrModel
        tags: "fjords,mountains"
    }
    DelegateModel {
        id: visualModel

        model: flickrModel
        delegate: Item {
            id: delegateItem

            width: 76
            height: 76

            required property string thumbnail

            Rectangle {
                id: image
                x: 0
                y: 0
                width: 76
                height: 76
                border.width: 1
                border.color: "white"
                color: "black"

                Image {
                    anchors.fill: parent
                    anchors.leftMargin: 1
                    anchors.topMargin: 1

                    source: delegateItem.thumbnail
                    fillMode: Image.PreserveAspectFit
                }

                MouseArea {
                    id: clickArea
                    anchors.fill: parent

                    onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null
                }

                states: [
                    State {
                        when: root.displayItem === delegateItem
                        name: "inDisplay";
                        ParentChange {
                            target: image
                            parent: imageContainer
                            x: 75
                            y: 75
                            width: 150
                            height: 150
                        }
                        PropertyChanges {
                            image.z: 2
                            delegateItem.DelegateModel.inItems: false
                        }
                    },
                    State {
                        when: root.displayItem !== delegateItem
                        name: "inList";
                        ParentChange {
                            target: image
                            parent: delegateItem
                            x: 2
                            y: 2
                            width: 75
                            height: 75
                        }
                        PropertyChanges {
                            image.z: 1
                            delegateItem.DelegateModel.inItems: true
                        }
                    }
                ]

                transitions: [
                    Transition {
                        from: "inList"
                        SequentialAnimation {
                            PropertyAction {
                                target: delegateItem
                                property: "DelegateModel.inPersistedItems"
                                value: true
                            }
                            ParentAnimation {
                                target: image;
                                via: root
                                NumberAnimation {
                                    target: image
                                    properties: "x,y,width,height"
                                    duration: 1000
                                }
                            }
                        }
                    }, Transition {
                        from: "inDisplay"
                        SequentialAnimation {
                            ParentAnimation {
                                target: image
                                NumberAnimation {
                                    target: image
                                    properties: "x,y,width,height"
                                    duration: 1000
                                }
                            }
                            PropertyAction {
                                target: delegateItem
                                property: "DelegateModel.inPersistedItems"
                                value: false
                            }
                        }
                    }
                ]
            }
        }
    }


    PathView {
        id: imagePath

        anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom }
        model: visualModel

        pathItemCount: 7
        path: Path {
            startX: -50; startY: 0
            PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 }
            PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 }
        }
    }

    Item {
        id: imageContainer
        anchors { fill: parent; bottomMargin: 100 }
    }
}