Skip to content

Commit

Permalink
handler => service
Browse files Browse the repository at this point in the history
  • Loading branch information
Micajuine Ho committed Mar 19, 2021
1 parent 8ac023b commit ac9779b
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 124 deletions.
87 changes: 45 additions & 42 deletions extensions/amp-form/0.1/amp-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import {
} from '../../../src/form';
import {getFormValidator, isCheckValiditySupported} from './form-validators';
import {getMode} from '../../../src/mode';
import {getServicePromiseForDoc} from '../../../src/service';
import {installFormProxy} from './form-proxy';
import {installStylesForDoc} from '../../../src/style-installer';
import {isAmp4Email} from '../../../src/format';
Expand Down Expand Up @@ -142,12 +143,9 @@ export class AmpForm {

/** @const @private {!../../../src/service/ampdoc-impl.AmpDoc} */
this.ampdoc_ = Services.ampdoc(this.form_);

/** @const @private {!Promise<!AmpFormService>} */
this.ampFormServicePromise_ = getServicePromiseForDoc(
this.ampdoc_,
TAG
);
this.ampFormServicePromise_ = getServicePromiseForDoc(this.ampdoc_, TAG);

/** @private {?Promise} */
this.dependenciesPromise_ = null;
Expand Down Expand Up @@ -221,7 +219,11 @@ export class AmpForm {
}

/** @const @private {!./form-dirtiness.FormDirtiness} */
this.dirtinessHandler_ = new FormDirtiness(this.form_, this.win_);
this.dirtinessHandler_ = new FormDirtiness(
this.form_,
this.win_,
this.ampFormServicePromise_
);

/** @const @private {!./form-validators.FormValidator} */
this.validator_ = getFormValidator(this.form_);
Expand Down Expand Up @@ -250,12 +252,6 @@ export class AmpForm {
Services.formSubmitForDoc(element).then((service) => {
this.formSubmitService_ = service;
});

/** @private {?AmpFormService} */
this.ampFormService = null;
Services.formSubmitForDoc(element).then((service) => {
this.ampFormService = service;
});

/** @private */
this.isAmp4Email_ = this.doc_ && isAmp4Email(this.doc_);
Expand Down Expand Up @@ -431,14 +427,14 @@ export class AmpForm {
}
});

ampFormServicePromise_.then((ampFormService) => {
this.ampFormServicePromise_.then((ampFormService) => {
ampFormService.addFormEventListener(
this.form_,
'submit',
this.handleSubmitEvent_.bind(this),
true
);

ampFormService.addFormEventListener(
this.form_,
'blur',
Expand All @@ -448,7 +444,7 @@ export class AmpForm {
},
true
);

ampFormService.addFormEventListener(
this.form_,
AmpEvents.FORM_VALUE_CHANGE,
Expand All @@ -458,7 +454,7 @@ export class AmpForm {
},
true
);

// Form verification is not supported when SSRing templates is enabled.
if (!this.ssrTemplateHelper_.isEnabled()) {
ampFormService.addFormEventListener(this.form_, 'change', (e) => {
Expand All @@ -468,26 +464,28 @@ export class AmpForm {
// Tell the validation to reveal any input.validationMessage added
// by the form verifier.
this.validator_.onBlur(e);

// Only make the verify XHR if the user hasn't pressed submit.
if (this.state_ === FormState.VERIFYING) {
if (errors.length) {
this.setState_(FormState.VERIFY_ERROR);
this.renderTemplate_(dict({'verifyErrors': errors})).then(() => {
this.triggerAction_(
FormEvents.VERIFY_ERROR,
errors,
ActionTrust.DEFAULT // DEFAULT because async after gesture.
);
});
this.renderTemplate_(dict({'verifyErrors': errors})).then(
() => {
this.triggerAction_(
FormEvents.VERIFY_ERROR,
errors,
ActionTrust.DEFAULT // DEFAULT because async after gesture.
);
}
);
} else {
this.setState_(FormState.INITIAL);
}
}
});
});
}

ampFormService.addFormEventListener(this.form_, 'change', (e) => {
checkUserValidityAfterInteraction_(dev().assertElement(e.target));
this.validator_.onInput(e);
Expand Down Expand Up @@ -557,7 +555,6 @@ export class AmpForm {
this.form_.classList.remove('user-valid');
this.form_.classList.remove('user-invalid');

// Edit here
const validityElements = formElementsQuerySelectorAll(
this.form_,
'.user-valid, .user-invalid'
Expand All @@ -567,8 +564,7 @@ export class AmpForm {
element.classList.remove('user-invalid');
});

const messageElements = formElementsQuerySelectorAll(
this.form_,
const messageElements = this.form_.querySelectorAll(
'.visible[validation-for]'
);
iterateCursor(messageElements, (element) => {
Expand Down Expand Up @@ -632,9 +628,8 @@ export class AmpForm {

// Get our special fields
const varSubsFields = this.getVarSubsFields_();
const asyncInputs = formElementsQuerySelectorAll(
this.form_,
`.${AsyncInputClasses.ASYNC_INPUT}`
const asyncInputs = this.form_.getElementsByClassName(
AsyncInputClasses.ASYNC_INPUT
);
this.dirtinessHandler_.onSubmitting();

Expand Down Expand Up @@ -1158,7 +1153,7 @@ export class AmpForm {
* @private
*/
assertNoSensitiveFields_() {
const fields = this.form_.elements.filter((ele) => {
const fields = Array.from(this.form_.elements).filter((ele) => {
return (
(ele.tagName.toUpperCase() == 'INPUT' &&
ele.getAttribute('type') == 'password') ||
Expand Down Expand Up @@ -1650,6 +1645,9 @@ export class AmpFormService {
this.installHandlers_(ampdoc)
);

/** @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc */
this.ampdoc_ = ampdoc;

/** @const @private {!Array<UnlistenDef>} */
this.unlisteners_ = [];

Expand Down Expand Up @@ -1745,25 +1743,30 @@ export class AmpFormService {
}

/**
* Adds handler for the form for a given type, when the
* Adds handler for the form for a given type, when the
* rootNode gets the signal.
* @param {!HTMLFormElement} form
* @param {string} type
* @param {function(!Event)} handler
* @param {boolean=} opt_options
*/
addFormEventListener(form, type, handler, opt_options) {
if (!hasOwn(this.eventHandlers_, type)) {
if (!hasOwn(this.eventHandlers_, type)) {
this.eventHandlers_[type] = new WeakMap();
this.unlisteners_.push(
listen(this.ampdoc.getRootNode(), type, (e) => {
const {form} = e.target;

// Only call handler if the elemen has a registered form.
if (this.eventHandlers_[type].has(form)) {
this.eventHandlers_[type].get(form)(e);
}
}, opt_options)
listen(
this.ampdoc_.getRootNode(),
type,
(e) => {
const {form} = e.target;

// Only call handler if the elemen has a registered form.
if (this.eventHandlers_[type].has(form)) {
this.eventHandlers_[type].get(form)(e);
}
},
opt_options
)
);
}
this.eventHandlers_[type].set(form, handler);
Expand Down
37 changes: 25 additions & 12 deletions extensions/amp-form/0.1/form-dirtiness.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
*/

import {AmpEvents} from '../../../src/amp-events';
import {addFormEventListener} from './amp-form';
import {createCustomEvent} from '../../../src/event-helper';
import {createFormDataWrapper} from '../../../src/form-data-wrapper';
import {dev} from '../../../src/log';
Expand All @@ -35,14 +34,18 @@ export class FormDirtiness {
/**
* @param {!HTMLFormElement} form
* @param {!Window} win
* @param {!Promise<!AmpFormService>} ampFormServicePromise
*/
constructor(form, win) {
constructor(form, win, ampFormServicePromise) {
/** @private @const {!HTMLFormElement} */
this.form_ = form;

/** @private @const {!Window} */
this.win_ = win;

/** @private @const {!Promise<!AmpFormService>} */
this.ampFormServicePromise_ = ampFormServicePromise;

/** @private {number} */
this.dirtyFieldCount_ = 0;

Expand Down Expand Up @@ -131,16 +134,26 @@ export class FormDirtiness {
* @private
*/
installEventHandlers_() {
addFormEventListener(this.form_, 'input', this.onInput_.bind(this));
addFormEventListener(this.form_, 'reset', this.onReset_.bind(this));

// `amp-bind` dispatches the custom event `FORM_VALUE_CHANGE` when it
// mutates the value of a form field (e.g. textarea, input, etc)
addFormEventListener(
this.form_,
AmpEvents.FORM_VALUE_CHANGE,
this.onInput_.bind(this)
);
this.ampFormServicePromise_.then((ampFormService) => {
ampFormService.addFormEventListener(
this.form_,
'input',
this.onInput_.bind(this)
);
ampFormService.addFormEventListener(
this.form_,
'reset',
this.onReset_.bind(this)
);

// `amp-bind` dispatches the custom event `FORM_VALUE_CHANGE` when it
// mutates the value of a form field (e.g. textarea, input, etc)
ampFormService.addFormEventListener(
this.form_,
AmpEvents.FORM_VALUE_CHANGE,
this.onInput_.bind(this)
);
});
}

/** @private */
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-form/0.1/form-verifiers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ export class AsyncVerifier extends FormVerifier {
// If multiple elements share the same name, the first should be selected.
// This matches the behavior of HTML5 validation, e.g. with radio buttons.
const element = user().assertElement(
formElementsQuerySelectorAll(this.form_, `[name="${name}"]`),
this.form_./*OK*/ querySelector(`[name="${name}"]`),
'Verification error name property must match a field name'
);

Expand Down
Loading

0 comments on commit ac9779b

Please sign in to comment.