From 2c10b5b7739dc0c1b6f01aecbe7a3a4bd2ad816f Mon Sep 17 00:00:00 2001 From: jonricaurte Date: Mon, 24 Jun 2013 22:04:20 -0700 Subject: [PATCH 01/34] Removing all borders. Fixing a few width issues. --- build/ng-grid.debug.js | 111 ++++++++++++------ build/ng-grid.js | 95 ++++++++++----- build/ng-grid.min.js | 4 +- ng-grid-2.0.6.min.js | 2 - ...d-2.0.6.debug.js => ng-grid-2.0.7.debug.js | 111 ++++++++++++------ ng-grid-2.0.7.min.js | 2 + ng-grid.css | 16 +-- ng-grid.min.css | 2 +- package.json | 2 +- src/classes/eventProvider.js | 19 ++- src/classes/grid.js | 68 +++++++---- src/classes/styleProvider.js | 6 +- src/less/cell.less | 6 - src/less/global.less | 11 ++ src/less/header.less | 2 - src/templates/cellEditTemplate.html | 6 +- src/templates/headerRowTemplate.html | 5 +- src/templates/rowTemplate.html | 5 +- workbench/main.js | 1 - 19 files changed, 307 insertions(+), 167 deletions(-) delete mode 100644 ng-grid-2.0.6.min.js rename ng-grid-2.0.6.debug.js => ng-grid-2.0.7.debug.js (97%) create mode 100644 ng-grid-2.0.7.min.js diff --git a/build/ng-grid.debug.js b/build/ng-grid.debug.js index 31402645d4..62e939179b 100644 --- a/build/ng-grid.debug.js +++ b/build/ng-grid.debug.js @@ -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", "
" + - "
" + - " DISPLAY_CELL_TEMPLATE" + + "
" + + " DISPLAY_CELL_TEMPLATE" + "
" + "
" + - " EDITABLE_CELL_TEMPLATE" + + " EDITABLE_CELL_TEMPLATE" + "
" + "
" ); @@ -3409,7 +3438,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) { ); $templateCache.put("headerRowTemplate.html", - "
" + "
" + + "
 
" + + "
" + + "
" ); $templateCache.put("menuTemplate.html", @@ -3434,7 +3466,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) { ); $templateCache.put("rowTemplate.html", - "
" + "
" + + "
 
" + + "
" + + "
" ); }]); diff --git a/build/ng-grid.js b/build/ng-grid.js index 4e55335e67..1c5f57239b 100644 --- a/build/ng-grid.js +++ b/build/ng-grid.js @@ -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", "
" + - "
" + - " DISPLAY_CELL_TEMPLATE" + + "
" + + " DISPLAY_CELL_TEMPLATE" + "
" + "
" + - " EDITABLE_CELL_TEMPLATE" + + " EDITABLE_CELL_TEMPLATE" + "
" + "
" ); @@ -3077,7 +3102,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) { ); $templateCache.put("headerRowTemplate.html", - "
" + "
" + + "
 
" + + "
" + + "
" ); $templateCache.put("menuTemplate.html", @@ -3102,7 +3130,10 @@ angular.module("ngGrid").run(["$templateCache", function($templateCache) { ); $templateCache.put("rowTemplate.html", - "
" + "
" + + "
 
" + + "
" + + "
" ); }]); diff --git a/build/ng-grid.min.js b/build/ng-grid.min.js index de236c28a7..5790f4f55f 100644 --- a/build/ng-grid.min.js +++ b/build/ng-grid.min.js @@ -1,2 +1,2 @@ -(function(e,t){"use strict";var n=6,o=4,i="asc",r="desc",l="_ng_field_",a="_ng_depth_",s="_ng_hidden_",c="_ng_column_",g=/CUSTOM_FILTERS/g,d=/COL_FIELD/g,u=/DISPLAY_CELL_TEMPLATE/g,f=/EDITABLE_CELL_TEMPLATE/g,h=/<.+>/;e.ngGrid={},e.ngGrid.i18n={},angular.module("ngGrid.services",[]);var p=angular.module("ngGrid.directives",[]),m=angular.module("ngGrid.filters",[]);angular.module("ngGrid",["ngGrid.services","ngGrid.directives","ngGrid.filters"]);var v=function(e,t,o,i){if(void 0===e.selectionProvider.selectedItems)return!0;var r,l=o.which||o.keyCode,a=!1,s=!1,c=e.selectionProvider.lastClickedRow.rowIndex,g=e.columns.filter(function(e){return e.visible}),d=e.columns.filter(function(e){return e.pinned});if(e.col&&(r=g.indexOf(e.col)),37!==l&&38!==l&&39!==l&&40!==l&&9!==l&&13!==l)return!0;if(e.enableCellSelection){9===l&&o.preventDefault();var u=e.showSelectionCheckbox?1===e.col.index:0===e.col.index,f=1===e.$index||0===e.$index,h=e.$index===e.renderedColumns.length-1||e.$index===e.renderedColumns.length-2,p=g.indexOf(e.col)===g.length-1,m=d.indexOf(e.col)===d.length-1;if(37===l||9===l&&o.shiftKey){var v=0;u||(r-=1),f?u&&9===l&&o.shiftKey?(v=i.$canvas.width(),r=g.length-1,s=!0):v=i.$viewport.scrollLeft()-e.col.width:d.length>0&&(v=i.$viewport.scrollLeft()-g[r].width),i.$viewport.scrollLeft(v)}else(39===l||9===l&&!o.shiftKey)&&(h?p&&9===l&&!o.shiftKey?(i.$viewport.scrollLeft(0),r=e.showSelectionCheckbox?1:0,a=!0):i.$viewport.scrollLeft(i.$viewport.scrollLeft()+e.col.width):m&&i.$viewport.scrollLeft(0),p||(r+=1))}var w;w=e.configGroups.length>0?i.rowFactory.parsedData.filter(function(e){return!e.isAggRow}):i.filteredRows;var C=0;if(0!==c&&(38===l||13===l&&o.shiftKey||9===l&&o.shiftKey&&s)?C=-1:c!==w.length-1&&(40===l||13===l&&!o.shiftKey||9===l&&a)&&(C=1),C){var b=w[c+C];b.beforeSelectionChange(b,o)&&(b.continueSelection(o),e.$emit("ngGridEventDigestGridParent"),e.selectionProvider.lastClickedRow.renderedRowIndex>=e.renderedRows.length-n-2?i.$viewport.scrollTop(i.$viewport.scrollTop()+e.rowHeight):n+2>=e.selectionProvider.lastClickedRow.renderedRowIndex&&i.$viewport.scrollTop(i.$viewport.scrollTop()-e.rowHeight))}return e.enableCellSelection&&setTimeout(function(){e.domAccessProvider.focusCellElement(e,e.renderedColumns.indexOf(g[r]))},3),!1};String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")}),Array.prototype.indexOf||(Array.prototype.indexOf=function(e){var t=this.length>>>0,n=Number(arguments[1])||0;for(n=0>n?Math.ceil(n):Math.floor(n),0>n&&(n+=t);t>n;n++)if(n in this&&this[n]===e)return n;return-1}),Array.prototype.filter||(Array.prototype.filter=function(e){var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError;for(var o=[],i=arguments[1],r=0;n>r;r++)if(r in t){var l=t[r];e.call(i,l,r,t)&&o.push(l)}return o}),m.filter("checkmark",function(){return function(e){return e?"✔":"✘"}}),m.filter("ngColumns",function(){return function(e){return e.filter(function(e){return!e.isAggCol})}}),angular.module("ngGrid.services").factory("$domUtilityService",["$utilityService",function(e){var n={},o={},i=function(){var e=t("
");e.appendTo("body"),e.height(100).width(100).css("position","absolute").css("overflow","scroll"),e.append('
'),n.ScrollH=e.height()-e[0].clientHeight,n.ScrollW=e.width()-e[0].clientWidth,e.empty(),e.attr("style",""),e.append('M'),n.LetterW=e.children().first().width(),e.remove()};return n.eventStorage={},n.AssignGridContainers=function(e,o,i){i.$root=t(o),i.$topPanel=i.$root.find(".ngTopPanel"),i.$groupPanel=i.$root.find(".ngGroupPanel"),i.$headerContainer=i.$topPanel.find(".ngHeaderContainer"),e.$headerContainer=i.$headerContainer,i.$headerScroller=i.$topPanel.find(".ngHeaderScroller"),i.$headers=i.$headerScroller.children(),i.$viewport=i.$root.find(".ngViewport"),i.$canvas=i.$viewport.find(".ngCanvas"),i.$footerPanel=i.$root.find(".ngFooterPanel"),e.$watch(function(){return i.$viewport.scrollLeft()},function(e){return i.$headerContainer.scrollLeft(e)}),n.UpdateGridLayout(e,i)},n.getRealWidth=function(e){var n=0,o={visibility:"hidden",display:"block"},i=e.parents().andSelf().not(":visible");return t.swap(i[0],o,function(){n=e.outerWidth()}),n},n.UpdateGridLayout=function(e,t){var o=t.$viewport.scrollTop();t.elementDims.rootMaxW=t.$root.width(),t.$root.is(":hidden")&&(t.elementDims.rootMaxW=n.getRealWidth(t.$root)),t.elementDims.rootMaxH=t.$root.height(),t.refreshDomSizes(),e.adjustScrollTop(o,!0)},n.numberOfGrids=0,n.BuildStyles=function(o,i,r){var l,a=i.config.rowHeight,s=i.$styleSheet,c=i.gridId,g=o.columns,d=0;s||(s=t("#"+c),s[0]||(s=t("