tinderWannaBe.json

{
    "type": "APL",
    "version": "1.4",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "TouchWrapper",
                "item": {
                    "type": "Container",
                    "width": "100vw",
                    "height": "100vh",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "items": [
                        {
                            "type": "Image",
                            "source": "https://source.unsplash.com/LKIyzJ7GKuE/480x640",
                            "width": "50vw",
                            "height": "100vh"
                        }
                    ]
                },
                "gestures": [
                    {
                        "type": "SwipeAway",
                        "direction": "left",
                        "items": {
                            "type": "Frame",
                            "backgroundColor": "red",
                            "items": {
                                "componentId": "MyCross",
                                "type": "Text",
                                "text": "✖",
                                "fontSize": 60,
                                "color": "white",
                                "width": 60,
                                "height": "100%",
                                "textAlign": "left",
                                "textAlignVertical": "center"
                            }
                        },
                        "onSwipeMove": [
                            {
                                "type": "SetValue",
                                "componentId": "MyCross",
                                "property": "transformX",
                                "value": "${event.position * event.source.width < event.target.width || event.position > 0.5 ? 0 : event.position * event.source.width - event.target.width}"
                            }
                        ],
                        "onSwipeDone": [
                            {
                                "type": "SendEvent",
                                "arguments": "yep"
                            }
                        ]
                    },
                    {
                        "type": "SwipeAway",
                        "direction": "right",
                        "items": {
                            "type": "Frame",
                            "backgroundColor": "green",
                            "items": {
                                "componentId": "MyCheck",
                                "type": "Text",
                                "text": "✔",
                                "fontSize": 60,
                                "color": "white",
                                "width": 60,
                                "height": "100%",
                                "textAlign": "right",
                                "textAlignVertical": "center"
                            }
                        },
                        "onSwipeMove": [
                            {
                                "type": "SetValue",
                                "componentId": "MyCheck",
                                "property": "transformX",
                                "value": "${event.position * event.source.width < event.target.width || event.position > 0.5 ? 0 : event.position * event.source.width - event.target.width}"
                            }
                        ],
                        "onSwipeDone": [
                            {
                                "type": "SendEvent",
                                "arguments": "nope"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}