ui-grid.empty-base-layer.js 5.9 KB

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