mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-17 05:06:49 +02:00
222 lines
5.6 KiB
JavaScript
222 lines
5.6 KiB
JavaScript
import {Feature} from '../feature';
|
|
import {createElm, removeElm, elm, tag} from '../dom';
|
|
import {defaultsStr} from '../settings';
|
|
import {isUndef} from '../types';
|
|
|
|
const EVENTS = [
|
|
'initializing-feature',
|
|
'initializing-extension'
|
|
];
|
|
|
|
/** Left position in toolbar */
|
|
export const LEFT = 'left';
|
|
/** Right position in toolbar */
|
|
export const RIGHT = 'right';
|
|
/** Center position in toolbar */
|
|
export const CENTER = 'center';
|
|
|
|
/**
|
|
* Toolbar UI component
|
|
* @export
|
|
* @class Toolbar
|
|
* @extends {Feature}
|
|
*/
|
|
export class Toolbar extends Feature {
|
|
|
|
/**
|
|
* Create an instance of Toolbar
|
|
* @param {TableFilter} tf TableFilter instance
|
|
* @memberof Toolbar
|
|
*/
|
|
constructor(tf) {
|
|
super(tf, 'toolbar');
|
|
|
|
// Configuration object
|
|
let f = this.config.toolbar || {};
|
|
|
|
/**
|
|
* Css class for toolbar's container DOM element
|
|
* @type {String}
|
|
*/
|
|
this.contCssClass = defaultsStr(f.container_css_class, 'inf');
|
|
|
|
/**
|
|
* Css class for left-side inner container DOM element
|
|
* @type {String}
|
|
*/
|
|
this.lContCssClass = defaultsStr(f.left_cont_css_class, 'ldiv');
|
|
|
|
/**
|
|
* Css class for right-side inner container DOM element
|
|
* @type {String}
|
|
*/
|
|
this.rContCssClass = defaultsStr(f.right_cont_css_class, 'rdiv');
|
|
|
|
/**
|
|
* Css class for middle inner container DOM element
|
|
* @type {String}
|
|
*/
|
|
this.cContCssClass = defaultsStr(f.center_cont_css_class, 'mdiv');
|
|
|
|
/**
|
|
* Toolbar's custom container ID
|
|
* @type {String}
|
|
*/
|
|
this.tgtId = defaultsStr(f.target_id, null);
|
|
|
|
/**
|
|
* Toolbar's container DOM element
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.cont = null;
|
|
|
|
/**
|
|
* Left-side inner container DOM element (rows counter in toolbar)
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.lCont = null;
|
|
|
|
/**
|
|
* Right-side inner container DOM element (reset button,
|
|
* page length selector in toolbar)
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.rCont = null;
|
|
|
|
/**
|
|
* Middle inner container DOM element (paging elements in toolbar)
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.cCont = null;
|
|
|
|
/**
|
|
* Container elements inside toolbar
|
|
* @private
|
|
*/
|
|
this.innerCont = {
|
|
left: null,
|
|
center: null,
|
|
right: null
|
|
};
|
|
|
|
this.emitter.on(EVENTS,
|
|
(feature, isExternal) => this.init(isExternal));
|
|
|
|
/** @inherited */
|
|
this.enabled = true;
|
|
}
|
|
|
|
/**
|
|
* Initialize toolbar components
|
|
* @param {Boolean} isExternal initialize only if component belongs
|
|
* to toolbar
|
|
*/
|
|
init(isExternal) {
|
|
if (this.initialized || isExternal) {
|
|
return;
|
|
}
|
|
|
|
let tf = this.tf;
|
|
|
|
// default container
|
|
let container = createElm('div');
|
|
container.className = this.contCssClass;
|
|
|
|
// custom container
|
|
if (this.tgtId) {
|
|
elm(this.tgtId).appendChild(container);
|
|
}
|
|
// grid-layout
|
|
else if (tf.gridLayout) {
|
|
let gridLayout = tf.Mod.gridLayout;
|
|
gridLayout.tblMainCont.appendChild(container);
|
|
container.className = gridLayout.infDivCssClass;
|
|
}
|
|
// default location: just above the table
|
|
else {
|
|
let cont = createElm('caption');
|
|
cont.appendChild(container);
|
|
tf.dom().insertBefore(cont, tf.dom().firstChild);
|
|
}
|
|
this.cont = container;
|
|
|
|
// left container
|
|
this.lCont = this.createContainer(container, this.lContCssClass);
|
|
|
|
// right container
|
|
this.rCont = this.createContainer(container, this.rContCssClass);
|
|
|
|
// middle container
|
|
this.cCont = this.createContainer(container, this.cContCssClass);
|
|
|
|
this.innerCont = {
|
|
left: this.lCont,
|
|
center: this.cCont,
|
|
right: this.rCont
|
|
};
|
|
|
|
/** @inherited */
|
|
this.initialized = true;
|
|
|
|
// emit help initialisation only if undefined
|
|
if (isUndef(tf.help)) {
|
|
// explicitily enable help to initialise feature by
|
|
// default, only if setting is undefined
|
|
tf.Mod.help.enable();
|
|
this.emitter.emit('init-help', tf);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return the container based on requested position inside the toolbar
|
|
* @param {String} [position=RIGHT] 3 possible positions: 'left', 'center',
|
|
* 'right'
|
|
* @param {DOMElement} el optional DOM element to be inserter in container
|
|
* @returns {DOMElement}
|
|
*/
|
|
container(position = RIGHT, el) {
|
|
let cont = this.innerCont[position];
|
|
if (el) {
|
|
cont.appendChild(el);
|
|
}
|
|
return cont;
|
|
}
|
|
|
|
/**
|
|
* Create DOM element inside passed container
|
|
* @param {DOMElement} container
|
|
* @param {String} css
|
|
* @private
|
|
*/
|
|
createContainer(container, css) {
|
|
let div = createElm('div', ['class', css]);
|
|
container.appendChild(div);
|
|
return div;
|
|
}
|
|
|
|
/**
|
|
* Destroy Toolbar instance
|
|
*/
|
|
destroy() {
|
|
if (!this.initialized) {
|
|
return;
|
|
}
|
|
|
|
let tf = this.tf;
|
|
|
|
removeElm(this.cont);
|
|
this.cont = null;
|
|
|
|
let tbl = tf.dom();
|
|
let captions = tag(tbl, 'caption');
|
|
[].forEach.call(captions, (el) => removeElm(el));
|
|
|
|
/** @inherited */
|
|
this.initialized = false;
|
|
}
|
|
}
|