fix(gridContainer): Revert body container id to previous.

This change will maintain the fix for issue #6096, but ensure that the body container maintain the same id that it had before it in order to allow for an easier upgrade for those who wrote their own automation for UI-Grid using the previous ID. This also updates the render container to start using the controllerAs paradigm on its template.
angular-ui · Jun 18, 2018 · 981e9e2 · 981e9e2
1 parent fc0e296
commit 981e9e2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/src/js/core/directives/ui-grid-render-container.js b/src/js/core/directives/ui-grid-render-container.js
@@ -23,46 +23,46 @@
       compile: function () {
         return {
           pre: function prelink($scope, $elm, $attrs, controllers) {
-
-            var uiGridCtrl = controllers[0];
-            var containerCtrl = controllers[1];
-            var grid = $scope.grid = uiGridCtrl.grid;
+            var rowContainer, colContainer, gridContainerPrefix,
+              uiGridCtrl = controllers[0],
+              containerCtrl = controllers[1],
+              grid = $scope.grid = uiGridCtrl.grid,
+              gridContainerId = 'grid-container';
 
             // Verify that the render container for this element exists
             if (!$scope.rowContainerName) {
-              throw new Error("No row render container name specified");
+              throw new Error('No row render container name specified');
             }
             if (!$scope.colContainerName) {
-              throw new Error("No column render container name specified");
+              throw new Error('No column render container name specified');
             }
 
             if (!grid.renderContainers[$scope.rowContainerName]) {
-              throw new Error("Row render container '" + $scope.rowContainerName + "' is not registered.");
+              throw new Error('Row render container "' + $scope.rowContainerName + '" is not registered.');
             }
             if (!grid.renderContainers[$scope.colContainerName]) {
-              throw new Error("Column render container '" + $scope.colContainerName + "' is not registered.");
+              throw new Error('Column render container "' + $scope.colContainerName + '" is not registered.');
             }
 
-            var rowContainer = $scope.rowContainer = grid.renderContainers[$scope.rowContainerName];
-            var colContainer = $scope.colContainer = grid.renderContainers[$scope.colContainerName];
+            rowContainer = $scope.rowContainer = grid.renderContainers[$scope.rowContainerName];
+            colContainer = $scope.colContainer = grid.renderContainers[$scope.colContainerName];
+            gridContainerPrefix = $scope.containerId !== 'body' ? $scope.containerId + '-' : '';
 
+            containerCtrl.gridContainerId = gridContainerPrefix + gridContainerId;
             containerCtrl.containerId = $scope.containerId;
             containerCtrl.rowContainer = rowContainer;
             containerCtrl.colContainer = colContainer;
+            containerCtrl.grid = grid;
           },
           post: function postlink($scope, $elm, $attrs, controllers) {
-
-            var uiGridCtrl = controllers[0];
-            var containerCtrl = controllers[1];
-
-            var grid = uiGridCtrl.grid;
-            var rowContainer = containerCtrl.rowContainer;
-            var colContainer = containerCtrl.colContainer;
-            var scrollTop = null;
-            var scrollLeft = null;
-
-
-            var renderContainer = grid.renderContainers[$scope.containerId];
+            var uiGridCtrl = controllers[0],
+              containerCtrl = controllers[1],
+              grid = uiGridCtrl.grid,
+              rowContainer = containerCtrl.rowContainer,
+              colContainer = containerCtrl.colContainer,
+              scrollTop = null,
+              scrollLeft = null,
+              renderContainer = grid.renderContainers[$scope.containerId];
 
             // Put the container name on this element as a class
             $elm.addClass('ui-grid-render-container-' + $scope.containerId);
@@ -120,9 +120,10 @@
             });
 
             $elm.bind('$destroy', function() {
-              $elm.unbind('keydown');
+              var eventsToUnbind = ['touchstart', 'touchmove', 'touchend','keydown', 'wheel', 'mousewheel',
+                'DomMouseScroll', 'MozMousePixelScroll'];
 
-              ['touchstart', 'touchmove', 'touchend','keydown', 'wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function (eventName) {
+              eventsToUnbind.forEach(function(eventName) {
                 $elm.unbind(eventName);
               });
             });
@@ -152,9 +153,11 @@
               headerViewportWidth = footerViewportWidth = colContainer.getHeaderViewportWidth();
 
               // Set canvas dimensions
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
 
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
 
               if (renderContainer.explicitHeaderCanvasHeight) {
                 // get height from body container
@@ -165,22 +168,23 @@
                   renderContainer.explicitHeaderCanvasHeight = reHCHeight.offsetHeight;
                 }
 
-                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
-                  ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
+                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                  + ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
               }
               else {
-                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: inherit; }';
+                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                  + ' .ui-grid-header-canvas { height: inherit; }';
               }
 
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
-                ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
-                ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
-
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
-                ' .ui-grid-footer-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
-              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
-                ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
+
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-footer-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
+              ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
+                + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
 
               return ret;
             }

diff --git a/src/templates/ui-grid/uiGridRenderContainer.html b/src/templates/ui-grid/uiGridRenderContainer.html
@@ -1,17 +1,17 @@
 <div
   role="presentation"
-  ui-grid-one-bind-id-grid="containerId + '-grid-container'"
+  ui-grid-one-bind-id-grid="RenderContainer.gridContainerId"
   class="ui-grid-render-container"
-  ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }">
+  ng-style="{ 'margin-left': RenderContainer.colContainer.getMargin('left') + 'px', 'margin-right': RenderContainer.colContainer.getMargin('right') + 'px' }">
   <!-- All of these dom elements are replaced in place -->
   <div ui-grid-header></div>
   <div ui-grid-viewport></div>
   <div
-    ng-if="colContainer.needsHScrollbarPlaceholder()"
+    ng-if="RenderContainer.colContainer.needsHScrollbarPlaceholder()"
     class="ui-grid-scrollbar-placeholder"
-    ng-style="{height:colContainer.grid.scrollbarHeight + 'px'}">
+    ng-style="{height: RenderContainer.colContainer.grid.scrollbarHeight + 'px'}">
   </div>
   <ui-grid-footer
-    ng-if="grid.options.showColumnFooter">
+    ng-if="RenderContainer.grid.options.showColumnFooter">
   </ui-grid-footer>
 </div>
diff --git a/test/unit/core/directives/ui-grid-render-container.spec.js b/test/unit/core/directives/ui-grid-render-container.spec.js
@@ -82,7 +82,7 @@
 				try {
 					recompile();
 				} catch (error) {
-					expect(error.message).toEqual('Row render container \'mock\' is not registered.');
+					expect(error.message).toEqual('Row render container "mock" is not registered.');
 					grid.remove();
 					done();
 				}
@@ -93,7 +93,7 @@
 				try {
 					recompile();
 				} catch (error) {
-					expect(error.message).toEqual('Column render container \'mock\' is not registered.');
+					expect(error.message).toEqual('Column render container "mock" is not registered.');
 					grid.remove();
 					done();
 				}