Skip to content

Commit

Permalink
improved dropdown to support width expanding
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishubin
ishubin committed Nov 12, 2023
1 parent b5482bc commit 49a3725
Showing 1 changed file with 79 additions and 180 deletions.
259 changes: 79 additions & 180 deletions assets/templates/ui/dropdown.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,40 +53,68 @@
"id": "md7N8G-1U",
"event": "init",
"actions": [
{
"id": {"$-expr": "uid()"},
"element": "#carret",
"method": "rotate",
"on": true,
"args": {
"angle": -90,
"animate": false,
"duration": 1,
"movement": "bounce",
"inBackground": false
}
},
{
"id": {"$-expr": "uid()"},
"element": "self",
"method": "script",
"on": true,
"args": {
"script": "setVar('originalHeight', getHeight())",
"script": {"$-str": [
"btn = findChildItemByName('btn-dropdown')",
"setVar('expandedHeight', getHeight())",
"setVar('expandedWidth', getWidth())",
"setVar('collapsedHeight', btn.getHeight())",
"setVar('collapsedWidth', btn.getWidth())",
"setVar('collapsed', true)",
"btnOverlay = findChildItemByName('btn-overlay')",
"btnOverlay.setWidth(btn.getWidth())",
"btnOverlay.setHeight(btn.getHeight())",
"setWidth(btn.getWidth())",
"setHeight(btn.getHeight())"
] },
"animated": false
}
},
{
"id": {"$-expr": "uid()"},
"element": "self",
"method": "sizeHeight",
"element": "#btn-overlay",
"method": "show",
"on": true,
"args": {
"height": { "$-expr": "buttonHeight" },
"animate": false,
"duration": 1,
"animationType": "linear",
"inBackground": false
"animate": false
}
},
}
]
},
{
"event": "Toggle dropdown",
"id": {"$-expr": "uid()"},
"actions": [
{
"id": {"$-expr": "uid()"},
"element": "#carret",
"method": "rotate",
"element": "#root",
"method": "script",
"on": true,
"args": {
"angle": -90,
"animate": false,
"duration": 1,
"movement": "bounce",
"inBackground": false
"script": {"$-str":[
"collapsed = getVar('collapsed')",
"event = (if (collapsed) {'Expand'} else {'Collapse'})",
"sendEvent(event)"
]},
"animated": false
}
}
]
Expand All @@ -100,7 +128,11 @@
"method": "script",
"on": true,
"args": {
"script": "setVar('srcH', getHeight())",
"script": {"$-str":[
"setVar('collapsed', false)",
"setVar('srcH', getHeight())",
"setVar('srcW', getWidth())"
]},
"animated": false
}
},
Expand All @@ -110,37 +142,16 @@
"method": "script",
"on": true,
"args": {
"script": { "$-str": "setHeight(getVar('srcH', ${buttonHeight}) * (1 - t) + getVar('originalHeight', ${height}) * t)" },
"script": { "$-str": [
"setHeight(getVar('srcH') * (1 - t) + getVar('expandedHeight') * t)",
"setWidth(getVar('srcW') * (1 - t) + getVar('expandedWidth') * t)"
]},
"animated": true,
"duration": 1,
"transition": "bounce",
"inBackground": true
}
},
{
"id": {"$-expr": "uid()"},
"element": "#btn-hide-overlay",
"method": "show",
"on": true,
"args": {
"animated": false,
"animationDuration": 0.5,
"transition": "ease-out",
"inBackground": false
}
},
{
"id": {"$-expr": "uid()"},
"element": "#btn-show-overlay",
"method": "hide",
"on": true,
"args": {
"animated": false,
"animationDuration": 0.5,
"transition": "ease-out",
"inBackground": false
}
},
{
"id": {"$-expr": "uid()"},
"element": "#carret",
Expand All @@ -155,50 +166,43 @@
}
}
],
"id": "sIyB58vUV"
"id": {"$-expr": "uid()"}
},
{
"event": "Collapse",
"actions": [
{
"element": "#btn-hide-overlay",
"method": "hide",
"on": true,
"args": {
"animated": false,
"animationDuration": 0.5,
"transition": "ease-out",
"inBackground": false
},
"id": "ZuJGqvzBNE"
},
{
"id": "6A1KEITPf",
"element": "#btn-show-overlay",
"method": "show",
"id": {"$-expr": "uid()"},
"element": "#root",
"method": "script",
"on": true,
"args": {
"animated": false,
"animationDuration": 0.5,
"transition": "ease-out",
"inBackground": false
"script": {"$-str":[
"setVar('collapsed', true)",
"setVar('srcH', getHeight())",
"setVar('srcW', getWidth())"
]},
"animated": false
}
},
{
"id": {"$-expr": "uid()"},
"element": "#root",
"method": "sizeHeight",
"method": "script",
"on": true,
"args": {
"height": { "$-expr": "buttonHeight" },
"animate": true,
"script": { "$-str": [
"setHeight(getVar('srcH') * (1 - t) + getVar('collapsedHeight') * t)",
"setWidth(getVar('srcW') * (1 - t) + getVar('collapsedWidth') * t)"
]},
"animated": true,
"duration": 0.2,
"animationType": "ease-in",
"inBackground": false
},
"id": "LhcMb9JEXr"
"transition": "ease-in",
"inBackground": true
}
},
{
"id": "0sYLW2wUq",
"id": {"$-expr": "uid()"},
"element": "#carret",
"method": "rotate",
"on": true,
Expand All @@ -211,7 +215,7 @@
}
}
],
"id": "gnodIA2_N"
"id": {"$-expr": "uid()"}
}
]
},
Expand All @@ -220,7 +224,7 @@
"childItems": [
{
"id": "btn-dropdown",
"name": "btn-dropdown-open",
"name": "btn-dropdown",
"shapeProps": {
"cornerRadius": { "$-expr": "cornerRadius" },
"fill": {"$-expr": "buttonBackground" },
Expand Down Expand Up @@ -334,8 +338,8 @@
]
},
{
"id": "btn-hide-overlay",
"name": "btn-dropdown-hide-overlay",
"id": "btn-overlay",
"name": "btn-overlay",
"shapeProps": {
"cornerRadius": {"$-expr": "cornerRadius"},
"fill": {
Expand Down Expand Up @@ -422,112 +426,7 @@
"method": "sendEvent",
"on": true,
"args": {
"event": "Collapse"
}
}
]
}
]
},
"selfOpacity": 100,
"visible": false,
"tags": [],
"clip": false,
"effects": [],
"interactionMode": "tooltip",
"tooltipBackground": "rgba(230,230,230,1.0)",
"tooltipColor": "rgba(30,30,30,1.0)"
},
{
"id": "btn-show-overlay",
"name": "btn-dropdown-open-overlay",
"shapeProps": {
"cornerRadius": {"$-expr": "cornerRadius"},
"fill": {
"type": "solid",
"color": "rgba(236, 243, 160, 0)"
},
"strokeColor": "rgba(30,30,30,1.0)",
"strokeSize": 0,
"strokePattern": "solid"
},
"shape": "rect",
"cursor": "pointer",
"area": {
"x": 0,
"y": 0,
"w": {"$-expr": "width"},
"h": {"$-expr": "height"},
"r": 0,
"px": 0.5,
"py": 0.5,
"sx": 1,
"sy": 1
},
"opacity": 100,
"blendMode": "normal",
"description": "",
"links": [],
"textSlots": {
"body": {
"text": "",
"color": "rgba(0,0,0,1.0)",
"halign": "center",
"valign": "middle",
"fontSize": 14,
"whiteSpace": "normal",
"font": "Arial",
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"paddingBottom": 0
}
},
"behavior": {
"events": [
{
"event": "init",
"actions": [
{
"element": "self",
"method": "set",
"on": true,
"args": {
"field": "opacity",
"value": 0,
"animated": false,
"animationDuration": 0.2,
"transition": "ease-in-out",
"inBackground": true
},
"id": "uTi4EfkjGr"
},
{
"element": "self",
"method": "show",
"on": true,
"args": {
"animated": false,
"animationDuration": 0.5,
"transition": "ease-out",
"inBackground": false
},
"id": "rdFaxl3cM9"
}
],
"id": "jwPYzscNL"
},
{
"id": "2PoKVa_ss",
"event": "clicked",
"actions": [
{
"id": "pHHuRrEZx",
"element": "#root",
"method": "sendEvent",
"on": true,
"args": {
"event": "Expand"
"event": "Toggle dropdown"
}
}
]
Expand Down

0 comments on commit 49a3725

Please sign in to comment.