Skip to content

Commit

Permalink
fix(uiGridAutoResize): Replaced timeout checker with watcher (#6470)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@tfilo @mportuga
tfilo authored and mportuga committed Nov 17, 2017
1 parent 183d816 commit 262dbdc
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 50 deletions.
63 changes: 19 additions & 44 deletions src/features/auto-resize-grid/js/auto-resize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});

}
};
}]);
Expand Down
149 changes: 143 additions & 6 deletions src/features/auto-resize-grid/test/auto-resize-grid.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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('<div style="width: 400px"><div style="width: 100%; height: 300px" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
gridContainerElm = angular.element('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
document.body.appendChild(gridContainerElm[0]);
$compile(gridContainerElm)($scope);
$scope.$digest();
Expand All @@ -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();
Expand All @@ -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('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
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('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
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('<div style="width: 400px; height: 300px"><div style="width: 100%; height: 100%" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
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);
});
});

});

0 comments on commit 262dbdc

Please sign in to comment.