diff --git a/package.json b/package.json index ea4ae1299f..344cfb64b7 100644 --- a/package.json +++ b/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/" + } } diff --git a/packages/popper/package.json b/packages/popper/package.json index 305bfd5d7b..7c597e84a2 100644 --- a/packages/popper/package.json +++ b/packages/popper/package.json @@ -1,11 +1,11 @@ { - "name": "popper.js", - "version": "1.16.0", + "name": "@techtouch-inc/popper.js", + "version": "1.16.7", "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 ", "contributors": [ @@ -52,5 +52,8 @@ }, "resolutions": { "micromatch": "^3.0.3" + }, + "publishConfig": { + "registry": "https://npm.pkg.github.com/" } } diff --git a/packages/popper/src/utils/getBoundaries.js b/packages/popper/src/utils/getBoundaries.js index 45cb54ab91..5dd58cb22f 100644 --- a/packages/popper/src/utils/getBoundaries.js +++ b/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; } diff --git a/packages/popper/src/utils/getBoundingClientRect.js b/packages/popper/src/utils/getBoundingClientRect.js index f9e05436ab..a61f7c8bc4 100644 --- a/packages/popper/src/utils/getBoundingClientRect.js +++ b/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 @@ -31,6 +32,28 @@ export default function getBoundingClientRect(element) { else { rect = element.getBoundingClientRect(); } + + getEachAncestorFrames(element, (currentElement) => { + 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){} diff --git a/packages/popper/src/utils/getCurrentElementAndEachAncestorFrames.js b/packages/popper/src/utils/getCurrentElementAndEachAncestorFrames.js new file mode 100644 index 0000000000..014d5f5d4c --- /dev/null +++ b/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) + } +} diff --git a/packages/popper/src/utils/getEachAncestorFrames.js b/packages/popper/src/utils/getEachAncestorFrames.js new file mode 100644 index 0000000000..6eb476d5a3 --- /dev/null +++ b/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) + } +} diff --git a/packages/popper/src/utils/getFrameElement.js b/packages/popper/src/utils/getFrameElement.js new file mode 100644 index 0000000000..080c3594ac --- /dev/null +++ b/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 +} diff --git a/packages/popper/src/utils/getOffsetParent.js b/packages/popper/src/utils/getOffsetParent.js index 875aacda63..2b35dd0f04 100644 --- a/packages/popper/src/utils/getOffsetParent.js +++ b/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; } diff --git a/packages/popper/src/utils/getScroll.js b/packages/popper/src/utils/getScroll.js index b94f06aec6..e1176508a2 100644 --- a/packages/popper/src/utils/getScroll.js +++ b/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]; diff --git a/packages/popper/src/utils/getWindow.js b/packages/popper/src/utils/getWindow.js index f4555222e8..27ca2e14c5 100644 --- a/packages/popper/src/utils/getWindow.js +++ b/packages/popper/src/utils/getWindow.js @@ -5,5 +5,5 @@ */ export default function getWindow(element) { const ownerDocument = element.ownerDocument; - return ownerDocument ? ownerDocument.defaultView : window; + return ownerDocument ? ownerDocument.defaultView || window : window; } diff --git a/packages/popper/src/utils/isFixed.js b/packages/popper/src/utils/isFixed.js index b4ad5af927..231cfc567d 100644 --- a/packages/popper/src/utils/isFixed.js +++ b/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); } diff --git a/packages/popper/src/utils/setupEventListeners.js b/packages/popper/src/utils/setupEventListeners.js index 0b1255f9e3..4e2975425b 100644 --- a/packages/popper/src/utils/setupEventListeners.js +++ b/packages/popper/src/utils/setupEventListeners.js @@ -1,14 +1,19 @@ import getScrollParent from './getScrollParent'; import getWindow from './getWindow'; +import getParentNode from './getParentNode'; +import { getFrameElement } from './getFrameElement'; 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 frameElement = getFrameElement(target) + const shouldContinue = !isRoot || frameElement; target.addEventListener(event, callback, { passive: true }); - if (!isBody) { + if (shouldContinue) { + const nextScrollParent = getScrollParent(isRoot ? frameElement : target.parentNode); attachToScrollParents( - getScrollParent(target.parentNode), + nextScrollParent, event, callback, scrollParents diff --git a/packages/popper/tests/functional/core.js b/packages/popper/tests/functional/core.js index ae9dd08cde..00ebd3a2d8 100644 --- a/packages/popper/tests/functional/core.js +++ b/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 = ` -
+
reference
popper
-
+
`; 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; } - +
ref
diff --git a/yarn.lock b/yarn.lock index a2966ce0ce..6ec993284c 100644 --- a/yarn.lock +++ b/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"