Skip to content

Instantly share code, notes, and snippets.

@gdotdesign
Created July 28, 2018 11:25
Show Gist options
  • Save gdotdesign/fcbbc1877f92295b76ec5d9acb88e958 to your computer and use it in GitHub Desktop.
Save gdotdesign/fcbbc1877f92295b76ec5d9acb88e958 to your computer and use it in GitHub Desktop.
State in 0.2
store Store {
state counter : Number = 0
fun increment : Void {
next { counter = counter + 1 }
}
fun decrement : Void {
next { counter = counter - 1 }
}
}
component Main {
connect Store exposing { increment, decrement, counter }
property disabled : Bool = false
style base {
background: {background};
border-radius: 5px;
transition: 320ms;
display: flex;
padding: 20px;
margin: 20px;
}
style counter {
font-family: sans;
font-size: 20px;
padding: 0 20px;
}
get background : String {
if (counter >= 10) {
"lightgreen"
} else {
if (counter < 0) {
"orangered"
} else {
"#F2F2F2"
}
}
}
fun render : Html {
<div::base>
<button
onClick={\event : Html.Event => decrement()}
disabled={disabled}>
<{ "Decrement" }>
</button>
<span::counter>
<{ Number.toString(counter) }>
</span>
<button
onClick={\event : Html.Event => increment()}
disabled={disabled}>
<{ "Increment" }>
</button>
</div>
}
}
record Position {
left : Number,
top : Number
}
component Main {
state mousePosition : Position =
{
left = 0,
top = 0
}
state startPosition : Position =
{
left = 0,
top = 0
}
state position : Position =
{
left = 0,
top = 0
}
state dragging : Position = false
use Provider.Mouse {
moves = \data : Html.Event => move(data),
clicks = \data : Html.Event => void,
ups = \data : Html.Event => end()
} when {
dragging
}
fun move (data : Html.Event) : Void {
if (dragging) {
next {
position =
{
left = startPosition.left - diff.left,
top = startPosition.top - diff.top
}
}
} else {
void
}
} where {
diff =
{
left = mousePosition.left - data.pageX,
top = mousePosition.top - data.pageY
}
}
fun end : Void {
next { dragging = false }
}
fun start (event : Html.Event) : Void {
do {
Html.Event.preventDefault(event)
next
{ mousePosition = mousePosition,
startPosition = startPosition,
dragging = true
}
}
} where {
mousePosition =
{
left = event.pageX,
top = event.pageY
}
startPosition =
{
left = position.left,
top = position.top
}
}
style base {
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 100%;
}
style rect {
transform: translate3d({position.left}px,{position.top}px, 0);
justify-content: center;
background: orangered;
align-items: center;
border-radius: 10px;
position: absolute;
font-family: sans;
display: flex;
height: 100px;
width: 100px;
cursor: move;
color: white;
z-index: 10;
}
fun render : Html {
<div::base>
<div::rect onMouseDown={\event : Html.Event => start(event)}>
<{ "DragMe" }>
</div>
</div>
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment