LaravelTest
2462 строки · 82.9 Кб
1/**!
2* @fileOverview Kickass library to create and place poppers near their reference elements.
3* @version 1.16.1
4* @license
5* Copyright (c) 2016 Federico Zivolo and contributors
6*
7* Permission is hereby granted, free of charge, to any person obtaining a copy
8* of this software and associated documentation files (the "Software"), to deal
9* in the Software without restriction, including without limitation the rights
10* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11* copies of the Software, and to permit persons to whom the Software is
12* furnished to do so, subject to the following conditions:
13*
14* The above copyright notice and this permission notice shall be included in all
15* copies or substantial portions of the Software.
16*
17* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23* SOFTWARE.
24*/
25var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';26
27const timeoutDuration = function () {28const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];29for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {30if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {31return 1;32}33}34return 0;35}();36
37function microtaskDebounce(fn) {38let called = false;39return () => {40if (called) {41return;42}43called = true;44window.Promise.resolve().then(() => {45called = false;46fn();47});48};49}
50
51function taskDebounce(fn) {52let scheduled = false;53return () => {54if (!scheduled) {55scheduled = true;56setTimeout(() => {57scheduled = false;58fn();59}, timeoutDuration);60}61};62}
63
64const supportsMicroTasks = isBrowser && window.Promise;65
66/**
67* Create a debounced version of a method, that's asynchronously deferred
68* but called in the minimum time possible.
69*
70* @method
71* @memberof Popper.Utils
72* @argument {Function} fn
73* @returns {Function}
74*/
75var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;76
77/**
78* Check if the given variable is a function
79* @method
80* @memberof Popper.Utils
81* @argument {Any} functionToCheck - variable to check
82* @returns {Boolean} answer to: is a function?
83*/
84function isFunction(functionToCheck) {85const getType = {};86return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';87}
88
89/**
90* Get CSS computed property of the given element
91* @method
92* @memberof Popper.Utils
93* @argument {Eement} element
94* @argument {String} property
95*/
96function getStyleComputedProperty(element, property) {97if (element.nodeType !== 1) {98return [];99}100// NOTE: 1 DOM access here101const window = element.ownerDocument.defaultView;102const css = window.getComputedStyle(element, null);103return property ? css[property] : css;104}
105
106/**
107* Returns the parentNode or the host of the element
108* @method
109* @memberof Popper.Utils
110* @argument {Element} element
111* @returns {Element} parent
112*/
113function getParentNode(element) {114if (element.nodeName === 'HTML') {115return element;116}117return element.parentNode || element.host;118}
119
120/**
121* Returns the scrolling parent of the given element
122* @method
123* @memberof Popper.Utils
124* @argument {Element} element
125* @returns {Element} scroll parent
126*/
127function getScrollParent(element) {128// Return body, `getScroll` will take care to get the correct `scrollTop` from it129if (!element) {130return document.body;131}132
133switch (element.nodeName) {134case 'HTML':135case 'BODY':136return element.ownerDocument.body;137case '#document':138return element.body;139}140
141// Firefox want us to check `-x` and `-y` variations as well142const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);143if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {144return element;145}146
147return getScrollParent(getParentNode(element));148}
149
150/**
151* Returns the reference node of the reference object, or the reference object itself.
152* @method
153* @memberof Popper.Utils
154* @param {Element|Object} reference - the reference element (the popper will be relative to this)
155* @returns {Element} parent
156*/
157function getReferenceNode(reference) {158return reference && reference.referenceNode ? reference.referenceNode : reference;159}
160
161const isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);162const isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);163
164/**
165* Determines if the browser is Internet Explorer
166* @method
167* @memberof Popper.Utils
168* @param {Number} version to check
169* @returns {Boolean} isIE
170*/
171function isIE(version) {172if (version === 11) {173return isIE11;174}175if (version === 10) {176return isIE10;177}178return isIE11 || isIE10;179}
180
181/**
182* Returns the offset parent of the given element
183* @method
184* @memberof Popper.Utils
185* @argument {Element} element
186* @returns {Element} offset parent
187*/
188function getOffsetParent(element) {189if (!element) {190return document.documentElement;191}192
193const noOffsetParent = isIE(10) ? document.body : null;194
195// NOTE: 1 DOM access here196let offsetParent = element.offsetParent || null;197// Skip hidden elements which don't have an offsetParent198while (offsetParent === noOffsetParent && element.nextElementSibling) {199offsetParent = (element = element.nextElementSibling).offsetParent;200}201
202const nodeName = offsetParent && offsetParent.nodeName;203
204if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {205return element ? element.ownerDocument.documentElement : document.documentElement;206}207
208// .offsetParent will return the closest TH, TD or TABLE in case209// no offsetParent is present, I hate this job...210if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {211return getOffsetParent(offsetParent);212}213
214return offsetParent;215}
216
217function isOffsetContainer(element) {218const { nodeName } = element;219if (nodeName === 'BODY') {220return false;221}222return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;223}
224
225/**
226* Finds the root node (document, shadowDOM root) of the given element
227* @method
228* @memberof Popper.Utils
229* @argument {Element} node
230* @returns {Element} root node
231*/
232function getRoot(node) {233if (node.parentNode !== null) {234return getRoot(node.parentNode);235}236
237return node;238}
239
240/**
241* Finds the offset parent common to the two provided nodes
242* @method
243* @memberof Popper.Utils
244* @argument {Element} element1
245* @argument {Element} element2
246* @returns {Element} common offset parent
247*/
248function findCommonOffsetParent(element1, element2) {249// This check is needed to avoid errors in case one of the elements isn't defined for any reason250if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {251return document.documentElement;252}253
254// Here we make sure to give as "start" the element that comes first in the DOM255const order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;256const start = order ? element1 : element2;257const end = order ? element2 : element1;258
259// Get common ancestor container260const range = document.createRange();261range.setStart(start, 0);262range.setEnd(end, 0);263const { commonAncestorContainer } = range;264
265// Both nodes are inside #document266if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {267if (isOffsetContainer(commonAncestorContainer)) {268return commonAncestorContainer;269}270
271return getOffsetParent(commonAncestorContainer);272}273
274// one of the nodes is inside shadowDOM, find which one275const element1root = getRoot(element1);276if (element1root.host) {277return findCommonOffsetParent(element1root.host, element2);278} else {279return findCommonOffsetParent(element1, getRoot(element2).host);280}281}
282
283/**
284* Gets the scroll value of the given element in the given side (top and left)
285* @method
286* @memberof Popper.Utils
287* @argument {Element} element
288* @argument {String} side `top` or `left`
289* @returns {number} amount of scrolled pixels
290*/
291function getScroll(element, side = 'top') {292const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';293const nodeName = element.nodeName;294
295if (nodeName === 'BODY' || nodeName === 'HTML') {296const html = element.ownerDocument.documentElement;297const scrollingElement = element.ownerDocument.scrollingElement || html;298return scrollingElement[upperSide];299}300
301return element[upperSide];302}
303
304/*
305* Sum or subtract the element scroll values (left and top) from a given rect object
306* @method
307* @memberof Popper.Utils
308* @param {Object} rect - Rect object you want to change
309* @param {HTMLElement} element - The element from the function reads the scroll values
310* @param {Boolean} subtract - set to true if you want to subtract the scroll values
311* @return {Object} rect - The modifier rect object
312*/
313function includeScroll(rect, element, subtract = false) {314const scrollTop = getScroll(element, 'top');315const scrollLeft = getScroll(element, 'left');316const modifier = subtract ? -1 : 1;317rect.top += scrollTop * modifier;318rect.bottom += scrollTop * modifier;319rect.left += scrollLeft * modifier;320rect.right += scrollLeft * modifier;321return rect;322}
323
324/*
325* Helper to detect borders of a given element
326* @method
327* @memberof Popper.Utils
328* @param {CSSStyleDeclaration} styles
329* Result of `getStyleComputedProperty` on the given element
330* @param {String} axis - `x` or `y`
331* @return {number} borders - The borders size of the given axis
332*/
333
334function getBordersSize(styles, axis) {335const sideA = axis === 'x' ? 'Left' : 'Top';336const sideB = sideA === 'Left' ? 'Right' : 'Bottom';337
338return parseFloat(styles[`border${sideA}Width`]) + parseFloat(styles[`border${sideB}Width`]);339}
340
341function getSize(axis, body, html, computedStyle) {342return Math.max(body[`offset${axis}`], body[`scroll${axis}`], html[`client${axis}`], html[`offset${axis}`], html[`scroll${axis}`], isIE(10) ? parseInt(html[`offset${axis}`]) + parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`]) + parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]) : 0);343}
344
345function getWindowSizes(document) {346const body = document.body;347const html = document.documentElement;348const computedStyle = isIE(10) && getComputedStyle(html);349
350return {351height: getSize('Height', body, html, computedStyle),352width: getSize('Width', body, html, computedStyle)353};354}
355
356var _extends = Object.assign || function (target) {357for (var i = 1; i < arguments.length; i++) {358var source = arguments[i];359
360for (var key in source) {361if (Object.prototype.hasOwnProperty.call(source, key)) {362target[key] = source[key];363}364}365}366
367return target;368};369
370/**
371* Given element offsets, generate an output similar to getBoundingClientRect
372* @method
373* @memberof Popper.Utils
374* @argument {Object} offsets
375* @returns {Object} ClientRect like output
376*/
377function getClientRect(offsets) {378return _extends({}, offsets, {379right: offsets.left + offsets.width,380bottom: offsets.top + offsets.height381});382}
383
384/**
385* Get bounding client rect of given element
386* @method
387* @memberof Popper.Utils
388* @param {HTMLElement} element
389* @return {Object} client rect
390*/
391function getBoundingClientRect(element) {392let rect = {};393
394// IE10 10 FIX: Please, don't ask, the element isn't395// considered in DOM in some circumstances...396// This isn't reproducible in IE10 compatibility mode of IE11397try {398if (isIE(10)) {399rect = element.getBoundingClientRect();400const scrollTop = getScroll(element, 'top');401const scrollLeft = getScroll(element, 'left');402rect.top += scrollTop;403rect.left += scrollLeft;404rect.bottom += scrollTop;405rect.right += scrollLeft;406} else {407rect = element.getBoundingClientRect();408}409} catch (e) {}410
411const result = {412left: rect.left,413top: rect.top,414width: rect.right - rect.left,415height: rect.bottom - rect.top416};417
418// subtract scrollbar size from sizes419const sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};420const width = sizes.width || element.clientWidth || result.width;421const height = sizes.height || element.clientHeight || result.height;422
423let horizScrollbar = element.offsetWidth - width;424let vertScrollbar = element.offsetHeight - height;425
426// if an hypothetical scrollbar is detected, we must be sure it's not a `border`427// we make this check conditional for performance reasons428if (horizScrollbar || vertScrollbar) {429const styles = getStyleComputedProperty(element);430horizScrollbar -= getBordersSize(styles, 'x');431vertScrollbar -= getBordersSize(styles, 'y');432
433result.width -= horizScrollbar;434result.height -= vertScrollbar;435}436
437return getClientRect(result);438}
439
440function getOffsetRectRelativeToArbitraryNode(children, parent, fixedPosition = false) {441const isIE10 = isIE(10);442const isHTML = parent.nodeName === 'HTML';443const childrenRect = getBoundingClientRect(children);444const parentRect = getBoundingClientRect(parent);445const scrollParent = getScrollParent(children);446
447const styles = getStyleComputedProperty(parent);448const borderTopWidth = parseFloat(styles.borderTopWidth);449const borderLeftWidth = parseFloat(styles.borderLeftWidth);450
451// In cases where the parent is fixed, we must ignore negative scroll in offset calc452if (fixedPosition && isHTML) {453parentRect.top = Math.max(parentRect.top, 0);454parentRect.left = Math.max(parentRect.left, 0);455}456let offsets = getClientRect({457top: childrenRect.top - parentRect.top - borderTopWidth,458left: childrenRect.left - parentRect.left - borderLeftWidth,459width: childrenRect.width,460height: childrenRect.height461});462offsets.marginTop = 0;463offsets.marginLeft = 0;464
465// Subtract margins of documentElement in case it's being used as parent466// we do this only on HTML because it's the only element that behaves467// differently when margins are applied to it. The margins are included in468// the box of the documentElement, in the other cases not.469if (!isIE10 && isHTML) {470const marginTop = parseFloat(styles.marginTop);471const marginLeft = parseFloat(styles.marginLeft);472
473offsets.top -= borderTopWidth - marginTop;474offsets.bottom -= borderTopWidth - marginTop;475offsets.left -= borderLeftWidth - marginLeft;476offsets.right -= borderLeftWidth - marginLeft;477
478// Attach marginTop and marginLeft because in some circumstances we may need them479offsets.marginTop = marginTop;480offsets.marginLeft = marginLeft;481}482
483if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {484offsets = includeScroll(offsets, parent);485}486
487return offsets;488}
489
490function getViewportOffsetRectRelativeToArtbitraryNode(element, excludeScroll = false) {491const html = element.ownerDocument.documentElement;492const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);493const width = Math.max(html.clientWidth, window.innerWidth || 0);494const height = Math.max(html.clientHeight, window.innerHeight || 0);495
496const scrollTop = !excludeScroll ? getScroll(html) : 0;497const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;498
499const offset = {500top: scrollTop - relativeOffset.top + relativeOffset.marginTop,501left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,502width,503height
504};505
506return getClientRect(offset);507}
508
509/**
510* Check if the given element is fixed or is inside a fixed parent
511* @method
512* @memberof Popper.Utils
513* @argument {Element} element
514* @argument {Element} customContainer
515* @returns {Boolean} answer to "isFixed?"
516*/
517function isFixed(element) {518const nodeName = element.nodeName;519if (nodeName === 'BODY' || nodeName === 'HTML') {520return false;521}522if (getStyleComputedProperty(element, 'position') === 'fixed') {523return true;524}525const parentNode = getParentNode(element);526if (!parentNode) {527return false;528}529return isFixed(parentNode);530}
531
532/**
533* Finds the first parent of an element that has a transformed property defined
534* @method
535* @memberof Popper.Utils
536* @argument {Element} element
537* @returns {Element} first transformed parent or documentElement
538*/
539
540function getFixedPositionOffsetParent(element) {541// This check is needed to avoid errors in case one of the elements isn't defined for any reason542if (!element || !element.parentElement || isIE()) {543return document.documentElement;544}545let el = element.parentElement;546while (el && getStyleComputedProperty(el, 'transform') === 'none') {547el = el.parentElement;548}549return el || document.documentElement;550}
551
552/**
553* Computed the boundaries limits and return them
554* @method
555* @memberof Popper.Utils
556* @param {HTMLElement} popper
557* @param {HTMLElement} reference
558* @param {number} padding
559* @param {HTMLElement} boundariesElement - Element used to define the boundaries
560* @param {Boolean} fixedPosition - Is in fixed position mode
561* @returns {Object} Coordinates of the boundaries
562*/
563function getBoundaries(popper, reference, padding, boundariesElement, fixedPosition = false) {564// NOTE: 1 DOM access here565
566let boundaries = { top: 0, left: 0 };567const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));568
569// Handle viewport case570if (boundariesElement === 'viewport') {571boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);572} else {573// Handle other cases based on DOM element used as boundaries574let boundariesNode;575if (boundariesElement === 'scrollParent') {576boundariesNode = getScrollParent(getParentNode(reference));577if (boundariesNode.nodeName === 'BODY') {578boundariesNode = popper.ownerDocument.documentElement;579}580} else if (boundariesElement === 'window') {581boundariesNode = popper.ownerDocument.documentElement;582} else {583boundariesNode = boundariesElement;584}585
586const offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);587
588// In case of HTML, we need a different computation589if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {590const { height, width } = getWindowSizes(popper.ownerDocument);591boundaries.top += offsets.top - offsets.marginTop;592boundaries.bottom = height + offsets.top;593boundaries.left += offsets.left - offsets.marginLeft;594boundaries.right = width + offsets.left;595} else {596// for all the other DOM elements, this one is good597boundaries = offsets;598}599}600
601// Add paddings602padding = padding || 0;603const isPaddingNumber = typeof padding === 'number';604boundaries.left += isPaddingNumber ? padding : padding.left || 0;605boundaries.top += isPaddingNumber ? padding : padding.top || 0;606boundaries.right -= isPaddingNumber ? padding : padding.right || 0;607boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;608
609return boundaries;610}
611
612function getArea({ width, height }) {613return width * height;614}
615
616/**
617* Utility used to transform the `auto` placement to the placement with more
618* available space.
619* @method
620* @memberof Popper.Utils
621* @argument {Object} data - The data object generated by update method
622* @argument {Object} options - Modifiers configuration and options
623* @returns {Object} The data object, properly modified
624*/
625function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement, padding = 0) {626if (placement.indexOf('auto') === -1) {627return placement;628}629
630const boundaries = getBoundaries(popper, reference, padding, boundariesElement);631
632const rects = {633top: {634width: boundaries.width,635height: refRect.top - boundaries.top636},637right: {638width: boundaries.right - refRect.right,639height: boundaries.height640},641bottom: {642width: boundaries.width,643height: boundaries.bottom - refRect.bottom644},645left: {646width: refRect.left - boundaries.left,647height: boundaries.height648}649};650
651const sortedAreas = Object.keys(rects).map(key => _extends({652key
653}, rects[key], {654area: getArea(rects[key])655})).sort((a, b) => b.area - a.area);656
657const filteredAreas = sortedAreas.filter(({ width, height }) => width >= popper.clientWidth && height >= popper.clientHeight);658
659const computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;660
661const variation = placement.split('-')[1];662
663return computedPlacement + (variation ? `-${variation}` : '');664}
665
666/**
667* Get offsets to the reference element
668* @method
669* @memberof Popper.Utils
670* @param {Object} state
671* @param {Element} popper - the popper element
672* @param {Element} reference - the reference element (the popper will be relative to this)
673* @param {Element} fixedPosition - is in fixed position mode
674* @returns {Object} An object containing the offsets which will be applied to the popper
675*/
676function getReferenceOffsets(state, popper, reference, fixedPosition = null) {677const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));678return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);679}
680
681/**
682* Get the outer sizes of the given element (offset size + margins)
683* @method
684* @memberof Popper.Utils
685* @argument {Element} element
686* @returns {Object} object containing width and height properties
687*/
688function getOuterSizes(element) {689const window = element.ownerDocument.defaultView;690const styles = window.getComputedStyle(element);691const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);692const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);693const result = {694width: element.offsetWidth + y,695height: element.offsetHeight + x696};697return result;698}
699
700/**
701* Get the opposite placement of the given one
702* @method
703* @memberof Popper.Utils
704* @argument {String} placement
705* @returns {String} flipped placement
706*/
707function getOppositePlacement(placement) {708const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };709return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);710}
711
712/**
713* Get offsets to the popper
714* @method
715* @memberof Popper.Utils
716* @param {Object} position - CSS position the Popper will get applied
717* @param {HTMLElement} popper - the popper element
718* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
719* @param {String} placement - one of the valid placement options
720* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
721*/
722function getPopperOffsets(popper, referenceOffsets, placement) {723placement = placement.split('-')[0];724
725// Get popper node sizes726const popperRect = getOuterSizes(popper);727
728// Add position, width and height to our offsets object729const popperOffsets = {730width: popperRect.width,731height: popperRect.height732};733
734// depending by the popper placement we have to compute its offsets slightly differently735const isHoriz = ['right', 'left'].indexOf(placement) !== -1;736const mainSide = isHoriz ? 'top' : 'left';737const secondarySide = isHoriz ? 'left' : 'top';738const measurement = isHoriz ? 'height' : 'width';739const secondaryMeasurement = !isHoriz ? 'height' : 'width';740
741popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;742if (placement === secondarySide) {743popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];744} else {745popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];746}747
748return popperOffsets;749}
750
751/**
752* Mimics the `find` method of Array
753* @method
754* @memberof Popper.Utils
755* @argument {Array} arr
756* @argument prop
757* @argument value
758* @returns index or -1
759*/
760function find(arr, check) {761// use native find if supported762if (Array.prototype.find) {763return arr.find(check);764}765
766// use `filter` to obtain the same behavior of `find`767return arr.filter(check)[0];768}
769
770/**
771* Return the index of the matching object
772* @method
773* @memberof Popper.Utils
774* @argument {Array} arr
775* @argument prop
776* @argument value
777* @returns index or -1
778*/
779function findIndex(arr, prop, value) {780// use native findIndex if supported781if (Array.prototype.findIndex) {782return arr.findIndex(cur => cur[prop] === value);783}784
785// use `find` + `indexOf` if `findIndex` isn't supported786const match = find(arr, obj => obj[prop] === value);787return arr.indexOf(match);788}
789
790/**
791* Loop trough the list of modifiers and run them in order,
792* each of them will then edit the data object.
793* @method
794* @memberof Popper.Utils
795* @param {dataObject} data
796* @param {Array} modifiers
797* @param {String} ends - Optional modifier name used as stopper
798* @returns {dataObject}
799*/
800function runModifiers(modifiers, data, ends) {801const modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));802
803modifiersToRun.forEach(modifier => {804if (modifier['function']) {805// eslint-disable-line dot-notation806console.warn('`modifier.function` is deprecated, use `modifier.fn`!');807}808const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation809if (modifier.enabled && isFunction(fn)) {810// Add properties to offsets to make them a complete clientRect object811// we do this before each modifier to make sure the previous one doesn't812// mess with these values813data.offsets.popper = getClientRect(data.offsets.popper);814data.offsets.reference = getClientRect(data.offsets.reference);815
816data = fn(data, modifier);817}818});819
820return data;821}
822
823/**
824* Updates the position of the popper, computing the new offsets and applying
825* the new style.<br />
826* Prefer `scheduleUpdate` over `update` because of performance reasons.
827* @method
828* @memberof Popper
829*/
830function update() {831// if popper is destroyed, don't perform any further update832if (this.state.isDestroyed) {833return;834}835
836let data = {837instance: this,838styles: {},839arrowStyles: {},840attributes: {},841flipped: false,842offsets: {}843};844
845// compute reference element offsets846data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);847
848// compute auto placement, store placement inside the data object,849// modifiers will be able to edit `placement` if needed850// and refer to originalPlacement to know the original value851data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);852
853// store the computed placement inside `originalPlacement`854data.originalPlacement = data.placement;855
856data.positionFixed = this.options.positionFixed;857
858// compute the popper offsets859data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);860
861data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';862
863// run the modifiers864data = runModifiers(this.modifiers, data);865
866// the first `update` will call `onCreate` callback867// the other ones will call `onUpdate` callback868if (!this.state.isCreated) {869this.state.isCreated = true;870this.options.onCreate(data);871} else {872this.options.onUpdate(data);873}874}
875
876/**
877* Helper used to know if the given modifier is enabled.
878* @method
879* @memberof Popper.Utils
880* @returns {Boolean}
881*/
882function isModifierEnabled(modifiers, modifierName) {883return modifiers.some(({ name, enabled }) => enabled && name === modifierName);884}
885
886/**
887* Get the prefixed supported property name
888* @method
889* @memberof Popper.Utils
890* @argument {String} property (camelCase)
891* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
892*/
893function getSupportedPropertyName(property) {894const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];895const upperProp = property.charAt(0).toUpperCase() + property.slice(1);896
897for (let i = 0; i < prefixes.length; i++) {898const prefix = prefixes[i];899const toCheck = prefix ? `${prefix}${upperProp}` : property;900if (typeof document.body.style[toCheck] !== 'undefined') {901return toCheck;902}903}904return null;905}
906
907/**
908* Destroys the popper.
909* @method
910* @memberof Popper
911*/
912function destroy() {913this.state.isDestroyed = true;914
915// touch DOM only if `applyStyle` modifier is enabled916if (isModifierEnabled(this.modifiers, 'applyStyle')) {917this.popper.removeAttribute('x-placement');918this.popper.style.position = '';919this.popper.style.top = '';920this.popper.style.left = '';921this.popper.style.right = '';922this.popper.style.bottom = '';923this.popper.style.willChange = '';924this.popper.style[getSupportedPropertyName('transform')] = '';925}926
927this.disableEventListeners();928
929// remove the popper if user explicitly asked for the deletion on destroy930// do not use `remove` because IE11 doesn't support it931if (this.options.removeOnDestroy) {932this.popper.parentNode.removeChild(this.popper);933}934return this;935}
936
937/**
938* Get the window associated with the element
939* @argument {Element} element
940* @returns {Window}
941*/
942function getWindow(element) {943const ownerDocument = element.ownerDocument;944return ownerDocument ? ownerDocument.defaultView : window;945}
946
947function attachToScrollParents(scrollParent, event, callback, scrollParents) {948const isBody = scrollParent.nodeName === 'BODY';949const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;950target.addEventListener(event, callback, { passive: true });951
952if (!isBody) {953attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);954}955scrollParents.push(target);956}
957
958/**
959* Setup needed event listeners used to update the popper position
960* @method
961* @memberof Popper.Utils
962* @private
963*/
964function setupEventListeners(reference, options, state, updateBound) {965// Resize event listener on window966state.updateBound = updateBound;967getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });968
969// Scroll event listener on scroll parents970const scrollElement = getScrollParent(reference);971attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);972state.scrollElement = scrollElement;973state.eventsEnabled = true;974
975return state;976}
977
978/**
979* It will add resize/scroll events and start recalculating
980* position of the popper element when they are triggered.
981* @method
982* @memberof Popper
983*/
984function enableEventListeners() {985if (!this.state.eventsEnabled) {986this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);987}988}
989
990/**
991* Remove event listeners used to update the popper position
992* @method
993* @memberof Popper.Utils
994* @private
995*/
996function removeEventListeners(reference, state) {997// Remove resize event listener on window998getWindow(reference).removeEventListener('resize', state.updateBound);999
1000// Remove scroll event listener on scroll parents1001state.scrollParents.forEach(target => {1002target.removeEventListener('scroll', state.updateBound);1003});1004
1005// Reset state1006state.updateBound = null;1007state.scrollParents = [];1008state.scrollElement = null;1009state.eventsEnabled = false;1010return state;1011}
1012
1013/**
1014* It will remove resize/scroll events and won't recalculate popper position
1015* when they are triggered. It also won't trigger `onUpdate` callback anymore,
1016* unless you call `update` method manually.
1017* @method
1018* @memberof Popper
1019*/
1020function disableEventListeners() {1021if (this.state.eventsEnabled) {1022cancelAnimationFrame(this.scheduleUpdate);1023this.state = removeEventListeners(this.reference, this.state);1024}1025}
1026
1027/**
1028* Tells if a given input is a number
1029* @method
1030* @memberof Popper.Utils
1031* @param {*} input to check
1032* @return {Boolean}
1033*/
1034function isNumeric(n) {1035return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);1036}
1037
1038/**
1039* Set the style to the given popper
1040* @method
1041* @memberof Popper.Utils
1042* @argument {Element} element - Element to apply the style to
1043* @argument {Object} styles
1044* Object with a list of properties and values which will be applied to the element
1045*/
1046function setStyles(element, styles) {1047Object.keys(styles).forEach(prop => {1048let unit = '';1049// add unit if the value is numeric and is one of the following1050if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {1051unit = 'px';1052}1053element.style[prop] = styles[prop] + unit;1054});1055}
1056
1057/**
1058* Set the attributes to the given popper
1059* @method
1060* @memberof Popper.Utils
1061* @argument {Element} element - Element to apply the attributes to
1062* @argument {Object} styles
1063* Object with a list of properties and values which will be applied to the element
1064*/
1065function setAttributes(element, attributes) {1066Object.keys(attributes).forEach(function (prop) {1067const value = attributes[prop];1068if (value !== false) {1069element.setAttribute(prop, attributes[prop]);1070} else {1071element.removeAttribute(prop);1072}1073});1074}
1075
1076/**
1077* @function
1078* @memberof Modifiers
1079* @argument {Object} data - The data object generated by `update` method
1080* @argument {Object} data.styles - List of style properties - values to apply to popper element
1081* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
1082* @argument {Object} options - Modifiers configuration and options
1083* @returns {Object} The same data object
1084*/
1085function applyStyle(data) {1086// any property present in `data.styles` will be applied to the popper,1087// in this way we can make the 3rd party modifiers add custom styles to it1088// Be aware, modifiers could override the properties defined in the previous1089// lines of this modifier!1090setStyles(data.instance.popper, data.styles);1091
1092// any property present in `data.attributes` will be applied to the popper,1093// they will be set as HTML attributes of the element1094setAttributes(data.instance.popper, data.attributes);1095
1096// if arrowElement is defined and arrowStyles has some properties1097if (data.arrowElement && Object.keys(data.arrowStyles).length) {1098setStyles(data.arrowElement, data.arrowStyles);1099}1100
1101return data;1102}
1103
1104/**
1105* Set the x-placement attribute before everything else because it could be used
1106* to add margins to the popper margins needs to be calculated to get the
1107* correct popper offsets.
1108* @method
1109* @memberof Popper.modifiers
1110* @param {HTMLElement} reference - The reference element used to position the popper
1111* @param {HTMLElement} popper - The HTML element used as popper
1112* @param {Object} options - Popper.js options
1113*/
1114function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {1115// compute reference element offsets1116const referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);1117
1118// compute auto placement, store placement inside the data object,1119// modifiers will be able to edit `placement` if needed1120// and refer to originalPlacement to know the original value1121const placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);1122
1123popper.setAttribute('x-placement', placement);1124
1125// Apply `position` to popper before anything else because1126// without the position applied we can't guarantee correct computations1127setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });1128
1129return options;1130}
1131
1132/**
1133* @function
1134* @memberof Popper.Utils
1135* @argument {Object} data - The data object generated by `update` method
1136* @argument {Boolean} shouldRound - If the offsets should be rounded at all
1137* @returns {Object} The popper's position offsets rounded
1138*
1139* The tale of pixel-perfect positioning. It's still not 100% perfect, but as
1140* good as it can be within reason.
1141* Discussion here: https://github.com/FezVrasta/popper.js/pull/715
1142*
1143* Low DPI screens cause a popper to be blurry if not using full pixels (Safari
1144* as well on High DPI screens).
1145*
1146* Firefox prefers no rounding for positioning and does not have blurriness on
1147* high DPI screens.
1148*
1149* Only horizontal placement and left/right values need to be considered.
1150*/
1151function getRoundedOffsets(data, shouldRound) {1152const { popper, reference } = data.offsets;1153const { round, floor } = Math;1154const noRound = v => v;1155
1156const referenceWidth = round(reference.width);1157const popperWidth = round(popper.width);1158
1159const isVertical = ['left', 'right'].indexOf(data.placement) !== -1;1160const isVariation = data.placement.indexOf('-') !== -1;1161const sameWidthParity = referenceWidth % 2 === popperWidth % 2;1162const bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;1163
1164const horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;1165const verticalToInteger = !shouldRound ? noRound : round;1166
1167return {1168left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),1169top: verticalToInteger(popper.top),1170bottom: verticalToInteger(popper.bottom),1171right: horizontalToInteger(popper.right)1172};1173}
1174
1175const isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);1176
1177/**
1178* @function
1179* @memberof Modifiers
1180* @argument {Object} data - The data object generated by `update` method
1181* @argument {Object} options - Modifiers configuration and options
1182* @returns {Object} The data object, properly modified
1183*/
1184function computeStyle(data, options) {1185const { x, y } = options;1186const { popper } = data.offsets;1187
1188// Remove this legacy support in Popper.js v21189const legacyGpuAccelerationOption = find(data.instance.modifiers, modifier => modifier.name === 'applyStyle').gpuAcceleration;1190if (legacyGpuAccelerationOption !== undefined) {1191console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');1192}1193const gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;1194
1195const offsetParent = getOffsetParent(data.instance.popper);1196const offsetParentRect = getBoundingClientRect(offsetParent);1197
1198// Styles1199const styles = {1200position: popper.position1201};1202
1203const offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);1204
1205const sideA = x === 'bottom' ? 'top' : 'bottom';1206const sideB = y === 'right' ? 'left' : 'right';1207
1208// if gpuAcceleration is set to `true` and transform is supported,1209// we use `translate3d` to apply the position to the popper we1210// automatically use the supported prefixed version if needed1211const prefixedProperty = getSupportedPropertyName('transform');1212
1213// now, let's make a step back and look at this code closely (wtf?)1214// If the content of the popper grows once it's been positioned, it1215// may happen that the popper gets misplaced because of the new content1216// overflowing its reference element1217// To avoid this problem, we provide two options (x and y), which allow1218// the consumer to define the offset origin.1219// If we position a popper on top of a reference element, we can set1220// `x` to `top` to make the popper grow towards its top instead of1221// its bottom.1222let left, top;1223if (sideA === 'bottom') {1224// when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)1225// and not the bottom of the html element1226if (offsetParent.nodeName === 'HTML') {1227top = -offsetParent.clientHeight + offsets.bottom;1228} else {1229top = -offsetParentRect.height + offsets.bottom;1230}1231} else {1232top = offsets.top;1233}1234if (sideB === 'right') {1235if (offsetParent.nodeName === 'HTML') {1236left = -offsetParent.clientWidth + offsets.right;1237} else {1238left = -offsetParentRect.width + offsets.right;1239}1240} else {1241left = offsets.left;1242}1243if (gpuAcceleration && prefixedProperty) {1244styles[prefixedProperty] = `translate3d(${left}px, ${top}px, 0)`;1245styles[sideA] = 0;1246styles[sideB] = 0;1247styles.willChange = 'transform';1248} else {1249// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties1250const invertTop = sideA === 'bottom' ? -1 : 1;1251const invertLeft = sideB === 'right' ? -1 : 1;1252styles[sideA] = top * invertTop;1253styles[sideB] = left * invertLeft;1254styles.willChange = `${sideA}, ${sideB}`;1255}1256
1257// Attributes1258const attributes = {1259'x-placement': data.placement1260};1261
1262// Update `data` attributes, styles and arrowStyles1263data.attributes = _extends({}, attributes, data.attributes);1264data.styles = _extends({}, styles, data.styles);1265data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);1266
1267return data;1268}
1269
1270/**
1271* Helper used to know if the given modifier depends from another one.<br />
1272* It checks if the needed modifier is listed and enabled.
1273* @method
1274* @memberof Popper.Utils
1275* @param {Array} modifiers - list of modifiers
1276* @param {String} requestingName - name of requesting modifier
1277* @param {String} requestedName - name of requested modifier
1278* @returns {Boolean}
1279*/
1280function isModifierRequired(modifiers, requestingName, requestedName) {1281const requesting = find(modifiers, ({ name }) => name === requestingName);1282
1283const isRequired = !!requesting && modifiers.some(modifier => {1284return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;1285});1286
1287if (!isRequired) {1288const requesting = `\`${requestingName}\``;1289const requested = `\`${requestedName}\``;1290console.warn(`${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`);1291}1292return isRequired;1293}
1294
1295/**
1296* @function
1297* @memberof Modifiers
1298* @argument {Object} data - The data object generated by update method
1299* @argument {Object} options - Modifiers configuration and options
1300* @returns {Object} The data object, properly modified
1301*/
1302function arrow(data, options) {1303// arrow depends on keepTogether in order to work1304if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {1305return data;1306}1307
1308let arrowElement = options.element;1309
1310// if arrowElement is a string, suppose it's a CSS selector1311if (typeof arrowElement === 'string') {1312arrowElement = data.instance.popper.querySelector(arrowElement);1313
1314// if arrowElement is not found, don't run the modifier1315if (!arrowElement) {1316return data;1317}1318} else {1319// if the arrowElement isn't a query selector we must check that the1320// provided DOM node is child of its popper node1321if (!data.instance.popper.contains(arrowElement)) {1322console.warn('WARNING: `arrow.element` must be child of its popper element!');1323return data;1324}1325}1326
1327const placement = data.placement.split('-')[0];1328const { popper, reference } = data.offsets;1329const isVertical = ['left', 'right'].indexOf(placement) !== -1;1330
1331const len = isVertical ? 'height' : 'width';1332const sideCapitalized = isVertical ? 'Top' : 'Left';1333const side = sideCapitalized.toLowerCase();1334const altSide = isVertical ? 'left' : 'top';1335const opSide = isVertical ? 'bottom' : 'right';1336const arrowElementSize = getOuterSizes(arrowElement)[len];1337
1338//1339// extends keepTogether behavior making sure the popper and its1340// reference have enough pixels in conjunction1341//1342
1343// top/left side1344if (reference[opSide] - arrowElementSize < popper[side]) {1345data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);1346}1347// bottom/right side1348if (reference[side] + arrowElementSize > popper[opSide]) {1349data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];1350}1351data.offsets.popper = getClientRect(data.offsets.popper);1352
1353// compute center of the popper1354const center = reference[side] + reference[len] / 2 - arrowElementSize / 2;1355
1356// Compute the sideValue using the updated popper offsets1357// take popper margin in account because we don't have this info available1358const css = getStyleComputedProperty(data.instance.popper);1359const popperMarginSide = parseFloat(css[`margin${sideCapitalized}`]);1360const popperBorderSide = parseFloat(css[`border${sideCapitalized}Width`]);1361let sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;1362
1363// prevent arrowElement from being placed not contiguously to its popper1364sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);1365
1366data.arrowElement = arrowElement;1367data.offsets.arrow = {1368[side]: Math.round(sideValue),1369[altSide]: '' // make sure to unset any eventual altSide value from the DOM node1370};1371
1372return data;1373}
1374
1375/**
1376* Get the opposite placement variation of the given one
1377* @method
1378* @memberof Popper.Utils
1379* @argument {String} placement variation
1380* @returns {String} flipped placement variation
1381*/
1382function getOppositeVariation(variation) {1383if (variation === 'end') {1384return 'start';1385} else if (variation === 'start') {1386return 'end';1387}1388return variation;1389}
1390
1391/**
1392* List of accepted placements to use as values of the `placement` option.<br />
1393* Valid placements are:
1394* - `auto`
1395* - `top`
1396* - `right`
1397* - `bottom`
1398* - `left`
1399*
1400* Each placement can have a variation from this list:
1401* - `-start`
1402* - `-end`
1403*
1404* Variations are interpreted easily if you think of them as the left to right
1405* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
1406* is right.<br />
1407* Vertically (`left` and `right`), `start` is top and `end` is bottom.
1408*
1409* Some valid examples are:
1410* - `top-end` (on top of reference, right aligned)
1411* - `right-start` (on right of reference, top aligned)
1412* - `bottom` (on bottom, centered)
1413* - `auto-end` (on the side with more space available, alignment depends by placement)
1414*
1415* @static
1416* @type {Array}
1417* @enum {String}
1418* @readonly
1419* @method placements
1420* @memberof Popper
1421*/
1422var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];1423
1424// Get rid of `auto` `auto-start` and `auto-end`
1425const validPlacements = placements.slice(3);1426
1427/**
1428* Given an initial placement, returns all the subsequent placements
1429* clockwise (or counter-clockwise).
1430*
1431* @method
1432* @memberof Popper.Utils
1433* @argument {String} placement - A valid placement (it accepts variations)
1434* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
1435* @returns {Array} placements including their variations
1436*/
1437function clockwise(placement, counter = false) {1438const index = validPlacements.indexOf(placement);1439const arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));1440return counter ? arr.reverse() : arr;1441}
1442
1443const BEHAVIORS = {1444FLIP: 'flip',1445CLOCKWISE: 'clockwise',1446COUNTERCLOCKWISE: 'counterclockwise'1447};1448
1449/**
1450* @function
1451* @memberof Modifiers
1452* @argument {Object} data - The data object generated by update method
1453* @argument {Object} options - Modifiers configuration and options
1454* @returns {Object} The data object, properly modified
1455*/
1456function flip(data, options) {1457// if `inner` modifier is enabled, we can't use the `flip` modifier1458if (isModifierEnabled(data.instance.modifiers, 'inner')) {1459return data;1460}1461
1462if (data.flipped && data.placement === data.originalPlacement) {1463// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides1464return data;1465}1466
1467const boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);1468
1469let placement = data.placement.split('-')[0];1470let placementOpposite = getOppositePlacement(placement);1471let variation = data.placement.split('-')[1] || '';1472
1473let flipOrder = [];1474
1475switch (options.behavior) {1476case BEHAVIORS.FLIP:1477flipOrder = [placement, placementOpposite];1478break;1479case BEHAVIORS.CLOCKWISE:1480flipOrder = clockwise(placement);1481break;1482case BEHAVIORS.COUNTERCLOCKWISE:1483flipOrder = clockwise(placement, true);1484break;1485default:1486flipOrder = options.behavior;1487}1488
1489flipOrder.forEach((step, index) => {1490if (placement !== step || flipOrder.length === index + 1) {1491return data;1492}1493
1494placement = data.placement.split('-')[0];1495placementOpposite = getOppositePlacement(placement);1496
1497const popperOffsets = data.offsets.popper;1498const refOffsets = data.offsets.reference;1499
1500// using floor because the reference offsets may contain decimals we are not going to consider here1501const floor = Math.floor;1502const 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);1503
1504const overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);1505const overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);1506const overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);1507const overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);1508
1509const overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;1510
1511// flip the variation if required1512const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;1513
1514// flips variation if reference element overflows boundaries1515const flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);1516
1517// flips variation if popper content overflows boundaries1518const flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);1519
1520const flippedVariation = flippedVariationByRef || flippedVariationByContent;1521
1522if (overlapsRef || overflowsBoundaries || flippedVariation) {1523// this boolean to detect any flip loop1524data.flipped = true;1525
1526if (overlapsRef || overflowsBoundaries) {1527placement = flipOrder[index + 1];1528}1529
1530if (flippedVariation) {1531variation = getOppositeVariation(variation);1532}1533
1534data.placement = placement + (variation ? '-' + variation : '');1535
1536// this object contains `position`, we want to preserve it along with1537// any additional property we may add in the future1538data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));1539
1540data = runModifiers(data.instance.modifiers, data, 'flip');1541}1542});1543return data;1544}
1545
1546/**
1547* @function
1548* @memberof Modifiers
1549* @argument {Object} data - The data object generated by update method
1550* @argument {Object} options - Modifiers configuration and options
1551* @returns {Object} The data object, properly modified
1552*/
1553function keepTogether(data) {1554const { popper, reference } = data.offsets;1555const placement = data.placement.split('-')[0];1556const floor = Math.floor;1557const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;1558const side = isVertical ? 'right' : 'bottom';1559const opSide = isVertical ? 'left' : 'top';1560const measurement = isVertical ? 'width' : 'height';1561
1562if (popper[side] < floor(reference[opSide])) {1563data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];1564}1565if (popper[opSide] > floor(reference[side])) {1566data.offsets.popper[opSide] = floor(reference[side]);1567}1568
1569return data;1570}
1571
1572/**
1573* Converts a string containing value + unit into a px value number
1574* @function
1575* @memberof {modifiers~offset}
1576* @private
1577* @argument {String} str - Value + unit string
1578* @argument {String} measurement - `height` or `width`
1579* @argument {Object} popperOffsets
1580* @argument {Object} referenceOffsets
1581* @returns {Number|String}
1582* Value in pixels, or original string if no values were extracted
1583*/
1584function toValue(str, measurement, popperOffsets, referenceOffsets) {1585// separate value from unit1586const split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);1587const value = +split[1];1588const unit = split[2];1589
1590// If it's not a number it's an operator, I guess1591if (!value) {1592return str;1593}1594
1595if (unit.indexOf('%') === 0) {1596let element;1597switch (unit) {1598case '%p':1599element = popperOffsets;1600break;1601case '%':1602case '%r':1603default:1604element = referenceOffsets;1605}1606
1607const rect = getClientRect(element);1608return rect[measurement] / 100 * value;1609} else if (unit === 'vh' || unit === 'vw') {1610// if is a vh or vw, we calculate the size based on the viewport1611let size;1612if (unit === 'vh') {1613size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);1614} else {1615size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);1616}1617return size / 100 * value;1618} else {1619// if is an explicit pixel unit, we get rid of the unit and keep the value1620// if is an implicit unit, it's px, and we return just the value1621return value;1622}1623}
1624
1625/**
1626* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
1627* @function
1628* @memberof {modifiers~offset}
1629* @private
1630* @argument {String} offset
1631* @argument {Object} popperOffsets
1632* @argument {Object} referenceOffsets
1633* @argument {String} basePlacement
1634* @returns {Array} a two cells array with x and y offsets in numbers
1635*/
1636function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {1637const offsets = [0, 0];1638
1639// Use height if placement is left or right and index is 0 otherwise use width1640// in this way the first offset will use an axis and the second one1641// will use the other one1642const useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;1643
1644// Split the offset string to obtain a list of values and operands1645// The regex addresses values with the plus or minus sign in front (+10, -20, etc)1646const fragments = offset.split(/(\+|\-)/).map(frag => frag.trim());1647
1648// Detect if the offset string contains a pair of values or a single one1649// they could be separated by comma or space1650const divider = fragments.indexOf(find(fragments, frag => frag.search(/,|\s/) !== -1));1651
1652if (fragments[divider] && fragments[divider].indexOf(',') === -1) {1653console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');1654}1655
1656// If divider is found, we divide the list of values and operands to divide1657// them by ofset X and Y.1658const splitRegex = /\s*,\s*|\s+/;1659let ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];1660
1661// Convert the values with units to absolute pixels to allow our computations1662ops = ops.map((op, index) => {1663// Most of the units rely on the orientation of the popper1664const measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';1665let mergeWithPrevious = false;1666return op1667// This aggregates any `+` or `-` sign that aren't considered operators1668// e.g.: 10 + +5 => [10, +, +5]1669.reduce((a, b) => {1670if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {1671a[a.length - 1] = b;1672mergeWithPrevious = true;1673return a;1674} else if (mergeWithPrevious) {1675a[a.length - 1] += b;1676mergeWithPrevious = false;1677return a;1678} else {1679return a.concat(b);1680}1681}, [])1682// Here we convert the string values into number values (in px)1683.map(str => toValue(str, measurement, popperOffsets, referenceOffsets));1684});1685
1686// Loop trough the offsets arrays and execute the operations1687ops.forEach((op, index) => {1688op.forEach((frag, index2) => {1689if (isNumeric(frag)) {1690offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);1691}1692});1693});1694return offsets;1695}
1696
1697/**
1698* @function
1699* @memberof Modifiers
1700* @argument {Object} data - The data object generated by update method
1701* @argument {Object} options - Modifiers configuration and options
1702* @argument {Number|String} options.offset=0
1703* The offset value as described in the modifier description
1704* @returns {Object} The data object, properly modified
1705*/
1706function offset(data, { offset }) {1707const { placement, offsets: { popper, reference } } = data;1708const basePlacement = placement.split('-')[0];1709
1710let offsets;1711if (isNumeric(+offset)) {1712offsets = [+offset, 0];1713} else {1714offsets = parseOffset(offset, popper, reference, basePlacement);1715}1716
1717if (basePlacement === 'left') {1718popper.top += offsets[0];1719popper.left -= offsets[1];1720} else if (basePlacement === 'right') {1721popper.top += offsets[0];1722popper.left += offsets[1];1723} else if (basePlacement === 'top') {1724popper.left += offsets[0];1725popper.top -= offsets[1];1726} else if (basePlacement === 'bottom') {1727popper.left += offsets[0];1728popper.top += offsets[1];1729}1730
1731data.popper = popper;1732return data;1733}
1734
1735/**
1736* @function
1737* @memberof Modifiers
1738* @argument {Object} data - The data object generated by `update` method
1739* @argument {Object} options - Modifiers configuration and options
1740* @returns {Object} The data object, properly modified
1741*/
1742function preventOverflow(data, options) {1743let boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);1744
1745// If offsetParent is the reference element, we really want to1746// go one step up and use the next offsetParent as reference to1747// avoid to make this modifier completely useless and look like broken1748if (data.instance.reference === boundariesElement) {1749boundariesElement = getOffsetParent(boundariesElement);1750}1751
1752// NOTE: DOM access here1753// resets the popper's position so that the document size can be calculated excluding1754// the size of the popper element itself1755const transformProp = getSupportedPropertyName('transform');1756const popperStyles = data.instance.popper.style; // assignment to help minification1757const { top, left, [transformProp]: transform } = popperStyles;1758popperStyles.top = '';1759popperStyles.left = '';1760popperStyles[transformProp] = '';1761
1762const boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);1763
1764// NOTE: DOM access here1765// restores the original style properties after the offsets have been computed1766popperStyles.top = top;1767popperStyles.left = left;1768popperStyles[transformProp] = transform;1769
1770options.boundaries = boundaries;1771
1772const order = options.priority;1773let popper = data.offsets.popper;1774
1775const check = {1776primary(placement) {1777let value = popper[placement];1778if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {1779value = Math.max(popper[placement], boundaries[placement]);1780}1781return { [placement]: value };1782},1783secondary(placement) {1784const mainSide = placement === 'right' ? 'left' : 'top';1785let value = popper[mainSide];1786if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {1787value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));1788}1789return { [mainSide]: value };1790}1791};1792
1793order.forEach(placement => {1794const side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';1795popper = _extends({}, popper, check[side](placement));1796});1797
1798data.offsets.popper = popper;1799
1800return data;1801}
1802
1803/**
1804* @function
1805* @memberof Modifiers
1806* @argument {Object} data - The data object generated by `update` method
1807* @argument {Object} options - Modifiers configuration and options
1808* @returns {Object} The data object, properly modified
1809*/
1810function shift(data) {1811const placement = data.placement;1812const basePlacement = placement.split('-')[0];1813const shiftvariation = placement.split('-')[1];1814
1815// if shift shiftvariation is specified, run the modifier1816if (shiftvariation) {1817const { reference, popper } = data.offsets;1818const isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;1819const side = isVertical ? 'left' : 'top';1820const measurement = isVertical ? 'width' : 'height';1821
1822const shiftOffsets = {1823start: { [side]: reference[side] },1824end: {1825[side]: reference[side] + reference[measurement] - popper[measurement]1826}1827};1828
1829data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);1830}1831
1832return data;1833}
1834
1835/**
1836* @function
1837* @memberof Modifiers
1838* @argument {Object} data - The data object generated by update method
1839* @argument {Object} options - Modifiers configuration and options
1840* @returns {Object} The data object, properly modified
1841*/
1842function hide(data) {1843if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {1844return data;1845}1846
1847const refRect = data.offsets.reference;1848const bound = find(data.instance.modifiers, modifier => modifier.name === 'preventOverflow').boundaries;1849
1850if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {1851// Avoid unnecessary DOM access if visibility hasn't changed1852if (data.hide === true) {1853return data;1854}1855
1856data.hide = true;1857data.attributes['x-out-of-boundaries'] = '';1858} else {1859// Avoid unnecessary DOM access if visibility hasn't changed1860if (data.hide === false) {1861return data;1862}1863
1864data.hide = false;1865data.attributes['x-out-of-boundaries'] = false;1866}1867
1868return data;1869}
1870
1871/**
1872* @function
1873* @memberof Modifiers
1874* @argument {Object} data - The data object generated by `update` method
1875* @argument {Object} options - Modifiers configuration and options
1876* @returns {Object} The data object, properly modified
1877*/
1878function inner(data) {1879const placement = data.placement;1880const basePlacement = placement.split('-')[0];1881const { popper, reference } = data.offsets;1882const isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;1883
1884const subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;1885
1886popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);1887
1888data.placement = getOppositePlacement(placement);1889data.offsets.popper = getClientRect(popper);1890
1891return data;1892}
1893
1894/**
1895* Modifier function, each modifier can have a function of this type assigned
1896* to its `fn` property.<br />
1897* These functions will be called on each update, this means that you must
1898* make sure they are performant enough to avoid performance bottlenecks.
1899*
1900* @function ModifierFn
1901* @argument {dataObject} data - The data object generated by `update` method
1902* @argument {Object} options - Modifiers configuration and options
1903* @returns {dataObject} The data object, properly modified
1904*/
1905
1906/**
1907* Modifiers are plugins used to alter the behavior of your poppers.<br />
1908* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
1909* needed by the library.
1910*
1911* Usually you don't want to override the `order`, `fn` and `onLoad` props.
1912* All the other properties are configurations that could be tweaked.
1913* @namespace modifiers
1914*/
1915var modifiers = {1916/**1917* Modifier used to shift the popper on the start or end of its reference
1918* element.<br />
1919* It will read the variation of the `placement` property.<br />
1920* It can be one either `-end` or `-start`.
1921* @memberof modifiers
1922* @inner
1923*/
1924shift: {1925/** @prop {number} order=100 - Index used to define the order of execution */1926order: 100,1927/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */1928enabled: true,1929/** @prop {ModifierFn} */1930fn: shift1931},1932
1933/**1934* The `offset` modifier can shift your popper on both its axis.
1935*
1936* It accepts the following units:
1937* - `px` or unit-less, interpreted as pixels
1938* - `%` or `%r`, percentage relative to the length of the reference element
1939* - `%p`, percentage relative to the length of the popper element
1940* - `vw`, CSS viewport width unit
1941* - `vh`, CSS viewport height unit
1942*
1943* For length is intended the main axis relative to the placement of the popper.<br />
1944* This means that if the placement is `top` or `bottom`, the length will be the
1945* `width`. In case of `left` or `right`, it will be the `height`.
1946*
1947* You can provide a single value (as `Number` or `String`), or a pair of values
1948* as `String` divided by a comma or one (or more) white spaces.<br />
1949* The latter is a deprecated method because it leads to confusion and will be
1950* removed in v2.<br />
1951* Additionally, it accepts additions and subtractions between different units.
1952* Note that multiplications and divisions aren't supported.
1953*
1954* Valid examples are:
1955* ```
1956* 10
1957* '10%'
1958* '10, 10'
1959* '10%, 10'
1960* '10 + 10%'
1961* '10 - 5vh + 3%'
1962* '-10px + 5vh, 5px - 6%'
1963* ```
1964* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
1965* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
1966* > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
1967*
1968* @memberof modifiers
1969* @inner
1970*/
1971offset: {1972/** @prop {number} order=200 - Index used to define the order of execution */1973order: 200,1974/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */1975enabled: true,1976/** @prop {ModifierFn} */1977fn: offset,1978/** @prop {Number|String} offset=01979* The offset value as described in the modifier description
1980*/
1981offset: 01982},1983
1984/**1985* Modifier used to prevent the popper from being positioned outside the boundary.
1986*
1987* A scenario exists where the reference itself is not within the boundaries.<br />
1988* We can say it has "escaped the boundaries" — or just "escaped".<br />
1989* In this case we need to decide whether the popper should either:
1990*
1991* - detach from the reference and remain "trapped" in the boundaries, or
1992* - if it should ignore the boundary and "escape with its reference"
1993*
1994* When `escapeWithReference` is set to`true` and reference is completely
1995* outside its boundaries, the popper will overflow (or completely leave)
1996* the boundaries in order to remain attached to the edge of the reference.
1997*
1998* @memberof modifiers
1999* @inner
2000*/
2001preventOverflow: {2002/** @prop {number} order=300 - Index used to define the order of execution */2003order: 300,2004/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2005enabled: true,2006/** @prop {ModifierFn} */2007fn: preventOverflow,2008/**2009* @prop {Array} [priority=['left','right','top','bottom']]
2010* Popper will try to prevent overflow following these priorities by default,
2011* then, it could overflow on the left and on top of the `boundariesElement`
2012*/
2013priority: ['left', 'right', 'top', 'bottom'],2014/**2015* @prop {number} padding=5
2016* Amount of pixel used to define a minimum distance between the boundaries
2017* and the popper. This makes sure the popper always has a little padding
2018* between the edges of its container
2019*/
2020padding: 5,2021/**2022* @prop {String|HTMLElement} boundariesElement='scrollParent'
2023* Boundaries used by the modifier. Can be `scrollParent`, `window`,
2024* `viewport` or any DOM element.
2025*/
2026boundariesElement: 'scrollParent'2027},2028
2029/**2030* Modifier used to make sure the reference and its popper stay near each other
2031* without leaving any gap between the two. Especially useful when the arrow is
2032* enabled and you want to ensure that it points to its reference element.
2033* It cares only about the first axis. You can still have poppers with margin
2034* between the popper and its reference element.
2035* @memberof modifiers
2036* @inner
2037*/
2038keepTogether: {2039/** @prop {number} order=400 - Index used to define the order of execution */2040order: 400,2041/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2042enabled: true,2043/** @prop {ModifierFn} */2044fn: keepTogether2045},2046
2047/**2048* This modifier is used to move the `arrowElement` of the popper to make
2049* sure it is positioned between the reference element and its popper element.
2050* It will read the outer size of the `arrowElement` node to detect how many
2051* pixels of conjunction are needed.
2052*
2053* It has no effect if no `arrowElement` is provided.
2054* @memberof modifiers
2055* @inner
2056*/
2057arrow: {2058/** @prop {number} order=500 - Index used to define the order of execution */2059order: 500,2060/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2061enabled: true,2062/** @prop {ModifierFn} */2063fn: arrow,2064/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */2065element: '[x-arrow]'2066},2067
2068/**2069* Modifier used to flip the popper's placement when it starts to overlap its
2070* reference element.
2071*
2072* Requires the `preventOverflow` modifier before it in order to work.
2073*
2074* **NOTE:** this modifier will interrupt the current update cycle and will
2075* restart it if it detects the need to flip the placement.
2076* @memberof modifiers
2077* @inner
2078*/
2079flip: {2080/** @prop {number} order=600 - Index used to define the order of execution */2081order: 600,2082/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2083enabled: true,2084/** @prop {ModifierFn} */2085fn: flip,2086/**2087* @prop {String|Array} behavior='flip'
2088* The behavior used to change the popper's placement. It can be one of
2089* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
2090* placements (with optional variations)
2091*/
2092behavior: 'flip',2093/**2094* @prop {number} padding=5
2095* The popper will flip if it hits the edges of the `boundariesElement`
2096*/
2097padding: 5,2098/**2099* @prop {String|HTMLElement} boundariesElement='viewport'
2100* The element which will define the boundaries of the popper position.
2101* The popper will never be placed outside of the defined boundaries
2102* (except if `keepTogether` is enabled)
2103*/
2104boundariesElement: 'viewport',2105/**2106* @prop {Boolean} flipVariations=false
2107* The popper will switch placement variation between `-start` and `-end` when
2108* the reference element overlaps its boundaries.
2109*
2110* The original placement should have a set variation.
2111*/
2112flipVariations: false,2113/**2114* @prop {Boolean} flipVariationsByContent=false
2115* The popper will switch placement variation between `-start` and `-end` when
2116* the popper element overlaps its reference boundaries.
2117*
2118* The original placement should have a set variation.
2119*/
2120flipVariationsByContent: false2121},2122
2123/**2124* Modifier used to make the popper flow toward the inner of the reference element.
2125* By default, when this modifier is disabled, the popper will be placed outside
2126* the reference element.
2127* @memberof modifiers
2128* @inner
2129*/
2130inner: {2131/** @prop {number} order=700 - Index used to define the order of execution */2132order: 700,2133/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */2134enabled: false,2135/** @prop {ModifierFn} */2136fn: inner2137},2138
2139/**2140* Modifier used to hide the popper when its reference element is outside of the
2141* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
2142* be used to hide with a CSS selector the popper when its reference is
2143* out of boundaries.
2144*
2145* Requires the `preventOverflow` modifier before it in order to work.
2146* @memberof modifiers
2147* @inner
2148*/
2149hide: {2150/** @prop {number} order=800 - Index used to define the order of execution */2151order: 800,2152/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2153enabled: true,2154/** @prop {ModifierFn} */2155fn: hide2156},2157
2158/**2159* Computes the style that will be applied to the popper element to gets
2160* properly positioned.
2161*
2162* Note that this modifier will not touch the DOM, it just prepares the styles
2163* so that `applyStyle` modifier can apply it. This separation is useful
2164* in case you need to replace `applyStyle` with a custom implementation.
2165*
2166* This modifier has `850` as `order` value to maintain backward compatibility
2167* with previous versions of Popper.js. Expect the modifiers ordering method
2168* to change in future major versions of the library.
2169*
2170* @memberof modifiers
2171* @inner
2172*/
2173computeStyle: {2174/** @prop {number} order=850 - Index used to define the order of execution */2175order: 850,2176/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2177enabled: true,2178/** @prop {ModifierFn} */2179fn: computeStyle,2180/**2181* @prop {Boolean} gpuAcceleration=true
2182* If true, it uses the CSS 3D transformation to position the popper.
2183* Otherwise, it will use the `top` and `left` properties
2184*/
2185gpuAcceleration: true,2186/**2187* @prop {string} [x='bottom']
2188* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
2189* Change this if your popper should grow in a direction different from `bottom`
2190*/
2191x: 'bottom',2192/**2193* @prop {string} [x='left']
2194* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
2195* Change this if your popper should grow in a direction different from `right`
2196*/
2197y: 'right'2198},2199
2200/**2201* Applies the computed styles to the popper element.
2202*
2203* All the DOM manipulations are limited to this modifier. This is useful in case
2204* you want to integrate Popper.js inside a framework or view library and you
2205* want to delegate all the DOM manipulations to it.
2206*
2207* Note that if you disable this modifier, you must make sure the popper element
2208* has its position set to `absolute` before Popper.js can do its work!
2209*
2210* Just disable this modifier and define your own to achieve the desired effect.
2211*
2212* @memberof modifiers
2213* @inner
2214*/
2215applyStyle: {2216/** @prop {number} order=900 - Index used to define the order of execution */2217order: 900,2218/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */2219enabled: true,2220/** @prop {ModifierFn} */2221fn: applyStyle,2222/** @prop {Function} */2223onLoad: applyStyleOnLoad,2224/**2225* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
2226* @prop {Boolean} gpuAcceleration=true
2227* If true, it uses the CSS 3D transformation to position the popper.
2228* Otherwise, it will use the `top` and `left` properties
2229*/
2230gpuAcceleration: undefined2231}2232};2233
2234/**
2235* The `dataObject` is an object containing all the information used by Popper.js.
2236* This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
2237* @name dataObject
2238* @property {Object} data.instance The Popper.js instance
2239* @property {String} data.placement Placement applied to popper
2240* @property {String} data.originalPlacement Placement originally defined on init
2241* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
2242* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
2243* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
2244* @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
2245* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
2246* @property {Object} data.boundaries Offsets of the popper boundaries
2247* @property {Object} data.offsets The measurements of popper, reference and arrow elements
2248* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
2249* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
2250* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
2251*/
2252
2253/**
2254* Default options provided to Popper.js constructor.<br />
2255* These can be overridden using the `options` argument of Popper.js.<br />
2256* To override an option, simply pass an object with the same
2257* structure of the `options` object, as the 3rd argument. For example:
2258* ```
2259* new Popper(ref, pop, {
2260* modifiers: {
2261* preventOverflow: { enabled: false }
2262* }
2263* })
2264* ```
2265* @type {Object}
2266* @static
2267* @memberof Popper
2268*/
2269var Defaults = {2270/**2271* Popper's placement.
2272* @prop {Popper.placements} placement='bottom'
2273*/
2274placement: 'bottom',2275
2276/**2277* Set this to true if you want popper to position it self in 'fixed' mode
2278* @prop {Boolean} positionFixed=false
2279*/
2280positionFixed: false,2281
2282/**2283* Whether events (resize, scroll) are initially enabled.
2284* @prop {Boolean} eventsEnabled=true
2285*/
2286eventsEnabled: true,2287
2288/**2289* Set to true if you want to automatically remove the popper when
2290* you call the `destroy` method.
2291* @prop {Boolean} removeOnDestroy=false
2292*/
2293removeOnDestroy: false,2294
2295/**2296* Callback called when the popper is created.<br />
2297* By default, it is set to no-op.<br />
2298* Access Popper.js instance with `data.instance`.
2299* @prop {onCreate}
2300*/
2301onCreate: () => {},2302
2303/**2304* Callback called when the popper is updated. This callback is not called
2305* on the initialization/creation of the popper, but only on subsequent
2306* updates.<br />
2307* By default, it is set to no-op.<br />
2308* Access Popper.js instance with `data.instance`.
2309* @prop {onUpdate}
2310*/
2311onUpdate: () => {},2312
2313/**2314* List of modifiers used to modify the offsets before they are applied to the popper.
2315* They provide most of the functionalities of Popper.js.
2316* @prop {modifiers}
2317*/
2318modifiers
2319};2320
2321/**
2322* @callback onCreate
2323* @param {dataObject} data
2324*/
2325
2326/**
2327* @callback onUpdate
2328* @param {dataObject} data
2329*/
2330
2331// Utils
2332// Methods
2333class Popper {2334/**2335* Creates a new Popper.js instance.
2336* @class Popper
2337* @param {Element|referenceObject} reference - The reference element used to position the popper
2338* @param {Element} popper - The HTML / XML element used as the popper
2339* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
2340* @return {Object} instance - The generated Popper.js instance
2341*/
2342constructor(reference, popper, options = {}) {2343this.scheduleUpdate = () => requestAnimationFrame(this.update);2344
2345// make update() debounced, so that it only runs at most once-per-tick2346this.update = debounce(this.update.bind(this));2347
2348// with {} we create a new object with the options inside it2349this.options = _extends({}, Popper.Defaults, options);2350
2351// init state2352this.state = {2353isDestroyed: false,2354isCreated: false,2355scrollParents: []2356};2357
2358// get reference and popper elements (allow jQuery wrappers)2359this.reference = reference && reference.jquery ? reference[0] : reference;2360this.popper = popper && popper.jquery ? popper[0] : popper;2361
2362// Deep merge modifiers options2363this.options.modifiers = {};2364Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(name => {2365this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});2366});2367
2368// Refactoring modifiers' list (Object => Array)2369this.modifiers = Object.keys(this.options.modifiers).map(name => _extends({2370name
2371}, this.options.modifiers[name]))2372// sort the modifiers by order2373.sort((a, b) => a.order - b.order);2374
2375// modifiers have the ability to execute arbitrary code when Popper.js get inited2376// such code is executed in the same order of its modifier2377// they could add new properties to their options configuration2378// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!2379this.modifiers.forEach(modifierOptions => {2380if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {2381modifierOptions.onLoad(this.reference, this.popper, this.options, modifierOptions, this.state);2382}2383});2384
2385// fire the first update to position the popper in the right place2386this.update();2387
2388const eventsEnabled = this.options.eventsEnabled;2389if (eventsEnabled) {2390// setup event listeners, they will take care of update the position in specific situations2391this.enableEventListeners();2392}2393
2394this.state.eventsEnabled = eventsEnabled;2395}2396
2397// We can't use class properties because they don't get listed in the2398// class prototype and break stuff like Sinon stubs2399update() {2400return update.call(this);2401}2402destroy() {2403return destroy.call(this);2404}2405enableEventListeners() {2406return enableEventListeners.call(this);2407}2408disableEventListeners() {2409return disableEventListeners.call(this);2410}2411
2412/**2413* Schedules an update. It will run on the next UI update available.
2414* @method scheduleUpdate
2415* @memberof Popper
2416*/
2417
2418
2419/**2420* Collection of utilities useful when writing custom modifiers.
2421* Starting from version 1.7, this method is available only if you
2422* include `popper-utils.js` before `popper.js`.
2423*
2424* **DEPRECATION**: This way to access PopperUtils is deprecated
2425* and will be removed in v2! Use the PopperUtils module directly instead.
2426* Due to the high instability of the methods contained in Utils, we can't
2427* guarantee them to follow semver. Use them at your own risk!
2428* @static
2429* @private
2430* @type {Object}
2431* @deprecated since version 1.8
2432* @member Utils
2433* @memberof Popper
2434*/
2435}
2436
2437/**
2438* The `referenceObject` is an object that provides an interface compatible with Popper.js
2439* and lets you use it as replacement of a real DOM node.<br />
2440* You can use this method to position a popper relatively to a set of coordinates
2441* in case you don't have a DOM node to use as reference.
2442*
2443* ```
2444* new Popper(referenceObject, popperNode);
2445* ```
2446*
2447* NB: This feature isn't supported in Internet Explorer 10.
2448* @name referenceObject
2449* @property {Function} data.getBoundingClientRect
2450* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
2451* @property {number} data.clientWidth
2452* An ES6 getter that will return the width of the virtual reference element.
2453* @property {number} data.clientHeight
2454* An ES6 getter that will return the height of the virtual reference element.
2455*/
2456
2457Popper.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;2458Popper.placements = placements;2459Popper.Defaults = Defaults;2460
2461export default Popper;2462//# sourceMappingURL=popper.js.map
2463