feat(main): adaption of width to general HTML

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
         }})
     );
-}
+}