diff --git a/misc/demo/modal.html b/misc/demo/modal.html new file mode 100644 index 0000000000..60ebcc34ad --- /dev/null +++ b/misc/demo/modal.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + diff --git a/src/js/core/directives/ui-grid.js b/src/js/core/directives/ui-grid.js index a6cf821597..1cbddbe89f 100644 --- a/src/js/core/directives/ui-grid.js +++ b/src/js/core/directives/ui-grid.js @@ -160,124 +160,148 @@ */ -angular.module('ui.grid').directive('uiGrid', - [ - '$compile', - '$templateCache', - 'gridUtil', - '$window', - 'uiGridConstants', - function( - $compile, - $templateCache, - gridUtil, - $window, - uiGridConstants - ) { +angular.module('ui.grid').directive('uiGrid', uiGridDirective); + +uiGridDirective.$inject = ['$compile', '$templateCache', '$timeout', '$window', 'gridUtil', 'uiGridConstants']; +function uiGridDirective($compile, $templateCache, $timeout, $window, gridUtil, uiGridConstants) { + return { + templateUrl: 'ui-grid/ui-grid', + scope: { + uiGrid: '=' + }, + replace: true, + transclude: true, + controller: 'uiGridController', + compile: function () { return { - templateUrl: 'ui-grid/ui-grid', - scope: { - uiGrid: '=' - }, - replace: true, - transclude: true, - controller: 'uiGridController', - compile: function () { - return { - post: function ($scope, $elm, $attrs, uiGridCtrl) { - // gridUtil.logDebug('ui-grid postlink'); - - var grid = uiGridCtrl.grid; - - // Initialize scrollbars (TODO: move to controller??) - uiGridCtrl.scrollbars = []; - - //todo: assume it is ok to communicate that rendering is complete?? - grid.renderingComplete(); - - grid.element = $elm; - - grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); - - // Default canvasWidth to the grid width, in case we don't get any column definitions to calculate it from - grid.canvasWidth = uiGridCtrl.grid.gridWidth; - - grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); - - // If the grid isn't tall enough to fit a single row, it's kind of useless. Resize it to fit a minimum number of rows - if (grid.gridHeight < grid.options.rowHeight && grid.options.enableMinHeightCheck) { - // Figure out the new height - var contentHeight = grid.options.minRowsToShow * grid.options.rowHeight; - var headerHeight = grid.options.showHeader ? grid.options.headerRowHeight : 0; - var footerHeight = grid.calcFooterHeight(); - - var scrollbarHeight = 0; - if (grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.ALWAYS) { - scrollbarHeight = gridUtil.getScrollbarWidth(); - } + post: function ($scope, $elm, $attrs, uiGridCtrl) { + var grid = uiGridCtrl.grid; + // Initialize scrollbars (TODO: move to controller??) + uiGridCtrl.scrollbars = []; + grid.element = $elm; - var maxNumberOfFilters = 0; - // Calculates the maximum number of filters in the columns - angular.forEach(grid.options.columnDefs, function(col) { - if (col.hasOwnProperty('filter')) { - if (maxNumberOfFilters < 1) { - maxNumberOfFilters = 1; - } - } - else if (col.hasOwnProperty('filters')) { - if (maxNumberOfFilters < col.filters.length) { - maxNumberOfFilters = col.filters.length; - } - } - }); - var filterHeight = maxNumberOfFilters * headerHeight; - var newHeight = headerHeight + contentHeight + footerHeight + scrollbarHeight + filterHeight; + // See if the grid has a rendered width, if not, wait a bit and try again + var sizeCheckInterval = 100; // ms + var maxSizeChecks = 20; // 2 seconds total + var sizeChecks = 0; - $elm.css('height', newHeight + 'px'); + // Setup (event listeners) the grid + setup(); - grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); - } + // And initialize it + init(); - // Run initial canvas refresh - grid.refreshCanvas(); + // Mark rendering complete so API events can happen + grid.renderingComplete(); - //if we add a left container after render, we need to watch and react - $scope.$watch(function () { return grid.hasLeftContainer();}, function (newValue, oldValue) { - if (newValue === oldValue) { - return; - } - grid.refreshCanvas(true); - }); + // If the grid doesn't have size currently, wait for a bit to see if it gets size + checkSize(); - //if we add a right container after render, we need to watch and react - $scope.$watch(function () { return grid.hasRightContainer();}, function (newValue, oldValue) { - if (newValue === oldValue) { - return; - } - grid.refreshCanvas(true); - }); + /*-- Methods --*/ + function checkSize() { + // If the grid has no width and we haven't checked more than times, check again in milliseconds + if ($elm[0].offsetWidth <= 0 && sizeChecks < maxSizeChecks) { + setTimeout(checkSize, sizeCheckInterval); + sizeChecks++; + } + else { + $timeout(init); + } + } - // Resize the grid on window resize events - function gridResize($event) { - grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); - grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); + // Setup event listeners and watchers + function setup() { + // Bind to window resize events + angular.element($window).on('resize', gridResize); - grid.refreshCanvas(true); + // Unbind from window resize events when the grid is destroyed + $elm.on('$destroy', function () { + angular.element($window).off('resize', gridResize); + }); + + // If we add a left container after render, we need to watch and react + $scope.$watch(function () { return grid.hasLeftContainer();}, function (newValue, oldValue) { + if (newValue === oldValue) { + return; } + grid.refreshCanvas(true); + }); - angular.element($window).on('resize', gridResize); + // If we add a right container after render, we need to watch and react + $scope.$watch(function () { return grid.hasRightContainer();}, function (newValue, oldValue) { + if (newValue === oldValue) { + return; + } + grid.refreshCanvas(true); + }); + } - // Unbind from window resize events when the grid is destroyed - $elm.on('$destroy', function () { - angular.element($window).off('resize', gridResize); - }); + // Initialize the directive + function init() { + grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); + + // Default canvasWidth to the grid width, in case we don't get any column definitions to calculate it from + grid.canvasWidth = uiGridCtrl.grid.gridWidth; + + grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); + + // If the grid isn't tall enough to fit a single row, it's kind of useless. Resize it to fit a minimum number of rows + if (grid.gridHeight < grid.options.rowHeight && grid.options.enableMinHeightCheck) { + autoAdjustHeight(); + } + + // Run initial canvas refresh + grid.refreshCanvas(true); + } + + // Set the grid's height ourselves in the case that its height would be unusably small + function autoAdjustHeight() { + // Figure out the new height + var contentHeight = grid.options.minRowsToShow * grid.options.rowHeight; + var headerHeight = grid.options.showHeader ? grid.options.headerRowHeight : 0; + var footerHeight = grid.calcFooterHeight(); + + var scrollbarHeight = 0; + if (grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.ALWAYS) { + scrollbarHeight = gridUtil.getScrollbarWidth(); } - }; + + var maxNumberOfFilters = 0; + // Calculates the maximum number of filters in the columns + angular.forEach(grid.options.columnDefs, function(col) { + if (col.hasOwnProperty('filter')) { + if (maxNumberOfFilters < 1) { + maxNumberOfFilters = 1; + } + } + else if (col.hasOwnProperty('filters')) { + if (maxNumberOfFilters < col.filters.length) { + maxNumberOfFilters = col.filters.length; + } + } + }); + var filterHeight = maxNumberOfFilters * headerHeight; + + var newHeight = headerHeight + contentHeight + footerHeight + scrollbarHeight + filterHeight; + + $elm.css('height', newHeight + 'px'); + + grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); + } + + // Resize the grid on window resize events + function gridResize($event) { + grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); + grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); + + grid.refreshCanvas(true); + } } }; } - ]); + }; +} })(); diff --git a/src/js/core/directives/ui-pinned-container.js b/src/js/core/directives/ui-pinned-container.js index 7d3bd5859d..343ea7ab3b 100644 --- a/src/js/core/directives/ui-pinned-container.js +++ b/src/js/core/directives/ui-pinned-container.js @@ -33,7 +33,7 @@ } return width; - } + } } function updateContainerDimensions() { diff --git a/src/js/core/services/ui-grid-util.js b/src/js/core/services/ui-grid-util.js index 2cdfb02d5a..051a2aa2e2 100644 --- a/src/js/core/services/ui-grid-util.js +++ b/src/js/core/services/ui-grid-util.js @@ -106,7 +106,7 @@ function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) { function getWidthOrHeight( elem, name, extra ) { // Start with offset property, which is equivalent to the border-box value var valueIsBorderBox = true, - val, + val, // = name === 'width' ? elem.offsetWidth : elem.offsetHeight, styles = getStyles(elem), isBorderBox = styles['boxSizing'] === 'border-box'; @@ -173,6 +173,8 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC function ($log, $window, $document, $http, $templateCache, $timeout, $injector, $q, $interpolate, uiGridConstants) { var s = { + augmentWidthOrHeight: augmentWidthOrHeight, + getStyles: getStyles, /** @@ -786,8 +788,8 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC if (e) { var styles = getStyles(e); return e.offsetWidth === 0 && rdisplayswap.test(styles.display) ? - s.fakeElement(e, cssShow, function(newElm) { - return getWidthOrHeight( newElm, name, extra ); + s.swap(e, cssShow, function() { + return getWidthOrHeight(e, name, extra ); }) : getWidthOrHeight( e, name, extra ); } diff --git a/src/less/header.less b/src/less/header.less index 8afba48bd8..d9c4c4cfde 100644 --- a/src/less/header.less +++ b/src/less/header.less @@ -7,7 +7,7 @@ .ui-grid-header { border-bottom: 1px solid @borderColor; - box-sizing: content-box; + box-sizing: border-box; } .ui-grid-top-panel { diff --git a/src/less/menu.less b/src/less/menu.less index ce68d2df38..3d67978b35 100644 --- a/src/less/menu.less +++ b/src/less/menu.less @@ -28,7 +28,7 @@ overflow: hidden; padding: 0 10px 20px 10px; cursor: pointer; - box-sizing: content-box; + box-sizing: border-box; } .ui-grid-menu .ui-grid-menu-inner { diff --git a/test/unit/core/services/ui-grid-util.spec.js b/test/unit/core/services/ui-grid-util.spec.js index 2f3cdf5086..d2b595cb00 100644 --- a/test/unit/core/services/ui-grid-util.spec.js +++ b/test/unit/core/services/ui-grid-util.spec.js @@ -199,7 +199,8 @@ describe('ui.grid.utilService', function() { expect(w).toEqual(300); }); - it('should work with hidden element', function() { + // Width is no longer calculated for hidden elements + xit('should work with hidden element', function() { angular.element(elm).remove(); elm = document.createElement('div');