src/extensions/advancedGrid/adapterEzEditTable.js
import {Feature} from '../../feature';
import {tag} from '../../dom';
import {INPUT} from '../../const';
import {defaultsStr} from '../../settings';
import {root} from '../../root';
const INSTANTIATION_ERROR = `Failed to instantiate EditTable object.
\n"ezEditTable" dependency not found.`;
/**
* Adapter module for ezEditTable, an external library providing advanced
* grid features (selection and edition):
* http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus
*/
export default class AdapterEzEditTable extends Feature {
/**
* Creates an instance of AdapterEzEditTable
*
* @param {TableFilter} tf TableFilter instance
* @param {Object} cfg Configuration options for ezEditTable library
*/
constructor(tf, cfg) {
super(tf, AdapterEzEditTable);
/**
* Module description
* @type {String}
*/
this.desc = defaultsStr(cfg.description, 'ezEditTable adapter');
/**
* Filename of ezEditTable library
* @type {String}
*/
this.filename = defaultsStr(cfg.filename, 'ezEditTable.js');
/**
* Path to ezEditTable library
* @type {String}
*/
this.vendorPath = cfg.vendor_path;
/**
* Load ezEditTable stylesheet
* @type {Boolean}
*/
this.loadStylesheet = Boolean(cfg.load_stylesheet);
/**
* Path to ezEditTable stylesheet
* @type {String}
*/
this.stylesheet = defaultsStr(cfg.stylesheet,
this.vendorPath + 'ezEditTable.css');
/**
* Name of ezEditTable stylesheet
* @type {String}
*/
this.stylesheetName = defaultsStr(cfg.stylesheet_name,
'ezEditTableCss');
// Enable the ezEditTable's scroll into view behaviour if grid layout on
cfg.scroll_into_view = cfg.scroll_into_view === false ?
false : tf.gridLayout;
/**
* ezEditTable instance
* @type {EditTable}
* @private
*/
this._ezEditTable = null;
/**
* ezEditTable configuration
* @private
*/
this.cfg = cfg;
this.enable();
}
/**
* Conditionally load ezEditTable library and set advanced grid
*/
init() {
if (this.initialized) {
return;
}
let tf = this.tf;
if (root.EditTable) {
this._setAdvancedGrid();
} else {
let path = this.vendorPath + this.filename;
tf.import(this.filename, path, () => this._setAdvancedGrid());
}
if (this.loadStylesheet && !tf.isImported(this.stylesheet, 'link')) {
tf.import(this.stylesheetName, this.stylesheet, null, 'link');
}
// TODO: hack to prevent ezEditTable enter key event hijaking.
// Needs to be fixed in the vendor's library
this.emitter.on(['filter-focus', 'filter-blur'],
() => this._toggleForInputFilter());
/**
* @inherited
*/
this.initialized = true;
}
/**
* Instantiate ezEditTable component for advanced grid features
* @private
*/
_setAdvancedGrid() {
let tf = this.tf;
//start row for EditTable constructor needs to be calculated
let startRow,
cfg = this.cfg,
thead = tag(tf.dom(), 'thead');
//if thead exists and startRow not specified, startRow is calculated
//automatically by EditTable
if (thead.length > 0 && !cfg.startRow) {
startRow = undefined;
}
//otherwise startRow config property if any or TableFilter refRow
else {
startRow = cfg.startRow || tf.refRow;
}
cfg.base_path = cfg.base_path || tf.basePath + 'ezEditTable/';
let editable = cfg.editable;
let selectable = cfg.selection;
if (selectable) {
cfg.default_selection = cfg.default_selection || 'row';
}
//CSS Styles
cfg.active_cell_css = cfg.active_cell_css || 'ezETSelectedCell';
let _lastValidRowIndex = 0;
let _lastRowIndex = 0;
if (selectable) {
//Row navigation needs to be calculated according to TableFilter's
//validRowsIndex array
let onAfterSelection = function (et, selectedElm, e) {
let slc = et.Selection;
//Next valid filtered row needs to be selected
let doSelect = function (nextRowIndex) {
if (et.defaultSelection === 'row') {
/* eslint-disable */
slc.SelectRowByIndex(nextRowIndex);
/* eslint-enable */
} else {
/* eslint-disable */
et.ClearSelections();
/* eslint-enable */
let cellIndex = selectedElm.cellIndex,
row = tf.dom().rows[nextRowIndex];
if (et.defaultSelection === 'both') {
/* eslint-disable */
slc.SelectRowByIndex(nextRowIndex);
/* eslint-enable */
}
if (row) {
/* eslint-disable */
slc.SelectCell(row.cells[cellIndex]);
/* eslint-enable */
}
}
//Table is filtered
if (tf.validRowsIndex.length !== tf.getRowsNb()) {
let r = tf.dom().rows[nextRowIndex];
if (r) {
r.scrollIntoView(false);
}
if (cell) {
if (cell.cellIndex === (tf.getCellsNb() - 1) &&
tf.gridLayout) {
tf.tblCont.scrollLeft = 100000000;
}
else if (cell.cellIndex === 0 && tf.gridLayout) {
tf.tblCont.scrollLeft = 0;
} else {
cell.scrollIntoView(false);
}
}
}
};
//table is not filtered
if (!tf.validRowsIndex) {
return;
}
let validIndexes = tf.validRowsIndex,
validIdxLen = validIndexes.length,
row = et.defaultSelection !== 'row' ?
selectedElm.parentNode : selectedElm,
//cell for default_selection = 'both' or 'cell'
cell = selectedElm.nodeName === 'TD' ? selectedElm : null,
/* eslint-disable */
keyCode = e !== undefined ? et.Event.GetKey(e) : 0,
/* eslint-enable */
isRowValid = validIndexes.indexOf(row.rowIndex) !== -1,
nextRowIndex,
paging = tf.feature('paging'),
//pgup/pgdown keys
d = keyCode === 34 || keyCode === 33 ?
(paging && paging.pageLength || et.nbRowsPerPage) :
1;
//If next row is not valid, next valid filtered row needs to be
//calculated
if (!isRowValid) {
//Selection direction up/down
if (row.rowIndex > _lastRowIndex) {
//last row
if (row.rowIndex >= validIndexes[validIdxLen - 1]) {
nextRowIndex = validIndexes[validIdxLen - 1];
} else {
let calcRowIndex = (_lastValidRowIndex + d);
if (calcRowIndex > (validIdxLen - 1)) {
nextRowIndex = validIndexes[validIdxLen - 1];
} else {
nextRowIndex = validIndexes[calcRowIndex];
}
}
} else {
//first row
if (row.rowIndex <= validIndexes[0]) {
nextRowIndex = validIndexes[0];
} else {
let v = validIndexes[_lastValidRowIndex - d];
nextRowIndex = v ? v : validIndexes[0];
}
}
_lastRowIndex = row.rowIndex;
doSelect(nextRowIndex);
} else {
//If filtered row is valid, special calculation for
//pgup/pgdown keys
if (keyCode !== 34 && keyCode !== 33) {
_lastValidRowIndex = validIndexes.indexOf(row.rowIndex);
_lastRowIndex = row.rowIndex;
} else {
if (keyCode === 34) { //pgdown
//last row
if ((_lastValidRowIndex + d) <= (validIdxLen - 1)) {
nextRowIndex = validIndexes[
_lastValidRowIndex + d];
} else {
nextRowIndex = [validIdxLen - 1];
}
} else { //pgup
//first row
if ((_lastValidRowIndex - d) <= validIndexes[0]) {
nextRowIndex = validIndexes[0];
} else {
nextRowIndex = validIndexes[
_lastValidRowIndex - d];
}
}
_lastRowIndex = nextRowIndex;
_lastValidRowIndex = validIndexes.indexOf(nextRowIndex);
doSelect(nextRowIndex);
}
}
};
//Page navigation has to be enforced whenever selected row is out of
//the current page range
let onBeforeSelection = function (et, selectedElm) {
let row = et.defaultSelection !== 'row' ?
selectedElm.parentNode : selectedElm;
if (tf.paging) {
if (tf.feature('paging').nbPages > 1) {
let paging = tf.feature('paging');
//page length is re-assigned in case it has changed
et.nbRowsPerPage = paging.pageLength;
let validIndexes = tf.validRowsIndex,
validIdxLen = validIndexes.length,
pagingEndRow = parseInt(paging.startPagingRow, 10) +
parseInt(paging.pageLength, 10);
let rowIndex = row.rowIndex;
if ((rowIndex === validIndexes[validIdxLen - 1]) &&
paging.currentPageNb !== paging.nbPages) {
paging.setPage('last');
}
else if ((rowIndex === validIndexes[0]) &&
paging.currentPageNb !== 1) {
paging.setPage('first');
}
else if (rowIndex > validIndexes[pagingEndRow - 1] &&
rowIndex < validIndexes[validIdxLen - 1]) {
paging.setPage('next');
}
else if (
rowIndex < validIndexes[paging.startPagingRow] &&
rowIndex > validIndexes[0]) {
paging.setPage('previous');
}
}
}
};
//Selected row needs to be visible when paging is activated
if (tf.paging) {
tf.feature('paging').onAfterChangePage = function (paging) {
let advGrid = paging.tf.extension('advancedGrid');
let et = advGrid._ezEditTable;
let slc = et.Selection;
/* eslint-disable */
let row = slc.GetActiveRow();
/* eslint-enable */
if (row) {
row.scrollIntoView(false);
}
/* eslint-disable */
let cell = slc.GetActiveCell();
/* eslint-enable */
if (cell) {
cell.scrollIntoView(false);
}
};
}
//Rows navigation when rows are filtered is performed with the
//EditTable row selection callback events
if (cfg.default_selection === 'row') {
let fnB = cfg.on_before_selected_row;
cfg.on_before_selected_row = function () {
var args = arguments;
onBeforeSelection(args[0], args[1], args[2]);
if (fnB) {
fnB.call(null, args[0], args[1], args[2]);
}
};
let fnA = cfg.on_after_selected_row;
cfg.on_after_selected_row = function () {
var args = arguments;
onAfterSelection(args[0], args[1], args[2]);
if (fnA) {
fnA.call(null, args[0], args[1], args[2]);
}
};
} else {
let fnD = cfg.on_before_selected_cell;
cfg.on_before_selected_cell = function () {
var args = arguments;
onBeforeSelection(args[0], args[1], args[2]);
if (fnD) {
fnD.call(null, args[0], args[1], args[2]);
}
};
let fnC = cfg.on_after_selected_cell;
cfg.on_after_selected_cell = function () {
var args = arguments;
onAfterSelection(args[0], args[1], args[2]);
if (fnC) {
fnC.call(null, args[0], args[1], args[2]);
}
};
}
}
if (editable) {
//Added or removed rows, TF rows number needs to be re-calculated
let fnE = cfg.on_added_dom_row;
cfg.on_added_dom_row = function () {
var args = arguments;
tf.nbFilterableRows++;
if (!tf.paging) {
tf.emitter.emit('rows-changed', tf, this);
} else {
tf.nbFilterableRows++;
tf.paging = false;
tf.feature('paging').destroy();
tf.feature('paging').reset();
}
if (tf.alternateRows) {
tf.feature('alternateRows').init();
}
if (fnE) {
fnE.call(null, args[0], args[1], args[2]);
}
};
if (cfg.actions && cfg.actions['delete']) {
let fnF = cfg.actions['delete'].on_after_submit;
cfg.actions['delete'].on_after_submit = function () {
var args = arguments;
tf.nbFilterableRows--;
if (!tf.paging) {
tf.emitter.emit('rows-changed', tf, this);
} else {
tf.nbFilterableRows--;
tf.paging = false;
tf.feature('paging').destroy();
tf.feature('paging').reset(false);
}
if (tf.alternateRows) {
tf.feature('alternateRows').init();
}
if (fnF) {
fnF.call(null, args[0], args[1]);
}
};
}
}
try {
/* eslint-disable */
this._ezEditTable = new EditTable(tf.id, cfg, startRow);
this._ezEditTable.Init();
/* eslint-enable */
} catch (e) { throw new Error(INSTANTIATION_ERROR); }
this.initialized = true;
}
/**
* Reset advanced grid when previously removed
*/
reset() {
let ezEditTable = this._ezEditTable;
if (ezEditTable) {
if (this.cfg.selection) {
/* eslint-disable */
ezEditTable.Selection.Set();
/* eslint-enable */
}
if (this.cfg.editable) {
/* eslint-disable */
ezEditTable.Editable.Set();
/* eslint-enable */
}
}
}
/**
* Toggle behaviour
*/
toggle() {
let ezEditTable = this._ezEditTable;
if (ezEditTable.editable) {
/* eslint-disable */
ezEditTable.Editable.Remove();
/* eslint-enable */
} else {
/* eslint-disable */
ezEditTable.Editable.Set();
/* eslint-enable */
}
if (ezEditTable.selection) {
/* eslint-disable */
ezEditTable.Selection.Remove();
/* eslint-enable */
} else {
/* eslint-disable */
ezEditTable.Selection.Set();
/* eslint-enable */
}
}
_toggleForInputFilter() {
let tf = this.tf;
if (!tf.getActiveFilterId()) {
return;
}
let colIndex = tf.getColumnIndexFromFilterId(tf.getActiveFilterId());
let filterType = tf.getFilterType(colIndex);
if (filterType === INPUT) {
this.toggle();
}
}
/**
* Remove advanced grid
*/
destroy() {
if (!this.initialized) {
return;
}
let ezEditTable = this._ezEditTable;
if (ezEditTable) {
if (this.cfg.selection) {
/* eslint-disable */
ezEditTable.Selection.ClearSelections();
ezEditTable.Selection.Remove();
/* eslint-enable */
}
if (this.cfg.editable) {
/* eslint-disable */
ezEditTable.Editable.Remove();
/* eslint-enable */
}
}
this.emitter.off(['filter-focus', 'filter-blur'],
() => this._toggleForInputFilter());
this.initialized = false;
}
}
AdapterEzEditTable.meta = {altName: 'advancedGrid'};
