1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-09 18:06:53 +02:00

Added col widths tests

This commit is contained in:
Max Guglielmi 2015-05-28 23:44:23 +10:00
parent aeb94da59a
commit ec79d1410a
8 changed files with 236 additions and 152 deletions

File diff suppressed because one or more lines are too long

View file

@ -12,7 +12,7 @@
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th width="15%">By Rail (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
</thead>
<tfoot>
@ -97,6 +97,7 @@
base_path: '../build/tablefilter/',
rows_counter: true,
// enable_default_theme: true,
help_instructions: true,
on_keyup: false,
loader: true,
themes: [{ name: 'skyblue'}],
@ -105,8 +106,9 @@
highlight_keywords: true,
match_case: false,
remember_grid_values: true,
col_widths: ['150px','150px','150px','200px','150px'],
btn_reset: true,
grid_layout: false,
grid_layout: true,
sort: true,
sort_config: {
sort_types: ['string','string','number','number','number']

View file

@ -73,8 +73,8 @@ export class GridLayout{
tf.isExternalFlt = true;
// default width of 100px if column widths not set
if(!tf.hasColWidth){
tf.colWidth = [];
if(!tf.hasColWidths){
tf.colWidths = [];
for(var k=0; k<tf.nbCells; k++){
var colW,
cell = tbl.rows[this.gridHeadRowIndex].cells[k];
@ -85,9 +85,9 @@ export class GridLayout{
} else {
colW = this.gridDefaultColWidth;
}
tf.colWidth[k] = colW;
tf.colWidths[k] = colW;
}
tf.hasColWidth = true;
tf.hasColWidths = true;
}
tf.setColWidths(this.gridHeadRowIndex);
@ -237,34 +237,34 @@ export class GridLayout{
tf.sortConfig.triggerIds = sortTriggers;
}
if(this.gridEnableColResizer){
if(!tf.hasExtensions){
tf.extensions = {
name:['ColumnsResizer_'+tf.id],
src:[this.gridColResizerPath],
description:['Columns Resizing'],
initialize:[function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);}]
};
tf.hasExtensions = true;
} else {
if(!tf._containsStr(
'colsresizer',
Str.lower(tf.extensions.src.toString())) ){
tf.extensions.name.push('ColumnsResizer_'+tf.id);
tf.extensions.src.push(tf.gridColResizerPath);
tf.extensions.description.push('Columns Resizing');
tf.extensions.initialize.push(function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);});
}
}
}
// if(this.gridEnableColResizer){
// if(!tf.hasExtensions){
// tf.extensions = {
// name:['ColumnsResizer_'+tf.id],
// src:[this.gridColResizerPath],
// description:['Columns Resizing'],
// initialize:[function(o){
// o.SetColsResizer('ColumnsResizer_'+o.id);}]
// };
// tf.hasExtensions = true;
// } else {
// if(!tf._containsStr(
// 'colsresizer',
// Str.lower(tf.extensions.src.toString())) ){
// tf.extensions.name.push('ColumnsResizer_'+tf.id);
// tf.extensions.src.push(tf.gridColResizerPath);
// tf.extensions.description.push('Columns Resizing');
// tf.extensions.initialize.push(function(o){
// o.SetColsResizer('ColumnsResizer_'+o.id);});
// }
// }
// }
//Default columns resizer properties for grid layout
f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id');
f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
f.col_resizer_width_adjustment = 0;
f.col_enable_text_ellipsis = false;
// f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id');
// f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
// f.col_resizer_width_adjustment = 0;
// f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7
this.tblHasColTag = Dom.tag(tbl, 'col').length > 0 ? true : false;
@ -278,7 +278,7 @@ export class GridLayout{
for(var k=(tf.nbCells-1); k>=0; k--){
var col = Dom.create('col', ['id', tf.id+'_col_'+k]);
tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild);
col.style.width = tf.colWidth[k];
col.style.width = tf.colWidths[k];
o.gridColElms[k] = col;
}
o.tblHasColTag = true;
@ -289,7 +289,7 @@ export class GridLayout{
var cols = Dom.tag(tbl, 'col');
for(var ii=0; ii<tf.nbCells; ii++){
cols[ii].setAttribute('id', tf.id+'_col_'+ii);
cols[ii].style.width = tf.colWidth[ii];
cols[ii].style.width = tf.colWidths[ii];
o.gridColElms.push(cols[ii]);
}
}

View file

@ -131,7 +131,7 @@ export class TableFilter{
this.sourceTblHtml = null;
if(this.gridLayout){
//Firefox does not support outerHTML property...
if(this.tbl.outerHTML===undefined){ setOuterHtml(); }
// if(this.tbl.outerHTML===undefined){ setOuterHtml(); }
this.sourceTblHtml = this.tbl.outerHTML;
}
/*** ***/
@ -200,8 +200,8 @@ export class TableFilter{
//enables/disbles rows alternating bg colors
this.alternateBgs = f.alternate_rows===true ? true : false;
//defines widths of columns
this.hasColWidth = f.col_width===true ? true : false;
this.colWidth = this.hasColWidth ? f.col_width : null;
this.hasColWidths = types.isArray(f.col_widths);
this.colWidths = this.hasColWidths ? f.col_widths : null;
//enables/disables fixed headers
this.fixedHeaders = f.fixed_headers===true ? true : false;
//tbody height if fixed headers enabled
@ -275,7 +275,7 @@ export class TableFilter{
//id of toolbar container element
this.toolBarTgtId = f.toolbar_target_id || null;
//enables/disables help div
this.helpInstructions = f.help_instructions===false ? false : true;
this.helpInstructions = !f.help_instructions ? false : true;
//popup filters
this.popUpFilters = f.popup_filters===true ? true : false;
//active columns color
@ -754,9 +754,9 @@ export class TableFilter{
n = this.singleSearchFlt ? 1 : this.nbCells,
inpclass;
if(window['tf_'+this.id] === undefined){
window['tf_'+this.id] = this;
}
// if(global['tf_'+this.id] === undefined){
// global['tf_'+this.id] = this;
// }
//loads stylesheet if not imported
this.import(this.stylesheetId, this.stylesheet, null, 'link');
@ -1054,7 +1054,7 @@ export class TableFilter{
this.Cpt.help = new Help(this);
this.Cpt.help.init();
}
if(this.hasColWidth && !this.gridLayout){
if(this.hasColWidths && !this.gridLayout){
this.setColWidths();
}
if(this.alternateBgs){
@ -1346,10 +1346,6 @@ export class TableFilter{
if(this.markActiveColumns){
this.clearActiveColumns();
}
// if(ExtRegistry.advancedGrid){
// ExtRegistry.advancedGrid.destroy();
// }
if(this.hasExtensions){
this.destroyExtensions();
}
@ -1402,7 +1398,7 @@ export class TableFilter{
}
/*** container div ***/
var infdiv = dom.create('div', ['id',this.prfxInfDiv+this.id]);
var infdiv = dom.create('div', ['id', this.prfxInfDiv+this.id]);
infdiv.className = this.infDivCssClass;
//custom container
@ -1422,32 +1418,32 @@ export class TableFilter{
this.infDiv = dom.id(this.prfxInfDiv+this.id);
/*** left div containing rows # displayer ***/
var ldiv = dom.create('div', ['id',this.prfxLDiv+this.id]);
var 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 ***/
var rdiv = dom.create('div', ['id',this.prfxRDiv+this.id]);
var 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 ***/
var mdiv = dom.create('div', ['id',this.prfxMDiv+this.id]);
var mdiv = dom.create('div', ['id', this.prfxMDiv+this.id]);
mdiv.className = this.mDivCssClass;
infdiv.appendChild(mdiv);
this.mDiv = dom.id(this.prfxMDiv+this.id);
// Enable help instructions by default if topbar is generated
// if(!this.helpInstructions){
// if(!this.Cpt.help){
// this.Cpt.help = new Help(this);
// }
// this.Cpt.help.init();
// this.helpInstructions = true;
// }
if(!this.helpInstructions){
if(!this.Cpt.help){
this.Cpt.help = new Help(this);
}
this.Cpt.help.init();
this.helpInstructions = true;
}
}
/**
@ -1709,8 +1705,8 @@ export class TableFilter{
Cpt = this.Cpt,
f = this.cfg,
hiddenrows = 0;
this.validRowsIndex = [];
// var o = this;
// removes keyword highlighting
if(this.highlightKeywords){
@ -2531,7 +2527,7 @@ export class TableFilter{
* @param {Number} rowIndex Optional row index to apply the widths to
*/
setColWidths(rowIndex){
if(!this.fltGrid || !this.hasColWidth){
if(!this.fltGrid || !this.hasColWidths){
return;
}
var rIndex;
@ -2545,13 +2541,13 @@ export class TableFilter{
function setWidths(row){
/*jshint validthis:true */
var nbCols = this.nbCells;
var colWidth = this.colWidth;
if((nbCols != colWidth.length) || (nbCols != row.cells.length)){
var colWidths = this.colWidths;
if((nbCols != colWidths.length) || (nbCols != row.cells.length)){
throw new Error('Columns number mismatch!');
}
for(var k=0; k<nbCols; k++){
row.cells[k].style.width = colWidth[k];
row.cells[k].style.width = colWidths[k];
}
}
@ -2615,32 +2611,32 @@ export class TableFilter{
* Refresh the filters
* @param {Object} config Configuration literal object
*/
refresh(config){
var configObj = !config ? this.cfg : config;
var hasSort = this.sort;
//sort property is set to false in order to avoid sort object
//re-instanciation
if(hasSort){
this.sort = false;
}
this.nbRows = this.getRowsNb(); //in case table is refreshed
this.remove();
window['tf_'+this.id] = new TableFilter(
this.id, this.startRow, configObj);
this.isFirstLoad = true;
this.fltIds = [];
this.init();
//New tbody content needs to be referenced in sortabletable script with
//setTBody() method
if(hasSort){
//this.st = SortableTable object
//Note this is a method of the Sortable Table 1.12 script
//(Erik Arvidsson)
this.st.setTBody(this.tbl.tBodies[0]);
//finally sort property is enabled again
this.sort = true;
}
}
// refresh(config){
// var configObj = !config ? this.cfg : config;
// var hasSort = this.sort;
// //sort property is set to false in order to avoid sort object
// //re-instanciation
// if(hasSort){
// this.sort = false;
// }
// this.nbRows = this.getRowsNb(); //in case table is refreshed
// this.remove();
// global['tf_'+this.id] = new TableFilter(
// this.id, this.startRow, configObj);
// this.isFirstLoad = true;
// this.fltIds = [];
// this.init();
// //New tbody content needs to be referenced in sortabletable script
// //with setTBody() method
// if(hasSort){
// //this.st = SortableTable object
// //Note this is a method of the Sortable Table 1.12 script
// //(Erik Arvidsson)
// this.st.setTBody(this.tbl.tBodies[0]);
// //finally sort property is enabled again
// this.sort = true;
// }
// }
/**
* Refresh the filters subject to linking ('select', 'multiple',
@ -3026,35 +3022,35 @@ TableFilter.AlternateRows = AlternateRows;
TableFilter.ColOps = ColOps;
//Firefox does not support outerHTML property
function setOuterHtml(){
if(doc.body.__defineGetter__){
if(HTMLElement) {
var element = HTMLElement.prototype;
if(element.__defineGetter__){
element.__defineGetter__("outerHTML",
function(){
var parent = this.parentNode;
var el = dom.create(parent.tagName);
el.appendChild(this);
var shtml = el.innerHTML;
parent.appendChild(this);
return shtml;
}
);
}
if(element.__defineSetter__) {
HTMLElement.prototype.__defineSetter__(
"outerHTML", function(sHTML){
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
return sHTML;
});
}
}
}
}
// function setOuterHtml(){
// if(doc.body.__defineGetter__){
// if(HTMLElement) {
// var element = HTMLElement.prototype;
// if(element.__defineGetter__){
// element.__defineGetter__("outerHTML",
// function(){
// var parent = this.parentNode;
// var el = dom.create(parent.tagName);
// el.appendChild(this);
// var shtml = el.innerHTML;
// parent.appendChild(this);
// return shtml;
// }
// );
// }
// if(element.__defineSetter__) {
// HTMLElement.prototype.__defineSetter__(
// "outerHTML", function(sHTML){
// var r = this.ownerDocument.createRange();
// r.setStartBefore(this);
// var df = r.createContextualFragment(sHTML);
// this.parentNode.replaceChild(df, this);
// return sHTML;
// });
// }
// }
// }
// }
// return TableFilter;
@ -3081,32 +3077,3 @@ function setOuterHtml(){
// window['tf_'+id] = tf;
// return tf;
// }
/*===BEGIN removable section===========================
- Unobtrusive grid bar generation using
'filterable' class
- If you don't use it you can remove safely this
section
/*=====================================================*/
// window['tf_isNotIE'] = !(/msie|MSIE/.test(navigator.userAgent));
// TF.Event.add(window,
// (tf_isNotIE || (typeof window.addEventListener === 'function') ?
// 'DOMContentLoaded' : 'load'),
// initFilterGrid);
// function initFilterGrid(){
// if(!document.getElementsByTagName){ return; }
// var tbls = dom.tag(document,'table'), config;
// for (var i=0; i<tbls.length; i++){
// var cTbl = tbls[i], cTblId = cTbl.getAttribute('id');
// if(TF.Dom.hasClass(cTbl,'filterable') && cTblId){
// if(TF.Types.isObj(cTblId+'cfg')){
// config = window[cTblId+'cfg'];
// } else { config = undefined; }
// window[cTblId+'_isUnob'] = true;
// setFilterGrid(cTblId,config);
// }
// }// for i
// }
/*===END removable section===========================*/

79
test/test-col-widths.html Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter column widths tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
</head>
<body>
<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-col-widths.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

36
test/test-col-widths.js Normal file
View file

@ -0,0 +1,36 @@
(function(win, TableFilter){
var id = function (id){ return document.getElementById(id); };
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
col_widths: ['150px', '100px', '175px', '120px', null]
});
tf.init();
module('Sanity checks');
test('Column widths', function() {
var filterRow = tf.tbl.rows[tf.getFiltersRowIndex()];
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
deepEqual(filterRow.cells[1].style.width,
'100px', 'Expected column width');
deepEqual(filterRow.cells[4].style.width, '', 'Expected column width');
});
test('Grid layout column widths', function() {
tf.destroy();
tf = null;
tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
col_widths: ['150px', '100px', '175px', '120px', '200px'],
grid_layout: true,
sort: false
});
tf.init();
deepEqual(tf.getHeaderElement(0).style.width,
'150px', 'Expected column width');
deepEqual(tf.getHeaderElement(4).style.width,
'200px', 'Expected column width');
});
})(window, TableFilter);

View file

@ -54,8 +54,8 @@ module.exports = {
publicPath: '/dist/tablefilter/',
path: path.join(__dirname, '/dist/tablefilter'),
filename: 'tablefilter.js',
// chunkFilename: '[name]-[chunkhash].js',
chunkFilename: '[name].js',
chunkFilename: '[name]-[chunkhash].js',
// chunkFilename: '[name].js',
libraryTarget: 'umd'
},
resolve: {