_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Handle touch & mouse events on same time for cowebsite holder

Browse Source
This commit is contained in:
Alexis Faizeau 2021-11-24 18:38:39 +01:00
parent 445599416c
commit 07c01d81bf
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -1,7 +1,6 @@
import { HtmlUtils } from "./HtmlUtils"; import { HtmlUtils } from "./HtmlUtils";
import { Subject } from "rxjs"; import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener"; import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager"; import { waScaleManager } from "../Phaser/Services/WaScaleManager";
import { ICON_URL } from "../Enum/EnvironmentVariable"; import { ICON_URL } from "../Enum/EnvironmentVariable";
@ -101,7 +100,7 @@ class CoWebsiteManager {
this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId); this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId);
this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId); this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId); this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId);
this.initResizeListeners(touchScreenManager.supportTouchScreen); this.initResizeListeners();
this.resizeObserver.observe(this.cowebsiteDom); this.resizeObserver.observe(this.cowebsiteDom);
this.resizeObserver.observe(this.cowebsiteContainerDom); this.resizeObserver.observe(this.cowebsiteContainerDom);
@ -170,7 +169,7 @@ class CoWebsiteManager {
); );
} }
private initResizeListeners(touchMode: boolean) { private initResizeListeners() {
const movecallback = (event: MouseEvent | TouchEvent) => { const movecallback = (event: MouseEvent | TouchEvent) => {
let x, y; let x, y;
if (event.type === "mousemove") { if (event.type === "mousemove") {
@ -189,23 +188,32 @@ class CoWebsiteManager {
this.fire(); this.fire();
}; };
this.cowebsiteAsideDom.addEventListener(touchMode ? "touchstart" : "mousedown", (event) => { this.cowebsiteAsideDom.addEventListener("mousedown", (event) => {
this.cowebsiteMainDom.style.display = "none"; this.cowebsiteMainDom.style.display = "none";
this.resizing = true; this.resizing = true;
if (touchMode) { document.addEventListener("mousemove", movecallback);
const touchEvent = (event as TouchEvent).touches[0];
this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY };
}
document.addEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
}); });
document.addEventListener(touchMode ? "touchend" : "mouseup", (event) => { document.addEventListener("mouseup", (event) => {
if (!this.resizing) return;
document.removeEventListener("mousemove", movecallback);
this.cowebsiteMainDom.style.display = "block";
this.resizing = false;
this.cowebsiteMainDom.style.display = "flex";
});
this.cowebsiteAsideDom.addEventListener("touchstart", (event) => {
this.cowebsiteMainDom.style.display = "none";
this.resizing = true;
const touchEvent = event.touches[0];
this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY };
document.addEventListener("touchmove", movecallback);
});
document.addEventListener("touchend", (event) => {
if (!this.resizing) return; if (!this.resizing) return;
if (touchMode) {
this.previousTouchMoveCoordinates = null; this.previousTouchMoveCoordinates = null;
} document.removeEventListener("touchmove", movecallback);
document.removeEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
this.cowebsiteMainDom.style.display = "block"; this.cowebsiteMainDom.style.display = "block";
this.resizing = false; this.resizing = false;
this.cowebsiteMainDom.style.display = "flex"; this.cowebsiteMainDom.style.display = "flex";