diff --git a/dist/iwmlib.js b/dist/iwmlib.js index dfe0a3c..1482c31 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -1100,17 +1100,19 @@ } static fromPageToNode(element, p) { - if (window.webkitConvertPointFromPageToNode) { - return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y)) - } - //return window.convertPointFromPageToNode(element, p.x, p.y) + // if (window.webkitConvertPointFromPageToNode) { + // return window.webkitConvertPointFromPageToNode(element, + // new WebKitPoint(p.x, p.y)) + // } + return window.convertPointFromPageToNode(element, p.x, p.y) } static fromNodeToPage(element, p) { - if (window.webkitConvertPointFromNodeToPage) { - return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y)) - } - //return window.convertPointFromNodeToPage(element, p.x, p.y) + // if (window.webkitConvertPointFromNodeToPage) { + // return window.webkitConvertPointFromNodeToPage(element, + // new WebKitPoint(p.x, p.y)) + // } + return window.convertPointFromNodeToPage(element, p.x, p.y) } } @@ -2326,7 +2328,8 @@ useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, - debug = false, + preventPointerClicks = true, + debug = false } = {} ) { this.debug = debug; @@ -2337,6 +2340,7 @@ this.useCapture = useCapture; this.capturePointerEvents = capturePointerEvents; this.cancelOnWindowOut = cancelOnWindowOut; + this.preventPointerClicks = preventPointerClicks; this.setupInteraction(); } @@ -2362,14 +2366,14 @@ if (this.debug) console.log('Pointer API' + window.PointerEvent); element.addEventListener( 'pointerdown', - (e) => { + e => { if (this.debug) console.log('pointerdown', e.pointerId); if (this.capture(e)) { if (this.capturePointerEvents) { try { element.setPointerCapture(e.pointerId); } catch (e) { - console.warn('Cannot setPointerCapture'); + console.warn('Cannot setPointerCapture', e.setPointerCapture); } } this.onStart(e); @@ -2379,7 +2383,7 @@ ); element.addEventListener( 'pointermove', - (e) => { + e => { if (this.debug) console.log('pointermove', e.pointerId, e.pointerType); if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { @@ -2392,7 +2396,7 @@ ); element.addEventListener( 'pointerup', - (e) => { + e => { if (this.debug) console.log('pointerup', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) { @@ -2407,7 +2411,7 @@ ); element.addEventListener( 'pointercancel', - (e) => { + e => { if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId); @@ -2418,7 +2422,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'pointerleave', - (e) => { + e => { if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, @@ -2429,7 +2433,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, @@ -2440,7 +2444,7 @@ if (this.cancelOnWindowOut) { window.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target); if (e.target == element) { this.onEnd(e); @@ -2453,7 +2457,7 @@ if (this.debug) console.log('Touch API'); element.addEventListener( 'touchstart', - (e) => { + e => { if (this.debug) console.log('touchstart', this.touchPoints(e)); if (this.capture(e)) { for (let touch of e.changedTouches) { @@ -2465,7 +2469,7 @@ ); element.addEventListener( 'touchmove', - (e) => { + e => { if (this.debug) console.log('touchmove', this.touchPoints(e), e); for (let touch of e.changedTouches) { this.onMove(touch); @@ -2478,7 +2482,7 @@ ); element.addEventListener( 'touchend', - (e) => { + e => { if (this.debug) console.log('touchend', this.touchPoints(e)); for (let touch of e.changedTouches) { this.onEnd(touch); @@ -2488,7 +2492,7 @@ ); element.addEventListener( 'touchcancel', - (e) => { + e => { if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length); for (let touch of e.changedTouches) { this.onEnd(touch); @@ -2501,7 +2505,7 @@ element.addEventListener( 'mousedown', - (e) => { + e => { if (this.debug) console.log('mousedown', e); if (this.capture(e)) { this.onStart(e); @@ -2511,7 +2515,7 @@ ); element.addEventListener( 'mousemove', - (e) => { + e => { // Dow we only use move events if the mouse is down? // HOver effects have to be implemented by other means // && Events.isMouseDown(e)) @@ -2525,7 +2529,7 @@ ); element.addEventListener( 'mouseup', - (e) => { + e => { if (this.debug) console.log('mouseup', e); this.onEnd(e); }, @@ -2535,7 +2539,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e); console.warn("Shouldn't happen: mouseout ends interaction"); @@ -2547,7 +2551,7 @@ if (this.cancelOnWindowOut) { window.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e); } @@ -2556,6 +2560,20 @@ ); } } + + if (this.preventPointerClicks) { + window.addEventListener( + 'click', + e => { + if (e instanceof PointerEvent) { + console.warn('Prevented pointer click'); + e.preventDefault(); + e.stopImmediatePropagation(); + } + }, + true + ); + } } isDescendant(parent, child) { @@ -2720,7 +2738,7 @@ useCapture = true, capturePointerEvents = true, mouseWheelElement = null, - logInteractionsAbove = 12, + logInteractionsAbove = 12 } = {} ) { super(element, target, { @@ -2728,7 +2746,7 @@ useCapture, capturePointerEvents, longPressTime, - mouseWheelElement, + mouseWheelElement }); this.logInteractionsAbove = logInteractionsAbove; } @@ -2882,7 +2900,7 @@ hammer.get('tap').set(opts); } - hammer.on(type, (event) => { + hammer.on(type, event => { cb(event); }); @@ -2896,7 +2914,7 @@ } } else { for (let j = 0; j < elements.length; j++) { - Hammer.on(elements[j], type, (event) => { + Hammer.on(elements[j], type, event => { cb(event); }); } @@ -2927,7 +2945,7 @@ if (Hammer.__hammers.has(element)) { const elementHammers = Hammer.__hammers.get(element); - elementHammers.forEach((it) => it.destroy()); + elementHammers.forEach(it => it.destroy()); Hammer.__hammers.delete(element); } } @@ -4700,42 +4718,14 @@ } nearestActive(event) { - let element = this.domNode; let activeNodes = this.activeNodes(); let globalClick = event.center ? event.center : { x: event.x, y: event.y }; - let localClick = Points$1.fromPageToNode(element, globalClick); - - let clickRects = activeNodes.map((link) => { - let rect = link.getBoundingClientRect(); - // Since the getBoundingClientRect is untransformed we cannot rely on it's size - // We need a transformed bottom right to calculate local width and height - let bottomRight = Points$1.fromPageToNode(element, { - x: rect.x + rect.width, - y: rect.y + rect.height, - }); - let topLeft = Points$1.fromPageToNode(element, rect); - let width = Math.abs(bottomRight.x - topLeft.x); - let height = Math.abs(bottomRight.y - topLeft.y); - let center = Points$1.fromPageToNode(element, { - x: rect.x + width / 2, - y: rect.y + height / 2, - }); - return { - x: topLeft.x, - y: topLeft.y, - width, - height, - center, - link, - } - }); - let distances = []; - clickRects.forEach((rect) => { - let distance = Points$1.distanceToRect(localClick, rect); + activeNodes.forEach((link) => { + let rect = link.getBoundingClientRect(); + let distance = Points$1.distanceToRect(globalClick, rect); distances.push(parseInt(distance)); }); - let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickable = activeNodes[closestClickIndex]; if (distances[closestClickIndex] < this.allowClickDistance) { @@ -4768,11 +4758,6 @@ } nodeTapped(node, event) { - console.log('nodeTapped', node, this.isClickable(node)); - if (this.isClickable(node)) { - this.simulateClick(node, event); - return true - } if (this.tapNodes.has(node)) { let handler = this.tapNodes.get(node); handler(event, node); @@ -4787,6 +4772,10 @@ } } } + if (this.isClickable(node)) { + this.simulateClick(node, event); + return true + } return false } @@ -8491,7 +8480,7 @@ */ static _replaceCallback(context, element, attributeVal) { if (element.tagName == 'A') { - element.addEventListener('pointerdown', (event) => { + element.addEventListener('click', (event) => { event.preventDefault(); }); } @@ -8720,6 +8709,12 @@ static _openPopup(context, src, position, content, options = {}) { if (this.debug) console.log('Card._openPopup', position); + console.log('context', context); + console.log('src', src); + console.log('position', position); + console.log('content', content); + console.log('options', options); + //logging if (src) { let strparts = src.split('/'); @@ -8904,7 +8899,9 @@ // Prevents loading the link in the current tab. // Prevents loading the link in the current tab. - if (event.type != 'Follow') event.preventDefault(); + if (event.type != 'Follow') { + event.preventDefault(); + } if (editable && event.type == 'click') { return false @@ -8952,6 +8949,8 @@ let selector = Card.popupHtmlSelector; let content = { html, selector }; + console.log('loadPopup', selector, html); + let isSame = Card._checkForActiveSource(context, src); Card._cleanup(context); diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 575c460..7cdf1fa 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -1745,17 +1745,19 @@ } static fromPageToNode(element, p) { - if (window.webkitConvertPointFromPageToNode) { - return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y)) - } - //return window.convertPointFromPageToNode(element, p.x, p.y) + // if (window.webkitConvertPointFromPageToNode) { + // return window.webkitConvertPointFromPageToNode(element, + // new WebKitPoint(p.x, p.y)) + // } + return window.convertPointFromPageToNode(element, p.x, p.y) } static fromNodeToPage(element, p) { - if (window.webkitConvertPointFromNodeToPage) { - return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y)) - } - //return window.convertPointFromNodeToPage(element, p.x, p.y) + // if (window.webkitConvertPointFromNodeToPage) { + // return window.webkitConvertPointFromNodeToPage(element, + // new WebKitPoint(p.x, p.y)) + // } + return window.convertPointFromNodeToPage(element, p.x, p.y) } } @@ -5898,7 +5900,8 @@ useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, - debug = false, + preventPointerClicks = true, + debug = false } = {} ) { this.debug = debug; @@ -5909,6 +5912,7 @@ this.useCapture = useCapture; this.capturePointerEvents = capturePointerEvents; this.cancelOnWindowOut = cancelOnWindowOut; + this.preventPointerClicks = preventPointerClicks; this.setupInteraction(); } @@ -5934,14 +5938,14 @@ if (this.debug) console.log('Pointer API' + window.PointerEvent); element.addEventListener( 'pointerdown', - (e) => { + e => { if (this.debug) console.log('pointerdown', e.pointerId); if (this.capture(e)) { if (this.capturePointerEvents) { try { element.setPointerCapture(e.pointerId); } catch (e) { - console.warn('Cannot setPointerCapture'); + console.warn('Cannot setPointerCapture', e.setPointerCapture); } } this.onStart(e); @@ -5951,7 +5955,7 @@ ); element.addEventListener( 'pointermove', - (e) => { + e => { if (this.debug) console.log('pointermove', e.pointerId, e.pointerType); if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events$1.isPointerDown(e))) { @@ -5964,7 +5968,7 @@ ); element.addEventListener( 'pointerup', - (e) => { + e => { if (this.debug) console.log('pointerup', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) { @@ -5979,7 +5983,7 @@ ); element.addEventListener( 'pointercancel', - (e) => { + e => { if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId); @@ -5990,7 +5994,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'pointerleave', - (e) => { + e => { if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, @@ -6001,7 +6005,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, @@ -6012,7 +6016,7 @@ if (this.cancelOnWindowOut) { window.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target); if (e.target == element) { this.onEnd(e); @@ -6025,7 +6029,7 @@ if (this.debug) console.log('Touch API'); element.addEventListener( 'touchstart', - (e) => { + e => { if (this.debug) console.log('touchstart', this.touchPoints(e)); if (this.capture(e)) { for (let touch of e.changedTouches) { @@ -6037,7 +6041,7 @@ ); element.addEventListener( 'touchmove', - (e) => { + e => { if (this.debug) console.log('touchmove', this.touchPoints(e), e); for (let touch of e.changedTouches) { this.onMove(touch); @@ -6050,7 +6054,7 @@ ); element.addEventListener( 'touchend', - (e) => { + e => { if (this.debug) console.log('touchend', this.touchPoints(e)); for (let touch of e.changedTouches) { this.onEnd(touch); @@ -6060,7 +6064,7 @@ ); element.addEventListener( 'touchcancel', - (e) => { + e => { if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length); for (let touch of e.changedTouches) { this.onEnd(touch); @@ -6073,7 +6077,7 @@ element.addEventListener( 'mousedown', - (e) => { + e => { if (this.debug) console.log('mousedown', e); if (this.capture(e)) { this.onStart(e); @@ -6083,7 +6087,7 @@ ); element.addEventListener( 'mousemove', - (e) => { + e => { // Dow we only use move events if the mouse is down? // HOver effects have to be implemented by other means // && Events.isMouseDown(e)) @@ -6097,7 +6101,7 @@ ); element.addEventListener( 'mouseup', - (e) => { + e => { if (this.debug) console.log('mouseup', e); this.onEnd(e); }, @@ -6107,7 +6111,7 @@ if (!this.capturePointerEvents) { element.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e); console.warn("Shouldn't happen: mouseout ends interaction"); @@ -6119,7 +6123,7 @@ if (this.cancelOnWindowOut) { window.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e); } @@ -6128,6 +6132,20 @@ ); } } + + if (this.preventPointerClicks) { + window.addEventListener( + 'click', + e => { + if (e instanceof PointerEvent) { + console.warn('Prevented pointer click'); + e.preventDefault(); + e.stopImmediatePropagation(); + } + }, + true + ); + } } isDescendant(parent, child) { @@ -6292,7 +6310,7 @@ useCapture = true, capturePointerEvents = true, mouseWheelElement = null, - logInteractionsAbove = 12, + logInteractionsAbove = 12 } = {} ) { super(element, target, { @@ -6300,7 +6318,7 @@ useCapture, capturePointerEvents, longPressTime, - mouseWheelElement, + mouseWheelElement }); this.logInteractionsAbove = logInteractionsAbove; } @@ -6454,7 +6472,7 @@ hammer.get('tap').set(opts); } - hammer.on(type, (event) => { + hammer.on(type, event => { cb(event); }); @@ -6468,7 +6486,7 @@ } } else { for (let j = 0; j < elements.length; j++) { - Hammer.on(elements[j], type, (event) => { + Hammer.on(elements[j], type, event => { cb(event); }); } @@ -6499,7 +6517,7 @@ if (Hammer.__hammers.has(element)) { const elementHammers = Hammer.__hammers.get(element); - elementHammers.forEach((it) => it.destroy()); + elementHammers.forEach(it => it.destroy()); Hammer.__hammers.delete(element); } } @@ -8083,42 +8101,14 @@ } nearestActive(event) { - let element = this.domNode; let activeNodes = this.activeNodes(); let globalClick = event.center ? event.center : { x: event.x, y: event.y }; - let localClick = Points.fromPageToNode(element, globalClick); - - let clickRects = activeNodes.map((link) => { - let rect = link.getBoundingClientRect(); - // Since the getBoundingClientRect is untransformed we cannot rely on it's size - // We need a transformed bottom right to calculate local width and height - let bottomRight = Points.fromPageToNode(element, { - x: rect.x + rect.width, - y: rect.y + rect.height, - }); - let topLeft = Points.fromPageToNode(element, rect); - let width = Math.abs(bottomRight.x - topLeft.x); - let height = Math.abs(bottomRight.y - topLeft.y); - let center = Points.fromPageToNode(element, { - x: rect.x + width / 2, - y: rect.y + height / 2, - }); - return { - x: topLeft.x, - y: topLeft.y, - width, - height, - center, - link, - } - }); - let distances = []; - clickRects.forEach((rect) => { - let distance = Points.distanceToRect(localClick, rect); + activeNodes.forEach((link) => { + let rect = link.getBoundingClientRect(); + let distance = Points.distanceToRect(globalClick, rect); distances.push(parseInt(distance)); }); - let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickable = activeNodes[closestClickIndex]; if (distances[closestClickIndex] < this.allowClickDistance) { @@ -8151,11 +8141,6 @@ } nodeTapped(node, event) { - console.log('nodeTapped', node, this.isClickable(node)); - if (this.isClickable(node)) { - this.simulateClick(node, event); - return true - } if (this.tapNodes.has(node)) { let handler = this.tapNodes.get(node); handler(event, node); @@ -8170,6 +8155,10 @@ } } } + if (this.isClickable(node)) { + this.simulateClick(node, event); + return true + } return false } diff --git a/lib/card/wrapper.js b/lib/card/wrapper.js index 9119758..83d4ad9 100644 --- a/lib/card/wrapper.js +++ b/lib/card/wrapper.js @@ -94,42 +94,14 @@ export default class CardWrapper extends Object { } nearestActive(event) { - let element = this.domNode let activeNodes = this.activeNodes() let globalClick = event.center ? event.center : { x: event.x, y: event.y } - let localClick = Points.fromPageToNode(element, globalClick) - - let clickRects = activeNodes.map((link) => { - let rect = link.getBoundingClientRect() - // Since the getBoundingClientRect is untransformed we cannot rely on it's size - // We need a transformed bottom right to calculate local width and height - let bottomRight = Points.fromPageToNode(element, { - x: rect.x + rect.width, - y: rect.y + rect.height, - }) - let topLeft = Points.fromPageToNode(element, rect) - let width = Math.abs(bottomRight.x - topLeft.x) - let height = Math.abs(bottomRight.y - topLeft.y) - let center = Points.fromPageToNode(element, { - x: rect.x + width / 2, - y: rect.y + height / 2, - }) - return { - x: topLeft.x, - y: topLeft.y, - width, - height, - center, - link, - } - }) - let distances = [] - clickRects.forEach((rect) => { - let distance = Points.distanceToRect(localClick, rect) + activeNodes.forEach((link) => { + let rect = link.getBoundingClientRect() + let distance = Points.distanceToRect(globalClick, rect) distances.push(parseInt(distance)) }) - let closestClickIndex = distances.indexOf(Math.min(...distances)) let closestClickable = activeNodes[closestClickIndex] if (distances[closestClickIndex] < this.allowClickDistance) {