From 31e22cc808f3a6d1fcae1700b9e044bc711fe4bb Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Tue, 9 Oct 2018 16:44:21 -0700 Subject: [PATCH 1/6] Use listener functions on the class Add `@eventOptions({passive: true})` for interation handlers in tab-scroller Fixes #136 --- demos/index.html | 16 +++++++------- packages/checkbox/src/mwc-checkbox.ts | 9 ++++---- packages/drawer/src/mwc-drawer.ts | 6 +++-- packages/formfield/src/mwc-formfield.ts | 2 +- packages/radio/src/mwc-radio.ts | 12 +++++----- packages/switch/src/mwc-switch.ts | 4 ++-- packages/tab-bar/src/mwc-tab-bar.ts | 12 ++++++---- packages/tab-scroller/src/mwc-tab-scroller.ts | 22 ++++++++++++------- packages/tab/src/mwc-tab.ts | 4 ++-- 9 files changed, 49 insertions(+), 38 deletions(-) diff --git a/demos/index.html b/demos/index.html index be7f97191..06f3524d4 100644 --- a/demos/index.html +++ b/demos/index.html @@ -120,13 +120,13 @@ limitations under the License. Interactive presentation of important information --> - + @@ -148,13 +148,13 @@ limitations under the License. Toggling icon states --> - + + - + `; diff --git a/packages/checkbox/src/mwc-checkbox.ts b/packages/checkbox/src/mwc-checkbox.ts index 70703bab5..4586c0b18 100644 --- a/packages/checkbox/src/mwc-checkbox.ts +++ b/packages/checkbox/src/mwc-checkbox.ts @@ -91,13 +91,12 @@ export class Checkbox extends FormElement { } render() { - console.log('render', this.checked); return html` ${this.renderStyle()} -
+
@@ -113,13 +112,13 @@ export class Checkbox extends FormElement {
`; } - private _changeHandler = () => { + protected changeHandler() { this.checked = this.formElement.checked; this.indeterminate = this.formElement.indeterminate; this.mdcFoundation.handleChange(); } - private _animationEndHandler = () => { + protected animationEndHandler () { this.mdcFoundation.handleAnimationEnd(); } } \ No newline at end of file diff --git a/packages/drawer/src/mwc-drawer.ts b/packages/drawer/src/mwc-drawer.ts index 30af5ce78..b2efdc369 100644 --- a/packages/drawer/src/mwc-drawer.ts +++ b/packages/drawer/src/mwc-drawer.ts @@ -86,7 +86,9 @@ export class Drawer extends BaseElement { // TODO(sorvell): integrate focus trapping. private _previousFocus: HTMLElement|null = null; - private _handleScrimClick = () => this.mdcFoundation.handleScrimClick(); + protected handleScrimClick() { + this.mdcFoundation.handleScrimClick() + }; @observer(function(this: Drawer, value: boolean) { if (this.type === '') { @@ -128,7 +130,7 @@ export class Drawer extends BaseElement { ${header}
- ${modal ? html`
` : ''} + ${modal ? html`
` : ''} `; } diff --git a/packages/formfield/src/mwc-formfield.ts b/packages/formfield/src/mwc-formfield.ts index b08c6f1bd..c63722986 100644 --- a/packages/formfield/src/mwc-formfield.ts +++ b/packages/formfield/src/mwc-formfield.ts @@ -106,7 +106,7 @@ export class Formfield extends BaseElement {
`; } - protected labelClick = () => { + protected labelClick() { const input = this.input; if (input) { input.focus(); diff --git a/packages/radio/src/mwc-radio.ts b/packages/radio/src/mwc-radio.ts index 3c1b27748..eb77c76d6 100644 --- a/packages/radio/src/mwc-radio.ts +++ b/packages/radio/src/mwc-radio.ts @@ -118,20 +118,20 @@ export class Radio extends FormElement { }; } - private _changeHandler = () => { + protected changeHandler = () => { this.checked = this.formElement.checked; if (this._selectionController) { this._selectionController.update(this); } } - private _focusHandler = () => { + protected focusHandler = () => { if (this._selectionController) { this._selectionController.focus(this); } } - private _clickHandler = () => { + protected 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()}
+ @change="${this.changeHandler}" + @focus="${this.focusHandler}" + @click="${this.clickHandler}">
diff --git a/packages/switch/src/mwc-switch.ts b/packages/switch/src/mwc-switch.ts index c89a1a08e..8069c0352 100644 --- a/packages/switch/src/mwc-switch.ts +++ b/packages/switch/src/mwc-switch.ts @@ -62,7 +62,7 @@ export class Switch extends FormElement { protected mdcFoundation!: SwitchFoundation; - private _changeHandler = (e: Event) => { + protected 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 {
- +
diff --git a/packages/tab-bar/src/mwc-tab-bar.ts b/packages/tab-bar/src/mwc-tab-bar.ts index a74f687c8..05ab9ce2c 100644 --- a/packages/tab-bar/src/mwc-tab-bar.ts +++ b/packages/tab-bar/src/mwc-tab-bar.ts @@ -72,9 +72,13 @@ export class TabBar extends BaseElement { private _previousActiveIndex = -1; - private _handleTabInteraction = (e) => this.mdcFoundation.handleTabInteraction(e); + protected handleTabInteraction(e) { + this.mdcFoundation.handleTabInteraction(e); + } - private _handleKeydown = (e) => this.mdcFoundation.handleKeyDown(e); + protected handleKeydown(e) { + this.mdcFoundation.handleKeyDown(e); + } renderStyle() { return style; @@ -85,8 +89,8 @@ export class TabBar extends BaseElement { return html` ${this.renderStyle()}
+ @MDCTab:interacted="${this.handleTabInteraction}" + @keydown="${this.handleKeydown}">
`; diff --git a/packages/tab-scroller/src/mwc-tab-scroller.ts b/packages/tab-scroller/src/mwc-tab-scroller.ts index 84162615a..4036d2fd7 100644 --- a/packages/tab-scroller/src/mwc-tab-scroller.ts +++ b/packages/tab-scroller/src/mwc-tab-scroller.ts @@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import {BaseElement, html, query, customElement, Adapter, Foundation} from '@material/mwc-base/base-element'; +import {BaseElement, html, query, customElement, Adapter, Foundation, eventOptions} from '@material/mwc-base/base-element'; import MDCTabScrollerFoundation from '@material/tab-scroller/foundation.js'; import * as util from '@material/tab-scroller/util.js'; import {style} from './mwc-tab-scroller-css.js'; @@ -54,9 +54,14 @@ export class TabScroller extends BaseElement { @query('.mdc-tab-scroller__scroll-content') protected scrollContentElement!: HTMLElement; - private _handleInteraction = (e) => this.mdcFoundation.handleInteraction(e); + @eventOptions({passive: true}) + protected handleInteraction(e) { + this.mdcFoundation.handleInteraction(e); + } - private _handleTransitionEnd = (e) => this.mdcFoundation.handleTransitionEnd(e); + protected handleTransitionEnd = (e) => { + this.mdcFoundation.handleTransitionEnd(e); + } private _srollbarHeight = -1; @@ -69,11 +74,12 @@ export class TabScroller extends BaseElement { ${this.renderStyle()}
+ @wheel="${this.handleInteraction}" + @touchstart="${this.handleInteraction}" + @pointerdown="${this.handleInteraction}" + @mousedown="${this.handleInteraction}" + @keydown="${this.handleInteraction}" + @transitionend="${this.handleTransitionEnd}">
diff --git a/packages/tab/src/mwc-tab.ts b/packages/tab/src/mwc-tab.ts index d3b51a450..701e1cfae 100644 --- a/packages/tab/src/mwc-tab.ts +++ b/packages/tab/src/mwc-tab.ts @@ -90,7 +90,7 @@ export class Tab extends BaseElement { @query('.mdc-tab__content') private _contentElement!: HTMLElement; - private _handleClick = (e) => { + protected handleClick = (e) => { this.mdcFoundation.handleClick(e); } @@ -109,7 +109,7 @@ export class Tab extends BaseElement { }; return html` ${this.renderStyle()} -