diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md index 2439ac3f52b..e4dc36eb107 100644 --- a/packages/mdc-textfield/README.md +++ b/packages/mdc-textfield/README.md @@ -426,6 +426,32 @@ Returns a boolean specifying whether or not the input is disabled. Updates the input's disabled state. +##### MDCTextfieldFoundation.setValid(isValid: boolean) + +Sets the validity state of the Text Field. Triggers custom validity checking. + +##### MDCTextfieldFoundation.handleTextFieldInteraction(evt: Event) + +Handles click and keydown events originating from inside the Text Field component. + +##### MDCTextfieldFoundation.activateFocus() + +Activates the focus state of the Text Field. Normally called in response to the input focus event. + +##### MDCTextfieldFoundation.deactivateFocus() + +Deactivates the focus state of the Text Field. Normally called in response to the input blur event. + +##### MDCTextfieldFoundation.animateBottomLine(evt: Event) + +Animates the bottom line. The animation expands outward from the user's click or touch. Expects an +event with clientX/clientY properties. + +##### MDCTextfieldFoundation.handleBottomLineAnimationEnd(evt: Event) + +Handles the end of the bottom line animation, performing actions that must wait for animations to +finish. Expects a transition-end event. + ### Theming MDC Textfield components use the configured theme's primary color for its underline and label text diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js index 76691eca7ab..052b5a12761 100644 --- a/packages/mdc-textfield/foundation.js +++ b/packages/mdc-textfield/foundation.js @@ -80,17 +80,17 @@ class MDCTextfieldFoundation extends MDCFoundation { /** @private {boolean} */ this.useCustomValidityChecking_ = false; /** @private {function(): undefined} */ - this.inputFocusHandler_ = () => this.activateFocus_(); + this.inputFocusHandler_ = () => this.activateFocus(); /** @private {function(): undefined} */ - this.inputBlurHandler_ = () => this.deactivateFocus_(); + this.inputBlurHandler_ = () => this.deactivateFocus(); /** @private {function(): undefined} */ - this.inputInputHandler_ = () => this.autoCompleteFocus_(); + this.inputInputHandler_ = () => this.autoCompleteFocus(); /** @private {function(!Event): undefined} */ - this.setPointerXOffset_ = (evt) => this.setBottomLineTransformOrigin_(evt); + this.setPointerXOffset_ = (evt) => this.animateBottomLine(evt); /** @private {function(!Event): undefined} */ - this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction_(evt); + this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction(evt); /** @private {function(!Event): undefined} */ - this.transitionEndHandler_ = (evt) => this.transitionEnd_(evt); + this.transitionEndHandler_ = (evt) => this.handleBottomLineAnimationEnd(evt); } init() { @@ -129,9 +129,8 @@ class MDCTextfieldFoundation extends MDCFoundation { /** * Handles all user interactions with the Textfield. * @param {!Event} evt - * @private */ - handleTextFieldInteraction_(evt) { + handleTextFieldInteraction(evt) { if (this.adapter_.getNativeInput().disabled) { return; } @@ -150,9 +149,8 @@ class MDCTextfieldFoundation extends MDCFoundation { /** * Activates the text field focus state. - * @private */ - activateFocus_() { + activateFocus() { const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses; this.adapter_.addClass(FOCUSED); this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE); @@ -163,12 +161,10 @@ class MDCTextfieldFoundation extends MDCFoundation { } /** - * Sets the transform-origin of the bottom line, causing it to animate out - * from the user's click location. + * Animates the bottom line out from the user's click location. * @param {!Event} evt - * @private */ - setBottomLineTransformOrigin_(evt) { + animateBottomLine(evt) { const targetClientRect = evt.target.getBoundingClientRect(); const evtCoords = {x: evt.clientX, y: evt.clientY}; const normalizedX = evtCoords.x - targetClientRect.left; @@ -181,11 +177,10 @@ class MDCTextfieldFoundation extends MDCFoundation { /** * Activates the Textfield's focus state in cases when the input value * changes without user input (e.g. programatically). - * @private */ - autoCompleteFocus_() { + autoCompleteFocus() { if (!this.receivedUserInput_) { - this.activateFocus_(); + this.activateFocus(); } } @@ -199,12 +194,11 @@ class MDCTextfieldFoundation extends MDCFoundation { } /** - * Fires when animation transition ends, performing actions that must wait - * for animations to finish. + * Executes when the bottom line's transition animation ends, performing + * actions that must wait for animations to finish. * @param {!Event} evt - * @private */ - transitionEnd_(evt) { + handleBottomLineAnimationEnd(evt) { const {BOTTOM_LINE_ACTIVE} = MDCTextfieldFoundation.cssClasses; // We need to wait for the bottom line to be entirely transparent @@ -217,9 +211,8 @@ class MDCTextfieldFoundation extends MDCFoundation { /** * Deactives the Textfield's focus state. - * @private */ - deactivateFocus_() { + deactivateFocus() { const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses; const input = this.getNativeInput_();