mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-25 10:02:58 +02:00
Added tests for Help component
This commit is contained in:
parent
79468f5185
commit
bedae0a6de
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -1,5 +1,6 @@
|
||||||
# Dependency directory
|
# Dependency directory
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
*.js.map
|
||||||
.codio
|
.codio
|
||||||
.settings
|
.settings
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
],
|
],
|
||||||
"description": "Filter HTML tables data easily",
|
"description": "Filter HTML tables data easily",
|
||||||
"main": [
|
"main": [
|
||||||
"dist/tablefilter_all.js",
|
"dist/tablefilter.js",
|
||||||
"dist/filtergrid.css"
|
"dist/filtergrid.css"
|
||||||
],
|
],
|
||||||
"moduleType": [
|
"moduleType": [
|
||||||
|
@ -17,6 +17,7 @@
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html",
|
"html",
|
||||||
"table",
|
"table",
|
||||||
|
"filtering",
|
||||||
"filter"
|
"filter"
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
@ -1,6 +1,6 @@
|
||||||
/*------------------------------------------------------------------------
|
/*------------------------------------------------------------------------
|
||||||
- TableFilter stylesheet by Max Guglielmi
|
- TableFilter stylesheet by Max Guglielmi
|
||||||
- (build date: Thu Feb 19 2015 16:23:57)
|
- (build date: Fri Feb 20 2015 14:24:21)
|
||||||
- Edit below for your projects' needs
|
- Edit below for your projects' needs
|
||||||
------------------------------------------------------------------------*/
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
150
src-es6/modules/help.js
Normal file
150
src-es6/modules/help.js
Normal file
|
@ -0,0 +1,150 @@
|
||||||
|
import {Dom} from '../dom';
|
||||||
|
import {Event} from '../event';
|
||||||
|
|
||||||
|
export class Help{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Help UI component
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
*/
|
||||||
|
constructor(tf){
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj || {};
|
||||||
|
|
||||||
|
//id of custom container element for instructions
|
||||||
|
this.helpInstrTgtId = f.help_instructions_target_id || null;
|
||||||
|
//id of custom container element for instructions
|
||||||
|
this.helpInstrContTgtId = f.help_instructions_container_target_id ||
|
||||||
|
null;
|
||||||
|
//defines help text
|
||||||
|
this.helpInstrText = f.help_instructions_text ?
|
||||||
|
f.help_instructions_text :
|
||||||
|
'Use the filters above each column to filter and limit table ' +
|
||||||
|
'data. Avanced searches can be performed by using the following ' +
|
||||||
|
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
||||||
|
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
||||||
|
'<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
||||||
|
'<b>rgx:</b><br/> These operators are described here:<br/>' +
|
||||||
|
'<a href="http://tablefilter.free.fr/#operators" ' +
|
||||||
|
'target="_blank">http://tablefilter.free.fr/#operators</a><hr/>';
|
||||||
|
//defines help innerHtml
|
||||||
|
this.helpInstrHtml = f.help_instructions_html || null;
|
||||||
|
//defines reset button text
|
||||||
|
this.helpInstrBtnText = f.help_instructions_btn_text || '?';
|
||||||
|
//defines reset button innerHtml
|
||||||
|
this.helpInstrBtnHtml = f.help_instructions_btn_html || null;
|
||||||
|
//defines css class for help button
|
||||||
|
this.helpInstrBtnCssClass = f.help_instructions_btn_css_class ||
|
||||||
|
'helpBtn';
|
||||||
|
//defines css class for help container
|
||||||
|
this.helpInstrContCssClass = f.help_instructions_container_css_class ||
|
||||||
|
'helpCont';
|
||||||
|
//help button element
|
||||||
|
this.helpInstrBtnEl = null;
|
||||||
|
//help content div
|
||||||
|
this.helpInstrContEl = null;
|
||||||
|
this.helpInstrDefaultHtml = '<div class="helpFooter"><h4>HTML Table ' +
|
||||||
|
'Filter Generator v. '+ tf.version +'</h4>' +
|
||||||
|
'<a href="http://tablefilter.free.fr" target="_blank">' +
|
||||||
|
'http://tablefilter.free.fr</a><br/>' +
|
||||||
|
'<span>©2009-'+ tf.year +' Max Guglielmi.</span>' +
|
||||||
|
'<div align="center" style="margin-top:8px;">' +
|
||||||
|
'<a href="javascript:void(0);">Close</a></div></div>';
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
if(this.helpInstrBtnEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
var helpspan = Dom.create('span',['id', tf.prfxHelpSpan+tf.id]);
|
||||||
|
var helpdiv = Dom.create('div',['id', tf.prfxHelpDiv+tf.id]);
|
||||||
|
|
||||||
|
//help button is added to defined element
|
||||||
|
if(!this.helpInstrTgtId){
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = !this.helpInstrTgtId ?
|
||||||
|
tf.rDiv : Dom.id(this.helpInstrTgtId);
|
||||||
|
targetEl.appendChild(helpspan);
|
||||||
|
|
||||||
|
var divContainer = !this.helpInstrContTgtId ?
|
||||||
|
helpspan : Dom.id(this.helpInstrContTgtId);
|
||||||
|
|
||||||
|
if(!this.helpInstrBtnHtml){
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
var helplink = Dom.create('a', ['href', 'javascript:void(0);']);
|
||||||
|
helplink.className = this.helpInstrBtnCssClass;
|
||||||
|
helplink.appendChild(Dom.text(this.helpInstrBtnText));
|
||||||
|
helpspan.appendChild(helplink);
|
||||||
|
Event.add(helplink, 'click', () => { this.toggle(); });
|
||||||
|
} else {
|
||||||
|
helpspan.innerHTML = this.helpInstrBtnHtml;
|
||||||
|
var helpEl = helpspan.firstChild;
|
||||||
|
Event.add(helpEl, 'click', () => { this.toggle(); });
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!this.helpInstrHtml){
|
||||||
|
helpdiv.innerHTML = this.helpInstrText;
|
||||||
|
helpdiv.className = this.helpInstrContCssClass;
|
||||||
|
Event.add(helpdiv, 'dblclick', () => { this.toggle(); });
|
||||||
|
} else {
|
||||||
|
if(this.helpInstrContTgtId){
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
}
|
||||||
|
helpdiv.innerHTML = this.helpInstrHtml;
|
||||||
|
if(!this.helpInstrContTgtId){
|
||||||
|
helpdiv.className = this.helpInstrContCssClass;
|
||||||
|
Event.add(helpdiv, 'dblclick', () => { this.toggle(); });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
||||||
|
Event.add(helpdiv, 'click', () => { this.toggle(); });
|
||||||
|
|
||||||
|
this.helpInstrContEl = helpdiv;
|
||||||
|
this.helpInstrBtnEl = helpspan;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle help pop-up
|
||||||
|
*/
|
||||||
|
toggle(){
|
||||||
|
if(!this.helpInstrContEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var divDisplay = this.helpInstrContEl.style.display;
|
||||||
|
if(divDisplay==='' || divDisplay==='none'){
|
||||||
|
this.helpInstrContEl.style.display = 'block';
|
||||||
|
// TODO: use CSS instead for element positioning
|
||||||
|
var btnLeft = Dom.position(this.helpInstrBtnEl).left;
|
||||||
|
if(!this.helpInstrContTgtId){
|
||||||
|
this.helpInstrContEl.style.left =
|
||||||
|
(btnLeft - this.helpInstrContEl.clientWidth + 25) + 'px';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.helpInstrContEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove help UI
|
||||||
|
*/
|
||||||
|
destroy(){
|
||||||
|
if(!this.helpInstrBtnEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);
|
||||||
|
this.helpInstrBtnEl = null;
|
||||||
|
if(!this.helpInstrContEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);
|
||||||
|
this.helpInstrContEl = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
339
src/core.js
339
src/core.js
|
@ -263,7 +263,7 @@ function TableFilter(id) {
|
||||||
//id of toolbar container element
|
//id of toolbar container element
|
||||||
this.toolBarTgtId = f.toolbar_target_id || null;
|
this.toolBarTgtId = f.toolbar_target_id || null;
|
||||||
//enables/disables help div
|
//enables/disables help div
|
||||||
this.helpInstructions = f.help_instructions || null;
|
this.helpInstructions = f.help_instructions || false;
|
||||||
//popup filters
|
//popup filters
|
||||||
this.popUpFilters = f.popup_filters===true ? true : false;
|
this.popUpFilters = f.popup_filters===true ? true : false;
|
||||||
//active columns color
|
//active columns color
|
||||||
|
@ -621,7 +621,8 @@ function TableFilter(id) {
|
||||||
checkList: null,
|
checkList: null,
|
||||||
dropdown: null,
|
dropdown: null,
|
||||||
popupFilter: null,
|
popupFilter: null,
|
||||||
clearButton: null
|
clearButton: null,
|
||||||
|
help: null
|
||||||
};
|
};
|
||||||
|
|
||||||
/*** TF events ***/
|
/*** TF events ***/
|
||||||
|
@ -838,9 +839,9 @@ function TableFilter(id) {
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- Help button onclick event
|
- Help button onclick event
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
_OnHelpBtnClick: function() {
|
// _OnHelpBtnClick: function() {
|
||||||
o._ToggleHelp();
|
// o._ToggleHelp();
|
||||||
},
|
// },
|
||||||
_Paging: { //used by sort adapter
|
_Paging: { //used by sort adapter
|
||||||
nextEvt: null,
|
nextEvt: null,
|
||||||
prevEvt: null,
|
prevEvt: null,
|
||||||
|
@ -1154,13 +1155,15 @@ TableFilter.prototype = {
|
||||||
this.Cpt.paging.init();
|
this.Cpt.paging.init();
|
||||||
}
|
}
|
||||||
if(this.btnReset){
|
if(this.btnReset){
|
||||||
// this.SetResetBtn();
|
|
||||||
var ClearButton = require('modules/clearButton').ClearButton;
|
var ClearButton = require('modules/clearButton').ClearButton;
|
||||||
this.Cpt.clearButton = new ClearButton(this);
|
this.Cpt.clearButton = new ClearButton(this);
|
||||||
this.Cpt.clearButton.init();
|
this.Cpt.clearButton.init();
|
||||||
}
|
}
|
||||||
if(this.helpInstructions){
|
if(this.helpInstructions){
|
||||||
this.SetHelpInstructions();
|
// this.SetHelpInstructions();
|
||||||
|
var Help = require('modules/help').Help;
|
||||||
|
this.Cpt.help = new Help(this);
|
||||||
|
this.Cpt.help.init();
|
||||||
}
|
}
|
||||||
if(this.hasColWidth && !this.gridLayout){
|
if(this.hasColWidth && !this.gridLayout){
|
||||||
this.SetColWidths();
|
this.SetColWidths();
|
||||||
|
@ -1460,8 +1463,9 @@ TableFilter.prototype = {
|
||||||
// this.RemoveResetBtn();
|
// this.RemoveResetBtn();
|
||||||
this.Cpt.clearButton.destroy();
|
this.Cpt.clearButton.destroy();
|
||||||
}
|
}
|
||||||
if(this.helpInstructions || !this.helpInstructions){
|
if(this.helpInstructions /*|| !this.helpInstructions*/){
|
||||||
this.RemoveHelpInstructions();
|
// this.RemoveHelpInstructions();
|
||||||
|
this.Cpt.help.destroy();
|
||||||
}
|
}
|
||||||
if(this.isExternalFlt && !this.popUpFilters){
|
if(this.isExternalFlt && !this.popUpFilters){
|
||||||
this.RemoveExternalFlts();
|
this.RemoveExternalFlts();
|
||||||
|
@ -1574,8 +1578,14 @@ TableFilter.prototype = {
|
||||||
infdiv.appendChild(mdiv);
|
infdiv.appendChild(mdiv);
|
||||||
this.mDiv = dom.id(this.prfxMDiv+this.id);
|
this.mDiv = dom.id(this.prfxMDiv+this.id);
|
||||||
|
|
||||||
|
// Enable help instructions by default is topbar is generated
|
||||||
if(!this.helpInstructions){
|
if(!this.helpInstructions){
|
||||||
this.SetHelpInstructions();
|
// this.SetHelpInstructions();
|
||||||
|
if(!this.Cpt.help){
|
||||||
|
var Help = require('modules/help').Help;
|
||||||
|
this.Cpt.help = new Help(this);
|
||||||
|
}
|
||||||
|
this.Cpt.help.init();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -2010,137 +2020,137 @@ TableFilter.prototype = {
|
||||||
} catch(e) { console.log(ezEditConfig.err); }
|
} catch(e) { console.log(ezEditConfig.err); }
|
||||||
},
|
},
|
||||||
|
|
||||||
/*====================================================
|
// /*====================================================
|
||||||
- Generates help instructions
|
// - Generates help instructions
|
||||||
=====================================================*/
|
// =====================================================*/
|
||||||
SetHelpInstructions: function(){
|
// SetHelpInstructions: function(){
|
||||||
if(this.helpInstrBtnEl){
|
// if(this.helpInstrBtnEl){
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
var f = this.fObj;
|
// var f = this.fObj;
|
||||||
//id of custom container element for instructions
|
// //id of custom container element for instructions
|
||||||
this.helpInstrTgtId = f.help_instructions_target_id || null;
|
// this.helpInstrTgtId = f.help_instructions_target_id || null;
|
||||||
//id of custom container element for instructions
|
// //id of custom container element for instructions
|
||||||
this.helpInstrContTgtId = f.help_instructions_container_target_id ||
|
// this.helpInstrContTgtId = f.help_instructions_container_target_id ||
|
||||||
null;
|
// null;
|
||||||
//defines help text
|
// //defines help text
|
||||||
this.helpInstrText = f.help_instructions_text ?
|
// this.helpInstrText = f.help_instructions_text ?
|
||||||
f.help_instructions_text :
|
// f.help_instructions_text :
|
||||||
'Use the filters above each column to filter and limit table ' +
|
// 'Use the filters above each column to filter and limit table ' +
|
||||||
'data. Avanced searches can be performed by using the following ' +
|
// 'data. Avanced searches can be performed by using the following ' +
|
||||||
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
// 'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
||||||
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
// '<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
||||||
'<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
// '<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
||||||
'<b>rgx:</b><br/> These operators are described here:<br/>' +
|
// '<b>rgx:</b><br/> These operators are described here:<br/>' +
|
||||||
'<a href="http://tablefilter.free.fr/#operators" ' +
|
// '<a href="http://tablefilter.free.fr/#operators" ' +
|
||||||
'target="_blank">http://tablefilter.free.fr/#operators</a><hr/>';
|
// 'target="_blank">http://tablefilter.free.fr/#operators</a><hr/>';
|
||||||
//defines help innerHtml
|
// //defines help innerHtml
|
||||||
this.helpInstrHtml = f.help_instructions_html || null;
|
// this.helpInstrHtml = f.help_instructions_html || null;
|
||||||
//defines reset button text
|
// //defines reset button text
|
||||||
this.helpInstrBtnText = f.help_instructions_btn_text || '?';
|
// this.helpInstrBtnText = f.help_instructions_btn_text || '?';
|
||||||
//defines reset button innerHtml
|
// //defines reset button innerHtml
|
||||||
this.helpInstrBtnHtml = f.help_instructions_btn_html || null;
|
// this.helpInstrBtnHtml = f.help_instructions_btn_html || null;
|
||||||
//defines css class for help button
|
// //defines css class for help button
|
||||||
this.helpInstrBtnCssClass = f.help_instructions_btn_css_class ||
|
// this.helpInstrBtnCssClass = f.help_instructions_btn_css_class ||
|
||||||
'helpBtn';
|
// 'helpBtn';
|
||||||
//defines css class for help container
|
// //defines css class for help container
|
||||||
this.helpInstrContCssClass = f.help_instructions_container_css_class ||
|
// this.helpInstrContCssClass = f.help_instructions_container_css_class ||
|
||||||
'helpCont';
|
// 'helpCont';
|
||||||
//help button element
|
// //help button element
|
||||||
this.helpInstrBtnEl = null;
|
// this.helpInstrBtnEl = null;
|
||||||
//help content div
|
// //help content div
|
||||||
this.helpInstrContEl = null;
|
// this.helpInstrContEl = null;
|
||||||
this.helpInstrDefaultHtml = '<div class="helpFooter"><h4>HTML Table ' +
|
// this.helpInstrDefaultHtml = '<div class="helpFooter"><h4>HTML Table ' +
|
||||||
'Filter Generator v. '+ this.version +'</h4>' +
|
// 'Filter Generator v. '+ this.version +'</h4>' +
|
||||||
'<a href="http://tablefilter.free.fr" target="_blank">' +
|
// '<a href="http://tablefilter.free.fr" target="_blank">' +
|
||||||
'http://tablefilter.free.fr</a><br/>' +
|
// 'http://tablefilter.free.fr</a><br/>' +
|
||||||
'<span>©2009-'+ this.year +' Max Guglielmi.</span>' +
|
// '<span>©2009-'+ this.year +' Max Guglielmi.</span>' +
|
||||||
'<div align="center" style="margin-top:8px;">' +
|
// '<div align="center" style="margin-top:8px;">' +
|
||||||
'<a href="javascript:;" onclick="window[\'tf_'+ this.id +
|
// '<a href="javascript:;" onclick="window[\'tf_'+ this.id +
|
||||||
'\']._ToggleHelp();">Close</a></div></div>';
|
// '\']._ToggleHelp();">Close</a></div></div>';
|
||||||
|
|
||||||
var helpspan = dom.create('span',['id',this.prfxHelpSpan+this.id]);
|
// var helpspan = dom.create('span',['id',this.prfxHelpSpan+this.id]);
|
||||||
var helpdiv = dom.create('div',['id',this.prfxHelpDiv+this.id]);
|
// var helpdiv = dom.create('div',['id',this.prfxHelpDiv+this.id]);
|
||||||
|
|
||||||
//help button is added to defined element
|
// //help button is added to defined element
|
||||||
if(!this.helpInstrTgtId){
|
// if(!this.helpInstrTgtId){
|
||||||
this.SetTopDiv();
|
// this.SetTopDiv();
|
||||||
}
|
// }
|
||||||
var targetEl = !this.helpInstrTgtId ?
|
// var targetEl = !this.helpInstrTgtId ?
|
||||||
this.rDiv : dom.id(this.helpInstrTgtId);
|
// this.rDiv : dom.id(this.helpInstrTgtId);
|
||||||
targetEl.appendChild(helpspan);
|
// targetEl.appendChild(helpspan);
|
||||||
|
|
||||||
var divContainer = !this.helpInstrContTgtId ?
|
// var divContainer = !this.helpInstrContTgtId ?
|
||||||
helpspan : dom.id( this.helpInstrContTgtId );
|
// helpspan : dom.id( this.helpInstrContTgtId );
|
||||||
|
|
||||||
if(!this.helpInstrBtnHtml){
|
// if(!this.helpInstrBtnHtml){
|
||||||
divContainer.appendChild(helpdiv);
|
// divContainer.appendChild(helpdiv);
|
||||||
var helplink = dom.create('a', ['href', 'javascript:void(0);']);
|
// var helplink = dom.create('a', ['href', 'javascript:void(0);']);
|
||||||
helplink.className = this.helpInstrBtnCssClass;
|
// helplink.className = this.helpInstrBtnCssClass;
|
||||||
helplink.appendChild(dom.text(this.helpInstrBtnText));
|
// helplink.appendChild(dom.text(this.helpInstrBtnText));
|
||||||
helpspan.appendChild(helplink);
|
// helpspan.appendChild(helplink);
|
||||||
helplink.onclick = this.Evt._OnHelpBtnClick;
|
// helplink.onclick = this.Evt._OnHelpBtnClick;
|
||||||
} else {
|
// } else {
|
||||||
helpspan.innerHTML = this.helpInstrBtnHtml;
|
// helpspan.innerHTML = this.helpInstrBtnHtml;
|
||||||
var helpEl = helpspan.firstChild;
|
// var helpEl = helpspan.firstChild;
|
||||||
helpEl.onclick = this.Evt._OnHelpBtnClick;
|
// helpEl.onclick = this.Evt._OnHelpBtnClick;
|
||||||
divContainer.appendChild(helpdiv);
|
// divContainer.appendChild(helpdiv);
|
||||||
}
|
// }
|
||||||
|
|
||||||
if(!this.helpInstrHtml){
|
// if(!this.helpInstrHtml){
|
||||||
helpdiv.innerHTML = this.helpInstrText;
|
// helpdiv.innerHTML = this.helpInstrText;
|
||||||
helpdiv.className = this.helpInstrContCssClass;
|
// helpdiv.className = this.helpInstrContCssClass;
|
||||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
// helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||||
} else {
|
// } else {
|
||||||
if(this.helpInstrContTgtId){
|
// if(this.helpInstrContTgtId){
|
||||||
divContainer.appendChild(helpdiv);
|
// divContainer.appendChild(helpdiv);
|
||||||
}
|
// }
|
||||||
helpdiv.innerHTML = this.helpInstrHtml;
|
// helpdiv.innerHTML = this.helpInstrHtml;
|
||||||
if(!this.helpInstrContTgtId){
|
// if(!this.helpInstrContTgtId){
|
||||||
helpdiv.className = this.helpInstrContCssClass;
|
// helpdiv.className = this.helpInstrContCssClass;
|
||||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
// helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
// helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
||||||
this.helpInstrContEl = helpdiv;
|
// this.helpInstrContEl = helpdiv;
|
||||||
this.helpInstrBtnEl = helpspan;
|
// this.helpInstrBtnEl = helpspan;
|
||||||
},
|
// },
|
||||||
|
|
||||||
/*====================================================
|
// /*====================================================
|
||||||
- Removes help instructions
|
// - Removes help instructions
|
||||||
=====================================================*/
|
// =====================================================*/
|
||||||
RemoveHelpInstructions: function() {
|
// RemoveHelpInstructions: function() {
|
||||||
if(!this.helpInstrBtnEl){
|
// if(!this.helpInstrBtnEl){
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);
|
// this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);
|
||||||
this.helpInstrBtnEl = null;
|
// this.helpInstrBtnEl = null;
|
||||||
if(!this.helpInstrContEl){
|
// if(!this.helpInstrContEl){
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);
|
// this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);
|
||||||
this.helpInstrContEl = null;
|
// this.helpInstrContEl = null;
|
||||||
},
|
// },
|
||||||
|
|
||||||
/*====================================================
|
// /*====================================================
|
||||||
- Toggles help div
|
// - Toggles help div
|
||||||
=====================================================*/
|
// =====================================================*/
|
||||||
_ToggleHelp: function(){
|
// _ToggleHelp: function(){
|
||||||
if(!this.helpInstrContEl){
|
// if(!this.helpInstrContEl){
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
var divDisplay = this.helpInstrContEl.style.display;
|
// var divDisplay = this.helpInstrContEl.style.display;
|
||||||
if(divDisplay==='' || divDisplay==='none'){
|
// if(divDisplay==='' || divDisplay==='none'){
|
||||||
this.helpInstrContEl.style.display = 'block';
|
// this.helpInstrContEl.style.display = 'block';
|
||||||
var btnLeft = dom.position(this.helpInstrBtnEl).left;
|
// var btnLeft = dom.position(this.helpInstrBtnEl).left;
|
||||||
if(!this.helpInstrContTgtId){
|
// if(!this.helpInstrContTgtId){
|
||||||
this.helpInstrContEl.style.left =
|
// this.helpInstrContEl.style.left =
|
||||||
(btnLeft - this.helpInstrContEl.clientWidth + 25) + 'px';
|
// (btnLeft - this.helpInstrContEl.clientWidth + 25) + 'px';
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
this.helpInstrContEl.style.display = 'none';
|
// this.helpInstrContEl.style.display = 'none';
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
|
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- IE bug: it seems there is no way to make
|
- IE bug: it seems there is no way to make
|
||||||
|
@ -2212,67 +2222,6 @@ TableFilter.prototype = {
|
||||||
return [optArray,optTxt];
|
return [optArray,optTxt];
|
||||||
},
|
},
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- Generates reset button
|
|
||||||
=====================================================*/
|
|
||||||
// SetResetBtn: function(){
|
|
||||||
// if(!this.hasGrid && !this.isFirstLoad && this.btnResetEl){
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// var f = this.fObj;
|
|
||||||
// //id of container element
|
|
||||||
// this.btnResetTgtId = f.btn_reset_target_id || null;
|
|
||||||
// //reset button element
|
|
||||||
// this.btnResetEl = null;
|
|
||||||
// //defines reset text
|
|
||||||
// this.btnResetText = f.btn_reset_text || 'Reset';
|
|
||||||
// //defines reset button tooltip
|
|
||||||
// this.btnResetTooltip = f.btn_reset_tooltip || 'Clear filters';
|
|
||||||
// //defines reset button innerHtml
|
|
||||||
// this.btnResetHtml = f.btn_reset_html ||
|
|
||||||
// (!this.enableIcons ? null :
|
|
||||||
// '<input type="button" value="" class="'+this.btnResetCssClass+'" ' +
|
|
||||||
// 'title="'+this.btnResetTooltip+'" />');
|
|
||||||
|
|
||||||
// var resetspan = dom.create('span', ['id',this.prfxResetSpan+this.id]);
|
|
||||||
|
|
||||||
// // reset button is added to defined element
|
|
||||||
// if(!this.btnResetTgtId){
|
|
||||||
// this.SetTopDiv();
|
|
||||||
// }
|
|
||||||
// var targetEl = !this.btnResetTgtId ? this.rDiv :
|
|
||||||
// dom.id( this.btnResetTgtId );
|
|
||||||
// targetEl.appendChild(resetspan);
|
|
||||||
|
|
||||||
// if(!this.btnResetHtml){
|
|
||||||
// var fltreset = dom.create('a', ['href', 'javascript:void(0);']);
|
|
||||||
// fltreset.className = this.btnResetCssClass;
|
|
||||||
// fltreset.appendChild(dom.text(this.btnResetText));
|
|
||||||
// resetspan.appendChild(fltreset);
|
|
||||||
// fltreset.onclick = this.Evt._Clear;
|
|
||||||
// } else {
|
|
||||||
// resetspan.innerHTML = this.btnResetHtml;
|
|
||||||
// var resetEl = resetspan.firstChild;
|
|
||||||
// resetEl.onclick = this.Evt._Clear;
|
|
||||||
// }
|
|
||||||
// this.btnResetEl = dom.id(this.prfxResetSpan+this.id).firstChild;
|
|
||||||
// },
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- Removes reset button
|
|
||||||
=====================================================*/
|
|
||||||
// RemoveResetBtn: function(){
|
|
||||||
// if(!this.hasGrid || !this.btnResetEl){
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// var resetspan = dom.id(this.prfxResetSpan+this.id);
|
|
||||||
// if(resetspan){
|
|
||||||
// resetspan.parentNode.removeChild( resetspan );
|
|
||||||
// }
|
|
||||||
// this.btnResetEl = null;
|
|
||||||
// },
|
|
||||||
|
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- Generates status bar label
|
- Generates status bar label
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
|
|
@ -105,7 +105,7 @@
|
||||||
// remember_page_length: true,
|
// remember_page_length: true,
|
||||||
fill_slc_on_demand: false,
|
fill_slc_on_demand: false,
|
||||||
refresh_filters: false,
|
refresh_filters: false,
|
||||||
popup_filters: true,
|
popup_filters: false,
|
||||||
alternate_rows: true,
|
alternate_rows: true,
|
||||||
highlight_keywords: true,
|
highlight_keywords: true,
|
||||||
match_case: false,
|
match_case: false,
|
||||||
|
|
149
src/modules/help.js
Normal file
149
src/modules/help.js
Normal file
|
@ -0,0 +1,149 @@
|
||||||
|
define(["exports", "../dom", "../event"], function (exports, _dom, _event) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _classProps = function (child, staticProps, instanceProps) {
|
||||||
|
if (staticProps) Object.defineProperties(child, staticProps);
|
||||||
|
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
|
||||||
|
};
|
||||||
|
|
||||||
|
var Dom = _dom.Dom;
|
||||||
|
var Event = _event.Event;
|
||||||
|
var Help = (function () {
|
||||||
|
var Help = function Help(tf) {
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj || {};
|
||||||
|
|
||||||
|
//id of custom container element for instructions
|
||||||
|
this.helpInstrTgtId = f.help_instructions_target_id || null;
|
||||||
|
//id of custom container element for instructions
|
||||||
|
this.helpInstrContTgtId = f.help_instructions_container_target_id || null;
|
||||||
|
//defines help text
|
||||||
|
this.helpInstrText = f.help_instructions_text ? f.help_instructions_text : "Use the filters above each column to filter and limit table " + "data. Avanced searches can be performed by using the following " + "operators: <br /><b><</b>, <b><=</b>, <b>></b>, " + "<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, " + "<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, " + "<b>rgx:</b><br/> These operators are described here:<br/>" + "<a href=\"http://tablefilter.free.fr/#operators\" " + "target=\"_blank\">http://tablefilter.free.fr/#operators</a><hr/>";
|
||||||
|
//defines help innerHtml
|
||||||
|
this.helpInstrHtml = f.help_instructions_html || null;
|
||||||
|
//defines reset button text
|
||||||
|
this.helpInstrBtnText = f.help_instructions_btn_text || "?";
|
||||||
|
//defines reset button innerHtml
|
||||||
|
this.helpInstrBtnHtml = f.help_instructions_btn_html || null;
|
||||||
|
//defines css class for help button
|
||||||
|
this.helpInstrBtnCssClass = f.help_instructions_btn_css_class || "helpBtn";
|
||||||
|
//defines css class for help container
|
||||||
|
this.helpInstrContCssClass = f.help_instructions_container_css_class || "helpCont";
|
||||||
|
//help button element
|
||||||
|
this.helpInstrBtnEl = null;
|
||||||
|
//help content div
|
||||||
|
this.helpInstrContEl = null;
|
||||||
|
this.helpInstrDefaultHtml = "<div class=\"helpFooter\"><h4>HTML Table " + "Filter Generator v. " + tf.version + "</h4>" + "<a href=\"http://tablefilter.free.fr\" target=\"_blank\">" + "http://tablefilter.free.fr</a><br/>" + "<span>©2009-" + tf.year + " Max Guglielmi.</span>" + "<div align=\"center\" style=\"margin-top:8px;\">" + "<a href=\"javascript:void(0);\">Close</a></div></div>";
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
};
|
||||||
|
|
||||||
|
_classProps(Help, null, {
|
||||||
|
init: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
var _this = this;
|
||||||
|
if (this.helpInstrBtnEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
var helpspan = Dom.create("span", ["id", tf.prfxHelpSpan + tf.id]);
|
||||||
|
var helpdiv = Dom.create("div", ["id", tf.prfxHelpDiv + tf.id]);
|
||||||
|
|
||||||
|
//help button is added to defined element
|
||||||
|
if (!this.helpInstrTgtId) {
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = !this.helpInstrTgtId ? tf.rDiv : Dom.id(this.helpInstrTgtId);
|
||||||
|
targetEl.appendChild(helpspan);
|
||||||
|
|
||||||
|
var divContainer = !this.helpInstrContTgtId ? helpspan : Dom.id(this.helpInstrContTgtId);
|
||||||
|
|
||||||
|
if (!this.helpInstrBtnHtml) {
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
var helplink = Dom.create("a", ["href", "javascript:void(0);"]);
|
||||||
|
helplink.className = this.helpInstrBtnCssClass;
|
||||||
|
helplink.appendChild(Dom.text(this.helpInstrBtnText));
|
||||||
|
helpspan.appendChild(helplink);
|
||||||
|
Event.add(helplink, "click", function () {
|
||||||
|
_this.toggle();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
helpspan.innerHTML = this.helpInstrBtnHtml;
|
||||||
|
var helpEl = helpspan.firstChild;
|
||||||
|
Event.add(helpEl, "click", function () {
|
||||||
|
_this.toggle();
|
||||||
|
});
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.helpInstrHtml) {
|
||||||
|
helpdiv.innerHTML = this.helpInstrText;
|
||||||
|
helpdiv.className = this.helpInstrContCssClass;
|
||||||
|
Event.add(helpdiv, "dblclick", function () {
|
||||||
|
_this.toggle();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (this.helpInstrContTgtId) {
|
||||||
|
divContainer.appendChild(helpdiv);
|
||||||
|
}
|
||||||
|
helpdiv.innerHTML = this.helpInstrHtml;
|
||||||
|
if (!this.helpInstrContTgtId) {
|
||||||
|
helpdiv.className = this.helpInstrContCssClass;
|
||||||
|
Event.add(helpdiv, "dblclick", function () {
|
||||||
|
_this.toggle();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
||||||
|
Event.add(helpdiv, "click", function () {
|
||||||
|
_this.toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.helpInstrContEl = helpdiv;
|
||||||
|
this.helpInstrBtnEl = helpspan;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggle: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
if (!this.helpInstrContEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var divDisplay = this.helpInstrContEl.style.display;
|
||||||
|
if (divDisplay === "" || divDisplay === "none") {
|
||||||
|
this.helpInstrContEl.style.display = "block";
|
||||||
|
// TODO: use CSS instead for element positioning
|
||||||
|
var btnLeft = Dom.position(this.helpInstrBtnEl).left;
|
||||||
|
if (!this.helpInstrContTgtId) {
|
||||||
|
this.helpInstrContEl.style.left = (btnLeft - this.helpInstrContEl.clientWidth + 25) + "px";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.helpInstrContEl.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
if (!this.helpInstrBtnEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);
|
||||||
|
this.helpInstrBtnEl = null;
|
||||||
|
if (!this.helpInstrContEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);
|
||||||
|
this.helpInstrContEl = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Help;
|
||||||
|
})();
|
||||||
|
|
||||||
|
exports.Help = Help;
|
||||||
|
});
|
1
src/modules/help.js.map
Normal file
1
src/modules/help.js.map
Normal file
File diff suppressed because one or more lines are too long
82
test/test-help.html
Normal file
82
test/test-help.html
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter help pop-up</title>
|
||||||
|
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||||
|
<link rel="stylesheet" href="../dist/filtergrid.css">
|
||||||
|
<script src="libs/qunit/qunit.js"></script>
|
||||||
|
<script>
|
||||||
|
// Defer Qunit so RequireJS can work its magic and resolve all modules.
|
||||||
|
QUnit.config.autostart = false;
|
||||||
|
QUnit.config.autoload = false;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
<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 data-main="test-help" src="../libs/requirejs/require.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
56
test/test-help.js
Normal file
56
test/test-help.js
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
requirejs(['test-config', '../src/core'], function(config, TableFilter){
|
||||||
|
|
||||||
|
QUnit.start();
|
||||||
|
|
||||||
|
var Help = require('modules/help').Help,
|
||||||
|
types = require('types').Types,
|
||||||
|
dom = require('dom').Dom;
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
help_instructions: true
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var help = tf.Cpt.help;
|
||||||
|
module('Sanity checks');
|
||||||
|
test('Clear button component', function() {
|
||||||
|
deepEqual(help instanceof Help, true, 'Help type');
|
||||||
|
notEqual(help, null, 'Help instanciated');
|
||||||
|
notEqual(help.helpInstrBtnEl, null, 'helpInstrBtnEl property');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('UI elements');
|
||||||
|
test('Help UI elements', function() {
|
||||||
|
var container = help.helpInstrContEl,
|
||||||
|
helpBtn = help.helpInstrBtnEl;
|
||||||
|
deepEqual(container.nodeName, 'DIV', 'Help container');
|
||||||
|
deepEqual(helpBtn.nodeName, 'SPAN', 'Help button');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('Destroy and re-init');
|
||||||
|
test('Remove UI', function() {
|
||||||
|
help.destroy();
|
||||||
|
var container = help.helpInstrContEl,
|
||||||
|
helpBtn = help.helpInstrBtnEl;
|
||||||
|
deepEqual(container, null, 'Help container removed');
|
||||||
|
deepEqual(helpBtn, null, 'Help button removed');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Re-set UI', function() {
|
||||||
|
tf.Cpt.help.destroy();
|
||||||
|
tf.Cpt.help.helpInstrBtnText = '→Help←';
|
||||||
|
tf.Cpt.help.helpInstrText = 'Hello world!';
|
||||||
|
tf.Cpt.help.init();
|
||||||
|
|
||||||
|
var container = help.helpInstrContEl,
|
||||||
|
helpBtn = help.helpInstrBtnEl;
|
||||||
|
notEqual(
|
||||||
|
dom.getText(container).indexOf('Hello world!'),
|
||||||
|
-1,
|
||||||
|
'Help pop-up text'
|
||||||
|
);
|
||||||
|
notEqual(
|
||||||
|
dom.getText(helpBtn).indexOf('→Help←'), -1, 'Help button text');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in a new issue