feat(main): adaption of auto-width to general HTML content.

The plugin handles now rows including HTML elements and not only text. Lodash is no more needed.
Fixed build errors, updated dependancies to lastest versions, generated files are all under /dist
minWidth and maxWidth are now respected

Author: classix-od

package.json

@@ -6,22 +6,22 @@
   "description": "The plugin ensures that the column width will be wide enough for showing the longest data of that column (or column name).",
   "dependencies": {},
   "devDependencies": {
-    "angular": "~1.5.6",
-    "angular-ui-grid": "~3.1.1",
-    "awesome-typescript-loader": "~0.17.0",
-    "commitizen": "~2.8.1",
-    "cross-env": "~1.0.8",
-    "cz-conventional-changelog": "~1.1.6",
-    "ghooks": "~1.2.1",
-    "jquery": "~2.2.4",
-    "lodash": "~3.10.1",
-    "ng-annotate-webpack-plugin": "~0.1.2",
-    "rimraf": "~2.5.2",
-    "semantic-release": "~4.3.5",
-    "typescript": "~1.8.10",
-    "typings": "~1.0.4",
-    "validate-commit-msg": "~2.6.1",
-    "webpack": "~1.13.1"
+    "angular": "~1.6.6",
+    "angular-ui-grid": "~4.0.6",
+    "awesome-typescript-loader": "~3.2.3",
+    "commitizen": "~2.9.6",
+    "cross-env": "~5.0.5",
+    "cz-conventional-changelog": "~2.0.0",
+    "ghooks": "~2.0.0",
+    "jquery": "~3.2.1",
+    "ng-annotate-webpack-plugin": "~0.2.1-pre",
+    "rimraf": "~2.6.2",
+    "semantic-release": "~8.0.3",
+    "ts-loader": "^2.3.7",
+    "typescript": "~2.5.3",
+    "typings": "~2.1.1",
+    "validate-commit-msg": "~2.14.0",
+    "webpack": "~3.6.0"
   },
   "scripts": {
     "prebuild": "typings install & rimraf dist build",

src/UiGridAutoFitColumnsService.ts

@@ -1,24 +1,29 @@
-import * as get from 'lodash/object/get';
+
 import Measurer from './Measurer';
 import UiGridMetrics from './UiGridMetrics';
 
-interface IExtendedColumnDef extends uiGrid.IColumnDef {
+export interface IExtendedColumnDef extends uiGrid.IColumnDef {
     enableColumnAutoFit: boolean;
 }
 
-interface IExtendedGridColumn extends uiGrid.IGridColumn {
+export interface IExtendedGridColumn extends uiGrid.IGridColumn {
     colDef: IExtendedColumnDef;
+    hasCustomWidth: boolean;
+    minWidth: number;
+    maxWidth: number;
+    grid: IExtendedGridInstance;
 }
 
-interface IExtendedGridInstance extends uiGrid.IGridInstance {
+export interface IExtendedGridInstance extends uiGrid.IGridInstance {
     options: IExtendedGridOptions;
+    id: number;
 }
 
-interface IExtendedGridOptions extends uiGrid.IGridOptions {
+export interface IExtendedGridOptions extends uiGrid.IGridOptions {
     enableColumnAutoFit: boolean;
 }
 
-interface IAnyFilterPredicateFunc {
+export interface IAnyFilterPredicateFunc {
     (value: any, firstFlag?: any, secondFlag?: any): string;
 }
 
@@ -87,33 +92,40 @@ export class UiGridAutoFitColumnsService {
     }
 
     columnsProcessor(renderedColumnsToProcess?: Array<IExtendedGridColumn>, rows?: Array<uiGrid.IGridRow>) {
+    
         if (!rows.length) {
             return renderedColumnsToProcess;
         }
-        // TODO: respect existing colDef options
-        // if (col.colDef.enableColumnAutoFitting === false) return;
 
         let optimalWidths: {
             [name: string]: number
         } = {};
 
+        /* to be able to calculate the width of a column in any browser, we need to temporarily deactivate the min-width and max-width attributes set before */
+        let tempCSS = '';
+        renderedColumnsToProcess.forEach(function (column) {
+            //30px and 9000px are the default values for minWidth and maxWidth in UI Grid.
+            tempCSS += ' .grid' + column.grid.id + ' ' + column.getColClass(true) + ' { min-width: 30px !important; max-width: 9000px !important; }';
+        });
+        let tempStyle = $('<style>').text(tempCSS).appendTo('body');
 
         renderedColumnsToProcess.forEach(column => {
 
-            if (column.colDef.enableColumnAutoFit) {
+            if (column.colDef.enableColumnAutoFit && !column.hasCustomWidth) {
                 const columnKey = column.field || column.name;
-                optimalWidths[columnKey] = Measurer.measureRoundedTextWidth(column.displayName, this.gridMetrics.getHeaderFont()) + this.gridMetrics.getHeaderButtonsWidth();
-
-                rows.forEach((row) => {
-                    let cellText = get(row.entity, columnKey);
-
-                    if (!!column.colDef.cellFilter) {
-                        cellText = this.getFilteredValue(cellText, column.colDef.cellFilter);
-                    }
-
-                    const currentCellWidth = Measurer.measureRoundedTextWidth(cellText, this.gridMetrics.getCellFont());
-                    const optimalCellWidth = currentCellWidth > 300 ? 300 : currentCellWidth;
-
+                
+                let currentHeaderWidth = 0;
+                if($('.ui-grid-header-cell' + column.getColClass(true))[0] !== undefined) {
+                    currentHeaderWidth = $('.ui-grid-header-cell' + column.getColClass(true))[0].scrollWidth;
+                } 
+                let optimalHeaderWidth = currentHeaderWidth < column.minWidth ? column.minWidth : currentHeaderWidth;
+                optimalHeaderWidth = optimalHeaderWidth > column.maxWidth ? column.maxWidth : optimalHeaderWidth;
+                optimalWidths[columnKey] = optimalHeaderWidth;
+
+                $(column.getColClass(true)).each(function () {
+                    let currentCellWidth = this.scrollWidth;
+                    let optimalCellWidth = currentCellWidth < column.minWidth ? column.minWidth : currentCellWidth;
+                    optimalCellWidth = optimalCellWidth > column.maxWidth ? column.maxWidth : optimalCellWidth;
                     if (optimalCellWidth > optimalWidths[columnKey]) {
                         optimalWidths[columnKey] = optimalCellWidth;
                     }
@@ -123,6 +135,9 @@ export class UiGridAutoFitColumnsService {
                 column.updateColumnDef(column.colDef, false);
             }
         });
+
+        tempStyle.remove();
+
         return renderedColumnsToProcess;
     }
 

src/UiGridMetrics.ts

@@ -50,13 +50,15 @@ export class UiGridMetrics {
 
         let header = document.querySelector('.ui-grid-header-cell .ui-grid-cell-contents');
 
-        if(!header) {
-            throw new Error('not found: .ui-grid-header-cell .ui-grid-cell-contents');
+        if(header !== null) {
+            let {paddingLeft, paddingRight} = getComputedStyle(header);
+            this.padding = parseInt(paddingLeft) + parseInt(paddingRight);
+            return this.padding;
+        } else {
+            return 0;
         }
 
-        let {paddingLeft, paddingRight} = getComputedStyle(header);
-        this.padding = parseInt(paddingLeft) + parseInt(paddingRight);
-        return this.padding;
+        
     }
 
     getBorder(){
@@ -66,13 +68,16 @@ export class UiGridMetrics {
 
         let header = document.querySelector('.ui-grid-header-cell');
 
-        if(!header) {
-            throw new Error('not found: .ui-grid-header-cell');
+        if(header !== null) {
+            let {borderRightWidth} = getComputedStyle(header);
+            this.border = parseInt(borderRightWidth);
+            return this.border;
+        }
+        else {
+            return 0;
         }
 
-        let {borderRightWidth} = getComputedStyle(header);
-        this.border = parseInt(borderRightWidth);
-        return this.border;
+        
     }
 
     getHeaderButtonsWidth(){

tsconfig.json

@@ -3,7 +3,7 @@
         "module": "commonjs",
         "target": "es5",
         "sourceMap": true,
-        "outDir": "./",
+        "outDir": "./dist/compiler/",
         "removeComments": false,
         "noImplicitAny": false,
         "noEmitHelpers": false,

typings.json

@@ -4,7 +4,7 @@
   "devDependencies": {},
   "globalDependencies": {
     "angular": "registry:dt/angular#1.5.0+20160517064839",
-    "jquery": "registry:dt/jquery#1.10.0+20160417213236",
+    "jquery": "registry:dt/jquery#1.10.0+20170310222111",
     "ui-grid": "registry:dt/ui-grid#0.0.0+20160423061350"
   }
 }

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
     entry: './src/index.ts',
 
     output: {
-        path: './dist',
+        path: __dirname + '/dist',
         filename: isProduction() ? 'autoFitColumns.min.js' : 'autoFitColumns.js',
         libraryTarget: 'umd'
     },
@@ -21,14 +21,14 @@ module.exports = {
     },
 
     resolve: {
-        extensions: ['', '.ts', '.webpack.js', '.web.js', '.js']
+        extensions: ['.ts', '.webpack.js', '.web.js', '.js']
     },
 
     devtool: 'source-map',
 
     module: {
         loaders: [
-            { test: /\.ts$/, loader: 'awesome-typescript', exclude: /(node_modules|bower_components)/ }
+            { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: /(node_modules|bower_components)/ }
         ]
     },
 
@@ -46,4 +46,4 @@ if(isProduction()) {
             drop_console: true
         }})
     );
-}
+}