From cd2f54731d2f4d1347be84bdf7d8565b5f274fef Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 12 Nov 2020 19:05:19 +1100 Subject: [PATCH] artifacts --- dist/dialog-polyfill.esm.js | 74 ++++++++++++++++++++++++++++--------- dist/dialog-polyfill.js | 74 ++++++++++++++++++++++++++++--------- 2 files changed, 114 insertions(+), 34 deletions(-) diff --git a/dist/dialog-polyfill.esm.js b/dist/dialog-polyfill.esm.js index a980649..471f55e 100644 --- a/dist/dialog-polyfill.esm.js +++ b/dist/dialog-polyfill.esm.js @@ -153,6 +153,32 @@ function isConnected(element) { return element.isConnected || document.body.contains(element); } +/** + * @param {!Event} event + */ +function findFormSubmitter(event) { + if (event.submitter) { + return event.submitter; + } + + var form = event.target; + if (!(form instanceof HTMLFormElement)) { + return null; + } + + var submitter = dialogPolyfill.formSubmitter; + if (!submitter) { + var target = event.target; + var root = ('getRootNode' in target && target.getRootNode() || document); + submitter = root.activeElement; + } + + if (submitter.form !== form) { + return null; + } + return submitter; +} + /** * @param {!Event} event */ @@ -161,32 +187,28 @@ function maybeHandleSubmit(event) { return; } var form = /** @type {!HTMLFormElement} */ (event.target); - if (!isFormMethodDialog(form)) { - return; - } - event.preventDefault(); // We'd have a value if we clicked on an imagemap. var value = dialogPolyfill.useValue; - var submitter = dialogPolyfill.formSubmitter || event.submitter; - if (!value) { - if (!submitter) { - var root = ('getRootNode' in form && form.getRootNode() || document); - var activeElement = root.activeElement; - if (activeElement) { - submitter = event.submitter = activeElement; - } - } - if (submitter) { - value = submitter.value; - } + var submitter = findFormSubmitter(event); + if (value === null && submitter) { + value = submitter.value; } - const dialog = findNearestDialog(form); + // There should always be a dialog as this handler is added specifically on them, but check just + // in case. + var dialog = findNearestDialog(form); if (!dialog) { return; } + // Prefer formmethod on the button. + var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); + if (formmethod !== 'dialog') { + return; + } + event.preventDefault(); + if (submitter) { dialog.close(value); } else { @@ -792,6 +814,24 @@ if (window.HTMLDialogElement === undefined) { }, false); + /** + * Global 'submit' handler. This handles submits of `method="dialog"` which are invalid, i.e., + * outside a dialog. They get prevented. + */ + document.addEventListener('submit', function(ev) { + var form = ev.target; + var dialog = findNearestDialog(form); + if (dialog) { + return; // ignore, handle there + } + + var submitter = findFormSubmitter(ev); + var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); + if (formmethod === 'dialog') { + ev.preventDefault(); + } + }); + /** * Replace the native HTMLFormElement.submit() method, as it won't fire the * submit event and give us a chance to respond. diff --git a/dist/dialog-polyfill.js b/dist/dialog-polyfill.js index c235f48..bd60a70 100644 --- a/dist/dialog-polyfill.js +++ b/dist/dialog-polyfill.js @@ -159,6 +159,32 @@ return element.isConnected || document.body.contains(element); } + /** + * @param {!Event} event + */ + function findFormSubmitter(event) { + if (event.submitter) { + return event.submitter; + } + + var form = event.target; + if (!(form instanceof HTMLFormElement)) { + return null; + } + + var submitter = dialogPolyfill.formSubmitter; + if (!submitter) { + var target = event.target; + var root = ('getRootNode' in target && target.getRootNode() || document); + submitter = root.activeElement; + } + + if (submitter.form !== form) { + return null; + } + return submitter; + } + /** * @param {!Event} event */ @@ -167,32 +193,28 @@ return; } var form = /** @type {!HTMLFormElement} */ (event.target); - if (!isFormMethodDialog(form)) { - return; - } - event.preventDefault(); // We'd have a value if we clicked on an imagemap. var value = dialogPolyfill.useValue; - var submitter = dialogPolyfill.formSubmitter || event.submitter; - if (!value) { - if (!submitter) { - var root = ('getRootNode' in form && form.getRootNode() || document); - var activeElement = root.activeElement; - if (activeElement) { - submitter = event.submitter = activeElement; - } - } - if (submitter) { - value = submitter.value; - } + var submitter = findFormSubmitter(event); + if (value === null && submitter) { + value = submitter.value; } - const dialog = findNearestDialog(form); + // There should always be a dialog as this handler is added specifically on them, but check just + // in case. + var dialog = findNearestDialog(form); if (!dialog) { return; } + // Prefer formmethod on the button. + var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); + if (formmethod !== 'dialog') { + return; + } + event.preventDefault(); + if (submitter) { dialog.close(value); } else { @@ -798,6 +820,24 @@ }, false); + /** + * Global 'submit' handler. This handles submits of `method="dialog"` which are invalid, i.e., + * outside a dialog. They get prevented. + */ + document.addEventListener('submit', function(ev) { + var form = ev.target; + var dialog = findNearestDialog(form); + if (dialog) { + return; // ignore, handle there + } + + var submitter = findFormSubmitter(ev); + var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); + if (formmethod === 'dialog') { + ev.preventDefault(); + } + }); + /** * Replace the native HTMLFormElement.submit() method, as it won't fire the * submit event and give us a chance to respond.