Puts a modal on screen with visibility toggling through either a hidden checkbox input next to the modal or using the $show wind function.
Differnt types of modals are just positions applied to whatever container the modal content is put inside.
Positions in the center of the screen.
Position at the top, centered horizontally.
Menu drawer that sits on the left side of the screen.
Actions drawer that sits on the right side of the screen.
The --anim-time variable can be set on a modal (or its child) to control how
fast it animates in/out. Default value is 200ms.
<ws-grid ws-x="[gr.cols repeat(4, 1fr)]">
<label ws-x="@@button [$outline] [$color @secondary]" for="menu">
Menu
</label>
<label ws-x="@@button [$outline] [$color @secondary]" for="action">
Action
</label>
<label ws-x="@@button [$outline] [$color @secondary]" for="select">
Select
</label>
<label ws-x="@@button [$outline] [$color @secondary]" for="dialog">
Dialog
</label>
<button ws-x="[$outline] [$color @primary]">
Scripted
</button>
</ws-grid>
<input type="checkbox" ws-x="[hide]" id="menu" />
<ws-modal>
<ws-paper ws-x="[r 0px] @@menu [w 200px]">
<ws-flex ws-x="[$content]">
<label ws-x="@@button [$outline] [$color @accent]" for="menu">
Close
</label>
<span>
This uses a paper for the content of the menu drawer and a set width
</span>
</ws-flex>
</ws-paper>
</ws-modal>
<input type="checkbox" ws-x="[hide]" id="action" />
<ws-modal>
<ws-paper ws-x="[r 0px] @@action">
<ws-flex ws-x="[$content]">
<label ws-x="@@button [$outline] [$color @accent]" for="action">
Close
</label>
<span>
Action drawer + paper container, expands with content
</span>
</ws-flex>
</ws-paper>
</ws-modal>
<input type="checkbox" ws-x="[hide]" id="select" />
<ws-modal>
<label for="select"></label>
<div ws-x="@@select [r 8px] [b 1px solid @primary] [c teal] [bg.c black]">
<ws-flex>
<label ws-x="@@button [$outline] [$color @accent]" for="select">
Close
</label>
<span>
This just uses a div for the content with a bit of styling
<br />
And you can close it by clicking the empty space around it
</span>
</ws-flex>
</div>
</ws-modal>
<input type="checkbox" ws-x="[hide]" id="dialog" />
<ws-modal ws-x="[@anim-time 100ms]">
<ws-paper ws-x="@@dialog">
<ws-titlebar ws-x="[$header]">
<span ws-x="[$title] [$title-text]">Dialog Example</span>
</ws-titlebar>
<ws-flex ws-x="[$content]">
<span>
This one is set to animate faster
</span>
</ws-flex>
<label ws-x="@@button [$footer] [$flat] [$color @accent]" for="dialog">
Close
</label>
</ws-paper>
</ws-modal>
<ws-modal data-code>
<ws-paper ws-x="[r 0px] @@menu [w 200px]">
<ws-flex ws-x="[$content]">
<button ws-x="[$outline] [$color @accent]">
Close
</button>
<span>
This one uses a bit of js (more like how a framework might do it)
</span>
</ws-flex>
</ws-paper>
</ws-modal>
<script>
const root = currentScript.parentNode
const modal = root.querySelector("ws-modal[data-code]")
const props = {
$show: false
}
const toggle = () => {
props.$show = props.$show === false
modal.setAttribute("ws-x", ws.x(props))
}
root.querySelector("button").addEventListener("click", toggle)
modal.querySelector("button").addEventListener("click", toggle)
</script>