Support Shadow DOM; bugfixes

src/Fancybox/Fancybox.js

@@ -535,7 +535,7 @@ class Fancybox extends Base {
       return;
     }
 
-    let eventTarget = event.target;
+    let eventTarget = event.composedPath()[0];
 
     if (eventTarget.matches("[data-fancybox-close]")) {
       event.preventDefault();
@@ -660,6 +660,8 @@ class Fancybox extends Base {
       return;
     }
 
+    const target = event.composedPath()[0];
+
     const classList = document.activeElement && document.activeElement.classList;
     const isUIElement = classList && classList.contains("carousel__button");
 
@@ -667,7 +669,7 @@ class Fancybox extends Base {
     if (key !== "Escape" && !isUIElement) {
       let ignoreElements =
         event.target.isContentEditable ||
-        ["BUTTON", "TEXTAREA", "OPTION", "INPUT", "SELECT", "VIDEO"].indexOf(event.target.nodeName) !== -1;
+        ["BUTTON", "TEXTAREA", "OPTION", "INPUT", "SELECT", "VIDEO"].indexOf(target.nodeName) !== -1;
 
       if (ignoreElements) {
         return;
@@ -1274,7 +1276,9 @@ class Fancybox extends Base {
       return;
     }
 
-    let eventTarget = event.target;
+    const origTarget = event.composedPath()[0];
+
+    let eventTarget = origTarget;
 
     // Support `trigger` element, e.g., start fancybox from different DOM element, for example,
     // to have one preview image for hidden image gallery
@@ -1295,7 +1299,7 @@ class Fancybox extends Base {
     }
 
     if (!eventTarget) {
-      eventTarget = event.target;
+      eventTarget = origTarget;
     }
 
     // * Try to find matching openener
@@ -1332,7 +1336,7 @@ class Fancybox extends Base {
       options.event = event;
       options.target = target;
 
-      target.origTarget = event.target;
+      target.origTarget = origTarget;
 
       rez = Fancybox.fromOpener(matchingOpener, options);
 
@@ -1412,7 +1416,9 @@ class Fancybox extends Base {
     const groupValue = groupAttr && target ? target.getAttribute(`${groupAttr}`) : "";
 
     if (!target || groupValue || groupAll) {
-      items = [].slice.call(document.querySelectorAll(opener));
+      const $root = options.root || (target ? target.getRootNode() : document.body);
+
+      items = [].slice.call($root.querySelectorAll(opener));
     }
 
     if (target && !groupAll) {

src/Fancybox/plugins/Html/Html.js

@@ -433,9 +433,9 @@ export class Html {
     }
 
     const $parent = $iframe.parentNode;
-    const parentStyle = $parent.style;
+    const parentStyle = $parent && $parent.style;
 
-    if (slide.preload !== false && slide.autoSize !== false) {
+    if (slide.preload !== false && slide.autoSize !== false && parentStyle) {
       try {
         const compStyles = window.getComputedStyle($parent),
           paddingX = parseFloat(compStyles.paddingLeft) + parseFloat(compStyles.paddingRight),

src/Fancybox/plugins/ScrollLock/ScrollLock.js

@@ -97,8 +97,7 @@ export class ScrollLock {
       return;
     }
 
-    const target = event.target;
-    const el = isScrollable(target);
+    const el = isScrollable(event.composedPath()[0]);
 
     if (!el) {
       event.preventDefault();
@@ -122,7 +121,7 @@ export class ScrollLock {
    * Handle `wheel` event
    */
   onWheel(event) {
-    if (!isScrollable(event.target)) {
+    if (!isScrollable(event.composedPath()[0])) {
       event.preventDefault();
     }
   }

src/Panzoom/Panzoom.js

@@ -354,21 +354,23 @@ export class Panzoom extends Base {
           return false;
         }
 
+        const target = event.composedPath()[0];
+
         if (!pointerTracker.currentPointers.length) {
           const ignoreClickedElement =
-            ["BUTTON", "TEXTAREA", "OPTION", "INPUT", "SELECT", "VIDEO"].indexOf(event.target.nodeName) !== -1;
+            ["BUTTON", "TEXTAREA", "OPTION", "INPUT", "SELECT", "VIDEO"].indexOf(target.nodeName) !== -1;
 
           if (ignoreClickedElement) {
             return false;
           }
 
           // Allow text selection
-          if (this.option("textSelection") && getTextNodeFromPoint(event.target, event.clientX, event.clientY)) {
+          if (this.option("textSelection") && getTextNodeFromPoint(target, event.clientX, event.clientY)) {
             return false;
           }
         }
 
-        if (isScrollable(event.target)) {
+        if (isScrollable(target)) {
           return false;
         }
 
@@ -376,6 +378,10 @@ export class Panzoom extends Base {
           return false;
         }
 
+        if (event.type === "mousedown") {
+          event.preventDefault();
+        }
+
         this.state = "pointerdown";
 
         this.resetDragPosition();
@@ -442,10 +448,6 @@ export class Panzoom extends Base {
         }
 
         if (axisToLock !== "xy" && this.lockAxis === "y") {
-          if (event.type === "mousemove") {
-            event.preventDefault();
-          }
-
           return;
         }
 

src/shared/utils/PointerTracker.js

@@ -124,16 +124,16 @@ class PointerTracker {
     this._moveCallback = move;
     this._endCallback = end;
 
-    this._element.addEventListener("mousedown", this._pointerStart, { passive: true });
-    this._element.addEventListener("touchstart", this._touchStart, { passive: true });
+    this._element.addEventListener("mousedown", this._pointerStart, { passive: false });
+    this._element.addEventListener("touchstart", this._touchStart, { passive: false });
     this._element.addEventListener("touchmove", this._move, { passive: false });
     this._element.addEventListener("touchend", this._touchEnd);
     this._element.addEventListener("touchcancel", this._touchEnd);
   }
 
   stop() {
-    this._element.removeEventListener("mousedown", this._pointerStart, { passive: true });
-    this._element.removeEventListener("touchstart", this._touchStart, { passive: true });
+    this._element.removeEventListener("mousedown", this._pointerStart, { passive: false });
+    this._element.removeEventListener("touchstart", this._touchStart, { passive: false });
     this._element.removeEventListener("touchmove", this._move, { passive: false });
     this._element.removeEventListener("touchend", this._touchEnd);
     this._element.removeEventListener("touchcancel", this._touchEnd);