From 84ea33f02965953d50a1d4614d67e3ffcefc784b Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Fri, 5 Jul 2019 15:03:22 +0200 Subject: [PATCH] Added click handler to avoid double calls of click event handler. --- dist/iwmlib.js | 29 ++++++++++++++++++++--------- dist/iwmlib.pixi.js | 33 ++++++++++++++++++++++----------- lib/scatter.js | 29 ++++++++++++++++++++--------- 3 files changed, 62 insertions(+), 29 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 8954532..43c0a3f 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -5262,6 +5262,17 @@ }); this.resizeButton = button; } + if (clickOnTap) { + /* Since the tap triggers a synthetic click event + we must prevent the original trusted click event which + is also dispatched by the system. + */ + element.addEventListener('click', event => { + if (event.isTrusted) { + Events.stop(event); + } + }, true); + } container.add(this); } @@ -5422,23 +5433,24 @@ } onTap(event, interaction, point) { - + if (this.clickOnTap) { let directNode = document.elementFromPoint(event.clientX, event.clientY); - console.log("onTap", directNode, this.isClickable(directNode)); + console.log("onTap", event); if (this.isClickable(directNode)) { directNode.click(); } else { let nearestNode = this.nearestClickable(event); if (this.isClickable(nearestNode)) { - + if (nearestNode.tagName == 'svg') { - let handler = this.tapNodes.get(nearestNode); - console.log("Clicking beneath SVG: to be done", handler); - Events.stop(event); - return + let handler = this.tapNodes.get(nearestNode); + console.log("Clicking beneath SVG: to be done", handler); + Events.stop(event); + return } + console.log("nearestNode clicked"); nearestNode.click(); } } @@ -5472,7 +5484,7 @@ return true if (node.hasAttribute("onclick")) return true - if (this.tapNodes.has(node)) + if (this.tapNodes.has(node)) return true return false } @@ -5516,7 +5528,6 @@ let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickable = clickables[closestClickIndex]; if (distances[closestClickIndex] < this.allowClickDistance) { - console.log("found closest clickables", closestClickable); return closestClickable } return null diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 0044dd1..d5d3c44 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -7027,6 +7027,17 @@ }); this.resizeButton = button; } + if (clickOnTap) { + /* Since the tap triggers a synthetic click event + we must prevent the original trusted click event which + is also dispatched by the system. + */ + element.addEventListener('click', event => { + if (event.isTrusted) { + Events$1.stop(event); + } + }, true); + } container.add(this); } @@ -7187,23 +7198,24 @@ } onTap(event, interaction, point) { - + if (this.clickOnTap) { let directNode = document.elementFromPoint(event.clientX, event.clientY); - console.log("onTap", directNode, this.isClickable(directNode)); + console.log("onTap", event); if (this.isClickable(directNode)) { directNode.click(); } else { let nearestNode = this.nearestClickable(event); if (this.isClickable(nearestNode)) { - + if (nearestNode.tagName == 'svg') { - let handler = this.tapNodes.get(nearestNode); - console.log("Clicking beneath SVG: to be done", handler); - Events$1.stop(event); - return + let handler = this.tapNodes.get(nearestNode); + console.log("Clicking beneath SVG: to be done", handler); + Events$1.stop(event); + return } + console.log("nearestNode clicked"); nearestNode.click(); } } @@ -7237,7 +7249,7 @@ return true if (node.hasAttribute("onclick")) return true - if (this.tapNodes.has(node)) + if (this.tapNodes.has(node)) return true return false } @@ -7281,7 +7293,6 @@ let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickable = clickables[closestClickIndex]; if (distances[closestClickIndex] < this.allowClickDistance) { - console.log("found closest clickables", closestClickable); return closestClickable } return null @@ -14840,7 +14851,7 @@ * @extends Popup * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest} */ - class PopupMenu extends Popup { + class PopupMenu$1 extends Popup { /** * Creates an instance of a PopupMenu. @@ -15489,7 +15500,7 @@ window.Stylus = Stylus; window.Switch = Switch; window.Popup = Popup; - window.PopupMenu = PopupMenu; + window.PopupMenu = PopupMenu$1; window.Modal = Modal; window.Volatile = Volatile; window.Message = Message; diff --git a/lib/scatter.js b/lib/scatter.js index 8c09ba1..26ddb59 100644 --- a/lib/scatter.js +++ b/lib/scatter.js @@ -1142,6 +1142,17 @@ export class DOMScatter extends AbstractScatter { }) this.resizeButton = button } + if (clickOnTap) { + /* Since the tap triggers a synthetic click event + we must prevent the original trusted click event which + is also dispatched by the system. + */ + element.addEventListener('click', event => { + if (event.isTrusted) { + Events.stop(event) + } + }, true) + } container.add(this) } @@ -1302,23 +1313,24 @@ export class DOMScatter extends AbstractScatter { } onTap(event, interaction, point) { - + if (this.clickOnTap) { let directNode = document.elementFromPoint(event.clientX, event.clientY) - console.log("onTap", directNode, this.isClickable(directNode)) + console.log("onTap", event) if (this.isClickable(directNode)) { directNode.click() } else { let nearestNode = this.nearestClickable(event) if (this.isClickable(nearestNode)) { - + if (nearestNode.tagName == 'svg') { - let handler = this.tapNodes.get(nearestNode) - console.log("Clicking beneath SVG: to be done", handler) - Events.stop(event) - return + let handler = this.tapNodes.get(nearestNode) + console.log("Clicking beneath SVG: to be done", handler) + Events.stop(event) + return } + console.log("nearestNode clicked") nearestNode.click() } } @@ -1352,7 +1364,7 @@ export class DOMScatter extends AbstractScatter { return true if (node.hasAttribute("onclick")) return true - if (this.tapNodes.has(node)) + if (this.tapNodes.has(node)) return true return false } @@ -1396,7 +1408,6 @@ export class DOMScatter extends AbstractScatter { let closestClickIndex = distances.indexOf(Math.min(...distances)) let closestClickable = clickables[closestClickIndex] if (distances[closestClickIndex] < this.allowClickDistance) { - console.log("found closest clickables", closestClickable) return closestClickable } return null