Skip to content

Commit 981e9e2

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
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.
1 parent fc0e296 commit 981e9e2

File tree

3 files changed

+49
-45
lines changed

3 files changed

+49
-45
lines changed

‎src/js/core/directives/ui-grid-render-container.js

+42-38
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,46 @@
2323
compile: function () {
2424
return {
2525
pre: function prelink($scope, $elm, $attrs, controllers) {
26-
27-
var uiGridCtrl = controllers[0];
28-
var containerCtrl = controllers[1];
29-
var grid = $scope.grid = uiGridCtrl.grid;
26+
var rowContainer, colContainer, gridContainerPrefix,
27+
uiGridCtrl = controllers[0],
28+
containerCtrl = controllers[1],
29+
grid = $scope.grid = uiGridCtrl.grid,
30+
gridContainerId = 'grid-container';
3031

3132
// Verify that the render container for this element exists
3233
if (!$scope.rowContainerName) {
33-
throw new Error("No row render container name specified");
34+
throw new Error('No row render container name specified');
3435
}
3536
if (!$scope.colContainerName) {
36-
throw new Error("No column render container name specified");
37+
throw new Error('No column render container name specified');
3738
}
3839

3940
if (!grid.renderContainers[$scope.rowContainerName]) {
40-
throw new Error("Row render container '" + $scope.rowContainerName + "' is not registered.");
41+
throw new Error('Row render container "' + $scope.rowContainerName + '" is not registered.');
4142
}
4243
if (!grid.renderContainers[$scope.colContainerName]) {
43-
throw new Error("Column render container '" + $scope.colContainerName + "' is not registered.");
44+
throw new Error('Column render container "' + $scope.colContainerName + '" is not registered.');
4445
}
4546

46-
var rowContainer = $scope.rowContainer = grid.renderContainers[$scope.rowContainerName];
47-
var colContainer = $scope.colContainer = grid.renderContainers[$scope.colContainerName];
47+
rowContainer = $scope.rowContainer = grid.renderContainers[$scope.rowContainerName];
48+
colContainer = $scope.colContainer = grid.renderContainers[$scope.colContainerName];
49+
gridContainerPrefix = $scope.containerId !== 'body' ? $scope.containerId + '-' : '';
4850

51+
containerCtrl.gridContainerId = gridContainerPrefix + gridContainerId;
4952
containerCtrl.containerId = $scope.containerId;
5053
containerCtrl.rowContainer = rowContainer;
5154
containerCtrl.colContainer = colContainer;
55+
containerCtrl.grid = grid;
5256
},
5357
post: function postlink($scope, $elm, $attrs, controllers) {
54-
55-
var uiGridCtrl = controllers[0];
56-
var containerCtrl = controllers[1];
57-
58-
var grid = uiGridCtrl.grid;
59-
var rowContainer = containerCtrl.rowContainer;
60-
var colContainer = containerCtrl.colContainer;
61-
var scrollTop = null;
62-
var scrollLeft = null;
63-
64-
65-
var renderContainer = grid.renderContainers[$scope.containerId];
58+
var uiGridCtrl = controllers[0],
59+
containerCtrl = controllers[1],
60+
grid = uiGridCtrl.grid,
61+
rowContainer = containerCtrl.rowContainer,
62+
colContainer = containerCtrl.colContainer,
63+
scrollTop = null,
64+
scrollLeft = null,
65+
renderContainer = grid.renderContainers[$scope.containerId];
6666

6767
// Put the container name on this element as a class
6868
$elm.addClass('ui-grid-render-container-' + $scope.containerId);
@@ -120,9 +120,10 @@
120120
});
121121

122122
$elm.bind('$destroy', function() {
123-
$elm.unbind('keydown');
123+
var eventsToUnbind = ['touchstart', 'touchmove', 'touchend','keydown', 'wheel', 'mousewheel',
124+
'DomMouseScroll', 'MozMousePixelScroll'];
124125

125-
['touchstart', 'touchmove', 'touchend','keydown', 'wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function (eventName) {
126+
eventsToUnbind.forEach(function(eventName) {
126127
$elm.unbind(eventName);
127128
});
128129
});
@@ -152,9 +153,11 @@
152153
headerViewportWidth = footerViewportWidth = colContainer.getHeaderViewportWidth();
153154

154155
// Set canvas dimensions
155-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
156+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
157+
+ ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
156158

157-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
159+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
160+
+ ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
158161

159162
if (renderContainer.explicitHeaderCanvasHeight) {
160163
// get height from body container
@@ -165,22 +168,23 @@
165168
renderContainer.explicitHeaderCanvasHeight = reHCHeight.offsetHeight;
166169
}
167170

168-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
169-
' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
171+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
172+
+ ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
170173
}
171174
else {
172-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: inherit; }';
175+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
176+
+ ' .ui-grid-header-canvas { height: inherit; }';
173177
}
174178

175-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
176-
' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
177-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
178-
' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
179-
180-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
181-
' .ui-grid-footer-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
182-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId +
183-
' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
179+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
180+
+ ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
181+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
182+
+ ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
183+
184+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
185+
+ ' .ui-grid-footer-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
186+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId
187+
+ ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
184188

185189
return ret;
186190
}

‎src/templates/ui-grid/uiGridRenderContainer.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<div
22
role="presentation"
3-
ui-grid-one-bind-id-grid="containerId + '-grid-container'"
3+
ui-grid-one-bind-id-grid="RenderContainer.gridContainerId"
44
class="ui-grid-render-container"
5-
ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }">
5+
ng-style="{ 'margin-left': RenderContainer.colContainer.getMargin('left') + 'px', 'margin-right': RenderContainer.colContainer.getMargin('right') + 'px' }">
66
<!-- All of these dom elements are replaced in place -->
77
<div ui-grid-header></div>
88
<div ui-grid-viewport></div>
99
<div
10-
ng-if="colContainer.needsHScrollbarPlaceholder()"
10+
ng-if="RenderContainer.colContainer.needsHScrollbarPlaceholder()"
1111
class="ui-grid-scrollbar-placeholder"
12-
ng-style="{height:colContainer.grid.scrollbarHeight + 'px'}">
12+
ng-style="{height: RenderContainer.colContainer.grid.scrollbarHeight + 'px'}">
1313
</div>
1414
<ui-grid-footer
15-
ng-if="grid.options.showColumnFooter">
15+
ng-if="RenderContainer.grid.options.showColumnFooter">
1616
</ui-grid-footer>
1717
</div>

‎test/unit/core/directives/ui-grid-render-container.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
try {
8383
recompile();
8484
} catch (error) {
85-
expect(error.message).toEqual('Row render container \'mock\' is not registered.');
85+
expect(error.message).toEqual('Row render container "mock" is not registered.');
8686
grid.remove();
8787
done();
8888
}
@@ -93,7 +93,7 @@
9393
try {
9494
recompile();
9595
} catch (error) {
96-
expect(error.message).toEqual('Column render container \'mock\' is not registered.');
96+
expect(error.message).toEqual('Column render container "mock" is not registered.');
9797
grid.remove();
9898
done();
9999
}

0 commit comments

Comments
 (0)