Permalink
Browse files

Removing all borders. Fixing a few width issues.

  • Loading branch information...
1 parent fb11718 commit 2c10b5b7739dc0c1b6f01aecbe7a3a4bd2ad816f @jonricaurte jonricaurte committed Jun 25, 2013
View
@@ -2,7 +2,7 @@
* ng-grid JavaScript Library
* Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
-* Compiled At: 06/23/2013 19:00
+* Compiled At: 06/24/2013 22:01
***********************************************/
(function(window, $) {
'use strict';
@@ -1133,13 +1133,24 @@ var ngEventProvider = function (grid, $scope, domUtilityService, $timeout) {
domUtilityService.numberOfGrids++;
} else {
grid.$viewport.attr('tabIndex', grid.config.tabIndex);
- }// resize on window resize
- $(window).resize(function() {
- domUtilityService.RebuildGrid($scope,grid);
+ }
+ // resize on window resize
+ var windowThrottle;
+ $(window).resize(function(){
+ clearTimeout(windowThrottle);
+ windowThrottle = setTimeout(function() {
+ //in function for IE8 compatibility
+ domUtilityService.RebuildGrid($scope,grid);
+ }, 100);
});
// resize on parent resize as well.
+ var parentThrottle;
$(grid.$root.parent()).on('resize', function() {
- domUtilityService.RebuildGrid($scope, grid);
+ clearTimeout(parentThrottle);
+ parentThrottle = setTimeout(function() {
+ //in function for IE8 compatibility
+ domUtilityService.RebuildGrid($scope,grid);
+ }, 100);
});
};
// In this example we want to assign grid events.
@@ -1464,9 +1475,15 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
self.data = self.config.data; // we cannot watch for updates if you don't pass the string name
}
self.calcMaxCanvasHeight = function() {
- return (self.config.groups.length > 0) ? (self.rowFactory.parsedData.filter(function(e) {
- return !e[NG_HIDDEN];
- }).length * self.config.rowHeight) : (self.filteredRows.length * self.config.rowHeight);
+ var calculatedHeight;
+ if(self.config.groups.length > 0){
+ calculatedHeight = self.rowFactory.parsedData.filter(function(e) {
+ return !e[NG_HIDDEN];
+ }).length * self.config.rowHeight;
+ } else {
+ calculatedHeight = self.filteredRows.length * self.config.rowHeight;
+ }
+ return calculatedHeight;
};
self.elementDims = {
scrollW: 0,
@@ -1591,15 +1608,15 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
angular.forEach(cols, function(col, i) {
- i += indexOffset;
- var isPercent = false, t;
- //if width is not defined, set it to a single star
- if ($utils.isNullOrUndefined(col.width)) {
- col.width = "*";
- } else { // get column width
- isPercent = isNaN(col.width) ? $utils.endsWith(col.width, "%") : false;
- t = isPercent ? col.width : parseInt(col.width, 10);
- }
+ i += indexOffset;
+ var isPercent = false, t;
+ //if width is not defined, set it to a single star
+ if ($utils.isNullOrUndefined(col.width)) {
+ col.width = "*";
+ } else { // get column width
+ isPercent = isNaN(col.width) ? $utils.endsWith(col.width, "%") : false;
+ t = isPercent ? col.width : parseInt(col.width, 10);
+ }
// check if it is a number
if (isNaN(t)) {
t = col.width;
@@ -1630,11 +1647,23 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
totalWidth += $scope.columns[i].width = parseInt(col.width, 10);
}
});
+ // Now we check if we saved any percentage columns for calculating last
+ if (percentArray.length > 0) {
+ //if they use percentages, they expect column ratios to stay intact especially if grid width is percentage or using position absolute
+ self.config.maintainColumnRatios = true;
+ // do the math
+ angular.forEach(percentArray, function(col) {
+ var t = col.width;
+ $scope.columns[col.index].width = Math.floor(self.rootDim.outerWidth * (parseInt(t.slice(0, -1), 10) / 100));
+ if (col.visible !== false) {
+ totalWidth += $scope.columns[col.index].width;
+ }
+ });
+ }
// check if we saved any asterisk columns for calculating later
if (asterisksArray.length > 0) {
-
- // WTF is this? -- Brian (2013-05-24)
- self.config.maintainColumnRatios = self.config.maintainColumnRatios !== false;
+ //if they use *s, they expect column ratios to stay intact especially if grid width is percentage or using position absolute
+ self.config.maintainColumnRatios = true;
// get the remaining width
var remainingWidth = self.rootDim.outerWidth - totalWidth;
// are we overflowing vertically?
@@ -1646,21 +1675,21 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
var asteriskVal = Math.floor(remainingWidth / asteriskNum);
// set the width of each column based on the number of stars
angular.forEach(asterisksArray, function(col, i) {
- var isLast = (i === (asterisksArray.length - 1));
var t = col.width.length;
$scope.columns[col.index].width = asteriskVal * t;
- $scope.columns[col.index].width -= isLast ? 0 : 2;
if (col.visible !== false) {
totalWidth += $scope.columns[col.index].width;
}
- });
- }
- // Now we check if we saved any percentage columns for calculating last
- if (percentArray.length > 0) {
- // do the math
- angular.forEach(percentArray, function(col) {
- var t = col.width;
- $scope.columns[col.index].width = Math.floor(self.rootDim.outerWidth * (parseInt(t.slice(0, -1), 10) / 100));
+
+ var isLast = (i === (asterisksArray.length - 1));
+ //if last asterisk and doesn't fill width of grid, add the difference
+ if(isLast && totalWidth < self.rootDim.outerWidth){
+ var gridWidthDifference = self.rootDim.outerWidth - totalWidth;
+ if(self.maxCanvasHt > $scope.viewportDimHeight()){
+ gridWidthDifference -= domUtilityService.ScrollW;
+ }
+ $scope.columns[col.index].width += gridWidthDifference;
+ }
});
}
};
@@ -2712,7 +2741,7 @@ var ngStyleProvider = function($scope, grid) {
return ret;
};
$scope.canvasStyle = function() {
- return { "height": grid.maxCanvasHt.toString() + "px" };
+ return { "height": grid.maxCanvasHt + "px" };
};
$scope.headerScrollerStyle = function() {
return { "height": grid.config.headerRowHeight + "px" };
@@ -2721,10 +2750,10 @@ var ngStyleProvider = function($scope, grid) {
return { "width": grid.rootDim.outerWidth + "px", "height": $scope.topPanelHeight() + "px" };
};
$scope.headerStyle = function() {
- return { "width": (grid.rootDim.outerWidth) + "px", "height": grid.config.headerRowHeight + "px" };
+ return { "width": grid.rootDim.outerWidth + "px", "height": grid.config.headerRowHeight + "px" };
};
$scope.groupPanelStyle = function () {
- return { "width": (grid.rootDim.outerWidth) + "px", "height": "32px" };
+ return { "width": grid.rootDim.outerWidth + "px", "height": "32px" };
};
$scope.viewportStyle = function() {
return { "width": grid.rootDim.outerWidth + "px", "height": $scope.viewportDimHeight() + "px" };
@@ -3315,11 +3344,11 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
$templateCache.put("cellEditTemplate.html",
"<div ng-cell-has-focus ng-dblclick=\"editCell()\">" +
- " <div ng-edit-cell-if=\"!isFocused\">" +
- " DISPLAY_CELL_TEMPLATE" +
+ " <div ng-edit-cell-if=\"!isFocused\"> " +
+ " DISPLAY_CELL_TEMPLATE" +
" </div>" +
" <div ng-edit-cell-if=\"isFocused\">" +
- " EDITABLE_CELL_TEMPLATE" +
+ " EDITABLE_CELL_TEMPLATE" +
" </div>" +
"</div>"
);
@@ -3409,7 +3438,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
);
$templateCache.put("headerRowTemplate.html",
- "<div ng-style=\"{ height: col.headerRowHeight }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngHeaderCell\" ng-header-cell></div>"
+ "<div ng-style=\"{ height: col.headerRowHeight }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngHeaderCell\">" +
+ " <div class=\"ngVerticalBar\" ng-style=\"{height: col.headerRowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$first }\">&nbsp;</div>" +
+ " <div ng-header-cell></div>" +
+ "</div>"
);
$templateCache.put("menuTemplate.html",
@@ -3434,7 +3466,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
);
$templateCache.put("rowTemplate.html",
- "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\" ng-cell></div>"
+ "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\">" +
+ " <div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$first }\">&nbsp;</div>" +
+ " <div ng-cell></div>" +
+ "</div>"
);
}]);
View
@@ -2,7 +2,7 @@
* ng-grid JavaScript Library
* Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
-* Compiled At: 06/23/2013 19:00
+* Compiled At: 06/24/2013 22:01
***********************************************/
(function(window, $) {
'use strict';
@@ -1045,11 +1045,19 @@ var ngEventProvider = function (grid, $scope, domUtilityService, $timeout) {
} else {
grid.$viewport.attr('tabIndex', grid.config.tabIndex);
}
- $(window).resize(function() {
- domUtilityService.RebuildGrid($scope,grid);
+ var windowThrottle;
+ $(window).resize(function(){
+ clearTimeout(windowThrottle);
+ windowThrottle = setTimeout(function() {
+ domUtilityService.RebuildGrid($scope,grid);
+ }, 100);
});
+ var parentThrottle;
$(grid.$root.parent()).on('resize', function() {
- domUtilityService.RebuildGrid($scope, grid);
+ clearTimeout(parentThrottle);
+ parentThrottle = setTimeout(function() {
+ domUtilityService.RebuildGrid($scope,grid);
+ }, 100);
});
};
self.assignGridEventHandlers();
@@ -1246,9 +1254,15 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
self.data = self.config.data;
}
self.calcMaxCanvasHeight = function() {
- return (self.config.groups.length > 0) ? (self.rowFactory.parsedData.filter(function(e) {
- return !e[NG_HIDDEN];
- }).length * self.config.rowHeight) : (self.filteredRows.length * self.config.rowHeight);
+ var calculatedHeight;
+ if(self.config.groups.length > 0){
+ calculatedHeight = self.rowFactory.parsedData.filter(function(e) {
+ return !e[NG_HIDDEN];
+ }).length * self.config.rowHeight;
+ } else {
+ calculatedHeight = self.filteredRows.length * self.config.rowHeight;
+ }
+ return calculatedHeight;
};
self.elementDims = {
scrollW: 0,
@@ -1372,14 +1386,14 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
angular.forEach(cols, function(col, i) {
- i += indexOffset;
- var isPercent = false, t;
- if ($utils.isNullOrUndefined(col.width)) {
- col.width = "*";
- } else {
- isPercent = isNaN(col.width) ? $utils.endsWith(col.width, "%") : false;
- t = isPercent ? col.width : parseInt(col.width, 10);
- }
+ i += indexOffset;
+ var isPercent = false, t;
+ if ($utils.isNullOrUndefined(col.width)) {
+ col.width = "*";
+ } else {
+ isPercent = isNaN(col.width) ? $utils.endsWith(col.width, "%") : false;
+ t = isPercent ? col.width : parseInt(col.width, 10);
+ }
if (isNaN(t)) {
t = col.width;
if (t === 'auto') {
@@ -1408,27 +1422,38 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
totalWidth += $scope.columns[i].width = parseInt(col.width, 10);
}
});
+ if (percentArray.length > 0) {
+ self.config.maintainColumnRatios = true;
+ angular.forEach(percentArray, function(col) {
+ var t = col.width;
+ $scope.columns[col.index].width = Math.floor(self.rootDim.outerWidth * (parseInt(t.slice(0, -1), 10) / 100));
+ if (col.visible !== false) {
+ totalWidth += $scope.columns[col.index].width;
+ }
+ });
+ }
if (asterisksArray.length > 0) {
- self.config.maintainColumnRatios = self.config.maintainColumnRatios !== false;
+ self.config.maintainColumnRatios = true;
var remainingWidth = self.rootDim.outerWidth - totalWidth;
if (self.maxCanvasHt > $scope.viewportDimHeight()) {
remainingWidth -= domUtilityService.ScrollW;
}
var asteriskVal = Math.floor(remainingWidth / asteriskNum);
angular.forEach(asterisksArray, function(col, i) {
- var isLast = (i === (asterisksArray.length - 1));
var t = col.width.length;
$scope.columns[col.index].width = asteriskVal * t;
- $scope.columns[col.index].width -= isLast ? 0 : 2;
if (col.visible !== false) {
totalWidth += $scope.columns[col.index].width;
}
- });
- }
- if (percentArray.length > 0) {
- angular.forEach(percentArray, function(col) {
- var t = col.width;
- $scope.columns[col.index].width = Math.floor(self.rootDim.outerWidth * (parseInt(t.slice(0, -1), 10) / 100));
+
+ var isLast = (i === (asterisksArray.length - 1));
+ if(isLast && totalWidth < self.rootDim.outerWidth){
+ var gridWidthDifference = self.rootDim.outerWidth - totalWidth;
+ if(self.maxCanvasHt > $scope.viewportDimHeight()){
+ gridWidthDifference -= domUtilityService.ScrollW;
+ }
+ $scope.columns[col.index].width += gridWidthDifference;
+ }
});
}
};
@@ -2418,7 +2443,7 @@ var ngStyleProvider = function($scope, grid) {
return ret;
};
$scope.canvasStyle = function() {
- return { "height": grid.maxCanvasHt.toString() + "px" };
+ return { "height": grid.maxCanvasHt + "px" };
};
$scope.headerScrollerStyle = function() {
return { "height": grid.config.headerRowHeight + "px" };
@@ -2427,10 +2452,10 @@ var ngStyleProvider = function($scope, grid) {
return { "width": grid.rootDim.outerWidth + "px", "height": $scope.topPanelHeight() + "px" };
};
$scope.headerStyle = function() {
- return { "width": (grid.rootDim.outerWidth) + "px", "height": grid.config.headerRowHeight + "px" };
+ return { "width": grid.rootDim.outerWidth + "px", "height": grid.config.headerRowHeight + "px" };
};
$scope.groupPanelStyle = function () {
- return { "width": (grid.rootDim.outerWidth) + "px", "height": "32px" };
+ return { "width": grid.rootDim.outerWidth + "px", "height": "32px" };
};
$scope.viewportStyle = function() {
return { "width": grid.rootDim.outerWidth + "px", "height": $scope.viewportDimHeight() + "px" };
@@ -2983,11 +3008,11 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
$templateCache.put("cellEditTemplate.html",
"<div ng-cell-has-focus ng-dblclick=\"editCell()\">" +
- " <div ng-edit-cell-if=\"!isFocused\">" +
- " DISPLAY_CELL_TEMPLATE" +
+ " <div ng-edit-cell-if=\"!isFocused\"> " +
+ " DISPLAY_CELL_TEMPLATE" +
" </div>" +
" <div ng-edit-cell-if=\"isFocused\">" +
- " EDITABLE_CELL_TEMPLATE" +
+ " EDITABLE_CELL_TEMPLATE" +
" </div>" +
"</div>"
);
@@ -3077,7 +3102,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
);
$templateCache.put("headerRowTemplate.html",
- "<div ng-style=\"{ height: col.headerRowHeight }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngHeaderCell\" ng-header-cell></div>"
+ "<div ng-style=\"{ height: col.headerRowHeight }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngHeaderCell\">" +
+ " <div class=\"ngVerticalBar\" ng-style=\"{height: col.headerRowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$first }\">&nbsp;</div>" +
+ " <div ng-header-cell></div>" +
+ "</div>"
);
$templateCache.put("menuTemplate.html",
@@ -3102,7 +3130,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) {
);
$templateCache.put("rowTemplate.html",
- "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\" ng-cell></div>"
+ "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\">" +
+ " <div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$first }\">&nbsp;</div>" +
+ " <div ng-cell></div>" +
+ "</div>"
);
}]);
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 2c10b5b

Please sign in to comment.