Skip to content

Commit d0bdd82

Browse files
c0brac0bra
committed
feat(AutoResize): Adding auto-resize feature.
* Also made queueRefresh() return a promise so it can be chained off of * Fix: wrong function name on getRowIdentity. Would affect debugging only * Also turn tests back on!
1 parent ac0337a commit d0bdd82

File tree

6 files changed

+220
-14
lines changed

6 files changed

+220
-14
lines changed

‎Gruntfile.js

+4-13
Original file line numberDiff line numberDiff line change
@@ -320,16 +320,12 @@ module.exports = function(grunt) {
320320
tasks: ['ngtemplates']
321321
},
322322

323-
// src_test: {
324-
// files: '<%= jshint.src_test.src %>',
325-
// tasks: ['jshint:src_test', 'jasmine']
326-
// },
323+
327324
rebuild: {
328325
files: util.testFiles.unit,
329-
// NOTE(c0bra): turn back on after render containers works
330-
// tasks: ['jshint:src_test', 'jscs', 'karmangular:run', 'concat', 'uglify', 'ngdocs'],
331-
tasks: ['jshint:src_test', 'jscs', 'concat', 'uglify', 'ngdocs'],
326+
tasks: ['jshint:src_test', 'jscs', 'karmangular:run', 'concat', 'uglify', 'ngdocs'],
332327
},
328+
333329
protractor: {
334330
files: ['.tmp/doc-scenarios/**/*.spec.js', 'test/e2e/**/*.spec.js'],
335331
tasks: ['protractor-watch:auto']
@@ -546,7 +542,6 @@ module.exports = function(grunt) {
546542
grunt.registerTask('after-test', ['build']);
547543

548544
// Default task.
549-
// grunt.registerTask('default', ['clean', 'jshint', 'ngtemplates', 'karma:single', 'concat', 'uglify', 'less', 'ngdocs']);
550545
grunt.registerTask('default', ['before-test', 'test', 'after-test']);
551546

552547
// Build with no testing
@@ -562,16 +557,13 @@ module.exports = function(grunt) {
562557

563558
var tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'autotest:e2e', 'watch'];
564559
if (e2e === false) {
565-
// NOTE(c0bra): turn back on after render containers works
566-
// tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'watch'];
567-
tasks = ['before-test', 'after-test', 'connect', 'watch'];
560+
tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'watch'];
568561
}
569562

570563
grunt.task.run(tasks);
571564
});
572565

573566
// Testing tasks
574-
// grunt.registerTask('test:ci', ['clean', 'jshint', 'ngtemplates', 'karma:sauce']);
575567
grunt.registerTask('test:ci', ['clean', 'jshint', 'jscs', 'ngtemplates', 'serialsauce']);
576568
grunt.registerTask('test:docs', ['connect:testserver', 'protractor:docs']);
577569
grunt.registerTask('test:e2e', ['connect:testserver', 'protractor:singlerun']);
@@ -584,7 +576,6 @@ module.exports = function(grunt) {
584576
grunt.task.run('karma:travis');
585577
}
586578
else {
587-
// grunt.task.run(this.args.length ? 'karma:single' : 'karma:continuous');
588579
grunt.task.run('karmangular');
589580
}
590581
});

‎misc/tutorial/213_auto_resizing.ngdoc

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@ngdoc overview
2+
@name Tutorial: 213 Auto-Resizing
3+
@description
4+
5+
The auto-resize feature will enable the grid to resize itself when its container changes size.
6+
7+
8+
@example
9+
<example module="app">
10+
<file name="app.js">
11+
var app = angular.module('app', ['ui.grid', 'ui.grid.autoResize']);
12+
13+
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
14+
$scope.gridOptions = {};
15+
16+
$scope.gridOptions.columnDefs = [
17+
{ name:'id', width:50 },
18+
{ name:'name', width:100, pinnedLeft:true },
19+
{ name:'age', width:100, pinnedRight:true },
20+
{ name:'address.street', width:150 },
21+
{ name:'address.city', width:150 },
22+
{ name:'address.state', width:50 },
23+
{ name:'address.zip', width:50 },
24+
{ name:'company', width:100 },
25+
{ name:'email', width:100 },
26+
{ name:'phone', width:200 },
27+
{ name:'about', width:300 },
28+
{ name:'friends[0].name', displayName:'1st friend', width:150 },
29+
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
30+
{ name:'friends[2].name', displayName:'3rd friend', width:150 },
31+
];
32+
33+
$http.get('/data/500_complex.json')
34+
.success(function(data) {
35+
$scope.gridOptions.data = data;
36+
});
37+
38+
$scope.randomSize = function () {
39+
var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300);
40+
var newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200);
41+
42+
angular.element('.grid').css('height', newHeight + 'px');
43+
angular.element('.grid').css('width', newWidth + 'px');
44+
};
45+
}]);
46+
</file>
47+
<file name="index.html">
48+
<div ng-controller="MainCtrl">
49+
<button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button>
50+
<br>
51+
<br>
52+
<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>
53+
</div>
54+
</file>
55+
<file name="main.css">
56+
.grid {
57+
width: 500px;
58+
height: 400px;
59+
}
60+
</file>
61+
</example>

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
(function() {
2+
'use strict';
3+
/**
4+
* @ngdoc overview
5+
* @name ui.grid.autoResize
6+
*
7+
* @description
8+
*
9+
* #ui.grid.autoResize
10+
* This module provides auto-resizing functionality to ui-grid
11+
*
12+
*/
13+
var module = angular.module('ui.grid.autoResize', ['ui.grid']);
14+
15+
16+
module.directive('uiGridAutoResize', ['$log', '$timeout', 'gridUtil', function ($log, $timeout, gridUtil) {
17+
return {
18+
require: 'uiGrid',
19+
scope: false,
20+
link: function ($scope, $elm, $attrs, uiGridCtrl) {
21+
var prevGridWidth, prevGridHeight;
22+
23+
function getDimensions() {
24+
prevGridHeight = gridUtil.elementHeight($elm);
25+
prevGridWidth = gridUtil.elementWidth($elm);
26+
}
27+
28+
// Initialize the dimensions
29+
getDimensions();
30+
31+
var canceler;
32+
function startTimeout() {
33+
$timeout.cancel(canceler);
34+
35+
canceler = $timeout(function () {
36+
var newGridHeight = gridUtil.elementHeight($elm);
37+
var newGridWidth = gridUtil.elementWidth($elm);
38+
39+
if (newGridHeight !== prevGridHeight || newGridWidth !== prevGridWidth) {
40+
uiGridCtrl.grid.gridHeight = newGridHeight;
41+
uiGridCtrl.grid.gridWidth = newGridWidth;
42+
43+
uiGridCtrl.grid.queueRefresh()
44+
.then(function () {
45+
getDimensions();
46+
47+
startTimeout();
48+
});
49+
}
50+
else {
51+
startTimeout();
52+
}
53+
}, 250);
54+
}
55+
56+
startTimeout();
57+
58+
$scope.$on('$destroy', function() {
59+
$timeout.cancel(canceler);
60+
});
61+
}
62+
};
63+
}]);
64+
})();

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

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
describe('ui.grid.autoResizeGrid', function () {
2+
var gridScope, gridElm, viewportElm, $scope, $compile, recompile, uiGridConstants;
3+
4+
var data = [
5+
{ "name": "Ethel Price", "gender": "female", "company": "Enersol" },
6+
{ "name": "Claudine Neal", "gender": "female", "company": "Sealoud" },
7+
{ "name": "Beryl Rice", "gender": "female", "company": "Velity" },
8+
{ "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" }
9+
];
10+
11+
beforeEach(module('ui.grid'));
12+
beforeEach(module('ui.grid.autoResize'));
13+
14+
beforeEach(inject(function (_$compile_, $rootScope, _uiGridConstants_) {
15+
$scope = $rootScope;
16+
$compile = _$compile_;
17+
uiGridConstants = _uiGridConstants_;
18+
19+
$scope.gridOpts = {
20+
data: data
21+
};
22+
23+
recompile = function () {
24+
gridElm = angular.element('<div style="width: 500px; height: 300px" ui-grid="gridOpts" ui-grid-auto-resize></div>');
25+
document.body.appendChild(gridElm[0]);
26+
$compile(gridElm)($scope);
27+
$scope.$digest();
28+
gridScope = gridElm.isolateScope();
29+
30+
viewportElm = $(gridElm).find('.ui-grid-viewport');
31+
};
32+
33+
recompile();
34+
}));
35+
36+
afterEach(function () {
37+
angular.element(gridElm).remove();
38+
gridElm = null;
39+
});
40+
41+
describe('on grid element dimension change', function () {
42+
43+
it('adjusts the grid viewport size', inject(function ($timeout) {
44+
var w = $(viewportElm).width();
45+
var h = $(viewportElm).height();
46+
47+
$(gridElm).width(600);
48+
49+
$timeout.flush();
50+
51+
var newW = $(viewportElm).width();
52+
53+
expect(newW).toBeGreaterThan(w);
54+
}));
55+
});
56+
57+
// 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
58+
describe('on grid container dimension change', function () {
59+
var gridContainerElm;
60+
61+
beforeEach(function () {
62+
angular.element(gridElm).remove();
63+
64+
gridContainerElm = angular.element('<div style="width: 400px"><div style="width: 100%; height: 300px" ui-grid="gridOpts" ui-grid-auto-resize></div></div>');
65+
document.body.appendChild(gridContainerElm[0]);
66+
$compile(gridContainerElm)($scope);
67+
$scope.$digest();
68+
69+
gridElm = gridContainerElm.find('[ui-grid]');
70+
71+
viewportElm = $(gridElm).find('.ui-grid-viewport');
72+
});
73+
74+
it('adjusts the grid viewport size', inject(function ($timeout) {
75+
var w = $(viewportElm).width();
76+
var h = $(viewportElm).height();
77+
78+
$(gridContainerElm).width(500);
79+
80+
$timeout.flush();
81+
82+
var newW = $(viewportElm).width();
83+
84+
expect(newW).toBeGreaterThan(w);
85+
}));
86+
});
87+
88+
});

‎src/js/core/factories/Grid.js

+2
Original file line numberDiff line numberDiff line change
@@ -1013,6 +1013,8 @@ angular.module('ui.grid')
10131013
self.refreshCanceller.then(function () {
10141014
self.refreshCanceller = null;
10151015
});
1016+
1017+
return self.refreshCanceller;
10161018
};
10171019

10181020
/**

‎src/js/core/factories/GridOptions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ angular.module('ui.grid')
125125
*
126126
* By default it returns the `$$hashKey` property but can be overridden to use any property or set of properties you want.
127127
*/
128-
this.getRowIdentity = function rowIdentity(row) {
128+
this.getRowIdentity = function getRowIdentity(row) {
129129
return row.$$hashKey;
130130
};
131131

0 commit comments

Comments
 (0)