Skip to content

Commit 852f699

Browse files
author
Lourens Schep
committed
feat(emptyBaseLayer): made emptyBaseLayer module to create grid
background Made a new feature called 'emptyBaseLayer'. This can be added to the ui-grid by using ui-grid-empty-base-layer. This creates a fake background for the ui-grid of continues rows, the rows are not editable or clickable, and just act as a background. There also is a new tutorial page '218 Empty Base Layer'
1 parent 1c01e74 commit 852f699

File tree

6 files changed

+356
-0
lines changed

6 files changed

+356
-0
lines changed

‎misc/site/data/5.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[
2+
{
3+
"name": "Frederick Howard",
4+
"gender": "male",
5+
"company": "Zilch"
6+
},
7+
{
8+
"name": "Joseph Meyers",
9+
"gender": "female",
10+
"company": "Roughies"
11+
},
12+
{
13+
"name": "Leta Rogers",
14+
"gender": "female",
15+
"company": "Phormula"
16+
},
17+
{
18+
"name": "Tyler Campbell",
19+
"gender": "male",
20+
"company": "Soprano"
21+
},
22+
{
23+
"name": "Diane Stuart",
24+
"gender": "female",
25+
"company": "Proxsoft"
26+
}
27+
]

‎misc/tutorial/218_empty_grid_base_layer.ngdoc

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@ngdoc overview
2+
@name Tutorial: 218 Empty Grid Base Layer
3+
@description
4+
5+
<div class="alert alert-success" role="alert"><strong>Stable</strong> This feature is stable. There should no longer be breaking api changes without a deprecation warning.</div>
6+
7+
@example
8+
<example module="app">
9+
<file name="app.js">
10+
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns',
11+
'ui.grid.moveColumns', 'ui.grid.emptyBaseLayer', 'ui.grid.autoResize', 'ui.grid.pinning']);
12+
13+
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
14+
$scope.gridOptions = {
15+
enableSorting: true,
16+
columnDefs: [
17+
{ field: 'name', minWidth: 100, width: 150, enableColumnResizing: false, pinnedLeft:true},
18+
{ field: 'gender', width: '40%', maxWidth: 200, minWidth: 70 },
19+
{ field: 'company', width: '30%' }
20+
]
21+
};
22+
23+
$scope.randomSize = function () {
24+
var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300),
25+
newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200);
26+
27+
angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
28+
angular.element(document.getElementsByClassName('grid')[0]).css('width', newWidth + 'px');
29+
};
30+
31+
$http.get('/data/5.json')
32+
.success(function(data) {
33+
$scope.gridOptions.data = data;
34+
});
35+
}]);
36+
</file>
37+
<file name="index.html">
38+
<div ng-controller="MainCtrl">
39+
<button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button>
40+
<br>
41+
<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-empty-base-layer ui-grid-auto-resize ui-grid-pinning></div>
42+
</div>
43+
</file>
44+
<file name="main.css">
45+
.grid {
46+
width: 500px;
47+
height: 400px;
48+
}
49+
</file>
50+
</example>

‎src/features/empty-base-layer/js/emptyBaseLayer.js

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
(function () {
2+
'use strict';
3+
4+
/**
5+
* @ngdoc overview
6+
* @name ui.grid.emptyBaseLayer
7+
* @description
8+
*
9+
* # ui.grid.emptyBaseLayer
10+
*
11+
* <div class="alert alert-warning" role="alert"><strong>Alpha</strong> This feature is in development. There will almost certainly be breaking api changes, or there are major outstanding bugs.</div>
12+
*
13+
* This module provides the ability to have the background of the ui-grid be empty rows, this would be displayed in the case were
14+
* the grid height is greater then the amount of rows displayed.
15+
*
16+
* <div doc-module-components="ui.grid.emptyBaseLayer"></div>
17+
*/
18+
var module = angular.module('ui.grid.emptyBaseLayer', ['ui.grid']);
19+
20+
21+
/**
22+
* @ngdoc service
23+
* @name ui.grid.emptyBaseLayer.service:uiGridBaseLayerService
24+
*
25+
* @description Services for the empty base layer grid
26+
*/
27+
module.service('uiGridBaseLayerService', ['gridUtil', '$compile', function (gridUtil, $compile) {
28+
var service = {
29+
initializeGrid: function (grid, disableEmptyBaseLayer) {
30+
31+
/**
32+
* @ngdoc object
33+
* @name ui.grid.emptyBaseLayer.api:GridOptions
34+
*
35+
* @description GridOptions for emptyBaseLayer feature, these are available to be
36+
* set using the ui-grid {@link ui.grid.class:GridOptions gridOptions}
37+
*/
38+
grid.baseLayer = {
39+
emptyRows: []
40+
};
41+
42+
/**
43+
* @ngdoc object
44+
* @name enableEmptyGridBaseLayer
45+
* @propertyOf ui.grid.emptyBaseLayer.api:GridOptions
46+
* @description Enable empty base layer, which shows empty rows as background on the entire grid
47+
* <br/>Defaults to true, if the directive is used.
48+
* <br/>Set to false either by setting this attribute or passing false to the directive.
49+
*/
50+
//default option to true unless it was explicitly set to false
51+
if (grid.options.enableEmptyGridBaseLayer !== false) {
52+
grid.options.enableEmptyGridBaseLayer = !disableEmptyBaseLayer;
53+
}
54+
},
55+
56+
setNumberOfEmptyRows: function(viewportHeight, grid) {
57+
var rowHeight = grid.options.rowHeight,
58+
rows = Math.ceil(viewportHeight / rowHeight);
59+
if (rows > 0) {
60+
grid.baseLayer.emptyRows = [];
61+
for (var i = 0; i < rows; i++) {
62+
grid.baseLayer.emptyRows.push({});
63+
}
64+
}
65+
}
66+
};
67+
return service;
68+
}]);
69+
70+
/**
71+
* @ngdoc object
72+
* @name ui.grid.emptyBaseLayer.directive:uiGridEmptyBaseLayer
73+
* @description Shows empty rows in the background of the ui-grid, these span
74+
* the full height of the ui-grid, so that there won't be blank space below the shown rows.
75+
* @example
76+
* <pre>
77+
* <div ui-grid="gridOptions" class="grid" ui-grid-empty-base-layer></div>
78+
* </pre>
79+
* Or you can enable/disable it dynamically by passing in true or false. It doesn't
80+
* the value, so it would only be set on initial render.
81+
* <pre>
82+
* <div ui-grid="gridOptions" class="grid" ui-grid-empty-base-layer="false"></div>
83+
* </pre>
84+
*/
85+
module.directive('uiGridEmptyBaseLayer', ['gridUtil', 'uiGridBaseLayerService',
86+
'$parse',
87+
function (gridUtil, uiGridBaseLayerService, $parse) {
88+
return {
89+
require: '^uiGrid',
90+
scope: false,
91+
compile: function ($elm, $attrs) {
92+
return {
93+
pre: function ($scope, $elm, $attrs, uiGridCtrl) {
94+
var disableEmptyBaseLayer = $parse($attrs.uiGridEmptyBaseLayer)($scope) === false;
95+
uiGridBaseLayerService.initializeGrid(uiGridCtrl.grid, disableEmptyBaseLayer);
96+
},
97+
post: function ($scope, $elm, $attrs, uiGridCtrl) {
98+
if (!uiGridCtrl.grid.options.enableEmptyGridBaseLayer) {
99+
return;
100+
}
101+
102+
var renderBodyContainer = uiGridCtrl.grid.renderContainers.body,
103+
viewportHeight = renderBodyContainer.getViewportHeight();
104+
105+
function heightHasChanged() {
106+
var newViewPortHeight = renderBodyContainer.getViewportHeight();
107+
108+
if (newViewPortHeight !== viewportHeight) {
109+
viewportHeight = newViewPortHeight;
110+
return true;
111+
}
112+
return false;
113+
}
114+
115+
function getEmptyBaseLayerCss(viewportHeight) {
116+
var ret = '';
117+
// Set ui-grid-empty-base-layer height
118+
ret += '\n .grid' + uiGridCtrl.grid.id +
119+
' .ui-grid-render-container ' +
120+
'.ui-grid-empty-base-layer-container.ui-grid-canvas ' +
121+
'{ height: ' + viewportHeight + 'px; }';
122+
return ret;
123+
}
124+
125+
uiGridCtrl.grid.registerStyleComputation({
126+
func: function() {
127+
if (heightHasChanged()) {
128+
uiGridBaseLayerService.setNumberOfEmptyRows(viewportHeight, uiGridCtrl.grid);
129+
}
130+
return getEmptyBaseLayerCss(viewportHeight);
131+
}
132+
});
133+
}
134+
};
135+
}
136+
};
137+
}]);
138+
139+
/**
140+
* @ngdoc directive
141+
* @name ui.grid.emptyBaseLayer.directive:uiGridViewport
142+
* @description stacks on the uiGridViewport directive to append the empty grid base layer html elements to the
143+
* default gridRow template
144+
*/
145+
module.directive('uiGridViewport',
146+
['$compile', 'gridUtil', '$templateCache',
147+
function ($compile, gridUtil, $templateCache) {
148+
return {
149+
priority: -200,
150+
scope: false,
151+
compile: function ($elm, $attrs) {
152+
var emptyBaseLayerContainer = $templateCache.get('ui-grid/emptyBaseLayerContainer');
153+
$elm.prepend(emptyBaseLayerContainer);
154+
return {
155+
pre: function ($scope, $elm, $attrs, controllers) {
156+
},
157+
post: function ($scope, $elm, $attrs, controllers) {
158+
}
159+
};
160+
}
161+
};
162+
}]);
163+
164+
})();

‎src/features/empty-base-layer/less/emptyBaseLayer.less

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import '../../../less/variables';
2+
3+
.ui-grid-viewport .ui-grid-empty-base-layer-container {
4+
position: absolute;
5+
overflow: hidden;
6+
pointer-events: none;
7+
z-index: -1;
8+
}

‎src/features/empty-base-layer/templates/emptyBaseLayerContainer.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="ui-grid-empty-base-layer-container ui-grid-canvas">
2+
<div class="ui-grid-row"
3+
ng-repeat="(rowRenderIndex, row) in grid.baseLayer.emptyRows track by $index"
4+
ng-style="Viewport.rowStyle(rowRenderIndex)">
5+
<div>
6+
<div>
7+
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
8+
class="ui-grid-cell {{ col.getColClass(false) }}">
9+
</div>
10+
</div>
11+
</div>
12+
</div>
13+
</div>

‎src/features/empty-base-layer/test/emptyBaseLayer.spec.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
describe('ui.grid.emptyBaseLayer', function () {
2+
3+
var scope, element, viewportHeight, emptyBaseLayerContainer, $compile;
4+
5+
beforeEach(module('ui.grid.emptyBaseLayer'));
6+
7+
beforeEach(inject(function (_$compile_, $rootScope, $httpBackend) {
8+
9+
$compile = _$compile_;
10+
scope = $rootScope;
11+
12+
viewportHeight = "100";
13+
scope.gridOptions = {};
14+
scope.gridOptions.data = [
15+
{ col1: 'col1', col2: 'col2' }
16+
];
17+
scope.gridOptions.onRegisterApi = function (gridApi) {
18+
scope.gridApi = gridApi;
19+
scope.grid = gridApi.grid;
20+
var renderBodyContainer = scope.grid.renderContainers.body;
21+
spyOn(renderBodyContainer, 'getViewportHeight').and.callFake(function() {
22+
return viewportHeight;
23+
});
24+
};
25+
}));
26+
27+
describe('enabled', function() {
28+
beforeEach(function() {
29+
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
30+
31+
$compile(element)(scope);
32+
scope.$digest();
33+
34+
emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
35+
});
36+
37+
it('should add emptyBaseLayerContainer to the viewport html', function () {
38+
expect(element.find('.ui-grid-empty-base-layer-container').length).toBe(1);
39+
});
40+
41+
it('should add fake rows to the empty base layer container, on building styles', function() {
42+
expect(emptyBaseLayerContainer.children().length).toBe(4);
43+
});
44+
45+
it('should increase in rows if viewport height increased', function() {
46+
viewportHeight = "150";
47+
scope.grid.buildStyles();
48+
scope.$digest();
49+
expect(emptyBaseLayerContainer.children().length).toBe(5);
50+
});
51+
});
52+
53+
describe('disabled', function() {
54+
it('should be disabled if we pass false into the directive in the markup', function() {
55+
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer="false"></div>');
56+
$compile(element)(scope);
57+
scope.$digest();
58+
emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
59+
expect(emptyBaseLayerContainer.children().length).toBe(0);
60+
});
61+
62+
it('should be disabled if we pass false as an value through the scope in markup', function() {
63+
scope.enableEmptyBaseLayer = false;
64+
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer="enableEmptyBaseLayer"></div>');
65+
$compile(element)(scope);
66+
scope.$digest();
67+
emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
68+
expect(emptyBaseLayerContainer.children().length).toBe(0);
69+
});
70+
71+
it('should be disabled if set enableEmptyGridBaseLayer in gridOptions to false', function() {
72+
scope.gridOptions.enableEmptyGridBaseLayer = false;
73+
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
74+
$compile(element)(scope);
75+
scope.$digest();
76+
emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
77+
expect(emptyBaseLayerContainer.children().length).toBe(0);
78+
});
79+
80+
it('should not reset the number of rows incase it is disabled', function() {
81+
scope.gridOptions.enableEmptyGridBaseLayer = false;
82+
element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
83+
$compile(element)(scope);
84+
scope.$digest();
85+
emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
86+
expect(emptyBaseLayerContainer.children().length).toBe(0);
87+
88+
viewportHeight = "150";
89+
scope.grid.buildStyles();
90+
scope.$digest();
91+
expect(emptyBaseLayerContainer.children().length).toBe(0);
92+
});
93+
});
94+
});

0 commit comments

Comments
 (0)