Added tests to alternate rows feature

dist/tablefilter/style/themes/skyblue/skyblue.css

@@ -40,12 +40,9 @@ input.flt{ width:99% !important; }
 =====================================================*/
 /* div containing left, middle and right divs */
 .inf{
-	background:#D9EAED !important;
+	background:#E3EFFF !important;
-	border:1px solid #99CCCC;
+	border:1px solid #A4BED4;
 	height:25px; color:#004A6F;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
 }
 div.tot, div.status{ border-right:0 !important; }
 

dist/tablefilter/tablefilter.js

@@ -83,7 +83,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 			script.charset = 'utf-8';
 /******/ 			script.async = true;
 /******/
-/******/ 			script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "-" + {"1":"1624429a94932563c8ae"}[chunkId] + ".js";
+/******/ 			script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "-" + {"1":"4139a7961dcf632fbba6"}[chunkId] + ".js";
 /******/ 			head.appendChild(script);
 /******/ 		}
 /******/ 	};
@@ -121,15 +121,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _Event2 = _interopRequireDefault(_Event);
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
-	var _Cookie = __webpack_require__(5);
+	var _Cookie = __webpack_require__(7);
 	
 	var _Cookie2 = _interopRequireDefault(_Cookie);
 	
@@ -137,7 +137,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _Types2 = _interopRequireDefault(_Types);
 	
-	var _Arr = __webpack_require__(7);
+	var _Arr = __webpack_require__(5);
 	
 	var _Arr2 = _interopRequireDefault(_Arr);
 	
@@ -341,7 +341,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.fltSmallCssClass = f.flt_small_css_class || 'flt_s';
 	        //defines css class for single-filter
 	        this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
-	        this.isStartBgAlternate = true;
 	
 	        /*** filters' grid behaviours ***/
 	        //enables/disables enter key
@@ -610,9 +609,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                loadthemes: 'LoadThemes'
 	            },
 	
-	            /*====================================================
+	            // Detect <enter> key
-	                - Detects <enter> key for a given element
-	            =====================================================*/
 	            detectKey: function detectKey(e) {
 	                if (!this.enterKey) {
 	                    return;
@@ -631,9 +628,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    }
 	                }
 	            },
-	            /*====================================================
+	            // if auto-filter on, detect user is typing and filter columns
-	                - auto filter for text filters
-	            =====================================================*/
 	            onKeyUp: function onKeyUp(e) {
 	                if (!this.autoFilter) {
 	                    return;
@@ -661,18 +656,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    this.autoFilterTimer = null;
 	                }
 	            },
-	            /*====================================================
+	            // if auto-filter on, detect user is typing
-	                - onkeydown event for input filters
-	            =====================================================*/
 	            onKeyDown: function onKeyDown() {
 	                if (!this.autoFilter) {
 	                    return;
 	                }
 	                this.isUserTyping = true;
 	            },
-	            /*====================================================
+	            // if auto-filter on, clear interval on filter blur
-	                - onblur event for input filters
-	            =====================================================*/
 	            onInpBlur: function onInpBlur() {
 	                if (this.autoFilter) {
 	                    this.isUserTyping = false;
@@ -687,9 +678,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                //     }
 	                // }
 	            },
-	            /*====================================================
+	            // set focused text-box filter as active
-	                - onfocus event for input filters
-	            =====================================================*/
 	            onInpFocus: function onInpFocus(e) {
 	                var _ev = e || global.event;
 	                var elm = _Event2['default'].target(_ev);
@@ -708,9 +697,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                //     }
 	                // }
 	            },
-	            /*====================================================
+	            // set focused drop-down filter as active
-	                - onfocus event for select filters
-	            =====================================================*/
 	            onSlcFocus: function onSlcFocus(e) {
 	                var _ev = e || global.event;
 	                var elm = _Event2['default'].target(_ev);
@@ -726,18 +713,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    _Event2['default'].stop(_ev);
 	                }
 	            },
-	            /*====================================================
+	            // filter columns on drop-down filter change
-	                - onchange event for select filters
-	            =====================================================*/
 	            onSlcChange: function onSlcChange(e) {
 	                if (!this.activeFlt) {
 	                    return;
 	                }
-	                // let colIndex = o.activeFlt.getAttribute('colIndex');
-	                //Checks filter is a checklist and caller is not null
-	                // if(o.activeFlt && colIndex &&
-	                //     o['col'+colIndex]===o.fltTypeCheckList &&
-	                //     !o.Evt.onSlcChange.caller){ return; }
 	                var _ev = e || global.event;
 	                if (this.popUpFilters) {
 	                    _Event2['default'].stop(_ev);
@@ -746,9 +726,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    this.filter();
 	                }
 	            },
-	            /*====================================================
+	            // fill checklist filter on click if required
-	                - onclick event for checklist filters
-	            =====================================================*/
 	            onCheckListClick: function onCheckListClick(e) {
 	                var _ev = e || global.event;
 	                var elm = _Event2['default'].target(_ev);
@@ -759,10 +737,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    this.Mod.checkList.checkListDiv[ct].title = '';
 	                }
 	            },
-	            /*====================================================
+	            // filter when validation button clicked
-	                - onclick event for validation button
-	                (btn property)
-	            =====================================================*/
 	            onBtnClick: function onBtnClick() {
 	                this.filter();
 	            }
@@ -1278,6 +1253,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    var theme = themes[i];
 	                    var _name = theme.name;
 	                    var path = theme.path;
+	                    var styleId = this.prfxTf + _name;
 	                    if (_name && !path) {
 	                        path = this.themesPath + _name + '/' + _name + '.css';
 	                    } else if (!_name && theme.path) {
@@ -1285,12 +1261,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    }
 	
 	                    if (!this.isImported(path, 'link')) {
-	                        this['import']('tf-' + _name, path, null, 'link');
+	                        this['import'](styleId, path, null, 'link');
 	                    }
 	                }
 	            }
 	
-	            //Some elements need to be overriden for theme
+	            //Some elements need to be overriden for default theme
 	            //Reset button
 	            this.btnResetText = null;
 	            this.btnResetHtml = '<input type="button" value="" class="' + this.btnResetCssClass + '" title="Clear filters" />';
@@ -1306,6 +1282,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	            this.loaderHtml = '<div class="defaultLoader"></div>';
 	            this.loaderText = null;
 	        }
+	    }, {
+	        key: 'getStylesheet',
+	
+	        /**
+	         * Return stylesheet DOM element for a given theme name
+	         * @return {DOMElement} stylesheet element
+	         */
+	        value: function getStylesheet() {
+	            var name = arguments[0] === undefined ? 'default' : arguments[0];
+	
+	            return _Dom2['default'].id(this.prfxTf + name);
+	        }
 	    }, {
 	        key: 'destroy',
 	
@@ -1354,7 +1342,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                this.tbl.deleteRow(this.filtersRowIndex);
 	            }
 	
-	            // Destroy module
+	            // Destroy modules
 	            Object.keys(Mod).forEach(function (key) {
 	                var feature = Mod[key];
 	                if (feature && _Types2['default'].isFn(feature.destroy)) {
@@ -1961,6 +1949,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	                if (!isRowValid) {
 	                    this.validateRow(k, false);
+	                    if (Mod.alternateRows) {
+	                        Mod.alternateRows.removeRowBg(k);
+	                    }
 	                    // always visible rows need to be counted as valid
 	                    if (this.hasVisibleRows && _Arr2['default'].has(this.visibleRows, k) && !this.paging) {
 	                        this.validRowsIndex.push(k);
@@ -1981,14 +1972,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	            this.nbVisibleRows = this.validRowsIndex.length;
 	            this.nbHiddenRows = hiddenrows;
-	            this.isStartBgAlternate = false;
 	
 	            if (this.rememberGridValues) {
 	                Mod.store.saveFilterValues(this.fltsValuesCookie);
 	            }
 	            //applies filter props after filtering process
 	            if (!this.paging) {
-	                this.applyGridProps();
+	                this.applyProps();
 	            } else {
 	                // Shouldn't need to care of that here...
 	                // TODO: provide a method in paging module
@@ -2003,20 +1993,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	        }
 	    }, {
-	        key: 'applyGridProps',
+	        key: 'applyProps',
 	
 	        /**
-	         * Re-apply the filters grid properties after a filtering/paging operation
+	         * Re-apply the features/behaviour concerned by filtering/paging operation
+	         *
+	         * NOTE: this will disappear whenever custom events in place
 	         */
-	        value: function applyGridProps() {
+	        value: function applyProps() {
-	            // blurs active filter (IE)
-	            if (this.activeFlt && _Str2['default'].lower(this.activeFlt.nodeName) === this.fltTypeSlc && !this.popUpFilters) {
-	                this.activeFlt.blur();
-	                if (this.activeFlt.parentNode) {
-	                    this.activeFlt.parentNode.focus();
-	                }
-	            }
-	
 	            var Mod = this.Mod;
 	
 	            //shows rows always visible
@@ -3092,6 +3076,56 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	'use strict';
 	
+	Object.defineProperty(exports, '__esModule', {
+	    value: true
+	});
+	/**
+	 * String utilities
+	 */
+	
+	exports['default'] = {
+	
+	    lower: function lower(text) {
+	        return text.toLowerCase();
+	    },
+	
+	    upper: function upper(text) {
+	        return text.toUpperCase();
+	    },
+	
+	    trim: function trim(text) {
+	        if (text.trim) {
+	            return text.trim();
+	        }
+	        return text.replace(/^\s*|\s*$/g, '');
+	    },
+	
+	    isEmpty: function isEmpty(text) {
+	        return this.trim(text) === '';
+	    },
+	
+	    rgxEsc: function rgxEsc(text) {
+	        var chars = /[-\/\\^$*+?.()|[\]{}]/g;
+	        var escMatch = '\\$&';
+	        return String(text).replace(chars, escMatch);
+	    },
+	
+	    matchCase: function matchCase(text, mc) {
+	        if (!mc) {
+	            return this.lower(text);
+	        }
+	        return text;
+	    }
+	
+	};
+	module.exports = exports['default'];
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+	
 	Object.defineProperty(exports, '__esModule', {
 	    value: true
 	});
@@ -3140,22 +3174,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	    /**
 	     * Returns a text node with given text
-	     * @param  {String} text
+	     * @param  {String} txt
 	     * @return {Object}
 	     */
-	    text: (function (_text) {
+	    text: function text(txt) {
-	        function text(_x) {
+	        return document.createTextNode(txt);
-	            return _text.apply(this, arguments);
+	    },
-	        }
-	
-	        text.toString = function () {
-	            return _text.toString();
-	        };
-	
-	        return text;
-	    })(function (text) {
-	        return document.createTextNode(text);
-	    }),
 	
 	    /**
 	     * Returns offset position of passed element
@@ -3263,122 +3287,44 @@ return /******/ (function(modules) { // webpackBootstrap
 	}
 	module.exports = exports['default'];
 
-/***/ },
-/* 4 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	Object.defineProperty(exports, '__esModule', {
-	    value: true
-	});
-	/**
-	 * String utilities
-	 */
-	
-	exports['default'] = {
-	
-	    lower: function lower(text) {
-	        return text.toLowerCase();
-	    },
-	
-	    upper: function upper(text) {
-	        return text.toUpperCase();
-	    },
-	
-	    trim: function trim(text) {
-	        if (text.trim) {
-	            return text.trim();
-	        }
-	        return text.replace(/^\s*|\s*$/g, '');
-	    },
-	
-	    isEmpty: function isEmpty(text) {
-	        return this.trim(text) === '';
-	    },
-	
-	    rgxEsc: function rgxEsc(text) {
-	        var chars = /[-\/\\^$*+?.()|[\]{}]/g;
-	        var escMatch = '\\$&';
-	        return String(text).replace(chars, escMatch);
-	    },
-	
-	    matchCase: function matchCase(text, mc) {
-	        if (!mc) {
-	            return this.lower(text);
-	        }
-	        return text;
-	    }
-	
-	};
-	module.exports = exports['default'];
-
 /***/ },
 /* 5 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 	
+	var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+	
 	Object.defineProperty(exports, '__esModule', {
 	    value: true
 	});
 	/**
-	 * Cookie utilities
+	 * Array utilities
 	 */
 	
+	var _Str = __webpack_require__(3);
+	
+	var _Str2 = _interopRequireDefault(_Str);
+	
 	exports['default'] = {
-	
+	    has: function has(arr, val, caseSensitive) {
-	    write: function write(name, value, hours) {
+	        var sCase = caseSensitive === undefined ? false : caseSensitive;
-	        var expire = '';
+	        for (var i = 0; i < arr.length; i++) {
-	        if (hours) {
+	            if (_Str2['default'].matchCase(arr[i].toString(), sCase) == val) {
-	            expire = new Date(new Date().getTime() + hours * 3600000);
+	                return true;
-	            expire = '; expires=' + expire.toGMTString();
-	        }
-	        document.cookie = name + '=' + escape(value) + expire;
-	    },
-	
-	    read: function read(name) {
-	        var cookieValue = '',
-	            search = name + '=';
-	        if (document.cookie.length > 0) {
-	            var cookie = document.cookie,
-	                offset = cookie.indexOf(search);
-	            if (offset !== -1) {
-	                offset += search.length;
-	                var end = cookie.indexOf(';', offset);
-	                if (end === -1) {
-	                    end = cookie.length;
-	                }
-	                cookieValue = unescape(cookie.substring(offset, end));
 	            }
 	        }
-	        return cookieValue;
+	        return false;
 	    },
-	
+	    indexByValue: function indexByValue(arr, val, caseSensitive) {
-	    remove: function remove(name) {
+	        var sCase = caseSensitive === undefined ? false : caseSensitive;
-	        this.write(name, '', -1);
+	        for (var i = 0; i < arr.length; i++) {
-	    },
+	            if (_Str2['default'].matchCase(arr[i].toString(), sCase) == val) {
-	
+	                return i;
-	    valueToArray: function valueToArray(name, separator) {
+	            }
-	        if (!separator) {
-	            separator = ',';
 	        }
-	        //reads the cookie
+	        return -1;
-	        var val = this.read(name);
-	        //creates an array with filters' values
-	        var arr = val.split(separator);
-	        return arr;
-	    },
-	
-	    getValueByIndex: function getValueByIndex(name, index, separator) {
-	        if (!separator) {
-	            separator = ',';
-	        }
-	        //reads the cookie
-	        var val = this.valueToArray(name, separator);
-	        return val[index];
 	    }
-	
 	};
 	module.exports = exports['default'];
 
@@ -3470,38 +3416,66 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	'use strict';
 	
-	var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-	
 	Object.defineProperty(exports, '__esModule', {
 	    value: true
 	});
 	/**
-	 * Array utilities
+	 * Cookie utilities
 	 */
 	
-	var _Str = __webpack_require__(4);
-	
-	var _Str2 = _interopRequireDefault(_Str);
-	
 	exports['default'] = {
-	    has: function has(arr, val, caseSensitive) {
+	
-	        var sCase = caseSensitive === undefined ? false : caseSensitive;
+	    write: function write(name, value, hours) {
-	        for (var i = 0; i < arr.length; i++) {
+	        var expire = '';
-	            if (_Str2['default'].matchCase(arr[i].toString(), sCase) == val) {
+	        if (hours) {
-	                return true;
+	            expire = new Date(new Date().getTime() + hours * 3600000);
-	            }
+	            expire = '; expires=' + expire.toGMTString();
 	        }
-	        return false;
+	        document.cookie = name + '=' + escape(value) + expire;
 	    },
-	    indexByValue: function indexByValue(arr, val, caseSensitive) {
+	
-	        var sCase = caseSensitive === undefined ? false : caseSensitive;
+	    read: function read(name) {
-	        for (var i = 0; i < arr.length; i++) {
+	        var cookieValue = '',
-	            if (_Str2['default'].matchCase(arr[i].toString(), sCase) == val) {
+	            search = name + '=';
-	                return i;
+	        if (document.cookie.length > 0) {
+	            var cookie = document.cookie,
+	                offset = cookie.indexOf(search);
+	            if (offset !== -1) {
+	                offset += search.length;
+	                var end = cookie.indexOf(';', offset);
+	                if (end === -1) {
+	                    end = cookie.length;
+	                }
+	                cookieValue = unescape(cookie.substring(offset, end));
 	            }
 	        }
-	        return -1;
+	        return cookieValue;
+	    },
+	
+	    remove: function remove(name) {
+	        this.write(name, '', -1);
+	    },
+	
+	    valueToArray: function valueToArray(name, separator) {
+	        if (!separator) {
+	            separator = ',';
+	        }
+	        //reads the cookie
+	        var val = this.read(name);
+	        //creates an array with filters' values
+	        var arr = val.split(separator);
+	        return arr;
+	    },
+	
+	    getValueByIndex: function getValueByIndex(name, index, separator) {
+	        if (!separator) {
+	            separator = ',';
+	        }
+	        //reads the cookie
+	        var val = this.valueToArray(name, separator);
+	        return val[index];
 	    }
+	
 	};
 	module.exports = exports['default'];
 
@@ -3698,7 +3672,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Misc helpers
 	 */
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
@@ -3741,7 +3715,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Cookie = __webpack_require__(5);
+	var _Cookie = __webpack_require__(7);
 	
 	var _Cookie2 = _interopRequireDefault(_Cookie);
 	
@@ -3867,7 +3841,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -4257,7 +4231,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -4375,11 +4349,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
@@ -4525,7 +4499,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _Types2 = _interopRequireDefault(_Types);
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -4796,15 +4770,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
-	var _Arr = __webpack_require__(7);
+	var _Arr = __webpack_require__(5);
 	
 	var _Arr2 = _interopRequireDefault(_Arr);
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
@@ -5144,15 +5118,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
-	var _Arr = __webpack_require__(7);
+	var _Arr = __webpack_require__(5);
 	
 	var _Arr2 = _interopRequireDefault(_Arr);
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
@@ -5587,7 +5561,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -5761,7 +5735,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -5922,7 +5896,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -5930,7 +5904,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _Types2 = _interopRequireDefault(_Types);
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	
@@ -6345,9 +6319,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	
 	            tf.nbVisibleRows = tf.validRowsIndex.length;
-	            tf.isStartBgAlternate = false;
 	            //re-applies filter behaviours after filtering process
-	            tf.applyGridProps();
+	            tf.applyProps();
 	        }
 	    }, {
 	        key: 'getPage',
@@ -6718,7 +6691,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -6845,7 +6818,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -7026,7 +6999,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: true
 	});
 	
-	var _Dom = __webpack_require__(3);
+	var _Dom = __webpack_require__(4);
 	
 	var _Dom2 = _interopRequireDefault(_Dom);
 	
@@ -7056,19 +7029,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * Sets alternating rows color
 	         */
 	        value: function init() {
-	            if (!this.tf.hasGrid() && !this.tf.isFirstLoad) {
+	            var tf = this.tf;
+	            if (!tf.hasGrid() && !tf.isFirstLoad) {
 	                return;
 	            }
-	            var noValidRowsIndex = this.tf.validRowsIndex === null;
+	            var validRowsIndex = tf.validRowsIndex;
+	            var noValidRowsIndex = validRowsIndex === null;
 	            //1st index
-	            var beginIndex = noValidRowsIndex ? this.tf.refRow : 0;
+	            var beginIndex = noValidRowsIndex ? tf.refRow : 0;
 	            // nb indexes
-	            var indexLen = noValidRowsIndex ? this.tf.nbFilterableRows + beginIndex : this.tf.validRowsIndex.length;
+	            var indexLen = noValidRowsIndex ? tf.nbFilterableRows + beginIndex : validRowsIndex.length;
 	            var idx = 0;
 	
 	            //alternates bg color
 	            for (var j = beginIndex; j < indexLen; j++) {
-	                var rowIdx = noValidRowsIndex ? j : this.tf.validRowsIndex[j];
+	                var rowIdx = noValidRowsIndex ? j : validRowsIndex[j];
 	                this.setRowBg(rowIdx, idx);
 	                idx++;
 	            }
@@ -7111,7 +7086,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        key: 'remove',
 	
 	        /**
-	         * Removes all row background color
+	         * Removes all alternating backgrounds
 	         */
 	        value: function remove() {
 	            if (!this.tf.hasGrid()) {
@@ -7120,7 +7095,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	            for (var i = this.tf.refRow; i < this.tf.nbRows; i++) {
 	                this.removeRowBg(i);
 	            }
-	            this.tf.isStartBgAlternate = true;
 	        }
 	    }, {
 	        key: 'enable',
@@ -7151,7 +7125,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     value: true
 	});
 	
-	var _Str = __webpack_require__(4);
+	var _Str = __webpack_require__(3);
 	
 	var _Str2 = _interopRequireDefault(_Str);
 	

examples/theme-roller.html

@@ -388,13 +388,8 @@ var THEMES = {
 };
 
 function changeTheme(name){
-    var styleId = 'tf-default';
+    var stylesheet = tf.getStylesheet('default');
-    var stylesheet = document.getElementById(styleId);
+    stylesheet.href = THEMES[name];
-    if(!stylesheet){
-        tf.import(styleId, THEMES[name], null, 'link');
-    } else {
-        stylesheet.href = THEMES[name];
-    }
 }
 </script>
 

src/dom.js

@@ -44,11 +44,11 @@ export default {
 
     /**
      * Returns a text node with given text
-     * @param  {String} text
+     * @param  {String} txt
      * @return {Object}
      */
-    text(text){
+    text(txt){
-        return document.createTextNode(text);
+        return document.createTextNode(txt);
     },
 
     /**

src/modules/alternateRows.js

@@ -20,21 +20,23 @@ export class AlternateRows{
      * Sets alternating rows color
      */
     init() {
-        if(!this.tf.hasGrid() && !this.tf.isFirstLoad){
+        var tf = this.tf;
+        if(!tf.hasGrid() && !tf.isFirstLoad){
             return;
         }
-        var noValidRowsIndex = this.tf.validRowsIndex===null;
+        var validRowsIndex = tf.validRowsIndex;
+        var noValidRowsIndex = validRowsIndex===null;
         //1st index
-        var beginIndex = noValidRowsIndex ? this.tf.refRow : 0;
+        var beginIndex = noValidRowsIndex ? tf.refRow : 0;
         // nb indexes
         var indexLen = noValidRowsIndex ?
-                this.tf.nbFilterableRows+beginIndex :
+                tf.nbFilterableRows+beginIndex :
-                this.tf.validRowsIndex.length;
+                validRowsIndex.length;
         var idx = 0;
 
         //alternates bg color
         for(var j=beginIndex; j<indexLen; j++){
-            var rowIdx = noValidRowsIndex ? j : this.tf.validRowsIndex[j];
+            var rowIdx = noValidRowsIndex ? j : validRowsIndex[j];
             this.setRowBg(rowIdx, idx);
             idx++;
         }
@@ -74,7 +76,7 @@ export class AlternateRows{
     }
 
     /**
-     * Removes all row background color
+     * Removes all alternating backgrounds
      */
     remove() {
         if(!this.tf.hasGrid()){
@@ -83,7 +85,6 @@ export class AlternateRows{
         for(var i=this.tf.refRow; i<this.tf.nbRows; i++){
             this.removeRowBg(i);
         }
-        this.tf.isStartBgAlternate = true;
     }
 
     enable() {

src/modules/paging.js

@@ -454,9 +454,8 @@ export class Paging{
         }
 
         tf.nbVisibleRows = tf.validRowsIndex.length;
-        tf.isStartBgAlternate = false;
         //re-applies filter behaviours after filtering process
-        tf.applyGridProps();
+        tf.applyProps();
     }
 
     /**

src/tablefilter.js

@@ -182,7 +182,6 @@ export class TableFilter{
         this.fltSmallCssClass = f.flt_small_css_class || 'flt_s';
         //defines css class for single-filter
         this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
-        this.isStartBgAlternate =   true;
 
         /*** filters' grid behaviours ***/
         //enables/disables enter key
@@ -470,9 +469,7 @@ export class TableFilter{
                 loadthemes: 'LoadThemes'
             },
 
-            /*====================================================
+            // Detect <enter> key
-                - Detects <enter> key for a given element
-            =====================================================*/
             detectKey(e) {
                 if(!this.enterKey){ return; }
                 let _ev = e || global.event;
@@ -489,9 +486,7 @@ export class TableFilter{
                     }
                 }
             },
-            /*====================================================
+            // if auto-filter on, detect user is typing and filter columns
-                - auto filter for text filters
-            =====================================================*/
             onKeyUp(e) {
                 if(!this.autoFilter){
                     return;
@@ -520,16 +515,12 @@ export class TableFilter{
                     this.autoFilterTimer = null;
                 }
             },
-            /*====================================================
+            // if auto-filter on, detect user is typing
-                - onkeydown event for input filters
-            =====================================================*/
             onKeyDown() {
                 if(!this.autoFilter) { return; }
                 this.isUserTyping = true;
             },
-            /*====================================================
+            // if auto-filter on, clear interval on filter blur
-                - onblur event for input filters
-            =====================================================*/
             onInpBlur() {
                 if(this.autoFilter){
                     this.isUserTyping = false;
@@ -544,9 +535,7 @@ export class TableFilter{
                 //     }
                 // }
             },
-            /*====================================================
+            // set focused text-box filter as active
-                - onfocus event for input filters
-            =====================================================*/
             onInpFocus(e) {
                 let _ev = e || global.event;
                 let elm = Event.target(_ev);
@@ -565,9 +554,7 @@ export class TableFilter{
                 //     }
                 // }
             },
-            /*====================================================
+            // set focused drop-down filter as active
-                - onfocus event for select filters
-            =====================================================*/
             onSlcFocus(e) {
                 let _ev = e || global.event;
                 let elm = Event.target(_ev);
@@ -583,23 +570,14 @@ export class TableFilter{
                     Event.stop(_ev);
                 }
             },
-            /*====================================================
+            // filter columns on drop-down filter change
-                - onchange event for select filters
-            =====================================================*/
             onSlcChange(e) {
                 if(!this.activeFlt){ return; }
-                // let colIndex = o.activeFlt.getAttribute('colIndex');
-                //Checks filter is a checklist and caller is not null
-                // if(o.activeFlt && colIndex &&
-                //     o['col'+colIndex]===o.fltTypeCheckList &&
-                //     !o.Evt.onSlcChange.caller){ return; }
                 let _ev = e || global.event;
                 if(this.popUpFilters){ Event.stop(_ev); }
                 if(this.onSlcChange){ this.filter(); }
             },
-            /*====================================================
+            // fill checklist filter on click if required
-                - onclick event for checklist filters
-            =====================================================*/
             onCheckListClick(e) {
                 let _ev = e || global.event;
                 let elm = Event.target(_ev);
@@ -610,10 +588,7 @@ export class TableFilter{
                     this.Mod.checkList.checkListDiv[ct].title = '';
                 }
             },
-            /*====================================================
+            // filter when validation button clicked
-                - onclick event for validation button
-                (btn property)
-            =====================================================*/
             onBtnClick() {
                 this.filter();
             }
@@ -1140,6 +1115,7 @@ export class TableFilter{
                 let theme = themes[i];
                 let name = theme.name;
                 let path = theme.path;
+                let styleId = this.prfxTf + name;
                 if(name && !path){
                     path = this.themesPath + name + '/' + name + '.css';
                 }
@@ -1148,12 +1124,12 @@ export class TableFilter{
                 }
 
                 if(!this.isImported(path, 'link')){
-                    this.import('tf-' + name, path, null, 'link');
+                    this.import(styleId, path, null, 'link');
                 }
             }
         }
 
-        //Some elements need to be overriden for theme
+        //Some elements need to be overriden for default theme
         //Reset button
         this.btnResetText = null;
         this.btnResetHtml = '<input type="button" value="" class="' +
@@ -1175,6 +1151,14 @@ export class TableFilter{
         this.loaderText = null;
     }
 
+    /**
+     * Return stylesheet DOM element for a given theme name
+     * @return {DOMElement} stylesheet element
+     */
+    getStylesheet(name='default'){
+        return Dom.id(this.prfxTf + name);
+    }
+
     /**
      * Destroy filter grid
      */
@@ -1221,7 +1205,7 @@ export class TableFilter{
             this.tbl.deleteRow(this.filtersRowIndex);
         }
 
-        // Destroy module
+        // Destroy modules
         Object.keys(Mod).forEach(function(key) {
             var feature = Mod[key];
             if(feature && Types.isFn(feature.destroy)){
@@ -1831,6 +1815,9 @@ export class TableFilter{
 
             if(!isRowValid){
                 this.validateRow(k, false);
+                if(Mod.alternateRows){
+                    Mod.alternateRows.removeRowBg(k);
+                }
                 // always visible rows need to be counted as valid
                 if(this.hasVisibleRows && Arr.has(this.visibleRows, k) &&
                     !this.paging){
@@ -1852,14 +1839,13 @@ export class TableFilter{
 
         this.nbVisibleRows = this.validRowsIndex.length;
         this.nbHiddenRows = hiddenrows;
-        this.isStartBgAlternate = false;
 
         if(this.rememberGridValues){
             Mod.store.saveFilterValues(this.fltsValuesCookie);
         }
         //applies filter props after filtering process
         if(!this.paging){
-            this.applyGridProps();
+            this.applyProps();
         } else {
             // Shouldn't need to care of that here...
             // TODO: provide a method in paging module
@@ -1875,19 +1861,11 @@ export class TableFilter{
     }
 
     /**
-     * Re-apply the filters grid properties after a filtering/paging operation
+     * Re-apply the features/behaviour concerned by filtering/paging operation
+     *
+     * NOTE: this will disappear whenever custom events in place
      */
-    applyGridProps(){
+    applyProps(){
-        // blurs active filter (IE)
-        if(this.activeFlt &&
-            Str.lower(this.activeFlt.nodeName)===this.fltTypeSlc &&
-            !this.popUpFilters){
-            this.activeFlt.blur();
-            if(this.activeFlt.parentNode){
-                this.activeFlt.parentNode.focus();
-            }
-        }
-
         let Mod = this.Mod;
 
         //shows rows always visible

static/style/themes/SkyBlue/skyblue.css

@@ -40,12 +40,9 @@ input.flt{ width:99% !important; }
 =====================================================*/
 /* div containing left, middle and right divs */
 .inf{
-	background:#D9EAED !important;
+	background:#E3EFFF !important;
-	border:1px solid #99CCCC;
+	border:1px solid #A4BED4;
 	height:25px; color:#004A6F;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
 }
 div.tot, div.status{ border-right:0 !important; }
 

static/templates/theme-roller.html

@@ -93,13 +93,8 @@ var THEMES = {
 };
 
 function changeTheme(name){
-    var styleId = 'tf-default';
+    var stylesheet = tf.getStylesheet('default');
-    var stylesheet = document.getElementById(styleId);
+    stylesheet.href = THEMES[name];
-    if(!stylesheet){
-        tf.import(styleId, THEMES[name], null, 'link');
-    } else {
-        stylesheet.href = THEMES[name];
-    }
 }
 </script>
 

test/test-alternate-rows.js

@@ -4,12 +4,97 @@ var tf = new TableFilter('demo', {
     alternate_rows: true
 });
 tf.init();
+var tbl = tf.tbl;
+var altRows = tf.feature('alternateRows');
 
 module('Sanity checks');
 test('AlternateRows component', function() {
-    deepEqual(
+    deepEqual(typeof altRows, 'object', 'AlternateRows instanciated');
-        typeof tf.feature('alternateRows'),
+    deepEqual(altRows.evenCss, 'even', 'Expected even css class');
-        'object',
+    deepEqual(altRows.oddCss, 'odd', 'Expected odd css class');
-        'AlternateRows instanciated'
+});
-    );
+
+module('Actions');
+test('Filter column', function() {
+    tf.setFilterValue(2, '>1400');
+    tf.filter();
+
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 2, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 2, 'Even bg removed');
+});
+
+test('Clear filters', function() {
+    tf.clearFilters();
+    tf.filter();
+
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 3, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 4, 'Even bg removed');
+});
+
+test('Remove alternating rows', function() {
+    altRows.remove();
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 0, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 0, 'Even bg removed');
+});
+
+test('Set background on a row', function() {
+    altRows.setRowBg(4);
+    deepEqual(tbl.rows[4].className, 'odd', 'Bg set on expected row');
+});
+
+test('Remove background on a row', function() {
+    altRows.removeRowBg(4);
+    deepEqual(tbl.rows[4].querySelectorAll('.odd').length,
+        0, 'Bg set on expected row');
+});
+
+test('Grid layout: initialising alternating rows', function() {
+    tf.destroy();
+    tf = null;
+    tf = new TableFilter('demo', {
+        base_path: '../dist/tablefilter/',
+        grid_layout: true,
+        alternate_rows: true
+    });
+    tf.init();
+    tbl = tf.tbl;
+    altRows = tf.feature('alternateRows');
+
+    deepEqual(
+        tbl.querySelectorAll('tr.odd').length, 4, 'Expected bg for odd rows');
+    deepEqual(
+        tbl.querySelectorAll('tr.even').length, 3, 'Expected bg for even rows');
+});
+
+test('Grid layout: filter column', function() {
+    tf.setFilterValue(3, '<2');
+    tf.filter();
+
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 2, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 2, 'Even bg removed');
+});
+
+test('Grid layout: clear filters', function() {
+    tf.clearFilters();
+    tf.filter();
+
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 3, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 4, 'Even bg removed');
+});
+
+test('Grid layout: remove alternating rows', function() {
+    altRows.remove();
+    deepEqual(tbl.querySelectorAll('tr.odd').length, 0, 'Odd bgs removed');
+    deepEqual(tbl.querySelectorAll('tr.even').length, 0, 'Even bg removed');
+});
+
+test('Grid layout: set background on a row', function() {
+    altRows.setRowBg(4);
+    deepEqual(tbl.rows[4].className, 'odd', 'Bg set on expected row');
+});
+
+test('Grid layout: remove background on a row', function() {
+    altRows.removeRowBg(4);
+    deepEqual(tbl.rows[4].querySelectorAll('.odd').length,
+        0, 'Bg set on expected row');
 });