/**
* This directive adds the css position fixed if the tabs fit on screen */
app.directive('fixedIfFits', function($timeout, $rootScope) {
return { restrict: 'C', link: function(scope, element) { function recalculateLayout() { $timeout(function() { var height = _(element.find('.tab-content .tab-pane').get()).map(function(el) { return angular.element(el).height(); }).concat([element[0].scrollHeight]).max() + element.offset().top + element.find('.row:first-of-type').height(); var mq = window.matchMedia('(min-width: 768px)'); if (height < $(window).height() && mq.matches) { var padding = 20; element[0].style.width = (element.width() + padding) + 'px'; element[0].style.paddingRight = padding + 'px'; var navbarHeight = '' + ($('.navbar').height() || 60) + 'px'; element[0].style.height = 'calc(100vh - ' + navbarHeight + ')'; element[0].style.paddingBottom = '30px'; element[0].style['overflow-y'] = 'auto'; element[0].style.position = 'fixed'; } else { element[0].style.width = null; element[0].style.paddingRight = null; element[0].style.height = null; element[0].style.paddingBottom = null; element[0].style['overflow-y'] = null; element[0].style.position = 'static'; } }, 100); } recalculateLayout(); $rootScope.$on('$stateChangeSuccess', recalculateLayout); } };
});