deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-04-30 05:43:31 +02:00
Code Issues Releases Wiki Activity
TableFilter/src/tablefilter.js
Max Guglielmi eee964346a Added no headers unit test
2016-02-01 18:11:45 +11:00

2319 lines
78 KiB
JavaScript
Raw Blame History

import Event from './event';
import Dom from './dom';
import Str from './string';
import Types from './types';
import DateHelper from './date';
import Helpers from './helpers';
import {Emitter} from './emitter';
// Features
import {Store} from './modules/store';
import {GridLayout} from './modules/gridLayout';
import {Loader} from './modules/loader';
import {HighlightKeyword} from './modules/highlightKeywords';
import {PopupFilter} from './modules/popupFilter';
import {Dropdown} from './modules/dropdown';
import {CheckList} from './modules/checkList';
import {RowsCounter} from './modules/rowsCounter';
import {StatusBar} from './modules/statusBar';
import {Paging} from './modules/paging';
import {ClearButton} from './modules/clearButton';
import {Help} from './modules/help';
import {AlternateRows} from './modules/alternateRows';
import {NoResults} from './modules/noResults';
let global = window,
doc = global.document;
export class TableFilter {
/**
* TableFilter object constructor
* requires `table` or `id` arguments, `row` and `configuration` optional
* @param {DOMElement} table Table DOM element
* @param {String} id Table id
* @param {Number} row index indicating the 1st row
* @param {Object} configuration object
*/
constructor(...args) {
if(args.length === 0){ return; }
this.id = null;
this.version = '{VERSION}';
this.year = new Date().getFullYear();
this.tbl = null;
this.startRow = null;
this.refRow = null;
this.headersRow = null;
this.cfg = {};
this.nbFilterableRows = null;
this.nbRows = null;
this.nbCells = null;
this._hasGrid = false;
// TODO: use for-of with babel plug-in
args.forEach((arg)=> {
// for (let arg of args) {
let argtype = typeof arg;
if(argtype === 'object' && arg && arg.nodeName === 'TABLE'){
this.tbl = arg;
this.id = arg.id || `tf_${new Date().getTime()}_`;
} else if(argtype === 'string'){
this.id = arg;
this.tbl = Dom.id(arg);
} else if(argtype === 'number'){
this.startRow = arg;
} else if(argtype === 'object'){
this.cfg = arg;
}
// }
});
if(!this.tbl || this.tbl.nodeName != 'TABLE' || this.getRowsNb() === 0){
throw new Error(
'Could not instantiate TableFilter: HTML table not found.');
}
// configuration object
let f = this.cfg;
this.emitter = new Emitter();
//Start row et cols nb
this.refRow = this.startRow === null ? 2 : (this.startRow+1);
try{ this.nbCells = this.getCellsNb(this.refRow); }
catch(e){ this.nbCells = this.getCellsNb(0); }
//default script base path
this.basePath = f.base_path || 'tablefilter/';
/*** filter types ***/
this.fltTypeInp = 'input';
this.fltTypeSlc = 'select';
this.fltTypeMulti = 'multiple';
this.fltTypeCheckList = 'checklist';
this.fltTypeNone = 'none';
/*** filters' grid properties ***/
//enables/disables filter grid
this.fltGrid = f.grid === false ? false : true;
//enables/disables grid layout (fixed headers)
this.gridLayout = Boolean(f.grid_layout);
this.filtersRowIndex = isNaN(f.filters_row_index) ?
0 : f.filters_row_index;
this.headersRow = isNaN(f.headers_row_index) ?
(this.filtersRowIndex === 0 ? 1 : 0) : f.headers_row_index;
//defines tag of the cells containing filters (td/th)
this.fltCellTag = f.filters_cell_tag!=='th' ||
f.filters_cell_tag!=='td' ? 'td' : f.filters_cell_tag;
//stores filters ids
this.fltIds = [];
//stores filters DOM elements
this.fltElms = [];
//stores valid rows indexes (rows visible upon filtering)
this.validRowsIndex = [];
//stores filters row element
this.fltGridEl = null;
//container div for paging elements, reset btn etc.
this.infDiv = null;
//div for rows counter
this.lDiv = null;
//div for reset button and results per page select
this.rDiv = null;
//div for paging elements
this.mDiv = null;
//defines css class for div containing paging elements, rows counter etc
this.infDivCssClass = f.inf_div_css_class || 'inf';
//defines css class for left div
this.lDivCssClass = f.left_div_css_class || 'ldiv';
//defines css class for right div
this.rDivCssClass = f.right_div_css_class || 'rdiv';
//defines css class for mid div
this.mDivCssClass = f.middle_div_css_class || 'mdiv';
//table container div css class
this.contDivCssClass = f.content_div_css_class || 'cont';
/*** filters' grid appearance ***/
//stylesheet file
this.stylePath = f.style_path || this.basePath + 'style/';
this.stylesheet = f.stylesheet || this.stylePath+'tablefilter.css';
this.stylesheetId = this.id + '_style';
//defines css class for filters row
this.fltsRowCssClass = f.flts_row_css_class || 'fltrow';
//enables/disables icons (paging, reset button)
this.enableIcons = f.enable_icons===false ? false : true;
//enables/disbles rows alternating bg colors
this.alternateRows = Boolean(f.alternate_rows);
//defines widths of columns
this.hasColWidths = Types.isArray(f.col_widths);
this.colWidths = this.hasColWidths ? f.col_widths : null;
//defines css class for filters
this.fltCssClass = f.flt_css_class || 'flt';
//defines css class for multiple selects filters
this.fltMultiCssClass = f.flt_multi_css_class || 'flt_multi';
//defines css class for filters
this.fltSmallCssClass = f.flt_small_css_class || 'flt_s';
//defines css class for single-filter
this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
/*** filters' grid behaviours ***/
//enables/disables enter key
this.enterKey = f.enter_key===false ? false : true;
//calls function before filtering starts
this.onBeforeFilter = Types.isFn(f.on_before_filter) ?
f.on_before_filter : null;
//calls function after filtering
this.onAfterFilter = Types.isFn(f.on_after_filter) ?
f.on_after_filter : null;
//enables/disables case sensitivity
this.caseSensitive = Boolean(f.case_sensitive);
//has exact match per column
this.hasExactMatchByCol = Types.isArray(f.columns_exact_match);
this.exactMatchByCol = this.hasExactMatchByCol ?
f.columns_exact_match : [];
//enables/disbles exact match for search
this.exactMatch = Boolean(f.exact_match);
//refreshes drop-down lists upon validation
this.linkedFilters = Boolean(f.linked_filters);
//wheter excluded options are disabled
this.disableExcludedOptions = Boolean(f.disable_excluded_options);
//stores active filter element
this.activeFlt = null;
//id of active filter
this.activeFilterId = null;
//enables always visible rows
this.hasVisibleRows = Boolean(f.rows_always_visible);
//array containing always visible rows
this.visibleRows = this.hasVisibleRows ? f.rows_always_visible : [];
//enables/disables external filters generation
this.isExternalFlt = Boolean(f.external_flt_grid);
//array containing ids of external elements containing filters
this.externalFltTgtIds = f.external_flt_grid_ids || [];
//stores filters elements if isExternalFlt is true
this.externalFltEls = [];
//delays any filtering process if loader true
this.execDelay = !isNaN(f.exec_delay) ? parseInt(f.exec_delay,10) : 100;
//calls function when filters grid loaded
this.onFiltersLoaded = Types.isFn(f.on_filters_loaded) ?
f.on_filters_loaded : null;
//enables/disables single filter search
this.singleSearchFlt = Boolean(f.single_filter);
//calls function after row is validated
this.onRowValidated = Types.isFn(f.on_row_validated) ?
f.on_row_validated : null;
//array defining columns for customCellData event
this.customCellDataCols = f.custom_cell_data_cols ?
f.custom_cell_data_cols : [];
//calls custom function for retrieving cell data
this.customCellData = Types.isFn(f.custom_cell_data) ?
f.custom_cell_data : null;
//input watermark text array
this.watermark = f.watermark || '';
this.isWatermarkArray = Types.isArray(this.watermark);
//id of toolbar container element
this.toolBarTgtId = f.toolbar_target_id || null;
//enables/disables help div
this.help = Types.isUndef(f.help_instructions) ?
undefined : Boolean(f.help_instructions);
//popup filters
this.popupFilters = Boolean(f.popup_filters);
//active columns color
this.markActiveColumns = Boolean(f.mark_active_columns);
//defines css class for active column header
this.activeColumnsCssClass = f.active_columns_css_class ||
'activeHeader';
//calls function before active column header is marked
this.onBeforeActiveColumn = Types.isFn(f.on_before_active_column) ?
f.on_before_active_column : null;
//calls function after active column header is marked
this.onAfterActiveColumn = Types.isFn(f.on_after_active_column) ?
f.on_after_active_column : null;
/*** select filter's customisation and behaviours ***/
//defines 1st option text
this.displayAllText = f.display_all_text || 'Clear';
//enables/disables empty option in combo-box filters
this.enableEmptyOption = Boolean(f.enable_empty_option);
//defines empty option text
this.emptyText = f.empty_text || '(Empty)';
//enables/disables non empty option in combo-box filters
this.enableNonEmptyOption = Boolean(f.enable_non_empty_option);
//defines empty option text
this.nonEmptyText = f.non_empty_text || '(Non empty)';
//enables/disables onChange event on combo-box
this.onSlcChange = f.on_change===false ? false : true;
//enables/disables select options sorting
this.sortSlc = f.sort_select===false ? false : true;
//enables/disables ascending numeric options sorting
this.isSortNumAsc = Boolean(f.sort_num_asc);
this.sortNumAsc = this.isSortNumAsc ? f.sort_num_asc : null;
//enables/disables descending numeric options sorting
this.isSortNumDesc = Boolean(f.sort_num_desc);
this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
//Select filters are populated on demand
this.loadFltOnDemand = Boolean(f.load_filters_on_demand);
this.hasCustomOptions = Types.isObj(f.custom_options);
this.customOptions = f.custom_options;
/*** Filter operators ***/
this.rgxOperator = f.regexp_operator || 'rgx:';
this.emOperator = f.empty_operator || '[empty]';
this.nmOperator = f.nonempty_operator || '[nonempty]';
this.orOperator = f.or_operator || '||';
this.anOperator = f.and_operator || '&&';
this.grOperator = f.greater_operator || '>';
this.lwOperator = f.lower_operator || '<';
this.leOperator = f.lower_equal_operator || '<=';
this.geOperator = f.greater_equal_operator || '>=';
this.dfOperator = f.different_operator || '!';
this.lkOperator = f.like_operator || '*';
this.eqOperator = f.equal_operator || '=';
this.stOperator = f.start_with_operator || '{';
this.enOperator = f.end_with_operator || '}';
this.curExp = f.cur_exp || '^[¥£€$]';
this.separator = f.separator || ',';
/*** rows counter ***/
//show/hides rows counter
this.rowsCounter = Boolean(f.rows_counter);
/*** status bar ***/
//show/hides status bar
this.statusBar = Boolean(f.status_bar);
/*** loader ***/
//enables/disables loader/spinner indicator
this.loader = Boolean(f.loader);
/*** validation - reset buttons/links ***/
//show/hides filter's validation button
this.displayBtn = Boolean(f.btn);
//defines validation button text
this.btnText = f.btn_text || (!this.enableIcons ? 'Go' : '');
//defines css class for validation button
this.btnCssClass = f.btn_css_class ||
(!this.enableIcons ? 'btnflt' : 'btnflt_icon');
//show/hides reset link
this.btnReset = Boolean(f.btn_reset);
//defines css class for reset button
this.btnResetCssClass = f.btn_reset_css_class || 'reset';
//callback function before filters are cleared
this.onBeforeReset = Types.isFn(f.on_before_reset) ?
f.on_before_reset : null;
//callback function after filters are cleared
this.onAfterReset = Types.isFn(f.on_after_reset) ?
f.on_after_reset : null;
/*** paging ***/
//enables/disables table paging
this.paging = Boolean(f.paging);
this.nbVisibleRows = 0; //nb visible rows
this.nbHiddenRows = 0; //nb hidden rows
/*** autofilter on typing ***/
//enables/disables auto filtering, table is filtered when user stops
//typing
this.autoFilter = Boolean(f.auto_filter);
//onkeyup delay timer (msecs)
this.autoFilterDelay = !isNaN(f.auto_filter_delay) ?
f.auto_filter_delay : 900;
//typing indicator
this.isUserTyping = null;
this.autoFilterTimer = null;
/*** keyword highlighting ***/
//enables/disables keyword highlighting
this.highlightKeywords = Boolean(f.highlight_keywords);
/*** No results feature ***/
this.noResults = Types.isObj(f.no_results_message) ||
Boolean(f.no_results_message);
/*** data types ***/
//defines default date type (european DMY)
this.defaultDateType = f.default_date_type || 'DMY';
//defines default thousands separator
//US = ',' EU = '.'
this.thousandsSeparator = f.thousands_separator || ',';
//defines default decimal separator
//US & javascript = '.' EU = ','
this.decimalSeparator = f.decimal_separator || '.';
//enables number format per column
this.hasColNbFormat = Types.isArray(f.col_number_format);
//array containing columns nb formats
this.colNbFormat = this.hasColNbFormat ? f.col_number_format : null;
//enables date type per column
this.hasColDateType = Types.isArray(f.col_date_type);
//array containing columns date type
this.colDateType = this.hasColDateType ? f.col_date_type : null;
/*** ids prefixes ***/
//css class name added to table
this.prfxTf = 'TF';
//filters (inputs - selects)
this.prfxFlt = 'flt';
//validation button
this.prfxValButton = 'btn';
//container div for paging elements, rows counter etc.
this.prfxInfDiv = 'inf_';
//left div
this.prfxLDiv = 'ldiv_';
//right div
this.prfxRDiv = 'rdiv_';
//middle div
this.prfxMDiv = 'mdiv_';
//filter values cookie
this.prfxCookieFltsValues = 'tf_flts_';
//page nb cookie
this.prfxCookiePageNb = 'tf_pgnb_';
//page length cookie
this.prfxCookiePageLen = 'tf_pglen_';
/*** cookies ***/
//remembers filters values on page load
this.rememberGridValues = Boolean(f.remember_grid_values);
//cookie storing filter values
this.fltsValuesCookie = this.prfxCookieFltsValues + this.id;
//remembers page nb on page load
this.rememberPageNb = this.paging && f.remember_page_number;
//cookie storing page nb
this.pgNbCookie = this.prfxCookiePageNb + this.id;
//remembers page length on page load
this.rememberPageLen = this.paging && f.remember_page_length;
//cookie storing page length
this.pgLenCookie = this.prfxCookiePageLen + this.id;
/*** extensions ***/
//imports external script
this.extensions = f.extensions;
this.hasExtensions = Types.isArray(this.extensions);
/*** themes ***/
this.enableDefaultTheme = Boolean(f.enable_default_theme);
//imports themes
this.hasThemes = (this.enableDefaultTheme || Types.isArray(f.themes));
this.themes = f.themes || [];
//themes path
this.themesPath = f.themes_path || this.stylePath + 'themes/';
// Features registry
this.Mod = {};
// Extensions registry
this.ExtRegistry = {};
/*** TF events ***/
this.Evt = {
// Detect <enter> key
detectKey(e) {
if(!this.enterKey){ return; }
if(e){
let key = Event.keyCode(e);
if(key===13){
this.filter();
Event.cancel(e);
Event.stop(e);
} else {
this.isUserTyping = true;
global.clearInterval(this.autoFilterTimer);
this.autoFilterTimer = null;
}
}
},
// if auto-filter on, detect user is typing and filter columns
onKeyUp(e) {
if(!this.autoFilter){
return;
}
let key = Event.keyCode(e);
this.isUserTyping = false;
function filter() {
/*jshint validthis:true */
global.clearInterval(this.autoFilterTimer);
this.autoFilterTimer = null;
if(!this.isUserTyping){
this.filter();
this.isUserTyping = null;
}
}
if(key!==13 && key!==9 && key!==27 && key!==38 && key!==40) {
if(this.autoFilterTimer === null){
this.autoFilterTimer = global.setInterval(
filter.bind(this), this.autoFilterDelay);
}
} else {
global.clearInterval(this.autoFilterTimer);
this.autoFilterTimer = null;
}
},
// if auto-filter on, detect user is typing
onKeyDown() {
if(!this.autoFilter) { return; }
this.isUserTyping = true;
},
// if auto-filter on, clear interval on filter blur
onInpBlur() {
if(this.autoFilter){
this.isUserTyping = false;
global.clearInterval(this.autoFilterTimer);
}
this.emitter.emit('filter-blur', this);
},
// set focused text-box filter as active
onInpFocus(e) {
let elm = Event.target(e);
this.activeFilterId = elm.getAttribute('id');
this.activeFlt = Dom.id(this.activeFilterId);
this.emitter.emit('filter-focus', this);
}
};
}
/**
* Initialise features and layout
*/
init(){
if(this._hasGrid){
return;
}
let Mod = this.Mod;
let n = this.singleSearchFlt ? 1 : this.nbCells,
inpclass;
//loads stylesheet if not imported
this.import(this.stylesheetId, this.stylesheet, null, 'link');
//loads theme
if(this.hasThemes){ this.loadThemes(); }
// Instantiate help feature and initialise only if set true
if(!Mod.help){
Mod.help = new Help(this);
}
if(this.help){
Mod.help.init();
}
if(this.rememberGridValues || this.rememberPageNb ||
this.rememberPageLen){
if(!Mod.store){
Mod.store = new Store(this);
}
Mod.store.init();
}
if(this.gridLayout){
if(!Mod.gridLayout){
Mod.gridLayout = new GridLayout(this);
}
Mod.gridLayout.init();
}
if(this.loader){
if(!Mod.loader){
Mod.loader = new Loader(this);
}
Mod.loader.init();
}
if(this.highlightKeywords){
Mod.highlightKeyword = new HighlightKeyword(this);
Mod.highlightKeyword.init();
}
if(this.popupFilters){
if(!Mod.popupFilter){
Mod.popupFilter = new PopupFilter(this);
}
Mod.popupFilter.init();
}
//filters grid is not generated
if(!this.fltGrid){
this._initNoFilters();
} else {
let fltrow = this._insertFiltersRow();
this.nbFilterableRows = this.getRowsNb();
this.nbVisibleRows = this.nbFilterableRows;
this.nbRows = this.tbl.rows.length;
// Generate filters
for(let i=0; i<n; i++){
this.emitter.emit('before-filter-init', this, i);
let fltcell = Dom.create(this.fltCellTag),
col = this.getFilterType(i);
if(this.singleSearchFlt){
fltcell.colSpan = this.nbCells;
}
if(!this.gridLayout){
fltrow.appendChild(fltcell);
}
inpclass = (i==n-1 && this.displayBtn) ?
this.fltSmallCssClass : this.fltCssClass;
//only 1 input for single search
if(this.singleSearchFlt){
col = this.fltTypeInp;
inpclass = this.singleFltCssClass;
}
//drop-down filters
if(col===this.fltTypeSlc || col===this.fltTypeMulti){
if(!Mod.dropdown){
Mod.dropdown = new Dropdown(this);
}
Mod.dropdown.init(i, this.isExternalFlt, fltcell);
}
// checklist
else if(col===this.fltTypeCheckList){
if(!Mod.checkList){
Mod.checkList = new CheckList(this);
}
Mod.checkList.init(i, this.isExternalFlt, fltcell);
} else {
this._buildInputFilter(i, inpclass, fltcell);
}
// this adds submit button
if(i==n-1 && this.displayBtn){
this._buildSubmitButton(i, fltcell);
}
this.emitter.emit('after-filter-init', this, i);
}
}//if this.fltGrid
/* Features */
if(this.hasVisibleRows){
this.emitter.on(['after-filtering'], ()=> this.enforceVisibility());
this.enforceVisibility();
}
if(this.rowsCounter){
Mod.rowsCounter = new RowsCounter(this);
Mod.rowsCounter.init();
}
if(this.statusBar){
Mod.statusBar = new StatusBar(this);
Mod.statusBar.init();
}
if(this.paging){
if(!Mod.paging){
Mod.paging = new Paging(this);
Mod.paging.init();
} else{
Mod.paging.reset();
}
}
if(this.btnReset){
Mod.clearButton = new ClearButton(this);
Mod.clearButton.init();
}
if(this.hasColWidths && !this.gridLayout){
this.setColWidths();
}
if(this.alternateRows){
Mod.alternateRows = new AlternateRows(this);
Mod.alternateRows.init();
}
if(this.noResults){
if(!Mod.noResults){
Mod.noResults = new NoResults(this);
}
Mod.noResults.init();
}
this._hasGrid = true;
if(this.rememberGridValues || this.rememberPageLen ||
this.rememberPageNb){
this.resetValues();
}
//TF css class is added to table
if(!this.gridLayout){
Dom.addClass(this.tbl, this.prfxTf);
}
/* Loads extensions */
if(this.hasExtensions){
this.initExtensions();
}
// Subscribe to events
if(this.markActiveColumns){
this.emitter.on(['before-filtering'],
()=> this.clearActiveColumns());
this.emitter.on(['cell-processed'],
(tf, colIndex)=> this.markActiveColumn(colIndex));
}
if(this.linkedFilters){
this.emitter.on(['after-filtering'], ()=> this.linkFilters());
}
if(this.onFiltersLoaded){
this.onFiltersLoaded.call(null, this);
}
this.initialized = true;
this.emitter.emit('initialized', this);
}
/**
* Insert filters row at initialization
*/
_insertFiltersRow() {
if(this.gridLayout){
return;
}
let fltrow;
let thead = Dom.tag(this.tbl, 'thead');
if(thead.length > 0){
fltrow = thead[0].insertRow(this.filtersRowIndex);
} else {
fltrow = this.tbl.insertRow(this.filtersRowIndex);
}
if(this.headersRow > 1 && this.filtersRowIndex <= this.headersRow){
this.headersRow++;
}
fltrow.className = this.fltsRowCssClass;
if(this.isExternalFlt){
fltrow.style.display = 'none';
}
this.emitter.emit('filters-row-inserted', this, fltrow);
return fltrow;
}
/**
* Initialize filtersless table
*/
_initNoFilters(){
if(this.fltGrid){
return;
}
this.refRow = this.refRow > 0 ? this.refRow-1 : 0;
this.nbFilterableRows = this.getRowsNb();
this.nbVisibleRows = this.nbFilterableRows;
this.nbRows = this.nbFilterableRows + this.refRow;
}
/**
* Build input filter type
* @param {Number} colIndex Column index
* @param {String} cssClass Css class applied to filter
* @param {DOMElement} container Container DOM element
*/
_buildInputFilter(colIndex, cssClass, container){
let col = this.getFilterType(colIndex);
let externalFltTgtId = this.isExternalFlt ?
this.externalFltTgtIds[colIndex] : null;
let inptype = col===this.fltTypeInp ? 'text' : 'hidden';
let inp = Dom.create(this.fltTypeInp,
['id', this.prfxFlt+colIndex+'_'+this.id],
['type', inptype], ['ct', colIndex]);
if(inptype !== 'hidden' && this.watermark){
inp.setAttribute('placeholder',
this.isWatermarkArray ? (this.watermark[colIndex] || '') :
this.watermark
);
}
inp.className = cssClass || this.fltCssClass;
Event.add(inp, 'focus', this.Evt.onInpFocus.bind(this));
//filter is appended in custom element
if(externalFltTgtId){
Dom.id(externalFltTgtId).appendChild(inp);
this.externalFltEls.push(inp);
} else {
container.appendChild(inp);
}
this.fltIds.push(inp.id);
Event.add(inp, 'keypress', this.Evt.detectKey.bind(this));
Event.add(inp, 'keydown', this.Evt.onKeyDown.bind(this));
Event.add(inp, 'keyup', this.Evt.onKeyUp.bind(this));
Event.add(inp, 'blur', this.Evt.onInpBlur.bind(this));
}
/**
* Build submit button
* @param {Number} colIndex Column index
* @param {DOMElement} container Container DOM element
*/
_buildSubmitButton(colIndex, container){
let externalFltTgtId = this.isExternalFlt ?
this.externalFltTgtIds[colIndex] : null;
let btn = Dom.create(this.fltTypeInp,
['id', this.prfxValButton+colIndex+'_'+this.id],
['type', 'button'], ['value', this.btnText]);
btn.className = this.btnCssClass;
//filter is appended in custom element
if(externalFltTgtId){
Dom.id(externalFltTgtId).appendChild(btn);
} else{
container.appendChild(btn);
}
Event.add(btn, 'click', ()=> this.filter());
}
/**
* Return a feature instance for a given name
* @param {String} name Name of the feature
* @return {Object}
*/
feature(name){
return this.Mod[name];
}
/**
* Initialise all the extensions defined in the configuration object
*/
initExtensions(){
let exts = this.extensions;
// Set config's publicPath dynamically for Webpack...
__webpack_public_path__ = this.basePath;
this.emitter.emit('before-loading-extensions', this);
for(let i=0, len=exts.length; i<len; i++){
let ext = exts[i];
if(!this.ExtRegistry[ext.name]){
this.loadExtension(ext);
}
}
this.emitter.emit('after-loading-extensions', this);
}
/**
* Load an extension module
* @param {Object} ext Extension config object
*/
loadExtension(ext){
if(!ext || !ext.name){
return;
}
let name = ext.name;
let path = ext.path;
let modulePath;
if(name && path){
modulePath = ext.path + name;
} else {
name = name.replace('.js', '');
modulePath = 'extensions/{}/{}'.replace(/{}/g, name);
}
// Require pattern for Webpack
require(['./' + modulePath], (mod)=> {
let inst = new mod.default(this, ext);
inst.init();
this.ExtRegistry[name] = inst;
});
}
/**
* Get an extension instance
* @param {String} name Name of the extension
* @return {Object} Extension instance
*/
extension(name){
return this.ExtRegistry[name];
}
/**
* Check passed extension name exists
* @param {String} name Name of the extension
* @return {Boolean}
*/
hasExtension(name){
return !Types.isEmpty(this.ExtRegistry[name]);
}
/**
* Destroy all the extensions defined in the configuration object
*/
destroyExtensions(){
let exts = this.extensions;
for(let i=0, len=exts.length; i<len; i++){
let ext = exts[i];
let extInstance = this.ExtRegistry[ext.name];
if(extInstance){
extInstance.destroy();
this.ExtRegistry[ext.name] = null;
}
}
}
/**
* Load themes defined in the configuration object
*/
loadThemes(){
let themes = this.themes;
this.emitter.emit('before-loading-themes', this);
//Default theme config
if(this.enableDefaultTheme){
let defaultTheme = { name: 'default' };
this.themes.push(defaultTheme);
}
if(Types.isArray(themes)){
for(let i=0, len=themes.length; i<len; i++){
let theme = themes[i];
let name = theme.name;
let path = theme.path;
let styleId = this.prfxTf + name;
if(name && !path){
path = this.themesPath + name + '/' + name + '.css';
}
else if(!name && theme.path){
name = 'theme{0}'.replace('{0}', i);
}
if(!this.isImported(path, 'link')){
this.import(styleId, path, null, 'link');
}
}
}
//Some elements need to be overriden for default theme
//Reset button
this.btnResetText = null;
this.btnResetHtml = '<input type="button" value="" class="' +
this.btnResetCssClass+'" title="Clear filters" />';
//Paging buttons
this.btnPrevPageHtml = '<input type="button" value="" class="' +
this.btnPageCssClass+' previousPage" title="Previous page" />';
this.btnNextPageHtml = '<input type="button" value="" class="' +
this.btnPageCssClass+' nextPage" title="Next page" />';
this.btnFirstPageHtml = '<input type="button" value="" class="' +
this.btnPageCssClass+' firstPage" title="First page" />';
this.btnLastPageHtml = '<input type="button" value="" class="' +
this.btnPageCssClass+' lastPage" title="Last page" />';
//Loader
this.loader = true;
this.loaderHtml = '<div class="defaultLoader"></div>';
this.loaderText = null;
this.emitter.emit('after-loading-themes', this);
}
/**
* Return stylesheet DOM element for a given theme name
* @return {DOMElement} stylesheet element
*/
getStylesheet(name='default'){
return Dom.id(this.prfxTf + name);
}
/**
* Destroy filter grid
*/
destroy(){
if(!this._hasGrid){
return;
}
let rows = this.tbl.rows,
Mod = this.Mod,
emitter = this.emitter;
if(this.isExternalFlt && !this.popupFilters){
this.removeExternalFlts();
}
if(this.infDiv){
this.removeToolbar();
}
if(this.markActiveColumns){
this.clearActiveColumns();
emitter.off(['before-filtering'], ()=> this.clearActiveColumns());
emitter.off(['cell-processed'],
(tf, colIndex)=> this.markActiveColumn(colIndex));
}
if(this.hasExtensions){
this.destroyExtensions();
}
this.validateAllRows();
if(this.fltGrid && !this.gridLayout){
this.fltGridEl = rows[this.filtersRowIndex];
this.tbl.deleteRow(this.filtersRowIndex);
}
// broadcast destroy event
emitter.emit('destroy', this);
// Destroy modules
// TODO: subcribe modules to destroy event instead
Object.keys(Mod).forEach(function(key){
var feature = Mod[key];
if(feature && Types.isFn(feature.destroy)){
feature.destroy();
}
});
// unsubscribe to events
if(this.hasVisibleRows){
emitter.off(['after-filtering'], ()=> this.enforceVisibility());
}
if(this.linkedFilters){
emitter.off(['after-filtering'], ()=> this.linkFilters());
}
Dom.removeClass(this.tbl, this.prfxTf);
this.nbHiddenRows = 0;
this.validRowsIndex = [];
this.fltIds = [];
this.activeFlt = null;
this._hasGrid = false;
this.initialized = false;
}
/**
* Generate container element for paging, reset button, rows counter etc.
*/
setToolbar(){
if(this.infDiv){
return;
}
/*** container div ***/
let infdiv = Dom.create('div', ['id', this.prfxInfDiv+this.id]);
infdiv.className = this.infDivCssClass;
//custom container
if(this.toolBarTgtId){
Dom.id(this.toolBarTgtId).appendChild(infdiv);
}
//grid-layout
else if(this.gridLayout){
let gridLayout = this.Mod.gridLayout;
gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = gridLayout.gridInfDivCssClass;
}
//default location: just above the table
else{
var cont = Dom.create('caption');
cont.appendChild(infdiv);
this.tbl.insertBefore(cont, this.tbl.firstChild);
}
this.infDiv = Dom.id(this.prfxInfDiv+this.id);
/*** left div containing rows # displayer ***/
let ldiv = Dom.create('div', ['id', this.prfxLDiv+this.id]);
ldiv.className = this.lDivCssClass;
infdiv.appendChild(ldiv);
this.lDiv = Dom.id(this.prfxLDiv+this.id);
/*** right div containing reset button
+ nb results per page select ***/
let rdiv = Dom.create('div', ['id', this.prfxRDiv+this.id]);
rdiv.className = this.rDivCssClass;
infdiv.appendChild(rdiv);
this.rDiv = Dom.id(this.prfxRDiv+this.id);
/*** mid div containing paging elements ***/
let mdiv = Dom.create('div', ['id', this.prfxMDiv+this.id]);
mdiv.className = this.mDivCssClass;
infdiv.appendChild(mdiv);
this.mDiv = Dom.id(this.prfxMDiv+this.id);
// emit help initialisation only if undefined
if(Types.isUndef(this.help)){
this.emitter.emit('init-help', this);
}
}
/**
* Remove toolbar container element
*/
removeToolbar(){
if(!this.infDiv){
return;
}
Dom.remove(this.infDiv);
this.infDiv = null;
let tbl = this.tbl;
let captions = Dom.tag(tbl, 'caption');
if(captions.length > 0){
[].forEach.call(captions, (elm)=> tbl.removeChild(elm));
}
}
/**
* Remove all the external column filters
*/
removeExternalFlts(){
if(!this.isExternalFlt){
return;
}
let ids = this.externalFltTgtIds,
len = ids.length;
for(let ct=0; ct<len; ct++){
let externalFltTgtId = ids[ct],
externalFlt = Dom.id(externalFltTgtId);
if(externalFlt){
externalFlt.innerHTML = '';
}
}
}
/**
* Check if given column implements a filter with custom options
* @param {Number} colIndex Column's index
* @return {Boolean}
*/
isCustomOptions(colIndex) {
return this.hasCustomOptions &&
this.customOptions.cols.indexOf(colIndex) != -1;
}
/**
* Returns an array [[value0, value1 ...],[text0, text1 ...]] with the
* custom options values and texts
* @param {Number} colIndex Column's index
* @return {Array}
*/
getCustomOptions(colIndex){
if(Types.isEmpty(colIndex) || !this.isCustomOptions(colIndex)){
return;
}
let customOptions = this.customOptions;
let cols = customOptions.cols;
let optTxt = [], optArray = [];
let index = cols.indexOf(colIndex);
let slcValues = customOptions.values[index];
let slcTexts = customOptions.texts[index];
let slcSort = customOptions.sorts[index];
for(let r=0, len=slcValues.length; r<len; r++){
optArray.push(slcValues[r]);
if(slcTexts[r]){
optTxt.push(slcTexts[r]);
} else {
optTxt.push(slcValues[r]);
}
}
if(slcSort){
optArray.sort();
optTxt.sort();
}
return [optArray, optTxt];
}
/**
* Reset persisted filter values
*/
resetValues(){
if(!this.rememberGridValues){
return;
}
let fltValues = this.Mod.store.getFilterValues(this.fltsValuesCookie);
fltValues.forEach((val, idx)=> {
if(val !== ' '){
this.setFilterValue(idx, val);
}
});
this.filter();
}
/**
* Filter the table by retrieving the data from each cell in every single
* row and comparing it to the search term for current column. A row is
* hidden when all the search terms are not found in inspected row.
*/
filter(){
if(!this.fltGrid || !this._hasGrid){
return;
}
//invoke onbefore callback
if(this.onBeforeFilter){
this.onBeforeFilter.call(null, this);
}
this.emitter.emit('before-filtering', this);
let row = this.tbl.rows,
hiddenrows = 0;
this.validRowsIndex = [];
// search args re-init
let searchArgs = this.getFiltersValue();
var numCellData, nbFormat;
var re_le = new RegExp(this.leOperator),
re_ge = new RegExp(this.geOperator),
re_l = new RegExp(this.lwOperator),
re_g = new RegExp(this.grOperator),
re_d = new RegExp(this.dfOperator),
re_lk = new RegExp(Str.rgxEsc(this.lkOperator)),
re_eq = new RegExp(this.eqOperator),
re_st = new RegExp(this.stOperator),
re_en = new RegExp(this.enOperator),
// re_an = new RegExp(this.anOperator),
// re_cr = new RegExp(this.curExp),
re_em = this.emOperator,
re_nm = this.nmOperator,
re_re = new RegExp(Str.rgxEsc(this.rgxOperator));
//keyword highlighting
function highlight(str, ok, cell){
/*jshint validthis:true */
if(this.highlightKeywords && ok){
str = str.replace(re_lk, '');
str = str.replace(re_eq, '');
str = str.replace(re_st, '');
str = str.replace(re_en, '');
let w = str;
if(re_le.test(str) || re_ge.test(str) || re_l.test(str) ||
re_g.test(str) || re_d.test(str)){
w = Dom.getText(cell);
}
if(w !== ''){
this.emitter.emit('highlight-keyword', this, cell, w);
}
}
}
//looks for search argument in current row
function hasArg(sA, cellData, j){
/*jshint validthis:true */
sA = Str.matchCase(sA, this.caseSensitive);
let occurence,
removeNbFormat = Helpers.removeNbFormat;
//Search arg operator tests
let hasLO = re_l.test(sA),
hasLE = re_le.test(sA),
hasGR = re_g.test(sA),
hasGE = re_ge.test(sA),
hasDF = re_d.test(sA),
hasEQ = re_eq.test(sA),
hasLK = re_lk.test(sA),
// hasAN = re_an.test(sA),
hasST = re_st.test(sA),
hasEN = re_en.test(sA),
hasEM = (re_em === sA),
hasNM = (re_nm === sA),
hasRE = re_re.test(sA);
//Search arg dates tests
let isLDate = hasLO &&
DateHelper.isValid(sA.replace(re_l,''), dtType);
let isLEDate = hasLE &&
DateHelper.isValid(sA.replace(re_le,''), dtType);
let isGDate = hasGR &&
DateHelper.isValid(sA.replace(re_g,''), dtType);
let isGEDate = hasGE &&
DateHelper.isValid(sA.replace(re_ge,''), dtType);
let isDFDate = hasDF &&
DateHelper.isValid(sA.replace(re_d,''), dtType);
let isEQDate = hasEQ &&
DateHelper.isValid(sA.replace(re_eq,''), dtType);
let dte1, dte2;
//dates
if(DateHelper.isValid(cellData, dtType)){
dte1 = DateHelper.format(cellData, dtType);
// lower date
if(isLDate){
dte2 = DateHelper.format(sA.replace(re_l,''), dtType);
occurence = dte1 < dte2;
}
// lower equal date
else if(isLEDate){
dte2 = DateHelper.format(sA.replace(re_le,''), dtType);
occurence = dte1 <= dte2;
}
// greater equal date
else if(isGEDate){
dte2 = DateHelper.format(sA.replace(re_ge,''), dtType);
occurence = dte1 >= dte2;
}
// greater date
else if(isGDate){
dte2 = DateHelper.format(sA.replace(re_g,''), dtType);
occurence = dte1 > dte2;
}
// different date
else if(isDFDate){
dte2 = DateHelper.format(sA.replace(re_d,''), dtType);
occurence = dte1.toString() != dte2.toString();
}
// equal date
else if(isEQDate){
dte2 = DateHelper.format(sA.replace(re_eq,''), dtType);
occurence = dte1.toString() == dte2.toString();
}
// searched keyword with * operator doesn't have to be a date
else if(re_lk.test(sA)){// like date
occurence = Str.contains(sA.replace(re_lk,''), cellData,
false, this.caseSensitive);
}
else if(DateHelper.isValid(sA,dtType)){
dte2 = DateHelper.format(sA,dtType);
occurence = dte1.toString() === dte2.toString();
}
//empty
else if(hasEM){
occurence = Str.isEmpty(cellData);
}
//non-empty
else if(hasNM){
occurence = !Str.isEmpty(cellData);
} else {
occurence = Str.contains(sA, cellData, this.isExactMatch(j),
this.caseSensitive);
}
}
else{
//first numbers need to be formated
if(this.hasColNbFormat && this.colNbFormat[j]){
numCellData = removeNbFormat(
cellData, this.colNbFormat[j]);
nbFormat = this.colNbFormat[j];
} else {
if(this.thousandsSeparator === ',' &&
this.decimalSeparator === '.'){
numCellData = removeNbFormat(cellData, 'us');
nbFormat = 'us';
} else {
numCellData = removeNbFormat(cellData, 'eu');
nbFormat = 'eu';
}
}
// first checks if there is any operator (<,>,<=,>=,!,*,=,{,},
// rgx:)
// lower equal
if(hasLE){
occurence = numCellData <= removeNbFormat(
sA.replace(re_le, ''), nbFormat);
}
//greater equal
else if(hasGE){
occurence = numCellData >= removeNbFormat(
sA.replace(re_ge, ''), nbFormat);
}
//lower
else if(hasLO){
occurence = numCellData < removeNbFormat(
sA.replace(re_l, ''), nbFormat);
}
//greater
else if(hasGR){
occurence = numCellData > removeNbFormat(
sA.replace(re_g, ''), nbFormat);
}
//different
else if(hasDF){
occurence = Str.contains(sA.replace(re_d, ''), cellData,
false, this.caseSensitive) ? false : true;
}
//like
else if(hasLK){
occurence = Str.contains(sA.replace(re_lk, ''), cellData,
false, this.caseSensitive);
}
//equal
else if(hasEQ){
occurence = Str.contains(sA.replace(re_eq, ''), cellData,
true, this.caseSensitive);
}
//starts with
else if(hasST){
occurence = cellData.indexOf(sA.replace(re_st, '')) === 0 ?
true : false;
}
//ends with
else if(hasEN){
let searchArg = sA.replace(re_en, '');
occurence =
cellData.lastIndexOf(searchArg, cellData.length-1) ===
(cellData.length-1)-(searchArg.length-1) &&
cellData.lastIndexOf(
searchArg, cellData.length-1) > -1 ? true : false;
}
//empty
else if(hasEM){
occurence = Str.isEmpty(cellData);
}
//non-empty
else if(hasNM){
occurence = !Str.isEmpty(cellData);
}
//regexp
else if(hasRE){
//in case regexp fires an exception
try{
//operator is removed
let srchArg = sA.replace(re_re,'');
let rgx = new RegExp(srchArg);
occurence = rgx.test(cellData);
} catch(e) { occurence = false; }
} else {
occurence = Str.contains(sA, cellData, this.isExactMatch(j),
this.caseSensitive);
}
}//else
return occurence;
}//fn
for(let k=this.refRow; k<this.nbRows; k++){
// already filtered rows display re-init
row[k].style.display = '';
let cell = row[k].cells,
nchilds = cell.length;
// checks if row has exact cell #
if(nchilds !== this.nbCells){
continue;
}
let occurence = [],
isRowValid = true,
//only for single filter search
singleFltRowValid = false;
// this loop retrieves cell data
for(let j=0; j<nchilds; j++){
//searched keyword
let sA = searchArgs[this.singleSearchFlt ? 0 : j];
var dtType = this.hasColDateType ?
this.colDateType[j] : this.defaultDateType;
if(sA === ''){
continue;
}
let cellData = Str.matchCase(this.getCellData(cell[j]),
this.caseSensitive);
//multiple search parameter operator ||
let sAOrSplit = sA.toString().split(this.orOperator),
//multiple search || parameter boolean
hasMultiOrSA = sAOrSplit.length > 1,
//multiple search parameter operator &&
sAAndSplit = sA.toString().split(this.anOperator),
//multiple search && parameter boolean
hasMultiAndSA = sAAndSplit.length > 1;
//detect operators or array query
if(Types.isArray(sA) || hasMultiOrSA || hasMultiAndSA){
let cS,
s,
occur = false;
if(Types.isArray(sA)){
s = sA;
} else {
s = hasMultiOrSA ? sAOrSplit : sAAndSplit;
}
// TODO: improve clarity/readability of this block
for(let w=0, len=s.length; w<len; w++){
cS = Str.trim(s[w]);
occur = hasArg.call(this, cS, cellData, j);
highlight.call(this, cS, occur, cell[j]);
if((hasMultiOrSA && occur) ||
(hasMultiAndSA && !occur)){
break;
}
if(Types.isArray(sA) && occur){
break;
}
}
occurence[j] = occur;
}
//single search parameter
else {
occurence[j] = hasArg.call(this, Str.trim(sA), cellData, j);
highlight.call(this, sA, occurence[j], cell[j]);
}//else single param
if(!occurence[j]){
isRowValid = false;
}
if(this.singleSearchFlt && occurence[j]){
singleFltRowValid = true;
}
this.emitter.emit('cell-processed', this, j, cell[j]);
}//for j
if(this.singleSearchFlt && singleFltRowValid){
isRowValid = true;
}
if(!isRowValid){
this.validateRow(k, false);
hiddenrows++;
} else {
this.validateRow(k, true);
}
this.emitter.emit('row-processed', this, k,
this.validRowsIndex.length, isRowValid);
}// for k
this.nbVisibleRows = this.validRowsIndex.length;
this.nbHiddenRows = hiddenrows;
//invokes onafterfilter callback
if(this.onAfterFilter){
this.onAfterFilter.call(null, this);
}
this.emitter.emit('after-filtering', this);
}
/**
* Return the data of a specified column
* @param {Number} colIndex Column index
* @param {Boolean} includeHeaders Optional: include headers row
* @param {Boolean} num Optional: return unformatted number
* @param {Array} exclude Optional: list of row indexes to be excluded
* @return {Array} Flat list of data for a column
*/
getColValues(colIndex, includeHeaders=false, num=false, exclude=[]){
if(!this.fltGrid){
return;
}
let row = this.tbl.rows,
colValues = [];
if(includeHeaders){
colValues.push(this.getHeadersText()[colIndex]);
}
for(let i=this.refRow; i<this.nbRows; i++){
let isExludedRow = false;
// checks if current row index appears in exclude array
if(exclude.length > 0){
isExludedRow = exclude.indexOf(i) != -1;
}
let cell = row[i].cells,
nchilds = cell.length;
// checks if row has exact cell # and is not excluded
if(nchilds === this.nbCells && !isExludedRow){
// this loop retrieves cell data
for(let j=0; j<nchilds; j++){
if(j != colIndex || row[i].style.display !== ''){
continue;
}
let cellData = this.getCellData(cell[j]),
nbFormat = this.colNbFormat ?
this.colNbFormat[colIndex] : null,
data = num ?
Helpers.removeNbFormat(cellData, nbFormat) :
cellData;
colValues.push(data);
}
}
}
return colValues;
}
/**
* Return the filter's value of a specified column
* @param {Number} index Column index
* @return {String} Filter value
*/
getFilterValue(index){
if(!this.fltGrid){
return;
}
let fltValue = '',
fltValues = [],
flt = this.getFilterElement(index);
if(!flt){
return '';
}
let fltColType = this.getFilterType(index);
if(fltColType !== this.fltTypeMulti &&
fltColType !== this.fltTypeCheckList){
fltValue = flt.value;
}
//mutiple select
else if(fltColType === this.fltTypeMulti){
// TODO: extract a method in dropdown module from below
for(let j=0, len=flt.options.length; j<len; j++){
if(flt.options[j].selected){
fltValues.push(flt.options[j].value);
}
}
//return empty string if collection is empty
fltValue = fltValues.length > 0 ? fltValues : '';
}
//checklist
else if(fltColType === this.fltTypeCheckList){
// TODO: extract a method in checklist module from below
if(flt.getAttribute('value') !== null){
fltValues = flt.getAttribute('value');
//removes last operator ||
fltValues = fltValues.substr(0, fltValues.length-3);
//convert || separated values into array
fltValues = fltValues.split(' ' + this.orOperator + ' ');
}
//return empty string if collection is empty
fltValue = fltValues.length > 0 ? fltValues : '';
}
//return an empty string if collection contains a single empty string
if(Types.isArray(fltValue) && fltValue.length === 1 &&
fltValue[0] === ''){
fltValue = '';
}
return fltValue;
}
/**
* Return the filters' values
* @return {Array} List of filters' values
*/
getFiltersValue(){
if(!this.fltGrid){
return;
}
let searchArgs = [];
for(let i=0, len=this.fltIds.length; i<len; i++){
let fltValue = this.getFilterValue(i);
if(Types.isArray(fltValue)){
searchArgs.push(fltValue);
} else {
searchArgs.push(Str.trim(fltValue));
}
}
return searchArgs;
}
/**
* Return the ID of the filter of a specified column
* @param {Number} index Column's index
* @return {String} ID of the filter element
*/
getFilterId(index){
if(!this.fltGrid){
return;
}
return this.fltIds[index];
}
/**
* Return the list of ids of filters matching a specified type.
* Note: hidden filters are also returned
*
* @param {String} type Filter type string ('input', 'select', 'multiple',
* 'checklist')
* @param {Boolean} bool If true returns columns indexes instead of IDs
* @return {[type]} List of element IDs or column indexes
*/
getFiltersByType(type, bool){
if(!this.fltGrid){
return;
}
let arr = [];
for(let i=0, len=this.fltIds.length; i<len; i++){
let fltType = this.getFilterType(i);
if(fltType === Str.lower(type)){
let a = bool ? i : this.fltIds[i];
arr.push(a);
}
}
return arr;
}
/**
* Return the filter's DOM element for a given column
* @param {Number} index Column's index
* @return {DOMElement}
*/
getFilterElement(index){
let fltId = this.fltIds[index];
return Dom.id(fltId);
}
/**
* Return the number of cells for a given row index
* @param {Number} rowIndex Index of the row
* @return {Number} Number of cells
*/
getCellsNb(rowIndex=0){
let tr = this.tbl.rows[rowIndex];
return tr.cells.length;
}
/**
* Return the number of filterable rows starting from reference row if
* defined
* @param {Boolean} includeHeaders Include the headers row
* @return {Number} Number of filterable rows
*/
getRowsNb(includeHeaders){
let s = Types.isUndef(this.refRow) ? 0 : this.refRow,
ntrs = this.tbl.rows.length;
if(includeHeaders){ s = 0; }
return parseInt(ntrs-s, 10);
}
/**
* Return the data of a given cell
* @param {DOMElement} cell Cell's DOM object
* @return {String}
*/
getCellData(cell){
let idx = cell.cellIndex;
//Check for customCellData callback
if(this.customCellData && this.customCellDataCols.indexOf(idx) != -1){
return this.customCellData.call(null, this, cell, idx);
} else {
return Dom.getText(cell);
}
}
/**
* Return the table data with following format:
* [
* [rowIndex, [value0, value1...]],
* [rowIndex, [value0, value1...]]
* ]
* @param {Boolean} includeHeaders Optional: include headers row
* @param {Boolean} excludeHiddenCols Optional: exclude hidden columns
* @return {Array}
*
* TODO: provide an API returning data in JSON format
*/
getTableData(includeHeaders=false, excludeHiddenCols=false){
let rows = this.tbl.rows;
let tblData = [];
if(includeHeaders){
let headers = this.getHeadersText(excludeHiddenCols);
tblData.push([this.getHeadersRowIndex(), headers]);
}
for(let k=this.refRow; k<this.nbRows; k++){
let rowData = [k, []];
let cells = rows[k].cells;
for(let j=0, len=cells.length; j<len; j++){
if(excludeHiddenCols && this.hasExtension('colsVisibility')){
if(this.extension('colsVisibility').isColHidden(j)){
continue;
}
}
let cellData = this.getCellData(cells[j]);
rowData[1].push(cellData);
}
tblData.push(rowData);
}
return tblData;
}
/**
* Return the filtered data with following format:
* [
* [rowIndex, [value0, value1...]],
* [rowIndex, [value0, value1...]]
* ]
* @param {Boolean} includeHeaders Optional: include headers row
* @param {Boolean} excludeHiddenCols Optional: exclude hidden columns
* @return {Array}
*
* TODO: provide an API returning data in JSON format
*/
getFilteredData(includeHeaders=false, excludeHiddenCols=false){
if(!this.validRowsIndex){
return [];
}
let rows = this.tbl.rows,
filteredData = [];
if(includeHeaders){
let headers = this.getHeadersText(excludeHiddenCols);
filteredData.push([this.getHeadersRowIndex(), headers]);
}
let validRows = this.getValidRows(true);
for(let i=0; i<validRows.length; i++){
let rData = [this.validRowsIndex[i], []],
cells = rows[this.validRowsIndex[i]].cells;
for(let k=0; k<cells.length; k++){
if(excludeHiddenCols && this.hasExtension('colsVisibility')){
if(this.extension('colsVisibility').isColHidden(k)){
continue;
}
}
let cellData = this.getCellData(cells[k]);
rData[1].push(cellData);
}
filteredData.push(rData);
}
return filteredData;
}
/**
* Return the filtered data for a given column index
* @param {Number} colIndex Colmun's index
* @param {Boolean} includeHeaders Optional: include headers row
* @return {Array} Flat list of values ['val0','val1','val2'...]
*
* TODO: provide an API returning data in JSON format
*/
getFilteredDataCol(colIndex, includeHeaders=false){
if(Types.isUndef(colIndex)){
return [];
}
let data = this.getFilteredData(),
colData = [];
if(includeHeaders){
colData.push(this.getHeadersText()[colIndex]);
}
for(let i=0, len=data.length; i<len; i++){
let r = data[i],
//cols values of current row
d = r[1],
//data of searched column
c = d[colIndex];
colData.push(c);
}
return colData;
}
/**
* Get the display value of a row
* @param {RowElement} DOM element of the row
* @return {String} Usually 'none' or ''
*/
getRowDisplay(row){
if(!Types.isObj(row)){
return null;
}
return row.style.display;
}
/**
* Validate/invalidate row by setting the 'validRow' attribute on the row
* @param {Number} rowIndex Index of the row
* @param {Boolean} isValid
*/
validateRow(rowIndex, isValid){
let row = this.tbl.rows[rowIndex];
if(!row || typeof isValid !== 'boolean'){
return;
}
// always visible rows are valid
if(this.hasVisibleRows && this.visibleRows.indexOf(rowIndex) !== -1){
isValid = true;
}
let displayFlag = isValid ? '' : 'none',
validFlag = isValid ? 'true' : 'false';
row.style.display = displayFlag;
if(this.paging){
row.setAttribute('validRow', validFlag);
}
if(isValid){
if(this.validRowsIndex.indexOf(rowIndex) === -1){
this.validRowsIndex.push(rowIndex);
}
if(this.onRowValidated){
this.onRowValidated.call(null, this, rowIndex);
}
this.emitter.emit('row-validated', this, rowIndex);
}
}
/**
* Validate all filterable rows
*/
validateAllRows(){
if(!this._hasGrid){
return;
}
this.validRowsIndex = [];
for(let k=this.refRow; k<this.nbFilterableRows; k++){
this.validateRow(k, true);
}
}
/**
* Set search value to a given filter
* @param {Number} index Column's index
* @param {String or Array} searcharg Search term
*/
setFilterValue(index, query=''){
if(!this.fltGrid){
return;
}
let slc = this.getFilterElement(index),
fltColType = this.getFilterType(index);
if(fltColType !== this.fltTypeMulti &&
fltColType != this.fltTypeCheckList){
if(this.loadFltOnDemand && !this.initialized){
this.emitter.emit('build-select-filter', this, index,
this.linkedFilters, this.isExternalFlt);
}
slc.value = query;
}
//multiple selects
else if(fltColType === this.fltTypeMulti){
let values = Types.isArray(query) ? query :
query.split(' '+this.orOperator+' ');
if(this.loadFltOnDemand && !this.initialized){
this.emitter.emit('build-select-filter', this, index,
this.linkedFilters, this.isExternalFlt);
}
this.emitter.emit('select-options', this, index, values);
}
//checklist
else if(fltColType === this.fltTypeCheckList){
let values = [];
if(this.loadFltOnDemand && !this.initialized){
this.emitter.emit('build-checklist-filter', this, index,
this.isExternalFlt);
}
if(Types.isArray(query)){
values = query;
} else {
query = Str.matchCase(query, this.caseSensitive);
values = query.split(' '+this.orOperator+' ');
}
this.emitter.emit('select-checklist-options', this, index, values);
}
}
/**
* Set them columns' widths as per configuration
* @param {Number} rowIndex Optional row index to apply the widths to
* @param {Element} tbl DOM element
*/
setColWidths(rowIndex, tbl){
if(!this.hasColWidths){
return;
}
tbl = tbl || this.tbl;
let rIndex;
if(rowIndex === undefined){
rIndex = tbl.rows[0].style.display!='none' ? 0 : 1;
} else{
rIndex = rowIndex;
}
setWidths.call(this);
function setWidths(){
/*jshint validthis:true */
let nbCols = this.nbCells;
let colWidths = this.colWidths;
let colTags = Dom.tag(tbl, 'col');
let tblHasColTag = colTags.length > 0;
let frag = !tblHasColTag ? doc.createDocumentFragment() : null;
for(let k=0; k<nbCols; k++){
let col;
if(tblHasColTag){
col = colTags[k];
} else {
col = Dom.create('col', ['id', this.id+'_col_'+k]);
frag.appendChild(col);
}
col.style.width = colWidths[k];
}
if(!tblHasColTag){
tbl.insertBefore(frag, tbl.firstChild);
}
}
}
/**
* Makes defined rows always visible
*/
enforceVisibility(){
if(!this.hasVisibleRows){
return;
}
for(let i=0, len=this.visibleRows.length; i<len; i++){
let row = this.visibleRows[i];
//row index cannot be > nrows
if(row <= this.nbRows){
this.validateRow(row, true);
}
}
}
/**
* Clear all the filters' values
*/
clearFilters(){
if(!this.fltGrid){
return;
}
this.emitter.emit('before-clearing-filters', this);
if(this.onBeforeReset){
this.onBeforeReset.call(null, this, this.getFiltersValue());
}
for(let i=0, len=this.fltIds.length; i<len; i++){
this.setFilterValue(i, '');
}
// if(this.linkedFilters){
// this.linkFilters();
// }
this.filter();
if(this.onAfterReset){ this.onAfterReset.call(null, this); }
this.emitter.emit('after-clearing-filters', this);
}
/**
* Clears filtered columns visual indicator (background color)
*/
clearActiveColumns(){
for(let i=0, len=this.getCellsNb(this.headersRow); i<len; i++){
Dom.removeClass(
this.getHeaderElement(i), this.activeColumnsCssClass);
}
}
/**
* Mark currently filtered column
* @param {Number} colIndex Column index
*/
markActiveColumn(colIndex){
let header = this.getHeaderElement(colIndex);
if(Dom.hasClass(header, this.activeColumnsCssClass)){
return;
}
if(this.onBeforeActiveColumn){
this.onBeforeActiveColumn.call(null, this, colIndex);
}
Dom.addClass(header, this.activeColumnsCssClass);
if(this.onAfterActiveColumn){
this.onAfterActiveColumn.call(null, this, colIndex);
}
}
/**
* Refresh the filters subject to linking ('select', 'multiple',
* 'checklist' type)
*/
linkFilters(){
if(!this.linkedFilters || !this.activeFilterId){
return;
}
let slcA1 = this.getFiltersByType(this.fltTypeSlc, true),
slcA2 = this.getFiltersByType(this.fltTypeMulti, true),
slcA3 = this.getFiltersByType(this.fltTypeCheckList, true),
slcIndex = slcA1.concat(slcA2);
slcIndex = slcIndex.concat(slcA3);
let activeFlt = this.activeFilterId.split('_')[0];
activeFlt = activeFlt.split(this.prfxFlt)[1];
let slcSelectedValue;
for(let i=0, len=slcIndex.length; i<len; i++){
let curSlc = Dom.id(this.fltIds[slcIndex[i]]);
slcSelectedValue = this.getFilterValue(slcIndex[i]);
// Welcome to cyclomatic complexity hell :)
// TODO: simplify/refactor if statement
if(activeFlt!==slcIndex[i] ||
(this.paging && slcA1.indexOf(slcIndex[i]) != -1 &&
activeFlt === slcIndex[i] ) ||
(!this.paging && (slcA3.indexOf(slcIndex[i]) != -1 ||
slcA2.indexOf(slcIndex[i]) != -1)) ||
slcSelectedValue === this.displayAllText ){
if(slcA3.indexOf(slcIndex[i]) != -1){
this.Mod.checkList.checkListDiv[slcIndex[i]].innerHTML = '';
} else {
curSlc.innerHTML = '';
}
//1st option needs to be inserted
if(this.loadFltOnDemand) {
let opt0 = Dom.createOpt(this.displayAllText, '');
if(curSlc){
curSlc.appendChild(opt0);
}
}
if(slcA3.indexOf(slcIndex[i]) != -1){
this.emitter.emit('build-checklist-filter', this,
slcIndex[i], this.isExternalFlt);
} else {
this.emitter.emit('build-select-filter', this, slcIndex[i],
true, this.isExternalFlt);
}
this.setFilterValue(slcIndex[i], slcSelectedValue);
}
}// for i
}
/**
* Determines if passed filter column implements exact query match
* @param {Number} colIndex [description]
* @return {Boolean} [description]
*/
isExactMatch(colIndex){
let fltType = this.getFilterType(colIndex);
return this.exactMatchByCol[colIndex] || this.exactMatch ||
(fltType !== this.fltTypeInp);
}
/**
* Check if passed script or stylesheet is already imported
* @param {String} filePath Ressource path
* @param {String} type Possible values: 'script' or 'link'
* @return {Boolean}
*/
isImported(filePath, type){
let imported = false,
importType = !type ? 'script' : type,
attr = importType == 'script' ? 'src' : 'href',
files = Dom.tag(doc, importType);
for (let i=0, len=files.length; i<len; i++){
if(files[i][attr] === undefined){
continue;
}
if(files[i][attr].match(filePath)){
imported = true;
break;
}
}
return imported;
}
/**
* Import script or stylesheet
* @param {String} fileId Ressource ID
* @param {String} filePath Ressource path
* @param {Function} callback Callback
* @param {String} type Possible values: 'script' or 'link'
*/
import(fileId, filePath, callback, type){
let ftype = !type ? 'script' : type,
imported = this.isImported(filePath, ftype);
if(imported){
return;
}
let o = this,
isLoaded = false,
file,
head = Dom.tag(doc, 'head')[0];
if(Str.lower(ftype) === 'link'){
file = Dom.create(
'link',
['id', fileId], ['type', 'text/css'],
['rel', 'stylesheet'], ['href', filePath]
);
} else {
file = Dom.create(
'script', ['id', fileId],
['type', 'text/javascript'], ['src', filePath]
);
}
//Browser <> IE onload event works only for scripts, not for stylesheets
file.onload = file.onreadystatechange = function(){
if(!isLoaded &&
(!this.readyState || this.readyState === 'loaded' ||
this.readyState === 'complete')){
isLoaded = true;
if(typeof callback === 'function'){
callback.call(null, o);
}
}
};
file.onerror = function(){
throw new Error('TF script could not load: ' + filePath);
};
head.appendChild(file);
}
/**
* Check if table has filters grid
* @return {Boolean}
*/
hasGrid(){
return this._hasGrid;
}
/**
* Get list of filter IDs
* @return {[type]} [description]
*/
getFiltersId(){
return this.fltIds || [];
}
/**
* Get filtered (valid) rows indexes
* @param {Boolean} reCalc Force calculation of filtered rows list
* @return {Array} List of row indexes
*/
getValidRows(reCalc){
if(!reCalc){
return this.validRowsIndex;
}
this.validRowsIndex = [];
for(let k=this.refRow; k<this.getRowsNb(true); k++){
let r = this.tbl.rows[k];
if(!this.paging){
if(this.getRowDisplay(r) !== 'none'){
this.validRowsIndex.push(r.rowIndex);
}
} else {
if(r.getAttribute('validRow') === 'true' ||
r.getAttribute('validRow') === null){
this.validRowsIndex.push(r.rowIndex);
}
}
}
return this.validRowsIndex;
}
/**
* Get the index of the row containing the filters
* @return {Number}
*/
getFiltersRowIndex(){
return this.filtersRowIndex;
}
/**
* Get the index of the headers row
* @return {Number}
*/
getHeadersRowIndex(){
return this.headersRow;
}
/**
* Get the row index from where the filtering process start (1st filterable
* row)
* @return {Number}
*/
getStartRowIndex(){
return this.refRow;
}
/**
* Get the index of the last row
* @return {Number}
*/
getLastRowIndex(){
return (this.nbRows-1);
}
/**
* Get the header DOM element for a given column index
* @param {Number} colIndex Column index
* @return {Object}
*/
getHeaderElement(colIndex){
let table = this.gridLayout ? this.Mod.gridLayout.headTbl : this.tbl;
let tHead = Dom.tag(table, 'thead');
let headersRow = this.headersRow;
let header;
for(let i=0; i<this.nbCells; i++){
if(i !== colIndex){
continue;
}
if(tHead.length === 0){
header = table.rows[headersRow].cells[i];
}
if(tHead.length === 1){
header = tHead[0].rows[headersRow].cells[i];
}
break;
}
return header;
}
/**
* Return the list of headers' text
* @param {Boolean} excludeHiddenCols Optional: exclude hidden columns
* @return {Array} list of headers' text
*/
getHeadersText(excludeHiddenCols=false){
let headers = [];
for(let j=0; j<this.nbCells; j++){
if(excludeHiddenCols && this.hasExtension('colsVisibility')){
if(this.extension('colsVisibility').isColHidden(j)){
continue;
}
}
let header = this.getHeaderElement(j);
let headerText = Dom.getFirstTextNode(header);
headers.push(headerText);
}
return headers;
}
/**
* Return the filter type for a specified column
* @param {Number} colIndex Column's index
* @return {String}
*/
getFilterType(colIndex){
let colType = this.cfg['col_'+colIndex];
return !colType ? this.fltTypeInp : Str.lower(colType);
}
/**
* Get the total number of filterable rows
* @return {Number}
*/
getFilterableRowsNb(){
return this.getRowsNb(false);
}
/**
* Get the configuration object (literal object)
* @return {Object}
*/
config(){
return this.cfg;
}
}
Reference in a new issue View git blame Copy permalink