Fixed column widths test

Gruntfile.js

@@ -2,6 +2,7 @@ module.exports = function (grunt) {
 
     var webpack = require('webpack');
     var webpackConfig = require('./webpack.config.js');
+    var Clean = require('clean-webpack-plugin');
     var fs = require('fs');
     var path = require('path');
     // var pkg = grunt.file.readJSON('package.json');
@@ -38,16 +39,10 @@ module.exports = function (grunt) {
         },
 
         copy: {
-            build: {
-                src: ['**'],
-                cwd: 'static/style',
-                dest: 'build/tablefilter',
-                expand: true
-            },
             dist: {
                 src: ['**'],
                 cwd: 'static/style',
-                dest: 'dist/tablefilter',
+                dest: 'dist/tablefilter/style',
                 expand: true
             }
         },
@@ -55,7 +50,7 @@ module.exports = function (grunt) {
         'webpack-dev-server': {
             options: {
                 webpack: webpack.dev,
-                publicPath: '/build/'
+                publicPath: '/dist/'
             },
             start: {
                 keepAlive: true,
@@ -67,44 +62,31 @@ module.exports = function (grunt) {
         },
 
         webpack: {
-            dist: webpackConfig.dist,
+            options: webpackConfig,
-            build: webpackConfig.build
+            build: {
-            // 'dev': {
+                plugins: [
-            //     entry: __dirname + '/src/tablefilter.js',
+                    new Clean(['dist']),
-            //     // entry: {
+                    new webpack.optimize.DedupePlugin(),
-            //     //     tablefilter: __dirname + '/src/tablefilter.js',
+                    new webpack.optimize.MinChunkSizePlugin(
-            //     //     colsVisibility: __dirname +
+                        {minChunkSize: 10000}),
-            //     //     '/src/extensions/colsVisibility/colsVisibility.js'
+                    new webpack.optimize.UglifyJsPlugin()
-            //     // },
+                ]
-            //     output: {
+            },
-            //         publicPath: '/src/',
+            // build: webpackConfig.build,
-            //         path: __dirname + '/src',
+            'build-dev': {
-            //         filename: 'tablefilter.js',
+                devtool: 'sourcemap',
-            //         chunkFilename: '[name].js',
+                debug: true,
-            //         libraryTarget: 'umd'
+                plugins: [
-            //     },
+                    new Clean(['dist']),
-            //     resolve: {
+                    new webpack.optimize.DedupePlugin()
-            //         extensions: ['', '.js']
+                ]
-            //     },
+            }
-            //     module: {
-            //         loaders: [{
-            //             test: path.join(__dirname, 'src'),
-            //             exclude: /node_modules/,
-            //             query: {
-            //                 compact: false
-            //             },
-            //             loader: 'babel-loader'
-            //         }]
-            //     },
-            //     devtool: 'sourcemap',
-            //     debug: true
-            // },
         },
 
         watch: {
             app: {
-                files: ["src/**/*"],
+                files: ['src/**/*'],
-                tasks: ["dev"],
+                tasks: ['dev'],
                 options: {
                     spawn: false
                 }
@@ -122,7 +104,7 @@ module.exports = function (grunt) {
                     expand: true,
                     cwd: 'src',
                     src: ['**/*.js'],
-                    dest: 'build/tablefilter'
+                    dest: 'dist/tablefilter'
                 }]
             }
         }
@@ -136,23 +118,22 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-webpack');
     grunt.loadNpmTasks('grunt-babel');
 
-
     grunt.registerTask('default',
-        ['jshint', 'webpack:dist', 'copy:dist', 'test']);
+        ['jshint', 'webpack:build', 'copy:dist', 'test']);
 
     // The development server (the recommended option for development)
     grunt.registerTask('server', ['webpack-dev-server:start']);
 
 
     grunt.registerTask('dev',
-        ['jshint', 'webpack:build', 'copy:build', 'watch:app']);
+        ['jshint', 'webpack:build-dev', 'copy:dist', 'watch:app']);
 
     // Production build
-    grunt.registerTask('dist',
+    grunt.registerTask('build',
-        ['jshint', 'webpack:dist', 'copy:dist']);
+        ['jshint', 'webpack:build', 'copy:dist']);
 
     // Transpile with Babel
-    grunt.registerTask('dev-modules', ['babel', 'copy:build']);
+    grunt.registerTask('dev-modules', ['babel', 'copy:dist']);
 
     // Tests
     grunt.registerTask('test', ['qunit:all']);

dist/tablefilter/filtersVisibility.css

@@ -1,22 +0,0 @@
-/*====================================================
-	- HTML Table Filter Generator 
-	- Filters Row Visibility Manager Extension v1.1
-	- do not hesitate to edit classes below to 
-	change extension appearance
-=====================================================*/
-
-/* container */
-span.expClpFlt{ }
-
-/* icon */
-span.expClpFlt img{ 
-	vertical-align:middle; 
-	border:1px solid #ccc;
-	padding:1px 1px 1px 1px;
-	margin:1px 1px 1px 1px;
-	background:#f4f4f4;
-}
-span.expClpFlt img:hover{ background:#fff; border:1px solid #666;  }
-
-/* button */
-.btnExpClpFlt{ margin:0 5px 0 5px; }

dist/tablefilter/style/filtersVisibility.css

@@ -0,0 +1,26 @@
+/*====================================================
+	- HTML Table Filter Generator
+	- Filters Row Visibility Manager Extension v1.1
+	- do not hesitate to edit classes below to
+	change extension appearance
+=====================================================*/
+
+/* container */
+span.expClpFlt{ }
+
+/* icon */
+span.expClpFlt img{
+	vertical-align:middle;
+    border:0;
+	/*border:1px solid #ccc;*/
+	padding:1px 1px 1px 1px;
+	margin:1px 1px 1px 1px;
+	/*background:#f4f4f4;*/
+}
+span.expClpFlt img:hover{
+    background:#fff;
+    /*border:1px solid #666;  */
+}
+
+/* button */
+.btnExpClpFlt{ margin:0 5px 0 5px; }

examples/dev.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <title>HTML Table Filter Generator</title>
-    <link rel="stylesheet" type="text/css" href="../build/tablefilter/tablefilter.css">
+    <link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/tablefilter.css">
 </head>
 <body>
     <div id="test"></div>
@@ -86,7 +86,7 @@
         <button onclick="tf.init();">Reset</button>
     </div>
 
-    <script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
+    <script type="text/javascript" src="../dist/tablefilter/tablefilter.js"></script>
     <script>
         var table = document.getElementById('demo');
         var totRowIndex = table.getElementsByTagName("tr").length;
@@ -95,7 +95,7 @@
             col_0: 'select',
             col_2: 'checklist',
             col_3: 'select',
-            base_path: '../build/tablefilter/',
+            base_path: '../dist/tablefilter/',
             // fill_slc_on_demand: true,
             rows_counter: true,
             // enable_default_theme: true,

src/extensions/colsVisibility/colsVisibility.js

@@ -120,10 +120,7 @@ export default class ColsVisibility{
         }
 
         //Loads extension stylesheet
-        // tf.import(
+        tf.import(f.name+'Style', tf.stylePath + this.stylesheet, null, 'link');
-        //     f.name+'Style', this.path +'/'+ this.stylesheet, null, 'link');
-        tf.import(
-            f.name+'Style', tf.basePath + this.stylesheet, null, 'link');
 
         this.tf = tf;
     }

src/extensions/filtersVisibility/filtersVisibility.js

@@ -16,7 +16,7 @@ export default class FiltersVisibility{
         this.desc = f.description || 'Filters row visibility manager';
 
         // Path and image filenames
-        this.path = f.path || tf.basePath;
+        this.path = f.path || tf.stylePath;
         this.stylesheet = f.stylesheet || 'filtersVisibility.css';
         this.icnExpand = f.expand_icon_name || 'icn_exp.png';
         this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';
@@ -74,12 +74,14 @@ export default class FiltersVisibility{
         this.onAfterHide = Types.isFn(f.on_after_hide) ? f.on_after_hide : null;
 
         //Loads extension stylesheet
-        tf.import(
+        tf.import(f.name+'Style', tf.stylePath + this.stylesheet, null, 'link');
-            f.name+'Style', tf.basePath + this.stylesheet, null, 'link');
 
         this.tf = tf;
     }
 
+    /**
+     * Initialise extension
+     */
     init(){
         if(this.initialized){
             return;
@@ -89,6 +91,9 @@ export default class FiltersVisibility{
         this.initialized = true;
     }
 
+    /**
+     * Build UI elements
+     */
     buildUI(){
         let tf = this.tf;
         let span = Dom.create('span',['id', this.prfx+tf.id]);
@@ -129,6 +134,9 @@ export default class FiltersVisibility{
         }
     }
 
+    /**
+     * Toggle filters visibility
+     */
     toggle(){
         let tf = this.tf;
         let tbl = tf.gridLayout? tf.Cpt.gridLayout.headTbl : tf.tbl;
@@ -156,6 +164,9 @@ export default class FiltersVisibility{
         }
     }
 
+    /**
+     * Destroy the UI
+     */
     destroy(){
         if(!this.btnEl && !this.contEl){
             return;

src/tablefilter.js

@@ -99,7 +99,8 @@ export class TableFilter{
 
         //default script base path
         this.basePath = f.base_path || 'tablefilter/';
-        this.extensionsPath = f.extensions_path || this.basePath+'extensions/';
+        //this.extensionsPath = f.extensions_path ||
+        //  this.basePath+'extensions/';
 
         /*** filter types ***/
         this.fltTypeInp = 'input';
@@ -179,7 +180,8 @@ export class TableFilter{
 
         /*** filters' grid appearance ***/
         //stylesheet file
-        this.stylesheet = f.stylesheet || this.basePath+'tablefilter.css';
+        this.stylePath = f.style_path || this.basePath + 'style/';
+        this.stylesheet = f.stylesheet || this.stylePath+'tablefilter.css';
         this.stylesheetId = this.id + '_style';
         //defines css class for filters row
         this.fltsRowCssClass = f.flts_row_css_class || 'fltrow';
@@ -486,7 +488,7 @@ export class TableFilter{
         this.hasThemes = (this.enableDefaultTheme || Types.isArray(f.themes));
         this.themes = f.themes || [];
         //themes path
-        this.themesPath = f.themes_path || this.basePath + 'themes/';
+        this.themesPath = f.themes_path || this.stylePath + 'themes/';
 
         // Features registry
         this.Cpt = {

static/style/filtersVisibility.css

@@ -17,10 +17,7 @@ span.expClpFlt img{
 	margin:1px 1px 1px 1px;
 	/*background:#f4f4f4;*/
 }
-span.expClpFlt img:hover{
+span.expClpFlt img:hover{}
-    background:#fff;
-    /*border:1px solid #666;  */
-}
 
 /* button */
 .btnExpClpFlt{ margin:0 5px 0 5px; }

test/test-col-widths.js

@@ -9,11 +9,10 @@
 
     module('Sanity checks');
     test('Column widths', function() {
-        var filterRow = tf.tbl.rows[tf.getFiltersRowIndex()];
+        var cols = tf.tbl.getElementsByTagName('col');
         deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
-        deepEqual(filterRow.cells[1].style.width,
+        deepEqual(cols[1].style.width, '100px', 'Expected column width');
-            '100px', 'Expected column width');
+        deepEqual(cols[4].style.width, '', 'Expected column width');
-        deepEqual(filterRow.cells[4].style.width, '', 'Expected column width');
     });
 
     test('Grid layout column widths', function() {
@@ -26,10 +25,9 @@
             sort: false
         });
         tf.init();
-        deepEqual(tf.getHeaderElement(0).style.width,
+        var cols = tf.Cpt.gridLayout.headTbl.getElementsByTagName('col');
-            '150px', 'Expected column width');
+        deepEqual(cols[0].style.width, '150px', 'Expected column width');
-        deepEqual(tf.getHeaderElement(4).style.width,
+        deepEqual(cols[4].style.width, '200px', 'Expected column width');
-            '200px', 'Expected column width');
     });
 
 })(window, TableFilter);

webpack.config.js

@@ -1,55 +1,8 @@
 var path = require('path');
-var webpack = require('webpack');
-var Clean = require('clean-webpack-plugin');
 
 module.exports = {
-    build: {
+    cache: true,
     entry: path.join(__dirname, '/src/tablefilter.js'),
-        output: {
-            publicPath: '/build/tablefilter/',
-            path: path.join(__dirname, '/build/tablefilter'),
-            filename: 'tablefilter.js',
-            chunkFilename: '[name]-[chunkhash].js',
-            // chunkFilename: '[name].js',
-            libraryTarget: 'umd'
-        },
-        resolve: {
-            extensions: ['', '.js'],
-            alias: {
-                sortabletable: '../../../libs/sortabletable.js'
-            }
-        },
-        module: {
-            // exprContextRegExp: /$^/,
-            // exprContextCritical: true,
-            loaders: [{
-                test: path.join(__dirname, 'src'),
-                exclude: /node_modules/,
-                query: {
-                    compact: false
-                },
-                loader: 'babel-loader'
-            }]
-        },
-        plugins: [
-            // new webpack.DefinePlugin({
-            //     'process.env': {
-            //         // This has effect on the react lib size
-            //         'NODE_ENV': JSON.stringify('production')
-            //     }
-            // }),
-            new Clean(['build']),
-            new webpack.optimize.DedupePlugin()
-        ],
-        devtool: 'source-map',
-        debug: true
-    },
-    dist: {
-        entry: path.join(__dirname, '/src/tablefilter.js'),
-        // entry: {
-        //     tablefilter: __dirname + '/src/tablefilter.js',
-        //     sortabletable: __dirname + '/libs/sortabletable.js'
-        // },
     output: {
         publicPath: '/dist/tablefilter/',
         path: path.join(__dirname, '/dist/tablefilter'),
@@ -62,14 +15,8 @@ module.exports = {
         extensions: ['', '.js'],
         alias: {
             sortabletable: '../../../libs/sortabletable.js'
-                // ,
-                // adapterSortabletable:
-                //     './extensions/sortabletable/adapterSortabletable'
         }
     },
-        // externals: {
-        //     'sortabletable': 'SortableTable'
-        // },
     module: {
         // exprContextRegExp: /$^/,
         // exprContextCritical: true,
@@ -81,19 +28,19 @@ module.exports = {
             },
             loader: 'babel-loader'
         }]
-        },
-        plugins: [
-            // new webpack.DefinePlugin({
-            //     'process.env': {
-            //         // This has effect on the react lib size
-            //         'NODE_ENV': JSON.stringify('production')
-            //     }
-            // }),
-            // new webpack.IgnorePlugin(/adapterSortabletable$/),
-            new Clean(['dist']),
-            new webpack.optimize.DedupePlugin(),
-            new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 }),
-            new webpack.optimize.UglifyJsPlugin()
-        ]
     }
+    // ,
+    // plugins: [
+    //     // new webpack.DefinePlugin({
+    //     //     'process.env': {
+    //     //         // This has effect on the react lib size
+    //     //         'NODE_ENV': JSON.stringify('production')
+    //     //     }
+    //     // }),
+    //     // new webpack.IgnorePlugin(/adapterSortabletable$/),
+    //     new Clean(['dist']),
+    //     new webpack.optimize.DedupePlugin(),
+    //     new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 }),
+    //     new webpack.optimize.UglifyJsPlugin()
+    // ]
 };