From 262dbdc89323790a4d8e87a6aeb9fa21b0b24b37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Filo?= Date: Fri, 17 Nov 2017 16:48:33 +0100 Subject: [PATCH] fix(uiGridAutoResize): Replaced timeout checker with watcher (#6470) * fix(uiGridAutoResize): Replaced timeout checker for grid width and height change with watcher * test(ui.grid.autoResizeGrid): Added some new test for auto-resize-grid --- .../auto-resize-grid/js/auto-resize.js | 63 +++----- .../test/auto-resize-grid.spec.js | 149 +++++++++++++++++- 2 files changed, 162 insertions(+), 50 deletions(-) diff --git a/src/features/auto-resize-grid/js/auto-resize.js b/src/features/auto-resize-grid/js/auto-resize.js index 164122f18c..4d5b1e144f 100644 --- a/src/features/auto-resize-grid/js/auto-resize.js +++ b/src/features/auto-resize-grid/js/auto-resize.js @@ -14,55 +14,30 @@ */ var module = angular.module('ui.grid.autoResize', ['ui.grid']); - - module.directive('uiGridAutoResize', ['$timeout', 'gridUtil', function ($timeout, gridUtil) { + module.directive('uiGridAutoResize', ['gridUtil', function(gridUtil) { return { require: 'uiGrid', scope: false, - link: function ($scope, $elm, $attrs, uiGridCtrl) { - var prevGridWidth, prevGridHeight; - - function getDimensions() { - prevGridHeight = gridUtil.elementHeight($elm); - prevGridWidth = gridUtil.elementWidth($elm); - } - - // Initialize the dimensions - getDimensions(); - - var resizeTimeoutId; - function startTimeout() { - clearTimeout(resizeTimeoutId); - - resizeTimeoutId = setTimeout(function () { - var newGridHeight = gridUtil.elementHeight($elm); - var newGridWidth = gridUtil.elementWidth($elm); - - if (newGridHeight !== prevGridHeight || newGridWidth !== prevGridWidth) { - uiGridCtrl.grid.gridHeight = newGridHeight; - uiGridCtrl.grid.gridWidth = newGridWidth; - uiGridCtrl.grid.api.core.raise.gridDimensionChanged(prevGridHeight, prevGridWidth, newGridHeight, newGridWidth); - - $scope.$apply(function () { - uiGridCtrl.grid.refresh() - .then(function () { - getDimensions(); - - startTimeout(); - }); - }); - } - else { - startTimeout(); - } - }, 250); - } - - startTimeout(); + link: function($scope, $elm, $attrs, uiGridCtrl) { + + $scope.$watch(function() { + return $elm[0].clientWidth; + }, function(newVal, oldVal) { + if (newVal !== oldVal) { + uiGridCtrl.grid.gridWidth = newVal; + uiGridCtrl.grid.refresh(); + } + }); - $scope.$on('$destroy', function() { - clearTimeout(resizeTimeoutId); + $scope.$watch(function() { + return $elm[0].clientHeight; + }, function(newVal, oldVal) { + if (newVal !== oldVal) { + uiGridCtrl.grid.gridHeight = newVal; + uiGridCtrl.grid.refresh(); + } }); + } }; }]); diff --git a/src/features/auto-resize-grid/test/auto-resize-grid.spec.js b/src/features/auto-resize-grid/test/auto-resize-grid.spec.js index 39926dae8d..71450d3bb9 100644 --- a/src/features/auto-resize-grid/test/auto-resize-grid.spec.js +++ b/src/features/auto-resize-grid/test/auto-resize-grid.spec.js @@ -39,11 +39,10 @@ describe('ui.grid.autoResizeGrid', function () { gridElm = null; }); - describe('on grid element dimension change', function () { + describe('on grid element width change to greater', function () { var w; beforeEach(function (done) { w = $(viewportElm).width(); - var h = $(viewportElm).height(); $(gridElm).width(600); $scope.$digest(); @@ -55,15 +54,60 @@ describe('ui.grid.autoResizeGrid', function () { }); }); - // Rebuild the grid as having 100% width and being in a 400px wide container, then change the container width to 500px and make sure it adjusts - describe('on grid container dimension change', function () { + describe('on grid element height change to greater', function () { + var h; + beforeEach(function (done) { + h = $(viewportElm).height(); + + $(gridElm).height(400); + $scope.$digest(); + setTimeout(done, 300); + }); + it('adjusts the grid viewport size', function () { + var newH = $(viewportElm).height(); + expect(newH).toBeGreaterThan(h); + }); + }); + + describe('on grid element width change to smaller', function () { + var w; + beforeEach(function (done) { + w = $(viewportElm).width(); + + $(gridElm).width(400); + $scope.$digest(); + setTimeout(done, 300); + }); + it('adjusts the grid viewport size', function () { + var newW = $(viewportElm).width(); + expect(newW).toBeLessThan(w); + }); + }); + + describe('on grid element height change to smaller', function () { + var h; + beforeEach(function (done) { + h = $(viewportElm).height(); + + $(gridElm).height(200); + $scope.$digest(); + setTimeout(done, 300); + }); + it('adjusts the grid viewport size', function () { + var newH = $(viewportElm).height(); + expect(newH).toBeLessThan(h); + }); + }); + + // Rebuild the grid as having 100% width and 100% height and being in a 400px wide and 300px height container, then change the container width to 500px and make sure it adjusts + describe('on grid container width change to greater', function () { var gridContainerElm; var w; beforeEach(function (done) { angular.element(gridElm).remove(); - gridContainerElm = angular.element('
'); + gridContainerElm = angular.element('
'); document.body.appendChild(gridContainerElm[0]); $compile(gridContainerElm)($scope); $scope.$digest(); @@ -73,7 +117,6 @@ describe('ui.grid.autoResizeGrid', function () { viewportElm = $(gridElm).find('.ui-grid-viewport'); w = $(viewportElm).width(); - var h = $(viewportElm).height(); $(gridContainerElm).width(500); $scope.$digest(); @@ -87,4 +130,98 @@ describe('ui.grid.autoResizeGrid', function () { }); }); + // Rebuild the grid as having 100% width and 100% height and being in a 400px wide and 300px height container, then change the container height to 400px and make sure it adjusts + describe('on grid container height change to greater', function () { + var gridContainerElm; + var h; + + beforeEach(function (done) { + angular.element(gridElm).remove(); + + gridContainerElm = angular.element('
'); + document.body.appendChild(gridContainerElm[0]); + $compile(gridContainerElm)($scope); + $scope.$digest(); + + gridElm = gridContainerElm.find('[ui-grid]'); + + viewportElm = $(gridElm).find('.ui-grid-viewport'); + + h = $(viewportElm).height(); + + $(gridContainerElm).height(400); + $scope.$digest(); + setTimeout(done, 300); + }); + + it('adjusts the grid viewport size', function() { + var newH = $(viewportElm).width(); + + expect(newH).toBeGreaterThan(h); + }); + }); + + + // Rebuild the grid as having 100% width and 100% height and being in a 400px wide and 300px height container, then change the container width to 300px and make sure it adjusts + describe('on grid container width change to smaller', function () { + var gridContainerElm; + var w; + + beforeEach(function (done) { + angular.element(gridElm).remove(); + + gridContainerElm = angular.element('
'); + document.body.appendChild(gridContainerElm[0]); + $compile(gridContainerElm)($scope); + $scope.$digest(); + + gridElm = gridContainerElm.find('[ui-grid]'); + + viewportElm = $(gridElm).find('.ui-grid-viewport'); + + w = $(viewportElm).width(); + + $(gridContainerElm).width(300); + $scope.$digest(); + setTimeout(done, 300); + }); + + it('adjusts the grid viewport size', function() { + var newW = $(viewportElm).width(); + + expect(newW).toBeLessThan(w); + }); + }); + + // Rebuild the grid as having 100% width and 100% height and being in a 400px wide and 300px height container, then change the container height to 200px and make sure it adjusts + describe('on grid container height change to smaller', function () { + var gridContainerElm; + var h; + + beforeEach(function (done) { + angular.element(gridElm).remove(); + + gridContainerElm = angular.element('
'); + document.body.appendChild(gridContainerElm[0]); + $compile(gridContainerElm)($scope); + $scope.$digest(); + + gridElm = gridContainerElm.find('[ui-grid]'); + + viewportElm = $(gridElm).find('.ui-grid-viewport'); + + h = $(viewportElm).height(); + + $(gridContainerElm).height(200); + $scope.$digest(); + setTimeout(done, 300); + }); + + it('adjusts the grid viewport size', function() { + var newH = $(viewportElm).height(); + + expect(newH).toBeLessThan(h); + }); + }); + });