-
-/*
-* @fileOverview Kickass library to create and place poppers near their reference elements.
-* @version 1.0.0-alpha.3
-* @license
-* Copyright (c) 2016 Federico Zivolo and contributors
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-* copies of the Software, and to permit persons to whom the Software is
-* furnished to do so, subject to the following conditions:
-*
-* The above copyright notice and this permission notice shall be included in all
-* copies or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-* SOFTWARE.
-*/
-
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.0.8
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
- typeof define === 'function' && define.amd ? define(factory) :
- (global.Popper = factory());
-}(this, function () { 'use strict';
-
- /**
- * The Object.assign() method is used to copy the values of all enumerable own properties from one or more source
- * objects to a target object. It will return the target object.
- * This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway
- * Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
- * @function
- * @ignore
- */
- if (!Object.assign) {
- Object.defineProperty(Object, 'assign', {
- enumerable: false,
- configurable: true,
- writable: true,
- value: function value(target) {
- if (target === undefined || target === null) {
- throw new TypeError('Cannot convert first argument to object');
- }
-
- var to = Object(target);
- for (var i = 1; i < arguments.length; i++) {
- var nextSource = arguments[i];
- if (nextSource === undefined || nextSource === null) {
- continue;
- }
- nextSource = Object(nextSource);
-
- var keysArray = Object.keys(nextSource);
- for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
- var nextKey = keysArray[nextIndex];
- var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
- if (desc !== undefined && desc.enumerable) {
- to[nextKey] = nextSource[nextKey];
- }
- }
- }
- return to;
- }
- });
- }
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ (global.Popper = factory());
+}(this, (function () { 'use strict';
+
+/**
+ * Returns the offset parent of the given element
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @returns {Element} offset parent
+ */
+function getOffsetParent(element) {
+ // NOTE: 1 DOM access here
+ var offsetParent = element.offsetParent;
+ var nodeName = offsetParent && offsetParent.nodeName;
- /**
- * Polyfill for requestAnimationFrame
- * @function
- * @ignore
- */
- if (!window.requestAnimationFrame) {
- var lastTime = 0;
- var vendors = ['ms', 'moz', 'webkit', 'o'];
- for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
- window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
- window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
- }
+ if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
+ return window.document.documentElement;
+ }
- if (!window.requestAnimationFrame) {
- window.requestAnimationFrame = function (callback) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = window.setTimeout(function () {
- callback(currTime + timeToCall);
- }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
+ return offsetParent;
+}
+
+/**
+ * Get CSS computed property of the given element
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Eement} element
+ * @argument {String} property
+ */
+function getStyleComputedProperty(element, property) {
+ if (element.nodeType !== 1) {
+ return [];
+ }
+ // NOTE: 1 DOM access here
+ var css = window.getComputedStyle(element, null);
+ return property ? css[property] : css;
+}
+
+/**
+ * Returns the parentNode or the host of the element
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @returns {Element} parent
+ */
+function getParentNode(element) {
+ if (element.nodeName === 'HTML') {
+ return element;
+ }
+ return element.parentNode || element.host;
+}
+
+/**
+ * Returns the scrolling parent of the given element
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @returns {Element} scroll parent
+ */
+function getScrollParent(element) {
+ // Return body, `getScroll` will take care to get the correct `scrollTop` from it
+ if (!element || ['HTML', 'BODY', '#document'].indexOf(element.nodeName) !== -1) {
+ return window.document.body;
+ }
- if (!window.cancelAnimationFrame) {
- window.cancelAnimationFrame = function (id) {
- clearTimeout(id);
- };
- }
- }
+ // Firefox want us to check `-x` and `-y` variations as well
- /**
- * Return the index of the matching object
- * @method
- * @memberof Popper.Utils
- * @argument {Array} arr
- * @argument prop
- * @argument value
- * @returns index or -1
- */
- function findIndex(arr, prop, value) {
- // use filter instead of find because find has less cross-browser support
- var match = arr.filter(function (obj) {
- return obj[prop] === value;
- })[0];
- return arr.indexOf(match);
- }
+ var _getStyleComputedProp = getStyleComputedProperty(element),
+ overflow = _getStyleComputedProp.overflow,
+ overflowX = _getStyleComputedProp.overflowX,
+ overflowY = _getStyleComputedProp.overflowY;
- /**
- * Returns the offset parent of the given element
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element
- * @returns {Element} offset parent
- */
- function getOffsetParent(element) {
- // NOTE: 1 DOM access here
- var offsetParent = element.offsetParent;
- return !offsetParent || offsetParent.nodeName === 'BODY' ? window.document.documentElement : offsetParent;
- }
+ if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) {
+ return element;
+ }
- /**
- * Get CSS computed property of the given element
- * @method
- * @memberof Popper.Utils
- * @argument {Eement} element
- * @argument {String} property
- */
- function getStyleComputedProperty(element, property) {
- if (element.nodeType !== 1) {
- return [];
- }
- // NOTE: 1 DOM access here
- var css = window.getComputedStyle(element, null);
- return css[property];
- }
+ return getScrollParent(getParentNode(element));
+}
+
+/**
+ * Check if the given element is fixed or is inside a fixed parent
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @argument {Element} customContainer
+ * @returns {Boolean} answer to "isFixed?"
+ */
+function isFixed(element) {
+ var nodeName = element.nodeName;
+ if (nodeName === 'BODY' || nodeName === 'HTML') {
+ return false;
+ }
+ if (getStyleComputedProperty(element, 'position') === 'fixed') {
+ return true;
+ }
+ return isFixed(getParentNode(element));
+}
+
+/**
+ * Helper used to get the position which will be applied to the popper
+ * @method
+ * @memberof Popper.Utils
+ * @param {HTMLElement} element - popper element
+ * @returns {String} position
+ */
+function getPosition(element) {
+ var container = getOffsetParent(element);
+
+ // Decide if the popper will be fixed
+ // If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together
+ var isParentFixed = isFixed(container);
+ return isParentFixed ? 'fixed' : 'absolute';
+}
- /**
- * Returns the parentNode or the host of the element
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element
- * @returns {Element} parent
- */
- function getParentNode(element) {
- return element.parentNode || element.host;
- }
+/*
+ * Helper to detect borders of a given element
+ * @method
+ * @memberof Popper.Utils
+ * @param {CSSStyleDeclaration} styles - result of `getStyleComputedProperty` on the given element
+ * @param {String} axis - `x` or `y`
+ * @return {Number} borders - the borders size of the given axis
+ */
+
+function getBordersSize(styles, axis) {
+ var sideA = axis === 'x' ? 'Left' : 'Top';
+ var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
+
+ return Number(styles['border' + sideA + 'Width'].split('px')[0]) + Number(styles['border' + sideB + 'Width'].split('px')[0]);
+}
+
+/**
+ * Get bounding client rect of given element
+ * @method
+ * @memberof Popper.Utils
+ * @param {HTMLElement} element
+ * @return {Object} client rect
+ */
+function getBoundingClientRect(element) {
+ var isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1;
+ var rect = void 0;
+
+ // 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
+ if (isIE10) {
+ try {
+ rect = element.getBoundingClientRect();
+ } catch (err) {
+ rect = {};
+ }
+ } else {
+ rect = element.getBoundingClientRect();
+ }
- /**
- * Returns the scrolling parent of the given element
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element
- * @returns {Element} offset parent
- */
- function getScrollParent(element) {
- if (element === window.document) {
- // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
- // greater than 0 and return the proper element
- if (window.document.body.scrollTop) {
- return window.document.body;
- } else {
- return window.document.documentElement;
- }
- }
+ var result = {
+ left: rect.left,
+ top: rect.top,
+ right: rect.right,
+ bottom: rect.bottom,
+ width: rect.right - rect.left,
+ height: rect.bottom - rect.top
+ };
- // Firefox want us to check `-x` and `-y` variations as well
- if (['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-x')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-y')) !== -1) {
- // If the detected scrollParent is body, we perform an additional check on its parentNode
- // in this way we'll get body if the browser is Chrome-ish, or documentElement otherwise
- // fixes issue #65
- return element === window.document.body ? getScrollParent(getParentNode(element)) : element;
- }
- return getParentNode(element) ? getScrollParent(getParentNode(element)) : element;
- }
+ // IE10 FIX: `getBoundingClientRect`, when executed on `documentElement`
+ // will not take in account the `scrollTop` and `scrollLeft`
+ if (element.nodeName === 'HTML' && isIE10) {
+ var _window$document$docu = window.document.documentElement,
+ scrollTop = _window$document$docu.scrollTop,
+ scrollLeft = _window$document$docu.scrollLeft;
+
+ result.top -= scrollTop;
+ result.bottom -= scrollTop;
+ result.left -= scrollLeft;
+ result.right -= scrollLeft;
+ }
- /**
- * Get the position of the given element, relative to its offset parent
- * @method
- * @memberof Popper.Utils
- * @param {Element} element
- * @return {Object} position - Coordinates of the element and its `scrollTop`
- */
- function getOffsetRect(element) {
- var elementRect = {
- width: element.offsetWidth,
- height: element.offsetHeight,
- left: element.offsetLeft,
- top: element.offsetTop
- };
-
- elementRect.right = elementRect.left + elementRect.width;
- elementRect.bottom = elementRect.top + elementRect.height;
-
- // position
- return elementRect;
- }
+ // subtract scrollbar size from sizes
+ var horizScrollbar = rect.width - (element.clientWidth || rect.right - rect.left);
+ var vertScrollbar = rect.height - (element.clientHeight || rect.bottom - rect.top);
- /**
- * Computed the boundaries limits and return them
- * @method
- * @memberof Popper.Utils
- * @param {Object} data - Object containing the property "offsets" generated by `_getOffsets`
- * @param {Number} padding - Boundaries padding
- * @param {Element} boundariesElement - Element used to define the boundaries
- * @returns {Object} Coordinates of the boundaries
- */
- function getBoundaries(popper, data, padding, boundariesElement) {
- // NOTE: 1 DOM access here
- var boundaries = {};
- if (boundariesElement === 'window') {
- var body = window.document.body;
- var html = window.document.documentElement;
- var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
- var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
-
- boundaries = {
- top: 0,
- right: width,
- bottom: height,
- left: 0
- };
- } else if (boundariesElement === 'viewport') {
- var offsetParent = getOffsetParent(popper);
- var scrollParent = getScrollParent(popper);
- var offsetParentRect = getOffsetRect(offsetParent);
-
- // if the popper is fixed we don't have to substract scrolling from the boundaries
- var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollTop;
- var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollLeft;
-
- boundaries = {
- top: 0 - (offsetParentRect.top - scrollTop),
- right: window.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
- bottom: window.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
- left: 0 - (offsetParentRect.left - scrollLeft)
- };
- } else {
- if (getOffsetParent(popper) === boundariesElement) {
- boundaries = {
- top: 0,
- left: 0,
- right: boundariesElement.clientWidth,
- bottom: boundariesElement.clientHeight
- };
- } else {
- boundaries = getOffsetRect(boundariesElement);
- }
- }
- boundaries.left += padding;
- boundaries.right -= padding;
- boundaries.top = boundaries.top + padding;
- boundaries.bottom = boundaries.bottom - padding;
- return boundaries;
- }
+ // 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) {
+ var styles = getStyleComputedProperty(element);
+ horizScrollbar -= getBordersSize(styles, 'x');
+ vertScrollbar -= getBordersSize(styles, 'y');
+ }
- /**
- * Get bounding client rect of given element
- * @method
- * @memberof Popper.Utils
- * @param {HTMLElement} element
- * @return {Object} client rect
- */
- function getBoundingClientRect(element) {
- var rect = element.getBoundingClientRect();
- return {
- left: rect.left,
- top: rect.top,
- right: rect.right,
- bottom: rect.bottom,
- width: rect.right - rect.left,
- height: rect.bottom - rect.top
- };
- }
+ result.right -= horizScrollbar;
+ result.width -= horizScrollbar;
+ result.bottom -= vertScrollbar;
+ result.height -= vertScrollbar;
- /**
- * Given an element and one of its parents, return the offset
- * @method
- * @memberof Popper.Utils
- * @param {HTMLElement} element
- * @param {HTMLElement} parent
- * @return {Object} rect
- */
- function getOffsetRectRelativeToCustomParent(element, parent, fixed, transformed) {
- var elementRect = getBoundingClientRect(element);
- var parentRect = getBoundingClientRect(parent);
-
- if (fixed && !transformed) {
- var scrollParent = getScrollParent(parent);
- parentRect.top += scrollParent.scrollTop;
- parentRect.bottom += scrollParent.scrollTop;
- parentRect.left += scrollParent.scrollLeft;
- parentRect.right += scrollParent.scrollLeft;
- }
+ return result;
+}
- var rect = {
- top: elementRect.top - parentRect.top,
- left: elementRect.left - parentRect.left,
- bottom: elementRect.top - parentRect.top + elementRect.height,
- right: elementRect.left - parentRect.left + elementRect.width,
- width: elementRect.width,
- height: elementRect.height
- };
- return rect;
- }
+function getScroll(element) {
+ var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
- /**
- * Get the outer sizes of the given element (offset size + margins)
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element
- * @returns {Object} object containing width and height properties
- */
- function getOuterSizes(element) {
- // NOTE: 1 DOM access here
- var display = element.style.display;
- var visibility = element.style.visibility;
-
- element.style.display = 'block';
- element.style.visibility = 'hidden';
-
- // original method
- var styles = window.getComputedStyle(element);
- var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
- var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
- var result = {
- width: element.offsetWidth + y,
- height: element.offsetHeight + x
- };
-
- // reset element styles
- element.style.display = display;
- element.style.visibility = visibility;
-
- return result;
- }
+ var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
+ var nodeName = element.nodeName;
- /**
- * Given the popper offsets, generate an output similar to getBoundingClientRect
- * @method
- * @memberof Popper.Utils
- * @argument {Object} popperOffsets
- * @returns {Object} ClientRect like output
- */
- function getPopperClientRect(popperOffsets) {
- return Object.assign({}, popperOffsets, {
- right: popperOffsets.left + popperOffsets.width,
- bottom: popperOffsets.top + popperOffsets.height
- });
- }
+ if (nodeName === 'BODY' || nodeName === 'HTML') {
+ var html = window.document.documentElement;
+ var scrollingElement = window.document.scrollingElement || html;
+ return scrollingElement[upperSide];
+ }
- /**
- * Check if the given element is fixed or is inside a fixed parent
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element
- * @argument {Element} customContainer
- * @returns {Boolean} answer to "isFixed?"
- */
- function isFixed(element) {
- if (element === window.document.body) {
- return false;
- }
- if (getStyleComputedProperty(element, 'position') === 'fixed') {
- return true;
- }
- return getParentNode(element) ? isFixed(getParentNode(element)) : element;
- }
+ return element[upperSide];
+}
- /**
- * Helper used to get the position which will be applied to the popper
- * @method
- * @memberof Popper.Utils
- * @param config {HTMLElement} popper element
- * @returns {HTMLElement} reference element
- */
- function getPosition(popper, reference) {
- var container = getOffsetParent(reference);
-
- // Decide if the popper will be fixed
- // If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together
- var isParentFixed = isFixed(container);
- return isParentFixed ? 'fixed' : 'absolute';
- }
+/*
+ * Sum or subtract the element scroll values (left and top) from a given rect object
+ * @method
+ * @memberof Popper.Utils
+ * @param {Object} rect - Rect object you want to change
+ * @param {HTMLElement} element - The element from the function reads the scroll values
+ * @param {Boolean} subtract - set to true if you want to subtract the scroll values
+ * @return {Object} rect - The modifier rect object
+ */
+function includeScroll(rect, element) {
+ var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+ var scrollTop = getScroll(element, 'top');
+ var scrollLeft = getScroll(element, 'left');
+ var modifier = subtract ? -1 : 1;
+ rect.top += scrollTop * modifier;
+ rect.bottom += scrollTop * modifier;
+ rect.left += scrollLeft * modifier;
+ rect.right += scrollLeft * modifier;
+ return rect;
+}
+
+/**
+ * Given an element and one of its parents, return the offset
+ * @method
+ * @memberof Popper.Utils
+ * @param {HTMLElement} element
+ * @param {HTMLElement} parent
+ * @return {Object} rect
+ */
+function getOffsetRectRelativeToCustomParent(element, parent) {
+ var fixed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+ var transformed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+ var scrollParent = getScrollParent(parent);
+ var elementRect = getBoundingClientRect(element);
+ var parentRect = getBoundingClientRect(parent);
+
+ var rect = {
+ top: elementRect.top - parentRect.top,
+ left: elementRect.left - parentRect.left,
+ bottom: elementRect.top - parentRect.top + elementRect.height,
+ right: elementRect.left - parentRect.left + elementRect.width,
+ width: elementRect.width,
+ height: elementRect.height
+ };
- /**
- * Get the prefixed supported property name
- * @method
- * @memberof Popper.Utils
- * @argument {String} property (camelCase)
- * @returns {String} prefixed property (camelCase)
- */
- function getSupportedPropertyName(property) {
- var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];
-
- for (var i = 0; i < prefixes.length; i++) {
- var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;
- if (typeof window.document.body.style[toCheck] !== 'undefined') {
- return toCheck;
- }
- }
- return null;
- }
+ if (fixed && !transformed) {
+ rect = includeScroll(rect, scrollParent, true);
+ }
+ // When a popper doesn't have any positioned or scrollable parents, `offsetParent.contains(scrollParent)`
+ // will return a "false positive". This is happening because `getOffsetParent` returns `html` node,
+ // and `scrollParent` is the `body` node. Hence the additional check.
+ else if (getOffsetParent(element).contains(scrollParent) && scrollParent.nodeName !== 'BODY') {
+ rect = includeScroll(rect, parent);
+ }
+
+ // subtract borderTopWidth and borderTopWidth from final result
+ var styles = getStyleComputedProperty(parent);
+ var borderTopWidth = Number(styles.borderTopWidth.split('px')[0]);
+ var borderLeftWidth = Number(styles.borderLeftWidth.split('px')[0]);
+
+ rect.top -= borderTopWidth;
+ rect.bottom -= borderTopWidth;
+ rect.left -= borderLeftWidth;
+ rect.right -= borderLeftWidth;
+
+ return rect;
+}
+
+function getWindowSizes() {
+ var body = window.document.body;
+ var html = window.document.documentElement;
+ return {
+ height: Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
+ width: Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+ };
+}
+
+/**
+ * Get the position of the given element, relative to its offset parent
+ * @method
+ * @memberof Popper.Utils
+ * @param {Element} element
+ * @return {Object} position - Coordinates of the element and its `scrollTop`
+ */
+function getOffsetRect(element) {
+ var elementRect = void 0;
+ if (element.nodeName === 'HTML') {
+ var _getWindowSizes = getWindowSizes(),
+ width = _getWindowSizes.width,
+ height = _getWindowSizes.height;
+
+ elementRect = {
+ width: width,
+ height: height,
+ left: 0,
+ top: 0
+ };
+ } else {
+ elementRect = {
+ width: element.offsetWidth,
+ height: element.offsetHeight,
+ left: element.offsetLeft,
+ top: element.offsetTop
+ };
+ }
- /**
- * Check if the given variable is a function
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element - Element to check
- * @returns {Boolean} answer to: is a function?
- */
- function isFunction(functionToCheck) {
- var getType = {};
- return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
- }
+ elementRect.right = elementRect.left + elementRect.width;
+ elementRect.bottom = elementRect.top + elementRect.height;
+
+ // position
+ return elementRect;
+}
+
+function getOffsetRectRelativeToViewport(element) {
+ // Offset relative to offsetParent
+ var relativeOffset = getOffsetRect(element);
+
+ if (element.nodeName !== 'HTML') {
+ var offsetParent = getOffsetParent(element);
+ var parentOffset = getOffsetRectRelativeToViewport(offsetParent);
+ var offset = {
+ width: relativeOffset.offsetWidth,
+ height: relativeOffset.offsetHeight,
+ left: relativeOffset.left + parentOffset.left,
+ top: relativeOffset.top + parentOffset.top,
+ right: relativeOffset.right - parentOffset.right,
+ bottom: relativeOffset.bottom - parentOffset.bottom
+ };
+ return offset;
+ }
- /**
- * Helper used to know if the given modifier depends from another one.
- * @method
- * @memberof Popper.Utils
- * @returns {Boolean}
- */
- function isModifierRequired(modifiers, requesting, requested) {
- return !!modifiers.filter(function (modifier) {
- if (modifier.name === requested) {
- return true;
- } else if (modifier.name === requesting) {
- return false;
- }
- return false;
- }).length;
- }
+ return relativeOffset;
+}
- /**
- * Tells if a given input is a number
- * @method
- * @memberof Popper.Utils
- * @param {*} input to check
- * @return {Boolean}
- */
- function isNumeric(n) {
- return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
- }
+function getTotalScroll(element) {
+ var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
- /**
- * Check if the given element has transforms applied to itself or a parent
- * @method
- * @memberof Popper.Utils
- * @param {Element} element
- * @return {Boolean} answer to "isTransformed?"
- */
- function isTransformed(element) {
- if (element === window.document.body) {
- return false;
- }
- if (getStyleComputedProperty(element, 'transform') !== 'none') {
- return true;
- }
- return getParentNode(element) ? isTransformed(getParentNode(element)) : element;
- }
+ var scrollParent = getScrollParent(element);
+ var scroll = getScroll(scrollParent, side);
- /**
- * Loop trough the list of modifiers and run them in order, each of them will then edit the data object
- * @method
- * @memberof Popper.Utils
- * @param {Object} data
- * @param {Array} modifiers
- * @param {Function} ends
- */
- function runModifiers(modifiers, options, data, ends) {
- var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
-
- modifiersToRun.forEach(function (modifier) {
- if (modifier.enabled && isFunction(modifier.function)) {
- data = modifier.function(data, modifier);
- }
- });
-
- return data;
- }
+ if (['BODY', 'HTML'].indexOf(scrollParent.nodeName) === -1) {
+ return scroll + getTotalScroll(getParentNode(scrollParent), side);
+ }
+ return scroll;
+}
+
+/**
+ * Computed the boundaries limits and return them
+ * @method
+ * @memberof Popper.Utils
+ * @param {Object} data - Object containing the property "offsets" generated by `_getOffsets`
+ * @param {Number} padding - Boundaries padding
+ * @param {Element} boundariesElement - Element used to define the boundaries
+ * @returns {Object} Coordinates of the boundaries
+ */
+function getBoundaries(popper, padding, boundariesElement) {
+ // NOTE: 1 DOM access here
+ var boundaries = { top: 0, left: 0 };
+ var offsetParent = getOffsetParent(popper);
+
+ // Handle viewport case
+ if (boundariesElement === 'viewport') {
+ var _getOffsetRectRelativ = getOffsetRectRelativeToViewport(offsetParent),
+ left = _getOffsetRectRelativ.left,
+ top = _getOffsetRectRelativ.top;
+
+ var _window$document$docu = window.document.documentElement,
+ width = _window$document$docu.clientWidth,
+ height = _window$document$docu.clientHeight;
+
+
+ if (getPosition(popper) === 'fixed') {
+ boundaries.right = width;
+ boundaries.bottom = height;
+ } else {
+ var scrollLeft = getTotalScroll(popper, 'left');
+ var scrollTop = getTotalScroll(popper, 'top');
+
+ boundaries = {
+ top: 0 - top,
+ right: width - left + scrollLeft,
+ bottom: height - top + scrollTop,
+ left: 0 - left
+ };
+ }
+ }
+ // Handle other cases based on DOM element used as boundaries
+ else {
+ var boundariesNode = void 0;
+ if (boundariesElement === 'scrollParent') {
+ boundariesNode = getScrollParent(getParentNode(popper));
+ } else if (boundariesElement === 'window') {
+ boundariesNode = window.document.body;
+ } else {
+ boundariesNode = boundariesElement;
+ }
+
+ // In case of BODY, we need a different computation
+ if (boundariesNode.nodeName === 'BODY') {
+ var _getWindowSizes = getWindowSizes(),
+ _height = _getWindowSizes.height,
+ _width = _getWindowSizes.width;
+
+ boundaries.right = _width;
+ boundaries.bottom = _height;
+ }
+ // for all the other DOM elements, this one is good
+ else {
+ boundaries = getOffsetRectRelativeToCustomParent(boundariesNode, offsetParent, isFixed(popper));
+ }
+ }
+
+ // Add paddings
+ boundaries.left += padding;
+ boundaries.top += padding;
+ boundaries.right -= padding;
+ boundaries.bottom -= padding;
+
+ return boundaries;
+}
+
+/**
+ * Utility used to transform the `auto` placement to the placement with more
+ * available space.
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function computeAutoPlacement(placement, refRect, popper) {
+ if (placement.indexOf('auto') === -1) {
+ return placement;
+ }
- /**
- * Set the style to the given popper
- * @method
- * @memberof Popper.Utils
- * @argument {Element} element - Element to apply the style to
- * @argument {Object} styles - Object with a list of properties and values which will be applied to the element
- */
- function setStyle(element, styles) {
- Object.keys(styles).forEach(function (prop) {
- var 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;
- });
- }
+ var boundaries = getBoundaries(popper, 0, 'scrollParent');
- /** @namespace Popper.Utils */
- var Utils = {
- findIndex: findIndex,
- getBoundaries: getBoundaries,
- getBoundingClientRect: getBoundingClientRect,
- getOffsetParent: getOffsetParent,
- getOffsetRectRelativeToCustomParent: getOffsetRectRelativeToCustomParent,
- getOuterSizes: getOuterSizes,
- getPopperClientRect: getPopperClientRect,
- getPosition: getPosition,
- getScrollParent: getScrollParent,
- getStyleComputedProperty: getStyleComputedProperty,
- getSupportedPropertyName: getSupportedPropertyName,
- isFixed: isFixed,
- isFunction: isFunction,
- isModifierRequired: isModifierRequired,
- isNumeric: isNumeric,
- isTransformed: isTransformed,
- runModifiers: runModifiers,
- setStyle: setStyle
- };
+ var sides = {
+ top: refRect.top - boundaries.top,
+ right: boundaries.right - refRect.right,
+ bottom: boundaries.bottom - refRect.bottom,
+ left: refRect.left - boundaries.left
+ };
- /**
- * Get offsets to the popper
- * @method
- * @memberof Popper.Utils
- * @param {Element} popper - the popper element
- * @param {Element} reference - the reference element (the popper will be relative to this)
- * @returns {Object} An object containing the offsets which will be applied to the popper
- */
- function getOffsets(state, popper, reference, placement) {
- placement = placement.split('-')[0];
-
- var popperOffsets = {};
- popperOffsets.position = state.position;
-
- var isParentFixed = popperOffsets.position === 'fixed';
- var isParentTransformed = state.isParentTransformed;
-
- //
- // Get reference element position
- //
- var offsetParent = getOffsetParent(isParentFixed && isParentTransformed ? reference : popper);
- var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, offsetParent, isParentFixed, isParentTransformed);
-
- //
- // Get popper sizes
- //
- var popperRect = getOuterSizes(popper);
-
- //
- // Compute offsets of popper
- //
-
- // depending by the popper placement we have to compute its offsets slightly differently
- if (['right', 'left'].indexOf(placement) !== -1) {
- popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;
- if (placement === 'left') {
- popperOffsets.left = referenceOffsets.left - popperRect.width;
- } else {
- popperOffsets.left = referenceOffsets.right;
- }
- } else {
- popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;
- if (placement === 'top') {
- popperOffsets.top = referenceOffsets.top - popperRect.height;
- } else {
- popperOffsets.top = referenceOffsets.bottom;
- }
- }
+ var computedPlacement = Object.keys(sides).sort(function (a, b) {
+ return sides[b] - sides[a];
+ })[0];
+ var variation = placement.split('-')[1];
+
+ return computedPlacement + (variation ? '-' + variation : '');
+}
+
+var nativeHints = ['native code', '[object MutationObserverConstructor]' // for mobile safari iOS 9.0
+];
+
+/**
+ * Determine if a function is implemented natively (as opposed to a polyfill).
+ * @argument {Function | undefined} fn the function to check
+ * @returns {boolean}
+ */
+var isNative = (function (fn) {
+ return nativeHints.some(function (hint) {
+ return (fn || '').toString().indexOf(hint) > -1;
+ });
+});
+
+var isBrowser = typeof window !== 'undefined';
+var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
+var timeoutDuration = 0;
+for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
+ if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
+ timeoutDuration = 1;
+ break;
+ }
+}
+
+function microtaskDebounce(fn) {
+ var scheduled = false;
+ var i = 0;
+ var elem = document.createElement('span');
+
+ // MutationObserver provides a mechanism for scheduling microtasks, which
+ // are scheduled *before* the next task. This gives us a way to debounce
+ // a function but ensure it's called *before* the next paint.
+ var observer = new MutationObserver(function () {
+ fn();
+ scheduled = false;
+ });
- // Add width and height to our offsets object
- popperOffsets.width = popperRect.width;
- popperOffsets.height = popperRect.height;
+ observer.observe(elem, { attributes: true });
- return {
- popper: popperOffsets,
- reference: referenceOffsets
- };
- }
+ return function () {
+ if (!scheduled) {
+ scheduled = true;
+ elem.setAttribute('x-index', i);
+ i = i + 1; // don't use compund (+=) because it doesn't get optimized in V8
+ }
+ };
+}
+
+function taskDebounce(fn) {
+ var scheduled = false;
+ return function () {
+ if (!scheduled) {
+ scheduled = true;
+ setTimeout(function () {
+ scheduled = false;
+ fn();
+ }, timeoutDuration);
+ }
+ };
+}
- /**
- * Setup needed event listeners used to update the popper position
- * @method
- * @memberof Popper.Utils
- * @private
- */
- function setupEventListeners(reference, options, state, updateBound) {
- // NOTE: 1 DOM access here
- state.updateBound = updateBound;
- window.addEventListener('resize', state.updateBound, { passive: true });
- // if the boundariesElement is window we don't need to listen for the scroll event
- if (options.boundariesElement !== 'window') {
- var target = getScrollParent(reference);
- // here it could be both `body` or `documentElement` thanks to Firefox, we then check both
- if (target === window.document.body || target === window.document.documentElement) {
- target = window;
- }
- target.addEventListener('scroll', state.updateBound, { passive: true });
- }
- }
+// It's common for MutationObserver polyfills to be seen in the wild, however
+// these rely on Mutation Events which only occur when an element is connected
+// to the DOM. The algorithm used in this module does not use a connected element,
+// and so we must ensure that a *native* MutationObserver is available.
+var supportsNativeMutationObserver = isBrowser && isNative(window.MutationObserver);
- /**
- * Remove event listeners used to update the popper position
- * @method
- * @memberof Popper.Utils
- * @private
- */
- function removeEventListeners(reference, state, options) {
- // NOTE: 1 DOM access here
- window.removeEventListener('resize', state.updateBound);
- if (options.boundariesElement !== 'window') {
- var target = getScrollParent(reference);
- // here it could be both `body` or `documentElement` thanks to Firefox, we then check both
- if (target === window.document.body || target === window.document.documentElement) {
- target = window;
- }
- target.removeEventListener('scroll', state.updateBound);
- }
- state.updateBound = null;
- return state;
- }
+/**
+* Create a debounced version of a method, that's asynchronously deferred
+* but called in the minimum time possible.
+*
+* @method
+* @memberof Popper.Utils
+* @argument {Function} fn
+* @returns {Function}
+*/
+var debounce = supportsNativeMutationObserver ? microtaskDebounce : taskDebounce;
+
+/**
+ * Mimics the `find` method of Array
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Array} arr
+ * @argument prop
+ * @argument value
+ * @returns index or -1
+ */
+function find(arr, check) {
+ // use native find if supported
+ if (Array.prototype.find) {
+ return arr.find(check);
+ }
- /**
- * Sorts the modifiers based on their `order` property
- * @method
- * @memberof Popper.Utils
- */
- function sortModifiers(a, b) {
- if (a.order < b.order) {
- return -1;
- } else if (a.order > b.order) {
- return 1;
- }
- return 0;
- }
+ // use `filter` to obtain the same behavior of `find`
+ return arr.filter(check)[0];
+}
+
+/**
+ * Return the index of the matching object
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Array} arr
+ * @argument prop
+ * @argument value
+ * @returns index or -1
+ */
+function findIndex(arr, prop, value) {
+ // use native findIndex if supported
+ if (Array.prototype.findIndex) {
+ return arr.findIndex(function (cur) {
+ return cur[prop] === value;
+ });
+ }
- /**
- * Apply the computed styles to the popper element
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by `update` method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The same data object
- */
- function applyStyle(data) {
- // apply the final offsets to the popper
- // NOTE: 1 DOM access here
- var styles = {
- position: data.offsets.popper.position
- };
-
- // round top and left to avoid blurry text
- var left = Math.round(data.offsets.popper.left);
- var top = Math.round(data.offsets.popper.top);
-
- // if gpuAcceleration is set to true and transform is supported, we use `translate3d` to apply the position to the popper
- // we automatically use the supported prefixed version if needed
- var prefixedProperty = getSupportedPropertyName('transform');
- if (data.instance.options.gpuAcceleration && prefixedProperty) {
- styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
- styles.top = 0;
- styles.left = 0;
- }
- // othwerise, we use the standard `left` and `top` properties
- else {
- styles.left = left;
- styles.top = top;
- }
-
- // any property present in `data.styles` will be applied to the popper,
- // in this way we can make the 3rd party modifiers add custom styles to it
- // Be aware, modifiers could override the properties defined in the previous
- // lines of this modifier!
- Object.assign(styles, data.styles);
-
- setStyle(data.instance.popper, styles);
-
- // set an attribute which will be useful to style the tooltip (use it to properly position its arrow)
- // NOTE: 1 DOM access here
- data.instance.popper.setAttribute('x-placement', data.placement);
-
- // if the arrow style has been computed, apply the arrow style
- if (data.offsets.arrow) {
- setStyle(data.arrowElement, data.offsets.arrow);
- }
+ // use `find` + `indexOf` if `findIndex` isn't supported
+ var match = find(arr, function (obj) {
+ return obj[prop] === value;
+ });
+ return arr.indexOf(match);
+}
- return data;
+var classCallCheck = function (instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
}
-
- /**
- * Set the x-placement attribute before everything else because it could be used to add margins to the popper
- * margins needs to be calculated to get the correct popper offsets
- * @method
- * @memberof Popper.modifiers
- * @param {HTMLElement} reference - The reference element used to position the popper
- * @param {HTMLElement} popper - The HTML element used as popper.
- * @param {Object} options - Popper.js options
- */
- function applyStyleOnLoad(reference, popper, options) {
- popper.setAttribute('x-placement', options.placement);
+};
+
+var createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
}
- /**
- * Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element
- * It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function arrow(data, options) {
- var arrow = options.element;
-
- // if the arrowElement is a string, suppose it's a CSS selector
- if (typeof arrow === 'string') {
- arrow = data.instance.popper.querySelector(arrow);
- }
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
+ };
+}();
- // if arrow element is not found, don't run the modifier
- if (!arrow) {
- return data;
- }
- // the arrow element must be child of its popper
- if (!data.instance.popper.contains(arrow)) {
- console.warn('WARNING: `arrowElement` must be child of its popper element!');
- return data;
- }
- // arrow depends on keepTogether in order to work
- if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
- console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!');
- return data;
- }
- var arrowStyle = {};
- var placement = data.placement.split('-')[0];
- var popper = getPopperClientRect(data.offsets.popper);
- var reference = data.offsets.reference;
- var isVertical = ['left', 'right'].indexOf(placement) !== -1;
-
- var len = isVertical ? 'height' : 'width';
- var side = isVertical ? 'top' : 'left';
- var altSide = isVertical ? 'left' : 'top';
- var opSide = isVertical ? 'bottom' : 'right';
- var arrowSize = getOuterSizes(arrow)[len];
-
- //
- // extends keepTogether behavior making sure the popper and its reference have enough pixels in conjuction
- //
-
- // top/left side
- if (reference[opSide] - arrowSize < popper[side]) {
- data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
- }
- // bottom/right side
- if (reference[side] + arrowSize > popper[opSide]) {
- data.offsets.popper[side] += reference[side] + arrowSize - popper[opSide];
+
+var defineProperty = function (obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+
+ return obj;
+};
+
+var _extends = Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
}
+ }
+ }
- // compute center of the popper
- var center = reference[side] + reference[len] / 2 - arrowSize / 2;
+ return target;
+};
+
+/**
+ * Given the popper offsets, generate an output similar to getBoundingClientRect
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Object} popperOffsets
+ * @returns {Object} ClientRect like output
+ */
+function getClientRect(popperOffsets) {
+ return _extends({}, popperOffsets, {
+ right: popperOffsets.left + popperOffsets.width,
+ bottom: popperOffsets.top + popperOffsets.height
+ });
+}
+
+/**
+ * Get the outer sizes of the given element (offset size + margins)
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element
+ * @returns {Object} object containing width and height properties
+ */
+function getOuterSizes(element) {
+ var styles = window.getComputedStyle(element);
+ var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+ var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+ var result = {
+ width: element.offsetWidth + y,
+ height: element.offsetHeight + x
+ };
+ return result;
+}
+
+/**
+ * Get the opposite placement of the given one/
+ * @method
+ * @memberof Popper.Utils
+ * @argument {String} placement
+ * @returns {String} flipped placement
+ */
+function getOppositePlacement(placement) {
+ var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
+ return placement.replace(/left|right|bottom|top/g, function (matched) {
+ return hash[matched];
+ });
+}
+
+/**
+ * Get offsets to the popper
+ * @method
+ * @memberof Popper.Utils
+ * @param {Object} position - CSS position the Popper will get applied
+ * @param {HTMLElement} popper - the popper element
+ * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
+ * @param {String} placement - one of the valid placement options
+ * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
+ */
+function getPopperOffsets(position, popper, referenceOffsets, placement) {
+ placement = placement.split('-')[0];
+
+ // Get popper node sizes
+ var popperRect = getOuterSizes(popper);
+
+ // Add position, width and height to our offsets object
+ var popperOffsets = {
+ position: position,
+ width: popperRect.width,
+ height: popperRect.height
+ };
- // Compute the sideValue using the updated popper offsets
- var sideValue = center - getPopperClientRect(data.offsets.popper)[side];
+ // depending by the popper placement we have to compute its offsets slightly differently
+ var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
+ var mainSide = isHoriz ? 'top' : 'left';
+ var secondarySide = isHoriz ? 'left' : 'top';
+ var measurement = isHoriz ? 'height' : 'width';
+ var 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)];
+ }
- // prevent arrow from being placed not contiguously to its popper
- sideValue = Math.max(Math.min(popper[len] - arrowSize, sideValue), 0);
- arrowStyle[side] = sideValue;
- arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow
+ return popperOffsets;
+}
+
+/**
+ * Get offsets to the reference element
+ * @method
+ * @memberof Popper.Utils
+ * @param {Object} state
+ * @param {Element} popper - the popper element
+ * @param {Element} reference - the reference element (the popper will be relative to this)
+ * @returns {Object} An object containing the offsets which will be applied to the popper
+ */
+function getReferenceOffsets(state, popper, reference) {
+ var isParentFixed = state.position === 'fixed';
+ var isParentTransformed = state.isParentTransformed;
+ var offsetParent = getOffsetParent(isParentFixed && isParentTransformed ? reference : popper);
+
+ return getOffsetRectRelativeToCustomParent(reference, offsetParent, isParentFixed, isParentTransformed);
+}
+
+/**
+ * Get the prefixed supported property name
+ * @method
+ * @memberof Popper.Utils
+ * @argument {String} property (camelCase)
+ * @returns {String} prefixed property (camelCase)
+ */
+function getSupportedPropertyName(property) {
+ var prefixes = [false, 'ms', 'webkit', 'moz', 'o'];
+ var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
+
+ for (var i = 0; i < prefixes.length - 1; i++) {
+ var prefix = prefixes[i];
+ var toCheck = prefix ? '' + prefix + upperProp : property;
+ if (typeof window.document.body.style[toCheck] !== 'undefined') {
+ return toCheck;
+ }
+ }
+ return null;
+}
+
+/**
+ * Check if the given variable is a function
+ * @method
+ * @memberof Popper.Utils
+ * @argument {*} functionToCheck - variable to check
+ * @returns {Boolean} answer to: is a function?
+ */
+function isFunction(functionToCheck) {
+ var getType = {};
+ return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+}
+
+/**
+ * Helper used to know if the given modifier is enabled.
+ * @method
+ * @memberof Popper.Utils
+ * @returns {Boolean}
+ */
+function isModifierEnabled(modifiers, modifierName) {
+ return modifiers.some(function (_ref) {
+ var name = _ref.name,
+ enabled = _ref.enabled;
+ return enabled && name === modifierName;
+ });
+}
+
+/**
+ * Helper used to know if the given modifier depends from another one.
+ * It checks if the needed modifier is listed and enabled.
+ * @method
+ * @memberof Popper.Utils
+ * @param {Array} modifiers - list of modifiers
+ * @param {String} requestingName - name of requesting modifier
+ * @param {String} requestedName - name of requested modifier
+ * @returns {Boolean}
+ */
+function isModifierRequired(modifiers, requestingName, requestedName) {
+ var requesting = find(modifiers, function (_ref) {
+ var name = _ref.name;
+ return name === requestingName;
+ });
- data.offsets.arrow = arrowStyle;
- data.arrowElement = arrow;
+ return !!requesting && modifiers.some(function (modifier) {
+ return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
+ });
+}
+
+/**
+ * Tells if a given input is a number
+ * @method
+ * @memberof Popper.Utils
+ * @param {*} input to check
+ * @return {Boolean}
+ */
+function isNumeric(n) {
+ return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
+}
+
+/**
+ * Check if the given element has transforms applied to itself or a parent
+ * @method
+ * @memberof Popper.Utils
+ * @param {Element} element
+ * @return {Boolean} answer to "isTransformed?"
+ */
+function isTransformed(element) {
+ if (element.nodeName === 'BODY') {
+ return false;
+ }
+ if (getStyleComputedProperty(element, 'transform') !== 'none') {
+ return true;
+ }
+ return getParentNode(element) ? isTransformed(getParentNode(element)) : element;
+}
+
+/**
+ * Remove event listeners used to update the popper position
+ * @method
+ * @memberof Popper.Utils
+ * @private
+ */
+function removeEventListeners(reference, state) {
+ // Remove resize event listener on window
+ window.removeEventListener('resize', state.updateBound);
+
+ // Remove scroll event listener on scroll parents
+ state.scrollParents.forEach(function (target) {
+ target.removeEventListener('scroll', state.updateBound);
+ });
- return data;
- }
+ // Reset state
+ state.updateBound = null;
+ state.scrollParents = [];
+ state.scrollElement = null;
+ state.eventsEnabled = false;
+ return state;
+}
+
+/**
+ * Loop trough the list of modifiers and run them in order, each of them will then edit the data object
+ * @method
+ * @memberof Popper.Utils
+ * @param {Object} data
+ * @param {Array} modifiers
+ * @param {Function} ends
+ */
+function runModifiers(modifiers, data, ends) {
+ var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
+
+ modifiersToRun.forEach(function (modifier) {
+ if (modifier.enabled && isFunction(modifier.function)) {
+ data = modifier.function(data, modifier);
+ }
+ });
- /**
- * Get the opposite placement of the given one/
- * @method
- * @memberof Popper.Utils
- * @argument {String} placement
- * @returns {String} flipped placement
- */
- function getOppositePlacement(placement) {
- var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
- return placement.replace(/left|right|bottom|top/g, function (matched) {
- return hash[matched];
+ return data;
+}
+
+/**
+ * Set the attributes to the given popper
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element - Element to apply the attributes to
+ * @argument {Object} styles - Object with a list of properties and values which will be applied to the element
+ */
+function setAttributes(element, attributes) {
+ Object.keys(attributes).forEach(function (prop) {
+ var value = attributes[prop];
+ if (value !== false) {
+ element.setAttribute(prop, attributes[prop]);
+ } else {
+ element.removeAttribute(prop);
+ }
});
- }
+}
+
+/**
+ * Set the style to the given popper
+ * @method
+ * @memberof Popper.Utils
+ * @argument {Element} element - Element to apply the style to
+ * @argument {Object} styles - Object with a list of properties and values which will be applied to the element
+ */
+function setStyles(element, styles) {
+ Object.keys(styles).forEach(function (prop) {
+ var 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;
+ });
+}
- /**
- * Get the opposite placement variation of the given one/
- * @method
- * @memberof Popper.Utils
- * @argument {String} placement variation
- * @returns {String} flipped placement variation
- */
- function getOppositeVariation(variation) {
- if (variation === 'end') {
- return 'start';
- } else if (variation === 'start') {
- return 'end';
- }
- return variation;
- }
+function attachToScrollParents(scrollParent, event, callback, scrollParents) {
+ var isBody = scrollParent.nodeName === 'BODY';
+ var target = isBody ? window : scrollParent;
+ target.addEventListener(event, callback, { passive: true });
- /**
- * Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element.
- * Requires the `preventOverflow` modifier before it in order to work.
- * **NOTE:** data.instance modifier will run all its previous modifiers everytime it tries to flip the popper!
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function flip(data, options) {
- // check if preventOverflow is in the list of modifiers before the flip modifier.
- // otherwise flip would not work as expected.
- if (!isModifierRequired(data.instance.modifiers, 'flip', 'preventOverflow')) {
- console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!');
- return data;
- }
+ if (!isBody) {
+ attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
+ }
+ scrollParents.push(target);
+}
+
+/**
+ * Setup needed event listeners used to update the popper position
+ * @method
+ * @memberof Popper.Utils
+ * @private
+ */
+function setupEventListeners(reference, options, state, updateBound) {
+ // Resize event listener on window
+ state.updateBound = updateBound;
+ window.addEventListener('resize', state.updateBound, { passive: true });
+
+ // Scroll event listener on scroll parents
+ var scrollElement = getScrollParent(reference);
+ attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
+ state.scrollElement = scrollElement;
+ state.eventsEnabled = true;
+
+ return state;
+}
+
+/** @namespace Popper.Utils */
+var Utils = {
+ computeAutoPlacement: computeAutoPlacement,
+ debounce: debounce,
+ findIndex: findIndex,
+ getBordersSize: getBordersSize,
+ getBoundaries: getBoundaries,
+ getBoundingClientRect: getBoundingClientRect,
+ getClientRect: getClientRect,
+ getOffsetParent: getOffsetParent,
+ getOffsetRect: getOffsetRect,
+ getOffsetRectRelativeToCustomParent: getOffsetRectRelativeToCustomParent,
+ getOuterSizes: getOuterSizes,
+ getParentNode: getParentNode,
+ getPopperOffsets: getPopperOffsets,
+ getPosition: getPosition,
+ getReferenceOffsets: getReferenceOffsets,
+ getScroll: getScroll,
+ getScrollParent: getScrollParent,
+ getStyleComputedProperty: getStyleComputedProperty,
+ getSupportedPropertyName: getSupportedPropertyName,
+ getTotalScroll: getTotalScroll,
+ getWindowSizes: getWindowSizes,
+ includeScroll: includeScroll,
+ isFixed: isFixed,
+ isFunction: isFunction,
+ isModifierEnabled: isModifierEnabled,
+ isModifierRequired: isModifierRequired,
+ isNative: isNative,
+ isNumeric: isNumeric,
+ isTransformed: isTransformed,
+ removeEventListeners: removeEventListeners,
+ runModifiers: runModifiers,
+ setAttributes: setAttributes,
+ setStyles: setStyles,
+ setupEventListeners: setupEventListeners
+};
+
+/**
+ * Apply the computed styles to the popper element
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by `update` method
+ * @argument {Object} data.styles - List of style properties - values to apply to popper element
+ * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The same data object
+ */
+function applyStyle(data, options) {
+ // apply the final offsets to the popper
+ // NOTE: 1 DOM access here
+ var styles = {
+ position: data.offsets.popper.position
+ };
- if (data.flipped && data.placement === data.originalPlacement) {
- // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
- return data;
- }
+ var attributes = {
+ 'x-placement': data.placement
+ };
- var placement = data.placement.split('-')[0];
- var placementOpposite = getOppositePlacement(placement);
- var variation = data.placement.split('-')[1] || '';
+ // round top and left to avoid blurry text
+ var left = Math.round(data.offsets.popper.left);
+ var top = Math.round(data.offsets.popper.top);
+
+ // if gpuAcceleration is set to true and transform is supported,
+ // we use `translate3d` to apply the position to the popper we
+ // automatically use the supported prefixed version if needed
+ var prefixedProperty = getSupportedPropertyName('transform');
+ if (options.gpuAcceleration && prefixedProperty) {
+ styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
+ styles.top = 0;
+ styles.left = 0;
+ styles.willChange = 'transform';
+ }
+ // othwerise, we use the standard `left` and `top` properties
+ else {
+ styles.left = left;
+ styles.top = top;
+ styles.willChange = 'top, left';
+ }
+
+ // any property present in `data.styles` will be applied to the popper,
+ // in this way we can make the 3rd party modifiers add custom styles to it
+ // Be aware, modifiers could override the properties defined in the previous
+ // lines of this modifier!
+ setStyles(data.instance.popper, _extends({}, styles, data.styles));
+
+ // any property present in `data.attributes` will be applied to the popper,
+ // they will be set as HTML attributes of the element
+ setAttributes(data.instance.popper, _extends({}, attributes, data.attributes));
+
+ // if the arrow style has been computed, apply the arrow style
+ if (data.offsets.arrow) {
+ setStyles(data.arrowElement, data.offsets.arrow);
+ }
- var flipOrder = [];
+ return data;
+}
+
+/**
+ * Set the x-placement attribute before everything else because it could be used to add margins to the popper
+ * margins needs to be calculated to get the correct popper offsets
+ * @method
+ * @memberof Popper.modifiers
+ * @param {HTMLElement} reference - The reference element used to position the popper
+ * @param {HTMLElement} popper - The HTML element used as popper.
+ * @param {Object} options - Popper.js options
+ */
+function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
+ // compute reference element offsets
+ var referenceOffsets = getReferenceOffsets(state, popper, reference);
+
+ // compute auto placement, store placement inside the data object,
+ // modifiers will be able to edit `placement` if needed
+ // and refer to originalPlacement to know the original value
+ options.placement = computeAutoPlacement(options.placement, referenceOffsets, popper);
+
+ popper.setAttribute('x-placement', options.placement);
+ return options;
+}
+
+/**
+ * Modifier used to move the arrowElements on the edge of the popper to make sure them are always between the popper and the reference element
+ * It will use the CSS outer size of the arrowElement element to know how many pixels of conjuction are needed
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function arrow(data, options) {
+ // arrow depends on keepTogether in order to work
+ if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
+ console.warn('WARNING: `keepTogether` modifier is required by arrow modifier in order to work, be sure to include it before `arrow`!');
+ return data;
+ }
- if (options.behavior === 'flip') {
- flipOrder = [placement, placementOpposite];
- } else {
- flipOrder = options.behavior;
- }
+ var arrowElement = options.element;
+
+ // if arrowElement is a string, suppose it's a CSS selector
+ if (typeof arrowElement === 'string') {
+ arrowElement = data.instance.popper.querySelector(arrowElement);
+
+ // if arrowElement is not found, don't run the modifier
+ if (!arrowElement) {
+ return data;
+ }
+ } else {
+ // if the arrowElement isn't a query selector we must check that the
+ // provided DOM node is child of its popper node
+ if (!data.instance.popper.contains(arrowElement)) {
+ console.warn('WARNING: `arrow.element` must be child of its popper element!');
+ return data;
+ }
+ }
- flipOrder.forEach(function (step, index) {
- if (placement !== step || flipOrder.length === index + 1) {
- return data;
- }
+ var placement = data.placement.split('-')[0];
+ var popper = getClientRect(data.offsets.popper);
+ var reference = data.offsets.reference;
+ var isVertical = ['left', 'right'].indexOf(placement) !== -1;
- placement = data.placement.split('-')[0];
- placementOpposite = getOppositePlacement(placement);
+ var len = isVertical ? 'height' : 'width';
+ var side = isVertical ? 'top' : 'left';
+ var altSide = isVertical ? 'left' : 'top';
+ var opSide = isVertical ? 'bottom' : 'right';
+ var arrowElementSize = getOuterSizes(arrowElement)[len];
- var popperOffsets = getPopperClientRect(data.offsets.popper);
+ //
+ // extends keepTogether behavior making sure the popper and its reference have enough pixels in conjuction
+ //
- // this boolean is used to distinguish right and bottom from top and left
- // they need different computations to get flipped
- var a = ['right', 'bottom'].indexOf(placement) !== -1;
- var b = ['top', 'bottom'].indexOf(placement) !== -1;
+ // top/left side
+ if (reference[opSide] - arrowElementSize < popper[side]) {
+ data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
+ }
+ // bottom/right side
+ if (reference[side] + arrowElementSize > popper[opSide]) {
+ data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
+ }
- // using Math.floor because the reference offsets may contain decimals we are not going to consider here
- var flippedPosition = a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) || !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite]);
+ // compute center of the popper
+ var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
+
+ // Compute the sideValue using the updated popper offsets
+ var sideValue = center - getClientRect(data.offsets.popper)[side];
+
+ // prevent arrowElement from being placed not contiguously to its popper
+ sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
+
+ data.arrowElement = arrowElement;
+ data.offsets.arrow = {};
+ data.offsets.arrow[side] = sideValue;
+ data.offsets.arrow[altSide] = ''; // make sure to unset any eventual altSide value from the DOM node
+
+ return data;
+}
+
+/**
+ * Get the opposite placement variation of the given one/
+ * @method
+ * @memberof Popper.Utils
+ * @argument {String} placement variation
+ * @returns {String} flipped placement variation
+ */
+function getOppositeVariation(variation) {
+ if (variation === 'end') {
+ return 'start';
+ } else if (variation === 'start') {
+ return 'end';
+ }
+ return variation;
+}
+
+/**
+ * Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element.
+ * Requires the `preventOverflow` modifier before it in order to work.
+ * **NOTE:** data.instance modifier will run all its previous modifiers everytime it tries to flip the popper!
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function flip(data, options) {
+ // if `inner` modifier is enabled, we can't use the `flip` modifier
+ if (isModifierEnabled(data.instance.modifiers, 'inner')) {
+ return data;
+ }
- var flippedVariation = options.flipVariations && (b && variation === 'start' && Math.floor(popperOffsets.left) < Math.floor(data.boundaries.left) || b && variation === 'end' && Math.floor(popperOffsets.right) > Math.floor(data.boundaries.right) || !b && variation === 'start' && Math.floor(popperOffsets.top) < Math.floor(data.boundaries.top) || !b && variation === 'end' && Math.floor(popperOffsets.bottom) > Math.floor(data.boundaries.bottom));
+ if (data.flipped && data.placement === data.originalPlacement) {
+ // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
+ return data;
+ }
- if (flippedPosition || flippedVariation) {
- // this boolean to detect any flip loop
- data.flipped = true;
+ var boundaries = getBoundaries(data.instance.popper, options.padding, options.boundariesElement);
- if (flippedPosition) {
- placement = flipOrder[index + 1];
- }
- if (flippedVariation) {
- variation = getOppositeVariation(variation);
- }
+ var placement = data.placement.split('-')[0];
+ var placementOpposite = getOppositePlacement(placement);
+ var variation = data.placement.split('-')[1] || '';
- data.placement = placement + (variation ? '-' + variation : '');
- data.offsets.popper = getOffsets(data.instance.state, data.instance.popper, data.instance.reference, data.placement).popper;
+ var flipOrder = [];
- data = runModifiers(data.instance.modifiers, data.instance.options, data, 'flip');
- }
- });
- return data;
- }
+ if (options.behavior === 'flip') {
+ flipOrder = [placement, placementOpposite];
+ } else {
+ flipOrder = options.behavior;
+ }
- /**
- * Modifier used to make sure the popper is always near its reference element
- * It cares only about the first axis, you can still have poppers with margin
- * between the popper and its reference element.
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function keepTogether(data) {
- var popper = getPopperClientRect(data.offsets.popper);
- var reference = data.offsets.reference;
- var f = Math.floor;
- var placement = data.placement.split('-')[0];
-
- if (['top', 'bottom'].indexOf(placement) !== -1) {
- if (popper.right < f(reference.left)) {
- data.offsets.popper.left = f(reference.left) - popper.width;
- }
- if (popper.left > f(reference.right)) {
- data.offsets.popper.left = f(reference.right);
- }
- } else {
- if (popper.bottom < f(reference.top)) {
- data.offsets.popper.top = f(reference.top) - popper.height;
- }
- if (popper.top > f(reference.bottom)) {
- data.offsets.popper.top = f(reference.bottom);
- }
- }
+ flipOrder.forEach(function (step, index) {
+ if (placement !== step || flipOrder.length === index + 1) {
+ return data;
+ }
- return data;
- }
+ placement = data.placement.split('-')[0];
+ placementOpposite = getOppositePlacement(placement);
- /**
- * Modifier used to add an offset to the popper, useful if you more granularity positioning your popper.
- * The offsets will shift the popper on the side of its reference element.
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @argument {Number|String} options.offset=0
- * Basic usage allows a number used to nudge the popper by the given amount of pixels.
- * You can pass a percentage value as string (eg. `20%`) to nudge by the given percentage (relative to reference element size)
- * Other supported units are `vh` and `vw` (relative to viewport)
- * Additionally, you can pass a pair of values (eg. `10 20` or `2vh 20%`) to nudge the popper
- * on both axis.
- * A note about percentage values, if you want to refer a percentage to the popper size instead of the reference element size,
- * use `%p` instead of `%` (eg: `20%p`). To make it clearer, you can replace `%` with `%r` and use eg.`10%p 25%r`.
- * > **Heads up!** The order of the axis is relative to the popper placement: `bottom` or `top` are `X,Y`, the other are `Y,X`
- * @returns {Object} The data object, properly modified
- */
- function offset(data, options) {
- var placement = data.placement;
- var popper = data.offsets.popper;
-
- var offsets = void 0;
- if (isNumeric(options.offset)) {
- offsets = [options.offset, 0];
- } else {
- // split the offset in case we are providing a pair of offsets separated
- // by a blank space
- offsets = options.offset.split(' ');
-
- // itherate through each offset to compute them in case they are percentages
- offsets = offsets.map(function (offset, index) {
- // separate value from unit
- var split = offset.match(/(\d*\.?\d*)(.*)/);
- var value = +split[1];
- var unit = split[2];
-
- // use height if placement is left or right and index is 0
- // otherwise use height
- // in this way the first offset will use an axis and the second one
- // will use the other one
- var useHeight = placement.indexOf('right') !== -1 || placement.indexOf('left') !== -1;
-
- if (index === 1) {
- useHeight = !useHeight;
- }
-
- // if is a percentage, we calculate the value of it using as base the
- // sizes of the reference element
- if (unit === '%' || unit === '%r') {
- var referenceRect = getPopperClientRect(data.offsets.reference);
- var len = void 0;
- if (useHeight) {
- len = referenceRect.height;
- } else {
- len = referenceRect.width;
- }
- return len / 100 * value;
- }
- // if is a percentage relative to the popper, we calculate the value of it using
- // as base the sizes of the popper
- else if (unit === '%p') {
- var popperRect = getPopperClientRect(data.offsets.popper);
- var _len = void 0;
- if (useHeight) {
- _len = popperRect.height;
- } else {
- _len = popperRect.width;
- }
- return _len / 100 * value;
- }
- // if is a vh or vw, we calculate the size based on the viewport
- else if (unit === 'vh' || unit === 'vw') {
- var size = void 0;
- if (unit === 'vh') {
- size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
- } else {
- size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
- }
- return size / 100 * value;
- }
- // if is an explicit pixel unit, we get rid of the unit and keep the value
- else if (unit === 'px') {
- return +value;
- }
- // if is an implicit unit, it's px, and we return just the value
- else {
- return +offset;
- }
- });
- }
+ var popperOffsets = getClientRect(data.offsets.popper);
+ var refOffsets = data.offsets.reference;
- if (data.placement.indexOf('left') !== -1) {
- popper.top += offsets[0];
- popper.left -= offsets[1] || 0;
- } else if (data.placement.indexOf('right') !== -1) {
- popper.top += offsets[0];
- popper.left += offsets[1] || 0;
- } else if (data.placement.indexOf('top') !== -1) {
- popper.left += offsets[0];
- popper.top -= offsets[1] || 0;
- } else if (data.placement.indexOf('bottom') !== -1) {
- popper.left += offsets[0];
- popper.top += offsets[1] || 0;
- }
- return data;
- }
+ // using floor because the reference offsets may contain decimals we are not going to consider here
+ var floor = Math.floor;
+ var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
- /**
- * Modifier used to make sure the popper does not overflows from it's boundaries
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by `update` method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function preventOverflow(data, options) {
- function shouldMoveWithTarget(direction) {
- if (!options.moveWithTarget) {
- return false;
- }
- var placement = data.originalPlacement.split('-')[0];
-
- if (data.flipped && placement === direction || placement === getOppositePlacement(direction)) {
- return true;
- }
- if (placement !== direction && placement !== getOppositePlacement(direction)) {
- return true;
- }
-
- return false;
- }
- var order = options.priority;
- var popper = getPopperClientRect(data.offsets.popper);
-
- var check = {
- left: function left() {
- var left = popper.left;
- if (popper.left < data.boundaries.left && !shouldMoveWithTarget('left')) {
- left = Math.max(popper.left, data.boundaries.left);
- }
- return { left: left };
- },
- right: function right() {
- var left = popper.left;
- if (popper.right > data.boundaries.right && !shouldMoveWithTarget('right')) {
- left = Math.min(popper.left, data.boundaries.right - popper.width);
- }
- return { left: left };
- },
- top: function top() {
- var top = popper.top;
- if (popper.top < data.boundaries.top && !shouldMoveWithTarget('top')) {
- top = Math.max(popper.top, data.boundaries.top);
- }
- return { top: top };
- },
- bottom: function bottom() {
- var top = popper.top;
- if (popper.bottom > data.boundaries.bottom && !shouldMoveWithTarget('bottom')) {
- top = Math.min(popper.top, data.boundaries.bottom - popper.height);
- }
- return { top: top };
- }
- };
-
- order.forEach(function (direction) {
- data.offsets.popper = Object.assign(popper, check[direction]());
- });
-
- return data;
- }
+ var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
+ var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
+ var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
+ var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
- /**
- * Modifier used to shift the popper on the start or end of its reference element side
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by `update` method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function shift(data) {
- var placement = data.placement;
- var basePlacement = placement.split('-')[0];
- var shiftvariation = placement.split('-')[1];
-
- // if shift shiftvariation is specified, run the modifier
- if (shiftvariation) {
- var reference = data.offsets.reference;
- var popper = getPopperClientRect(data.offsets.popper);
-
- var shiftOffsets = {
- y: {
- start: { top: reference.top },
- end: { top: reference.top + reference.height - popper.height }
- },
- x: {
- start: { left: reference.left },
- end: { left: reference.left + reference.width - popper.width }
- }
- };
-
- var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y';
-
- data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftvariation]);
- }
+ var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
- return data;
- }
+ // flip the variation if required
+ var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
+ var flippedVariation = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
- /**
- * Modifier used to hide the popper when its reference element is outside of the
- * popper boundaries. It will set an x-hidden attribute which can be used to hide
- * the popper when its reference is out of boundaries.
- * @method
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
- function hide(data) {
- var refRect = data.offsets.reference;
- var bound = data.boundaries;
-
- if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
- data.hide = true;
- data.instance.popper.setAttribute('x-out-of-boundaries', '');
- } else {
- data.hide = false;
- data.instance.popper.removeAttribute('x-out-of-boundaries');
- }
+ if (overlapsRef || overflowsBoundaries || flippedVariation) {
+ // this boolean to detect any flip loop
+ data.flipped = true;
- return data;
- }
+ if (overlapsRef || overflowsBoundaries) {
+ placement = flipOrder[index + 1];
+ }
- /**
- * Modifiers are plugins used to alter the behavior of your poppers.
- * Popper.js uses a set of 7 modifiers to provide all the basic functionalities
- * needed by the library.
- *
- * Each modifier is an object containing several properties listed below.
- * @namespace Modifiers
- * @param {Object} modifier - Modifier descriptor
- * @param {Integer} modifier.order
- * The `order` property defines the execution order of the modifiers.
- * The built-in modifiers have orders with a gap of 100 units in between,
- * this allows you to inject additional modifiers between the existing ones
- * without having to redefine the order of all of them.
- * The modifiers are executed starting from the one with the lowest order.
- * @param {Boolean} modifier.enabled - When `true`, the modifier will be used.
- * @param {Modifiers~modifier} modifier.function - Modifier function.
- * @param {Modifiers~onLoad} modifier.onLoad - Function executed on popper initalization
- * @return {Object} data - Each modifier must return the modified `data` object.
- */
-
- var modifiersFunctions = {
- applyStyle: applyStyle,
- arrow: arrow,
- flip: flip,
- keepTogether: keepTogether,
- offset: offset,
- preventOverflow: preventOverflow,
- shift: shift,
- hide: hide
- };
+ if (flippedVariation) {
+ variation = getOppositeVariation(variation);
+ }
- var modifiersOnLoad = {
- applyStyleOnLoad: applyStyleOnLoad
- };
+ data.placement = placement + (variation ? '-' + variation : '');
+ data.offsets.popper = getPopperOffsets(data.instance.state.position, data.instance.popper, data.offsets.reference, data.placement);
- /**
- * Modifiers can edit the `data` object to change the beheavior of the popper.
- * This object contains all the informations used by Popper.js to compute the
- * popper position.
- * The modifier can edit the data as needed, and then `return` it as result.
- *
- * @callback Modifiers~modifier
- * @param {dataObject} data
- * @return {dataObject} modified data
- */
-
- /**
- * The `dataObject` is an object containing all the informations used by Popper.js
- * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
- * @name dataObject
- * @property {Object} data.instance The Popper.js instance
- * @property {String} data.placement Placement applied to popper
- * @property {String} data.originalPlacement Placement originally defined on init
- * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
- * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
- * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
- * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.boundaries Offsets of the popper boundaries
- * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
- * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
- * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
- * @property {Object} data.offsets.arro] `top` and `left` offsets, only one of them will be different from 0
- */
-
- var classCallCheck = function (instance, Constructor) {
- if (!(instance instanceof Constructor)) {
- throw new TypeError("Cannot call a class as a function");
+ data = runModifiers(data.instance.modifiers, data, 'flip');
+ }
+ });
+ return data;
+}
+
+/**
+ * Modifier used to make sure the popper is always near its reference element
+ * It cares only about the first axis, you can still have poppers with margin
+ * between the popper and its reference element.
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function keepTogether(data) {
+ var popper = getClientRect(data.offsets.popper);
+ var reference = data.offsets.reference;
+ var placement = data.placement.split('-')[0];
+ var floor = Math.floor;
+ var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
+ var side = isVertical ? 'right' : 'bottom';
+ var opSide = isVertical ? 'left' : 'top';
+ var measurement = isVertical ? 'width' : 'height';
+
+ if (popper[side] < floor(reference[opSide])) {
+ data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
+ }
+ if (popper[opSide] > floor(reference[side])) {
+ data.offsets.popper[opSide] = floor(reference[side]);
}
- };
- var createClass = function () {
- function defineProperties(target, props) {
- for (var i = 0; i < props.length; i++) {
- var descriptor = props[i];
- descriptor.enumerable = descriptor.enumerable || false;
- descriptor.configurable = true;
- if ("value" in descriptor) descriptor.writable = true;
- Object.defineProperty(target, descriptor.key, descriptor);
- }
+ return data;
+}
+
+/**
+ * Modifier used to add an offset to the popper, useful if you more granularity positioning your popper.
+ * The offsets will shift the popper on the side of its reference element.
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @argument {Number|String} options.offset=0
+ * Basic usage allows a number used to nudge the popper by the given amount of pixels.
+ * You can pass a percentage value as string (eg. `20%`) to nudge by the given percentage (relative to reference element size)
+ * Other supported units are `vh` and `vw` (relative to viewport)
+ * Additionally, you can pass a pair of values (eg. `10 20` or `2vh 20%`) to nudge the popper
+ * on both axis.
+ * A note about percentage values, if you want to refer a percentage to the popper size instead of the reference element size,
+ * use `%p` instead of `%` (eg: `20%p`). To make it clearer, you can replace `%` with `%r` and use eg.`10%p 25%r`.
+ * > **Heads up!** The order of the axis is relative to the popper placement: `bottom` or `top` are `X,Y`, the other are `Y,X`
+ * @returns {Object} The data object, properly modified
+ */
+function offset(data, options) {
+ var placement = data.placement;
+ var popper = data.offsets.popper;
+
+ var offsets = void 0;
+ if (isNumeric(options.offset)) {
+ offsets = [options.offset, 0];
+ } else {
+ // split the offset in case we are providing a pair of offsets separated
+ // by a blank space
+ offsets = options.offset.split(' ');
+
+ // itherate through each offset to compute them in case they are percentages
+ offsets = offsets.map(function (offset, index) {
+ // separate value from unit
+ var split = offset.match(/(\d*\.?\d*)(.*)/);
+ var value = +split[1];
+ var unit = split[2];
+
+ // use height if placement is left or right and index is 0 otherwise use width
+ // in this way the first offset will use an axis and the second one
+ // will use the other one
+ var useHeight = placement.indexOf('right') !== -1 || placement.indexOf('left') !== -1;
+
+ if (index === 1) {
+ useHeight = !useHeight;
+ }
+
+ var measurement = useHeight ? 'height' : 'width';
+
+ // if is a percentage relative to the popper (%p), we calculate the value of it using
+ // as base the sizes of the popper
+ // if is a percentage (% or %r), we calculate the value of it using as base the
+ // sizes of the reference element
+ if (unit.indexOf('%') === 0) {
+ var element = void 0;
+ switch (unit) {
+ case '%p':
+ element = data.offsets.popper;
+ break;
+ case '%':
+ case '$r':
+ default:
+ element = data.offsets.reference;
+ }
+
+ var rect = getClientRect(element);
+ var len = rect[measurement];
+ return len / 100 * value;
+ }
+ // if is a vh or vw, we calculate the size based on the viewport
+ else if (unit === 'vh' || unit === 'vw') {
+ var size = void 0;
+ if (unit === 'vh') {
+ size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+ } else {
+ size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+ }
+ return size / 100 * value;
+ }
+ // if is an explicit pixel unit, we get rid of the unit and keep the value
+ else if (unit === 'px') {
+ return +value;
+ }
+ // if is an implicit unit, it's px, and we return just the value
+ else {
+ return +offset;
+ }
+ });
}
- return function (Constructor, protoProps, staticProps) {
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
- if (staticProps) defineProperties(Constructor, staticProps);
- return Constructor;
+ if (data.placement.indexOf('left') !== -1) {
+ popper.top += offsets[0];
+ popper.left -= offsets[1] || 0;
+ } else if (data.placement.indexOf('right') !== -1) {
+ popper.top += offsets[0];
+ popper.left += offsets[1] || 0;
+ } else if (data.placement.indexOf('top') !== -1) {
+ popper.left += offsets[0];
+ popper.top -= offsets[1] || 0;
+ } else if (data.placement.indexOf('bottom') !== -1) {
+ popper.left += offsets[0];
+ popper.top += offsets[1] || 0;
+ }
+ return data;
+}
+
+/**
+ * Modifier used to prevent the popper from being positioned outside the boundary.
+ *
+ * An scenario exists where the reference itself is not within the boundaries. We can
+ * say it has "escaped the boundaries" — or just "escaped". In this case we need to
+ * decide whether the popper should either:
+ *
+ * - detach from the reference and remain "trapped" in the boundaries, or
+ * - if it should be ignore the boundary and "escape with the reference"
+ *
+ * When `escapeWithReference` is `true`, and reference is completely outside the
+ * boundaries, the popper will overflow (or completely leave) the boundaries in order
+ * to remain attached to the edge of the reference.
+ *
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by `update` method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function preventOverflow(data, options) {
+ var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
+ var boundaries = getBoundaries(data.instance.popper, options.padding, boundariesElement);
+ options.boundaries = boundaries;
+
+ var order = options.priority;
+ var popper = getClientRect(data.offsets.popper);
+
+ var check = {
+ primary: function primary(placement) {
+ var value = popper[placement];
+ if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
+ value = Math.max(popper[placement], boundaries[placement]);
+ }
+ return defineProperty({}, placement, value);
+ },
+ secondary: function secondary(placement) {
+ var mainSide = placement === 'right' ? 'left' : 'top';
+ var value = popper[mainSide];
+ if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
+ value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
+ }
+ return defineProperty({}, mainSide, value);
+ }
};
- }();
-
- // default options
- var DEFAULTS = {
- // placement of the popper
- placement: 'bottom',
-
- // if true, it uses the CSS 3d transformation to position the popper
- gpuAcceleration: true,
-
- // the element which will act as boundary of the popper
- boundariesElement: 'viewport',
-
- // amount of pixel used to define a minimum distance between the boundaries and the popper
- boundariesPadding: 5,
-
- // list of functions used to modify the offsets before they are applied to the popper
- modifiers: {
- shift: {
- order: 100,
- enabled: true,
- function: modifiersFunctions.shift
- },
- offset: {
- order: 200,
- enabled: true,
- function: modifiersFunctions.offset,
- // nudges popper from its origin by the given amount of pixels (can be negative)
- offset: 0
- },
- preventOverflow: {
- order: 300,
- enabled: true,
- function: modifiersFunctions.preventOverflow,
- // popper will try to prevent overflow following these priorities
- // by default, then, it could overflow on the left and on top of the boundariesElement
- priority: ['left', 'right', 'top', 'bottom']
- },
- keepTogether: {
- order: 400,
- enabled: true,
- function: modifiersFunctions.keepTogether
- },
- arrow: {
- order: 500,
- enabled: true,
- function: modifiersFunctions.arrow,
- // selector or node used as arrow
- element: '[x-arrow]'
- },
- flip: {
- order: 600,
- enabled: true,
- function: modifiersFunctions.flip,
- // the behavior used to change the popper's placement
- behavior: 'flip'
- },
- hide: {
- order: 700,
- enabled: true,
- function: modifiersFunctions.hide
- },
- applyStyle: {
- order: 800,
- enabled: true,
- function: modifiersFunctions.applyStyle,
- onLoad: modifiersOnLoad.applyStyleOnLoad
- }
- }
- };
- /**
- * Create a new Popper.js instance
- * @class Popper
- * @param {HTMLElement} reference - The reference element used to position the popper
- * @param {HTMLElement} popper - The HTML element used as popper.
- * @param {Object} options
- * @param {String} options.placement=bottom
- * Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right),
- * left(-start, -end)`
- *
- * @param {Boolean} options.gpuAcceleration=true
- * When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the
- * browser to use the GPU to accelerate the rendering.
- * If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.
- *
- * @param {String|Element} options.boundariesElement='viewport'
- * The element which will define the boundaries of the popper position, the popper will never be placed outside
- * of the defined boundaries (except if `keepTogether` is enabled)
- *
- * @param {Number} options.boundariesPadding=5
- * Additional padding for the boundaries
- *
- * @param {Boolean} options.removeOnDestroy=false
- * Set to true if you want to automatically remove the popper when you call the `destroy` method.
- *
- * @param {Object} options.modifiers
- * List of functions used to modify the data before they are applied to the popper (see source code for default values)
- *
- * @param {Object} options.modifiers.arrow - Arrow modifier configuration
- * @param {HTMLElement|String} options.modifiers.arrow.element='[x-arrow]'
- * The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of
- * its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its
- * reference element.
- * By default, it will look for a child node of the popper with the `x-arrow` attribute.
- *
- * @param {Object} options.modifiers.offset - Offset modifier configuration
- * @param {Number} options.modifiers.offset.offset=0
- * Amount of pixels the popper will be shifted (can be negative).
- *
- * @param {Object} options.modifiers.preventOverflow - PreventOverflow modifier configuration
- * @param {Array} [options.modifiers.preventOverflow.priority=['left', 'right', 'top', 'bottom']]
- * Priority used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order,
- * this means that the last one will never overflow
- *
- * @param {Object} options.modifiers.flip - Flip modifier configuration
- * @param {String|Array} options.modifiers.flip.behavior='flip'
- * The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to
- * overlap its reference element. Defining `flip` as value, the placement will be flipped on
- * its axis (`right - left`, `top - bottom`).
- * You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify
- * how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left,
- * then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top)
- *
- * @return {Object} instance - The generated Popper.js instance
- */
-
- var Popper = function () {
- function Popper(reference, popper) {
- var _this = this;
-
- var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
- classCallCheck(this, Popper);
- this.Defaults = DEFAULTS;
-
- // init state
- this.state = {
- isDestroyed: false
- };
-
- // get reference and popper elements (allow jQuery wrappers)
- this.reference = reference.jquery ? reference[0] : reference;
- this.popper = popper.jquery ? popper[0] : popper;
-
- // with {} we create a new object with the options inside it
- this.options = Object.assign({}, DEFAULTS, options);
-
- // refactoring modifiers' list (Object => Array)
- this.modifiers = Object.keys(DEFAULTS.modifiers).map(function (name) {
- return Object.assign({ name: name }, DEFAULTS.modifiers[name]);
- });
-
- // assign default values to modifiers, making sure to override them with
- // the ones defined by user
- this.modifiers = this.modifiers.map(function (defaultConfig) {
- var userConfig = options.modifiers && options.modifiers[defaultConfig.name] || {};
- var finalConfig = Object.assign({}, defaultConfig, userConfig);
- return finalConfig;
- });
-
- // add custom modifiers to the modifiers list
- if (options.modifiers) {
- Object.keys(options.modifiers).forEach(function (name) {
- // take in account only custom modifiers
- if (DEFAULTS.modifiers[name] === undefined) {
- var modifier = options.modifiers[name];
- modifier.name = name;
- _this.modifiers.push(modifier);
- }
- });
- }
-
- // sort the modifiers by order
- this.modifiers = this.modifiers.sort(sortModifiers);
-
- // modifiers have the ability to execute arbitrary code when Popper.js get inited
- // such code is executed in the same order of its modifier
- this.modifiers.forEach(function (modifier) {
- if (modifier.enabled && isFunction(modifier.onLoad)) {
- modifier.onLoad(_this.reference, _this.popper, _this.options);
- }
- });
-
- // get the popper position type
- this.state.position = getPosition(this.popper, this.reference);
-
- // determine how we should set the origin of offsets
- this.state.isParentTransformed = isTransformed(this.popper.parentNode);
-
- // fire the first update to position the popper in the right place
- this.update(true);
-
- // setup event listeners, they will take care of update the position in specific situations
- setupEventListeners(this.reference, this.options, this.state, function () {
- return _this.update();
- });
-
- // make it chainable
- return this;
- }
+ order.forEach(function (placement) {
+ var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
+ popper = _extends({}, popper, check[side](placement));
+ });
+
+ data.offsets.popper = popper;
+
+ return data;
+}
+
+/**
+ * Modifier used to shift the popper on the start or end of its reference element side
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by `update` method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function shift(data) {
+ var placement = data.placement;
+ var basePlacement = placement.split('-')[0];
+ var shiftvariation = placement.split('-')[1];
+
+ // if shift shiftvariation is specified, run the modifier
+ if (shiftvariation) {
+ var reference = data.offsets.reference;
+ var popper = getClientRect(data.offsets.popper);
+ var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
+ var side = isVertical ? 'left' : 'top';
+ var measurement = isVertical ? 'width' : 'height';
+
+ var shiftOffsets = {
+ start: defineProperty({}, side, reference[side]),
+ end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
+ };
+
+ data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
+ }
+
+ return data;
+}
+
+/**
+ * Modifier used to hide the popper when its reference element is outside of the
+ * popper boundaries. It will set an x-hidden attribute which can be used to hide
+ * the popper when its reference is out of boundaries.
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function hide(data) {
+ if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
+ console.warn('WARNING: preventOverflow modifier is required by hide modifier in order to work, be sure to include it before hide!');
+ return data;
+ }
+
+ var refRect = data.offsets.reference;
+ var bound = find(data.instance.modifiers, function (modifier) {
+ return modifier.name === 'preventOverflow';
+ }).boundaries;
+
+ if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
+ // Avoid unnecessary DOM access if visibility hasn't changed
+ if (data.hide === true) {
+ return data;
+ }
+
+ data.hide = true;
+ data.attributes['x-out-of-boundaries'] = '';
+ } else {
+ // Avoid unnecessary DOM access if visibility hasn't changed
+ if (data.hide === false) {
+ return data;
+ }
+
+ data.hide = false;
+ data.attributes['x-out-of-boundaries'] = false;
+ }
+
+ return data;
+}
+
+/**
+ * Modifier used to make the popper flow toward the inner of the reference element.
+ * By default, when this modifier is disabled, the popper will be placed outside
+ * the reference element.
+ * @method
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by `update` method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+function inner(data) {
+ var placement = data.placement;
+ var basePlacement = placement.split('-')[0];
+ var popper = getClientRect(data.offsets.popper);
+ var reference = getClientRect(data.offsets.reference);
+ var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
+
+ var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
+
+ popper[isHoriz ? 'left' : 'top'] = reference[placement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
+
+ data.placement = getOppositePlacement(placement);
+ data.offsets.popper = getClientRect(popper);
+
+ return data;
+}
+
+/**
+ * Modifiers are plugins used to alter the behavior of your poppers.
+ * Popper.js uses a set of 7 modifiers to provide all the basic functionalities
+ * needed by the library.
+ *
+ * Each modifier is an object containing several properties listed below.
+ * @namespace Modifiers
+ * @param {Object} modifier - Modifier descriptor
+ * @param {Integer} modifier.order
+ * The `order` property defines the execution order of the modifiers.
+ * The built-in modifiers have orders with a gap of 100 units in between,
+ * this allows you to inject additional modifiers between the existing ones
+ * without having to redefine the order of all of them.
+ * The modifiers are executed starting from the one with the lowest order.
+ * @param {Boolean} modifier.enabled - When `true`, the modifier will be used.
+ * @param {Modifiers~modifier} modifier.function - Modifier function.
+ * @param {Modifiers~onLoad} modifier.onLoad - Function executed on popper initalization
+ * @return {Object} data - Each modifier must return the modified `data` object.
+ */
+var modifiers = {
+ shift: {
+ order: 100,
+ enabled: true,
+ function: shift
+ },
+ offset: {
+ order: 200,
+ enabled: true,
+ function: offset,
+ // nudges popper from its origin by the given amount of pixels (can be negative)
+ offset: 0
+ },
+ preventOverflow: {
+ order: 300,
+ enabled: true,
+ function: preventOverflow,
+ // popper will try to prevent overflow following these priorities
+ // by default, then, it could overflow on the left and on top of the boundariesElement
+ priority: ['left', 'right', 'top', 'bottom'],
+ // amount of pixel used to define a minimum distance between the boundaries and the popper
+ // this makes sure the popper has always a little padding between the edges of its container
+ padding: 5,
+ boundariesElement: 'scrollParent'
+ },
+ keepTogether: {
+ order: 400,
+ enabled: true,
+ function: keepTogether
+ },
+ arrow: {
+ order: 500,
+ enabled: true,
+ function: arrow,
+ // selector or node used as arrow
+ element: '[x-arrow]'
+ },
+ flip: {
+ order: 600,
+ enabled: true,
+ function: flip,
+ // the behavior used to change the popper's placement
+ behavior: 'flip',
+ // the popper will flip if it hits the edges of the boundariesElement - padding
+ padding: 5,
+ boundariesElement: 'viewport'
+ },
+ inner: {
+ order: 700,
+ enabled: false,
+ function: inner
+ },
+ hide: {
+ order: 800,
+ enabled: true,
+ function: hide
+ },
+ applyStyle: {
+ order: 900,
+ enabled: true,
+ // if true, it uses the CSS 3d transformation to position the popper
+ gpuAcceleration: true,
+ function: applyStyle,
+ onLoad: applyStyleOnLoad
+ }
+};
+
+/**
+ * Modifiers can edit the `data` object to change the beheavior of the popper.
+ * This object contains all the informations used by Popper.js to compute the
+ * popper position.
+ * The modifier can edit the data as needed, and then `return` it as result.
+ *
+ * @callback Modifiers~modifier
+ * @param {dataObject} data
+ * @return {dataObject} modified data
+ */
+
+/**
+ * The `dataObject` is an object containing all the informations used by Popper.js
+ * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
+ * @name dataObject
+ * @property {Object} data.instance The Popper.js instance
+ * @property {String} data.placement Placement applied to popper
+ * @property {String} data.originalPlacement Placement originally defined on init
+ * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
+ * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
+ * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
+ * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.boundaries Offsets of the popper boundaries
+ * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
+ * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
+ * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
+ * @property {Object} data.offsets.arro] `top` and `left` offsets, only one of them will be different from 0
+ */
+
+// Utils
+// Modifiers
+// default options
+var DEFAULTS = {
+ // placement of the popper
+ placement: 'bottom',
+
+ // whether events (resize, scroll) are initially enabled
+ eventsEnabled: true,
+
+ /**
+ * Callback called when the popper is created.
+ * By default, is set to no-op.
+ * Access Popper.js instance with `data.instance`.
+ * @callback createCallback
+ * @static
+ * @param {dataObject} data
+ */
+ onCreate: function onCreate() {},
+
+ /**
+ * Callback called when the popper is updated, this callback is not called
+ * on the initialization/creation of the popper, but only on subsequent
+ * updates.
+ * By default, is set to no-op.
+ * Access Popper.js instance with `data.instance`.
+ * @callback updateCallback
+ * @static
+ * @param {dataObject} data
+ */
+ onUpdate: function onUpdate() {},
+
+ // list of functions used to modify the offsets before they are applied to the popper
+ modifiers: modifiers
+};
+
+/**
+ * Create a new Popper.js instance
+ * @class Popper
+ * @param {HTMLElement} reference - The reference element used to position the popper
+ * @param {HTMLElement} popper - The HTML element used as popper.
+ * @param {Object} options
+ * @param {String} options.placement=bottom
+ * Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end),
+ * left(-start, -end)`
+ *
+ * @param {Boolean} options.eventsEnabled=true
+ * Whether events (resize, scroll) are initially enabled
+ * @param {Boolean} options.gpuAcceleration=true
+ * When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the
+ * browser to use the GPU to accelerate the rendering.
+ * If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.
+ *
+ * @param {Boolean} options.removeOnDestroy=false
+ * Set to true if you want to automatically remove the popper when you call the `destroy` method.
+ *
+ * @param {Object} options.modifiers
+ * List of functions used to modify the data before they are applied to the popper (see source code for default values)
+ *
+ * @param {Object} options.modifiers.arrow - Arrow modifier configuration
+ * @param {String|HTMLElement} options.modifiers.arrow.element='[x-arrow]'
+ * The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of
+ * its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its
+ * reference element.
+ * By default, it will look for a child node of the popper with the `x-arrow` attribute.
+ *
+ * @param {Object} options.modifiers.offset - Offset modifier configuration
+ * @param {Number} options.modifiers.offset.offset=0
+ * Amount of pixels the popper will be shifted (can be negative).
+ *
+ * @param {Object} options.modifiers.preventOverflow - PreventOverflow modifier configuration
+ * @param {Array} [options.modifiers.preventOverflow.priority=['left', 'right', 'top', 'bottom']]
+ * Priority used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order,
+ * this means that the last one will never overflow
+ * @param {String|HTMLElement} options.modifiers.preventOverflow.boundariesElement='scrollParent'
+ * Boundaries used by the modifier, can be `scrollParent`, `window`, `viewport` or any DOM element.
+ * @param {Number} options.modifiers.preventOverflow.padding=5
+ * Amount of pixel used to define a minimum distance between the boundaries and the popper
+ * this makes sure the popper has always a little padding between the edges of its container.
+ *
+ * @param {Object} options.modifiers.flip - Flip modifier configuration
+ * @param {String|Array} options.modifiers.flip.behavior='flip'
+ * The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to
+ * overlap its reference element. Defining `flip` as value, the placement will be flipped on
+ * its axis (`right - left`, `top - bottom`).
+ * You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify
+ * how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left,
+ * then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top)
+ * @param {String|HTMLElement} options.modifiers.flip.boundariesElement='viewport'
+ * The element which will define the boundaries of the popper position, the popper will never be placed outside
+ * of the defined boundaries (except if `keepTogether` is enabled)
+ *
+ * @param {Object} options.modifiers.inner - Inner modifier configuration
+ * @param {Number} options.modifiers.inner.enabled=false
+ * Set to `true` to make the popper flow toward the inner of the reference element.
+ *
+ * @param {Number} options.modifiers.flip.padding=5
+ * Amount of pixel used to define a minimum distance between the boundaries and the popper
+ * this makes sure the popper has always a little padding between the edges of its container.
+ *
+ * @param {createCallback} options.onCreate - onCreate callback
+ * Function called after the Popper has been instantiated.
+ *
+ * @param {updateCallback} options.onUpdate - onUpdate callback
+ * Function called on subsequent updates of Popper.
+ *
+ * @return {Object} instance - The generated Popper.js instance
+ */
+
+var Popper = function () {
+ function Popper(reference, popper) {
+ var _this = this;
+
+ var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+ classCallCheck(this, Popper);
+
+ this.scheduleUpdate = function () {
+ return requestAnimationFrame(_this.update);
+ };
+
+ // make update() debounced, so that it only runs at most once-per-tick
+ this.update = debounce(this.update.bind(this));
+
+ // with {} we create a new object with the options inside it
+ this.options = _extends({}, Popper.Defaults, options);
+
+ // init state
+ this.state = {
+ isDestroyed: false,
+ isCreated: false,
+ scrollParents: []
+ };
+
+ // get reference and popper elements (allow jQuery wrappers)
+ this.reference = reference.jquery ? reference[0] : reference;
+ this.popper = popper.jquery ? popper[0] : popper;
+
+ // refactoring modifiers' list (Object => Array)
+ this.modifiers = Object.keys(Popper.Defaults.modifiers).map(function (name) {
+ return _extends({ name: name }, Popper.Defaults.modifiers[name]);
+ });
+
+ // assign default values to modifiers, making sure to override them with
+ // the ones defined by user
+ this.modifiers = this.modifiers.map(function (defaultConfig) {
+ var userConfig = options.modifiers && options.modifiers[defaultConfig.name] || {};
+ return _extends({}, defaultConfig, userConfig);
+ });
+
+ // add custom modifiers to the modifiers list
+ if (options.modifiers) {
+ this.options.modifiers = _extends({}, Popper.Defaults.modifiers, options.modifiers);
+ Object.keys(options.modifiers).forEach(function (name) {
+ // take in account only custom modifiers
+ if (Popper.Defaults.modifiers[name] === undefined) {
+ var modifier = options.modifiers[name];
+ modifier.name = name;
+ _this.modifiers.push(modifier);
+ }
+ });
+ }
+
+ // get the popper position type
+ this.state.position = getPosition(this.reference);
+
+ // sort the modifiers by order
+ this.modifiers = this.modifiers.sort(function (a, b) {
+ return a.order - b.order;
+ });
+
+ // modifiers have the ability to execute arbitrary code when Popper.js get inited
+ // such code is executed in the same order of its modifier
+ // they could add new properties to their options configuration
+ // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
+ this.modifiers.forEach(function (modifierOptions) {
+ if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
+ modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
+ }
+ });
+
+ // determine how we should set the origin of offsets
+ this.state.isParentTransformed = isTransformed(this.popper.parentNode);
+
+ // fire the first update to position the popper in the right place
+ this.update();
+
+ var eventsEnabled = this.options.eventsEnabled;
+ if (eventsEnabled) {
+ // setup event listeners, they will take care of update the position in specific situations
+ this.enableEventListeners();
+ }
+
+ this.state.eventsEnabled = eventsEnabled;
+ }
- //
- // Methods
- //
-
- /**
- * Updates the position of the popper, computing the new offsets and applying the new style
- * @method
- * @param {Boolean} isFirstCall
- * When true, the onCreate callback is called, otherwise it calls the onUpdate callback
- * @memberof Popper
- */
-
-
- createClass(Popper, [{
- key: 'update',
- value: function update(isFirstCall) {
- var _this2 = this;
-
- var data = { instance: this, styles: {} };
-
- // make sure to apply the popper position before any computation
- this.state.position = getPosition(this.popper, this.reference);
- setStyle(this.popper, { position: this.state.position });
-
- // to avoid useless computations we throttle the popper position refresh to 60fps
- window.requestAnimationFrame(function () {
- // if popper is destroyed, don't perform any further update
- if (_this2.state.isDestroyed) {
- return;
- }
-
- var now = window.performance.now();
- if (now - _this2.state.lastFrame <= 16) {
- // this update fired to early! drop it
- // but schedule a new one that will be ran at the end of the updates
- // chain to make sure everything is proper updated
- return _this2.update();
- }
- _this2.state.lastFrame = now;
-
- // store placement inside the data object, modifiers will be able to edit `placement` if needed
- // and refer to originalPlacement to know the original value
- data.placement = _this2.options.placement;
- data.originalPlacement = _this2.options.placement;
-
- // compute the popper and reference offsets and put them inside data.offsets
- data.offsets = getOffsets(_this2.state, _this2.popper, _this2.reference, data.placement);
-
- // get boundaries
- data.boundaries = getBoundaries(_this2.popper, data, _this2.options.boundariesPadding, _this2.options.boundariesElement);
-
- // run the modifiers
- data = runModifiers(_this2.modifiers, _this2.options, data);
-
- // the first `update` will call `onCreate` callback
- // the other ones will call `onUpdate` callback
- if (isFirstCall && isFunction(_this2.state.createCalback)) {
- _this2.state.createCalback(data);
- } else if (!isFirstCall && isFunction(_this2.state.updateCallback)) {
- _this2.state.updateCallback(data);
- }
- });
- }
-
- /**
- * If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance.
- * @method
- * @memberof Popper
- * @param {createCallback} callback
- */
-
- }, {
- key: 'onCreate',
- value: function onCreate(callback) {
- // the createCallbacks return as first argument the popper instance
- this.state.createCalback = callback;
- return this;
- }
-
- /**
- * Callback called when the popper is created.
- * Access Popper.js instance with `data.instance`.
- * @callback createCallback
- * @static
- * @param {dataObject} data
- */
-
- /**
- * If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations
- * used to style popper and its arrow.
- * NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor!
- * @method
- * @memberof Popper
- * @param {updateCallback} callback
- */
-
- }, {
- key: 'onUpdate',
- value: function onUpdate(callback) {
- this.state.updateCallback = callback;
- return this;
- }
-
- /**
- * Callback called when the popper is updated, this callback is not called
- * on the initialization/creation of the popper, but only on subsequent
- * updates.
- * Access Popper.js instance with `data.instance`.
- * @callback updateCallback
- * @static
- * @param {dataObject} data
- */
-
- /**
- * Destroy the popper
- * @method
- * @memberof Popper
- */
-
- }, {
- key: 'destroy',
- value: function destroy() {
- this.state.isDestroyed = true;
- this.popper.removeAttribute('x-placement');
- this.popper.style.left = '';
- this.popper.style.position = '';
- this.popper.style.top = '';
- this.popper.style[getSupportedPropertyName('transform')] = '';
- this.state = removeEventListeners(this.reference, this.state, this.options);
-
- // remove the popper if user explicity asked for the deletion on destroy
- // do not use `remove` because IE11 doesn't support it
- if (this.options.removeOnDestroy) {
- this.popper.parentNode.removeChild(this.popper);
- }
- return this;
- }
-
- /**
- * Collection of utilities useful when writing custom modifiers
- * @memberof Popper
- */
-
-
- /**
- * Default Popper.js options
- * @memberof Popper
- */
-
- }]);
- return Popper;
- }();
-
- Popper.Utils = Utils;
-
- return Popper;
-
-}));
\ No newline at end of file
+ //
+ // Methods
+ //
+
+ /**
+ * Updates the position of the popper, computing the new offsets and applying the new style
+ * Prefer `scheduleUpdate` over `update` because of performance reasons
+ * @method
+ * @memberof Popper
+ */
+
+
+ createClass(Popper, [{
+ key: 'update',
+ value: function update() {
+ // if popper is destroyed, don't perform any further update
+ if (this.state.isDestroyed) {
+ return;
+ }
+
+ var data = {
+ instance: this,
+ styles: {},
+ attributes: {},
+ flipped: false,
+ offsets: {}
+ };
+
+ // make sure to apply the popper position before any computation
+ this.state.position = getPosition(this.reference);
+ setStyles(this.popper, { position: this.state.position });
+
+ // compute reference element offsets
+ data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference);
+
+ // compute auto placement, store placement inside the data object,
+ // modifiers will be able to edit `placement` if needed
+ // and refer to originalPlacement to know the original value
+ data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper);
+
+ // store the computed placement inside `originalPlacement`
+ data.originalPlacement = this.options.placement;
+
+ // compute the popper offsets
+ data.offsets.popper = getPopperOffsets(this.state, this.popper, data.offsets.reference, data.placement);
+
+ // run the modifiers
+ data = runModifiers(this.modifiers, data);
+
+ // the first `update` will call `onCreate` callback
+ // the other ones will call `onUpdate` callback
+ if (!this.state.isCreated) {
+ this.state.isCreated = true;
+ this.options.onCreate(data);
+ } else {
+ this.options.onUpdate(data);
+ }
+ }
+
+ /**
+ * Schedule an update, it will run on the next UI update available
+ * @method scheduleUpdate
+ * @memberof Popper
+ */
+
+ }, {
+ key: 'destroy',
+
+
+ /**
+ * Destroy the popper
+ * @method
+ * @memberof Popper
+ */
+ value: function destroy() {
+ this.state.isDestroyed = true;
+
+ // touch DOM only if `applyStyle` modifier is enabled
+ if (isModifierEnabled(this.modifiers, 'applyStyle')) {
+ this.popper.removeAttribute('x-placement');
+ this.popper.style.left = '';
+ this.popper.style.position = '';
+ this.popper.style.top = '';
+ this.popper.style[getSupportedPropertyName('transform')] = '';
+ }
+
+ this.disableEventListeners();
+
+ // remove the popper if user explicity asked for the deletion on destroy
+ // do not use `remove` because IE11 doesn't support it
+ if (this.options.removeOnDestroy) {
+ this.popper.parentNode.removeChild(this.popper);
+ }
+ return this;
+ }
+
+ /**
+ * it will add resize/scroll events and start recalculating
+ * position of the popper element when they are triggered
+ * @method
+ * @memberof Popper
+ */
+
+ }, {
+ key: 'enableEventListeners',
+ value: function enableEventListeners() {
+ if (!this.state.eventsEnabled) {
+ this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
+ }
+ }
+
+ /**
+ * it will remove resize/scroll events and won't recalculate
+ * popper position when they are triggered. It also won't trigger onUpdate callback anymore,
+ * unless you call 'update' method manually.
+ * @method
+ * @memberof Popper
+ */
+
+ }, {
+ key: 'disableEventListeners',
+ value: function disableEventListeners() {
+ if (this.state.eventsEnabled) {
+ window.cancelAnimationFrame(this.scheduleUpdate);
+ this.state = removeEventListeners(this.reference, this.state);
+ }
+ }
+
+ /**
+ * Collection of utilities useful when writing custom modifiers
+ * @memberof Popper
+ */
+
+
+ /**
+ * List of accepted placements to use as values of the `placement` option
+ * @memberof Popper
+ */
+
+
+ /**
+ * Default Popper.js options
+ * @memberof Popper
+ */
+
+ }]);
+ return Popper;
+}();
+
+Popper.Utils = Utils;
+Popper.placements = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
+Popper.Defaults = DEFAULTS;
+
+return Popper;
+
+})));
+//# sourceMappingURL=popper.es5.js.map
