IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added flag to enable tap clicks for SVG in tested circumstances.

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-05 16:29:50 +02:00
parent f68d8b53a3
commit d0c89a78c2
4 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dist/iwmlib.js vendored
View File

@ -5164,6 +5164,7 @@
height = null, // required
resizable = false,
clickOnTap = false,
triggerSVGClicks = false,
allowClickDistance = 44,
verbose = true,
onResize = null,
@ -5216,6 +5217,7 @@
this.throwVisibility = Math.min(width, height, throwVisibility);
this.container = container;
this.clickOnTap = clickOnTap;
this.triggerSVGClicks = triggerSVGClicks;
this.scale = startScale;
this.rotationDegrees = this.startRotationDegrees;
this.transformOrigin = transformOrigin;
@ -5272,9 +5274,11 @@
Therefore we make an exception and let the original click event through.
*/
if (event.target.ownerSVGElement) {
return
if (this.triggerSVGClicks) {
return
}
}
if (event.isTrusted) {
else if (event.isTrusted) {
Events.stop(event);
}
}, true);
@ -5456,7 +5460,8 @@
if (nearestNode.tagName == 'svg') {
let handler = this.tapNodes.get(nearestNode);
console.log("Clicking beneath SVG: to be done", handler);
// nearestNode.dispatchEvent(new Event('click'))
if (this.triggerSVGClicks)
nearestNode.dispatchEvent(new Event('click'));
return
}
console.log("nearestNode clicked");
@ -6776,7 +6781,7 @@
// create and dispatch event
//--------------------
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts);
const eventStart = Event$1.create(elem, coords, opts.eventTypes[0], eventOpts);
if (this.opts.debug) console.log('dispatch event', eventStart);
elem.dispatchEvent(eventStart);
@ -6789,7 +6794,7 @@
// create and dispatch event
//--------------------
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts);
const eventComplete = Event$1.create(elem, coords, opts.eventTypes[1], eventOpts);
if (this.opts.debug) console.log('dispatch event', eventComplete);
elem.dispatchEvent(eventComplete);
@ -6872,7 +6877,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -6886,7 +6891,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -6900,7 +6905,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -7038,7 +7043,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -7052,7 +7057,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -7066,7 +7071,7 @@
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts);
const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
@ -7442,7 +7447,7 @@
* @ignore
* @class
*/
class Event {
class Event$1 {
/**
* Creates an event object.

11
dist/iwmlib.pixi.js vendored
View File

@ -6929,6 +6929,7 @@
height = null, // required
resizable = false,
clickOnTap = false,
triggerSVGClicks = false,
allowClickDistance = 44,
verbose = true,
onResize = null,
@ -6981,6 +6982,7 @@
this.throwVisibility = Math.min(width, height, throwVisibility);
this.container = container;
this.clickOnTap = clickOnTap;
this.triggerSVGClicks = triggerSVGClicks;
this.scale = startScale;
this.rotationDegrees = this.startRotationDegrees;
this.transformOrigin = transformOrigin;
@ -7037,9 +7039,11 @@
Therefore we make an exception and let the original click event through.
*/
if (event.target.ownerSVGElement) {
return
if (this.triggerSVGClicks) {
return
}
}
if (event.isTrusted) {
else if (event.isTrusted) {
Events$1.stop(event);
}
}, true);
@ -7221,7 +7225,8 @@
if (nearestNode.tagName == 'svg') {
let handler = this.tapNodes.get(nearestNode);
console.log("Clicking beneath SVG: to be done", handler);
// nearestNode.dispatchEvent(new Event('click'))
if (this.triggerSVGClicks)
nearestNode.dispatchEvent(new Event('click'));
return
}
console.log("nearestNode clicked");

9
lib/scatter.html
View File

@ -80,9 +80,6 @@ for(let key of ['women', 'king']) {
app.run()
animatePolygons()
</script>
<h1>
Interactive Content
</h1>
@ -102,6 +99,11 @@ can be configured by allowClickDistance. The default value is 44px.
<img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
<a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
<div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
<svg onclick="alert('svg clicked')" style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
<circle cx="50" cy="32" r="7" fill="white" />
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
</svg>
</div>
</div>
@ -115,6 +117,7 @@ can be configured by allowClickDistance. The default value is 44px.
height: 184,
clickOnTap: true,
throwVisibility: 88,
triggerSVGClicks: true,
minScale: 0.5,
maxScale: 1.5})

11
lib/scatter.js
View File

@ -1044,6 +1044,7 @@ export class DOMScatter extends AbstractScatter {
height = null, // required
resizable = false,
clickOnTap = false,
triggerSVGClicks = false,
allowClickDistance = 44,
verbose = true,
onResize = null,
@ -1096,6 +1097,7 @@ export class DOMScatter extends AbstractScatter {
this.throwVisibility = Math.min(width, height, throwVisibility)
this.container = container
this.clickOnTap = clickOnTap
this.triggerSVGClicks = triggerSVGClicks
this.scale = startScale
this.rotationDegrees = this.startRotationDegrees
this.transformOrigin = transformOrigin
@ -1152,9 +1154,11 @@ export class DOMScatter extends AbstractScatter {
Therefore we make an exception and let the original click event through.
*/
if (event.target.ownerSVGElement) {
return
if (this.triggerSVGClicks) {
return
}
}
if (event.isTrusted) {
else if (event.isTrusted) {
Events.stop(event)
}
}, true)
@ -1336,7 +1340,8 @@ export class DOMScatter extends AbstractScatter {
if (nearestNode.tagName == 'svg') {
let handler = this.tapNodes.get(nearestNode)
console.log("Clicking beneath SVG: to be done", handler)
// nearestNode.dispatchEvent(new Event('click'))
if (this.triggerSVGClicks)
nearestNode.dispatchEvent(new Event('click'))
return
}
console.log("nearestNode clicked")