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'

misc/site/data/5.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Frederick Howard",
+    "gender": "male",
+    "company": "Zilch"
+  },
+  {
+    "name": "Joseph Meyers",
+    "gender": "female",
+    "company": "Roughies"
+  },
+  {
+    "name": "Leta Rogers",
+    "gender": "female",
+    "company": "Phormula"
+  },
+  {
+    "name": "Tyler Campbell",
+    "gender": "male",
+    "company": "Soprano"
+  },
+  {
+    "name": "Diane Stuart",
+    "gender": "female",
+    "company": "Proxsoft"
+  }
+]

misc/tutorial/218_empty_grid_base_layer.ngdoc

@@ -0,0 +1,50 @@
+@ngdoc overview
+@name Tutorial: 218 Empty Grid Base Layer
+@description
+
+<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>
+
+@example
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns',
+        'ui.grid.moveColumns', 'ui.grid.emptyBaseLayer', 'ui.grid.autoResize', 'ui.grid.pinning']);
+
+    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
+      $scope.gridOptions = {
+        enableSorting: true,
+        columnDefs: [
+          { field: 'name', minWidth: 100, width: 150, enableColumnResizing: false, pinnedLeft:true},
+          { field: 'gender', width: '40%', maxWidth: 200, minWidth: 70 },
+          { field: 'company', width: '30%' }
+        ]
+      };
+
+      $scope.randomSize = function () {
+        var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300),
+          newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200);
+
+        angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
+        angular.element(document.getElementsByClassName('grid')[0]).css('width', newWidth + 'px');
+      };
+
+      $http.get('/data/5.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+    }]);
+  </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>
+      <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>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 500px;
+      height: 400px;
+    }
+  </file>
+</example>

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

@@ -0,0 +1,164 @@
+(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) {
+    var service = {
+      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({});
+          }
+        }
+      }
+    };
+    return service;
+  }]);
+
+  /**
+   *  @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 ($elm, $attrs) {
+          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) {
+                var ret = '';
+                // Set ui-grid-empty-base-layer height
+                ret += '\n .grid' + uiGridCtrl.grid.id +
+                  ' .ui-grid-render-container ' +
+                  '.ui-grid-empty-base-layer-container.ui-grid-canvas ' +
+                  '{ height: ' + viewportHeight + 'px; }';
+                return ret;
+              }
+
+              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, $attrs) {
+            var emptyBaseLayerContainer = $templateCache.get('ui-grid/emptyBaseLayerContainer');
+            $elm.prepend(emptyBaseLayerContainer);
+            return {
+              pre: function ($scope, $elm, $attrs, controllers) {
+              },
+              post: function ($scope, $elm, $attrs, controllers) {
+              }
+            };
+          }
+        };
+      }]);
+
+})();

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

@@ -0,0 +1,8 @@
+@import '../../../less/variables';
+
+.ui-grid-viewport .ui-grid-empty-base-layer-container {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}

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

@@ -0,0 +1,13 @@
+<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>

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

@@ -0,0 +1,94 @@
+describe('ui.grid.emptyBaseLayer', function () {
+
+  var scope, element, viewportHeight, emptyBaseLayerContainer, $compile;
+
+  beforeEach(module('ui.grid.emptyBaseLayer'));
+
+  beforeEach(inject(function (_$compile_, $rootScope, $httpBackend) {
+
+    $compile = _$compile_;
+    scope = $rootScope;
+
+    viewportHeight = "100";
+    scope.gridOptions = {};
+    scope.gridOptions.data = [
+      { col1: 'col1', col2: 'col2' }
+    ];
+    scope.gridOptions.onRegisterApi = function (gridApi) {
+      scope.gridApi = gridApi;
+      scope.grid = gridApi.grid;
+      var renderBodyContainer = scope.grid.renderContainers.body;
+      spyOn(renderBodyContainer, 'getViewportHeight').and.callFake(function() {
+        return viewportHeight;
+      });
+    };
+  }));
+
+  describe('enabled', function() {
+    beforeEach(function() {
+      element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
+
+      $compile(element)(scope);
+      scope.$digest();
+
+      emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
+    });
+
+    it('should add emptyBaseLayerContainer to the viewport html', function () {
+      expect(element.find('.ui-grid-empty-base-layer-container').length).toBe(1);
+    });
+
+    it('should add fake rows to the empty base layer container, on building styles', function() {
+      expect(emptyBaseLayerContainer.children().length).toBe(4);
+    });
+
+    it('should increase in rows if viewport height increased', function() {
+      viewportHeight = "150";
+      scope.grid.buildStyles();
+      scope.$digest();
+      expect(emptyBaseLayerContainer.children().length).toBe(5);
+    });
+  });
+
+  describe('disabled', function() {
+    it('should be disabled if we pass false into the directive in the markup', function() {
+      element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer="false"></div>');
+      $compile(element)(scope);
+      scope.$digest();
+      emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
+      expect(emptyBaseLayerContainer.children().length).toBe(0);
+    });
+
+    it('should be disabled if we pass false as an value through the scope in markup', function() {
+      scope.enableEmptyBaseLayer = false;
+      element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer="enableEmptyBaseLayer"></div>');
+      $compile(element)(scope);
+      scope.$digest();
+      emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
+      expect(emptyBaseLayerContainer.children().length).toBe(0);
+    });
+
+    it('should be disabled if set enableEmptyGridBaseLayer in gridOptions to false', function() {
+      scope.gridOptions.enableEmptyGridBaseLayer = false;
+      element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
+      $compile(element)(scope);
+      scope.$digest();
+      emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
+      expect(emptyBaseLayerContainer.children().length).toBe(0);
+    });
+
+    it('should not reset the number of rows incase it is disabled', function() {
+      scope.gridOptions.enableEmptyGridBaseLayer = false;
+      element = angular.element('<div class="col-md-5" ui-grid="gridOptions" ui-grid-empty-base-layer></div>');
+      $compile(element)(scope);
+      scope.$digest();
+      emptyBaseLayerContainer = angular.element(element.find('.ui-grid-empty-base-layer-container')[0]);
+      expect(emptyBaseLayerContainer.children().length).toBe(0);
+
+      viewportHeight = "150";
+      scope.grid.buildStyles();
+      scope.$digest();
+      expect(emptyBaseLayerContainer.children().length).toBe(0);
+    });
+  });
+});