From 4bb178ac5b8f37353580cadee58779847fc71d9d Mon Sep 17 00:00:00 2001 From: robjacobs Date: Wed, 24 Feb 2016 14:42:53 -0500 Subject: [PATCH] fix(position): move inline styles to a class - Move all inline styles supporting the auto position and flicker suppression to a class. - Refine how placement classes get applied to the tooltip Closes #5535 Fixes #5470 --- src/datepicker/datepicker.css | 3 --- src/datepicker/datepicker.js | 7 +++++-- src/position/position.css | 15 +++++++++++++++ src/position/position.js | 2 +- src/tooltip/tooltip.css | 4 ++++ src/tooltip/tooltip.js | 29 ++++++++++++++++++----------- template/datepicker/popup.html | 2 +- 7 files changed, 44 insertions(+), 18 deletions(-) create mode 100644 src/position/position.css diff --git a/src/datepicker/datepicker.css b/src/datepicker/datepicker.css index 64c7cc5c62..fcb0f36907 100644 --- a/src/datepicker/datepicker.css +++ b/src/datepicker/datepicker.css @@ -9,10 +9,7 @@ .uib-datepicker-popup.dropdown-menu { display: block; float: none; - visibility: hidden; margin: 0; - top: -9999px; - left: -9999px; } .uib-button-bar { diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index d533b6ddce..5f92e61d8d 100644 --- a/src/datepicker/datepicker.js +++ b/src/datepicker/datepicker.js @@ -1207,10 +1207,13 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ function positionPopup() { if ($scope.isOpen) { - var dpElement = $popup[0].querySelector('.uib-datepicker-popup'); + var dpElement = angular.element($popup[0].querySelector('.uib-datepicker-popup')); var placement = $attrs.popupPlacement ? $attrs.popupPlacement : datepickerPopupConfig.placement; var position = $position.positionElements($element, dpElement, placement, appendToBody); - angular.element(dpElement).css({top: position.top + 'px', left: position.left + 'px', visibility: 'visible'}); + dpElement.css({top: position.top + 'px', left: position.left + 'px'}); + if (dpElement.hasClass('uib-position-measure')) { + dpElement.removeClass('uib-position-measure'); + } } } diff --git a/src/position/position.css b/src/position/position.css new file mode 100644 index 0000000000..caf5ea17a4 --- /dev/null +++ b/src/position/position.css @@ -0,0 +1,15 @@ +.uib-position-measure { + display: block !important; + visibility: hidden !important; + position: absolute !important; + top: -9999px !important; + left: -9999px !important; +} + +.uib-position-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} \ No newline at end of file diff --git a/src/position/position.js b/src/position/position.js index 282ee78489..137270d926 100644 --- a/src/position/position.js +++ b/src/position/position.js @@ -80,7 +80,7 @@ angular.module('ui.bootstrap.position', []) */ scrollbarWidth: function() { if (angular.isUndefined(SCROLLBAR_WIDTH)) { - var scrollElem = angular.element('
'); + var scrollElem = angular.element('
'); $document.find('body').append(scrollElem); SCROLLBAR_WIDTH = scrollElem[0].offsetWidth - scrollElem[0].clientWidth; SCROLLBAR_WIDTH = isFinite(SCROLLBAR_WIDTH) ? SCROLLBAR_WIDTH : 0; diff --git a/src/tooltip/tooltip.css b/src/tooltip/tooltip.css index 7741d6938f..762e6b85f2 100644 --- a/src/tooltip/tooltip.css +++ b/src/tooltip/tooltip.css @@ -19,4 +19,8 @@ left: auto; right: auto; margin: 0; +} + +[uib-popover-popup].popover { + display: block !important; } \ No newline at end of file diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 24d1befcb3..ecd41dcf79 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -131,7 +131,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s 'animation="animation" ' + 'is-open="isOpen"' + 'origin-scope="origScope" ' + - 'style="visibility: hidden; display: block; top: -9999px; left: -9999px;"' + + 'class="uib-position-measure"' + '>' + ''; @@ -162,23 +162,29 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s if (!positionTimeout) { positionTimeout = $timeout(function() { - // Reset the positioning. - tooltip.css({ top: 0, left: 0 }); - - // Now set the calculated positioning. var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody); - tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px', visibility: 'visible' }); + tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' }); - if (ttPosition.placement !== lastPlacement) { + if (!tooltip.hasClass(ttPosition.placement.split('-')[0])) { tooltip.removeClass(lastPlacement.split('-')[0]); tooltip.addClass(ttPosition.placement.split('-')[0]); + } + if (!tooltip.hasClass(options.placementClassPrefix + ttPosition.placement)) { tooltip.removeClass(options.placementClassPrefix + lastPlacement); tooltip.addClass(options.placementClassPrefix + ttPosition.placement); + } + // first time through tt element will have the + // uib-position-measure class or if the placement + // has changed we need to position the arrow. + if (tooltip.hasClass('uib-position-measure')) { + $position.positionArrow(tooltip, ttPosition.placement); + tooltip.removeClass('uib-position-measure'); + } else if (lastPlacement !== ttPosition.placement) { $position.positionArrow(tooltip, ttPosition.placement); - lastPlacement = ttPosition.placement; } + lastPlacement = ttPosition.placement; positionTimeout = null; }, 0, false); @@ -353,7 +359,8 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s ttScope.popupClass = attrs[prefix + 'Class']; ttScope.placement = angular.isDefined(attrs[prefix + 'Placement']) ? attrs[prefix + 'Placement'] : options.placement; - lastPlacement = ''; + var placement = $position.parsePlacement(ttScope.placement); + lastPlacement = placement[1] ? placement[0] + '-' + placement[1] : placement[0]; var delay = parseInt(attrs[prefix + 'PopupDelay'], 10); var closeDelay = parseInt(attrs[prefix + 'PopupCloseDelay'], 10); @@ -443,6 +450,8 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s observers.push( attrs.$observe(prefix + 'Placement', function(val) { ttScope.placement = val ? val : options.placement; + var placement = $position.parsePlacement(ttScope.placement); + lastPlacement = placement[1] ? placement[0] + '-' + placement[1] : placement[0]; if (ttScope.isOpen) { positionTooltip(); } @@ -631,8 +640,6 @@ function ($animate, $sce, $compile, $templateRequest) { // // in TWBS, so we need the primary position. var position = $uibPosition.parsePlacement(scope.placement); element.addClass(position[0]); - } else { - element.addClass('top'); } if (scope.popupClass) { diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html index d16854fdf9..0a9b73d706 100644 --- a/template/datepicker/popup.html +++ b/template/datepicker/popup.html @@ -1,5 +1,5 @@
-