fix(runtime): support native user interactions
req: examples/005 req: form/002 req: convention/004 req: dx/008
This commit is contained in:
+21
-5
@@ -20,6 +20,21 @@
|
||||
return node && node.closest ? node.closest(`[${ROOT}]`) : null;
|
||||
}
|
||||
|
||||
function formOwner(el) {
|
||||
if (!el || el.tagName === "FORM") return el;
|
||||
if (el.getAttribute && el.getAttribute("form")) return document.getElementById(el.getAttribute("form"));
|
||||
const closest = el.closest ? el.closest("form") : null;
|
||||
if (closest) return closest;
|
||||
const root = rootOf(el);
|
||||
return root && root.querySelector("form[data-slhx-form]");
|
||||
}
|
||||
|
||||
function formHandleId(form) {
|
||||
if (!form) return null;
|
||||
const raw = form.getAttribute(HID) || (form.querySelector(`[${HID}]`) && form.querySelector(`[${HID}]`).getAttribute(HID));
|
||||
return raw && /^\d+$/.test(raw) ? raw : null;
|
||||
}
|
||||
|
||||
function closestInRoot(start, root, selector) {
|
||||
for (let node = start; node && node !== root.parentNode; node = node.parentNode) {
|
||||
if (node.matches && node.matches(selector)) return node;
|
||||
@@ -53,9 +68,9 @@
|
||||
}
|
||||
|
||||
function formDataFor(el, eventName) {
|
||||
const form = el.tagName === "FORM" ? el : el.closest("form");
|
||||
const form = formOwner(el);
|
||||
const data = form ? new FormData(form) : new FormData();
|
||||
const id = handleId(el) || (form && handleId(form));
|
||||
const id = handleId(el) || formHandleId(form);
|
||||
if (id && !data.has("__h")) data.set("__h", id);
|
||||
const dragKey = eventName === "drop" && dragKeys.get(rootOf(el));
|
||||
if (dragKey && !data.has("work_id")) data.set("work_id", dragKey);
|
||||
@@ -420,15 +435,16 @@
|
||||
}
|
||||
if (name === "click") {
|
||||
const submitter = closestInRoot(event.target, root, "button[type=submit], input[type=submit], button:not([type])");
|
||||
const form = submitter && submitter.closest("form");
|
||||
if (form && root.contains(form) && handleId(form)) {
|
||||
const form = formOwner(submitter);
|
||||
if (form && root.contains(form) && formHandleId(form)) {
|
||||
if (form.reportValidity && !form.reportValidity()) return;
|
||||
event.preventDefault();
|
||||
schedule(form, "submit");
|
||||
return;
|
||||
}
|
||||
}
|
||||
const el = closestInRoot(event.target, root, `[${HID}], [data-slhx-boost] form`);
|
||||
let el = closestInRoot(event.target, root, `[${HID}], [data-slhx-boost] form`);
|
||||
if (name === "submit" && !el && event.target && event.target.tagName === "FORM" && formHandleId(event.target)) el = event.target;
|
||||
if (!el || defaultEvent(el) !== name) return;
|
||||
event.preventDefault();
|
||||
schedule(el, name);
|
||||
|
||||
Reference in New Issue
Block a user