2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2016-05-24 10:42:11 +02:00
|
|
|
import {addClass, removeClass} from '../dom';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {defaultsStr} from '../settings';
|
2018-06-02 05:48:07 +02:00
|
|
|
import {bound} from '../event';
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-05-31 11:22:21 +02:00
|
|
|
/**
|
|
|
|
* Rows with alternating background color for improved readability
|
|
|
|
*/
|
2015-11-14 16:14:13 +01:00
|
|
|
export class AlternateRows extends Feature {
|
2014-11-15 15:34:32 +01:00
|
|
|
|
|
|
|
/**
|
2016-05-31 11:22:21 +02:00
|
|
|
* Creates an instance of AlternateRows.
|
|
|
|
*
|
2014-11-15 15:34:32 +01:00
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
*/
|
|
|
|
constructor(tf) {
|
2019-02-09 14:27:55 +01:00
|
|
|
super(tf, AlternateRows);
|
2015-11-14 16:14:13 +01:00
|
|
|
|
2016-05-31 11:22:21 +02:00
|
|
|
let config = this.config;
|
2019-02-09 14:27:55 +01:00
|
|
|
|
2016-06-19 07:07:49 +02:00
|
|
|
/**
|
|
|
|
* Css class for even rows (default: 'even')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.evenCss = defaultsStr(config.even_row_css_class, 'even');
|
2016-06-19 07:07:49 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Css class for odd rows (default: 'odd')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.oddCss = defaultsStr(config.odd_row_css_class, 'odd');
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Sets alternating rows color
|
|
|
|
*/
|
2014-11-16 01:29:07 +01:00
|
|
|
init() {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (this.initialized) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-11-14 16:14:13 +01:00
|
|
|
|
2016-01-02 04:43:00 +01:00
|
|
|
this.processAll();
|
|
|
|
|
2016-01-03 03:49:04 +01:00
|
|
|
// Subscribe to events
|
|
|
|
this.emitter.on(['row-processed', 'row-paged'],
|
2018-06-02 05:48:07 +02:00
|
|
|
bound(this.processRowHandler, this));
|
2017-07-09 07:11:51 +02:00
|
|
|
this.emitter.on(['column-sorted', 'rows-changed'],
|
2018-06-02 05:48:07 +02:00
|
|
|
bound(this.processAll, this));
|
2016-01-02 04:43:00 +01:00
|
|
|
|
2016-12-09 13:25:42 +01:00
|
|
|
/** @inherited */
|
2016-01-02 04:43:00 +01:00
|
|
|
this.initialized = true;
|
|
|
|
}
|
|
|
|
|
2016-05-31 11:22:21 +02:00
|
|
|
/**
|
|
|
|
* Apply background to all valid rows
|
|
|
|
*/
|
2016-01-02 04:43:00 +01:00
|
|
|
processAll() {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.isEnabled()) {
|
2016-01-02 04:43:00 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-05-31 11:22:21 +02:00
|
|
|
let tf = this.tf;
|
|
|
|
let validRowsIndex = tf.getValidRows(true);
|
|
|
|
let indexLen = validRowsIndex.length;
|
|
|
|
let idx = 0;
|
2014-11-15 15:34:32 +01:00
|
|
|
|
|
|
|
//alternates bg color
|
2016-05-31 11:22:21 +02:00
|
|
|
for (let j = 0; j < indexLen; j++) {
|
|
|
|
let rowIdx = validRowsIndex[j];
|
2014-11-15 15:34:32 +01:00
|
|
|
this.setRowBg(rowIdx, idx);
|
|
|
|
idx++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-12-31 02:56:50 +01:00
|
|
|
/**
|
|
|
|
* Set/remove row background based on row validation
|
|
|
|
* @param {Number} rowIdx Row index
|
2016-02-28 13:01:26 +01:00
|
|
|
* @param {Number} arrIdx Array index
|
2015-12-31 02:56:50 +01:00
|
|
|
* @param {Boolean} isValid Valid row flag
|
|
|
|
*/
|
2016-01-02 04:43:00 +01:00
|
|
|
processRow(rowIdx, arrIdx, isValid) {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (isValid) {
|
2016-01-02 04:43:00 +01:00
|
|
|
this.setRowBg(rowIdx, arrIdx);
|
2015-12-30 07:59:20 +01:00
|
|
|
} else {
|
|
|
|
this.removeRowBg(rowIdx);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-11-15 15:34:32 +01:00
|
|
|
/**
|
|
|
|
* Sets row background color
|
|
|
|
* @param {Number} rowIdx Row index
|
|
|
|
* @param {Number} idx Valid rows collection index needed to calculate bg
|
|
|
|
* color
|
2016-06-19 07:07:49 +02:00
|
|
|
* @private
|
2014-11-15 15:34:32 +01:00
|
|
|
*/
|
|
|
|
setRowBg(rowIdx, idx) {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.isEnabled() || isNaN(rowIdx)) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2017-04-14 11:30:58 +02:00
|
|
|
let rows = this.tf.dom().rows;
|
2016-05-31 11:22:21 +02:00
|
|
|
let i = isNaN(idx) ? rowIdx : idx;
|
2014-11-15 15:34:32 +01:00
|
|
|
this.removeRowBg(rowIdx);
|
2015-06-27 12:52:40 +02:00
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
addClass(rows[rowIdx], (i % 2) ? this.evenCss : this.oddCss);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Removes row background color
|
|
|
|
* @param {Number} idx Row index
|
2016-06-19 07:07:49 +02:00
|
|
|
* @private
|
2014-11-15 15:34:32 +01:00
|
|
|
*/
|
|
|
|
removeRowBg(idx) {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (isNaN(idx)) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2017-04-14 11:30:58 +02:00
|
|
|
let rows = this.tf.dom().rows;
|
2016-05-24 10:42:11 +02:00
|
|
|
removeClass(rows[idx], this.oddCss);
|
|
|
|
removeClass(rows[idx], this.evenCss);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
2018-06-02 05:48:07 +02:00
|
|
|
/** @private */
|
|
|
|
processRowHandler(tf, rowIndex, arrIndex, isValid) {
|
|
|
|
this.processRow(rowIndex, arrIndex, isValid);
|
|
|
|
}
|
|
|
|
|
2014-11-15 15:34:32 +01:00
|
|
|
/**
|
2015-06-27 16:47:13 +02:00
|
|
|
* Removes all alternating backgrounds
|
2014-11-15 15:34:32 +01:00
|
|
|
*/
|
2015-11-14 16:14:13 +01:00
|
|
|
destroy() {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.initialized) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2017-12-03 11:48:00 +01:00
|
|
|
|
2017-11-10 12:29:37 +01:00
|
|
|
let eachRow = this.tf.eachRow(0);
|
|
|
|
eachRow((row, i) => this.removeRowBg(i));
|
2015-12-30 07:59:20 +01:00
|
|
|
|
2016-01-03 03:49:04 +01:00
|
|
|
// Unsubscribe to events
|
|
|
|
this.emitter.off(['row-processed', 'row-paged'],
|
2018-06-02 05:48:07 +02:00
|
|
|
bound(this.processRowHandler, this));
|
2017-07-09 07:11:51 +02:00
|
|
|
this.emitter.off(['column-sorted', 'rows-changed'],
|
2018-06-02 05:48:07 +02:00
|
|
|
bound(this.processAll, this));
|
2015-12-30 07:59:20 +01:00
|
|
|
|
2015-11-14 16:14:13 +01:00
|
|
|
this.initialized = false;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|