-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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!
- Loading branch information
Showing
6 changed files
with
220 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <example module="app"> | ||
| <file name="app.js"> | ||
| 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'); | ||
| }; | ||
| }]); | ||
| </file> | ||
| <file name="index.html"> | ||
| <div ng-controller="MainCtrl"> | ||
| <button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button> | ||
| <br> | ||
| <br> | ||
| <div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div> | ||
| </div> | ||
| </file> | ||
| <file name="main.css"> | ||
| .grid { | ||
| width: 500px; | ||
| height: 400px; | ||
| } | ||
| </file> | ||
| </example> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| } | ||
| }; | ||
| }]); | ||
| })(); |
88 changes: 88 additions & 0 deletions
88
src/features/auto-resize-grid/test/auto-resize-grid.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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('<div style="width: 500px; height: 300px" ui-grid="gridOpts" ui-grid-auto-resize></div>'); | ||
| 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('<div style="width: 400px"><div style="width: 100%; height: 300px" 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'); | ||
| }); | ||
|
|
||
| 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); | ||
| })); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters