mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 22:17:25 +03:00
make all event handlers private
This commit is contained in:
parent
8fd896724f
commit
743273590d
@ -93,10 +93,10 @@ export class Checkbox extends FormElement {
|
||||
render() {
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<div class="mdc-checkbox" @animationend="${this.animationEndHandler}" .ripple="${ripple()}">
|
||||
<div class="mdc-checkbox" @animationend="${this._animationEndHandler}" .ripple="${ripple()}">
|
||||
<input type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
@change="${this.changeHandler}"
|
||||
@change="${this._changeHandler}"
|
||||
.indeterminate="${this.indeterminate}"
|
||||
.checked="${this.checked}"
|
||||
.value="${this.value}">
|
||||
@ -112,13 +112,13 @@ export class Checkbox extends FormElement {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
protected changeHandler() {
|
||||
private _changeHandler() {
|
||||
this.checked = this.formElement.checked;
|
||||
this.indeterminate = this.formElement.indeterminate;
|
||||
this.mdcFoundation.handleChange();
|
||||
}
|
||||
|
||||
protected animationEndHandler() {
|
||||
private _animationEndHandler() {
|
||||
this.mdcFoundation.handleAnimationEnd();
|
||||
}
|
||||
}
|
@ -86,7 +86,7 @@ export class Drawer extends BaseElement {
|
||||
// TODO(sorvell): integrate focus trapping.
|
||||
private _previousFocus: HTMLElement|null = null;
|
||||
|
||||
protected handleScrimClick() {
|
||||
private _handleScrimClick() {
|
||||
this.mdcFoundation.handleScrimClick()
|
||||
};
|
||||
|
||||
@ -130,7 +130,7 @@ export class Drawer extends BaseElement {
|
||||
${header}
|
||||
<div class="mdc-drawer__content"><slot></slot></div>
|
||||
</aside>
|
||||
${modal ? html`<div class="mdc-drawer-scrim" @click="${this.handleScrimClick}"></div>` : ''}
|
||||
${modal ? html`<div class="mdc-drawer-scrim" @click="${this._handleScrimClick}"></div>` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -102,11 +102,11 @@ export class Formfield extends BaseElement {
|
||||
return html`${this.renderStyle()}
|
||||
<div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
|
||||
<slot></slot>
|
||||
<label class="mdc-label" @click="${this.labelClick}">${this.label}</label>
|
||||
<label class="mdc-label" @click="${this._labelClick}">${this.label}</label>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
protected labelClick() {
|
||||
private _labelClick() {
|
||||
const input = this.input;
|
||||
if (input) {
|
||||
input.focus();
|
||||
|
@ -118,20 +118,20 @@ export class Radio extends FormElement {
|
||||
};
|
||||
}
|
||||
|
||||
protected changeHandler() {
|
||||
private _changeHandler() {
|
||||
this.checked = this.formElement.checked;
|
||||
if (this._selectionController) {
|
||||
this._selectionController.update(this);
|
||||
}
|
||||
}
|
||||
|
||||
protected focusHandler() {
|
||||
private _focusHandler() {
|
||||
if (this._selectionController) {
|
||||
this._selectionController.focus(this);
|
||||
}
|
||||
}
|
||||
|
||||
protected clickHandler() {
|
||||
private _clickHandler() {
|
||||
// Firefox has weird behavior with radios if they are not focused
|
||||
this.formElement.focus();
|
||||
}
|
||||
@ -141,9 +141,9 @@ export class Radio extends FormElement {
|
||||
${this.renderStyle()}
|
||||
<div class="mdc-radio" .ripple="${ripple()}">
|
||||
<input class="mdc-radio__native-control" type="radio" name="${this.name}" .checked="${this.checked}" .value="${this.value}"
|
||||
@change="${this.changeHandler}"
|
||||
@focus="${this.focusHandler}"
|
||||
@click="${this.clickHandler}">
|
||||
@change="${this._changeHandler}"
|
||||
@focus="${this._focusHandler}"
|
||||
@click="${this._clickHandler}">
|
||||
<div class="mdc-radio__background">
|
||||
<div class="mdc-radio__outer-circle"></div>
|
||||
<div class="mdc-radio__inner-circle"></div>
|
||||
|
@ -62,7 +62,7 @@ export class Switch extends FormElement {
|
||||
|
||||
protected mdcFoundation!: SwitchFoundation;
|
||||
|
||||
protected changeHandler(e: Event) {
|
||||
private _changeHandler(e: Event) {
|
||||
this.mdcFoundation.handleChange(e);
|
||||
// catch "click" event and sync properties
|
||||
this.checked = this.formElement.checked;
|
||||
@ -96,7 +96,7 @@ export class Switch extends FormElement {
|
||||
<div class="mdc-switch__track"></div>
|
||||
<div class="mdc-switch__thumb-underlay" .ripple="${ripple()}">
|
||||
<div class="mdc-switch__thumb">
|
||||
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" @change="${this.changeHandler}">
|
||||
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" @change="${this._changeHandler}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -72,11 +72,11 @@ export class TabBar extends BaseElement {
|
||||
|
||||
private _previousActiveIndex = -1;
|
||||
|
||||
protected handleTabInteraction(e: Event) {
|
||||
private _handleTabInteraction(e: Event) {
|
||||
this.mdcFoundation.handleTabInteraction(e);
|
||||
}
|
||||
|
||||
protected handleKeydown(e: Event) {
|
||||
private _handleKeydown(e: Event) {
|
||||
this.mdcFoundation.handleKeyDown(e);
|
||||
}
|
||||
|
||||
@ -89,8 +89,8 @@ export class TabBar extends BaseElement {
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<div class="mdc-tab-bar" role="tablist"
|
||||
@MDCTab:interacted="${this.handleTabInteraction}"
|
||||
@keydown="${this.handleKeydown}">
|
||||
@MDCTab:interacted="${this._handleTabInteraction}"
|
||||
@keydown="${this._handleKeydown}">
|
||||
<mwc-tab-scroller><slot></slot></mwc-tab-scroller>
|
||||
</div>
|
||||
`;
|
||||
|
@ -55,15 +55,15 @@ export class TabScroller extends BaseElement {
|
||||
protected scrollContentElement!: HTMLElement;
|
||||
|
||||
@eventOptions({passive: true})
|
||||
protected handleInteraction(e: Event) {
|
||||
private _handleInteraction(e: Event) {
|
||||
this.mdcFoundation.handleInteraction(e);
|
||||
}
|
||||
|
||||
protected handleTransitionEnd(e: Event) {
|
||||
private _handleTransitionEnd(e: Event) {
|
||||
this.mdcFoundation.handleTransitionEnd(e);
|
||||
}
|
||||
|
||||
private _srollbarHeight = -1;
|
||||
private _scrollbarHeight = -1;
|
||||
|
||||
renderStyle() {
|
||||
return style;
|
||||
@ -74,12 +74,12 @@ export class TabScroller extends BaseElement {
|
||||
${this.renderStyle()}
|
||||
<div class="mdc-tab-scroller">
|
||||
<div class="mdc-tab-scroller__scroll-area"
|
||||
@wheel="${this.handleInteraction}"
|
||||
@touchstart="${this.handleInteraction}"
|
||||
@pointerdown="${this.handleInteraction}"
|
||||
@mousedown="${this.handleInteraction}"
|
||||
@keydown="${this.handleInteraction}"
|
||||
@transitionend="${this.handleTransitionEnd}">
|
||||
@wheel="${this._handleInteraction}"
|
||||
@touchstart="${this._handleInteraction}"
|
||||
@pointerdown="${this._handleInteraction}"
|
||||
@mousedown="${this._handleInteraction}"
|
||||
@keydown="${this._handleInteraction}"
|
||||
@transitionend="${this._handleTransitionEnd}">
|
||||
<div class="mdc-tab-scroller__scroll-content"><slot></slot></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -107,12 +107,12 @@ export class TabScroller extends BaseElement {
|
||||
computeScrollAreaClientRect: () => this.scrollAreaElement.getBoundingClientRect(),
|
||||
computeScrollContentClientRect: () => this.scrollContentElement.getBoundingClientRect(),
|
||||
computeHorizontalScrollbarHeight: () => {
|
||||
if (this._srollbarHeight === -1) {
|
||||
if (this._scrollbarHeight === -1) {
|
||||
this.scrollAreaElement.style.overflowX = 'scroll';
|
||||
this._srollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
|
||||
this._scrollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
|
||||
this.scrollAreaElement.style.overflowX = '';
|
||||
}
|
||||
return this._srollbarHeight;
|
||||
return this._scrollbarHeight;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ export class Tab extends BaseElement {
|
||||
@query('.mdc-tab__content')
|
||||
private _contentElement!: HTMLElement;
|
||||
|
||||
protected handleClick(e: Event) {
|
||||
private _handleClick(e: Event) {
|
||||
this.mdcFoundation.handleClick(e);
|
||||
}
|
||||
|
||||
@ -109,7 +109,7 @@ export class Tab extends BaseElement {
|
||||
};
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<button @click="${this.handleClick}" class="mdc-tab ${classMap(classes)}" role="tab" aria-selected="false" tabindex="-1">
|
||||
<button @click="${this._handleClick}" class="mdc-tab ${classMap(classes)}" role="tab" aria-selected="false" tabindex="-1">
|
||||
<span class="mdc-tab__content">
|
||||
<slot></slot>
|
||||
${this.icon ? html`<span class="mdc-tab__icon material-icons">${this.icon}</span>` : ''}
|
||||
|
Loading…
Reference in New Issue
Block a user