2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2016-05-25 09:31:53 +02:00
|
|
|
import {createElm, createText, elm, removeElm} from '../dom';
|
2017-10-08 12:14:25 +02:00
|
|
|
import {EMPTY_FN, isNull} from '../types';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {defaultsStr, defaultsFn} from '../settings';
|
2017-10-08 12:14:25 +02:00
|
|
|
import {LEFT} from './toolbar';
|
2014-11-16 01:29:07 +01:00
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* Rows counter UI component
|
|
|
|
* @export
|
|
|
|
* @class RowsCounter
|
|
|
|
* @extends {Feature}
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
export class RowsCounter extends Feature {
|
2014-11-16 11:01:29 +01:00
|
|
|
|
2014-11-16 01:29:07 +01:00
|
|
|
/**
|
2016-08-05 16:53:32 +02:00
|
|
|
* Creates an instance of RowsCounter
|
|
|
|
* @param {TableFilter} tf TableFilter instance
|
2014-11-16 01:29:07 +01:00
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
constructor(tf) {
|
2015-11-14 16:14:13 +01:00
|
|
|
super(tf, 'rowsCounter');
|
|
|
|
|
2014-11-16 01:29:07 +01:00
|
|
|
// TableFilter configuration
|
2017-05-02 14:31:02 +02:00
|
|
|
let f = this.config.rows_counter || {};
|
2014-11-16 01:29:07 +01:00
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* ID of custom container element
|
2016-08-06 16:48:00 +02:00
|
|
|
* @type {String}
|
2016-08-05 16:53:32 +02:00
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.targetId = defaultsStr(f.target_id, null);
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Container DOM element
|
|
|
|
* @type {DOMElement}
|
|
|
|
* @private
|
|
|
|
*/
|
2016-08-05 17:26:53 +02:00
|
|
|
this.container = null;
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
2016-08-05 17:26:53 +02:00
|
|
|
* Container DOM element for label displaying the total number of rows
|
2016-08-05 16:53:32 +02:00
|
|
|
* @type {DOMElement}
|
|
|
|
* @private
|
|
|
|
*/
|
2016-08-05 17:26:53 +02:00
|
|
|
this.label = null;
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Text preceding the total number of rows
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.text = defaultsStr(f.text, 'Rows: ');
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Separator symbol appearing between the first and last visible rows of
|
|
|
|
* current page when paging is enabled. ie: Rows: 31-40 / 70
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.fromToTextSeparator = defaultsStr(f.separator, '-');
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.overText = defaultsStr(f.over_text, ' / ');
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Css class for container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.cssClass = defaultsStr(f.css_class, 'tot');
|
2016-08-05 16:53:32 +02:00
|
|
|
|
2017-10-08 12:14:25 +02:00
|
|
|
/**
|
|
|
|
* Default position in toolbar ('left'|'center'|'right')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
|
|
|
this.toolbarPosition = defaultsStr(f.toolbar_position, LEFT);
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* Callback fired before the counter is refreshed
|
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onBeforeRefreshCounter = defaultsFn(f.on_before_refresh_counter,
|
|
|
|
EMPTY_FN);
|
2016-08-05 16:53:32 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback fired after the counter is refreshed
|
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onAfterRefreshCounter = defaultsFn(f.on_after_refresh_counter,
|
|
|
|
EMPTY_FN);
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* Initializes RowsCounter instance
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
init() {
|
|
|
|
if (this.initialized) {
|
2014-11-16 01:29:07 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-10-08 12:14:25 +02:00
|
|
|
this.emitter.emit('initializing-feature', this, !isNull(this.targetId));
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
let tf = this.tf;
|
2015-11-14 16:14:13 +01:00
|
|
|
|
2014-11-16 01:29:07 +01:00
|
|
|
//rows counter container
|
2016-11-01 03:58:25 +01:00
|
|
|
let countDiv = createElm('div');
|
2016-08-05 17:26:53 +02:00
|
|
|
countDiv.className = this.cssClass;
|
2014-11-16 01:29:07 +01:00
|
|
|
//rows counter label
|
2016-11-01 03:58:25 +01:00
|
|
|
let countSpan = createElm('span');
|
|
|
|
let countText = createElm('span');
|
2016-08-05 17:26:53 +02:00
|
|
|
countText.appendChild(createText(this.text));
|
2014-11-16 01:29:07 +01:00
|
|
|
|
|
|
|
// counter is added to defined element
|
2017-10-09 12:56:58 +02:00
|
|
|
let targetEl = !this.targetId ?
|
|
|
|
tf.feature('toolbar').container(this.toolbarPosition) :
|
2017-10-08 12:14:25 +02:00
|
|
|
elm(this.targetId);
|
2014-11-16 01:29:07 +01:00
|
|
|
|
|
|
|
//default container: 'lDiv'
|
2016-08-05 17:26:53 +02:00
|
|
|
if (!this.targetId) {
|
2014-11-16 01:29:07 +01:00
|
|
|
countDiv.appendChild(countText);
|
|
|
|
countDiv.appendChild(countSpan);
|
|
|
|
targetEl.appendChild(countDiv);
|
2017-05-06 13:32:01 +02:00
|
|
|
} else {
|
2014-11-16 01:29:07 +01:00
|
|
|
//custom container, no need to append statusDiv
|
|
|
|
targetEl.appendChild(countText);
|
|
|
|
targetEl.appendChild(countSpan);
|
|
|
|
}
|
2016-08-05 17:26:53 +02:00
|
|
|
this.container = countDiv;
|
|
|
|
this.label = countSpan;
|
2014-11-16 01:29:07 +01:00
|
|
|
|
2016-01-03 03:49:04 +01:00
|
|
|
// subscribe to events
|
|
|
|
this.emitter.on(['after-filtering', 'grouped-by-page'],
|
2016-05-26 06:36:36 +02:00
|
|
|
() => this.refresh(tf.getValidRowsNb()));
|
2016-05-24 10:42:11 +02:00
|
|
|
this.emitter.on(['rows-changed'], () => this.refresh());
|
2015-12-27 12:08:14 +01:00
|
|
|
|
2016-11-01 03:58:25 +01:00
|
|
|
/** @inherited */
|
2015-11-14 16:14:13 +01:00
|
|
|
this.initialized = true;
|
2014-11-16 01:29:07 +01:00
|
|
|
this.refresh();
|
2017-10-08 12:14:25 +02:00
|
|
|
|
|
|
|
this.emitter.emit('feature-initialized', this);
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* Refreshes the rows counter
|
|
|
|
* @param {Number} p Optional parameter the total number of rows to display
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
refresh(p) {
|
|
|
|
if (!this.initialized || !this.isEnabled()) {
|
2014-11-16 01:29:07 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
let tf = this.tf;
|
2014-11-16 01:29:07 +01:00
|
|
|
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onBeforeRefreshCounter(tf, this.label);
|
2014-11-16 01:29:07 +01:00
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
let totTxt;
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!tf.paging) {
|
|
|
|
if (p && p !== '') {
|
2014-11-16 01:29:07 +01:00
|
|
|
totTxt = p;
|
2016-05-24 10:42:11 +02:00
|
|
|
} else {
|
2016-05-26 09:23:21 +02:00
|
|
|
totTxt = tf.getFilterableRowsNb() - tf.nbHiddenRows;
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
|
|
|
} else {
|
2016-08-05 16:53:32 +02:00
|
|
|
let paging = tf.feature('paging');
|
2016-05-24 10:42:11 +02:00
|
|
|
if (paging) {
|
2017-05-02 14:31:02 +02:00
|
|
|
let nbValidRows = tf.getValidRowsNb();
|
2015-01-26 10:31:25 +01:00
|
|
|
//paging start row
|
2016-08-05 16:53:32 +02:00
|
|
|
let pagingStartRow = parseInt(paging.startPagingRow, 10) +
|
2017-05-02 14:31:02 +02:00
|
|
|
((nbValidRows > 0) ? 1 : 0);
|
2016-08-05 16:53:32 +02:00
|
|
|
let pagingEndRow =
|
2017-06-14 14:12:44 +02:00
|
|
|
(pagingStartRow + paging.pageLength) - 1 <=
|
2017-05-02 14:31:02 +02:00
|
|
|
nbValidRows ?
|
2017-06-14 14:12:44 +02:00
|
|
|
pagingStartRow + paging.pageLength - 1 :
|
2017-05-02 14:31:02 +02:00
|
|
|
nbValidRows;
|
2016-05-26 06:36:36 +02:00
|
|
|
totTxt = pagingStartRow + this.fromToTextSeparator +
|
2017-05-02 14:31:02 +02:00
|
|
|
pagingEndRow + this.overText + nbValidRows;
|
2015-01-26 10:31:25 +01:00
|
|
|
}
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
2015-08-01 09:45:29 +02:00
|
|
|
|
2016-08-05 17:26:53 +02:00
|
|
|
this.label.innerHTML = totTxt;
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onAfterRefreshCounter(tf, this.label, totTxt);
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
|
|
|
|
2016-08-05 16:53:32 +02:00
|
|
|
/**
|
|
|
|
* Remove feature
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
destroy() {
|
|
|
|
if (!this.initialized) {
|
2014-11-16 01:29:07 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-08-05 17:26:53 +02:00
|
|
|
if (!this.targetId && this.container) {
|
|
|
|
removeElm(this.container);
|
2014-11-16 01:29:07 +01:00
|
|
|
} else {
|
2016-08-05 17:26:53 +02:00
|
|
|
elm(this.targetId).innerHTML = '';
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
2016-08-05 17:26:53 +02:00
|
|
|
this.label = null;
|
|
|
|
this.container = null;
|
2015-12-27 12:08:14 +01:00
|
|
|
|
|
|
|
// unsubscribe to events
|
2016-01-03 03:49:04 +01:00
|
|
|
this.emitter.off(['after-filtering', 'grouped-by-page'],
|
2016-05-26 06:36:36 +02:00
|
|
|
() => this.refresh(tf.getValidRowsNb()));
|
2016-05-24 10:42:11 +02:00
|
|
|
this.emitter.off(['rows-changed'], () => this.refresh());
|
2015-12-27 12:08:14 +01:00
|
|
|
|
2015-11-14 16:14:13 +01:00
|
|
|
this.initialized = false;
|
2014-11-16 01:29:07 +01:00
|
|
|
}
|
2015-07-04 14:08:58 +02:00
|
|
|
}
|