Skip to content

Commit

Permalink
Remove deprecated mouse events
Browse files Browse the repository at this point in the history
  • Loading branch information
@btecu
btecu committed May 25, 2021
1 parent 802476f commit 6a3a440
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 542 deletions.
40 changes: 0 additions & 40 deletions packages/@ember/-internals/glimmer/lib/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,46 +708,6 @@ const Component = CoreView.extend(
!eventNames.length
);
}

deprecate(
`${this}: Using \`mouseEnter\` event handler methods in components has been deprecated.`,
this.mouseEnter === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
deprecate(
`${this}: Using \`mouseLeave\` event handler methods in components has been deprecated.`,
this.mouseLeave === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
deprecate(
`${this}: Using \`mouseMove\` event handler methods in components has been deprecated.`,
this.mouseMove === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
},

get _dispatcher(): EventDispatcher | null {
Expand Down
19 changes: 1 addition & 18 deletions packages/@ember/-internals/glimmer/lib/modifiers/action.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,25 +216,8 @@ class ActionModifierManager implements InternalModifierManager<ActionState, obje
}

let actionId = uuid();
let actionState = new ActionState(element, owner, actionId, actionArgs, named, positional);

deprecate(
`Using the \`{{action}}\` modifier with \`${actionState.eventName}\` events has been deprecated.`,
actionState.eventName !== 'mouseEnter' &&
actionState.eventName !== 'mouseLeave' &&
actionState.eventName !== 'mouseMove',
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_action-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);

return actionState;
return new ActionState(element, actionId, actionArgs, named, positional);
}

getDebugName(): string {
Expand Down
237 changes: 0 additions & 237 deletions packages/@ember/-internals/glimmer/tests/integration/event-dispatcher-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,243 +273,6 @@ moduleFor(

this.$('#is-done').trigger('click');
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave'](assert) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// mouse moves over #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: outer });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, outer);

// mouse moves over #inner
runTask(() => {
this.$(inner).trigger('mouseover', { relatedTarget: outer });
this.$(outer).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was not triggered again');

// mouse moves out of #inner
runTask(() => {
this.$(inner).trigger('mouseout', { relatedTarget: outer });
this.$(outer).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 0, 'mouseleave event was not triggered');

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: outer });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, outer);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter on SVG elements'](assert) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
tagName: 'svg',
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<g id="inner"></g>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// mouse moves over #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: outer });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, outer);

// mouse moves over #inner
runTask(() => {
this.$(inner).trigger('mouseover', { relatedTarget: outer });
this.$(outer).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was not triggered again');

// mouse moves out of #inner
runTask(() => {
this.$(inner).trigger('mouseout', { relatedTarget: outer });
this.$(outer).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 0, 'mouseleave event was not triggered');

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: outer });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, outer);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events'](
assert
) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// we replicate fast mouse movement, where mouseover is fired directly in #inner, skipping #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, inner);

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, inner);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events and subcomponent'](
assert
) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-outer', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `{{yield}}`,
});

this.registerComponent('x-inner', {
ComponentClass: Component.extend(),
template: ``,
});

expectDeprecation(
() => this.render(`{{#x-outer id="outer"}}{{x-inner id="inner"}}{{/x-outer}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// we replicate fast mouse movement, where mouseover is fired directly in #inner, skipping #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, inner);

// mouse moves out of #inner
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: inner });
});

assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, inner);
}

['@test [DEPRECATED] supports mouseMove events'](assert) {
let receivedEvent;

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseMove(event) {
receivedEvent = event;
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
/Using `mouseMove` event handler methods in components has been deprecated\./
);

this.render(`{{x-foo}}`);

runTask(() => this.$('#inner').trigger('mousemove'));
assert.ok(receivedEvent, 'mousemove event was triggered');
}
}
);

Expand Down
Loading

0 comments on commit 6a3a440

Please sign in to comment.