angular-ui-grid
Version:
A data grid for Angular
178 lines (157 loc) • 6.59 kB
JavaScript
/*!
* ui-grid - v4.9.1 - 2020-10-26
* Copyright (c) 2020 ; License: MIT
*/
(function () {
'use strict';
/**
* @ngdoc overview
* @name ui.grid.emptyBaseLayer
* @description
*
* # ui.grid.emptyBaseLayer
*
* <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>
*
* This module provides the ability to have the background of the ui-grid be empty rows, this would be displayed in the case were
* the grid height is greater then the amount of rows displayed.
*
* <div doc-module-components="ui.grid.emptyBaseLayer"></div>
*/
var module = angular.module('ui.grid.emptyBaseLayer', ['ui.grid']);
/**
* @ngdoc service
* @name ui.grid.emptyBaseLayer.service:uiGridBaseLayerService
*
* @description Services for the empty base layer grid
*/
module.service('uiGridBaseLayerService', ['gridUtil', '$compile', function (gridUtil, $compile) {
return {
initializeGrid: function (grid, disableEmptyBaseLayer) {
/**
* @ngdoc object
* @name ui.grid.emptyBaseLayer.api:GridOptions
*
* @description GridOptions for emptyBaseLayer feature, these are available to be
* set using the ui-grid {@link ui.grid.class:GridOptions gridOptions}
*/
grid.baseLayer = {
emptyRows: []
};
/**
* @ngdoc object
* @name enableEmptyGridBaseLayer
* @propertyOf ui.grid.emptyBaseLayer.api:GridOptions
* @description Enable empty base layer, which shows empty rows as background on the entire grid
* <br/>Defaults to true, if the directive is used.
* <br/>Set to false either by setting this attribute or passing false to the directive.
*/
// default option to true unless it was explicitly set to false
if (grid.options.enableEmptyGridBaseLayer !== false) {
grid.options.enableEmptyGridBaseLayer = !disableEmptyBaseLayer;
}
},
setNumberOfEmptyRows: function(viewportHeight, grid) {
var rowHeight = grid.options.rowHeight,
rows = Math.ceil(viewportHeight / rowHeight);
if (rows > 0) {
grid.baseLayer.emptyRows = [];
for (var i = 0; i < rows; i++) {
grid.baseLayer.emptyRows.push({});
}
}
}
};
}]);
/**
* @ngdoc object
* @name ui.grid.emptyBaseLayer.directive:uiGridEmptyBaseLayer
* @description Shows empty rows in the background of the ui-grid, these span
* the full height of the ui-grid, so that there won't be blank space below the shown rows.
* @example
* <pre>
* <div ui-grid="gridOptions" class="grid" ui-grid-empty-base-layer></div>
* </pre>
* Or you can enable/disable it dynamically by passing in true or false. It doesn't
* the value, so it would only be set on initial render.
* <pre>
* <div ui-grid="gridOptions" class="grid" ui-grid-empty-base-layer="false"></div>
* </pre>
*/
module.directive('uiGridEmptyBaseLayer', ['gridUtil', 'uiGridBaseLayerService',
'$parse',
function (gridUtil, uiGridBaseLayerService, $parse) {
return {
require: '^uiGrid',
scope: false,
compile: function () {
return {
pre: function ($scope, $elm, $attrs, uiGridCtrl) {
var disableEmptyBaseLayer = $parse($attrs.uiGridEmptyBaseLayer)($scope) === false;
uiGridBaseLayerService.initializeGrid(uiGridCtrl.grid, disableEmptyBaseLayer);
},
post: function ($scope, $elm, $attrs, uiGridCtrl) {
if (!uiGridCtrl.grid.options.enableEmptyGridBaseLayer) {
return;
}
var renderBodyContainer = uiGridCtrl.grid.renderContainers.body,
viewportHeight = renderBodyContainer.getViewportHeight();
function heightHasChanged() {
var newViewPortHeight = renderBodyContainer.getViewportHeight();
if (newViewPortHeight !== viewportHeight) {
viewportHeight = newViewPortHeight;
return true;
}
return false;
}
function getEmptyBaseLayerCss(viewportHeight) {
// Set ui-grid-empty-base-layer height
return '.grid' + uiGridCtrl.grid.id +
' .ui-grid-render-container ' +
'.ui-grid-empty-base-layer-container.ui-grid-canvas ' +
'{ height: ' + viewportHeight + 'px; }';
}
uiGridCtrl.grid.registerStyleComputation({
func: function() {
if (heightHasChanged()) {
uiGridBaseLayerService.setNumberOfEmptyRows(viewportHeight, uiGridCtrl.grid);
}
return getEmptyBaseLayerCss(viewportHeight);
}
});
}
};
}
};
}]);
/**
* @ngdoc directive
* @name ui.grid.emptyBaseLayer.directive:uiGridViewport
* @description stacks on the uiGridViewport directive to append the empty grid base layer html elements to the
* default gridRow template
*/
module.directive('uiGridViewport',
['$compile', 'gridUtil', '$templateCache',
function ($compile, gridUtil, $templateCache) {
return {
priority: -200,
scope: false,
compile: function ($elm) {
var emptyBaseLayerContainer = $templateCache.get('ui-grid/emptyBaseLayerContainer');
$elm.prepend(emptyBaseLayerContainer);
return {
pre: function ($scope, $elm, $attrs, controllers) {
},
post: function ($scope, $elm, $attrs, controllers) {
}
};
}
};
}]);
})();
angular.module('ui.grid.emptyBaseLayer').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('ui-grid/emptyBaseLayerContainer',
"<div class=\"ui-grid-empty-base-layer-container ui-grid-canvas\"><div class=\"ui-grid-row\" ng-repeat=\"(rowRenderIndex, row) in grid.baseLayer.emptyRows track by $index\" ng-style=\"Viewport.rowStyle(rowRenderIndex)\"><div><div><div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell {{ col.getColClass(false) }}\"></div></div></div></div></div>"
);
}]);