diff --git a/CHANGELOG.md b/CHANGELOG.md index bcc94ee05..b2912e53d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## Unreleased +- Move event listeners to the class with lit-element 0.6.2 +- Add `@eventOptions({passive: true})` to event handlers in tab-bar-scroller + - More efficient scrolling behavior, as `preventDefault` is never called - Implement icon-button in typescript ## [0.3.1] - 2018-10-08 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/README.md b/packages/checkbox/README.md index 87c189ab8..43df6575b 100644 --- a/packages/checkbox/README.md +++ b/packages/checkbox/README.md @@ -5,12 +5,12 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-checkbox is to use one of these online tools: - * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-checkbox-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-checkbox-example?path=index.html) - * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), - [CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](https://jsbin.com/qobefic/edit?html,output), + [CodePen](https://codepen.io/jcrestel/pen/KGWBLd). -* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). +* You can also copy [this HTML file](https://gist.githubusercontent.com/JCrestel/9ed0acbd4d372a174b89cd6c58457636/raw/eadc711e5c4b89d9de3dea0d89e1d3797e0eaba3/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). * When you're ready to use mwc-checkbox in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. diff --git a/packages/checkbox/src/mwc-checkbox.ts b/packages/checkbox/src/mwc-checkbox.ts index 70703bab5..31f17b7dd 100644 --- a/packages/checkbox/src/mwc-checkbox.ts +++ b/packages/checkbox/src/mwc-checkbox.ts @@ -91,7 +91,6 @@ 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 = () => { + private _changeHandler() { this.checked = this.formElement.checked; this.indeterminate = this.formElement.indeterminate; this.mdcFoundation.handleChange(); } - private _animationEndHandler = () => { + private _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..38365ffba 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(); + private _handleScrimClick() { + this.mdcFoundation.handleScrimClick() + }; @observer(function(this: Drawer, value: boolean) { if (this.type === '') { diff --git a/packages/formfield/src/mwc-formfield.ts b/packages/formfield/src/mwc-formfield.ts index b08c6f1bd..7e561586c 100644 --- a/packages/formfield/src/mwc-formfield.ts +++ b/packages/formfield/src/mwc-formfield.ts @@ -102,11 +102,11 @@ export class Formfield extends BaseElement { return html`${this.renderStyle()}
- +
`; } - protected labelClick = () => { + private _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..063864659 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 = () => { + private _changeHandler() { this.checked = this.formElement.checked; if (this._selectionController) { this._selectionController.update(this); } } - private _focusHandler = () => { + private _focusHandler() { if (this._selectionController) { this._selectionController.focus(this); } } - private _clickHandler = () => { + private _clickHandler() { // Firefox has weird behavior with radios if they are not focused this.formElement.focus(); } diff --git a/packages/switch/src/mwc-switch.ts b/packages/switch/src/mwc-switch.ts index c89a1a08e..557e6ceab 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) => { + private _changeHandler(e: Event) { this.mdcFoundation.handleChange(e); // catch "click" event and sync properties this.checked = this.formElement.checked; diff --git a/packages/tab-bar/src/mwc-tab-bar.ts b/packages/tab-bar/src/mwc-tab-bar.ts index a74f687c8..2bed02530 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); + private _handleTabInteraction(e: Event) { + this.mdcFoundation.handleTabInteraction(e); + } - private _handleKeydown = (e) => this.mdcFoundation.handleKeyDown(e); + private _handleKeydown(e: Event) { + this.mdcFoundation.handleKeyDown(e); + } renderStyle() { return style; diff --git a/packages/tab-scroller/src/mwc-tab-scroller.ts b/packages/tab-scroller/src/mwc-tab-scroller.ts index 84162615a..37a4a72d5 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,11 +54,16 @@ export class TabScroller extends BaseElement { @query('.mdc-tab-scroller__scroll-content') protected scrollContentElement!: HTMLElement; - private _handleInteraction = (e) => this.mdcFoundation.handleInteraction(e); + @eventOptions({passive: true}) + private _handleInteraction(e: Event) { + this.mdcFoundation.handleInteraction(e); + } - private _handleTransitionEnd = (e) => this.mdcFoundation.handleTransitionEnd(e); + private _handleTransitionEnd(e: Event) { + this.mdcFoundation.handleTransitionEnd(e); + } - private _srollbarHeight = -1; + private _scrollbarHeight = -1; renderStyle() { return style; @@ -69,6 +74,7 @@ export class TabScroller extends BaseElement { ${this.renderStyle()}
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; }, }; } diff --git a/packages/tab/src/mwc-tab.ts b/packages/tab/src/mwc-tab.ts index d3b51a450..d16b7387f 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) => { + private _handleClick(e: Event) { this.mdcFoundation.handleClick(e); }