100 lines
2.3 KiB
Plaintext
100 lines
2.3 KiB
Plaintext
package site
|
|
|
|
import (
|
|
"fmt"
|
|
datastar "github.com/starfederation/datastar/sdk/go"
|
|
)
|
|
|
|
type AnimationsRestoreSignals struct {
|
|
ShouldRestore bool `json:"shouldRestore"`
|
|
}
|
|
|
|
templ animationsViewTransition(signals *AnimationsRestoreSignals) {
|
|
<div
|
|
id="view_transition"
|
|
data-signals={ templ.JSONString(signals) }
|
|
class="slide-it"
|
|
>
|
|
<button
|
|
class="btn btn-primary btn-lg"
|
|
data-on-click={ datastar.GetSSE("/examples/animations/data/view_transition") }
|
|
>
|
|
if signals.ShouldRestore {
|
|
@icon("material-symbols:arrow-left")
|
|
Restore It!
|
|
} else {
|
|
@icon("material-symbols:arrow-right")
|
|
"Swap It!"
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
templ animationsFadeOutSwap(shouldHide bool) {
|
|
<button
|
|
id="fade_out_swap"
|
|
class={
|
|
"btn btn-error",
|
|
templ.KV("transition-all duration-1000 opacity-0", shouldHide),
|
|
}
|
|
data-on-click="@delete('/examples/animations/data')"
|
|
>
|
|
@icon("material-symbols:delete")
|
|
Fade out then delete on click
|
|
</button>
|
|
}
|
|
|
|
templ animationsFadeMeIn(shouldBeShown bool) {
|
|
<button
|
|
id="fade_me_in"
|
|
class={ "btn btn-success",
|
|
templ.KV("transition-all duration-1000", shouldBeShown),
|
|
templ.KV("opacity-0", !shouldBeShown) }
|
|
data-on-click={ datastar.GetSSE("/examples/animations/data/fade_me_in") }
|
|
>
|
|
@icon("material-symbols:add")
|
|
Fade me in on click
|
|
</button>
|
|
}
|
|
|
|
type AnimationsColor struct {
|
|
Label string `json:"label"`
|
|
Value int `json:"value"`
|
|
}
|
|
|
|
templ animationsColorThrob(fg, bg AnimationsColor) {
|
|
{{ styl := fmt.Sprintf("color: #%x; background-color: #%x", fg.Value, bg.Value) }}
|
|
<div
|
|
id="color_throb"
|
|
class="p-4 text-2xl font-bold text-center uppercase transition-all duration-1000 rounded-box"
|
|
{ templ.Attributes{"style": styl}... }
|
|
>
|
|
{ fg.Label } on { bg.Label }
|
|
</div>
|
|
}
|
|
|
|
templ animationsRequestInFlight() {
|
|
<div id="request_in_flight" class="flex flex-col gap-4" data-signals-fetching>
|
|
<div class="form-control">
|
|
<label class="label label-text">Name</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
class="flex-1 input input-primary"
|
|
/>
|
|
@sseIndicator("fetching")
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="submit_request_in_flight"
|
|
class="btn btn-success"
|
|
data-on-click={ datastar.PostSSE("/examples/animations/data/request_in_flight") }
|
|
data-indicator-fetching
|
|
>
|
|
@icon("material-symbols:person-add")
|
|
Submit
|
|
</button>
|
|
</div>
|
|
}
|