Download Fore_End/cpcn2/node_modules/element-ui/lib/utils/popper.js from zxy0307/JavaWeb: direct link, hf CLI and curl.
- Browser
- Download file 50.3 kB
-
https://huggingface.co/zxy0307/JavaWeb/resolve/main/Fore_End/cpcn2/node_modules/element-ui/lib/utils/popper.js
- Command line
-
hf download hf://zxy0307/JavaWeb/Fore_End/cpcn2/node_modules/element-ui/lib/utils/popper.js
-
curl -L -o popper.js https://huggingface.co/zxy0307/JavaWeb/resolve/main/Fore_End/cpcn2/node_modules/element-ui/lib/utils/popper.js
50.3 kB
| ; | |
| var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | |
| /** | |
| * @fileOverview Kickass library to create and place poppers near their reference elements. | |
| * @version {{version}} | |
| * @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. | |
| */ | |
| // | |
| // Cross module loader | |
| // Supported: Node, AMD, Browser globals | |
| // | |
| ;(function (root, factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| // AMD. Register as an anonymous module. | |
| define(factory); | |
| } else if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports) { | |
| // Node. Does not work with strict CommonJS, but | |
| // only CommonJS-like environments that support module.exports, | |
| // like Node. | |
| module.exports = factory(); | |
| } else { | |
| // Browser globals (root is window) | |
| root.Popper = factory(); | |
| } | |
| })(undefined, function () { | |
| 'use strict'; | |
| var root = window; | |
| // default options | |
| var DEFAULTS = { | |
| // placement of the popper | |
| placement: 'bottom', | |
| gpuAcceleration: true, | |
| // shift popper from its origin by the given amount of pixels (can be negative) | |
| offset: 0, | |
| // 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, | |
| // popper will try to prevent overflow following this order, | |
| // by default, then, it could overflow on the left and on top of the boundariesElement | |
| preventOverflowOrder: ['left', 'right', 'top', 'bottom'], | |
| // the behavior used by flip to change the placement of the popper | |
| flipBehavior: 'flip', | |
| arrowElement: '[x-arrow]', | |
| arrowOffset: 0, | |
| // list of functions used to modify the offsets before they are applied to the popper | |
| modifiers: ['shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'], | |
| modifiersIgnored: [], | |
| forceAbsolute: false | |
| }; | |
| /** | |
| * Create a new Popper.js instance | |
| * @constructor Popper | |
| * @param {HTMLElement} reference - The reference element used to position the popper | |
| * @param {HTMLElement|Object} popper | |
| * The HTML element used as popper, or a configuration used to generate the popper. | |
| * @param {String} [popper.tagName='div'] The tag name of the generated popper. | |
| * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper. | |
| * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it. | |
| * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string. | |
| * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`. | |
| * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is. | |
| * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element. | |
| * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element. | |
| * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element. | |
| * @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 {HTMLElement|String} [options.arrowElement='[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 {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 {Number} [options.offset=0] | |
| * Amount of pixels the popper will be shifted (can be negative). | |
| * | |
| * @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 {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']] | |
| * Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order, | |
| * this means that the last ones will never overflow | |
| * | |
| * @param {String|Array} [options.flipBehavior='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 {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']] | |
| * List of functions used to modify the data before they are applied to the popper, add your custom functions | |
| * to this array to edit the offsets and placement. | |
| * The function should reflect the @params and @returns of preventOverflow | |
| * | |
| * @param {Array} [options.modifiersIgnored=[]] | |
| * Put here any built-in modifier name you want to exclude from the modifiers list | |
| * The function should reflect the @params and @returns of preventOverflow | |
| * | |
| * @param {Boolean} [options.removeOnDestroy=false] | |
| * Set to true if you want to automatically remove the popper when you call the `destroy` method. | |
| */ | |
| function Popper(reference, popper, options) { | |
| this._reference = reference.jquery ? reference[0] : reference; | |
| this.state = {}; | |
| // if the popper variable is a configuration object, parse it to generate an HTMLElement | |
| // generate a default popper if is not defined | |
| var isNotDefined = typeof popper === 'undefined' || popper === null; | |
| var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]'; | |
| if (isNotDefined || isConfig) { | |
| this._popper = this.parse(isConfig ? popper : {}); | |
| } | |
| // otherwise, use the given HTMLElement as popper | |
| else { | |
| 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 | |
| this._options.modifiers = this._options.modifiers.map(function (modifier) { | |
| // remove ignored modifiers | |
| if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return; | |
| // 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 | |
| if (modifier === 'applyStyle') { | |
| this._popper.setAttribute('x-placement', this._options.placement); | |
| } | |
| // return predefined modifier identified by string or keep the custom one | |
| return this.modifiers[modifier] || modifier; | |
| }.bind(this)); | |
| // make sure to apply the popper position before any computation | |
| this.state.position = this._getPosition(this._popper, this._reference); | |
| setStyle(this._popper, { position: this.state.position, top: 0 }); | |
| // fire the first update to position the popper in the right place | |
| this.update(); | |
| // setup event listeners, they will take care of update the position in specific situations | |
| this._setupEventListeners(); | |
| return this; | |
| } | |
| // | |
| // Methods | |
| // | |
| /** | |
| * Destroy the popper | |
| * @method | |
| * @memberof Popper | |
| */ | |
| Popper.prototype.destroy = function () { | |
| this._popper.removeAttribute('x-placement'); | |
| this._popper.style.left = ''; | |
| this._popper.style.position = ''; | |
| this._popper.style.top = ''; | |
| this._popper.style[getSupportedPropertyName('transform')] = ''; | |
| this._removeEventListeners(); | |
| // remove the popper if user explicity asked for the deletion on destroy | |
| if (this._options.removeOnDestroy) { | |
| this._popper.remove(); | |
| } | |
| return this; | |
| }; | |
| /** | |
| * Updates the position of the popper, computing the new offsets and applying the new style | |
| * @method | |
| * @memberof Popper | |
| */ | |
| Popper.prototype.update = function () { | |
| var data = { instance: this, styles: {} }; | |
| // 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 = this._options.placement; | |
| data._originalPlacement = this._options.placement; | |
| // compute the popper and reference offsets and put them inside data.offsets | |
| data.offsets = this._getOffsets(this._popper, this._reference, data.placement); | |
| // get boundaries | |
| data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement); | |
| data = this.runModifiers(data, this._options.modifiers); | |
| if (typeof this.state.updateCallback === 'function') { | |
| this.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 {Function} callback | |
| */ | |
| Popper.prototype.onCreate = function (callback) { | |
| // the createCallbacks return as first argument the popper instance | |
| callback(this); | |
| return this; | |
| }; | |
| /** | |
| * 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 {Function} callback | |
| */ | |
| Popper.prototype.onUpdate = function (callback) { | |
| this.state.updateCallback = callback; | |
| return this; | |
| }; | |
| /** | |
| * Helper used to generate poppers from a configuration file | |
| * @method | |
| * @memberof Popper | |
| * @param config {Object} configuration | |
| * @returns {HTMLElement} popper | |
| */ | |
| Popper.prototype.parse = function (config) { | |
| var defaultConfig = { | |
| tagName: 'div', | |
| classNames: ['popper'], | |
| attributes: [], | |
| parent: root.document.body, | |
| content: '', | |
| contentType: 'text', | |
| arrowTagName: 'div', | |
| arrowClassNames: ['popper__arrow'], | |
| arrowAttributes: ['x-arrow'] | |
| }; | |
| config = Object.assign({}, defaultConfig, config); | |
| var d = root.document; | |
| var popper = d.createElement(config.tagName); | |
| addClassNames(popper, config.classNames); | |
| addAttributes(popper, config.attributes); | |
| if (config.contentType === 'node') { | |
| popper.appendChild(config.content.jquery ? config.content[0] : config.content); | |
| } else if (config.contentType === 'html') { | |
| popper.innerHTML = config.content; | |
| } else { | |
| popper.textContent = config.content; | |
| } | |
| if (config.arrowTagName) { | |
| var arrow = d.createElement(config.arrowTagName); | |
| addClassNames(arrow, config.arrowClassNames); | |
| addAttributes(arrow, config.arrowAttributes); | |
| popper.appendChild(arrow); | |
| } | |
| var parent = config.parent.jquery ? config.parent[0] : config.parent; | |
| // if the given parent is a string, use it to match an element | |
| // if more than one element is matched, the first one will be used as parent | |
| // if no elements are matched, the script will throw an error | |
| if (typeof parent === 'string') { | |
| parent = d.querySelectorAll(config.parent); | |
| if (parent.length > 1) { | |
| console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used'); | |
| } | |
| if (parent.length === 0) { | |
| throw 'ERROR: the given `parent` doesn\'t exists!'; | |
| } | |
| parent = parent[0]; | |
| } | |
| // if the given parent is a DOM nodes list or an array of nodes with more than one element, | |
| // the first one will be used as parent | |
| if (parent.length > 1 && parent instanceof Element === false) { | |
| console.warn('WARNING: you have passed as parent a list of elements, the first one will be used'); | |
| parent = parent[0]; | |
| } | |
| // append the generated popper to its parent | |
| parent.appendChild(popper); | |
| return popper; | |
| /** | |
| * Adds class names to the given element | |
| * @function | |
| * @ignore | |
| * @param {HTMLElement} target | |
| * @param {Array} classes | |
| */ | |
| function addClassNames(element, classNames) { | |
| classNames.forEach(function (className) { | |
| element.classList.add(className); | |
| }); | |
| } | |
| /** | |
| * Adds attributes to the given element | |
| * @function | |
| * @ignore | |
| * @param {HTMLElement} target | |
| * @param {Array} attributes | |
| * @example | |
| * addAttributes(element, [ 'data-info:foobar' ]); | |
| */ | |
| function addAttributes(element, attributes) { | |
| attributes.forEach(function (attribute) { | |
| element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || ''); | |
| }); | |
| } | |
| }; | |
| /** | |
| * Helper used to get the position which will be applied to the popper | |
| * @method | |
| * @memberof Popper | |
| * @param config {HTMLElement} popper element | |
| * @param reference {HTMLElement} reference element | |
| * @returns {String} position | |
| */ | |
| Popper.prototype._getPosition = function (popper, reference) { | |
| var container = getOffsetParent(reference); | |
| if (this._options.forceAbsolute) { | |
| return 'absolute'; | |
| } | |
| // 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(reference, container); | |
| return isParentFixed ? 'fixed' : 'absolute'; | |
| }; | |
| /** | |
| * Get offsets to the popper | |
| * @method | |
| * @memberof Popper | |
| * @access private | |
| * @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 | |
| */ | |
| Popper.prototype._getOffsets = function (popper, reference, placement) { | |
| placement = placement.split('-')[0]; | |
| var popperOffsets = {}; | |
| popperOffsets.position = this.state.position; | |
| var isParentFixed = popperOffsets.position === 'fixed'; | |
| // | |
| // Get reference element position | |
| // | |
| var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed); | |
| // | |
| // 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; | |
| } | |
| } | |
| // Add width and height to our offsets object | |
| popperOffsets.width = popperRect.width; | |
| popperOffsets.height = popperRect.height; | |
| return { | |
| popper: popperOffsets, | |
| reference: referenceOffsets | |
| }; | |
| }; | |
| /** | |
| * Setup needed event listeners used to update the popper position | |
| * @method | |
| * @memberof Popper | |
| * @access private | |
| */ | |
| Popper.prototype._setupEventListeners = function () { | |
| // NOTE: 1 DOM access here | |
| this.state.updateBound = this.update.bind(this); | |
| root.addEventListener('resize', this.state.updateBound); | |
| // if the boundariesElement is window we don't need to listen for the scroll event | |
| if (this._options.boundariesElement !== 'window') { | |
| var target = getScrollParent(this._reference); | |
| // here it could be both `body` or `documentElement` thanks to Firefox, we then check both | |
| if (target === root.document.body || target === root.document.documentElement) { | |
| target = root; | |
| } | |
| target.addEventListener('scroll', this.state.updateBound); | |
| this.state.scrollTarget = target; | |
| } | |
| }; | |
| /** | |
| * Remove event listeners used to update the popper position | |
| * @method | |
| * @memberof Popper | |
| * @access private | |
| */ | |
| Popper.prototype._removeEventListeners = function () { | |
| // NOTE: 1 DOM access here | |
| root.removeEventListener('resize', this.state.updateBound); | |
| if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) { | |
| this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound); | |
| this.state.scrollTarget = null; | |
| } | |
| this.state.updateBound = null; | |
| }; | |
| /** | |
| * Computed the boundaries limits and return them | |
| * @method | |
| * @memberof Popper | |
| * @access private | |
| * @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 | |
| */ | |
| Popper.prototype._getBoundaries = function (data, padding, boundariesElement) { | |
| // NOTE: 1 DOM access here | |
| var boundaries = {}; | |
| var width, height; | |
| if (boundariesElement === 'window') { | |
| var body = root.document.body, | |
| html = root.document.documentElement; | |
| 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); | |
| boundaries = { | |
| top: 0, | |
| right: width, | |
| bottom: height, | |
| left: 0 | |
| }; | |
| } else if (boundariesElement === 'viewport') { | |
| var offsetParent = getOffsetParent(this._popper); | |
| var scrollParent = getScrollParent(this._popper); | |
| var offsetParentRect = getOffsetRect(offsetParent); | |
| // Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop` | |
| var getScrollTopValue = function getScrollTopValue(element) { | |
| return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop; | |
| }; | |
| var getScrollLeftValue = function getScrollLeftValue(element) { | |
| return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft; | |
| }; | |
| // if the popper is fixed we don't have to substract scrolling from the boundaries | |
| var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent); | |
| var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : getScrollLeftValue(scrollParent); | |
| boundaries = { | |
| top: 0 - (offsetParentRect.top - scrollTop), | |
| right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft), | |
| bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop), | |
| left: 0 - (offsetParentRect.left - scrollLeft) | |
| }; | |
| } else { | |
| if (getOffsetParent(this._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; | |
| }; | |
| /** | |
| * Loop trough the list of modifiers and run them in order, each of them will then edit the data object | |
| * @method | |
| * @memberof Popper | |
| * @access public | |
| * @param {Object} data | |
| * @param {Array} modifiers | |
| * @param {Function} ends | |
| */ | |
| Popper.prototype.runModifiers = function (data, modifiers, ends) { | |
| var modifiersToRun = modifiers.slice(); | |
| if (ends !== undefined) { | |
| modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends)); | |
| } | |
| modifiersToRun.forEach(function (modifier) { | |
| if (isFunction(modifier)) { | |
| data = modifier.call(this, data); | |
| } | |
| }.bind(this)); | |
| return data; | |
| }; | |
| /** | |
| * Helper used to know if the given modifier depends from another one. | |
| * @method | |
| * @memberof Popper | |
| * @param {String} requesting - name of requesting modifier | |
| * @param {String} requested - name of requested modifier | |
| * @returns {Boolean} | |
| */ | |
| Popper.prototype.isModifierRequired = function (requesting, requested) { | |
| var index = getArrayKeyIndex(this._options.modifiers, requesting); | |
| return !!this._options.modifiers.slice(0, index).filter(function (modifier) { | |
| return modifier === requested; | |
| }).length; | |
| }; | |
| // | |
| // Modifiers | |
| // | |
| /** | |
| * Modifiers list | |
| * @namespace Popper.modifiers | |
| * @memberof Popper | |
| * @type {Object} | |
| */ | |
| Popper.prototype.modifiers = {}; | |
| /** | |
| * Apply the computed styles to the popper element | |
| * @method | |
| * @memberof Popper.modifiers | |
| * @argument {Object} data - The data object generated by `update` method | |
| * @returns {Object} The same data object | |
| */ | |
| Popper.prototype.modifiers.applyStyle = function (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; | |
| if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) { | |
| 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(this._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 | |
| this._popper.setAttribute('x-placement', data.placement); | |
| // if the arrow modifier is required and the arrow style has been computed, apply the arrow style | |
| if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) { | |
| setStyle(data.arrowElement, data.offsets.arrow); | |
| } | |
| return data; | |
| }; | |
| /** | |
| * Modifier used to shift the popper on the start or end of its reference element side | |
| * @method | |
| * @memberof Popper.modifiers | |
| * @argument {Object} data - The data object generated by `update` method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.shift = function (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]); | |
| } | |
| return data; | |
| }; | |
| /** | |
| * Modifier used to make sure the popper does not overflows from it's boundaries | |
| * @method | |
| * @memberof Popper.modifiers | |
| * @argument {Object} data - The data object generated by `update` method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.preventOverflow = function (data) { | |
| var order = this._options.preventOverflowOrder; | |
| var popper = getPopperClientRect(data.offsets.popper); | |
| var check = { | |
| left: function left() { | |
| var left = popper.left; | |
| if (popper.left < data.boundaries.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) { | |
| 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) { | |
| top = Math.max(popper.top, data.boundaries.top); | |
| } | |
| return { top: top }; | |
| }, | |
| bottom: function bottom() { | |
| var top = popper.top; | |
| if (popper.bottom > data.boundaries.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; | |
| }; | |
| /** | |
| * Modifier used to make sure the popper is always near its reference | |
| * @method | |
| * @memberof Popper.modifiers | |
| * @argument {Object} data - The data object generated by _update method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.keepTogether = function (data) { | |
| var popper = getPopperClientRect(data.offsets.popper); | |
| var reference = data.offsets.reference; | |
| var f = Math.floor; | |
| 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); | |
| } | |
| 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); | |
| } | |
| return data; | |
| }; | |
| /** | |
| * 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:** This modifier will run all its previous modifiers everytime it tries to flip the popper! | |
| * @method | |
| * @memberof Popper.modifiers | |
| * @argument {Object} data - The data object generated by _update method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.flip = function (data) { | |
| // check if preventOverflow is in the list of modifiers before the flip modifier. | |
| // otherwise flip would not work as expected. | |
| if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.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 (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 placement = data.placement.split('-')[0]; | |
| var placementOpposite = getOppositePlacement(placement); | |
| var variation = data.placement.split('-')[1] || ''; | |
| var flipOrder = []; | |
| if (this._options.flipBehavior === 'flip') { | |
| flipOrder = [placement, placementOpposite]; | |
| } else { | |
| flipOrder = this._options.flipBehavior; | |
| } | |
| flipOrder.forEach(function (step, index) { | |
| if (placement !== step || flipOrder.length === index + 1) { | |
| return; | |
| } | |
| placement = data.placement.split('-')[0]; | |
| placementOpposite = getOppositePlacement(placement); | |
| var popperOffsets = getPopperClientRect(data.offsets.popper); | |
| // 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; | |
| // using Math.floor because the reference offsets may contain decimals we are not going to consider here | |
| if (a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) || !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite])) { | |
| // we'll use this boolean to detect any flip loop | |
| data.flipped = true; | |
| data.placement = flipOrder[index + 1]; | |
| if (variation) { | |
| data.placement += '-' + variation; | |
| } | |
| data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper; | |
| data = this.runModifiers(data, this._options.modifiers, this._flip); | |
| } | |
| }.bind(this)); | |
| 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 Popper.modifiers | |
| * @argument {Object} data - The data object generated by _update method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.offset = function (data) { | |
| var offset = this._options.offset; | |
| var popper = data.offsets.popper; | |
| if (data.placement.indexOf('left') !== -1) { | |
| popper.top -= offset; | |
| } else if (data.placement.indexOf('right') !== -1) { | |
| popper.top += offset; | |
| } else if (data.placement.indexOf('top') !== -1) { | |
| popper.left -= offset; | |
| } else if (data.placement.indexOf('bottom') !== -1) { | |
| popper.left += offset; | |
| } | |
| return data; | |
| }; | |
| /** | |
| * 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 Popper.modifiers | |
| * @argument {Object} data - The data object generated by _update method | |
| * @returns {Object} The data object, properly modified | |
| */ | |
| Popper.prototype.modifiers.arrow = function (data) { | |
| var arrow = this._options.arrowElement; | |
| var arrowOffset = this._options.arrowOffset; | |
| // if the arrowElement is a string, suppose it's a CSS selector | |
| if (typeof arrow === 'string') { | |
| arrow = this._popper.querySelector(arrow); | |
| } | |
| // 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 (!this._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 (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.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 translate = isVertical ? 'translateY' : 'translateX'; | |
| 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]; | |
| } | |
| // compute center of the popper | |
| var center = reference[side] + (arrowOffset || reference[len] / 2 - arrowSize / 2); | |
| var sideValue = center - popper[side]; | |
| // prevent arrow from being placed not contiguously to its popper | |
| sideValue = Math.max(Math.min(popper[len] - arrowSize - 8, sideValue), 8); | |
| arrowStyle[side] = sideValue; | |
| arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow | |
| data.offsets.arrow = arrowStyle; | |
| data.arrowElement = arrow; | |
| return data; | |
| }; | |
| // | |
| // Helpers | |
| // | |
| /** | |
| * Get the outer sizes of the given element (offset size + margins) | |
| * @function | |
| * @ignore | |
| * @argument {Element} element | |
| * @returns {Object} object containing width and height properties | |
| */ | |
| function getOuterSizes(element) { | |
| // NOTE: 1 DOM access here | |
| var _display = element.style.display, | |
| _visibility = element.style.visibility; | |
| element.style.display = 'block';element.style.visibility = 'hidden'; | |
| var calcWidthToForceRepaint = element.offsetWidth; | |
| // original method | |
| var styles = root.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; | |
| } | |
| /** | |
| * Get the opposite placement of the given one/ | |
| * @function | |
| * @ignore | |
| * @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]; | |
| }); | |
| } | |
| /** | |
| * Given the popper offsets, generate an output similar to getBoundingClientRect | |
| * @function | |
| * @ignore | |
| * @argument {Object} popperOffsets | |
| * @returns {Object} ClientRect like output | |
| */ | |
| function getPopperClientRect(popperOffsets) { | |
| var offsets = Object.assign({}, popperOffsets); | |
| offsets.right = offsets.left + offsets.width; | |
| offsets.bottom = offsets.top + offsets.height; | |
| return offsets; | |
| } | |
| /** | |
| * Given an array and the key to find, returns its index | |
| * @function | |
| * @ignore | |
| * @argument {Array} arr | |
| * @argument keyToFind | |
| * @returns index or null | |
| */ | |
| function getArrayKeyIndex(arr, keyToFind) { | |
| var i = 0, | |
| key; | |
| for (key in arr) { | |
| if (arr[key] === keyToFind) { | |
| return i; | |
| } | |
| i++; | |
| } | |
| return null; | |
| } | |
| /** | |
| * Get CSS computed property of the given element | |
| * @function | |
| * @ignore | |
| * @argument {Eement} element | |
| * @argument {String} property | |
| */ | |
| function getStyleComputedProperty(element, property) { | |
| // NOTE: 1 DOM access here | |
| var css = root.getComputedStyle(element, null); | |
| return css[property]; | |
| } | |
| /** | |
| * Returns the offset parent of the given element | |
| * @function | |
| * @ignore | |
| * @argument {Element} element | |
| * @returns {Element} offset parent | |
| */ | |
| function getOffsetParent(element) { | |
| // NOTE: 1 DOM access here | |
| var offsetParent = element.offsetParent; | |
| return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent; | |
| } | |
| /** | |
| * Returns the scrolling parent of the given element | |
| * @function | |
| * @ignore | |
| * @argument {Element} element | |
| * @returns {Element} offset parent | |
| */ | |
| function getScrollParent(element) { | |
| var parent = element.parentNode; | |
| if (!parent) { | |
| return element; | |
| } | |
| if (parent === root.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 (root.document.body.scrollTop || root.document.body.scrollLeft) { | |
| return root.document.body; | |
| } else { | |
| return root.document.documentElement; | |
| } | |
| } | |
| // Firefox want us to check `-x` and `-y` variations as well | |
| if (['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, '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 parent; | |
| } | |
| return getScrollParent(element.parentNode); | |
| } | |
| /** | |
| * Check if the given element is fixed or is inside a fixed parent | |
| * @function | |
| * @ignore | |
| * @argument {Element} element | |
| * @argument {Element} customContainer | |
| * @returns {Boolean} answer to "isFixed?" | |
| */ | |
| function isFixed(element) { | |
| if (element === root.document.body) { | |
| return false; | |
| } | |
| if (getStyleComputedProperty(element, 'position') === 'fixed') { | |
| return true; | |
| } | |
| return element.parentNode ? isFixed(element.parentNode) : element; | |
| } | |
| /** | |
| * Set the style to the given popper | |
| * @function | |
| * @ignore | |
| * @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) { | |
| function is_numeric(n) { | |
| return n !== '' && !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| 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 && is_numeric(styles[prop])) { | |
| unit = 'px'; | |
| } | |
| element.style[prop] = styles[prop] + unit; | |
| }); | |
| } | |
| /** | |
| * Check if the given variable is a function | |
| * @function | |
| * @ignore | |
| * @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]'; | |
| } | |
| /** | |
| * Get the position of the given element, relative to its offset parent | |
| * @function | |
| * @ignore | |
| * @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; | |
| } | |
| /** | |
| * Get bounding client rect of given element | |
| * @function | |
| * @ignore | |
| * @param {HTMLElement} element | |
| * @return {Object} client rect | |
| */ | |
| function getBoundingClientRect(element) { | |
| var rect = element.getBoundingClientRect(); | |
| // whether the IE version is lower than 11 | |
| var isIE = navigator.userAgent.indexOf("MSIE") != -1; | |
| // fix ie document bounding top always 0 bug | |
| var rectTop = isIE && element.tagName === 'HTML' ? -element.scrollTop : rect.top; | |
| return { | |
| left: rect.left, | |
| top: rectTop, | |
| right: rect.right, | |
| bottom: rect.bottom, | |
| width: rect.right - rect.left, | |
| height: rect.bottom - rectTop | |
| }; | |
| } | |
| /** | |
| * Given an element and one of its parents, return the offset | |
| * @function | |
| * @ignore | |
| * @param {HTMLElement} element | |
| * @param {HTMLElement} parent | |
| * @return {Object} rect | |
| */ | |
| function getOffsetRectRelativeToCustomParent(element, parent, fixed) { | |
| var elementRect = getBoundingClientRect(element); | |
| var parentRect = getBoundingClientRect(parent); | |
| if (fixed) { | |
| var scrollParent = getScrollParent(parent); | |
| parentRect.top += scrollParent.scrollTop; | |
| parentRect.bottom += scrollParent.scrollTop; | |
| parentRect.left += scrollParent.scrollLeft; | |
| parentRect.right += scrollParent.scrollLeft; | |
| } | |
| 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; | |
| } | |
| /** | |
| * Get the prefixed supported property name | |
| * @function | |
| * @ignore | |
| * @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 root.document.body.style[toCheck] !== 'undefined') { | |
| return toCheck; | |
| } | |
| } | |
| return null; | |
| } | |
| /** | |
| * 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; | |
| } | |
| }); | |
| } | |
| return Popper; | |
| }); |