form-subscribe
Version:
A custom element to listen to events that aren't in the hierarchy of bubbling.
222 lines (205 loc) • 6.79 kB
HTML
<html lang="en">
<head>
<title>Form Subscribe Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
form {
border: 1px solid black;
margin: 0.25em;
padding: 0.25em;
}
</style>
<body>
<h1>Form Subscribe Demo</h1>
<h2>Subscribe Events</h2>
<form
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'first' }"
data-action='this._x ??= 0; this._x++; $("#t-1").html(`Hello from First ${this._x} times!`)'
>
<span id=t-1>Waiting for you to click "First"</span>
<details> <summary>Explanation</summary>
<p>This updates when any form emits the event "submit". It then
then runs the action data attribute. It guards against all form
submissions with the match condition.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'first' }"
data-action='this._x ??= 0; this._x++; $("#t-1").html(`Hello from First ${this._x} times!`)'
</pre>
</details>
</form>
<form
is=form-subscribe
data-event="click"
data-target-el="#second"
data-call='myApp.second'
>
<span id="t-2">Waiting for you to click "Second"</span><br>
<details> <summary>Explanation</summary>
<p>This updates when the element "#second" is clicked. It then
then runs the call data attribute function location on the
window.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="click"
data-target-el="#second"
data-call='myApp.second'
</pre>
</details>
</form>
<form
is=form-subscribe
data-event="input"
data-target-el="#third"
data-action="$('#t-3').html(`<span>${event.target.value}</span>`)"
data-debounce=500
>
<span id=t-3>Waiting for you to update "Third"</span><br>
<details>
<summary>Explanation</summary>
<p>This updates when the Third input emits the event "input". It
debounces by 500 ms. It then runs the action data attribute.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="input"
data-target-el="#third"
data-action="$('#t-3').html(`<span>${event.target.value}</span>`)"
data-debounce=500
</pre>
</details>
</form>
<form
is=form-subscribe
data-event="submit"
data-match-not="submitter: { id: 'fourth' }"
data-call='myApp.fourth'
>
<span id=t-4>Waiting for you to anything but "Fourth"</span>
<details>
<summary>Explanation</summary>
<p>This updates when any form emits the event "submit". It then
then runs the call data attribute function location on then
window. It guards against the fourth button with the not match
condition.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="submit"
data-match-not="submitter: { id: 'fourth' }"
data-call='myApp.fourth'
</pre>
</details>
</form>
<form
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'fifth' }"
data-call='myApp.fifth'
data-debounce=1e3
>
<span id=t-5>Waiting for you to click "Fifth"</span>
<details>
<summary>Explanation</summary>
<p>This updates when any form emits the event "submit". It then
then runs the call data attribute function location on then
window. It guards against the fifth button with the data-match
condition. It debounces by 1 second.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'fifth' }"
data-call='myApp.fifth'
data-debounce=1e3
</pre>
</details>
</form>
<form
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'sixth' }"
onsubmit="
event.preventDefault();
this._x ??= 0;
this._x++;
$('#t-6').html(`Hello from Sixth ${this._x} times this form has been submitted!`)"
>
<span id=t-6>When "Sixth" is clicked this form is submitted.</span>
<details>
<summary>Explanation</summary>
<p>This updates when any form emits the event "submit". It is submitted
by the custom element. The submission is caught by the onsubmit handler.
It only runs when the button with the ID 'sixth' is matched.</p>
<strong>Code</strong>
<pre>
is=form-subscribe
data-event="submit"
data-match="submitter: { id: 'sixth' }"
onsubmit="
event.preventDefault();
this._x ??= 0;
this._x++;
$('#t-6').html(`Hello from Sixth ${this._x} times this form has been submitted!`)"
</pre>
</details>
</form>
<h2>Create Events</h2>
<form id=create-events onsubmit="event.preventDefault()">
<button id=first>First</button>
<button id=second>Second</button>
<input id=third value="Third">
<button id=fourth>Fourth</button>
<button id=fifth>Fifth</button>
<button id=sixth>Sixth</button>
</form>
<script src="./index.js"></script>
<script>
window.myApp = {
second: function() {
this._x ??= 0;
this._x++;
$("#t-2").html(`Hello from Second ${this._x} times!`);
},
fourth: function(e) {
this._x ??= 0;
this._x++;
$("#t-4").html(
`Hello from ${e.submitter.innerText}!
Number of events caught ${this._x} other than Fourth.`
);
},
fifth: function(e) {
this._x ??= 0;
this._x++;
this.innerHTML = `
<span>This will only be updated once every second. As it is
debounced.</span><br>
<span>Hello from Fifth ${this._x} times!</span>`;
},
};
</script>
<script>
class CustomQuery {
constructor(el) {
this.el = el;
}
html(html) {
this.el.innerHTML = html;
}
}
window.$ = function(query) {
var el = document.querySelector(query);
return new CustomQuery(el);
}
</script>
</body>
</html>