mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-28 10:20:17 +02:00
197 lines
5.5 KiB
JavaScript
197 lines
5.5 KiB
JavaScript
import {Feature} from '../feature';
|
|
import {createElm, createText, elm, removeElm} from '../dom';
|
|
import {isFn, EMPTY_FN} from '../types';
|
|
|
|
/**
|
|
* Rows counter UI component
|
|
* @export
|
|
* @class RowsCounter
|
|
* @extends {Feature}
|
|
*/
|
|
export class RowsCounter extends Feature {
|
|
|
|
/**
|
|
* Creates an instance of RowsCounter
|
|
* @param {TableFilter} tf TableFilter instance
|
|
*/
|
|
constructor(tf) {
|
|
super(tf, 'rowsCounter');
|
|
|
|
// TableFilter configuration
|
|
let f = this.config.rows_counter || {};
|
|
|
|
/**
|
|
* ID of custom container element
|
|
* @type {String}
|
|
*/
|
|
this.targetId = f.target_id || null;
|
|
|
|
/**
|
|
* Container DOM element
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.container = null;
|
|
|
|
/**
|
|
* Container DOM element for label displaying the total number of rows
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.label = null;
|
|
|
|
/**
|
|
* Text preceding the total number of rows
|
|
* @type {String}
|
|
*/
|
|
this.text = f.text || 'Rows: ';
|
|
|
|
/**
|
|
* Separator symbol appearing between the first and last visible rows of
|
|
* current page when paging is enabled. ie: Rows: 31-40 / 70
|
|
* @type {String}
|
|
*/
|
|
this.fromToTextSeparator = f.separator || '-';
|
|
|
|
/**
|
|
* Separator symbol appearing between the first and last visible rows of
|
|
* current page and the total number of filterable rows when paging is
|
|
* enabled. ie: Rows: 31-40 / 70
|
|
* @type {String}
|
|
*/
|
|
this.overText = f.over_text || ' / ';
|
|
|
|
/**
|
|
* Css class for container element
|
|
* @type {String}
|
|
*/
|
|
this.cssClass = f.css_class || 'tot';
|
|
|
|
/**
|
|
* Callback fired before the counter is refreshed
|
|
* @type {Function}
|
|
*/
|
|
this.onBeforeRefreshCounter = isFn(f.on_before_refresh_counter) ?
|
|
f.on_before_refresh_counter : EMPTY_FN;
|
|
|
|
/**
|
|
* Callback fired after the counter is refreshed
|
|
* @type {Function}
|
|
*/
|
|
this.onAfterRefreshCounter = isFn(f.on_after_refresh_counter) ?
|
|
f.on_after_refresh_counter : EMPTY_FN;
|
|
}
|
|
|
|
/**
|
|
* Initializes RowsCounter instance
|
|
*/
|
|
init() {
|
|
if (this.initialized) {
|
|
return;
|
|
}
|
|
|
|
let tf = this.tf;
|
|
|
|
//rows counter container
|
|
let countDiv = createElm('div');
|
|
countDiv.className = this.cssClass;
|
|
//rows counter label
|
|
let countSpan = createElm('span');
|
|
let countText = createElm('span');
|
|
countText.appendChild(createText(this.text));
|
|
|
|
// counter is added to defined element
|
|
if (!this.targetId) {
|
|
tf.setToolbar();
|
|
}
|
|
let targetEl = !this.targetId ? tf.lDiv : elm(this.targetId);
|
|
|
|
//default container: 'lDiv'
|
|
if (!this.targetId) {
|
|
countDiv.appendChild(countText);
|
|
countDiv.appendChild(countSpan);
|
|
targetEl.appendChild(countDiv);
|
|
} else {
|
|
//custom container, no need to append statusDiv
|
|
targetEl.appendChild(countText);
|
|
targetEl.appendChild(countSpan);
|
|
}
|
|
this.container = countDiv;
|
|
this.label = countSpan;
|
|
|
|
// subscribe to events
|
|
this.emitter.on(['after-filtering', 'grouped-by-page'],
|
|
() => this.refresh(tf.getValidRowsNb()));
|
|
this.emitter.on(['rows-changed'], () => this.refresh());
|
|
|
|
/** @inherited */
|
|
this.initialized = true;
|
|
this.refresh();
|
|
}
|
|
|
|
/**
|
|
* Refreshes the rows counter
|
|
* @param {Number} p Optional parameter the total number of rows to display
|
|
*/
|
|
refresh(p) {
|
|
if (!this.initialized || !this.isEnabled()) {
|
|
return;
|
|
}
|
|
|
|
let tf = this.tf;
|
|
|
|
this.onBeforeRefreshCounter(tf, this.label);
|
|
|
|
let totTxt;
|
|
if (!tf.paging) {
|
|
if (p && p !== '') {
|
|
totTxt = p;
|
|
} else {
|
|
totTxt = tf.getFilterableRowsNb() - tf.nbHiddenRows;
|
|
}
|
|
} else {
|
|
let paging = tf.feature('paging');
|
|
if (paging) {
|
|
let nbValidRows = tf.getValidRowsNb();
|
|
//paging start row
|
|
let pagingStartRow = parseInt(paging.startPagingRow, 10) +
|
|
((nbValidRows > 0) ? 1 : 0);
|
|
let pagingEndRow =
|
|
(pagingStartRow + paging.pageLength) - 1 <=
|
|
nbValidRows ?
|
|
pagingStartRow + paging.pageLength - 1 :
|
|
nbValidRows;
|
|
totTxt = pagingStartRow + this.fromToTextSeparator +
|
|
pagingEndRow + this.overText + nbValidRows;
|
|
}
|
|
}
|
|
|
|
this.label.innerHTML = totTxt;
|
|
this.onAfterRefreshCounter(tf, this.label, totTxt);
|
|
}
|
|
|
|
/**
|
|
* Remove feature
|
|
*/
|
|
destroy() {
|
|
if (!this.initialized) {
|
|
return;
|
|
}
|
|
|
|
if (!this.targetId && this.container) {
|
|
removeElm(this.container);
|
|
} else {
|
|
elm(this.targetId).innerHTML = '';
|
|
}
|
|
this.label = null;
|
|
this.container = null;
|
|
|
|
// unsubscribe to events
|
|
this.emitter.off(['after-filtering', 'grouped-by-page'],
|
|
() => this.refresh(tf.getValidRowsNb()));
|
|
this.emitter.off(['rows-changed'], () => this.refresh());
|
|
|
|
this.initialized = false;
|
|
}
|
|
}
|