From be681fd8b912353c2317ecb118eebda949b74c51 Mon Sep 17 00:00:00 2001 From: weiz18 Date: Fri, 24 Feb 2023 12:29:45 +0000 Subject: [PATCH 1/3] fix(dom): handle slotted parent transform position --- src/js/utils/dom.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index d86700f6ec..265d446c4e 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -578,7 +578,15 @@ export function getPointerPosition(el, event) { translated.y += values[13]; } - item = item.parentNode; + if (item.assignedSlot && item.assignedSlot.parentElement && window.WebKitCSSMatrix) { + const transformValue = window.getComputedStyle(item.assignedSlot.parentElement).transform; + const matrix = new window.WebKitCSSMatrix(transformValue); + + translated.x += matrix.m41; + translated.y += matrix.m42; + } + + item = item.parentNode || item.host; } } From 4ad3b9478d45450e10cd47212e5b24c9511df0ee Mon Sep 17 00:00:00 2001 From: weiz18 Date: Thu, 6 Jul 2023 15:27:22 +0100 Subject: [PATCH 2/3] fix(test): add test to cover getPointerPosition --- test/unit/utils/custom-element.test.js | 16 +++++ test/unit/utils/dom.test.js | 85 ++++++++++++++++++++++++++ 2 files changed, 101 insertions(+) diff --git a/test/unit/utils/custom-element.test.js b/test/unit/utils/custom-element.test.js index a60f793da7..f420a973e7 100644 --- a/test/unit/utils/custom-element.test.js +++ b/test/unit/utils/custom-element.test.js @@ -23,4 +23,20 @@ export class TestCustomElement extends HTMLElement { } } +export class TestSlotElement extends HTMLElement { + + constructor() { + super(); + const shadowRoot = this.attachShadow({ mode: 'open' }); + const wrapperEl = document.createElement('div'); + + wrapperEl.style = this.dataset.style; + const slot = document.createElement('slot'); + + wrapperEl.appendChild(slot); + shadowRoot.appendChild(wrapperEl); + } +} + window.customElements.define('test-custom-element', TestCustomElement); +window.customElements.define('test-slot-element', TestSlotElement); diff --git a/test/unit/utils/dom.test.js b/test/unit/utils/dom.test.js index 811cd4c617..a7cf8a2d1a 100644 --- a/test/unit/utils/dom.test.js +++ b/test/unit/utils/dom.test.js @@ -3,6 +3,7 @@ import document from 'global/document'; import sinon from 'sinon'; import * as Dom from '../../../src/js/utils/dom.js'; import TestHelpers from '../test-helpers.js'; +import * as browser from '../../../src/js/utils/browser.js'; QUnit.module('utils/dom'); @@ -686,3 +687,87 @@ QUnit.test('isSingleLeftClick() checks return values for mousedown event', funct assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on simulated mobiles is a single left click'); }); + +QUnit.only('dom.getPointerPosition should return position with translated', function(assert) { + const wrapper = document.createElement('div'); + + const width = '100px'; + const height = '50px'; + + wrapper.style.width = width; + wrapper.style.height = height; + wrapper.style.position = 'absolute'; + wrapper.style.top = '0'; + wrapper.style.left = '0'; + + let position; + + document.body.appendChild(wrapper); + const event = { + offsetX: 20, + offsetY: 0, + target: wrapper + }; + + position = Dom.getPointerPosition(wrapper, event); + + // Default click on element without any transform + assert.deepEqual(position, { x: 0.2, y: 1 }); + + const origIOS = browser.IS_IOS; + + wrapper.style.transform = 'translate(5px)'; + + const transformedTouch = { + offsetX: 20, + offsetY: 0, + target: wrapper, + changedTouches: [ + { + pageX: 20, + pageY: 0 + } + ] + }; + + // Ignore translate x/y when not in IOS + position = Dom.getPointerPosition(wrapper, transformedTouch); + assert.deepEqual(position, { x: 0.2, y: 1 }); + + // Add calculate with IOS to true + browser.stub_IS_IOS(true); + position = Dom.getPointerPosition(wrapper, transformedTouch); + assert.deepEqual(position, { x: 0.15, y: 1 }); + + // Create complex template where position of each video is controlled by + // a web component with transform + wrapper.style.transform = ''; + const progressStyle = `position: absolute; height: ${height}; width: ${width};`; + + wrapper.innerHTML = ` + +
+
+
+
+
+
+ + `; + document.body.appendChild(wrapper); + + const slottedProgressBar = wrapper.querySelector('div.progress-02'); + + // Handle slot elements pointer position + transformedTouch.target = slottedProgressBar; + position = Dom.getPointerPosition(slottedProgressBar, transformedTouch); + assert.deepEqual(position, { x: 0.15, y: 1 }); + + // Non IOS slot element pointer position + browser.stub_IS_IOS(false); + position = Dom.getPointerPosition(slottedProgressBar, transformedTouch); + assert.deepEqual(position, { x: 0.20, y: 1 }); + + browser.stub_IS_IOS(origIOS); + +}); From bc7e49c515e5f584e92723783782322fb639e33a Mon Sep 17 00:00:00 2001 From: mister-ben Date: Thu, 6 Jul 2023 16:51:18 +0200 Subject: [PATCH 3/3] run all tests --- test/unit/utils/dom.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/utils/dom.test.js b/test/unit/utils/dom.test.js index a7cf8a2d1a..1964fb1ec0 100644 --- a/test/unit/utils/dom.test.js +++ b/test/unit/utils/dom.test.js @@ -688,7 +688,7 @@ QUnit.test('isSingleLeftClick() checks return values for mousedown event', funct assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on simulated mobiles is a single left click'); }); -QUnit.only('dom.getPointerPosition should return position with translated', function(assert) { +QUnit.test('dom.getPointerPosition should return position with translated', function(assert) { const wrapper = document.createElement('div'); const width = '100px';