diff --git a/addon/mixins/events-mixin.js b/addon/mixins/events-mixin.js deleted file mode 100644 index 7e817625f..000000000 --- a/addon/mixins/events-mixin.js +++ /dev/null @@ -1,63 +0,0 @@ -/* eslint-disable prettier/prettier */ -/** - * @module ember-paper - */ -import Mixin from '@ember/object/mixin'; - -/** - * @class EventsMixin - * @extends Ember.Mixin - */ -export default Mixin.create({ - didInsertElement() { - this._super(...arguments); - // Avoid attaching mouse events directly to component and it has been deprecated due to performance issue. - // Please check https://deprecations.emberjs.com/v3.x/#toc_action-mouseenter-leave-move - this.element.addEventListener('mouseMove', this.handleMouseMove.bind(this)); - this.element.addEventListener('mouseleave', this.handleMouseLeave.bind(this)); - }, - willDestroyElement() { - this._super(...arguments); - this.element.removeEventListener('mouseMove', this.handleMouseMove.bind(this)); - this.element.removeEventListener('mouseleave', this.handleMouseLeave.bind(this)); - }, - touchStart(e) { - return this.down(e); - }, - mouseDown(e) { - this.down(e); - }, - touchEnd(e) { - return this.up(e); - }, - mouseUp(e) { - return this.up(e); - }, - touchCancel(e) { - return this.up(e); - }, - handleMouseLeave(e) { - return this.up(e); - }, - up() {}, - down() {}, - contextMenu() {}, - - /* - * Move events - */ - - handleMouseMove(e) { - return this.move(e); - }, - - touchMove(e) { - return this.move(e); - }, - - pointerMove(e) { - return this.move(e); - }, - - move() {} -}); diff --git a/addon/mixins/focusable-mixin.js b/addon/mixins/focusable-mixin.js index 0b42ddfd9..277a154a9 100644 --- a/addon/mixins/focusable-mixin.js +++ b/addon/mixins/focusable-mixin.js @@ -1,20 +1,15 @@ -/* eslint-disable prettier/prettier */ /** * @module ember-paper */ import Mixin from '@ember/object/mixin'; - import { computed } from '@ember/object'; -import EventsMixin from './events-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** * @class FocusableMixin * @extends Ember.Mixin - * @uses EventsMixin */ -export default Mixin.create(EventsMixin, { - +export default Mixin.create({ disabled: false, pressed: false, active: false, @@ -24,12 +19,12 @@ export default Mixin.create(EventsMixin, { classNameBindings: ['focused:md-focused'], attributeBindings: ['tabindex', 'disabledAttr:disabled'], - disabledAttr: computed('disabled', function() { + disabledAttr: computed('disabled', function () { return this.disabled ? 'disabled' : null; }), - // Alow element to be focusable by supplying a tabindex 0 - tabindex: computed('disabled', function() { + // Allow element to be focusable by supplying a tabindex 0 + tabindex: computed('disabled', function () { return this.disabled ? '-1' : '0'; }), @@ -40,15 +35,18 @@ export default Mixin.create(EventsMixin, { focusOnlyOnKey: false, _mouseEnterHandler: undefined, + _mouseMoveHandler: undefined, _mouseLeaveHandler: undefined, didInsertElement() { this._super(...arguments); this._mouseEnterHandler = this.handleMouseEnter.bind(this); + this._mouseMoveHandler = this.handleMouseMove.bind(this); this._mouseLeaveHandler = this.handleMouseLeave.bind(this); this.element.addEventListener('mouseenter', this._mouseEnterHandler); + this.element.addEventListener('mousemove', this._mouseMoveHandler); this.element.addEventListener('mouseleave', this._mouseLeaveHandler); }, @@ -56,9 +54,11 @@ export default Mixin.create(EventsMixin, { this._super(...arguments); this.element.removeEventListener('mouseenter', this._mouseEnterHandler); + this.element.removeEventListener('mousemove', this._mouseMoveHandler); this.element.removeEventListener('mouseleave', this._mouseLeaveHandler); this._mouseEnterHandler = undefined; + this._mouseMoveHandler = undefined; this._mouseLeaveHandler = undefined; }, @@ -68,7 +68,7 @@ export default Mixin.create(EventsMixin, { * They bubble by default. */ focusIn() { - if (!this.disabled && !this.focusOnlyOnKey || !this.pressed) { + if ((!this.disabled && !this.focusOnlyOnKey) || !this.pressed) { this.set('focused', true); } }, @@ -82,12 +82,40 @@ export default Mixin.create(EventsMixin, { invokeAction(this, 'onMouseEnter', e); }, + touchStart(e) { + return this.down(e); + }, + + mouseDown(e) { + this.down(e); + }, + + touchEnd(e) { + return this.up(e); + }, + + mouseUp(e) { + return this.up(e); + }, + + touchCancel(e) { + return this.up(e); + }, + handleMouseLeave(e) { this.set('hover', false); - this._super(e); + this.up(e); invokeAction(this, 'onMouseLeave', e); }, + up() { + this.set('pressed', false); + + if (!this.toggle) { + this.set('active', false); + } + }, + down() { this.set('pressed', true); if (this.toggle) { @@ -96,12 +124,23 @@ export default Mixin.create(EventsMixin, { this.set('active', true); } }, + contextMenu() {}, - up() { - this.set('pressed', false); + /* + * Move events + */ - if (!this.toggle) { - this.set('active', false); - } - } + handleMouseMove(e) { + return this.move(e); + }, + + touchMove(e) { + return this.move(e); + }, + + pointerMove(e) { + return this.move(e); + }, + + move() {}, });