github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-14 20:53:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Register pan events for touch only

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/discourse/components/site-header.js.es6
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);
}, },

44
app/assets/javascripts/discourse/mixins/pan-events.js.es6
View File

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