Refactor themes

.jshintrc

@@ -17,7 +17,7 @@
   "esnext": true,
   "unused": true,
 
-  //"maxlen" : 80,
+  "maxlen" : 80,
   "globals": {
     "Object": true,
     "module": true,

Gruntfile.js

@@ -14,6 +14,7 @@ module.exports = function (grunt) {
         jshint: {
             src: [
                 'Gruntfile.js',
+                'webpack.config.js',
                 'src-es6/**/*.js'
             ],
             options: {
@@ -73,7 +74,7 @@ module.exports = function (grunt) {
             //     // entry: {
             //     //     tablefilter: __dirname + '/src-es6/tablefilter.js',
             //     //     colsVisibility: __dirname +
-            //     //         '/src-es6/extensions/colsVisibility/colsVisibility.js'
+            //     //     '/src-es6/extensions/colsVisibility/colsVisibility.js'
             //     // },
             //     output: {
             //         publicPath: '/src/',
@@ -137,7 +138,7 @@ module.exports = function (grunt) {
     grunt.registerTask('dist', ['jshint', 'webpack:dist', 'copy:dist']);
 
     // Transpile with Babel
-    grunt.registerTask('transpile', ['babel']);
+    grunt.registerTask('dev-modules', ['babel', 'copy:build']);
 
     // Tests
     grunt.registerTask('test', ['qunit:all']);

examples/dev.html

@@ -86,7 +86,8 @@
             col_3: 'checklist',
             base_path: '../build/tablefilter/',
             rows_counter: true,
-            enable_default_theme: true,
+            // enable_default_theme: true,
+            themes: [{ name: 'skyblue'}],
             paging: false,
             alternate_rows: true,
             highlight_keywords: true,

examples/dist.html

@@ -86,7 +86,8 @@
             col_3: 'checklist',
             base_path: '../dist/tablefilter/',
             rows_counter: true,
-            enable_default_theme: true,
+            // enable_default_theme: true,
+            themes: [{ path: '../dist/tablefilter/themes/mytheme/mytheme.css' }],
             paging: false,
             alternate_rows: true,
             highlight_keywords: true,

examples/requirejs.html

@@ -90,7 +90,7 @@
         </table>
     </div>
 
-    <script src="../libs/requirejs/require.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
     <script>
         requirejs(['../build/tablefilter/tablefilter'], function(mod){
             var TableFilter = mod.TableFilter;
@@ -105,6 +105,7 @@
                 // slc_filling_method: 'innerhtml',
                 sort: true,
                 sort_config: {
+                    path: '../build/tablefilter/extensions/sort/',
                     sort_types: ['string','string','number','number','number']
                 },
                 paging: false,
@@ -139,7 +140,7 @@
                 extensions: [{
                     /*** Columns Visibility Manager extension load ***/
                     name: 'colsVisibility',
-                    // path: './extensions/colsVisibility',
+                    path: '../build/tablefilter/extensions/colsVisibility/',
                     description: 'Columns visibility manager',/*
                     initialize: function(o){o.SetColsVisibility();}*/
                     // manager: true,

libs/colsVisibility.css

@@ -1,47 +0,0 @@
-/*====================================================
-	- HTML Table Filter Generator
-	- Columns Visibility Manager Extension
-	- do not hesitate to edit classes below to
-	change extension appearance
-=====================================================*/
-
-span.colVisSpan{ text-align:left; }
-
-span.colVisSpan a.colVis{
-	/* Link */
-	margin:0 5px 0 5px;
-}
-div.colVisCont{
-	/* Container div */
-	position:absolute;
-	display:none;
-	border:1px solid #ccc;
-	height:auto; width:250px;
-	background:#fff;
-	margin:18px 0 0 0; z-index:10000;
-	padding:10px 10px 10px 10px;
-	text-align:left; font-size:12px;
-	border-radius:4px;
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;
-	box-shadow:3px 3px 2px #888;
-	-moz-box-shadow:3px 3px 2px #888;
-	-webkit-box-shadow:3px 3px 2px #888;
-}
-div.colVisCont p{ margin:6px auto 6px auto; }
-
-ul.cols_checklist{ padding:0; margin:0; list-style: none; }
-li.cols_checklist_item{ /*check list item*/
-	padding:1px; margin:0; font-size:11px;
-	border-bottom:1px solid #ccc;
-}
-li.cols_checklist_item:hover{
-	background-color:#335EA8;
-	color:#fff;
-}
-.cols_checklist_slc_item{ /*selected check list item*/
-	background-color:#335EA8;
-	color:#fff;
-}
-ul.cols_checklist label{ display:block; }
-ul.cols_checklist input{ vertical-align:middle; margin:2px 5px 2px 1px; }

libs/requirejs/.bower.json

@@ -1,24 +0,0 @@
-{
-  "name": "requirejs",
-  "version": "2.1.17",
-  "homepage": "http://requirejs.org",
-  "authors": [
-    "jrburke.com"
-  ],
-  "description": "A file and module loader for JavaScript",
-  "main": "require.js",
-  "keywords": [
-    "AMD"
-  ],
-  "license": "new BSD, and MIT",
-  "_release": "2.1.17",
-  "_resolution": {
-    "type": "version",
-    "tag": "2.1.17",
-    "commit": "72b4505d30d9fa342f6dc88ee25da2b2da6a1e58"
-  },
-  "_source": "git://github.com/jrburke/requirejs-bower.git",
-  "_target": "~2.1.17",
-  "_originalSource": "requirejs",
-  "_direct": true
-}

libs/requirejs/README.md

@@ -1,4 +0,0 @@
-# requirejs-bower
-
-Bower packaging for [RequireJS](http://requirejs.org).
-

libs/requirejs/bower.json

@@ -1,14 +0,0 @@
-{
-  "name": "requirejs",
-  "version": "2.1.17",
-  "homepage": "http://requirejs.org",
-  "authors": [
-    "jrburke.com"
-  ],
-  "description": "A file and module loader for JavaScript",
-  "main": "require.js",
-  "keywords": [
-    "AMD"
-  ],
-  "license": "new BSD, and MIT"
-}

src-es6/date.js

@@ -32,8 +32,8 @@ var DateHelper = {
               reg1 = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{2}$/;
               reg2 = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/;
         }
-        // If it doesn't conform to the right format (with either a 2 digit year or
+        // If it doesn't conform to the right format (with either a 2 digit year
-        // 4 digit year), fail
+        // or 4 digit year), fail
         if(reg1.test(dateStr) === false && reg2.test(dateStr) === false) {
             return false;
         }
@@ -79,60 +79,14 @@ var DateHelper = {
         }
         return true;
     },
-    format: function(dateStr, format){
+    format: function(dateStr, format) {
         if(!format){
             format = 'DMY';
         }
         if(!dateStr || dateStr === ''){
             return new Date(1001, 0, 1);
         }
-        var oDate, parts;
+        var oDate;
-
-        function y2kDate(yr){
-            if(yr === undefined){
-                return 0;
-            }
-            if(yr.length>2){
-                return yr;
-            }
-            var y;
-            //>50 belong to 1900
-            if(yr <= 99 && yr>50){
-                y = '19' + yr;
-            }
-            //<50 belong to 2000
-            if(yr<50 || yr === '00'){
-                y = '20' + yr;
-            }
-            return y;
-        }
-
-        function mmm2mm(mmm){
-            if(mmm === undefined){
-                return 0;
-            }
-            var mondigit;
-            var MONTH_NAMES = [
-                'january','february','march','april','may','june','july',
-                'august','september','october','november','december',
-                'jan','feb','mar','apr','may','jun','jul','aug','sep','oct',
-                'nov','dec'
-            ];
-            for(var m_i=0; m_i < MONTH_NAMES.length; m_i++){
-                    var month_name = MONTH_NAMES[m_i];
-                    if (mmm.toLowerCase() === month_name){
-                        mondigit = m_i+1;
-                        break;
-                    }
-            }
-            if(mondigit > 11 || mondigit < 23){
-                mondigit = mondigit - 12;
-            }
-            if(mondigit < 1 || mondigit > 12){
-                return 0;
-            }
-            return mondigit;
-        }
 
         switch(format.toUpperCase()){
             case 'DDMMMYYYY':
@@ -140,26 +94,80 @@ var DateHelper = {
                 oDate = new Date(y2kDate(parts[2]),mmm2mm(parts[1])-1,parts[0]);
             break;
             case 'DMY':
+                /* jshint ignore:start */
                 parts = dateStr.replace(
                     /^(0?[1-9]|[12][0-9]|3[01])([- \/.])(0?[1-9]|1[012])([- \/.])((\d\d)?\d\d)$/,'$1 $3 $5').split(' ');
                 oDate = new Date(y2kDate(parts[2]),parts[1]-1,parts[0]);
+                /* jshint ignore:end */
             break;
             case 'MDY':
+                /* jshint ignore:start */
                 parts = dateStr.replace(
                     /^(0?[1-9]|1[012])([- \/.])(0?[1-9]|[12][0-9]|3[01])([- \/.])((\d\d)?\d\d)$/,'$1 $3 $5').split(' ');
                 oDate = new Date(y2kDate(parts[2]),parts[0]-1,parts[1]);
+                /* jshint ignore:end */
             break;
             case 'YMD':
+                /* jshint ignore:start */
                 parts = dateStr.replace(/^((\d\d)?\d\d)([- \/.])(0?[1-9]|1[012])([- \/.])(0?[1-9]|[12][0-9]|3[01])$/,'$1 $4 $6').split(' ');
                 oDate = new Date(y2kDate(parts[0]),parts[1]-1,parts[2]);
+                /* jshint ignore:end */
             break;
             default: //in case format is not correct
+                /* jshint ignore:start */
                 parts = dateStr.replace(/^(0?[1-9]|[12][0-9]|3[01])([- \/.])(0?[1-9]|1[012])([- \/.])((\d\d)?\d\d)$/,'$1 $3 $5').split(' ');
                 oDate = new Date(y2kDate(parts[2]),parts[1]-1,parts[0]);
+                /* jshint ignore:end */
             break;
         }
         return oDate;
     }
 };
 
+function y2kDate(yr){
+    if(yr === undefined){
+        return 0;
+    }
+    if(yr.length>2){
+        return yr;
+    }
+    var y;
+    //>50 belong to 1900
+    if(yr <= 99 && yr>50){
+        y = '19' + yr;
+    }
+    //<50 belong to 2000
+    if(yr<50 || yr === '00'){
+        y = '20' + yr;
+    }
+    return y;
+}
+
+function mmm2mm(mmm){
+    if(mmm === undefined){
+        return 0;
+    }
+    var mondigit;
+    var MONTH_NAMES = [
+        'january','february','march','april','may','june','july',
+        'august','september','october','november','december',
+        'jan','feb','mar','apr','may','jun','jul','aug','sep','oct',
+        'nov','dec'
+    ];
+    for(var m_i=0; m_i < MONTH_NAMES.length; m_i++){
+            var month_name = MONTH_NAMES[m_i];
+            if (mmm.toLowerCase() === month_name){
+                mondigit = m_i+1;
+                break;
+            }
+    }
+    if(mondigit > 11 || mondigit < 23){
+        mondigit = mondigit - 12;
+    }
+    if(mondigit < 1 || mondigit > 12){
+        return 0;
+    }
+    return mondigit;
+}
+
 exports.DateHelper = DateHelper;

src-es6/extensions/colsVisibility/colsVisibility.js

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

src-es6/extensions/sort/adapterSortabletable.js

@@ -32,7 +32,9 @@ export default class AdapterSortableTable{
 
         /*** TF additional events ***/
         //additional paging events for alternating background
-        // o.Evt._Paging.nextEvt = function(){ if(o.sorted && o.alternateBgs) o.Filter(); }
+        // o.Evt._Paging.nextEvt = function(){
+        // if(o.sorted && o.alternateBgs) o.Filter();
+        // }
         // o.Evt._Paging.prevEvt = o.Evt._Paging.nextEvt;
         // o.Evt._Paging.firstEvt = o.Evt._Paging.nextEvt;
         // o.Evt._Paging.lastEvt = o.Evt._Paging.nextEvt;

src-es6/modules/colOps.js

@@ -264,7 +264,7 @@ export class ColOps{
                                         nbvalues===0){
                                         Dom.id(labThisCol[i]).innerHTML = '.';
                                     } else{
-                                        Dom.id(labThisCol[i]).innerHTML = result;
+                                        Dom.id(labThisCol[i]).innerHTML= result;
                                     }
                                 break;
                                 case 'setvalue':

src-es6/tablefilter.js

@@ -175,7 +175,7 @@ export class TableFilter{
         //table container div for fixed headers (IE only)
         this.contDiv = null;
 
-        //defines css class for div containing paging elements, rows counter etc.
+        //defines css class for div containing paging elements, rows counter etc
         this.infDivCssClass = f.inf_div_css_class || 'inf';
         //defines css class for left div
         this.lDivCssClass = f.left_div_css_class || 'ldiv';
@@ -534,11 +534,10 @@ export class TableFilter{
         this.enableDefaultTheme = f.enable_default_theme===true ?
             true : false;
         //imports themes
-        this.hasThemes = (f.enable_default_theme ||
+        this.hasThemes = (f.enable_default_theme || types.isArray(f.themes));
-            (f.themes && types.isObj(f.themes))) ? true : false;
+        this.themes = f.themes || [];
-        this.themes = this.hasThemes ? f.themes : null;
         //themes path
-        this.themesPath = f.themes_path || this.basePath+'themes/';
+        this.themesPath = f.themes_path || this.basePath + 'themes/';
 
         // Features registry
         this.Cpt = {
@@ -784,8 +783,7 @@ export class TableFilter{
         }
 
         //loads stylesheet if not imported
-        //Issues with browsers != IE, IE rules in this case
+        this.import(this.stylesheetId, this.stylesheet, null, 'link');
-        this.includeFile(this.stylesheetId, this.stylesheet, null, 'link');
 
         //loads theme
         if(this.hasThemes){ this._loadThemes(); }
@@ -904,7 +902,8 @@ export class TableFilter{
                     //drop-down filters
                     if(col===this.fltTypeSlc || col===this.fltTypeMulti){
                         if(!this.Cpt.dropdown){
-                            // var Dropdown = require('modules/dropdown').Dropdown;
+                            // var Dropdown =
+                            //  require('modules/dropdown').Dropdown;
                             // import {Dropdown} from 'modules/dropdown';
                             this.Cpt.dropdown = new Dropdown(this);
                         }
@@ -1090,7 +1089,8 @@ export class TableFilter{
         }
         if(this.alternateBgs){
             //1st time only if no paging and rememberGridValues
-            // var AlternateRows = require('modules/alternateRows').AlternateRows;
+            // var AlternateRows = require('modules/alternateRows')
+            //  .AlternateRows;
             // import {AlternateRows} from 'modules/alternateRows';
             this.Cpt.alternateRows = new AlternateRows(this);
             this.Cpt.alternateRows.init();
@@ -1246,7 +1246,7 @@ export class TableFilter{
         var modulePath;
 
         if(name && path){
-            modulePath = ext.path + '/' + name;
+            modulePath = ext.path + name;
         } else {
             name = name.replace('.js', '');
             modulePath = './extensions/{}/{}'.replace(/{}/g, name);
@@ -1267,58 +1267,26 @@ export class TableFilter{
         - loads TF themes
     =====================================================*/
     _loadThemes(){
-        if(!this.hasThemes){
+        var themes = this.themes;
-            return;
-        }
-        if(!this.Thm){
-            /*** TF themes ***/
-            var o = this;
-            this.Thm = {
-                list: {},
-                add: function(thmName, thmDesc, thmPath, thmCallBack){
-                    var file = thmPath.split('/')[thmPath.split('/').length-1],
-                        re = new RegExp(file),
-                        path = thmPath.replace(re,'');
-                    o.Thm.list[thmName] = {
-                        name: thmName,
-                        description: thmDesc,
-                        file: file,
-                        path: path,
-                        callback: thmCallBack
-                    };
-                }
-            };
-        }
-
         //Default theme config
         if(this.enableDefaultTheme){
-            this.themes = {
+            var defaultTheme = { name: 'default' };
-                name:['DefaultTheme'],
+            this.themes.push(defaultTheme);
-                src:[this.themesPath+'Default/TF_Default.css'],
-                description:['Default Theme']
-            };
-            this.Thm.add('DefaultTheme',
-                this.themesPath+'Default/TF_Default.css', 'Default Theme');
         }
-        if(types.isArray(this.themes.name) &&
+        if(types.isArray(themes)){
-            types.isArray(this.themes.src)){
+            for(var i=0, len=themes.length; i<len; i++){
-            var thm = this.themes;
+                var theme = themes[i];
-            for(var i=0; i<thm.name.length; i++){
+                var name = theme.name;
-                var thmPath = thm.src[i],
+                var path = theme.path;
-                    thmName = thm.name[i],
+                if(name && !path){
-                    thmInit = (thm.initialize && thm.initialize[i]) ?
+                    path = this.themesPath + name + '/' + name + '.css';
-                        thm.initialize[i] : null,
-                    thmDesc = (thm.description && thm.description[i]) ?
-                        thm.description[i] : null;
-
-                //Registers theme
-                this.Thm.add(thmName, thmDesc, thmPath, thmInit);
-
-                if(!this.isImported(thmPath,'link')){
-                    this.includeFile(thmName, thmPath, null, 'link');
                 }
-                if(types.isFn(thmInit)){
+                else if(!name && theme.path){
-                    thmInit.call(null,this);
+                    name = 'theme{0}'.replace('{0}', i);
+                }
+
+                if(!this.isImported(path, 'link')){
+                    this.import(name, path, null, 'link');
                 }
             }
         }
@@ -1376,7 +1344,6 @@ export class TableFilter{
                 this.Cpt.highlightKeyword.unhighlightAll();
             }
             if(this.sort){
-                // this.RemoveSort();
                 this.ExtRegistry.sort.destroy();
             }
             if(this.loader){
@@ -1552,7 +1519,7 @@ export class TableFilter{
         if(this.isImported(ezEditConfig.src)){
             this._enableEditable();
         } else {
-            this.includeFile(
+            this.import(
                 ezEditConfig.name,
                 ezEditConfig.src,
                 this._enableEditable
@@ -1560,7 +1527,7 @@ export class TableFilter{
         }
         if(ezEditConfig.loadStylesheet &&
             !this.isImported(ezEditConfig.stylesheet, 'link')){
-            this.includeFile(
+            this.import(
                 ezEditConfig.stylesheetName,
                 ezEditConfig.stylesheet, null, 'link'
             );
@@ -3004,7 +2971,8 @@ export class TableFilter{
         }
         this.nbRows = this.getRowsNb(); //in case table is refreshed
         this.remove();
-        window['tf_'+this.id] = new TableFilter(this.id, this.startRow, configObj);
+        window['tf_'+this.id] = new TableFilter(
+            this.id, this.startRow, configObj);
         this.isFirstLoad = true;
         this.fltIds = [];
         this.init();
@@ -3199,7 +3167,7 @@ export class TableFilter{
         return imported;
     }
 
-    includeFile(fileId, filePath, callback, type){
+    import(fileId, filePath, callback, type){
         var ftype = !type ? 'script' : type,
             imported = this.isImported(filePath, ftype);
         if(imported){