From b28a74c366d5bd07735de07bfc99a96262c824a4 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 12:55:15 +0200 Subject: [PATCH 1/7] maint(pat auto submit): Use JS submit event instead of jQuery. --- src/pat/auto-submit/auto-submit.js | 5 +++-- src/pat/auto-submit/auto-submit.test.js | 27 ++++++++++++++++------- src/pat/auto-suggest/auto-suggest.test.js | 8 +++++-- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/pat/auto-submit/auto-submit.js b/src/pat/auto-submit/auto-submit.js index 34909d31b..975440aa3 100644 --- a/src/pat/auto-submit/auto-submit.js +++ b/src/pat/auto-submit/auto-submit.js @@ -1,6 +1,7 @@ import "../../core/jquery-ext"; import $ from "jquery"; import Base from "../../core/base"; +import events from "../../core/events"; import input_change_events from "../../lib/input-change-events"; import logging from "../../core/logging"; import Parser from "../../core/parser"; @@ -43,7 +44,7 @@ export default Base.extend({ data?.pattern === "sortable" ) { // Directly submit when removing a clone or changing the sorting. - this.$el.submit(); + this.el.dispatchEvent(events.submit_event()); log.debug( `triggered by pat-update, pattern: ${data.pattern}, action: ${data.action}` ); @@ -119,7 +120,7 @@ export default Base.extend({ onInputChange(e) { e.stopPropagation(); - this.$el.submit(); + this.el.dispatchEvent(events.submit_event()); log.debug("triggered by " + e.type); }, }); diff --git a/src/pat/auto-submit/auto-submit.test.js b/src/pat/auto-submit/auto-submit.test.js index 38f7c3363..4300a812d 100644 --- a/src/pat/auto-submit/auto-submit.test.js +++ b/src/pat/auto-submit/auto-submit.test.js @@ -69,7 +69,7 @@ describe("pat-autosubmit", function () { }); describe("2 - Trigger a submit", function () { - it("when a change on a single input happens", async function () { + it("when a change on a single input happens", function () { document.body.innerHTML = `
{ + e.preventDefault(); + called = true; + }); input.dispatchEvent(events.input_event()); - await utils.timeout(1); - expect(spy).toHaveBeenCalled(); + expect(called).toBe(true); }); it("when pat-clone removes an element", function () { @@ -95,9 +98,13 @@ describe("pat-autosubmit", function () { `; const el = document.querySelector(".pat-autosubmit"); const instance = new Pattern(el); - const spy = jest.spyOn(instance.$el, "submit"); + let called = false; + instance.el.addEventListener("submit", (e) => { + e.preventDefault(); + called = true; + }); $(el).trigger("pat-update", { pattern: "clone", action: "remove" }); - expect(spy).toHaveBeenCalled(); + expect(called).toBe(true); }); it("when pat-sortable changes the sorting", function () { @@ -107,9 +114,13 @@ describe("pat-autosubmit", function () { `; const el = document.querySelector(".pat-autosubmit"); const instance = new Pattern(el); - const spy = jest.spyOn(instance.$el, "submit"); + let called = false; + instance.el.addEventListener("submit", (e) => { + e.preventDefault(); + called = true; + }); $(el).trigger("pat-update", { pattern: "sortable" }); - expect(spy).toHaveBeenCalled(); + expect(called).toBe(true); }); }); diff --git a/src/pat/auto-suggest/auto-suggest.test.js b/src/pat/auto-suggest/auto-suggest.test.js index 5651e8c47..32876e009 100644 --- a/src/pat/auto-suggest/auto-suggest.test.js +++ b/src/pat/auto-suggest/auto-suggest.test.js @@ -292,13 +292,17 @@ describe("pat-autosuggest", function () { const input = document.querySelector("input"); new pattern(input); const instance_autosubmit = new pattern_autosubmit(input); - const spy = jest.spyOn(instance_autosubmit.$el, "submit"); + let called = false; + instance_autosubmit.el.addEventListener("submit", (e) => { + e.preventDefault(); + called = true; + }); await utils.timeout(1); // wait a tick for async to settle. $(".select2-input").click(); $(document.querySelector(".select2-result")).mouseup(); - expect(spy).toHaveBeenCalled(); + expect(called).toBe(true); }); }); }); From f1c3b4396ea2c13bc976b87803b0802b47b8cd71 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 12:56:21 +0200 Subject: [PATCH 2/7] maint(pat subform): Use JS submit event instead of jQuery. --- src/pat/subform/subform.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pat/subform/subform.js b/src/pat/subform/subform.js index 205720f7b..eadfa82c9 100644 --- a/src/pat/subform/subform.js +++ b/src/pat/subform/subform.js @@ -6,6 +6,7 @@ import $ from "jquery"; import ajax from "../ajax/ajax"; import Base from "../../core/base"; +import events from "../../core/events"; import inject from "../inject/inject"; import logging from "../../core/logging"; @@ -44,7 +45,7 @@ export default Base.extend({ } else { // use the native handler, since there could be event handlers // redirecting to inject/ajax. - $form[0].submit(); + $form[0].dispatchEvent(events.submit_event()); } // reenable everything log.debug("Restoring previous state."); @@ -72,11 +73,12 @@ export default Base.extend({ if (ev.keyCode != 13) { return; } - var $subform = $(ev.target).parents(".pat-subform"); - if (!$subform.is(".pat-autosubmit")) { + + var subform = ev.target.closest(".pat-subform"); + if (!subform.matches(".pat-autosubmit")) { return; } - return $subform.submit(); + subform.dispatchEvent(events.submit_event()); }, submitClicked(ev) { From fdcf0e155f465f65d87aa40a8cc55c4909b588bc Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 12:58:59 +0200 Subject: [PATCH 3/7] =?UTF-8?q?maint(pat=20subform):=20Wait=20for=20click?= =?UTF-8?q?=20event=20to=20bubble=20to=20subform=20and=20catch=20it=20ther?= =?UTF-8?q?e=20instead=20for=20searching=20for=20submit=20buttons.=20This?= =?UTF-8?q?=20allows=20for=20changing=20tree=20contents=20and=20canceling?= =?UTF-8?q?=20the=20event=20withing=20the=20DOM=E2=80=8C=20hierachy=20befo?= =?UTF-8?q?re=20it=20reaches=20subform.=20Also,=20use=20own=20event=20list?= =?UTF-8?q?ener=20and=20remove=20click=20on=20destroy.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pat/subform/subform.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/pat/subform/subform.js b/src/pat/subform/subform.js index eadfa82c9..98242e377 100644 --- a/src/pat/subform/subform.js +++ b/src/pat/subform/subform.js @@ -16,14 +16,25 @@ export default Base.extend({ name: "subform", trigger: ".pat-subform", - init($el) { - $el.submit(this.submit.bind(this)); - $el.find("input").on("keyup keypress keydown", this.keyboard_handler.bind(this)); - $el.find("button[type=submit]").on("click", this.submitClicked.bind(this)); + init() { + this.$el + .find("input") + .on("keyup keypress keydown", this.keyboard_handler.bind(this)); + events.add_event_listener(this.el, "submit", "pat-subform--submit", (e) => { + log.debug("Handle submit event."); + this.submit(e); + }); + events.add_event_listener(this.el, "click", "pat-subform--click", (e) => { + if (e.target.matches("button[type=submit]")) { + log.debug("Submit button pressed"); + this.submitClicked(e); + } + }); }, - destroy($el) { - $el.off("submit"); + destroy() { + events.remove_event_listener(this.el, "pat-subform--submit"); + events.remove_event_listener(this.el, "pat-subform--click"); }, scopedSubmit($el) { From 0a26c547e6368c46fa02e5e7ba717d87035473b4 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 13:00:16 +0200 Subject: [PATCH 4/7] =?UTF-8?q?maint(pat=20inject):=20Wait=20for=20click?= =?UTF-8?q?=20event=20to=20bubble=20to=20subform=20and=20catch=20it=20ther?= =?UTF-8?q?e=20instead=20for=20searching=20for=20submit=20buttons.=20This?= =?UTF-8?q?=20allows=20for=20changing=20tree=20contents=20and=20canceling?= =?UTF-8?q?=20the=20event=20withing=20the=20DOM=E2=80=8C=20hierachy=20befo?= =?UTF-8?q?re=20it=20reaches=20the=20inject=20pattern.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pat/inject/inject.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js index 2caadad2f..102085b88 100644 --- a/src/pat/inject/inject.js +++ b/src/pat/inject/inject.js @@ -97,13 +97,22 @@ const inject = { }); // setup event handlers if ($el.is("form")) { - $el.on("submit.pat-inject", this.onTrigger.bind(this)) - .on("click.pat-inject", "[type=submit]", ajax.onClickSubmit) - .on( - "click.pat-inject", - "[type=submit][formaction], [type=image][formaction]", - this.onFormActionSubmit.bind(this) - ); + $el.on("submit.pat-inject", (e) => { + log.debug("Form submit triggered."); + this.onTrigger(e); + }).on("click.pat-inject", (e) => { + if ( + e.target.matches( + "[type=submit][formaction], [type=image][formaction]" + ) + ) { + log.debug("Submit button with formaction triggered."); + this.onFormActionSubmit(e); + } else if (e.target.matches("[type=submit]")) { + log.debug("Submit button triggered."); + ajax.onClickSubmit(e); + } + }); } else if ($el.is(".pat-subform")) { log.debug("Initializing subform with injection"); } else { From 5336aa60b76a1cb1c6280aec0d51aa93bbc183b6 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 14:12:52 +0200 Subject: [PATCH 5/7] maint(pat push): Use submit event instead submit method which would not trigger a submit event. --- src/pat/push/push.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pat/push/push.js b/src/pat/push/push.js index 646743a01..11e9552e8 100644 --- a/src/pat/push/push.js +++ b/src/pat/push/push.js @@ -41,7 +41,7 @@ export default Base.extend({ if (this.options.mode === "desktop-notification") { this.desktop_notification(); } else if (this.el.tagName === "FORM") { - this.el.submit(); + this.el.dispatchEvent(events.submit_event()); } else { this.perform_inject(); } From a254dc6fd704f739ffe74e98e624015ecce65e06 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Sep 2022 14:13:29 +0200 Subject: [PATCH 6/7] maint: Use submit events in all tests instead jQuery or submit methods. --- src/pat/ajax/ajax.test.js | 35 ++++++++++++++----------- src/pat/auto-submit/auto-submit.test.js | 1 - src/pat/inject/inject.test.js | 5 ++-- src/pat/sortable/sortable.test.js | 8 +++--- 4 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/pat/ajax/ajax.test.js b/src/pat/ajax/ajax.test.js index 72197f5e1..f10bc2c4c 100644 --- a/src/pat/ajax/ajax.test.js +++ b/src/pat/ajax/ajax.test.js @@ -1,3 +1,4 @@ +import events from "../../core/events"; import registry from "../../core/registry"; import pattern from "./ajax"; import $ from "jquery"; @@ -32,16 +33,20 @@ describe("pat-ajax", function () { // path in jquery.form that does not use $.ajax // describe("form", function () { - var $form, $button, spy_ajax; + let form, $button, spy_ajax; beforeEach(function () { - $lab = $("
", { id: "lab" }).appendTo(document.body); - $form = $("").appendTo($lab); - $button = $( - "