Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SubmitEvent.submitter & FormData(form, submitter) #402

Merged
merged 9 commits into from
Jul 7, 2024
Merged

SubmitEvent.submitter & FormData(form, submitter) #402

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2f108db
SubmitEvent.submitter & FormData(form, submitter)
filiphlm May 17, 2024
1b7aca4
Update test.yml
filiphlm May 17, 2024
eeb868d
Update UIHandler.ts
filiphlm May 17, 2024
35671f6
UIHandler: Coding style
filiphlm May 29, 2024
1b0b2d2
UIHandler.submitForm: Accepts *any* event
filiphlm May 29, 2024
dfe8dde
UIHandler.clickElement: Handles click events on button|input elements
filiphlm May 29, 2024
c1e7d7f
UIHandler.bindUI: Logical order
filiphlm May 29, 2024
bbd6cda
UIHandler: tests
filiphlm May 29, 2024
2255ac4
UiHandler: submitForm
filiphlm Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
82 changes: 23 additions & 59 deletions src/core/UIHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Naja, Options, Payload} from '../Naja';
import {assert, onDomReady, TypedEventListener} from '../utils';
import {onDomReady, TypedEventListener} from '../utils';

export class UIHandler extends EventTarget {
public selector: string = '.ajax';
Expand All @@ -20,41 +20,30 @@
}

public bindUI(element: Element): void {
const selectors = [
`a${this.selector}`,
`input[type="submit"]${this.selector}`,
`input[type="image"]${this.selector}`,
`button[type="submit"]${this.selector}`,
`button[form]:not([type])${this.selector}`,
`form button:not([type])${this.selector}`,
`form${this.selector} input[type="submit"]`,
`form${this.selector} input[type="image"]`,
`form${this.selector} button[type="submit"]`,
`form${this.selector} button:not([type])`,
].join(', ');

const bindElement = (element: Element) => {
const selector = `a${this.selector}`;

const bindElement = (element: HTMLAnchorElement) => {
element.removeEventListener('click', this.handler);
element.addEventListener('click', this.handler);
};

const elements = element.querySelectorAll(selectors);
elements.forEach((element) => bindElement(element));
const elements = element.querySelectorAll(selector);
elements.forEach((element) => bindElement(element as HTMLAnchorElement));

if (element.matches(selectors)) {
bindElement(element);
if (element.matches(selector)) {
bindElement(element as HTMLAnchorElement);

Check warning on line 34 in src/core/UIHandler.ts

View check run for this annotation

Codecov / codecov/patch

src/core/UIHandler.ts#L34 

Added line #L34 was not covered by tests
}
filiphlm marked this conversation as resolved.
Show resolved Hide resolved

const bindForm = (form: HTMLFormElement) => {
form.removeEventListener('submit', this.handler);
form.addEventListener('submit', this.handler);
};

if (element.matches(`form${this.selector}`)) {
if (element.tagName === 'FORM') {
bindForm(element as HTMLFormElement);
}

const forms = element.querySelectorAll(`form${this.selector}`);
const forms = element.querySelectorAll('form');
forms.forEach((form) => bindForm(form as HTMLFormElement));
}

Expand All @@ -73,52 +62,27 @@
};

if (event.type === 'submit') {
this.submitForm(element as HTMLFormElement, options, event).catch(ignoreErrors);
const {submitter} = (event as SubmitEvent);
if ((element as HTMLFormElement).matches(this.selector) || submitter?.matches(this.selector)) {
this.submitForm(element as HTMLFormElement, options, event as SubmitEvent).catch(ignoreErrors);
}

} else if (event.type === 'click') {
this.clickElement(element as HTMLElement, options, mouseEvent).catch(ignoreErrors);
this.clickElement(element as HTMLAnchorElement, options, mouseEvent).catch(ignoreErrors);
}
}

public async clickElement(element: HTMLElement, options: Options = {}, event?: MouseEvent): Promise<Payload> {
let method: string = 'GET', url: string = '', data: any;

if (element.tagName === 'A') {
assert(element instanceof HTMLAnchorElement);

method = 'GET';
url = element.href;
data = null;

} else if (element.tagName === 'INPUT' || element.tagName === 'BUTTON') {
assert(element instanceof HTMLInputElement || element instanceof HTMLButtonElement);

const {form} = element;
// eslint-disable-next-line no-nested-ternary,no-extra-parens
method = element.getAttribute('formmethod')?.toUpperCase() ?? form?.getAttribute('method')?.toUpperCase() ?? 'GET';
url = element.getAttribute('formaction') ?? form?.getAttribute('action') ?? window.location.pathname + window.location.search;
data = new FormData(form ?? undefined);

if (element.type === 'submit' && element.name !== '') {
data.append(element.name, element.value || '');

} else if (element.type === 'image') {
const coords = element.getBoundingClientRect();
const prefix = element.name !== '' ? `${element.name}.` : '';
data.append(`${prefix}x`, Math.max(0, Math.floor(event !== undefined ? event.pageX - coords.left : 0)));
data.append(`${prefix}y`, Math.max(0, Math.floor(event !== undefined ? event.pageY - coords.top : 0)));
}
}

return this.processInteraction(element, method, url, data, options, event);
public async clickElement(element: HTMLAnchorElement, options: Options = {}, event?: MouseEvent): Promise<Payload> {
jiripudil marked this conversation as resolved.
Show resolved Hide resolved
return this.processInteraction(element, 'GET', element.href, null, options, event);
}

public async submitForm(form: HTMLFormElement, options: Options = {}, event?: Event): Promise<Payload> {
const method = form.getAttribute('method')?.toUpperCase() ?? 'GET';
const url = form.getAttribute('action') ?? window.location.pathname + window.location.search;
const data = new FormData(form);
public async submitForm(form: HTMLFormElement, options: Options = {}, event?: SubmitEvent): Promise<Payload> {
jiripudil marked this conversation as resolved.
Show resolved Hide resolved
const submitter = event?.submitter;
const method = (submitter?.getAttribute('formmethod') || form.getAttribute('method') || 'GET').toUpperCase();
filiphlm marked this conversation as resolved.
Show resolved Hide resolved
const url = submitter?.getAttribute('formaction') ?? form.getAttribute('action') ?? window.location.pathname + window.location.search;
const data = new FormData(form, submitter);

return this.processInteraction(form, method, url, data, options, event);
return this.processInteraction(submitter || form, method, url, data, options, event);
}

public async processInteraction(
Expand Down
26 changes: 13 additions & 13 deletions tests/Naja.UIHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,8 @@ describe('UIHandler', function () {

this.a.dispatchEvent(createEvent('click'));
this.form.dispatchEvent(createEvent('submit'));
this.input.dispatchEvent(createEvent('click'));
this.image.dispatchEvent(createEvent('click'));
this.submitButton.dispatchEvent(createEvent('click'));
this.externalButton.dispatchEvent(createEvent('click'));

assert.equal(naja.uiHandler.handler.callCount, 6);
assert.equal(naja.uiHandler.handler.callCount, 2);
});

it('binds to elements specified by custom selector', function () {
Expand Down Expand Up @@ -488,8 +484,9 @@ describe('UIHandler', function () {

const preventDefault = sinon.spy();
const evt = {
type: 'click',
currentTarget: this.input,
type: 'submit',
currentTarget: this.form2,
submitter: this.input,
preventDefault,
};
handler.handleUI(evt);
Expand All @@ -511,8 +508,9 @@ describe('UIHandler', function () {

const preventDefault = sinon.spy();
const evt = {
type: 'click',
currentTarget: this.image,
type: 'submit',
currentTarget: this.form3,
submitter: this.image,
preventDefault,
};
handler.handleUI(evt);
Expand All @@ -534,8 +532,9 @@ describe('UIHandler', function () {

const preventDefault = sinon.spy();
const evt = {
type: 'click',
currentTarget: this.submitButton,
type: 'submit',
currentTarget: this.form4,
submitter: this.submitButton,
preventDefault,
};
handler.handleUI(evt);
Expand All @@ -557,8 +556,9 @@ describe('UIHandler', function () {

const preventDefault = sinon.spy();
const evt = {
type: 'click',
currentTarget: this.externalButton,
type: 'submit',
currentTarget: this.form5,
submitter: this.externalButton,
preventDefault,
};
handler.handleUI(evt);
Expand Down