summaryrefslogtreecommitdiffstats
path: root/examples/declarative/snow/ImageBatch.qml
blob: 62f986cd25127f8608c84205027ed8ce1c2c8ba1 (plain)
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
import Qt 4.6

GridView {
    id: grid
    property int offset: 0
    property var ref
    property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5

    currentIndex: (ref.selectedItemColumn  - offset) + ref.selectedItemRow * 5

    property int imageWidth: ref.imageWidth
    property int imageHeight: ref.imageHeight

    width: 5 * imageWidth
    height: 4 * imageHeight
    cellWidth: imageWidth
    cellHeight: imageHeight

    states: State {
        name: "selected"; when: grid.isSelected
        PropertyChanges { target: grid; z: 150 }
    }
    transitions: Transition {
        SequentialAnimation {
            PauseAnimation { duration: 150 }
            PropertyAction { properties: "z" }
        }
    }
    model: XmlListModel {
        property string tags : ""
        source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
        query: "/rss/channel/item"
        namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"

        XmlRole { name: "url"; query: "media:content/@url/string()" }
    }

    Item {
        id: root
        property bool isSelected: GridView.isCurrentItem && grid.isSelected
        transformOrigin: "Center"
        width: grid.imageWidth; height: grid.imageHeight;

        Image { id: flickrImage; source: url; fillMode: "PreserveAspectFit"; smooth: true; anchors.fill: parent;
                opacity: (status == 1)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } }
        Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 }

        states: State {
            name: "selected"
            when: root.isSelected
            PropertyChanges { target: root; scale: 3; z: 100 }
        }
        transitions: [
            Transition {
                to: "selected"
                SequentialAnimation {
                    PauseAnimation { duration: 150 }
                    PropertyAction { properties: "z" }
                    NumberAnimation { properties: "scale"; duration: 150; }
                }
            },
            Transition {
                from: "selected"
                SequentialAnimation {
                    NumberAnimation { properties: "scale"; duration: 150 }
                    PropertyAction { properties: "z" }
                }
            }
        ]
    }
}