63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"nyooom/render": "https://cdn.jsdelivr.net/npm/nyooom/render.js",
|
|
"controller-registry": "./src/controller-registry.js"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="module">
|
|
// Import nyooom to easily generate HTML nodes
|
|
import {html} from "nyooom/render"
|
|
|
|
// The actual library
|
|
import controllers from "controller-registry"
|
|
|
|
// Define a basic word filter controller for input elements
|
|
controllers.define("filter", (element, detach) => {
|
|
element.addEventListener("input", event => {
|
|
if (element.value.toLowerCase() === "scunthorpe") {
|
|
element.value = ""
|
|
alert("Evil word detected, deleting input permanently!")
|
|
}
|
|
}, detach) // Alternatively: {signal: detach.signal}
|
|
})
|
|
|
|
// Define a more complex filter for form elements to enable or disable filters
|
|
controllers.define("optional-filter", async (element, detach) => {
|
|
const checkBox = html.div(html.label(
|
|
html.input({
|
|
type: "checkbox",
|
|
checked: true,
|
|
input: ({target: {checked}}) => {
|
|
element
|
|
.querySelectorAll("input:not([type='checkbox'])")
|
|
.forEach(input => controllers.list(input).toggle("filter", checked))
|
|
}
|
|
}),
|
|
html.span("Enable filter")
|
|
))
|
|
element.append(checkBox)
|
|
// Detach is a promise, so we can just pause the function until
|
|
// it's time for cleanup to happen
|
|
await detach
|
|
checkBox.remove()
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
[controller~="filter"] {
|
|
outline: 3px solid #82f6;
|
|
border-radius: .2em;
|
|
}
|
|
</style>
|
|
|
|
<form controller="optional-filter">
|
|
<div>
|
|
<label>
|
|
<span>Where are you from?</span>
|
|
<input controller="filter"></input>
|
|
</label>
|
|
</div>
|
|
</form>
|