popperjsのframe / iframe対応

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "popperjs-monorepo",
+  "name": "@techtouch-inc/popperjs-monorepo",
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
@@ -42,5 +42,8 @@
   "dependencies": {},
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  }
 }

packages/popper/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "popper.js",
-  "version": "1.16.0",
+  "name": "@techtouch-inc/popper.js",
+  "version": "1.16.3",
   "description": "A kickass library to manage your poppers",
   "homepage": "https://popper.js.org",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/FezVrasta/popper.js.git"
+    "url": "git+https://github.com/techtouch-inc/popper.js.git"
   },
   "author": "Federico Zivolo <[email protected]>",
   "contributors": [
@@ -52,5 +52,8 @@
   },
   "resolutions": {
     "micromatch": "^3.0.3"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
   }
 }

packages/popper/src/utils/getBoundaries.js

@@ -41,7 +41,7 @@ export default function getBoundaries(
     let boundariesNode;
     if (boundariesElement === 'scrollParent') {
       boundariesNode = getScrollParent(getParentNode(reference));
-      if (boundariesNode.nodeName === 'BODY') {
+      if (getParentNode(boundariesNode).nodeName === 'HTML') {
         boundariesNode = popper.ownerDocument.documentElement;
       }
     } else if (boundariesElement === 'window') {
@@ -72,10 +72,10 @@ export default function getBoundaries(
   // Add paddings
   padding = padding || 0;
   const isPaddingNumber = typeof padding === 'number';
-  boundaries.left += isPaddingNumber ? padding : padding.left || 0; 
-  boundaries.top += isPaddingNumber ? padding : padding.top || 0; 
-  boundaries.right -= isPaddingNumber ? padding : padding.right || 0; 
-  boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0; 
+  boundaries.left += isPaddingNumber ? padding : padding.left || 0;
+  boundaries.top += isPaddingNumber ? padding : padding.top || 0;
+  boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
+  boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
 
   return boundaries;
 }

packages/popper/src/utils/getBoundingClientRect.js

@@ -31,6 +31,36 @@ export default function getBoundingClientRect(element) {
     else {
       rect = element.getBoundingClientRect();
     }
+
+    let currentElement = element
+
+    while (
+      currentElement &&
+      currentElement.ownerDocument &&
+      currentElement.ownerDocument.defaultView &&
+      currentElement.ownerDocument.defaultView.frameElement
+    ) {
+      currentElement = currentElement.ownerDocument.defaultView.frameElement
+      const computedStyle = getComputedStyle(currentElement)
+      const borderOffset = {
+        left: parseInt(computedStyle.borderLeftWidth || '0'),
+        top: parseInt(computedStyle.borderTopWidth || '0'),
+      }
+      const iframeRect = currentElement.getBoundingClientRect()
+      const offsettedPos = {
+        top: rect.top + iframeRect.top + borderOffset.top,
+        left: rect.left + iframeRect.left + borderOffset.left,
+        bottom: rect.bottom + iframeRect.top + borderOffset.top,
+        right: rect.right + iframeRect.left + borderOffset.left,
+      }
+      rect = {
+        ...rect,
+        top: offsettedPos.top,
+        left: offsettedPos.left,
+        bottom: offsettedPos.bottom,
+        right: offsettedPos.right,
+      }
+    }
   }
   catch(e){}
 

packages/popper/src/utils/getOffsetParent.js

@@ -1,5 +1,6 @@
 import getStyleComputedProperty from './getStyleComputedProperty';
 import isIE from './isIE';
+import getParentNode from './getParentNode';
 /**
  * Returns the offset parent of the given element
  * @method
@@ -21,9 +22,9 @@ export default function getOffsetParent(element) {
     offsetParent = (element = element.nextElementSibling).offsetParent;
   }
 
-  const nodeName = offsetParent && offsetParent.nodeName;
+  const nodeName = offsetParent && getParentNode(offsetParent).nodeName;
 
-  if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
+  if (!nodeName || nodeName === 'HTML') {
     return element ? element.ownerDocument.documentElement : document.documentElement;
   }
 

packages/popper/src/utils/getScroll.js

@@ -1,3 +1,5 @@
+import getParentNode from './getParentNode';
+
 /**
  * Gets the scroll value of the given element in the given side (top and left)
  * @method
@@ -8,9 +10,9 @@
  */
 export default function getScroll(element, side = 'top') {
   const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
-  const nodeName = element.nodeName;
+  const nodeName = getParentNode(element).nodeName;
 
-  if (nodeName === 'BODY' || nodeName === 'HTML') {
+  if (nodeName === 'HTML') {
     const html = element.ownerDocument.documentElement;
     const scrollingElement = element.ownerDocument.scrollingElement || html;
     return scrollingElement[upperSide];

packages/popper/src/utils/isFixed.js

@@ -10,16 +10,16 @@ import getParentNode from './getParentNode';
  * @returns {Boolean} answer to "isFixed?"
  */
 export default function isFixed(element) {
-  const nodeName = element.nodeName;
-  if (nodeName === 'BODY' || nodeName === 'HTML') {
+  const parentNode = getParentNode(element);
+  if (!parentNode) {
+    return false;
+  }
+  const nodeName = parentNode.nodeName;
+  if (nodeName === 'HTML') {
     return false;
   }
   if (getStyleComputedProperty(element, 'position') === 'fixed') {
     return true;
   }
-  const parentNode = getParentNode(element);
-  if (!parentNode) {
-    return false;
-  }
   return isFixed(parentNode);
 }

packages/popper/src/utils/setupEventListeners.js

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

packages/popper/tests/functional/core.js

@@ -1498,11 +1498,11 @@ const arrowSize = 5;
 
     it('checks cases where the reference element is fixed in scrolling parent', done => {
       jasmineWrapper.innerHTML = `
-            <div id="scroll" style="height: 100vh; overflow: scroll">                
+            <div id="scroll" style="height: 100vh; overflow: scroll">
                 <div id="reference" style="position: fixed; top: 100px; left: 100px; background: pink">reference</div>
                 <div id="popper" style="background: purple">popper</div>
                 <div style="height: 200vh"></div>
-            </div>                
+            </div>
             `;
 
       const reference = document.getElementById('reference');
@@ -1910,36 +1910,36 @@ const arrowSize = 5;
           body {
             padding: 100px;
           }
-  
+
           .scrollParent {
             height: 300px;
             width: 300px;
             overflow: auto;
             position: relative;
           }
-  
+
           .scrollContent {
             background: gray;
             padding: 1000px;
           }
-  
+
           #reference {
             background: lightgrey;
             height: 25px;
             width: 100px;
           }
-  
+
           #popper {
             background: cyan;
             height: 150px;
             width: 150px;
           }
-  
+
           [x-out-of-boundaries] {
             visibility: hidden;
           }
         </style>
-  
+
         <div class="scrollParent">
           <div class="scrollContent">
             <div id="reference">ref</div>

yarn.lock

@@ -7792,6 +7792,11 @@ pluralize@^7.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
   integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
 
+popper.js@^1.0.2:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
+  integrity sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"