src/modules/checkList.js
import {BaseDropdown} from './baseDropdown';
import {
addClass, createCheckItem, createText, createElm, elm, removeClass, tag
} from '../dom';
import {has} from '../array';
import {matchCase, trim, rgxEsc} from '../string';
import {addEvt, removeEvt, targetEvt} from '../event';
import {isEmpty} from '../types';
import {CHECKLIST, NONE} from '../const';
import {defaultsStr, defaultsBool} from '../settings';
/**
* Checklist filter UI component
* @export
* @class CheckList
* @extends {BaseDropdown}
*/
export class CheckList extends BaseDropdown {
/**
* Creates an instance of CheckList
* @param {TableFilter} tf TableFilter instance
*/
constructor(tf) {
super(tf, 'checkList');
let f = this.config;
/**
* List of container DOM elements
* @type {Array}
*/
this.containers = [];
/**
* Css class for the container of the checklist filter (div)
* @type {String}
*/
this.containerCssClass = defaultsStr(f.div_checklist_css_class,
'div_checklist');
/**
* Css class for the checklist filter element (ul)
* @type {String}
*/
this.filterCssClass = defaultsStr(f.checklist_css_class,
'flt_checklist');
/**
* Css class for the item of a checklist (li)
* @type {String}
*/
this.itemCssClass = defaultsStr(f.checklist_item_css_class,
'flt_checklist_item');
/**
* Css class for a selected item of a checklist (li)
* @type {String}
*/
this.selectedItemCssClass = defaultsStr(
f.checklist_selected_item_css_class,
'flt_checklist_slc_item'
);
/**
* Text placed in the filter's container when load filter on demand
* feature is enabled
* @type {String}
*/
this.activateText = defaultsStr(
f.activate_checklist_text,
'Click to load filter data'
);
/**
* Css class for a disabled item of a checklist (li)
* @type {String}
*/
this.disabledItemCssClass = defaultsStr(
f.checklist_item_disabled_css_class,
'flt_checklist_item_disabled'
);
/**
* Enable the reset filter option as first item
* @type {Boolean}
*/
this.enableResetOption = defaultsBool(f.enable_checklist_reset_filter,
true);
/**
* Prefix for container element ID
* @type {String}
* @private
*/
this.prfx = 'chkdiv_';
}
/**
* Checklist option click event handler
* @param {Event} evt
* @private
*/
optionClick(evt) {
let elm = targetEvt(evt);
let tf = this.tf;
this.emitter.emit('filter-focus', tf, elm);
this.setItemOption(elm);
tf.filter();
}
/**
* Checklist container click event handler for load-on-demand feature
* @param {Event} evt
* @private
*/
onCheckListClick(evt) {
let elm = targetEvt(evt);
if (this.tf.loadFltOnDemand && elm.getAttribute('filled') === '0') {
let ct = elm.getAttribute('ct');
let div = this.containers[ct];
this.build(ct);
removeEvt(div, 'click', (evt) => this.onCheckListClick(evt));
}
}
/**
* Refresh all checklist filters
*/
refreshAll() {
let colIdxs = this.tf.getFiltersByType(CHECKLIST, true);
this.refreshFilters(colIdxs);
}
/**
* Initialize checklist filter
* @param {Number} colIndex Column index
* @param {Boolean} isExternal External filter flag
* @param {DOMElement} container Dom element containing the filter
*/
init(colIndex, isExternal, container) {
let tf = this.tf;
let externalFltTgtId = isExternal ?
tf.externalFltIds[colIndex] : null;
let divCont = createElm('div',
['id', `${this.prfx}${colIndex}_${tf.id}`],
['ct', colIndex], ['filled', '0']);
divCont.className = this.containerCssClass;
//filter is appended in desired element
if (externalFltTgtId) {
elm(externalFltTgtId).appendChild(divCont);
} else {
container.appendChild(divCont);
}
this.containers[colIndex] = divCont;
tf.fltIds.push(tf.buildFilterId(colIndex));
if (!tf.loadFltOnDemand) {
this.build(colIndex);
} else {
addEvt(divCont, 'click', (evt) => this.onCheckListClick(evt));
divCont.appendChild(createText(this.activateText));
}
this.emitter.on(
['build-checklist-filter'],
(tf, colIndex, isLinked) => this.build(colIndex, isLinked)
);
this.emitter.on(
['select-checklist-options'],
(tf, colIndex, values) => this.selectOptions(colIndex, values)
);
this.emitter.on(['rows-changed'], () => this.refreshAll());
/** @inherited */
this.initialized = true;
}
/**
* Build checklist UI
* @param {Number} colIndex Column index
* @param {Boolean} isLinked Enable linked filters behaviour
*/
build(colIndex, isLinked = false) {
let tf = this.tf;
colIndex = Number(colIndex);
this.emitter.emit('before-populating-filter', tf, colIndex);
/** @inherited */
this.opts = [];
/** @inherited */
this.optsTxt = [];
let flt = this.containers[colIndex];
let ul = createElm('ul',
['id', tf.fltIds[colIndex]],
['colIndex', colIndex]);
ul.className = this.filterCssClass;
let caseSensitive = tf.caseSensitive;
/** @inherited */
this.isCustom = tf.isCustomOptions(colIndex);
//Retrieves custom values
if (this.isCustom) {
let customValues = tf.getCustomOptions(colIndex);
this.opts = customValues[0];
this.optsTxt = customValues[1];
}
let activeIdx;
let activeFilterId = tf.getActiveFilterId();
if (isLinked && activeFilterId) {
activeIdx = tf.getColumnIndexFromFilterId(activeFilterId);
}
let filteredDataCol = [];
if (isLinked && tf.disableExcludedOptions) {
/** @inherited */
this.excludedOpts = [];
}
flt.innerHTML = '';
let eachRow = tf.eachRow();
eachRow(
(row) => {
let cellValue = tf.getCellValue(row.cells[colIndex]);
//Vary Peter's patch
let cellString = matchCase(cellValue, caseSensitive);
// checks if celldata is already in array
if (!has(this.opts, cellString, caseSensitive)) {
this.opts.push(cellValue);
}
let filteredCol = filteredDataCol[colIndex];
if (isLinked && tf.disableExcludedOptions) {
if (!filteredCol) {
filteredCol = tf.getVisibleColumnValues(colIndex);
}
if (!has(filteredCol, cellString, caseSensitive) &&
!has(this.excludedOpts, cellString, caseSensitive)) {
this.excludedOpts.push(cellValue);
}
}
},
// continue conditions function
(row, k) => {
// excluded rows don't need to appear on selects as always valid
if (tf.excludeRows.indexOf(k) !== -1) {
return true;
}
// checks if row has expected number of cells
if (row.cells.length !== tf.nbCells || this.isCustom) {
return true;
}
if (isLinked && !this.isValidLinkedValue(k, activeIdx)) {
return true;
}
}
);
//sort options
this.opts = this.sortOptions(colIndex, this.opts);
if (this.excludedOpts) {
this.excludedOpts = this.sortOptions(colIndex, this.excludedOpts);
}
this.addChecks(colIndex, ul);
if (tf.loadFltOnDemand) {
flt.innerHTML = '';
}
flt.appendChild(ul);
flt.setAttribute('filled', '1');
this.emitter.emit('after-populating-filter', tf, colIndex, flt);
}
/**
* Add checklist options
* @param {Number} colIndex Column index
* @param {Object} ul Ul element
* @private
*/
addChecks(colIndex, ul) {
let tf = this.tf;
let chkCt = this.addTChecks(colIndex, ul);
for (let y = 0; y < this.opts.length; y++) {
let val = this.opts[y]; //item value
let lbl = this.isCustom ? this.optsTxt[y] : val; //item text
let fltId = tf.fltIds[colIndex];
let lblIdx = y + chkCt;
let li = createCheckItem(`${fltId}_${lblIdx}`, val, lbl,
['data-idx', lblIdx]);
li.className = this.itemCssClass;
if (tf.linkedFilters && tf.disableExcludedOptions &&
has(this.excludedOpts, matchCase(val, tf.caseSensitive),
tf.caseSensitive)) {
addClass(li, this.disabledItemCssClass);
li.check.disabled = true;
li.disabled = true;
} else {
addEvt(li.check, 'click', evt => this.optionClick(evt));
}
ul.appendChild(li);
if (val === '') {
//item is hidden
li.style.display = NONE;
}
}
}
/**
* Add checklist header option
* @param {Number} colIndex Column index
* @param {Object} ul Ul element
* @private
*/
addTChecks(colIndex, ul) {
let tf = this.tf;
let chkCt = 1;
let fltId = tf.fltIds[colIndex];
let li0 = createCheckItem(`${fltId}_0`, '',
tf.getClearFilterText(colIndex), ['data-idx', 0]);
li0.className = this.itemCssClass;
ul.appendChild(li0);
addEvt(li0.check, 'click', evt => this.optionClick(evt));
if (!this.enableResetOption) {
li0.style.display = NONE;
}
if (tf.enableEmptyOption) {
let li1 = createCheckItem(`${fltId}_1`, tf.emOperator,
tf.emptyText, ['data-idx', 1]);
li1.className = this.itemCssClass;
ul.appendChild(li1);
addEvt(li1.check, 'click', evt => this.optionClick(evt));
chkCt++;
}
if (tf.enableNonEmptyOption) {
let li2 = createCheckItem(`${fltId}_2`, tf.nmOperator,
tf.nonEmptyText, ['data-idx', 2]);
li2.className = this.itemCssClass;
ul.appendChild(li2);
addEvt(li2.check, 'click', evt => this.optionClick(evt));
chkCt++;
}
return chkCt;
}
/**
* Set/unset value of passed item option in filter's DOM element attribute
* @param {Object} o checklist option DOM element
* @private
*/
setItemOption(o) {
if (!o) {
return;
}
let tf = this.tf;
let chkValue = o.value; //checked item value
let chkIndex = o.dataset.idx;
let colIdx = tf.getColumnIndexFromFilterId(o.id);
let n = tf.getFilterElement(parseInt(colIdx, 10));
let items = n.childNodes;
let li = items[chkIndex];
//selected values (ul tag)
let slcValues = n.getAttribute('value') || '';
//selected items indexes (ul tag)
let slcIndexes = n.getAttribute('indexes') || '';
if (o.checked) {
//show all item
if (chkValue === '') {
//items indexes
let indexes = slcIndexes.split(tf.separator);
indexes.forEach(idx => {
idx = Number(idx);
let li = items[idx];
let chx = tag(li, 'input')[0];
if (chx && idx > 0) {
chx.checked = false;
removeClass(li, this.selectedItemCssClass);
}
});
n.setAttribute('value', '');
n.setAttribute('indexes', '');
} else {
let indexes = slcIndexes + chkIndex + tf.separator;
let values =
trim(slcValues + ' ' + chkValue + ' ' + tf.orOperator);
n.setAttribute('value', values);
n.setAttribute('indexes', indexes);
//uncheck first option
let chx0 = tag(items[0], 'input')[0];
if (chx0) {
chx0.checked = false;
}
}
removeClass(items[0], this.selectedItemCssClass);
addClass(li, this.selectedItemCssClass);
} else { //removes values and indexes
let replaceValue =
new RegExp(rgxEsc(chkValue + ' ' + tf.orOperator));
let values = slcValues.replace(replaceValue, '');
let replaceIndex = new RegExp(rgxEsc(chkIndex + tf.separator));
let indexes = slcIndexes.replace(replaceIndex, '');
n.setAttribute('value', trim(values));
n.setAttribute('indexes', indexes);
removeClass(li, this.selectedItemCssClass);
}
}
/**
* Select filter options programmatically
* @param {Number} colIndex Column index
* @param {Array} values Array of option values to select
*/
selectOptions(colIndex, values = []) {
let tf = this.tf;
let flt = tf.getFilterElement(colIndex);
if (!flt || values.length === 0) {
return;
}
let lis = tag(flt, 'li');
flt.setAttribute('value', '');
flt.setAttribute('indexes', '');
[].forEach.call(lis, (li) => {
let chk = tag(li, 'input')[0];
let chkVal = matchCase(chk.value, tf.caseSensitive);
if (chkVal !== '' && has(values, chkVal, tf.caseSensitive)) {
chk.checked = true;
} else {
// Check non-empty-text or empty-text option
if (values.indexOf(tf.nmOperator) !== -1 &&
chkVal === matchCase(tf.nonEmptyText, tf.caseSensitive)) {
chk.checked = true;
}
else if (values.indexOf(tf.emOperator) !== -1 &&
chkVal === matchCase(tf.emptyText, tf.caseSensitive)) {
chk.checked = true;
} else {
chk.checked = false;
}
}
this.setItemOption(chk);
});
}
/**
* Get filter values for a given column index
* @param {Number} colIndex Column index
* @returns {Array} values Collection of selected values
*/
getValues(colIndex) {
let tf = this.tf;
let flt = tf.getFilterElement(colIndex);
let fltAttr = flt.getAttribute('value');
let values = isEmpty(fltAttr) ? '' : fltAttr;
//removes last operator ||
values = values.substr(0, values.length - 3);
//turn || separated values into array
values = values.split(' ' + tf.orOperator + ' ');
return values;
}
/**
* Destroy CheckList instance
*/
destroy() {
this.emitter.off(
['build-checklist-filter'],
(tf, colIndex, isLinked) => this.build(colIndex, isLinked)
);
this.emitter.off(
['select-checklist-options'],
(tf, colIndex, values) => this.selectOptions(colIndex, values)
);
this.emitter.off(['rows-changed'], () => this.refreshAll());
this.initialized = false;
}
}
