Merge pull request #13 from techtouch-inc/feat/improve_getting_frame_element_strategy

Feat/improve getting frame element strategy

Author: 92thunder

packages/popper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techtouch-inc/popper.js",
-  "version": "1.16.3",
+  "version": "1.16.6",
   "description": "A kickass library to manage your poppers",
   "homepage": "https://popper.js.org",
   "repository": {

packages/popper/src/utils/getBoundingClientRect.js

@@ -4,6 +4,7 @@ import getWindowSizes from './getWindowSizes';
 import getScroll from './getScroll';
 import getClientRect from './getClientRect';
 import isIE from './isIE';
+import { getEachAncestorFrames } from './getEachAncestorFrames';
 
 /**
  * Get bounding client rect of given element
@@ -32,15 +33,7 @@ export default function getBoundingClientRect(element) {
       rect = element.getBoundingClientRect();
     }
 
-    let currentElement = element
-
-    while (
-      currentElement &&
-      currentElement.ownerDocument &&
-      currentElement.ownerDocument.defaultView &&
-      currentElement.ownerDocument.defaultView.frameElement
-    ) {
-      currentElement = currentElement.ownerDocument.defaultView.frameElement
+    getEachAncestorFrames(element, (currentElement) => {
       const computedStyle = getComputedStyle(currentElement)
       const borderOffset = {
         left: parseInt(computedStyle.borderLeftWidth || '0'),
@@ -60,7 +53,7 @@ export default function getBoundingClientRect(element) {
         bottom: offsettedPos.bottom,
         right: offsettedPos.right,
       }
-    }
+    })
   }
   catch(e){}
 

packages/popper/src/utils/getCurrentElementAndEachAncestorFrames.js

@@ -0,0 +1,12 @@
+import { getFrameElement } from './getFrameElement'
+
+export const getCurrentElementAndEachAncestorFrames = (
+  target,
+  callback
+) => {
+  let current = target
+  while (current) {
+    callback(current)
+    current = getFrameElement(current)
+  }
+}

packages/popper/src/utils/getEachAncestorFrames.js

@@ -0,0 +1,12 @@
+import { getCurrentElementAndEachAncestorFrames } from './getCurrentElementAndEachAncestorFrames'
+import { getFrameElement } from './getFrameElement'
+
+export const getEachAncestorFrames = (
+  target,
+  callback
+) => {
+  const frameElement = getFrameElement(target)
+  if (frameElement) {
+    getCurrentElementAndEachAncestorFrames(frameElement, callback)
+  }
+}

packages/popper/src/utils/getFrameElement.js

@@ -0,0 +1,8 @@
+export const getFrameElement = (target) => {
+  // スクリプトが差し込まれたframeより上の祖先は辿らないようにする
+  return target.ownerDocument === document
+    ? null
+    : target.ownerDocument &&
+      target.ownerDocument.defaultView &&
+      target.ownerDocument.defaultView.frameElement || null
+}

packages/popper/src/utils/setupEventListeners.js

@@ -1,15 +1,17 @@
 import getScrollParent from './getScrollParent';
 import getWindow from './getWindow';
 import getParentNode from './getParentNode';
+import { getFrameElement } from './getFrameElement';
 
 function attachToScrollParents(scrollParent, event, callback, scrollParents) {
   const isRoot = getParentNode(scrollParent).nodeName === 'HTML';
   const target = isRoot ? scrollParent.ownerDocument.defaultView : scrollParent;
-  const shouldContinue = !isRoot || target.frameElement;
+  const frameElement = getFrameElement(target)
+  const shouldContinue = !isRoot || frameElement;
   target.addEventListener(event, callback, { passive: true });
 
   if (shouldContinue) {
-    const nextScrollParent = getScrollParent(isRoot ? target.frameElement : target.parentNode);
+    const nextScrollParent = getScrollParent(isRoot ? frameElement : target.parentNode);
     attachToScrollParents(
       nextScrollParent,
       event,