1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00

append dropdown menus to body

This commit is contained in:
Kyle Spearrin
2017-04-14 22:49:51 -04:00
parent ff4e76b723
commit 8d6cbe8e1e
7 changed files with 112 additions and 19 deletions

View File

@@ -51,4 +51,97 @@ angular
$scope.addFolder = function () {
$scope.$broadcast('vaultAddFolder');
};
// Append dropdown menus to body
var bodyScrollbarWidth;
var bodyDropdownMenu;
var dropdownHelpers = {
scrollParent: function (elem, includeHidden, includeSelf) {
var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
var documentEl = $(document).documentElement;
var elemStyle = window.getComputedStyle(elem);
if (includeSelf && overflowRegex.test(elemStyle.overflow + elemStyle.overflowY + elemStyle.overflowX)) {
return elem;
}
var excludeStatic = elemStyle.position === 'absolute';
var scrollParent = elem.parentElement || documentEl;
if (scrollParent === documentEl || elemStyle.position === 'fixed') {
return documentEl;
}
while (scrollParent.parentElement && scrollParent !== documentEl) {
var spStyle = window.getComputedStyle(scrollParent);
if (excludeStatic && spStyle.position !== 'static') {
excludeStatic = false;
}
if (!excludeStatic && overflowRegex.test(spStyle.overflow + spStyle.overflowY + spStyle.overflowX)) {
break;
}
scrollParent = scrollParent.parentElement;
}
return scrollParent;
},
scrollbarWidth: function () {
if (!bodyScrollbarWidth) {
var bodyElem = $('body');
bodyElem.addClass('bit-position-body-scrollbar-measure');
bodyScrollbarWidth = window.innerWidth - bodyElem[0].clientWidth;
bodyScrollbarWidth = isFinite(bodyScrollbarWidth) ? bodyScrollbarWidth : 0;
bodyElem.removeClass('bit-position-body-scrollbar-measure');
}
return bodyScrollbarWidth;
},
scrollbarPadding: function (elem) {
elem = elem[0];
var scrollParent = dropdownHelpers.scrollParent(elem, false, true);
var scrollbarWidth = dropdownHelpers.scrollbarWidth();
return {
scrollbarWidth: scrollbarWidth,
widthOverflow: scrollParent.scrollWidth > scrollParent.clientWidth,
heightOverflow: scrollParent.scrollHeight > scrollParent.clientHeight
};
}
};
$('.dropdown-menu-body').on('show.bs.dropdown', function (e) {
bodyScrollbarWidth = $(e.target).find('.dropdown-menu');
var body = $('body');
body.append(bodyScrollbarWidth.detach());
var eOffset = $(e.target).offset();
var css = {
display: 'block',
top: eOffset.top + $(e.target).outerHeight()
};
if (bodyScrollbarWidth.hasClass('dropdown-menu-right')) {
var scrollbarPadding = dropdownHelpers.scrollbarPadding(body);
var scrollbarWidth = 0;
if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
scrollbarWidth = scrollbarPadding.scrollbarWidth;
}
css.right = window.innerWidth - scrollbarWidth -
(eOffset.left + $(e.target).prop('offsetWidth')) + 'px';
css.left = 'auto';
}
else {
css.left = eOffset.left + 'px';
css.right = 'auto';
}
bodyScrollbarWidth.css(css);
});
$('.dropdown-menu-body').on('hide.bs.dropdown', function (e) {
$(e.target).append(bodyScrollbarWidth.detach());
bodyScrollbarWidth.hide();
});
});