Code cleanup con CodeMaid
This commit is contained in:
Samuele E. Locatelli
@@ -14,9 +14,9 @@ const validPlacements = placements.slice(3);
|
||||
* @returns {Array} placements including their variations
|
||||
*/
|
||||
export default function clockwise(placement, counter = false) {
|
||||
const index = validPlacements.indexOf(placement);
|
||||
const arr = validPlacements
|
||||
.slice(index + 1)
|
||||
.concat(validPlacements.slice(0, index));
|
||||
return counter ? arr.reverse() : arr;
|
||||
}
|
||||
const index = validPlacements.indexOf(placement);
|
||||
const arr = validPlacements
|
||||
.slice(index + 1)
|
||||
.concat(validPlacements.slice(0, index));
|
||||
return counter ? arr.reverse() : arr;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import getBoundaries from '../utils/getBoundaries';
|
||||
|
||||
function getArea({ width, height }) {
|
||||
return width * height;
|
||||
return width * height;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -14,61 +14,61 @@ function getArea({ width, height }) {
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function computeAutoPlacement(
|
||||
placement,
|
||||
refRect,
|
||||
popper,
|
||||
reference,
|
||||
boundariesElement,
|
||||
padding = 0
|
||||
) {
|
||||
if (placement.indexOf('auto') === -1) {
|
||||
return placement;
|
||||
}
|
||||
|
||||
const boundaries = getBoundaries(
|
||||
placement,
|
||||
refRect,
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement
|
||||
);
|
||||
boundariesElement,
|
||||
padding = 0
|
||||
) {
|
||||
if (placement.indexOf('auto') === -1) {
|
||||
return placement;
|
||||
}
|
||||
|
||||
const rects = {
|
||||
top: {
|
||||
width: boundaries.width,
|
||||
height: refRect.top - boundaries.top,
|
||||
},
|
||||
right: {
|
||||
width: boundaries.right - refRect.right,
|
||||
height: boundaries.height,
|
||||
},
|
||||
bottom: {
|
||||
width: boundaries.width,
|
||||
height: boundaries.bottom - refRect.bottom,
|
||||
},
|
||||
left: {
|
||||
width: refRect.left - boundaries.left,
|
||||
height: boundaries.height,
|
||||
},
|
||||
};
|
||||
const boundaries = getBoundaries(
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement
|
||||
);
|
||||
|
||||
const sortedAreas = Object.keys(rects)
|
||||
.map(key => ({
|
||||
key,
|
||||
...rects[key],
|
||||
area: getArea(rects[key]),
|
||||
}))
|
||||
.sort((a, b) => b.area - a.area);
|
||||
const rects = {
|
||||
top: {
|
||||
width: boundaries.width,
|
||||
height: refRect.top - boundaries.top,
|
||||
},
|
||||
right: {
|
||||
width: boundaries.right - refRect.right,
|
||||
height: boundaries.height,
|
||||
},
|
||||
bottom: {
|
||||
width: boundaries.width,
|
||||
height: boundaries.bottom - refRect.bottom,
|
||||
},
|
||||
left: {
|
||||
width: refRect.left - boundaries.left,
|
||||
height: boundaries.height,
|
||||
},
|
||||
};
|
||||
|
||||
const filteredAreas = sortedAreas.filter(
|
||||
({ width, height }) =>
|
||||
width >= popper.clientWidth && height >= popper.clientHeight
|
||||
);
|
||||
const sortedAreas = Object.keys(rects)
|
||||
.map(key => ({
|
||||
key,
|
||||
...rects[key],
|
||||
area: getArea(rects[key]),
|
||||
}))
|
||||
.sort((a, b) => b.area - a.area);
|
||||
|
||||
const computedPlacement = filteredAreas.length > 0
|
||||
? filteredAreas[0].key
|
||||
: sortedAreas[0].key;
|
||||
const filteredAreas = sortedAreas.filter(
|
||||
({ width, height }) =>
|
||||
width >= popper.clientWidth && height >= popper.clientHeight
|
||||
);
|
||||
|
||||
const variation = placement.split('-')[1];
|
||||
const computedPlacement = filteredAreas.length > 0
|
||||
? filteredAreas[0].key
|
||||
: sortedAreas[0].key;
|
||||
|
||||
return computedPlacement + (variation ? `-${variation}` : '');
|
||||
}
|
||||
const variation = placement.split('-')[1];
|
||||
|
||||
return computedPlacement + (variation ? `-${variation}` : '');
|
||||
}
|
||||
@@ -1,45 +1,44 @@
|
||||
import isBrowser from './isBrowser';
|
||||
|
||||
const timeoutDuration = (function(){
|
||||
const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
||||
for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
||||
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
||||
return 1;
|
||||
const timeoutDuration = (function () {
|
||||
const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
||||
for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
||||
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
return 0;
|
||||
}());
|
||||
|
||||
export function microtaskDebounce(fn) {
|
||||
let called = false
|
||||
return () => {
|
||||
if (called) {
|
||||
return
|
||||
let called = false
|
||||
return () => {
|
||||
if (called) {
|
||||
return
|
||||
}
|
||||
called = true
|
||||
window.Promise.resolve().then(() => {
|
||||
called = false
|
||||
fn()
|
||||
})
|
||||
}
|
||||
called = true
|
||||
window.Promise.resolve().then(() => {
|
||||
called = false
|
||||
fn()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function taskDebounce(fn) {
|
||||
let scheduled = false;
|
||||
return () => {
|
||||
if (!scheduled) {
|
||||
scheduled = true;
|
||||
setTimeout(() => {
|
||||
scheduled = false;
|
||||
fn();
|
||||
}, timeoutDuration);
|
||||
}
|
||||
};
|
||||
let scheduled = false;
|
||||
return () => {
|
||||
if (!scheduled) {
|
||||
scheduled = true;
|
||||
setTimeout(() => {
|
||||
scheduled = false;
|
||||
fn();
|
||||
}, timeoutDuration);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const supportsMicroTasks = isBrowser && window.Promise
|
||||
|
||||
|
||||
/**
|
||||
* Create a debounced version of a method, that's asynchronously deferred
|
||||
* but called in the minimum time possible.
|
||||
@@ -50,5 +49,5 @@ const supportsMicroTasks = isBrowser && window.Promise
|
||||
* @returns {Function}
|
||||
*/
|
||||
export default (supportsMicroTasks
|
||||
? microtaskDebounce
|
||||
: taskDebounce);
|
||||
? microtaskDebounce
|
||||
: taskDebounce);
|
||||
@@ -8,11 +8,11 @@
|
||||
* @returns index or -1
|
||||
*/
|
||||
export default function find(arr, check) {
|
||||
// use native find if supported
|
||||
if (Array.prototype.find) {
|
||||
return arr.find(check);
|
||||
}
|
||||
// use native find if supported
|
||||
if (Array.prototype.find) {
|
||||
return arr.find(check);
|
||||
}
|
||||
|
||||
// use `filter` to obtain the same behavior of `find`
|
||||
return arr.filter(check)[0];
|
||||
}
|
||||
// use `filter` to obtain the same behavior of `find`
|
||||
return arr.filter(check)[0];
|
||||
}
|
||||
@@ -11,42 +11,42 @@ import getOffsetParent from './getOffsetParent';
|
||||
* @returns {Element} common offset parent
|
||||
*/
|
||||
export default function findCommonOffsetParent(element1, element2) {
|
||||
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
||||
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
||||
return document.documentElement;
|
||||
}
|
||||
|
||||
// Here we make sure to give as "start" the element that comes first in the DOM
|
||||
const order =
|
||||
element1.compareDocumentPosition(element2) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING;
|
||||
const start = order ? element1 : element2;
|
||||
const end = order ? element2 : element1;
|
||||
|
||||
// Get common ancestor container
|
||||
const range = document.createRange();
|
||||
range.setStart(start, 0);
|
||||
range.setEnd(end, 0);
|
||||
const { commonAncestorContainer } = range;
|
||||
|
||||
// Both nodes are inside #document
|
||||
if (
|
||||
(element1 !== commonAncestorContainer &&
|
||||
element2 !== commonAncestorContainer) ||
|
||||
start.contains(end)
|
||||
) {
|
||||
if (isOffsetContainer(commonAncestorContainer)) {
|
||||
return commonAncestorContainer;
|
||||
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
||||
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
||||
return document.documentElement;
|
||||
}
|
||||
|
||||
return getOffsetParent(commonAncestorContainer);
|
||||
}
|
||||
// Here we make sure to give as "start" the element that comes first in the DOM
|
||||
const order =
|
||||
element1.compareDocumentPosition(element2) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING;
|
||||
const start = order ? element1 : element2;
|
||||
const end = order ? element2 : element1;
|
||||
|
||||
// one of the nodes is inside shadowDOM, find which one
|
||||
const element1root = getRoot(element1);
|
||||
if (element1root.host) {
|
||||
return findCommonOffsetParent(element1root.host, element2);
|
||||
} else {
|
||||
return findCommonOffsetParent(element1, getRoot(element2).host);
|
||||
}
|
||||
}
|
||||
// Get common ancestor container
|
||||
const range = document.createRange();
|
||||
range.setStart(start, 0);
|
||||
range.setEnd(end, 0);
|
||||
const { commonAncestorContainer } = range;
|
||||
|
||||
// Both nodes are inside #document
|
||||
if (
|
||||
(element1 !== commonAncestorContainer &&
|
||||
element2 !== commonAncestorContainer) ||
|
||||
start.contains(end)
|
||||
) {
|
||||
if (isOffsetContainer(commonAncestorContainer)) {
|
||||
return commonAncestorContainer;
|
||||
}
|
||||
|
||||
return getOffsetParent(commonAncestorContainer);
|
||||
}
|
||||
|
||||
// one of the nodes is inside shadowDOM, find which one
|
||||
const element1root = getRoot(element1);
|
||||
if (element1root.host) {
|
||||
return findCommonOffsetParent(element1root.host, element2);
|
||||
} else {
|
||||
return findCommonOffsetParent(element1, getRoot(element2).host);
|
||||
}
|
||||
}
|
||||
@@ -10,12 +10,12 @@ import find from './find';
|
||||
* @returns index or -1
|
||||
*/
|
||||
export default function findIndex(arr, prop, value) {
|
||||
// use native findIndex if supported
|
||||
if (Array.prototype.findIndex) {
|
||||
return arr.findIndex(cur => cur[prop] === value);
|
||||
}
|
||||
// use native findIndex if supported
|
||||
if (Array.prototype.findIndex) {
|
||||
return arr.findIndex(cur => cur[prop] === value);
|
||||
}
|
||||
|
||||
// use `find` + `indexOf` if `findIndex` isn't supported
|
||||
const match = find(arr, obj => obj[prop] === value);
|
||||
return arr.indexOf(match);
|
||||
}
|
||||
// use `find` + `indexOf` if `findIndex` isn't supported
|
||||
const match = find(arr, obj => obj[prop] === value);
|
||||
return arr.indexOf(match);
|
||||
}
|
||||
@@ -9,11 +9,11 @@
|
||||
*/
|
||||
|
||||
export default function getBordersSize(styles, axis) {
|
||||
const sideA = axis === 'x' ? 'Left' : 'Top';
|
||||
const sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
||||
const sideA = axis === 'x' ? 'Left' : 'Top';
|
||||
const sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
||||
|
||||
return (
|
||||
parseFloat(styles[`border${sideA}Width`]) +
|
||||
parseFloat(styles[`border${sideB}Width`])
|
||||
);
|
||||
}
|
||||
return (
|
||||
parseFloat(styles[`border${sideA}Width`]) +
|
||||
parseFloat(styles[`border${sideB}Width`])
|
||||
);
|
||||
}
|
||||
@@ -20,62 +20,62 @@ import getFixedPositionOffsetParent from './getFixedPositionOffsetParent';
|
||||
* @returns {Object} Coordinates of the boundaries
|
||||
*/
|
||||
export default function getBoundaries(
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement,
|
||||
fixedPosition = false
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement,
|
||||
fixedPosition = false
|
||||
) {
|
||||
// NOTE: 1 DOM access here
|
||||
// NOTE: 1 DOM access here
|
||||
|
||||
let boundaries = { top: 0, left: 0 };
|
||||
const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
||||
let boundaries = { top: 0, left: 0 };
|
||||
const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
||||
|
||||
// Handle viewport case
|
||||
if (boundariesElement === 'viewport' ) {
|
||||
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
|
||||
}
|
||||
|
||||
else {
|
||||
// Handle other cases based on DOM element used as boundaries
|
||||
let boundariesNode;
|
||||
if (boundariesElement === 'scrollParent') {
|
||||
boundariesNode = getScrollParent(getParentNode(reference));
|
||||
if (boundariesNode.nodeName === 'BODY') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
}
|
||||
} else if (boundariesElement === 'window') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
} else {
|
||||
boundariesNode = boundariesElement;
|
||||
// Handle viewport case
|
||||
if (boundariesElement === 'viewport') {
|
||||
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
|
||||
}
|
||||
|
||||
const offsets = getOffsetRectRelativeToArbitraryNode(
|
||||
boundariesNode,
|
||||
offsetParent,
|
||||
fixedPosition
|
||||
);
|
||||
else {
|
||||
// Handle other cases based on DOM element used as boundaries
|
||||
let boundariesNode;
|
||||
if (boundariesElement === 'scrollParent') {
|
||||
boundariesNode = getScrollParent(getParentNode(reference));
|
||||
if (boundariesNode.nodeName === 'BODY') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
}
|
||||
} else if (boundariesElement === 'window') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
} else {
|
||||
boundariesNode = boundariesElement;
|
||||
}
|
||||
|
||||
// In case of HTML, we need a different computation
|
||||
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
||||
const { height, width } = getWindowSizes(popper.ownerDocument);
|
||||
boundaries.top += offsets.top - offsets.marginTop;
|
||||
boundaries.bottom = height + offsets.top;
|
||||
boundaries.left += offsets.left - offsets.marginLeft;
|
||||
boundaries.right = width + offsets.left;
|
||||
} else {
|
||||
// for all the other DOM elements, this one is good
|
||||
boundaries = offsets;
|
||||
const offsets = getOffsetRectRelativeToArbitraryNode(
|
||||
boundariesNode,
|
||||
offsetParent,
|
||||
fixedPosition
|
||||
);
|
||||
|
||||
// In case of HTML, we need a different computation
|
||||
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
||||
const { height, width } = getWindowSizes(popper.ownerDocument);
|
||||
boundaries.top += offsets.top - offsets.marginTop;
|
||||
boundaries.bottom = height + offsets.top;
|
||||
boundaries.left += offsets.left - offsets.marginLeft;
|
||||
boundaries.right = width + offsets.left;
|
||||
} else {
|
||||
// for all the other DOM elements, this one is good
|
||||
boundaries = offsets;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
|
||||
return boundaries;
|
||||
}
|
||||
return boundaries;
|
||||
}
|
||||
@@ -13,54 +13,54 @@ import isIE from './isIE';
|
||||
* @return {Object} client rect
|
||||
*/
|
||||
export default function getBoundingClientRect(element) {
|
||||
let rect = {};
|
||||
let rect = {};
|
||||
|
||||
// IE10 10 FIX: Please, don't ask, the element isn't
|
||||
// considered in DOM in some circumstances...
|
||||
// This isn't reproducible in IE10 compatibility mode of IE11
|
||||
try {
|
||||
if (isIE(10)) {
|
||||
rect = element.getBoundingClientRect();
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
rect.top += scrollTop;
|
||||
rect.left += scrollLeft;
|
||||
rect.bottom += scrollTop;
|
||||
rect.right += scrollLeft;
|
||||
// IE10 10 FIX: Please, don't ask, the element isn't
|
||||
// considered in DOM in some circumstances...
|
||||
// This isn't reproducible in IE10 compatibility mode of IE11
|
||||
try {
|
||||
if (isIE(10)) {
|
||||
rect = element.getBoundingClientRect();
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
rect.top += scrollTop;
|
||||
rect.left += scrollLeft;
|
||||
rect.bottom += scrollTop;
|
||||
rect.right += scrollLeft;
|
||||
}
|
||||
else {
|
||||
rect = element.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
else {
|
||||
rect = element.getBoundingClientRect();
|
||||
catch (e) { }
|
||||
|
||||
const result = {
|
||||
left: rect.left,
|
||||
top: rect.top,
|
||||
width: rect.right - rect.left,
|
||||
height: rect.bottom - rect.top,
|
||||
};
|
||||
|
||||
// subtract scrollbar size from sizes
|
||||
const sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
|
||||
const width =
|
||||
sizes.width || element.clientWidth || result.width;
|
||||
const height =
|
||||
sizes.height || element.clientHeight || result.height;
|
||||
|
||||
let horizScrollbar = element.offsetWidth - width;
|
||||
let vertScrollbar = element.offsetHeight - height;
|
||||
|
||||
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
|
||||
// we make this check conditional for performance reasons
|
||||
if (horizScrollbar || vertScrollbar) {
|
||||
const styles = getStyleComputedProperty(element);
|
||||
horizScrollbar -= getBordersSize(styles, 'x');
|
||||
vertScrollbar -= getBordersSize(styles, 'y');
|
||||
|
||||
result.width -= horizScrollbar;
|
||||
result.height -= vertScrollbar;
|
||||
}
|
||||
}
|
||||
catch(e){}
|
||||
|
||||
const result = {
|
||||
left: rect.left,
|
||||
top: rect.top,
|
||||
width: rect.right - rect.left,
|
||||
height: rect.bottom - rect.top,
|
||||
};
|
||||
|
||||
// subtract scrollbar size from sizes
|
||||
const sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
|
||||
const width =
|
||||
sizes.width || element.clientWidth || result.width;
|
||||
const height =
|
||||
sizes.height || element.clientHeight || result.height;
|
||||
|
||||
let horizScrollbar = element.offsetWidth - width;
|
||||
let vertScrollbar = element.offsetHeight - height;
|
||||
|
||||
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
|
||||
// we make this check conditional for performance reasons
|
||||
if (horizScrollbar || vertScrollbar) {
|
||||
const styles = getStyleComputedProperty(element);
|
||||
horizScrollbar -= getBordersSize(styles, 'x');
|
||||
vertScrollbar -= getBordersSize(styles, 'y');
|
||||
|
||||
result.width -= horizScrollbar;
|
||||
result.height -= vertScrollbar;
|
||||
}
|
||||
|
||||
return getClientRect(result);
|
||||
}
|
||||
return getClientRect(result);
|
||||
}
|
||||
@@ -6,9 +6,9 @@
|
||||
* @returns {Object} ClientRect like output
|
||||
*/
|
||||
export default function getClientRect(offsets) {
|
||||
return {
|
||||
...offsets,
|
||||
right: offsets.left + offsets.width,
|
||||
bottom: offsets.top + offsets.height,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...offsets,
|
||||
right: offsets.left + offsets.width,
|
||||
bottom: offsets.top + offsets.height,
|
||||
};
|
||||
}
|
||||
@@ -9,14 +9,13 @@ import isIE from './isIE';
|
||||
*/
|
||||
|
||||
export default function getFixedPositionOffsetParent(element) {
|
||||
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
||||
if (!element || !element.parentElement || isIE()) {
|
||||
return document.documentElement;
|
||||
}
|
||||
let el = element.parentElement;
|
||||
while (el && getStyleComputedProperty(el, 'transform') === 'none') {
|
||||
el = el.parentElement;
|
||||
}
|
||||
return el || document.documentElement;
|
||||
|
||||
}
|
||||
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
||||
if (!element || !element.parentElement || isIE()) {
|
||||
return document.documentElement;
|
||||
}
|
||||
let el = element.parentElement;
|
||||
while (el && getStyleComputedProperty(el, 'transform') === 'none') {
|
||||
el = el.parentElement;
|
||||
}
|
||||
return el || document.documentElement;
|
||||
}
|
||||
@@ -8,33 +8,33 @@ import isIE from './isIE';
|
||||
* @returns {Element} offset parent
|
||||
*/
|
||||
export default function getOffsetParent(element) {
|
||||
if (!element) {
|
||||
return document.documentElement;
|
||||
}
|
||||
if (!element) {
|
||||
return document.documentElement;
|
||||
}
|
||||
|
||||
const noOffsetParent = isIE(10) ? document.body : null;
|
||||
const noOffsetParent = isIE(10) ? document.body : null;
|
||||
|
||||
// NOTE: 1 DOM access here
|
||||
let offsetParent = element.offsetParent || null;
|
||||
// Skip hidden elements which don't have an offsetParent
|
||||
while (offsetParent === noOffsetParent && element.nextElementSibling) {
|
||||
offsetParent = (element = element.nextElementSibling).offsetParent;
|
||||
}
|
||||
// NOTE: 1 DOM access here
|
||||
let offsetParent = element.offsetParent || null;
|
||||
// Skip hidden elements which don't have an offsetParent
|
||||
while (offsetParent === noOffsetParent && element.nextElementSibling) {
|
||||
offsetParent = (element = element.nextElementSibling).offsetParent;
|
||||
}
|
||||
|
||||
const nodeName = offsetParent && offsetParent.nodeName;
|
||||
const nodeName = offsetParent && offsetParent.nodeName;
|
||||
|
||||
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
return element ? element.ownerDocument.documentElement : document.documentElement;
|
||||
}
|
||||
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
return element ? element.ownerDocument.documentElement : document.documentElement;
|
||||
}
|
||||
|
||||
// .offsetParent will return the closest TH, TD or TABLE in case
|
||||
// no offsetParent is present, I hate this job...
|
||||
if (
|
||||
['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
|
||||
getStyleComputedProperty(offsetParent, 'position') === 'static'
|
||||
) {
|
||||
return getOffsetParent(offsetParent);
|
||||
}
|
||||
// .offsetParent will return the closest TH, TD or TABLE in case
|
||||
// no offsetParent is present, I hate this job...
|
||||
if (
|
||||
['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
|
||||
getStyleComputedProperty(offsetParent, 'position') === 'static'
|
||||
) {
|
||||
return getOffsetParent(offsetParent);
|
||||
}
|
||||
|
||||
return offsetParent;
|
||||
}
|
||||
return offsetParent;
|
||||
}
|
||||
@@ -9,24 +9,24 @@ import getClientRect from './getClientRect';
|
||||
* @return {Object} position - Coordinates of the element and its `scrollTop`
|
||||
*/
|
||||
export default function getOffsetRect(element) {
|
||||
let elementRect;
|
||||
if (element.nodeName === 'HTML') {
|
||||
const { width, height } = getWindowSizes(element.ownerDocument);
|
||||
elementRect = {
|
||||
width,
|
||||
height,
|
||||
left: 0,
|
||||
top: 0,
|
||||
};
|
||||
} else {
|
||||
elementRect = {
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
left: element.offsetLeft,
|
||||
top: element.offsetTop,
|
||||
};
|
||||
}
|
||||
let elementRect;
|
||||
if (element.nodeName === 'HTML') {
|
||||
const { width, height } = getWindowSizes(element.ownerDocument);
|
||||
elementRect = {
|
||||
width,
|
||||
height,
|
||||
left: 0,
|
||||
top: 0,
|
||||
};
|
||||
} else {
|
||||
elementRect = {
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
left: element.offsetLeft,
|
||||
top: element.offsetTop,
|
||||
};
|
||||
}
|
||||
|
||||
// position
|
||||
return getClientRect(elementRect);
|
||||
}
|
||||
// position
|
||||
return getClientRect(elementRect);
|
||||
}
|
||||
@@ -6,55 +6,55 @@ import runIsIE from './isIE';
|
||||
import getClientRect from './getClientRect';
|
||||
|
||||
export default function getOffsetRectRelativeToArbitraryNode(children, parent, fixedPosition = false) {
|
||||
const isIE10 = runIsIE(10);
|
||||
const isHTML = parent.nodeName === 'HTML';
|
||||
const childrenRect = getBoundingClientRect(children);
|
||||
const parentRect = getBoundingClientRect(parent);
|
||||
const scrollParent = getScrollParent(children);
|
||||
const isIE10 = runIsIE(10);
|
||||
const isHTML = parent.nodeName === 'HTML';
|
||||
const childrenRect = getBoundingClientRect(children);
|
||||
const parentRect = getBoundingClientRect(parent);
|
||||
const scrollParent = getScrollParent(children);
|
||||
|
||||
const styles = getStyleComputedProperty(parent);
|
||||
const borderTopWidth = parseFloat(styles.borderTopWidth);
|
||||
const borderLeftWidth = parseFloat(styles.borderLeftWidth);
|
||||
const styles = getStyleComputedProperty(parent);
|
||||
const borderTopWidth = parseFloat(styles.borderTopWidth);
|
||||
const borderLeftWidth = parseFloat(styles.borderLeftWidth);
|
||||
|
||||
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
|
||||
if(fixedPosition && isHTML) {
|
||||
parentRect.top = Math.max(parentRect.top, 0);
|
||||
parentRect.left = Math.max(parentRect.left, 0);
|
||||
}
|
||||
let offsets = getClientRect({
|
||||
top: childrenRect.top - parentRect.top - borderTopWidth,
|
||||
left: childrenRect.left - parentRect.left - borderLeftWidth,
|
||||
width: childrenRect.width,
|
||||
height: childrenRect.height,
|
||||
});
|
||||
offsets.marginTop = 0;
|
||||
offsets.marginLeft = 0;
|
||||
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
|
||||
if (fixedPosition && isHTML) {
|
||||
parentRect.top = Math.max(parentRect.top, 0);
|
||||
parentRect.left = Math.max(parentRect.left, 0);
|
||||
}
|
||||
let offsets = getClientRect({
|
||||
top: childrenRect.top - parentRect.top - borderTopWidth,
|
||||
left: childrenRect.left - parentRect.left - borderLeftWidth,
|
||||
width: childrenRect.width,
|
||||
height: childrenRect.height,
|
||||
});
|
||||
offsets.marginTop = 0;
|
||||
offsets.marginLeft = 0;
|
||||
|
||||
// Subtract margins of documentElement in case it's being used as parent
|
||||
// we do this only on HTML because it's the only element that behaves
|
||||
// differently when margins are applied to it. The margins are included in
|
||||
// the box of the documentElement, in the other cases not.
|
||||
if (!isIE10 && isHTML) {
|
||||
const marginTop = parseFloat(styles.marginTop);
|
||||
const marginLeft = parseFloat(styles.marginLeft);
|
||||
// Subtract margins of documentElement in case it's being used as parent
|
||||
// we do this only on HTML because it's the only element that behaves
|
||||
// differently when margins are applied to it. The margins are included in
|
||||
// the box of the documentElement, in the other cases not.
|
||||
if (!isIE10 && isHTML) {
|
||||
const marginTop = parseFloat(styles.marginTop);
|
||||
const marginLeft = parseFloat(styles.marginLeft);
|
||||
|
||||
offsets.top -= borderTopWidth - marginTop;
|
||||
offsets.bottom -= borderTopWidth - marginTop;
|
||||
offsets.left -= borderLeftWidth - marginLeft;
|
||||
offsets.right -= borderLeftWidth - marginLeft;
|
||||
offsets.top -= borderTopWidth - marginTop;
|
||||
offsets.bottom -= borderTopWidth - marginTop;
|
||||
offsets.left -= borderLeftWidth - marginLeft;
|
||||
offsets.right -= borderLeftWidth - marginLeft;
|
||||
|
||||
// Attach marginTop and marginLeft because in some circumstances we may need them
|
||||
offsets.marginTop = marginTop;
|
||||
offsets.marginLeft = marginLeft;
|
||||
}
|
||||
// Attach marginTop and marginLeft because in some circumstances we may need them
|
||||
offsets.marginTop = marginTop;
|
||||
offsets.marginLeft = marginLeft;
|
||||
}
|
||||
|
||||
if (
|
||||
isIE10 && !fixedPosition
|
||||
? parent.contains(scrollParent)
|
||||
: parent === scrollParent && scrollParent.nodeName !== 'BODY'
|
||||
) {
|
||||
offsets = includeScroll(offsets, parent);
|
||||
}
|
||||
if (
|
||||
isIE10 && !fixedPosition
|
||||
? parent.contains(scrollParent)
|
||||
: parent === scrollParent && scrollParent.nodeName !== 'BODY'
|
||||
) {
|
||||
offsets = includeScroll(offsets, parent);
|
||||
}
|
||||
|
||||
return offsets;
|
||||
}
|
||||
return offsets;
|
||||
}
|
||||
@@ -6,6 +6,6 @@
|
||||
* @returns {String} flipped placement
|
||||
*/
|
||||
export default function getOppositePlacement(placement) {
|
||||
const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
||||
return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);
|
||||
}
|
||||
const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
||||
return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);
|
||||
}
|
||||
@@ -6,10 +6,10 @@
|
||||
* @returns {String} flipped placement variation
|
||||
*/
|
||||
export default function getOppositeVariation(variation) {
|
||||
if (variation === 'end') {
|
||||
return 'start';
|
||||
} else if (variation === 'start') {
|
||||
return 'end';
|
||||
}
|
||||
return variation;
|
||||
}
|
||||
if (variation === 'end') {
|
||||
return 'start';
|
||||
} else if (variation === 'start') {
|
||||
return 'end';
|
||||
}
|
||||
return variation;
|
||||
}
|
||||
@@ -6,13 +6,13 @@
|
||||
* @returns {Object} object containing width and height properties
|
||||
*/
|
||||
export default function getOuterSizes(element) {
|
||||
const window = element.ownerDocument.defaultView;
|
||||
const styles = window.getComputedStyle(element);
|
||||
const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
|
||||
const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
|
||||
const result = {
|
||||
width: element.offsetWidth + y,
|
||||
height: element.offsetHeight + x,
|
||||
};
|
||||
return result;
|
||||
}
|
||||
const window = element.ownerDocument.defaultView;
|
||||
const styles = window.getComputedStyle(element);
|
||||
const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
|
||||
const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
|
||||
const result = {
|
||||
width: element.offsetWidth + y,
|
||||
height: element.offsetHeight + x,
|
||||
};
|
||||
return result;
|
||||
}
|
||||
@@ -6,8 +6,8 @@
|
||||
* @returns {Element} parent
|
||||
*/
|
||||
export default function getParentNode(element) {
|
||||
if (element.nodeName === 'HTML') {
|
||||
return element;
|
||||
}
|
||||
return element.parentNode || element.host;
|
||||
}
|
||||
if (element.nodeName === 'HTML') {
|
||||
return element;
|
||||
}
|
||||
return element.parentNode || element.host;
|
||||
}
|
||||
@@ -12,35 +12,35 @@ import getOppositePlacement from './getOppositePlacement';
|
||||
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
|
||||
*/
|
||||
export default function getPopperOffsets(popper, referenceOffsets, placement) {
|
||||
placement = placement.split('-')[0];
|
||||
placement = placement.split('-')[0];
|
||||
|
||||
// Get popper node sizes
|
||||
const popperRect = getOuterSizes(popper);
|
||||
// Get popper node sizes
|
||||
const popperRect = getOuterSizes(popper);
|
||||
|
||||
// Add position, width and height to our offsets object
|
||||
const popperOffsets = {
|
||||
width: popperRect.width,
|
||||
height: popperRect.height,
|
||||
};
|
||||
// Add position, width and height to our offsets object
|
||||
const popperOffsets = {
|
||||
width: popperRect.width,
|
||||
height: popperRect.height,
|
||||
};
|
||||
|
||||
// depending by the popper placement we have to compute its offsets slightly differently
|
||||
const isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
||||
const mainSide = isHoriz ? 'top' : 'left';
|
||||
const secondarySide = isHoriz ? 'left' : 'top';
|
||||
const measurement = isHoriz ? 'height' : 'width';
|
||||
const secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
||||
// depending by the popper placement we have to compute its offsets slightly differently
|
||||
const isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
||||
const mainSide = isHoriz ? 'top' : 'left';
|
||||
const secondarySide = isHoriz ? 'left' : 'top';
|
||||
const measurement = isHoriz ? 'height' : 'width';
|
||||
const secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
||||
|
||||
popperOffsets[mainSide] =
|
||||
referenceOffsets[mainSide] +
|
||||
referenceOffsets[measurement] / 2 -
|
||||
popperRect[measurement] / 2;
|
||||
if (placement === secondarySide) {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
||||
} else {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[getOppositePlacement(secondarySide)];
|
||||
}
|
||||
popperOffsets[mainSide] =
|
||||
referenceOffsets[mainSide] +
|
||||
referenceOffsets[measurement] / 2 -
|
||||
popperRect[measurement] / 2;
|
||||
if (placement === secondarySide) {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
||||
} else {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[getOppositePlacement(secondarySide)];
|
||||
}
|
||||
|
||||
return popperOffsets;
|
||||
}
|
||||
return popperOffsets;
|
||||
}
|
||||
@@ -6,5 +6,5 @@
|
||||
* @returns {Element} parent
|
||||
*/
|
||||
export default function getReferenceNode(reference) {
|
||||
return reference && reference.referenceNode ? reference.referenceNode : reference;
|
||||
}
|
||||
return reference && reference.referenceNode ? reference.referenceNode : reference;
|
||||
}
|
||||
@@ -14,6 +14,6 @@ import getReferenceNode from './getReferenceNode';
|
||||
* @returns {Object} An object containing the offsets which will be applied to the popper
|
||||
*/
|
||||
export default function getReferenceOffsets(state, popper, reference, fixedPosition = null) {
|
||||
const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
||||
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
|
||||
}
|
||||
const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
||||
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
|
||||
}
|
||||
@@ -6,9 +6,9 @@
|
||||
* @returns {Element} root node
|
||||
*/
|
||||
export default function getRoot(node) {
|
||||
if (node.parentNode !== null) {
|
||||
return getRoot(node.parentNode);
|
||||
}
|
||||
if (node.parentNode !== null) {
|
||||
return getRoot(node.parentNode);
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
@@ -18,33 +18,33 @@
|
||||
* Only horizontal placement and left/right values need to be considered.
|
||||
*/
|
||||
export default function getRoundedOffsets(data, shouldRound) {
|
||||
const { popper, reference } = data.offsets;
|
||||
const { round, floor } = Math;
|
||||
const noRound = v => v;
|
||||
|
||||
const referenceWidth = round(reference.width);
|
||||
const popperWidth = round(popper.width);
|
||||
|
||||
const isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
|
||||
const isVariation = data.placement.indexOf('-') !== -1;
|
||||
const sameWidthParity = referenceWidth % 2 === popperWidth % 2;
|
||||
const bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
|
||||
const { popper, reference } = data.offsets;
|
||||
const { round, floor } = Math;
|
||||
const noRound = v => v;
|
||||
|
||||
const horizontalToInteger = !shouldRound
|
||||
? noRound
|
||||
: isVertical || isVariation || sameWidthParity
|
||||
? round
|
||||
: floor;
|
||||
const verticalToInteger = !shouldRound ? noRound : round;
|
||||
const referenceWidth = round(reference.width);
|
||||
const popperWidth = round(popper.width);
|
||||
|
||||
return {
|
||||
left: horizontalToInteger(
|
||||
bothOddWidth && !isVariation && shouldRound
|
||||
? popper.left - 1
|
||||
: popper.left
|
||||
),
|
||||
top: verticalToInteger(popper.top),
|
||||
bottom: verticalToInteger(popper.bottom),
|
||||
right: horizontalToInteger(popper.right),
|
||||
};
|
||||
}
|
||||
const isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
|
||||
const isVariation = data.placement.indexOf('-') !== -1;
|
||||
const sameWidthParity = referenceWidth % 2 === popperWidth % 2;
|
||||
const bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
|
||||
|
||||
const horizontalToInteger = !shouldRound
|
||||
? noRound
|
||||
: isVertical || isVariation || sameWidthParity
|
||||
? round
|
||||
: floor;
|
||||
const verticalToInteger = !shouldRound ? noRound : round;
|
||||
|
||||
return {
|
||||
left: horizontalToInteger(
|
||||
bothOddWidth && !isVariation && shouldRound
|
||||
? popper.left - 1
|
||||
: popper.left
|
||||
),
|
||||
top: verticalToInteger(popper.top),
|
||||
bottom: verticalToInteger(popper.bottom),
|
||||
right: horizontalToInteger(popper.right),
|
||||
};
|
||||
}
|
||||
@@ -7,14 +7,14 @@
|
||||
* @returns {number} amount of scrolled pixels
|
||||
*/
|
||||
export default function getScroll(element, side = 'top') {
|
||||
const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
||||
const nodeName = element.nodeName;
|
||||
const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
||||
const nodeName = element.nodeName;
|
||||
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const scrollingElement = element.ownerDocument.scrollingElement || html;
|
||||
return scrollingElement[upperSide];
|
||||
}
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const scrollingElement = element.ownerDocument.scrollingElement || html;
|
||||
return scrollingElement[upperSide];
|
||||
}
|
||||
|
||||
return element[upperSide];
|
||||
}
|
||||
return element[upperSide];
|
||||
}
|
||||
@@ -9,24 +9,24 @@ import getParentNode from './getParentNode';
|
||||
* @returns {Element} scroll parent
|
||||
*/
|
||||
export default function getScrollParent(element) {
|
||||
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
||||
if (!element) {
|
||||
return document.body
|
||||
}
|
||||
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
||||
if (!element) {
|
||||
return document.body
|
||||
}
|
||||
|
||||
switch (element.nodeName) {
|
||||
case 'HTML':
|
||||
case 'BODY':
|
||||
return element.ownerDocument.body
|
||||
case '#document':
|
||||
return element.body
|
||||
}
|
||||
switch (element.nodeName) {
|
||||
case 'HTML':
|
||||
case 'BODY':
|
||||
return element.ownerDocument.body
|
||||
case '#document':
|
||||
return element.body
|
||||
}
|
||||
|
||||
// Firefox want us to check `-x` and `-y` variations as well
|
||||
const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);
|
||||
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
|
||||
return element;
|
||||
}
|
||||
// Firefox want us to check `-x` and `-y` variations as well
|
||||
const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);
|
||||
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
|
||||
return element;
|
||||
}
|
||||
|
||||
return getScrollParent(getParentNode(element));
|
||||
}
|
||||
return getScrollParent(getParentNode(element));
|
||||
}
|
||||
@@ -6,11 +6,11 @@
|
||||
* @argument {String} property
|
||||
*/
|
||||
export default function getStyleComputedProperty(element, property) {
|
||||
if (element.nodeType !== 1) {
|
||||
return [];
|
||||
}
|
||||
// NOTE: 1 DOM access here
|
||||
const window = element.ownerDocument.defaultView;
|
||||
const css = window.getComputedStyle(element, null);
|
||||
return property ? css[property] : css;
|
||||
}
|
||||
if (element.nodeType !== 1) {
|
||||
return [];
|
||||
}
|
||||
// NOTE: 1 DOM access here
|
||||
const window = element.ownerDocument.defaultView;
|
||||
const css = window.getComputedStyle(element, null);
|
||||
return property ? css[property] : css;
|
||||
}
|
||||
@@ -6,15 +6,15 @@
|
||||
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
|
||||
*/
|
||||
export default function getSupportedPropertyName(property) {
|
||||
const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
||||
const upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
||||
const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
||||
const upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
||||
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
const prefix = prefixes[i];
|
||||
const toCheck = prefix ? `${prefix}${upperProp}` : property;
|
||||
if (typeof document.body.style[toCheck] !== 'undefined') {
|
||||
return toCheck;
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
const prefix = prefixes[i];
|
||||
const toCheck = prefix ? `${prefix}${upperProp}` : property;
|
||||
if (typeof document.body.style[toCheck] !== 'undefined') {
|
||||
return toCheck;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -3,20 +3,20 @@ import getScroll from './getScroll';
|
||||
import getClientRect from './getClientRect';
|
||||
|
||||
export default function getViewportOffsetRectRelativeToArtbitraryNode(element, excludeScroll = false) {
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
||||
const width = Math.max(html.clientWidth, window.innerWidth || 0);
|
||||
const height = Math.max(html.clientHeight, window.innerHeight || 0);
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
||||
const width = Math.max(html.clientWidth, window.innerWidth || 0);
|
||||
const height = Math.max(html.clientHeight, window.innerHeight || 0);
|
||||
|
||||
const scrollTop = !excludeScroll ? getScroll(html) : 0;
|
||||
const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
|
||||
const scrollTop = !excludeScroll ? getScroll(html) : 0;
|
||||
const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
|
||||
|
||||
const offset = {
|
||||
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
||||
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
||||
width,
|
||||
height,
|
||||
};
|
||||
const offset = {
|
||||
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
||||
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
||||
width,
|
||||
height,
|
||||
};
|
||||
|
||||
return getClientRect(offset);
|
||||
}
|
||||
return getClientRect(offset);
|
||||
}
|
||||
@@ -4,6 +4,6 @@
|
||||
* @returns {Window}
|
||||
*/
|
||||
export default function getWindow(element) {
|
||||
const ownerDocument = element.ownerDocument;
|
||||
return ownerDocument ? ownerDocument.defaultView : window;
|
||||
}
|
||||
const ownerDocument = element.ownerDocument;
|
||||
return ownerDocument ? ownerDocument.defaultView : window;
|
||||
}
|
||||
@@ -1,27 +1,27 @@
|
||||
import isIE from './isIE';
|
||||
|
||||
function getSize(axis, body, html, computedStyle) {
|
||||
return Math.max(
|
||||
body[`offset${axis}`],
|
||||
body[`scroll${axis}`],
|
||||
html[`client${axis}`],
|
||||
html[`offset${axis}`],
|
||||
html[`scroll${axis}`],
|
||||
isIE(10)
|
||||
? (parseInt(html[`offset${axis}`]) +
|
||||
parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`]) +
|
||||
parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]))
|
||||
: 0
|
||||
);
|
||||
return Math.max(
|
||||
body[`offset${axis}`],
|
||||
body[`scroll${axis}`],
|
||||
html[`client${axis}`],
|
||||
html[`offset${axis}`],
|
||||
html[`scroll${axis}`],
|
||||
isIE(10)
|
||||
? (parseInt(html[`offset${axis}`]) +
|
||||
parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`]) +
|
||||
parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]))
|
||||
: 0
|
||||
);
|
||||
}
|
||||
|
||||
export default function getWindowSizes(document) {
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
const computedStyle = isIE(10) && getComputedStyle(html);
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
const computedStyle = isIE(10) && getComputedStyle(html);
|
||||
|
||||
return {
|
||||
height: getSize('Height', body, html, computedStyle),
|
||||
width: getSize('Width', body, html, computedStyle),
|
||||
};
|
||||
}
|
||||
return {
|
||||
height: getSize('Height', body, html, computedStyle),
|
||||
width: getSize('Width', body, html, computedStyle),
|
||||
};
|
||||
}
|
||||
@@ -10,12 +10,12 @@ import getScroll from './getScroll';
|
||||
* @return {Object} rect - The modifier rect object
|
||||
*/
|
||||
export default function includeScroll(rect, element, subtract = false) {
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
const modifier = subtract ? -1 : 1;
|
||||
rect.top += scrollTop * modifier;
|
||||
rect.bottom += scrollTop * modifier;
|
||||
rect.left += scrollLeft * modifier;
|
||||
rect.right += scrollLeft * modifier;
|
||||
return rect;
|
||||
}
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
const modifier = subtract ? -1 : 1;
|
||||
rect.top += scrollTop * modifier;
|
||||
rect.bottom += scrollTop * modifier;
|
||||
rect.left += scrollLeft * modifier;
|
||||
rect.right += scrollLeft * modifier;
|
||||
return rect;
|
||||
}
|
||||
@@ -30,35 +30,35 @@ import setupEventListeners from './setupEventListeners';
|
||||
|
||||
/** @namespace Popper.Utils */
|
||||
export {
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
};
|
||||
|
||||
// This is here just for backward compatibility with versions lower than v1.10.3
|
||||
@@ -68,33 +68,33 @@ export {
|
||||
// ```
|
||||
// The default export will be removed in the next major version.
|
||||
export default {
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
};
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
};
|
||||
@@ -1 +1 @@
|
||||
export default typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
|
||||
export default typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
|
||||
@@ -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') {
|
||||
return false;
|
||||
}
|
||||
if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
||||
return true;
|
||||
}
|
||||
const parentNode = getParentNode(element);
|
||||
if (!parentNode) {
|
||||
return false;
|
||||
}
|
||||
return isFixed(parentNode);
|
||||
}
|
||||
const nodeName = element.nodeName;
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
return false;
|
||||
}
|
||||
if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
||||
return true;
|
||||
}
|
||||
const parentNode = getParentNode(element);
|
||||
if (!parentNode) {
|
||||
return false;
|
||||
}
|
||||
return isFixed(parentNode);
|
||||
}
|
||||
@@ -6,9 +6,9 @@
|
||||
* @returns {Boolean} answer to: is a function?
|
||||
*/
|
||||
export default function isFunction(functionToCheck) {
|
||||
const getType = {};
|
||||
return (
|
||||
functionToCheck &&
|
||||
getType.toString.call(functionToCheck) === '[object Function]'
|
||||
);
|
||||
}
|
||||
const getType = {};
|
||||
return (
|
||||
functionToCheck &&
|
||||
getType.toString.call(functionToCheck) === '[object Function]'
|
||||
);
|
||||
}
|
||||
@@ -11,11 +11,11 @@ const isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
|
||||
* @returns {Boolean} isIE
|
||||
*/
|
||||
export default function isIE(version) {
|
||||
if (version === 11) {
|
||||
return isIE11;
|
||||
}
|
||||
if (version === 10) {
|
||||
return isIE10;
|
||||
}
|
||||
return isIE11 || isIE10;
|
||||
}
|
||||
if (version === 11) {
|
||||
return isIE11;
|
||||
}
|
||||
if (version === 10) {
|
||||
return isIE10;
|
||||
}
|
||||
return isIE11 || isIE10;
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export default function isModifierEnabled(modifiers, modifierName) {
|
||||
return modifiers.some(
|
||||
({ name, enabled }) => enabled && name === modifierName
|
||||
);
|
||||
}
|
||||
return modifiers.some(
|
||||
({ name, enabled }) => enabled && name === modifierName
|
||||
);
|
||||
}
|
||||
@@ -11,28 +11,28 @@ import find from './find';
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export default function isModifierRequired(
|
||||
modifiers,
|
||||
requestingName,
|
||||
requestedName
|
||||
modifiers,
|
||||
requestingName,
|
||||
requestedName
|
||||
) {
|
||||
const requesting = find(modifiers, ({ name }) => name === requestingName);
|
||||
const requesting = find(modifiers, ({ name }) => name === requestingName);
|
||||
|
||||
const isRequired =
|
||||
!!requesting &&
|
||||
modifiers.some(modifier => {
|
||||
return (
|
||||
modifier.name === requestedName &&
|
||||
modifier.enabled &&
|
||||
modifier.order < requesting.order
|
||||
);
|
||||
});
|
||||
const isRequired =
|
||||
!!requesting &&
|
||||
modifiers.some(modifier => {
|
||||
return (
|
||||
modifier.name === requestedName &&
|
||||
modifier.enabled &&
|
||||
modifier.order < requesting.order
|
||||
);
|
||||
});
|
||||
|
||||
if (!isRequired) {
|
||||
const requesting = `\`${requestingName}\``;
|
||||
const requested = `\`${requestedName}\``;
|
||||
console.warn(
|
||||
`${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`
|
||||
);
|
||||
}
|
||||
return isRequired;
|
||||
}
|
||||
if (!isRequired) {
|
||||
const requesting = `\`${requestingName}\``;
|
||||
const requested = `\`${requestedName}\``;
|
||||
console.warn(
|
||||
`${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`
|
||||
);
|
||||
}
|
||||
return isRequired;
|
||||
}
|
||||
@@ -6,5 +6,5 @@
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export default function isNumeric(n) {
|
||||
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
||||
}
|
||||
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import getOffsetParent from './getOffsetParent';
|
||||
|
||||
export default function isOffsetContainer(element) {
|
||||
const { nodeName } = element;
|
||||
if (nodeName === 'BODY') {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element
|
||||
);
|
||||
}
|
||||
const { nodeName } = element;
|
||||
if (nodeName === 'BODY') {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element
|
||||
);
|
||||
}
|
||||
@@ -7,18 +7,18 @@ import getWindow from './getWindow';
|
||||
* @private
|
||||
*/
|
||||
export default function removeEventListeners(reference, state) {
|
||||
// Remove resize event listener on window
|
||||
getWindow(reference).removeEventListener('resize', state.updateBound);
|
||||
// Remove resize event listener on window
|
||||
getWindow(reference).removeEventListener('resize', state.updateBound);
|
||||
|
||||
// Remove scroll event listener on scroll parents
|
||||
state.scrollParents.forEach(target => {
|
||||
target.removeEventListener('scroll', state.updateBound);
|
||||
});
|
||||
// Remove scroll event listener on scroll parents
|
||||
state.scrollParents.forEach(target => {
|
||||
target.removeEventListener('scroll', state.updateBound);
|
||||
});
|
||||
|
||||
// Reset state
|
||||
state.updateBound = null;
|
||||
state.scrollParents = [];
|
||||
state.scrollElement = null;
|
||||
state.eventsEnabled = false;
|
||||
return state;
|
||||
}
|
||||
// Reset state
|
||||
state.updateBound = null;
|
||||
state.scrollParents = [];
|
||||
state.scrollElement = null;
|
||||
state.eventsEnabled = false;
|
||||
return state;
|
||||
}
|
||||
@@ -13,25 +13,25 @@ import getClientRect from '../utils/getClientRect';
|
||||
* @returns {dataObject}
|
||||
*/
|
||||
export default function runModifiers(modifiers, data, ends) {
|
||||
const modifiersToRun = ends === undefined
|
||||
? modifiers
|
||||
: modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
||||
const modifiersToRun = ends === undefined
|
||||
? modifiers
|
||||
: modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
||||
|
||||
modifiersToRun.forEach(modifier => {
|
||||
if (modifier['function']) { // eslint-disable-line dot-notation
|
||||
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
||||
}
|
||||
const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
|
||||
if (modifier.enabled && isFunction(fn)) {
|
||||
// Add properties to offsets to make them a complete clientRect object
|
||||
// we do this before each modifier to make sure the previous one doesn't
|
||||
// mess with these values
|
||||
data.offsets.popper = getClientRect(data.offsets.popper);
|
||||
data.offsets.reference = getClientRect(data.offsets.reference);
|
||||
modifiersToRun.forEach(modifier => {
|
||||
if (modifier['function']) { // eslint-disable-line dot-notation
|
||||
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
||||
}
|
||||
const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
|
||||
if (modifier.enabled && isFunction(fn)) {
|
||||
// Add properties to offsets to make them a complete clientRect object
|
||||
// we do this before each modifier to make sure the previous one doesn't
|
||||
// mess with these values
|
||||
data.offsets.popper = getClientRect(data.offsets.popper);
|
||||
data.offsets.reference = getClientRect(data.offsets.reference);
|
||||
|
||||
data = fn(data, modifier);
|
||||
}
|
||||
});
|
||||
data = fn(data, modifier);
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
@@ -7,12 +7,12 @@
|
||||
* Object with a list of properties and values which will be applied to the element
|
||||
*/
|
||||
export default function setAttributes(element, attributes) {
|
||||
Object.keys(attributes).forEach(function(prop) {
|
||||
const value = attributes[prop];
|
||||
if (value !== false) {
|
||||
element.setAttribute(prop, attributes[prop]);
|
||||
} else {
|
||||
element.removeAttribute(prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
Object.keys(attributes).forEach(function (prop) {
|
||||
const value = attributes[prop];
|
||||
if (value !== false) {
|
||||
element.setAttribute(prop, attributes[prop]);
|
||||
} else {
|
||||
element.removeAttribute(prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -9,16 +9,16 @@ import isNumeric from './isNumeric';
|
||||
* Object with a list of properties and values which will be applied to the element
|
||||
*/
|
||||
export default function setStyles(element, styles) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
let unit = '';
|
||||
// add unit if the value is numeric and is one of the following
|
||||
if (
|
||||
['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !==
|
||||
-1 &&
|
||||
isNumeric(styles[prop])
|
||||
) {
|
||||
unit = 'px';
|
||||
}
|
||||
element.style[prop] = styles[prop] + unit;
|
||||
});
|
||||
}
|
||||
Object.keys(styles).forEach(prop => {
|
||||
let unit = '';
|
||||
// add unit if the value is numeric and is one of the following
|
||||
if (
|
||||
['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !==
|
||||
-1 &&
|
||||
isNumeric(styles[prop])
|
||||
) {
|
||||
unit = 'px';
|
||||
}
|
||||
element.style[prop] = styles[prop] + unit;
|
||||
});
|
||||
}
|
||||
@@ -2,19 +2,19 @@ import getScrollParent from './getScrollParent';
|
||||
import getWindow from './getWindow';
|
||||
|
||||
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
||||
const isBody = scrollParent.nodeName === 'BODY';
|
||||
const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
||||
target.addEventListener(event, callback, { passive: true });
|
||||
const isBody = scrollParent.nodeName === 'BODY';
|
||||
const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
||||
target.addEventListener(event, callback, { passive: true });
|
||||
|
||||
if (!isBody) {
|
||||
attachToScrollParents(
|
||||
getScrollParent(target.parentNode),
|
||||
event,
|
||||
callback,
|
||||
scrollParents
|
||||
);
|
||||
}
|
||||
scrollParents.push(target);
|
||||
if (!isBody) {
|
||||
attachToScrollParents(
|
||||
getScrollParent(target.parentNode),
|
||||
event,
|
||||
callback,
|
||||
scrollParents
|
||||
);
|
||||
}
|
||||
scrollParents.push(target);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -24,25 +24,25 @@ function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
||||
* @private
|
||||
*/
|
||||
export default function setupEventListeners(
|
||||
reference,
|
||||
options,
|
||||
state,
|
||||
updateBound
|
||||
reference,
|
||||
options,
|
||||
state,
|
||||
updateBound
|
||||
) {
|
||||
// Resize event listener on window
|
||||
state.updateBound = updateBound;
|
||||
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
||||
// Resize event listener on window
|
||||
state.updateBound = updateBound;
|
||||
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
||||
|
||||
// Scroll event listener on scroll parents
|
||||
const scrollElement = getScrollParent(reference);
|
||||
attachToScrollParents(
|
||||
scrollElement,
|
||||
'scroll',
|
||||
state.updateBound,
|
||||
state.scrollParents
|
||||
);
|
||||
state.scrollElement = scrollElement;
|
||||
state.eventsEnabled = true;
|
||||
// Scroll event listener on scroll parents
|
||||
const scrollElement = getScrollParent(reference);
|
||||
attachToScrollParents(
|
||||
scrollElement,
|
||||
'scroll',
|
||||
state.updateBound,
|
||||
state.scrollParents
|
||||
);
|
||||
state.scrollElement = scrollElement;
|
||||
state.eventsEnabled = true;
|
||||
|
||||
return state;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
Reference in New Issue
Block a user