Skip to content

Commit 262dbdc

Browse files
tfilomportuga
tfilo
authored and
mportuga
committed
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
1 parent 183d816 commit 262dbdc

File tree

2 files changed

+162
-50
lines changed

2 files changed

+162
-50
lines changed

‎src/features/auto-resize-grid/js/auto-resize.js

+19-44
Original file line numberDiff line numberDiff line change
@@ -14,55 +14,30 @@
1414
*/
1515
var module = angular.module('ui.grid.autoResize', ['ui.grid']);
1616

17-
18-
module.directive('uiGridAutoResize', ['$timeout', 'gridUtil', function ($timeout, gridUtil) {
17+
module.directive('uiGridAutoResize', ['gridUtil', function(gridUtil) {
1918
return {
2019
require: 'uiGrid',
2120
scope: false,
22-
link: function ($scope, $elm, $attrs, uiGridCtrl) {
23-
var prevGridWidth, prevGridHeight;
24-
25-
function getDimensions() {
26-
prevGridHeight = gridUtil.elementHeight($elm);
27-
prevGridWidth = gridUtil.elementWidth($elm);
28-
}
29-
30-
// Initialize the dimensions
31-
getDimensions();
32-
33-
var resizeTimeoutId;
34-
function startTimeout() {
35-
clearTimeout(resizeTimeoutId);
36-
37-
resizeTimeoutId = setTimeout(function () {
38-
var newGridHeight = gridUtil.elementHeight($elm);
39-
var newGridWidth = gridUtil.elementWidth($elm);
40-
41-
if (newGridHeight !== prevGridHeight || newGridWidth !== prevGridWidth) {
42-
uiGridCtrl.grid.gridHeight = newGridHeight;
43-
uiGridCtrl.grid.gridWidth = newGridWidth;
44-
uiGridCtrl.grid.api.core.raise.gridDimensionChanged(prevGridHeight, prevGridWidth, newGridHeight, newGridWidth);
45-
46-
$scope.$apply(function () {
47-
uiGridCtrl.grid.refresh()
48-
.then(function () {
49-
getDimensions();
50-
51-
startTimeout();
52-
});
53-
});
54-
}
55-
else {
56-
startTimeout();
57-
}
58-
}, 250);
59-
}
60-
61-
startTimeout();
21+
link: function($scope, $elm, $attrs, uiGridCtrl) {
22+
23+
$scope.$watch(function() {
24+
return $elm[0].clientWidth;
25+
}, function(newVal, oldVal) {
26+
if (newVal !== oldVal) {
27+
uiGridCtrl.grid.gridWidth = newVal;
28+
uiGridCtrl.grid.refresh();
29+
}
30+
});
6231

63-
$scope.$on('$destroy', function() {
64-
clearTimeout(resizeTimeoutId);
32+
$scope.$watch(function() {
33+
return $elm[0].clientHeight;
34+
}, function(newVal, oldVal) {
35+
if (newVal !== oldVal) {
36+
uiGridCtrl.grid.gridHeight = newVal;
37+
uiGridCtrl.grid.refresh();
38+
}
6539
});
40+
6641
}
6742
};
6843
}]);

‎src/features/auto-resize-grid/test/auto-resize-grid.spec.js

+143-6
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,10 @@ describe('ui.grid.autoResizeGrid', function () {
3939
gridElm = null;
4040
});
4141

42-
describe('on grid element dimension change', function () {
42+
describe('on grid element width change to greater', function () {
4343
var w;
4444
beforeEach(function (done) {
4545
w = $(viewportElm).width();
46-
var h = $(viewportElm).height();
4746

4847
$(gridElm).width(600);
4948
$scope.$digest();
@@ -55,15 +54,60 @@ describe('ui.grid.autoResizeGrid', function () {
5554
});
5655
});
5756

58-
// 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
59-
describe('on grid container dimension change', function () {
57+
describe('on grid element height change to greater', function () {
58+
var h;
59+
beforeEach(function (done) {
60+
h = $(viewportElm).height();
61+
62+
$(gridElm).height(400);
63+
$scope.$digest();
64+
setTimeout(done, 300);
65+
});
66+
it('adjusts the grid viewport size', function () {
67+
var newH = $(viewportElm).height();
68+
expect(newH).toBeGreaterThan(h);
69+
});
70+
});
71+
72+
describe('on grid element width change to smaller', function () {
73+
var w;
74+
beforeEach(function (done) {
75+
w = $(viewportElm).width();
76+
77+
$(gridElm).width(400);
78+
$scope.$digest();
79+
setTimeout(done, 300);
80+
});
81+
it('adjusts the grid viewport size', function () {
82+
var newW = $(viewportElm).width();
83+
expect(newW).toBeLessThan(w);
84+
});
85+
});
86+
87+
describe('on grid element height change to smaller', function () {
88+
var h;
89+
beforeEach(function (done) {
90+
h = $(viewportElm).height();
91+
92+
$(gridElm).height(200);
93+
$scope.$digest();
94+
setTimeout(done, 300);
95+
});
96+
it('adjusts the grid viewport size', function () {
97+
var newH = $(viewportElm).height();
98+
expect(newH).toBeLessThan(h);
99+
});
100+
});
101+
102+
// 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
103+
describe('on grid container width change to greater', function () {
60104
var gridContainerElm;
61105
var w;
62106

63107
beforeEach(function (done) {
64108
angular.element(gridElm).remove();
65109

66-
gridContainerElm = angular.element('<div style="width: 400px"><div style="width: 100%; height: 300px" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
110+
gridContainerElm = angular.element('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
67111
document.body.appendChild(gridContainerElm[0]);
68112
$compile(gridContainerElm)($scope);
69113
$scope.$digest();
@@ -73,7 +117,6 @@ describe('ui.grid.autoResizeGrid', function () {
73117
viewportElm = $(gridElm).find('.ui-grid-viewport');
74118

75119
w = $(viewportElm).width();
76-
var h = $(viewportElm).height();
77120

78121
$(gridContainerElm).width(500);
79122
$scope.$digest();
@@ -87,4 +130,98 @@ describe('ui.grid.autoResizeGrid', function () {
87130
});
88131
});
89132

133+
// 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
134+
describe('on grid container height change to greater', function () {
135+
var gridContainerElm;
136+
var h;
137+
138+
beforeEach(function (done) {
139+
angular.element(gridElm).remove();
140+
141+
gridContainerElm = angular.element('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
142+
document.body.appendChild(gridContainerElm[0]);
143+
$compile(gridContainerElm)($scope);
144+
$scope.$digest();
145+
146+
gridElm = gridContainerElm.find('[ui-grid]');
147+
148+
viewportElm = $(gridElm).find('.ui-grid-viewport');
149+
150+
h = $(viewportElm).height();
151+
152+
$(gridContainerElm).height(400);
153+
$scope.$digest();
154+
setTimeout(done, 300);
155+
});
156+
157+
it('adjusts the grid viewport size', function() {
158+
var newH = $(viewportElm).width();
159+
160+
expect(newH).toBeGreaterThan(h);
161+
});
162+
});
163+
164+
165+
// 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
166+
describe('on grid container width change to smaller', function () {
167+
var gridContainerElm;
168+
var w;
169+
170+
beforeEach(function (done) {
171+
angular.element(gridElm).remove();
172+
173+
gridContainerElm = angular.element('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
174+
document.body.appendChild(gridContainerElm[0]);
175+
$compile(gridContainerElm)($scope);
176+
$scope.$digest();
177+
178+
gridElm = gridContainerElm.find('[ui-grid]');
179+
180+
viewportElm = $(gridElm).find('.ui-grid-viewport');
181+
182+
w = $(viewportElm).width();
183+
184+
$(gridContainerElm).width(300);
185+
$scope.$digest();
186+
setTimeout(done, 300);
187+
});
188+
189+
it('adjusts the grid viewport size', function() {
190+
var newW = $(viewportElm).width();
191+
192+
expect(newW).toBeLessThan(w);
193+
});
194+
});
195+
196+
// 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
197+
describe('on grid container height change to smaller', function () {
198+
var gridContainerElm;
199+
var h;
200+
201+
beforeEach(function (done) {
202+
angular.element(gridElm).remove();
203+
204+
gridContainerElm = angular.element('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
205+
document.body.appendChild(gridContainerElm[0]);
206+
$compile(gridContainerElm)($scope);
207+
$scope.$digest();
208+
209+
gridElm = gridContainerElm.find('[ui-grid]');
210+
211+
viewportElm = $(gridElm).find('.ui-grid-viewport');
212+
213+
h = $(viewportElm).height();
214+
215+
$(gridContainerElm).height(200);
216+
$scope.$digest();
217+
setTimeout(done, 300);
218+
});
219+
220+
it('adjusts the grid viewport size', function() {
221+
var newH = $(viewportElm).height();
222+
223+
expect(newH).toBeLessThan(h);
224+
});
225+
});
226+
90227
});

0 commit comments

Comments
 (0)