mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-10 10:26:38 +02:00
Merge pull request #516 from koalyptus/toolbar-refactor
Toolbar refactor
This commit is contained in:
commit
50f537fbfc
4
dist/starter.html
vendored
4
dist/starter.html
vendored
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>tablefilter v0.5.42 - Starter</title>
|
||||
<title>tablefilter v0.5.43 - Starter</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>tablefilter v0.5.42</h1>
|
||||
<h1>tablefilter v0.5.43</h1>
|
||||
|
||||
|
||||
|
||||
|
|
4
dist/tablefilter/style/colsVisibility.css
vendored
4
dist/tablefilter/style/colsVisibility.css
vendored
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
span.colVisSpan{text-align:left;}span.colVisSpan a.colVis{display:inline-block;padding:7px 5px 0;font-size:inherit;font-weight:inherit;vertical-align:top}div.colVisCont{position:relative;background:#fff;-webkit-box-shadow:3px 3px 2px #888;-moz-box-shadow:3px 3px 2px #888;box-shadow:3px 3px 2px #888;position:absolute;display:none;border:1px solid #ccc;height:auto;width:250px;background-color:#fff;margin:35px 0 0 -100px;z-index:10000;padding:10px 10px 10px 10px;text-align:left;font-size:inherit;}div.colVisCont:after,div.colVisCont:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.colVisCont:after{border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:10px;margin-left:-10px}div.colVisCont:before{border-color:rgba(255,255,255,0);border-bottom-color:#ccc;border-width:12px;margin-left:-12px}div.colVisCont p{margin:6px auto 6px auto}div.colVisCont a.colVis{display:initial;font-weight:inherit}ul.cols_checklist{padding:0;margin:0;list-style-type:none;}ul.cols_checklist label{display:block}ul.cols_checklist input{vertical-align:middle;margin:2px 5px 2px 1px}li.cols_checklist_item{padding:4px;margin:0;}li.cols_checklist_item:hover{background-color:#335ea8;color:#fff}.cols_checklist_slc_item{background-color:#335ea8;color:#fff}
|
4
dist/tablefilter/style/filtersVisibility.css
vendored
4
dist/tablefilter/style/filtersVisibility.css
vendored
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
span.expClpFlt a.btnExpClpFlt{width:35px;height:35px;display:inline-block;}span.expClpFlt a.btnExpClpFlt:hover{background-color:#f4f4f4}span.expClpFlt img{padding:8px 11px 11px 11px}
|
4
dist/tablefilter/style/tablefilter.css
vendored
4
dist/tablefilter/style/tablefilter.css
vendored
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
.activeHeader{background-color:#66afe9 !important;color:#fff !important}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
table.TF{border-left:1px solid #ccc;border-top:none;border-right:none;border-bottom:none;}table.TF th{background:#ebecee url("images/bg_th.jpg") left top repeat-x;border-bottom:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-left:1px solid #fff;border-top:1px solid #fff;color:#333}table.TF td{border-bottom:1px dotted #999;padding:5px}.fltrow{background-color:#ebecee !important;}.fltrow th,.fltrow td{border-bottom:1px dotted #666 !important;padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #999 !important}input.flt{width:99% !important}.inf{height:$min-height;background:#d7d7d7 url("images/bg_infDiv.jpg") 0 0 repeat-x !important}input.reset{background:transparent url("images/btn_eraser.gif") center center no-repeat !important}.helpBtn:hover{background-color:transparent}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important;}.nextPage:hover{background:transparent url("images/btn_over_next_page.gif") center center no-repeat !important}.previousPage{background:transparent url("images/btn_previous_page.gif") center center no-repeat !important;}.previousPage:hover{background:transparent url("images/btn_over_previous_page.gif") center center no-repeat !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important;}.firstPage:hover{background:transparent url("images/btn_over_first_page.gif") center center no-repeat !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important;}.lastPage:hover{background:transparent url("images/btn_over_last_page.gif") center center no-repeat !important}div.grd_Cont{background-color:#ebecee !important;border:1px solid #ccc !important;padding:0 !important;}div.grd_Cont .even{background-color:#fff}div.grd_Cont .odd{background-color:#d5d5d5}div.grd_headTblCont{background-color:#ebecee !important;border-bottom:none !important;}div.grd_headTblCont table{border-right:none !important}div.grd_tblCont table th,div.grd_headTblCont table th,div.grd_headTblCont table td{background:#ebecee url("images/bg_th.jpg") left top repeat-x !important;border-bottom:1px solid #d0d0d0 !important;border-right:1px solid #d0d0d0 !important;border-left:1px solid #fff !important;border-top:1px solid #fff !important}div.grd_tblCont table td{border-bottom:1px solid #999 !important}.grd_inf{background:#d7d7d7 url("images/bg_infDiv.jpg") 0 0 repeat-x !important;border-top:1px solid #d0d0d0 !important}.loader{border:1px solid #999}.defaultLoader{width:32px;height:32px;background:transparent url("images/img_loading.gif") 0 0 no-repeat !important}.even{background-color:#fff}.odd{background-color:#d5d5d5}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.activeHeader{background:#999 !important}
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
table.TF{border-left:1px dotted #81963b;border-top:none;border-right:0;border-bottom:none;}table.TF th{background:#39424b url("images/bg_headers.jpg") left top repeat-x;border-bottom:0;border-right:1px dotted #d0d0d0;border-left:0;border-top:0;color:#fff}table.TF td{border-bottom:1px dotted #81963b;border-right:1px dotted #81963b;padding:5px}.fltrow{background-color:#81963b !important;}.fltrow th,.fltrow td{border-bottom:1px dotted #39424b !important;border-right:1px dotted #fff !important;border-left:0 !important;border-top:0 !important;padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #687830 !important}input.flt{width:99% !important}.inf{background:#d8d8d8;height:$min-height}input.reset{width:53px;background:transparent url("images/btn_filter.png") center center no-repeat !important}.helpBtn:hover{background-color:transparent}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important}.previousPage{background:transparent url("images/btn_previous_page.gif") center center no-repeat !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important}div.grd_Cont{background:#81963b url("images/bg_headers.jpg") left top repeat-x !important;border:1px solid #ccc !important;padding:0 1px 1px 1px !important;}div.grd_Cont .even{background-color:#bccd83}div.grd_Cont .odd{background-color:#fff}div.grd_headTblCont{background-color:#ebecee !important;border-bottom:none !important}div.grd_tblCont table{border-right:none !important;}div.grd_tblCont table td{border-bottom:1px dotted #81963b;border-right:1px dotted #81963b}div.grd_tblCont table th,div.grd_headTblCont table th{background:transparent url("images/bg_headers.jpg") 0 0 repeat-x !important;border-bottom:0 !important;border-right:1px dotted #d0d0d0 !important;border-left:0 !important;border-top:0 !important;padding:0 4px 0 4px !important;color:#fff !important;height:35px !important}div.grd_headTblCont table td{border-bottom:1px dotted #39424b !important;border-right:1px dotted #fff !important;border-left:0 !important;border-top:0 !important;background-color:#81963b !important;padding:1px 3px 1px 3px !important}.grd_inf{background-color:#d8d8d8;border-top:1px solid #d0d0d0 !important}.loader{border:0 !important;background:#81963b !important}.defaultLoader{width:32px;height:32px;background:transparent url("images/img_loading.gif") 0 0 no-repeat !important}.even{background-color:#bccd83}.odd{background-color:#fff}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.activeHeader{background:#81963b !important}
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
table.TF{padding:0;color:#000;border-right:1px solid #a4bed4;border-top:1px solid #a4bed4;border-left:1px solid #a4bed4;border-bottom:0;}table.TF th{margin:0;color:inherit;background:#d1e5fe url("images/bg_skyblue.gif") 0 0 repeat-x;border-color:#fdfdfd #a4bed4 #a4bed4 #fdfdfd;border-width:1px;border-style:solid}table.TF td{margin:0;padding:5px;color:inherit;border-bottom:1px solid #a4bed4;border-left:0;border-top:0;border-right:0}.fltrow{background-color:#d1e5fe !important;}.fltrow th,.fltrow td{padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #a4bed4 !important}input.flt{width:99% !important}.inf{background-color:#e3efff !important;border:1px solid #a4bed4;height:$min-height;color:#004a6f}div.tot,div.status{border-right:0 !important}.helpBtn:hover{background-color:transparent}input.reset{background:transparent url("images/icn_clear_filters.png") center center no-repeat !important}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.nextPage:hover{background:#ffe4ab url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.previousPage{background:transparent url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.previousPage:hover{background:#ffe4ab url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.firstPage:hover{background:#ffe4ab url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.lastPage:hover{background:#ffe4ab url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.activeHeader{background:#ffe4ab !important;border:1px solid #ffb552 !important;color:inherit !important}div.grd_Cont{background-color:#d9eaed !important;border:1px solid #9cc !important;padding:0 !important;}div.grd_Cont .even{background-color:#fff}div.grd_Cont .odd{background-color:#e3efff}div.grd_headTblCont{background-color:#d9eaed !important;border-bottom:none !important}div.grd_tblCont table{border-right:none !important}div.grd_tblCont table th,div.grd_headTblCont table th,div.grd_headTblCont table td{background:#d9eaed url("images/bg_skyblue.gif") left top repeat-x;border-bottom:1px solid #a4bed4;border-right:1px solid #a4bed4 !important;border-left:1px solid #fff !important;border-top:1px solid #fff !important}div.grd_tblCont table td{border-bottom:1px solid #a4bed4 !important;border-right:0 !important;border-left:0 !important;border-top:0 !important}.grd_inf{background-color:#cce2fe;color:#004a6f;border-top:1px solid #9cc !important;}.grd_inf a{text-decoration:none;font-weight:bold}.loader{background-color:#2d8eef;border:1px solid #cce2fe;border-radius:5px}.even{background-color:#fff}.odd{background-color:#e3efff}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.ezActiveRow{background-color:#ffdc61 !important;color:inherit}.ezSelectedRow{background-color:#ffe4ab !important;color:inherit}.ezActiveCell{background-color:#fff !important;color:#000 !important;font-weight:bold}.ezETSelectedCell{background-color:#fff !important;font-weight:bold;color:#000 !important}
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* tablefilter v0.5.42 by Max Guglielmi
|
||||
* build date: 2017-09-23T11:28:32.094Z
|
||||
* tablefilter v0.5.43 by Max Guglielmi
|
||||
* build date: 2017-10-09T10:51:27.062Z
|
||||
* MIT License
|
||||
*/
|
||||
table.TF{padding:0;color:inherit;border-right:1px solid transparent;border-top:1px solid transparent;border-left:1px solid transparent;border-bottom:0;}table.TF th{margin:0;color:inherit;background-color:transparent;border-color:transparent;border-width:1px;border-style:solid;}table.TF th:last-child{border-right:1px solid transparent}table.TF td{margin:0;padding:5px;color:inherit;border-bottom:1px solid transparent;border-left:0;border-top:0;border-right:0}.fltrow{background-color:transparent;}.fltrow th,.fltrow td{padding:1px 3px 1px 3px;border-bottom:1px solid transparent !important;}.fltrow th:last-child,.fltrow td:last-child{border-right:1px solid transparent}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #a4bed4}input.flt{width:99% !important}.inf{background-color:transparent;border:1px solid transparent;height:$min-height;color:inherit}div.tot,div.status{border-right:0 !important}.helpBtn:hover{background-color:transparent}input.reset{background:transparent url("images/icn_clear_filters.png") center center no-repeat !important}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.nextPage:hover{background:#f7f7f7 url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid #f7f7f7 !important}.previousPage{background:transparent url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.previousPage:hover{background:#f7f7f7 url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid #f7f7f7 !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.firstPage:hover{background:#f7f7f7 url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid #f7f7f7 !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.lastPage:hover{background:#f7f7f7 url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid #f7f7f7 !important}.activeHeader{background:#f7f7f7 !important;border:1px solid transparent;color:inherit !important}div.grd_Cont{-webkit-box-shadow:0 0 0 0 rgba(50,50,50,0.75);-moz-box-shadow:0 0 0 0 rgba(50,50,50,0.75);box-shadow:0 0 0 0 rgba(50,50,50,0.75);background-color:transparent;border:1px solid transparent;padding:0 !important;}div.grd_Cont .even{background-color:transparent}div.grd_Cont .odd{background-color:#f7f7f7}div.grd_headTblCont{background-color:transparent;border-bottom:none !important}div.grd_tblCont table{border-right:none !important}div.grd_tblCont table th,div.grd_headTblCont table th,div.grd_headTblCont table td{background:transparent;border-bottom:1px solid transparent;border-right:1px solid transparent !important;border-left:1px solid transparent;border-top:1px solid transparent}div.grd_tblCont table td{border-bottom:1px solid transparent;border-right:0 !important;border-left:0 !important;border-top:0 !important}.grd_inf{background-color:transparent;color:inherit;border-top:1px solid transparent;}.grd_inf a{text-decoration:none;font-weight:bold}.loader{background-color:#f7f7f7;border:1px solid #f7f7f7;border-radius:5px;color:#000;text-shadow:none}.even{background-color:transparent}.odd{background-color:#f7f7f7}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.ezActiveRow{background-color:#ccc !important;color:inherit}.ezSelectedRow{background-color:#ccc !important;color:inherit}.ezActiveCell{background-color:transparent;color:inherit;font-weight:bold}.ezETSelectedCell{background-color:transparent;font-weight:bold;color:inherit}
|
6
dist/tablefilter/tablefilter.js
vendored
6
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
2
dist/tablefilter/tablefilter.js.map
vendored
2
dist/tablefilter/tablefilter.js.map
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8
dist/tablefilter/tf-0-f0578b2ef22256b7bbd2.js
vendored
Normal file
8
dist/tablefilter/tf-0-f0578b2ef22256b7bbd2.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/tablefilter/tf-0-f0578b2ef22256b7bbd2.js.map
vendored
Normal file
1
dist/tablefilter/tf-0-f0578b2ef22256b7bbd2.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tablefilter",
|
||||
"version": "0.5.42",
|
||||
"version": "0.5.43",
|
||||
"description": "A Javascript library making HTML tables filterable and a bit more",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
|
|
|
@ -12,6 +12,7 @@ import {ClearButton} from './modules/clearButton';
|
|||
import {AlternateRows} from './modules/alternateRows';
|
||||
import {NoResults} from './modules/noResults';
|
||||
import {Paging} from './modules/paging';
|
||||
import {Toolbar} from './modules/toolbar';
|
||||
|
||||
/**
|
||||
* Filter types
|
||||
|
@ -196,5 +197,10 @@ export const FEATURES = {
|
|||
paging: {
|
||||
class: Paging,
|
||||
name: 'paging'
|
||||
},
|
||||
toolbar: {
|
||||
class: Toolbar,
|
||||
name: 'toolbar',
|
||||
enforce: true
|
||||
}
|
||||
};
|
||||
|
|
|
@ -3,13 +3,14 @@ import {
|
|||
addClass, removeClass, createCheckItem, createElm, elm, removeElm,
|
||||
getText, tag
|
||||
} from '../../dom';
|
||||
import {isUndef, EMPTY_FN} from '../../types';
|
||||
import {isUndef, EMPTY_FN, isNull} from '../../types';
|
||||
import {addEvt, targetEvt, removeEvt} from '../../event';
|
||||
import {root} from '../../root';
|
||||
import {NONE} from '../../const';
|
||||
import {
|
||||
defaultsBool, defaultsStr, defaultsFn, defaultsNb, defaultsArr
|
||||
} from '../../settings';
|
||||
import {RIGHT} from '../../modules/toolbar';
|
||||
|
||||
/**
|
||||
* Columns Visibility extension
|
||||
|
@ -207,6 +208,12 @@ export default class ColsVisibility extends Feature {
|
|||
*/
|
||||
this.tickAllText = defaultsStr(f.tick_all_text, 'Select all:');
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
|
||||
|
||||
/**
|
||||
* List of indexes of hidden columns
|
||||
* @private
|
||||
|
@ -369,6 +376,9 @@ export default class ColsVisibility extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-extension', this,
|
||||
!isNull(this.btnTgtId));
|
||||
|
||||
this.emitter.on(['hide-column'],
|
||||
(tf, colIndex) => this.hideCol(colIndex));
|
||||
|
||||
|
@ -381,6 +391,7 @@ export default class ColsVisibility extends Feature {
|
|||
this.boundMouseup = this.onMouseup.bind(this);
|
||||
|
||||
this.emitter.emit('columns-visibility-initialized', this.tf, this);
|
||||
this.emitter.emit('extension-initialized', this);
|
||||
|
||||
// Hide columns at start at very end of initialization, do not move
|
||||
// as order is important
|
||||
|
@ -398,11 +409,10 @@ export default class ColsVisibility extends Feature {
|
|||
let span = createElm('span');
|
||||
span.className = this.spanCssClass;
|
||||
|
||||
//Container element (rdiv or custom element)
|
||||
if (!this.btnTgtId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.btnTgtId ? tf.rDiv : elm(this.btnTgtId);
|
||||
// Container element (rdiv or custom element)
|
||||
let targetEl = !this.btnTgtId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.btnTgtId);
|
||||
|
||||
if (!this.btnTgtId) {
|
||||
let firstChild = targetEl.firstChild;
|
||||
|
@ -423,7 +433,7 @@ export default class ColsVisibility extends Feature {
|
|||
} else {
|
||||
addEvt(btn, 'mouseover', (evt) => this.toggle(evt));
|
||||
}
|
||||
} else { //Custom html
|
||||
} else { // Custom html
|
||||
span.innerHTML = this.btnHtml;
|
||||
let colVisEl = span.firstChild;
|
||||
if (!this.enableHover) {
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import {Feature} from '../../feature';
|
||||
import {createElm, removeElm, elm} from '../../dom';
|
||||
import {EMPTY_FN} from '../../types';
|
||||
import {EMPTY_FN, isNull} from '../../types';
|
||||
import {addEvt} from '../../event';
|
||||
import {
|
||||
defaultsBool, defaultsStr, defaultsFn, defaultsNb,
|
||||
} from '../../settings';
|
||||
import {RIGHT} from '../../modules/toolbar';
|
||||
|
||||
/**
|
||||
* Filters Visibility extension
|
||||
|
@ -147,6 +148,12 @@ export default class FiltersVisibility extends Feature {
|
|||
*/
|
||||
this.visibleAtStart = defaultsNb(f.visible_at_start, true);
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
|
||||
|
||||
/**
|
||||
* Callback fired before filters row is shown
|
||||
* @type {Function}
|
||||
|
@ -186,15 +193,17 @@ export default class FiltersVisibility extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-extension', this,
|
||||
!isNull(this.targetId));
|
||||
|
||||
this.buildUI();
|
||||
|
||||
/**
|
||||
* @inherited
|
||||
*/
|
||||
/** @inherited */
|
||||
this.initialized = true;
|
||||
|
||||
this.emitter.on(['show-filters'], (tf, visible) => this.show(visible));
|
||||
this.emitter.emit('filters-visibility-initialized', this.tf, this);
|
||||
this.emitter.emit('extension-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -205,11 +214,10 @@ export default class FiltersVisibility extends Feature {
|
|||
let span = createElm('span');
|
||||
span.className = this.contCssClass;
|
||||
|
||||
//Container element (rdiv or custom element)
|
||||
if (!this.targetId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.targetId ? tf.rDiv : elm(this.targetId);
|
||||
// Container element (rdiv or custom element)
|
||||
let targetEl = !this.targetId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.targetId);
|
||||
|
||||
if (!this.targetId) {
|
||||
let firstChild = targetEl.firstChild;
|
||||
|
@ -225,7 +233,7 @@ export default class FiltersVisibility extends Feature {
|
|||
btn.title = this.btnText || this.defaultText;
|
||||
btn.innerHTML = this.collapseBtnHtml;
|
||||
span.appendChild(btn);
|
||||
} else { //Custom html
|
||||
} else { // Custom html
|
||||
span.innerHTML = this.btnHtml;
|
||||
btn = span.firstChild;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,8 @@ import {Feature} from '../feature';
|
|||
import {createElm, createText, elm, removeElm} from '../dom';
|
||||
import {addEvt} from '../event';
|
||||
import {defaultsStr} from '../settings';
|
||||
import {isNull} from '../types';
|
||||
import {RIGHT} from './toolbar';
|
||||
|
||||
/**
|
||||
* Clear button UI component
|
||||
|
@ -63,6 +65,12 @@ export class ClearButton extends Feature {
|
|||
(!tf.enableIcons ? null :
|
||||
'<input type="button" value="" class="' + this.cssClass +
|
||||
'" ' + 'title="' + this.tooltip + '" />'));
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -86,13 +94,13 @@ export class ClearButton extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-feature', this, !isNull(this.targetId));
|
||||
|
||||
let cont = createElm('span');
|
||||
|
||||
// reset button is added to defined element
|
||||
if (!this.targetId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.targetId ? tf.rDiv : elm(this.targetId);
|
||||
let targetEl = !this.targetId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.targetId);
|
||||
targetEl.appendChild(cont);
|
||||
|
||||
if (!this.html) {
|
||||
|
@ -111,6 +119,8 @@ export class ClearButton extends Feature {
|
|||
|
||||
/** @inherited */
|
||||
this.initialized = true;
|
||||
|
||||
this.emitter.emit('feature-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -3,8 +3,9 @@ import {createElm, createText, elm, removeElm} from '../dom';
|
|||
import {addEvt, targetEvt, removeEvt} from '../event';
|
||||
import {NONE} from '../const';
|
||||
import {root} from '../root';
|
||||
import {isEmpty} from '../types';
|
||||
import {isEmpty, isNull} from '../types';
|
||||
import {defaultsStr} from '../settings';
|
||||
import {RIGHT} from './toolbar';
|
||||
|
||||
const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' +
|
||||
'4.-Filter-operators';
|
||||
|
@ -108,6 +109,12 @@ export class Help extends Feature {
|
|||
'<div align="center" style="margin-top:8px;">' +
|
||||
'<a href="javascript:void(0);" class="close">Close</a></div></div>';
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
|
||||
|
||||
this.emitter.on(['init-help'], () => this.init());
|
||||
}
|
||||
|
||||
|
@ -137,6 +144,8 @@ export class Help extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-feature', this, !isNull(this.tgtId));
|
||||
|
||||
let tf = this.tf;
|
||||
|
||||
let btn = createElm('span');
|
||||
|
@ -145,10 +154,9 @@ export class Help extends Feature {
|
|||
this.boundMouseup = this.onMouseup.bind(this);
|
||||
|
||||
//help button is added to defined element
|
||||
if (!this.tgtId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.tgtId ? tf.rDiv : elm(this.tgtId);
|
||||
let targetEl = !this.tgtId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.tgtId);
|
||||
targetEl.appendChild(btn);
|
||||
|
||||
let divContainer = !this.contTgtId ? btn : elm(this.contTgtId);
|
||||
|
@ -186,6 +194,8 @@ export class Help extends Feature {
|
|||
this.btn = btn;
|
||||
/** @inherited */
|
||||
this.initialized = true;
|
||||
|
||||
this.emitter.emit('feature-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -6,6 +6,7 @@ import {INPUT, SELECT, NONE, ENTER_KEY} from '../const';
|
|||
import {
|
||||
defaultsStr, defaultsNb, defaultsBool, defaultsArr, defaultsFn
|
||||
} from '../settings';
|
||||
import {CENTER, RIGHT} from './toolbar';
|
||||
|
||||
/**
|
||||
* Paging UI component
|
||||
|
@ -210,6 +211,12 @@ export class Paging extends Feature {
|
|||
*/
|
||||
this.pageSelectorType = defaultsStr(f.page_selector_type, SELECT);
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, CENTER);
|
||||
|
||||
/**
|
||||
* Callback fired before the page is changed
|
||||
* @type {Function}
|
||||
|
@ -341,6 +348,8 @@ export class Paging extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-feature', this, !isNull(this.tgtId));
|
||||
|
||||
// Check resultsPerPage is in expected format and initialise the
|
||||
// results per page component
|
||||
if (this.hasResultsPerPage) {
|
||||
|
@ -437,10 +446,9 @@ export class Paging extends Feature {
|
|||
}
|
||||
|
||||
// paging elements (buttons+drop-down list) are added to defined element
|
||||
if (!this.tgtId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.tgtId ? tf.mDiv : elm(this.tgtId);
|
||||
let targetEl = !this.tgtId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.tgtId);
|
||||
targetEl.appendChild(btnFirstSpan);
|
||||
targetEl.appendChild(btnPrevSpan);
|
||||
|
||||
|
@ -484,6 +492,8 @@ export class Paging extends Feature {
|
|||
|
||||
/** @inherited */
|
||||
this.initialized = true;
|
||||
|
||||
this.emitter.emit('feature-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -515,7 +525,9 @@ export class Paging extends Feature {
|
|||
*/
|
||||
setPagingInfo(validRows) {
|
||||
let tf = this.tf;
|
||||
let mdiv = !this.tgtId ? tf.mDiv : elm(this.tgtId);
|
||||
let cont = !this.tgtId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.tgtId);
|
||||
|
||||
//store valid rows indexes
|
||||
tf.validRowsIndex = validRows || tf.getValidRows(true);
|
||||
|
@ -530,7 +542,7 @@ export class Paging extends Feature {
|
|||
}
|
||||
|
||||
if (this.nbPages > 0) {
|
||||
mdiv.style.visibility = 'visible';
|
||||
cont.style.visibility = 'visible';
|
||||
if (this.pageSelectorType === SELECT) {
|
||||
for (let z = 0; z < this.nbPages; z++) {
|
||||
let opt = createOpt(z + 1, z * this.pageLength, false);
|
||||
|
@ -543,7 +555,7 @@ export class Paging extends Feature {
|
|||
|
||||
} else {
|
||||
/*** if no results paging select and buttons are hidden ***/
|
||||
mdiv.style.visibility = 'hidden';
|
||||
cont.style.visibility = 'hidden';
|
||||
}
|
||||
this.groupByPage(tf.validRowsIndex);
|
||||
}
|
||||
|
@ -653,11 +665,9 @@ export class Paging extends Feature {
|
|||
slcRSpan.className = this.resultsSpanCssClass;
|
||||
|
||||
// results per page select is added to external element
|
||||
if (!this.pageLengthTgtId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.pageLengthTgtId ?
|
||||
tf.rDiv : elm(this.pageLengthTgtId);
|
||||
tf.feature('toolbar').container(RIGHT) :
|
||||
elm(this.pageLengthTgtId);
|
||||
slcRSpan.appendChild(createText(slcRText));
|
||||
|
||||
let help = tf.feature('help');
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import {Feature} from '../feature';
|
||||
import {createElm, createText, elm, removeElm} from '../dom';
|
||||
import {EMPTY_FN} from '../types';
|
||||
import {EMPTY_FN, isNull} from '../types';
|
||||
import {defaultsStr, defaultsFn} from '../settings';
|
||||
import {LEFT} from './toolbar';
|
||||
|
||||
/**
|
||||
* Rows counter UI component
|
||||
|
@ -68,6 +69,12 @@ export class RowsCounter extends Feature {
|
|||
*/
|
||||
this.cssClass = defaultsStr(f.css_class, 'tot');
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, LEFT);
|
||||
|
||||
/**
|
||||
* Callback fired before the counter is refreshed
|
||||
* @type {Function}
|
||||
|
@ -91,6 +98,8 @@ export class RowsCounter extends Feature {
|
|||
return;
|
||||
}
|
||||
|
||||
this.emitter.emit('initializing-feature', this, !isNull(this.targetId));
|
||||
|
||||
let tf = this.tf;
|
||||
|
||||
//rows counter container
|
||||
|
@ -102,10 +111,9 @@ export class RowsCounter extends Feature {
|
|||
countText.appendChild(createText(this.text));
|
||||
|
||||
// counter is added to defined element
|
||||
if (!this.targetId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = !this.targetId ? tf.lDiv : elm(this.targetId);
|
||||
let targetEl = !this.targetId ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.targetId);
|
||||
|
||||
//default container: 'lDiv'
|
||||
if (!this.targetId) {
|
||||
|
@ -128,6 +136,8 @@ export class RowsCounter extends Feature {
|
|||
/** @inherited */
|
||||
this.initialized = true;
|
||||
this.refresh();
|
||||
|
||||
this.emitter.emit('feature-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import {Feature} from '../feature';
|
||||
import {root} from '../root';
|
||||
import {createElm, createText, elm, removeElm} from '../dom';
|
||||
import {EMPTY_FN} from '../types';
|
||||
import {EMPTY_FN, isNull} from '../types';
|
||||
import {defaultsStr, defaultsFn} from '../settings';
|
||||
import {LEFT} from './toolbar';
|
||||
|
||||
const EVENTS = [
|
||||
'after-filtering',
|
||||
|
@ -163,6 +164,12 @@ export class StatusBar extends Feature {
|
|||
*/
|
||||
this.msgLoadThemes = defaultsStr(f.msg_load_themes,
|
||||
'Loading theme(s)...');
|
||||
|
||||
/**
|
||||
* Default position in toolbar ('left'|'center'|'right')
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolbarPosition = defaultsStr(f.toolbar_position, LEFT);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -176,23 +183,24 @@ export class StatusBar extends Feature {
|
|||
let tf = this.tf;
|
||||
let emitter = this.emitter;
|
||||
|
||||
//status bar container
|
||||
emitter.emit('initializing-feature', this, !isNull(this.targetId));
|
||||
|
||||
// status bar container
|
||||
let statusDiv = createElm('div');
|
||||
statusDiv.className = this.cssClass;
|
||||
|
||||
//status bar label
|
||||
// status bar label
|
||||
let statusSpan = createElm('span');
|
||||
//preceding text
|
||||
// preceding text
|
||||
let statusSpanText = createElm('span');
|
||||
statusSpanText.appendChild(createText(this.text));
|
||||
|
||||
// target element container
|
||||
if (!this.targetId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
let targetEl = (!this.targetId) ? tf.lDiv : elm(this.targetId);
|
||||
let targetEl = (!this.targetId) ?
|
||||
tf.feature('toolbar').container(this.toolbarPosition) :
|
||||
elm(this.targetId);
|
||||
|
||||
//default container: 'lDiv'
|
||||
// default container
|
||||
if (!this.targetId) {
|
||||
statusDiv.appendChild(statusSpanText);
|
||||
statusDiv.appendChild(statusSpan);
|
||||
|
@ -207,7 +215,7 @@ export class StatusBar extends Feature {
|
|||
this.msgContainer = statusSpan;
|
||||
this.labelContainer = statusSpanText;
|
||||
|
||||
// Subscribe to events
|
||||
// subscribe to events
|
||||
emitter.on(['before-filtering'], () => this.message(this.msgFilter));
|
||||
emitter.on(['before-populating-filter'],
|
||||
() => this.message(this.msgPopulate));
|
||||
|
@ -228,10 +236,10 @@ export class StatusBar extends Feature {
|
|||
|
||||
emitter.on(EVENTS, () => this.message(''));
|
||||
|
||||
/**
|
||||
* @inherited
|
||||
*/
|
||||
/** @inherited */
|
||||
this.initialized = true;
|
||||
|
||||
emitter.emit('feature-initialized', this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
221
src/modules/toolbar.js
Normal file
221
src/modules/toolbar.js
Normal file
|
@ -0,0 +1,221 @@
|
|||
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;
|
||||
}
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
import {addEvt, cancelEvt, stopEvt, targetEvt, keyCode} from './event';
|
||||
import {
|
||||
addClass, createElm, createOpt, elm, getText, getFirstTextNode,
|
||||
removeClass, removeElm, tag
|
||||
removeClass, tag
|
||||
} from './dom';
|
||||
import {contains, matchCase, rgxEsc, trim} from './string';
|
||||
import {isEmpty as isEmptyString} from './string';
|
||||
|
@ -222,59 +222,6 @@ export class TableFilter {
|
|||
*/
|
||||
this.validRowsIndex = [];
|
||||
|
||||
/**
|
||||
* Toolbar's container DOM element
|
||||
* @type {DOMElement}
|
||||
* @private
|
||||
*/
|
||||
this.infDiv = null;
|
||||
|
||||
/**
|
||||
* Left-side inner container DOM element (rows counter in toolbar)
|
||||
* @type {DOMElement}
|
||||
* @private
|
||||
*/
|
||||
this.lDiv = null;
|
||||
|
||||
/**
|
||||
* Right-side inner container DOM element (reset button,
|
||||
* page length selector in toolbar)
|
||||
* @type {DOMElement}
|
||||
* @private
|
||||
*/
|
||||
this.rDiv = null;
|
||||
|
||||
/**
|
||||
* Middle inner container DOM element (paging elements in toolbar)
|
||||
* @type {DOMElement}
|
||||
* @private
|
||||
*/
|
||||
this.mDiv = null;
|
||||
|
||||
/**
|
||||
* Css class for toolbar's container DOM element
|
||||
* @type {String}
|
||||
*/
|
||||
this.infDivCssClass = defaultsStr(f.inf_div_css_class, 'inf');
|
||||
|
||||
/**
|
||||
* Css class for left-side inner container DOM element
|
||||
* @type {String}
|
||||
*/
|
||||
this.lDivCssClass = defaultsStr(f.left_div_css_class, 'ldiv');
|
||||
|
||||
/**
|
||||
* Css class for right-side inner container DOM element
|
||||
* @type {String}
|
||||
*/
|
||||
this.rDivCssClass = defaultsStr(f.right_div_css_class, 'rdiv');
|
||||
|
||||
/**
|
||||
* Css class for middle inner container DOM element
|
||||
* @type {String}
|
||||
*/
|
||||
this.mDivCssClass = defaultsStr(f.middle_div_css_class, 'mdiv');
|
||||
|
||||
/*** filters' grid appearance ***/
|
||||
/**
|
||||
* Path for stylesheets
|
||||
|
@ -483,12 +430,6 @@ export class TableFilter {
|
|||
*/
|
||||
this.isWatermarkArray = isArray(this.watermark);
|
||||
|
||||
/**
|
||||
* Toolbar's custom container ID
|
||||
* @type {String}
|
||||
*/
|
||||
this.toolBarTgtId = defaultsStr(f.toolbar_target_id, null);
|
||||
|
||||
/**
|
||||
* Indicate whether help UI component is disabled
|
||||
* @type {Boolean}
|
||||
|
@ -890,30 +831,6 @@ export class TableFilter {
|
|||
*/
|
||||
this.prfxValButton = 'btn';
|
||||
|
||||
/**
|
||||
* Toolbar container ID prefix
|
||||
* @private
|
||||
*/
|
||||
this.prfxInfDiv = 'inf_';
|
||||
|
||||
/**
|
||||
* Toolbar left element ID prefix
|
||||
* @private
|
||||
*/
|
||||
this.prfxLDiv = 'ldiv_';
|
||||
|
||||
/**
|
||||
* Toolbar right element ID prefix
|
||||
* @private
|
||||
*/
|
||||
this.prfxRDiv = 'rdiv_';
|
||||
|
||||
/**
|
||||
* Toolbar middle element ID prefix
|
||||
* @private
|
||||
*/
|
||||
this.prfxMDiv = 'mdiv_';
|
||||
|
||||
/**
|
||||
* Responsive Css class
|
||||
* @private
|
||||
|
@ -962,6 +879,12 @@ export class TableFilter {
|
|||
*/
|
||||
this.responsive = Boolean(f.responsive);
|
||||
|
||||
/**
|
||||
* Enable toolbar component
|
||||
* @type {Object|Boolean}
|
||||
*/
|
||||
this.toolbar = isObj(f.toolbar) || Boolean(f.toolbar);
|
||||
|
||||
/**
|
||||
* Features registry
|
||||
* @private
|
||||
|
@ -974,7 +897,7 @@ export class TableFilter {
|
|||
*/
|
||||
this.ExtRegistry = {};
|
||||
|
||||
//conditionally instantiate required features
|
||||
// conditionally instantiate required features
|
||||
this.instantiateFeatures(
|
||||
Object.keys(FEATURES).map((item) => FEATURES[item])
|
||||
);
|
||||
|
@ -1001,7 +924,7 @@ export class TableFilter {
|
|||
|
||||
const { dateType, help, state, markActiveColumns, gridLayout, loader,
|
||||
highlightKeyword, popupFilter, rowsCounter, statusBar, clearButton,
|
||||
alternateRows, noResults, paging } = FEATURES;
|
||||
alternateRows, noResults, paging, toolbar } = FEATURES;
|
||||
|
||||
//explicitly initialise features in given order
|
||||
this.initFeatures([
|
||||
|
@ -1088,7 +1011,8 @@ export class TableFilter {
|
|||
clearButton,
|
||||
alternateRows,
|
||||
noResults,
|
||||
paging
|
||||
paging,
|
||||
toolbar
|
||||
]);
|
||||
|
||||
this.setColWidths();
|
||||
|
@ -1504,8 +1428,6 @@ export class TableFilter {
|
|||
this.removeExternalFlts();
|
||||
}
|
||||
|
||||
this.removeToolbar();
|
||||
|
||||
this.destroyExtensions();
|
||||
|
||||
this.validateAllRows();
|
||||
|
@ -1536,79 +1458,6 @@ export class TableFilter {
|
|||
this.initialized = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate container element for paging, reset button, rows counter etc.
|
||||
*/
|
||||
setToolbar() {
|
||||
if (this.infDiv) {
|
||||
return;
|
||||
}
|
||||
|
||||
/*** container div ***/
|
||||
let infDiv = createElm('div');
|
||||
infDiv.className = this.infDivCssClass;
|
||||
|
||||
//custom container
|
||||
if (this.toolBarTgtId) {
|
||||
elm(this.toolBarTgtId).appendChild(infDiv);
|
||||
}
|
||||
//grid-layout
|
||||
else if (this.gridLayout) {
|
||||
let gridLayout = this.Mod.gridLayout;
|
||||
gridLayout.tblMainCont.appendChild(infDiv);
|
||||
infDiv.className = gridLayout.infDivCssClass;
|
||||
}
|
||||
//default location: just above the table
|
||||
else {
|
||||
let cont = createElm('caption');
|
||||
cont.appendChild(infDiv);
|
||||
this.dom().insertBefore(cont, this.dom().firstChild);
|
||||
}
|
||||
this.infDiv = infDiv;
|
||||
|
||||
/*** left div containing rows # displayer ***/
|
||||
let lDiv = createElm('div');
|
||||
lDiv.className = this.lDivCssClass;
|
||||
infDiv.appendChild(lDiv);
|
||||
this.lDiv = lDiv;
|
||||
|
||||
/*** right div containing reset button
|
||||
+ nb results per page select ***/
|
||||
let rDiv = createElm('div');
|
||||
rDiv.className = this.rDivCssClass;
|
||||
infDiv.appendChild(rDiv);
|
||||
this.rDiv = rDiv;
|
||||
|
||||
/*** mid div containing paging elements ***/
|
||||
let mDiv = createElm('div');
|
||||
mDiv.className = this.mDivCssClass;
|
||||
infDiv.appendChild(mDiv);
|
||||
this.mDiv = mDiv;
|
||||
|
||||
// emit help initialisation only if undefined
|
||||
if (isUndef(this.help)) {
|
||||
// explicitily enable help to initialise feature by
|
||||
// default, only if setting is undefined
|
||||
this.Mod.help.enable();
|
||||
this.emitter.emit('init-help', this);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove toolbar container element
|
||||
*/
|
||||
removeToolbar() {
|
||||
if (!this.infDiv) {
|
||||
return;
|
||||
}
|
||||
removeElm(this.infDiv);
|
||||
this.infDiv = null;
|
||||
|
||||
let tbl = this.dom();
|
||||
let captions = tag(tbl, 'caption');
|
||||
[].forEach.call(captions, (elm) => removeElm(elm));
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all the external column filters
|
||||
*/
|
||||
|
@ -1743,7 +1592,7 @@ export class TableFilter {
|
|||
// isolate search term and check occurence in cell data
|
||||
for (let w = 0, len = s.length; w < len; w++) {
|
||||
cS = trim(s[w]);
|
||||
occur = this._testTerm(cS, cellValue, j);
|
||||
occur = this._matcth(cS, cellValue, j);
|
||||
|
||||
if (occur) {
|
||||
this.emitter.emit('highlight-keyword', this,
|
||||
|
@ -1762,7 +1611,7 @@ export class TableFilter {
|
|||
}
|
||||
//single search parameter
|
||||
else {
|
||||
occurence[j] = this._testTerm(trim(sA), cellValue, j);
|
||||
occurence[j] = this._matcth(trim(sA), cellValue, j);
|
||||
if (occurence[j]) {
|
||||
this.emitter.emit('highlight-keyword', this, cells[j],
|
||||
sA);
|
||||
|
@ -1801,13 +1650,14 @@ export class TableFilter {
|
|||
}
|
||||
|
||||
/**
|
||||
* Test for a match of search term in cell data
|
||||
* Match search term in cell data
|
||||
* @param {String} term Search term
|
||||
* @param {String} cellValue Cell data
|
||||
* @param {Number} colIdx Column index
|
||||
* @return {Boolean}
|
||||
* @private
|
||||
*/
|
||||
_testTerm(term, cellValue, colIdx) {
|
||||
_matcth(term, cellValue, colIdx) {
|
||||
let numData;
|
||||
let decimal = this.getDecimal(colIdx);
|
||||
let reLe = new RegExp(this.leOperator),
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
notEqual(tf.getFilterElement(0), null,
|
||||
'Filter element for column 0');
|
||||
deepEqual(tf.refRow, 2, 'Reference row index');
|
||||
deepEqual(Object.keys(tf.Mod).length, 14, 'Features instantiated');
|
||||
deepEqual(Object.keys(tf.Mod).length, 15, 'Features instantiated');
|
||||
notEqual(tf.feature('rowsCounter'), null, 'RowsCounter instantiated');
|
||||
deepEqual(tf.rowsCounter, false, 'RowsCounter not enabled');
|
||||
});
|
||||
|
|
|
@ -14,8 +14,8 @@ test('Should not initialize if already initialized', function() {
|
|||
// setup
|
||||
var hit = 0;
|
||||
statusBar.initialized = true;
|
||||
var initialSetToolbar = statusBar.tf.setToolbar;
|
||||
statusBar.tf.setToolbar = function() {
|
||||
var initialEmit = statusBar.emitter.emit;
|
||||
statusBar.emitter.emit = function() {
|
||||
hit++;
|
||||
};
|
||||
|
||||
|
@ -23,9 +23,9 @@ test('Should not initialize if already initialized', function() {
|
|||
statusBar.init();
|
||||
|
||||
// assert
|
||||
deepEqual(hit, 0, 'setToolbar not called');
|
||||
deepEqual(hit, 0, 'emitter.emit not called');
|
||||
|
||||
statusBar.tf.setToolbar = initialSetToolbar;
|
||||
statusBar.emitter.emit = initialEmit;
|
||||
});
|
||||
asyncTest('Can display message', function() {
|
||||
// act
|
||||
|
|
81
test/test-toolbar.html
Normal file
81
test/test-toolbar.html
Normal file
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TableFilter with toolbar</title>
|
||||
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||
<script src="libs/qunit/qunit.js"></script>
|
||||
<script src="libs/polyfill.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="ext-cont"></div>
|
||||
<table id="demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th>By Rail (hrs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||||
<script src="test-toolbar.js"></script>
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
</body>
|
||||
</html>
|
218
test/test-toolbar.js
Normal file
218
test/test-toolbar.js
Normal file
|
@ -0,0 +1,218 @@
|
|||
var tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
rows_counter: true
|
||||
});
|
||||
tf.init();
|
||||
|
||||
var toolbar = tf.feature('toolbar');
|
||||
|
||||
module('Sanity checks');
|
||||
test('toolbar component', function() {
|
||||
// assert
|
||||
notEqual(toolbar, null, 'toolbar instanciated');
|
||||
equal(toolbar.contCssClass, 'inf', 'container css class');
|
||||
equal(toolbar.lContCssClass, 'ldiv', 'left container css class');
|
||||
equal(toolbar.cContCssClass, 'mdiv', 'middle container css class');
|
||||
equal(toolbar.rContCssClass, 'rdiv', 'right container css class');
|
||||
equal(toolbar.tgtId, null, 'external container id null');
|
||||
notEqual(toolbar.cont, null, 'container created');
|
||||
notEqual(toolbar.lCont, null, 'left inner container created');
|
||||
notEqual(toolbar.cCont, null, 'middle inner container created');
|
||||
notEqual(toolbar.rCont, null, 'right inner container created');
|
||||
equal(toolbar.emitter.events['initializing-feature'].length, 1,
|
||||
'subscribed to `initializing-feature` event');
|
||||
equal(toolbar.emitter.events['initializing-extension'].length, 1,
|
||||
'subscribed to `initializing-extension` event');
|
||||
});
|
||||
|
||||
module('Feature interface');
|
||||
test('Properties', function() {
|
||||
deepEqual(toolbar.tf instanceof TableFilter, true, 'TableFilter instance');
|
||||
deepEqual(toolbar.feature, 'toolbar', 'Feature name');
|
||||
deepEqual(toolbar.enabled, true, 'Feature enabled');
|
||||
deepEqual(toolbar.initialized, true, 'Feature enabled');
|
||||
deepEqual(typeof toolbar.config, 'object', 'TF configuration object');
|
||||
deepEqual(typeof toolbar.init, 'function', 'Feature init method');
|
||||
deepEqual(typeof toolbar.destroy, 'function', 'Feature destroy method');
|
||||
deepEqual(typeof toolbar.reset, 'function', 'Feature reset method');
|
||||
deepEqual(typeof toolbar.enable, 'function', 'Feature enable method');
|
||||
deepEqual(typeof toolbar.disable, 'function', 'Feature enable method');
|
||||
deepEqual(typeof toolbar.isEnabled, 'function', 'Feature enable method');
|
||||
});
|
||||
test('Can destroy', function() {
|
||||
toolbar.destroy();
|
||||
deepEqual(toolbar.initialized, false, 'not initialised');
|
||||
});
|
||||
test('Can reset', function() {
|
||||
toolbar.reset();
|
||||
deepEqual(toolbar.enabled, true, 'enabled');
|
||||
});
|
||||
test('Can disable', function() {
|
||||
toolbar.disable();
|
||||
deepEqual(toolbar.enabled, false, 'disabled');
|
||||
});
|
||||
test('Can enable', function() {
|
||||
toolbar.enable();
|
||||
deepEqual(toolbar.enabled, true, 'enabled');
|
||||
});
|
||||
test('Can init', function() {
|
||||
toolbar.destroy();
|
||||
toolbar.enable();
|
||||
toolbar.init();
|
||||
deepEqual(toolbar.enabled, true, 'enabled');
|
||||
});
|
||||
test('Can check is enabled', function() {
|
||||
toolbar.isEnabled();
|
||||
deepEqual(toolbar.enabled, true, 'enabled');
|
||||
});
|
||||
|
||||
module('Behaviour');
|
||||
test('Does not init if initialised', function() {
|
||||
// setup
|
||||
var createContainer = toolbar.createContainer;
|
||||
var hit = 0;
|
||||
toolbar.createContainer = function() {
|
||||
hit++;
|
||||
};
|
||||
|
||||
// act
|
||||
toolbar.init();
|
||||
|
||||
// assert
|
||||
deepEqual(hit, 0, 'does not initialise');
|
||||
|
||||
toolbar.createContainer = createContainer;
|
||||
});
|
||||
|
||||
test('Does not init if external', function() {
|
||||
// setup
|
||||
toolbar.initialized = false;
|
||||
var createContainer = toolbar.createContainer;
|
||||
var hit = 0;
|
||||
toolbar.createContainer = function() {
|
||||
hit++;
|
||||
};
|
||||
|
||||
// act
|
||||
toolbar.init(true);
|
||||
|
||||
// assert
|
||||
deepEqual(hit, 0, 'does not initialise');
|
||||
|
||||
toolbar.createContainer = createContainer;
|
||||
toolbar.initialized = true;
|
||||
});
|
||||
|
||||
test('Can get container', function() {
|
||||
// act
|
||||
var result = toolbar.container('left');
|
||||
|
||||
// assert
|
||||
deepEqual(result, toolbar.cont.querySelector('.ldiv'),
|
||||
'left inner container');
|
||||
});
|
||||
|
||||
test('Can get default container', function() {
|
||||
// act
|
||||
var result = toolbar.container();
|
||||
|
||||
// assert
|
||||
deepEqual(result, toolbar.cont.querySelector('.rdiv'),
|
||||
'left inner container');
|
||||
});
|
||||
|
||||
test('Can get container with appended element', function() {
|
||||
// act
|
||||
var result = toolbar.container('center',
|
||||
document.createElement('span')
|
||||
.appendChild(document.createTextNode('test')));
|
||||
|
||||
// assert
|
||||
deepEqual(result.firstChild, toolbar.cont.querySelector('.mdiv').firstChild,
|
||||
'center inner container with appended element');
|
||||
});
|
||||
|
||||
test('Can create container with css class', function() {
|
||||
// act
|
||||
var result = toolbar.createContainer(toolbar.cont, 'test');
|
||||
|
||||
// assert
|
||||
deepEqual(result, toolbar.cont.querySelector('.test'),
|
||||
'inner container created');
|
||||
});
|
||||
|
||||
module('Custom css');
|
||||
test('config with custom css', function() {
|
||||
// setup
|
||||
tf.destroy();
|
||||
tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
toolbar: {
|
||||
container_css_class: 'cont-css',
|
||||
left_cont_css_class: 'left-cont-css',
|
||||
right_cont_css_class: 'right-cont-css',
|
||||
center_cont_css_class: 'center-cont-css'
|
||||
}
|
||||
});
|
||||
|
||||
// act
|
||||
tf.init();
|
||||
var toolbar = tf.feature('toolbar');
|
||||
|
||||
deepEqual(toolbar.cont, document.querySelector('.cont-css'),
|
||||
'container with custom css class');
|
||||
deepEqual(toolbar.lCont, toolbar.cont.querySelector('.left-cont-css'),
|
||||
'left inner container with custom css class');
|
||||
deepEqual(toolbar.rCont, document.querySelector('.right-cont-css'),
|
||||
'right inner container with custom css class');
|
||||
deepEqual(toolbar.cCont, document.querySelector('.center-cont-css'),
|
||||
'middle inner container with custom css class');
|
||||
});
|
||||
|
||||
module('External container');
|
||||
test('config with external container id', function() {
|
||||
// setup
|
||||
tf.destroy();
|
||||
tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
toolbar: {
|
||||
target_id: 'ext-cont'
|
||||
}
|
||||
});
|
||||
|
||||
// act
|
||||
tf.init();
|
||||
var toolbar = tf.feature('toolbar');
|
||||
|
||||
// assert
|
||||
deepEqual(toolbar.cont, document.querySelector('#ext-cont').firstChild,
|
||||
'external container element');
|
||||
});
|
||||
|
||||
module('Grid-layout');
|
||||
test('config with grid-layout', function() {
|
||||
// setup
|
||||
tf.destroy();
|
||||
tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
grid_layout: true,
|
||||
toolbar: true
|
||||
});
|
||||
|
||||
// act
|
||||
tf.init();
|
||||
var toolbar = tf.feature('toolbar');
|
||||
|
||||
// assert
|
||||
deepEqual(toolbar.cont, document.querySelector('.grd_inf'),
|
||||
'container element with grid-layout mode');
|
||||
});
|
||||
|
||||
module('tear-down');
|
||||
test('destroy TableFilter', function() {
|
||||
// act
|
||||
tf.destroy();
|
||||
|
||||
// assert
|
||||
deepEqual(tf.feature('toolbar').initialized, false, 'toolbar removed');
|
||||
});
|
Loading…
Reference in a new issue