From 7e2acee279ba89195c23d03fa63cfce83ff78e18 Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Wed, 25 Jul 2018 09:10:03 +0100 Subject: [PATCH] Update to v1.14.3 --- README.md | 2 +- assets/javascripts/popper.js | 187 +++++++++++++++++++++++++---------- lib/popper_js/version.rb | 2 +- 3 files changed, 137 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 1bcec6b..7aabfa0 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Works with Rails out of the box. Add this line to your application's Gemfile: ```ruby -gem 'popper_js', '~> 1.12.9' +gem 'popper_js', '~> 1.14.3' ``` And then execute: diff --git a/assets/javascripts/popper.js b/assets/javascripts/popper.js index cf40ffa..bf5fb7e 100644 --- a/assets/javascripts/popper.js +++ b/assets/javascripts/popper.js @@ -1,6 +1,6 @@ /**! * @fileOverview Kickass library to create and place poppers near their reference elements. - * @version 1.12.9 + * @version 1.14.3 * @license * Copyright (c) 2016 Federico Zivolo and contributors * @@ -29,6 +29,7 @@ }(this, (function () { 'use strict'; var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'; + var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox']; var timeoutDuration = 0; for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) { @@ -148,13 +149,33 @@ function getScrollParent(element) { overflowX = _getStyleComputedProp.overflowX, overflowY = _getStyleComputedProp.overflowY; - if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) { + if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) { return element; } return getScrollParent(getParentNode(element)); } +var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode); +var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent); + +/** + * Determines if the browser is Internet Explorer + * @method + * @memberof Popper.Utils + * @param {Number} version to check + * @returns {Boolean} isIE + */ +function isIE(version) { + if (version === 11) { + return isIE11; + } + if (version === 10) { + return isIE10; + } + return isIE11 || isIE10; +} + /** * Returns the offset parent of the given element * @method @@ -163,16 +184,23 @@ function getScrollParent(element) { * @returns {Element} offset parent */ function getOffsetParent(element) { + if (!element) { + return document.documentElement; + } + + var noOffsetParent = isIE(10) ? document.body : null; + // NOTE: 1 DOM access here - var offsetParent = element && element.offsetParent; + var offsetParent = element.offsetParent; + // Skip hidden elements which don't have an offsetParent + while (offsetParent === noOffsetParent && element.nextElementSibling) { + offsetParent = (element = element.nextElementSibling).offsetParent; + } + var nodeName = offsetParent && offsetParent.nodeName; if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') { - if (element) { - return element.ownerDocument.documentElement; - } - - return document.documentElement; + return element ? element.ownerDocument.documentElement : document.documentElement; } // .offsetParent will return the closest TD or TABLE in case @@ -314,29 +342,14 @@ function getBordersSize(styles, axis) { return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10); } -/** - * Tells if you are running Internet Explorer 10 - * @method - * @memberof Popper.Utils - * @returns {Boolean} isIE10 - */ -var isIE10 = undefined; - -var isIE10$1 = function () { - if (isIE10 === undefined) { - isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1; - } - return isIE10; -}; - function getSize(axis, body, html, computedStyle) { - return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE10$1() ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0); + return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0); } function getWindowSizes() { var body = document.body; var html = document.documentElement; - var computedStyle = isIE10$1() && getComputedStyle(html); + var computedStyle = isIE(10) && getComputedStyle(html); return { height: getSize('Height', body, html, computedStyle), @@ -428,8 +441,8 @@ function getBoundingClientRect(element) { // IE10 10 FIX: Please, don't ask, the element isn't // considered in DOM in some circumstances... // This isn't reproducible in IE10 compatibility mode of IE11 - if (isIE10$1()) { - try { + try { + if (isIE(10)) { rect = element.getBoundingClientRect(); var scrollTop = getScroll(element, 'top'); var scrollLeft = getScroll(element, 'left'); @@ -437,10 +450,10 @@ function getBoundingClientRect(element) { rect.left += scrollLeft; rect.bottom += scrollTop; rect.right += scrollLeft; - } catch (err) {} - } else { - rect = element.getBoundingClientRect(); - } + } else { + rect = element.getBoundingClientRect(); + } + } catch (e) {} var result = { left: rect.left, @@ -472,7 +485,9 @@ function getBoundingClientRect(element) { } function getOffsetRectRelativeToArbitraryNode(children, parent) { - var isIE10 = isIE10$1(); + var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + + var isIE10 = isIE(10); var isHTML = parent.nodeName === 'HTML'; var childrenRect = getBoundingClientRect(children); var parentRect = getBoundingClientRect(parent); @@ -482,6 +497,11 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) { var borderTopWidth = parseFloat(styles.borderTopWidth, 10); var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10); + // In cases where the parent is fixed, we must ignore negative scroll in offset calc + if (fixedPosition && parent.nodeName === 'HTML') { + parentRect.top = Math.max(parentRect.top, 0); + parentRect.left = Math.max(parentRect.left, 0); + } var offsets = getClientRect({ top: childrenRect.top - parentRect.top - borderTopWidth, left: childrenRect.left - parentRect.left - borderLeftWidth, @@ -509,7 +529,7 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) { offsets.marginLeft = marginLeft; } - if (isIE10 ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') { + if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') { offsets = includeScroll(offsets, parent); } @@ -517,13 +537,15 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) { } function getViewportOffsetRectRelativeToArtbitraryNode(element) { + var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + var html = element.ownerDocument.documentElement; var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html); var width = Math.max(html.clientWidth, window.innerWidth || 0); var height = Math.max(html.clientHeight, window.innerHeight || 0); - var scrollTop = getScroll(html); - var scrollLeft = getScroll(html, 'left'); + var scrollTop = !excludeScroll ? getScroll(html) : 0; + var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0; var offset = { top: scrollTop - relativeOffset.top + relativeOffset.marginTop, @@ -554,6 +576,26 @@ function isFixed(element) { return isFixed(getParentNode(element)); } +/** + * Finds the first parent of an element that has a transformed property defined + * @method + * @memberof Popper.Utils + * @argument {Element} element + * @returns {Element} first transformed parent or documentElement + */ + +function getFixedPositionOffsetParent(element) { + // This check is needed to avoid errors in case one of the elements isn't defined for any reason + if (!element || !element.parentElement || isIE()) { + return document.documentElement; + } + var el = element.parentElement; + while (el && getStyleComputedProperty(el, 'transform') === 'none') { + el = el.parentElement; + } + return el || document.documentElement; +} + /** * Computed the boundaries limits and return them * @method @@ -562,16 +604,20 @@ function isFixed(element) { * @param {HTMLElement} reference * @param {number} padding * @param {HTMLElement} boundariesElement - Element used to define the boundaries + * @param {Boolean} fixedPosition - Is in fixed position mode * @returns {Object} Coordinates of the boundaries */ function getBoundaries(popper, reference, padding, boundariesElement) { + var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; + // NOTE: 1 DOM access here + var boundaries = { top: 0, left: 0 }; - var offsetParent = findCommonOffsetParent(popper, reference); + var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference); // Handle viewport case if (boundariesElement === 'viewport') { - boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent); + boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition); } else { // Handle other cases based on DOM element used as boundaries var boundariesNode = void 0; @@ -586,7 +632,7 @@ function getBoundaries(popper, reference, padding, boundariesElement) { boundariesNode = boundariesElement; } - var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent); + var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition); // In case of HTML, we need a different computation if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) { @@ -687,11 +733,14 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE * @param {Object} state * @param {Element} popper - the popper element * @param {Element} reference - the reference element (the popper will be relative to this) + * @param {Element} fixedPosition - is in fixed position mode * @returns {Object} An object containing the offsets which will be applied to the popper */ function getReferenceOffsets(state, popper, reference) { - var commonOffsetParent = findCommonOffsetParent(popper, reference); - return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent); + var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; + + var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference); + return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition); } /** @@ -864,7 +913,7 @@ function update() { }; // compute reference element offsets - data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference); + data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed); // compute auto placement, store placement inside the data object, // modifiers will be able to edit `placement` if needed @@ -874,9 +923,12 @@ function update() { // store the computed placement inside `originalPlacement` data.originalPlacement = data.placement; + data.positionFixed = this.options.positionFixed; + // compute the popper offsets data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement); - data.offsets.popper.position = 'absolute'; + + data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute'; // run the modifiers data = runModifiers(this.modifiers, data); @@ -916,7 +968,7 @@ function getSupportedPropertyName(property) { var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O']; var upperProp = property.charAt(0).toUpperCase() + property.slice(1); - for (var i = 0; i < prefixes.length - 1; i++) { + for (var i = 0; i < prefixes.length; i++) { var prefix = prefixes[i]; var toCheck = prefix ? '' + prefix + upperProp : property; if (typeof document.body.style[toCheck] !== 'undefined') { @@ -937,9 +989,12 @@ function destroy() { // touch DOM only if `applyStyle` modifier is enabled if (isModifierEnabled(this.modifiers, 'applyStyle')) { this.popper.removeAttribute('x-placement'); - this.popper.style.left = ''; this.popper.style.position = ''; this.popper.style.top = ''; + this.popper.style.left = ''; + this.popper.style.right = ''; + this.popper.style.bottom = ''; + this.popper.style.willChange = ''; this.popper.style[getSupportedPropertyName('transform')] = ''; } @@ -1127,12 +1182,12 @@ function applyStyle(data) { * @method * @memberof Popper.modifiers * @param {HTMLElement} reference - The reference element used to position the popper - * @param {HTMLElement} popper - The HTML element used as popper. + * @param {HTMLElement} popper - The HTML element used as popper * @param {Object} options - Popper.js options */ function applyStyleOnLoad(reference, popper, options, modifierOptions, state) { // compute reference element offsets - var referenceOffsets = getReferenceOffsets(state, popper, reference); + var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed); // compute auto placement, store placement inside the data object, // modifiers will be able to edit `placement` if needed @@ -1143,7 +1198,7 @@ function applyStyleOnLoad(reference, popper, options, modifierOptions, state) { // Apply `position` to popper before anything else because // without the position applied we can't guarantee correct computations - setStyles(popper, { position: 'absolute' }); + setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' }); return options; } @@ -1178,11 +1233,13 @@ function computeStyle(data, options) { position: popper.position }; - // floor sides to avoid blurry text + // Avoid blurry text by using full pixel integers. + // For pixel-perfect positioning, top/bottom prefers rounded + // values, while left/right prefers floored values. var offsets = { left: Math.floor(popper.left), - top: Math.floor(popper.top), - bottom: Math.floor(popper.bottom), + top: Math.round(popper.top), + bottom: Math.round(popper.bottom), right: Math.floor(popper.right) }; @@ -1446,7 +1503,7 @@ function flip(data, options) { return data; } - var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement); + var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed); var placement = data.placement.split('-')[0]; var placementOpposite = getOppositePlacement(placement); @@ -1738,7 +1795,27 @@ function preventOverflow(data, options) { boundariesElement = getOffsetParent(boundariesElement); } - var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement); + // NOTE: DOM access here + // resets the popper's position so that the document size can be calculated excluding + // the size of the popper element itself + var transformProp = getSupportedPropertyName('transform'); + var popperStyles = data.instance.popper.style; // assignment to help minification + var top = popperStyles.top, + left = popperStyles.left, + transform = popperStyles[transformProp]; + + popperStyles.top = ''; + popperStyles.left = ''; + popperStyles[transformProp] = ''; + + var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed); + + // NOTE: DOM access here + // restores the original style properties after the offsets have been computed + popperStyles.top = top; + popperStyles.left = left; + popperStyles[transformProp] = transform; + options.boundaries = boundaries; var order = options.priority; @@ -2235,6 +2312,12 @@ var Defaults = { */ placement: 'bottom', + /** + * Set this to true if you want popper to position it self in 'fixed' mode + * @prop {Boolean} positionFixed=false + */ + positionFixed: false, + /** * Whether events (resize, scroll) are initially enabled * @prop {Boolean} eventsEnabled=true diff --git a/lib/popper_js/version.rb b/lib/popper_js/version.rb index 41f3728..f8a5f30 100644 --- a/lib/popper_js/version.rb +++ b/lib/popper_js/version.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true module PopperJs - VERSION = '1.12.9' + VERSION = '1.14.3' end