ScreenPlay/Content/widget_xkcd/main.qml

// SPDX-License-Identifier: BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Effects
import QtQuick.Particles

Item {
    id: root
    state: "normal"
    implicitWidth: defaultWidth
    implicitHeight: defaultHeight
    property int defaultWidth: 200
    property int defaultHeight: 200

    function request(url, callback) {
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = (function (myxhr) {
            return function () {
                if (myxhr.readyState === 4)
                    callback(myxhr)
            }
        })(xhr)
        xhr.open('GET', url)
        xhr.send('')
    }

    Component.onCompleted: {
        request("http://xkcd.com/info.0.json", function (o) {
            if (o.status === 200) {
                var d = eval('new Object(' + o.responseText + ')')
                console.log(o.responseText)
                img.source = d.img
            } else {
                console.log("Some error has occurred")
            }
        })
    }

    Image {
        id: img
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop
        property size imgSize: Qt.size(root.defaultWidth, defaultHeight)
        onStatusChanged: {
            if (img.status !== Image.Ready)
                return
            if (img.sourceSize.width === 0 || img.sourceSize.height === 0)
                return
            root.implicitWidth = img.sourceSize.width
            root.implicitHeight = img.sourceSize.height
            print(img.status, img.sourceSize.width, img.sourceSize.height)
            img.imgSize = Qt.size(img.sourceSize.width, img.sourceSize.height)
            print("img.size", img.imgSize)
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.state = root.state === "expanded" ? "normal" : "expanded"
            print(root.state, root.implicitHeight, root.implicitWidth)
        }
    }

    states: [
        State {
            PropertyChanges {
                name: "normal"
                root {
                    width: root.defaultWidth
                    height: root.defaultHeight
                    implicitWidth: root.defaultWidth
                    implicitHeight: root.defaultHeight
                }
            }
        },
        State {
            name: "expanded"
            PropertyChanges {
                root {
                    width: img.imgSize.width
                    height: img.imgSize.height
                    implicitWidth: img.imgSize.width
                    implicitHeight: img.imgSize.height
                }
            }
        }
    ]
}