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';
|
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) {
|
2015-11-14 16:14:13 +01:00
|
|
|
super(tf, 'alternateRows');
|
|
|
|
|
2016-05-31 11:22:21 +02:00
|
|
|
let config = this.config;
|
2016-06-19 07:07:49 +02:00
|
|
|
/**
|
|
|
|
* Css class for even rows (default: 'even')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2015-11-14 16:14:13 +01:00
|
|
|
this.evenCss = config.even_row_css_class || 'even';
|
2016-06-19 07:07:49 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Css class for odd rows (default: 'odd')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2015-11-14 16:14:13 +01:00
|
|
|
this.oddCss = 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'],
|
2016-05-24 10:42:11 +02:00
|
|
|
(tf, rowIndex, arrIndex, isValid) =>
|
2016-01-03 03:49:04 +01:00
|
|
|
this.processRow(rowIndex, arrIndex, isValid));
|
2016-05-24 10:42:11 +02:00
|
|
|
this.emitter.on(['column-sorted'], () => this.processAll());
|
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;
|
|
|
|
}
|
2016-05-31 11:22:21 +02:00
|
|
|
let rows = this.tf.tbl.rows;
|
|
|
|
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;
|
|
|
|
}
|
2016-05-31 11:22:21 +02:00
|
|
|
let rows = this.tf.tbl.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
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
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;
|
|
|
|
}
|
2016-05-19 09:38:18 +02:00
|
|
|
let nbRows = this.tf.getRowsNb(true);
|
2016-05-31 11:22:21 +02:00
|
|
|
for (let i = 0; i < nbRows; i++) {
|
2014-11-15 15:34:32 +01:00
|
|
|
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'],
|
2016-05-24 10:42:11 +02:00
|
|
|
(tf, rowIndex, arrIndex, isValid) =>
|
2016-01-03 03:49:04 +01:00
|
|
|
this.processRow(rowIndex, arrIndex, isValid));
|
2016-05-24 10:42:11 +02:00
|
|
|
this.emitter.off(['column-sorted'], () => this.processAll());
|
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
|
|
|
}
|
|
|
|
|
|
|
|
}
|