FIX: Register pan events for touch only

* touch events - only register touch, not pointer events
* immediately request redraw frame, do not wait for after render to fire.
This commit is contained in:
Jeff Wong 2019-02-04 08:27:40 -08:00 committed by Neil Lalonde
parent 8573ac0d18
commit 9564eac72a
2 changed files with 24 additions and 39 deletions

View File

@ -137,6 +137,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
this._isPanning = true; this._isPanning = true;
$("header.d-header").removeClass("scroll-down scroll-up"); $("header.d-header").removeClass("scroll-down scroll-up");
this.eventDispatched(this._leftMenuAction(), "header"); this.eventDispatched(this._leftMenuAction(), "header");
window.requestAnimationFrame(() => this.panMove(e));
} else if ( } else if (
windowWidth - center.x < SCREEN_EDGE_MARGIN && windowWidth - center.x < SCREEN_EDGE_MARGIN &&
!this.$(".menu-panel").length && !this.$(".menu-panel").length &&
@ -148,6 +149,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
this._isPanning = true; this._isPanning = true;
$("header.d-header").removeClass("scroll-down scroll-up"); $("header.d-header").removeClass("scroll-down scroll-up");
this.eventDispatched(this._rightMenuAction(), "header"); this.eventDispatched(this._rightMenuAction(), "header");
window.requestAnimationFrame(() => this.panMove(e));
} else { } else {
this._isPanning = false; this._isPanning = false;
} }
@ -242,13 +244,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
} }
}); });
if (this.site.mobileView) { this.addTouchListeners($("body"));
$("body")
.on("pointerdown", e => this._panStart(e))
.on("pointermove", e => this._panMove(e))
.on("pointerup", e => this._panMove(e))
.on("pointercancel", e => this._panMove(e));
}
}, },
willDestroyElement() { willDestroyElement() {
@ -260,13 +256,8 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
this.appEvents.off("header:hide-topic"); this.appEvents.off("header:hide-topic");
this.appEvents.off("dom:clean"); this.appEvents.off("dom:clean");
if (this.site.mobileView) { this.removeTouchListeners($("body"));
$("body")
.off("pointerdown")
.off("pointerup")
.off("pointermove")
.off("pointercancel");
}
Ember.run.cancel(this._scheduledRemoveAnimate); Ember.run.cancel(this._scheduledRemoveAnimate);
window.cancelAnimationFrame(this._scheduledMovingAnimation); window.cancelAnimationFrame(this._scheduledMovingAnimation);
}, },

View File

@ -12,16 +12,17 @@ export default Ember.Mixin.create({
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
this.addTouchListeners(this.$());
},
willDestroyElement() {
this._super(...arguments);
this.removeTouchListeners(this.$());
},
addTouchListeners($element) {
if (this.site.mobileView) { if (this.site.mobileView) {
if ("onpointerdown" in document.documentElement) { $element
this.$()
.on("pointerdown", e => this._panStart(e))
.on("pointermove", e => this._panMove(e, e))
.on("pointerup", e => this._panMove(e, e))
.on("pointercancel", e => this._panMove(e, e));
} else if ("ontouchstart" in document.documentElement) {
this.$()
.on("touchstart", e => this._panStart(e.touches[0])) .on("touchstart", e => this._panStart(e.touches[0]))
.on("touchmove", e => { .on("touchmove", e => {
const touchEvent = e.touches[0]; const touchEvent = e.touches[0];
@ -31,18 +32,11 @@ export default Ember.Mixin.create({
.on("touchend", e => this._panMove({ type: "pointerup" }, e)) .on("touchend", e => this._panMove({ type: "pointerup" }, e))
.on("touchcancel", e => this._panMove({ type: "pointercancel" }, e)); .on("touchcancel", e => this._panMove({ type: "pointercancel" }, e));
} }
}
}, },
willDestroyElement() { removeTouchListeners($element) {
this._super(...arguments);
if (this.site.mobileView) { if (this.site.mobileView) {
this.$() $element
.off("pointerdown")
.off("pointerup")
.off("pointermove")
.off("pointercancel")
.off("touchstart") .off("touchstart")
.off("touchmove") .off("touchmove")
.off("touchend") .off("touchend")