diff --git a/Gruntfile.js b/Gruntfile.js index 07007c2d50..53e0fa8844 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -320,16 +320,12 @@ module.exports = function(grunt) { tasks: ['ngtemplates'] }, - // src_test: { - // files: '<%= jshint.src_test.src %>', - // tasks: ['jshint:src_test', 'jasmine'] - // }, + rebuild: { files: util.testFiles.unit, - // NOTE(c0bra): turn back on after render containers works - // tasks: ['jshint:src_test', 'jscs', 'karmangular:run', 'concat', 'uglify', 'ngdocs'], - tasks: ['jshint:src_test', 'jscs', 'concat', 'uglify', 'ngdocs'], + tasks: ['jshint:src_test', 'jscs', 'karmangular:run', 'concat', 'uglify', 'ngdocs'], }, + protractor: { files: ['.tmp/doc-scenarios/**/*.spec.js', 'test/e2e/**/*.spec.js'], tasks: ['protractor-watch:auto'] @@ -546,7 +542,6 @@ module.exports = function(grunt) { grunt.registerTask('after-test', ['build']); // Default task. - // grunt.registerTask('default', ['clean', 'jshint', 'ngtemplates', 'karma:single', 'concat', 'uglify', 'less', 'ngdocs']); grunt.registerTask('default', ['before-test', 'test', 'after-test']); // Build with no testing @@ -562,16 +557,13 @@ module.exports = function(grunt) { var tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'autotest:e2e', 'watch']; if (e2e === false) { - // NOTE(c0bra): turn back on after render containers works - // tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'watch']; - tasks = ['before-test', 'after-test', 'connect', 'watch']; + tasks = ['before-test', 'after-test', 'connect', 'autotest:unit', 'watch']; } grunt.task.run(tasks); }); // Testing tasks - // grunt.registerTask('test:ci', ['clean', 'jshint', 'ngtemplates', 'karma:sauce']); grunt.registerTask('test:ci', ['clean', 'jshint', 'jscs', 'ngtemplates', 'serialsauce']); grunt.registerTask('test:docs', ['connect:testserver', 'protractor:docs']); grunt.registerTask('test:e2e', ['connect:testserver', 'protractor:singlerun']); @@ -584,7 +576,6 @@ module.exports = function(grunt) { grunt.task.run('karma:travis'); } else { - // grunt.task.run(this.args.length ? 'karma:single' : 'karma:continuous'); grunt.task.run('karmangular'); } }); diff --git a/misc/tutorial/213_auto_resizing.ngdoc b/misc/tutorial/213_auto_resizing.ngdoc new file mode 100644 index 0000000000..fb6b9ffc4f --- /dev/null +++ b/misc/tutorial/213_auto_resizing.ngdoc @@ -0,0 +1,61 @@ +@ngdoc overview +@name Tutorial: 213 Auto-Resizing +@description + +The auto-resize feature will enable the grid to resize itself when its container changes size. + + +@example + + + var app = angular.module('app', ['ui.grid', 'ui.grid.autoResize']); + + app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) { + $scope.gridOptions = {}; + + $scope.gridOptions.columnDefs = [ + { name:'id', width:50 }, + { name:'name', width:100, pinnedLeft:true }, + { name:'age', width:100, pinnedRight:true }, + { name:'address.street', width:150 }, + { name:'address.city', width:150 }, + { name:'address.state', width:50 }, + { name:'address.zip', width:50 }, + { name:'company', width:100 }, + { name:'email', width:100 }, + { name:'phone', width:200 }, + { name:'about', width:300 }, + { name:'friends[0].name', displayName:'1st friend', width:150 }, + { name:'friends[1].name', displayName:'2nd friend', width:150 }, + { name:'friends[2].name', displayName:'3rd friend', width:150 }, + ]; + + $http.get('/data/500_complex.json') + .success(function(data) { + $scope.gridOptions.data = data; + }); + + $scope.randomSize = function () { + var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300); + var newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200); + + angular.element('.grid').css('height', newHeight + 'px'); + angular.element('.grid').css('width', newWidth + 'px'); + }; + }]); + + +
+ +
+
+
+
+
+ + .grid { + width: 500px; + height: 400px; + } + +
\ No newline at end of file diff --git a/src/features/auto-resize-grid/js/auto-resize.js b/src/features/auto-resize-grid/js/auto-resize.js new file mode 100644 index 0000000000..f4016cc5e2 --- /dev/null +++ b/src/features/auto-resize-grid/js/auto-resize.js @@ -0,0 +1,64 @@ +(function() { + 'use strict'; + /** + * @ngdoc overview + * @name ui.grid.autoResize + * + * @description + * + * #ui.grid.autoResize + * This module provides auto-resizing functionality to ui-grid + * + */ + var module = angular.module('ui.grid.autoResize', ['ui.grid']); + + + module.directive('uiGridAutoResize', ['$log', '$timeout', 'gridUtil', function ($log, $timeout, 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 canceler; + function startTimeout() { + $timeout.cancel(canceler); + + canceler = $timeout(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.queueRefresh() + .then(function () { + getDimensions(); + + startTimeout(); + }); + } + else { + startTimeout(); + } + }, 250); + } + + startTimeout(); + + $scope.$on('$destroy', function() { + $timeout.cancel(canceler); + }); + } + }; + }]); +})(); \ No newline at end of file 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 new file mode 100644 index 0000000000..90cd2eb3c1 --- /dev/null +++ b/src/features/auto-resize-grid/test/auto-resize-grid.spec.js @@ -0,0 +1,88 @@ +describe('ui.grid.autoResizeGrid', function () { + var gridScope, gridElm, viewportElm, $scope, $compile, recompile, uiGridConstants; + + var data = [ + { "name": "Ethel Price", "gender": "female", "company": "Enersol" }, + { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" }, + { "name": "Beryl Rice", "gender": "female", "company": "Velity" }, + { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" } + ]; + + beforeEach(module('ui.grid')); + beforeEach(module('ui.grid.autoResize')); + + beforeEach(inject(function (_$compile_, $rootScope, _uiGridConstants_) { + $scope = $rootScope; + $compile = _$compile_; + uiGridConstants = _uiGridConstants_; + + $scope.gridOpts = { + data: data + }; + + recompile = function () { + gridElm = angular.element('
'); + document.body.appendChild(gridElm[0]); + $compile(gridElm)($scope); + $scope.$digest(); + gridScope = gridElm.isolateScope(); + + viewportElm = $(gridElm).find('.ui-grid-viewport'); + }; + + recompile(); + })); + + afterEach(function () { + angular.element(gridElm).remove(); + gridElm = null; + }); + + describe('on grid element dimension change', function () { + + it('adjusts the grid viewport size', inject(function ($timeout) { + var w = $(viewportElm).width(); + var h = $(viewportElm).height(); + + $(gridElm).width(600); + + $timeout.flush(); + + var newW = $(viewportElm).width(); + + expect(newW).toBeGreaterThan(w); + })); + }); + + // 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 () { + var gridContainerElm; + + beforeEach(function () { + 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'); + }); + + it('adjusts the grid viewport size', inject(function ($timeout) { + var w = $(viewportElm).width(); + var h = $(viewportElm).height(); + + $(gridContainerElm).width(500); + + $timeout.flush(); + + var newW = $(viewportElm).width(); + + expect(newW).toBeGreaterThan(w); + })); + }); + +}); \ No newline at end of file diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js index df98ae5aac..41ad7b2855 100644 --- a/src/js/core/factories/Grid.js +++ b/src/js/core/factories/Grid.js @@ -1013,6 +1013,8 @@ angular.module('ui.grid') self.refreshCanceller.then(function () { self.refreshCanceller = null; }); + + return self.refreshCanceller; }; /** diff --git a/src/js/core/factories/GridOptions.js b/src/js/core/factories/GridOptions.js index a24d8d15c6..c4e52bec2c 100644 --- a/src/js/core/factories/GridOptions.js +++ b/src/js/core/factories/GridOptions.js @@ -125,7 +125,7 @@ angular.module('ui.grid') * * By default it returns the `$$hashKey` property but can be overridden to use any property or set of properties you want. */ - this.getRowIdentity = function rowIdentity(row) { + this.getRowIdentity = function getRowIdentity(row) { return row.$$hashKey; };