// Get an actual px offset from the attachment
var offset = offsetToPx(attachmentToOffset(this.attachment), { width: width, height: height });
var targetOffset = offsetToPx(attachmentToOffset(targetAttachment), targetSize);
var manualOffset = offsetToPx(this.offset, { width: width, height: height });
var manualTargetOffset = offsetToPx(this.targetOffset, targetSize);
// Add the manually provided offset
offset = addOffset(offset, manualOffset);
targetOffset = addOffset(targetOffset, manualTargetOffset);
// It's now our goal to make (element position + offset) == (target position + target offset)
var left = targetPos.left + targetOffset.left - offset.left;
var top = targetPos.top + targetOffset.top - offset.top;
for (var i = 0; i < TetherBase.modules.length; ++i) {
var _module2 = TetherBase.modules[i];
var ret = _module2.position.call(this, {
targetAttachment: targetAttachment,
targetOffset: targetOffset,
manualOffset: manualOffset,
manualTargetOffset: manualTargetOffset,
scrollbarSize: scrollbarSize,
attachment: this.attachment
} else if (typeof ret === 'undefined' || typeof ret !== 'object') {
// We describe the position three different ways to give the optimizer
// a chance to decide the best possible way to position the element
// with the fewest repaints.
// It's position relative to the page (absolute positioning when
// the element is a child of the body)
// It's position relative to the viewport (fixed positioning)
bottom: pageYOffset - top - height + innerHeight,
left: left - pageXOffset,
right: pageXOffset - left - width + innerWidth
var doc = this.target.ownerDocument;
var win = doc.defaultView;
var scrollbarSize = undefined;
if (win.innerHeight > doc.documentElement.clientHeight) {
scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
next.viewport.bottom -= scrollbarSize.height;
if (win.innerWidth > doc.documentElement.clientWidth) {
scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
next.viewport.right -= scrollbarSize.width;
if (['', 'static'].indexOf(doc.body.style.position) === -1 || ['', 'static'].indexOf(doc.body.parentElement.style.position) === -1) {
// Absolute positioning in the body will be relative to the page, not the 'initial containing block'
next.page.bottom = doc.body.scrollHeight - top - height;
next.page.right = doc.body.scrollWidth - left - width;
if (typeof this.options.optimizations !== 'undefined' && this.options.optimizations.moveElement !== false && !(typeof this.targetModifier !== 'undefined')) {
var offsetParent = _this7.cache('target-offsetparent', function () {
return getOffsetParent(_this7.target);
var offsetPosition = _this7.cache('target-offsetparent-bounds', function () {
return getBounds(offsetParent);
var offsetParentStyle = getComputedStyle(offsetParent);
var offsetParentSize = offsetPosition;
['Top', 'Left', 'Bottom', 'Right'].forEach(function (side) {
offsetBorder[side.toLowerCase()] = parseFloat(offsetParentStyle['border' + side + 'Width']);
offsetPosition.right = doc.body.scrollWidth - offsetPosition.left - offsetParentSize.width + offsetBorder.right;
offsetPosition.bottom = doc.body.scrollHeight - offsetPosition.top - offsetParentSize.height + offsetBorder.bottom;
if (next.page.top >= offsetPosition.top + offsetBorder.top && next.page.bottom >= offsetPosition.bottom) {
if (next.page.left >= offsetPosition.left + offsetBorder.left && next.page.right >= offsetPosition.right) {
// We're within the visible part of the target's scroll parent
var scrollTop = offsetParent.scrollTop;
var scrollLeft = offsetParent.scrollLeft;
// It's position relative to the target's offset parent (absolute positioning when
// the element is moved to be a child of the target's offset parent).
top: next.page.top - offsetPosition.top + scrollTop - offsetBorder.top,
left: next.page.left - offsetPosition.left + scrollLeft - offsetBorder.left
// We could also travel up the DOM and try each containing context, rather than only
// looking at the body, but we're gonna get diminishing returns.
this.history.unshift(next);
if (this.history.length > 3) {
value: function move(pos) {
if (!(typeof this.element.parentNode !== 'undefined')) {
for (var key in pos[type]) {
for (var i = 0; i < this.history.length; ++i) {
var point = this.history[i];
if (typeof point[type] !== 'undefined' && !within(point[type][key], pos[type][key])) {
var css = { top: '', left: '', right: '', bottom: '' };
var transcribe = function transcribe(_same, _pos) {
var hasOptimizations = typeof _this8.options.optimizations !== 'undefined';
var gpu = hasOptimizations ? _this8.options.optimizations.gpu : null;
if (typeof window.devicePixelRatio === 'number' && devicePixelRatio % 1 === 0) {
xPos = Math.round(xPos * devicePixelRatio) / devicePixelRatio;
yPos = Math.round(yPos * devicePixelRatio) / devicePixelRatio;
css[transformKey] = 'translateX(' + xPos + 'px) translateY(' + yPos + 'px)';
if (transformKey !== 'msTransform') {
// The Z transform will keep this in the GPU (faster, and prevents artifacts),
// but IE9 doesn't support 3d transforms and will choke.
css[transformKey] += " translateZ(0)";
css.top = _pos.top + 'px';
css.bottom = _pos.bottom + 'px';
css.left = _pos.left + 'px';
css.right = _pos.right + 'px';
if ((same.page.top || same.page.bottom) && (same.page.left || same.page.right)) {
css.position = 'absolute';
transcribe(same.page, pos.page);
} else if ((same.viewport.top || same.viewport.bottom) && (same.viewport.left || same.viewport.right)) {
transcribe(same.viewport, pos.viewport);
} else if (typeof same.offset !== 'undefined' && same.offset.top && same.offset.left) {
css.position = 'absolute';
var offsetParent = _this8.cache('target-offsetparent', function () {
return getOffsetParent(_this8.target);
if (getOffsetParent(_this8.element) !== offsetParent) {
_this8.element.parentNode.removeChild(_this8.element);
offsetParent.appendChild(_this8.element);
transcribe(same.offset, pos.offset);
css.position = 'absolute';
transcribe({ top: true, left: true }, pos.page);
if (this.options.bodyElement) {
if (this.element.parentNode !== this.options.bodyElement) {
this.options.bodyElement.appendChild(this.element);
var isFullscreenElement = function isFullscreenElement(e) {
var fe = d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement;
var offsetParentIsBody = true;
var currentNode = this.element.parentNode;
while (currentNode && currentNode.nodeType === 1 && currentNode.tagName !== 'BODY' && !isFullscreenElement(currentNode)) {
if (getComputedStyle(currentNode).position !== 'static') {
offsetParentIsBody = false;
currentNode = currentNode.parentNode;
if (!offsetParentIsBody) {
this.element.parentNode.removeChild(this.element);
this.element.ownerDocument.body.appendChild(this.element);
// Any css change will trigger a repaint, so let's avoid one if nothing changed
var elVal = this.element.style[key];
extend(_this8.element.style, writeCSS);
_this8.trigger('repositioned');
TetherClass.modules = [];
TetherBase.position = position;
var Tether = extend(TetherClass, TetherBase);
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var _TetherBase$Utils = TetherBase.Utils;
var getBounds = _TetherBase$Utils.getBounds;
var extend = _TetherBase$Utils.extend;
var updateClasses = _TetherBase$Utils.updateClasses;
var defer = _TetherBase$Utils.defer;
var BOUNDS_FORMAT = ['left', 'top', 'right', 'bottom'];
function getBoundingRect(tether, to) {
if (to === 'scrollParent') {
to = tether.scrollParents[0];
} else if (to === 'window') {
to = [pageXOffset, pageYOffset, innerWidth + pageXOffset, innerHeight + pageYOffset];
if (typeof to.nodeType !== 'undefined') {
var size = getBounds(to);
var style = getComputedStyle(to);
to = [pos.left, pos.top, size.width + pos.left, size.height + pos.top];
// Account any parent Frames scroll offset
if (node.ownerDocument !== document) {
var win = node.ownerDocument.defaultView;
to[0] += win.pageXOffset;
to[1] += win.pageYOffset;
to[2] += win.pageXOffset;
to[3] += win.pageYOffset;
BOUNDS_FORMAT.forEach(function (side, i) {
side = side[0].toUpperCase() + side.substr(1);
if (side === 'Top' || side === 'Left') {
to[i] += parseFloat(style['border' + side + 'Width']);
to[i] -= parseFloat(style['border' + side + 'Width']);
TetherBase.modules.push({
position: function position(_ref) {
var targetAttachment = _ref.targetAttachment;
if (!this.options.constraints) {
var _cache = this.cache('element-bounds', function () {
return getBounds(_this.element);
var height = _cache.height;
var width = _cache.width;
if (width === 0 && height === 0 && typeof this.lastSize !== 'undefined') {
var _lastSize = this.lastSize;
// Handle the item getting hidden as a result of our positioning without glitching
// the classes in and out
height = _lastSize.height;
var targetSize = this.cache('target-bounds', function () {
return _this.getTargetBounds();
var targetHeight = targetSize.height;
var targetWidth = targetSize.width;
var allClasses = [this.getClass('pinned'), this.getClass('out-of-bounds')];
this.options.constraints.forEach(function (constraint) {
var outOfBoundsClass = constraint.outOfBoundsClass;
var pinnedClass = constraint.pinnedClass;
allClasses.push(outOfBoundsClass);
allClasses.push(pinnedClass);
allClasses.forEach(function (cls) {
['left', 'top', 'right', 'bottom'].forEach(function (side) {
allClasses.push(cls + '-' + side);
var tAttachment = extend({}, targetAttachment);
var eAttachment = extend({}, this.attachment);
this.options.constraints.forEach(function (constraint) {
var attachment = constraint.attachment;
var pin = constraint.pin;
if (typeof attachment === 'undefined') {
var changeAttachX = undefined,
changeAttachY = undefined;
if (attachment.indexOf(' ') >= 0) {
var _attachment$split = attachment.split(' ');
var _attachment$split2 = _slicedToArray(_attachment$split, 2);
changeAttachY = _attachment$split2[0];
changeAttachX = _attachment$split2[1];
changeAttachX = changeAttachY = attachment;
var bounds = getBoundingRect(_this, to);
if (changeAttachY === 'target' || changeAttachY === 'both') {
if (top < bounds[1] && tAttachment.top === 'top') {
tAttachment.top = 'bottom';
if (top + height > bounds[3] && tAttachment.top === 'bottom') {
if (changeAttachY === 'together') {
if (tAttachment.top === 'top') {
if (eAttachment.top === 'bottom' && top < bounds[1]) {
tAttachment.top = 'bottom';
} else if (eAttachment.top === 'top' && top + height > bounds[3] && top - (height - targetHeight) >= bounds[1]) {
top -= height - targetHeight;
tAttachment.top = 'bottom';
eAttachment.top = 'bottom';
if (tAttachment.top === 'bottom') {
if (eAttachment.top === 'top' && top + height > bounds[3]) {
eAttachment.top = 'bottom';
} else if (eAttachment.top === 'bottom' && top < bounds[1] && top + (height * 2 - targetHeight) <= bounds[3]) {
top += height - targetHeight;
if (tAttachment.top === 'middle') {
if (top + height > bounds[3] && eAttachment.top === 'top') {
eAttachment.top = 'bottom';
} else if (top < bounds[1] && eAttachment.top === 'bottom') {