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
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,5 +1,6 @@
|
|||
# Dependency directory
|
||||
node_modules
|
||||
npm-debug.log
|
||||
*.js.map
|
||||
.codio
|
||||
.settings
|
|
@ -7,7 +7,7 @@
|
|||
],
|
||||
"description": "Filter HTML tables data easily",
|
||||
"main": [
|
||||
"dist/tablefilter_all.js",
|
||||
"dist/tablefilter.js",
|
||||
"dist/filtergrid.css"
|
||||
],
|
||||
"moduleType": [
|
||||
|
@ -17,6 +17,7 @@
|
|||
"keywords": [
|
||||
"html",
|
||||
"table",
|
||||
"filtering",
|
||||
"filter"
|
||||
],
|
||||
"license": "MIT",
|
||||
|
|
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
@ -1,6 +1,6 @@
|
|||
/*------------------------------------------------------------------------
|
||||
- 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
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
|
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
|
||||
this.toolBarTgtId = f.toolbar_target_id || null;
|
||||
//enables/disables help div
|
||||
this.helpInstructions = f.help_instructions || null;
|
||||
this.helpInstructions = f.help_instructions || false;
|
||||
//popup filters
|
||||
this.popUpFilters = f.popup_filters===true ? true : false;
|
||||
//active columns color
|
||||
|
@ -621,7 +621,8 @@ function TableFilter(id) {
|
|||
checkList: null,
|
||||
dropdown: null,
|
||||
popupFilter: null,
|
||||
clearButton: null
|
||||
clearButton: null,
|
||||
help: null
|
||||
};
|
||||
|
||||
/*** TF events ***/
|
||||
|
@ -838,9 +839,9 @@ function TableFilter(id) {
|
|||
/*====================================================
|
||||
- Help button onclick event
|
||||
=====================================================*/
|
||||
_OnHelpBtnClick: function() {
|
||||
o._ToggleHelp();
|
||||
},
|
||||
// _OnHelpBtnClick: function() {
|
||||
// o._ToggleHelp();
|
||||
// },
|
||||
_Paging: { //used by sort adapter
|
||||
nextEvt: null,
|
||||
prevEvt: null,
|
||||
|
@ -1154,13 +1155,15 @@ TableFilter.prototype = {
|
|||
this.Cpt.paging.init();
|
||||
}
|
||||
if(this.btnReset){
|
||||
// this.SetResetBtn();
|
||||
var ClearButton = require('modules/clearButton').ClearButton;
|
||||
this.Cpt.clearButton = new ClearButton(this);
|
||||
this.Cpt.clearButton.init();
|
||||
}
|
||||
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){
|
||||
this.SetColWidths();
|
||||
|
@ -1460,8 +1463,9 @@ TableFilter.prototype = {
|
|||
// this.RemoveResetBtn();
|
||||
this.Cpt.clearButton.destroy();
|
||||
}
|
||||
if(this.helpInstructions || !this.helpInstructions){
|
||||
this.RemoveHelpInstructions();
|
||||
if(this.helpInstructions /*|| !this.helpInstructions*/){
|
||||
// this.RemoveHelpInstructions();
|
||||
this.Cpt.help.destroy();
|
||||
}
|
||||
if(this.isExternalFlt && !this.popUpFilters){
|
||||
this.RemoveExternalFlts();
|
||||
|
@ -1574,8 +1578,14 @@ TableFilter.prototype = {
|
|||
infdiv.appendChild(mdiv);
|
||||
this.mDiv = dom.id(this.prfxMDiv+this.id);
|
||||
|
||||
// Enable help instructions by default is topbar is generated
|
||||
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); }
|
||||
},
|
||||
|
||||
/*====================================================
|
||||
- Generates help instructions
|
||||
=====================================================*/
|
||||
SetHelpInstructions: function(){
|
||||
if(this.helpInstrBtnEl){
|
||||
return;
|
||||
}
|
||||
var f = this.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. '+ this.version +'</h4>' +
|
||||
'<a href="http://tablefilter.free.fr" target="_blank">' +
|
||||
'http://tablefilter.free.fr</a><br/>' +
|
||||
'<span>©2009-'+ this.year +' Max Guglielmi.</span>' +
|
||||
'<div align="center" style="margin-top:8px;">' +
|
||||
'<a href="javascript:;" onclick="window[\'tf_'+ this.id +
|
||||
'\']._ToggleHelp();">Close</a></div></div>';
|
||||
// /*====================================================
|
||||
// - Generates help instructions
|
||||
// =====================================================*/
|
||||
// SetHelpInstructions: function(){
|
||||
// if(this.helpInstrBtnEl){
|
||||
// return;
|
||||
// }
|
||||
// var f = this.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. '+ this.version +'</h4>' +
|
||||
// '<a href="http://tablefilter.free.fr" target="_blank">' +
|
||||
// 'http://tablefilter.free.fr</a><br/>' +
|
||||
// '<span>©2009-'+ this.year +' Max Guglielmi.</span>' +
|
||||
// '<div align="center" style="margin-top:8px;">' +
|
||||
// '<a href="javascript:;" onclick="window[\'tf_'+ this.id +
|
||||
// '\']._ToggleHelp();">Close</a></div></div>';
|
||||
|
||||
var helpspan = dom.create('span',['id',this.prfxHelpSpan+this.id]);
|
||||
var helpdiv = dom.create('div',['id',this.prfxHelpDiv+this.id]);
|
||||
// var helpspan = dom.create('span',['id',this.prfxHelpSpan+this.id]);
|
||||
// var helpdiv = dom.create('div',['id',this.prfxHelpDiv+this.id]);
|
||||
|
||||
//help button is added to defined element
|
||||
if(!this.helpInstrTgtId){
|
||||
this.SetTopDiv();
|
||||
}
|
||||
var targetEl = !this.helpInstrTgtId ?
|
||||
this.rDiv : dom.id(this.helpInstrTgtId);
|
||||
targetEl.appendChild(helpspan);
|
||||
// //help button is added to defined element
|
||||
// if(!this.helpInstrTgtId){
|
||||
// this.SetTopDiv();
|
||||
// }
|
||||
// var targetEl = !this.helpInstrTgtId ?
|
||||
// this.rDiv : dom.id(this.helpInstrTgtId);
|
||||
// targetEl.appendChild(helpspan);
|
||||
|
||||
var divContainer = !this.helpInstrContTgtId ?
|
||||
helpspan : dom.id( this.helpInstrContTgtId );
|
||||
// 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);
|
||||
helplink.onclick = this.Evt._OnHelpBtnClick;
|
||||
} else {
|
||||
helpspan.innerHTML = this.helpInstrBtnHtml;
|
||||
var helpEl = helpspan.firstChild;
|
||||
helpEl.onclick = this.Evt._OnHelpBtnClick;
|
||||
divContainer.appendChild(helpdiv);
|
||||
}
|
||||
// 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);
|
||||
// helplink.onclick = this.Evt._OnHelpBtnClick;
|
||||
// } else {
|
||||
// helpspan.innerHTML = this.helpInstrBtnHtml;
|
||||
// var helpEl = helpspan.firstChild;
|
||||
// helpEl.onclick = this.Evt._OnHelpBtnClick;
|
||||
// divContainer.appendChild(helpdiv);
|
||||
// }
|
||||
|
||||
if(!this.helpInstrHtml){
|
||||
helpdiv.innerHTML = this.helpInstrText;
|
||||
helpdiv.className = this.helpInstrContCssClass;
|
||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||
} else {
|
||||
if(this.helpInstrContTgtId){
|
||||
divContainer.appendChild(helpdiv);
|
||||
}
|
||||
helpdiv.innerHTML = this.helpInstrHtml;
|
||||
if(!this.helpInstrContTgtId){
|
||||
helpdiv.className = this.helpInstrContCssClass;
|
||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||
}
|
||||
}
|
||||
helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
||||
this.helpInstrContEl = helpdiv;
|
||||
this.helpInstrBtnEl = helpspan;
|
||||
},
|
||||
// if(!this.helpInstrHtml){
|
||||
// helpdiv.innerHTML = this.helpInstrText;
|
||||
// helpdiv.className = this.helpInstrContCssClass;
|
||||
// helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||
// } else {
|
||||
// if(this.helpInstrContTgtId){
|
||||
// divContainer.appendChild(helpdiv);
|
||||
// }
|
||||
// helpdiv.innerHTML = this.helpInstrHtml;
|
||||
// if(!this.helpInstrContTgtId){
|
||||
// helpdiv.className = this.helpInstrContCssClass;
|
||||
// helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
||||
// }
|
||||
// }
|
||||
// helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
||||
// this.helpInstrContEl = helpdiv;
|
||||
// this.helpInstrBtnEl = helpspan;
|
||||
// },
|
||||
|
||||
/*====================================================
|
||||
- Removes help instructions
|
||||
=====================================================*/
|
||||
RemoveHelpInstructions: 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;
|
||||
},
|
||||
// /*====================================================
|
||||
// - Removes help instructions
|
||||
// =====================================================*/
|
||||
// RemoveHelpInstructions: 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;
|
||||
// },
|
||||
|
||||
/*====================================================
|
||||
- Toggles help div
|
||||
=====================================================*/
|
||||
_ToggleHelp: function(){
|
||||
if(!this.helpInstrContEl){
|
||||
return;
|
||||
}
|
||||
var divDisplay = this.helpInstrContEl.style.display;
|
||||
if(divDisplay==='' || divDisplay==='none'){
|
||||
this.helpInstrContEl.style.display = 'block';
|
||||
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';
|
||||
}
|
||||
},
|
||||
// /*====================================================
|
||||
// - Toggles help div
|
||||
// =====================================================*/
|
||||
// _ToggleHelp: function(){
|
||||
// if(!this.helpInstrContEl){
|
||||
// return;
|
||||
// }
|
||||
// var divDisplay = this.helpInstrContEl.style.display;
|
||||
// if(divDisplay==='' || divDisplay==='none'){
|
||||
// this.helpInstrContEl.style.display = 'block';
|
||||
// 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';
|
||||
// }
|
||||
// },
|
||||
|
||||
/*====================================================
|
||||
- IE bug: it seems there is no way to make
|
||||
|
@ -2212,67 +2222,6 @@ TableFilter.prototype = {
|
|||
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
|
||||
=====================================================*/
|
||||
|
|
|
@ -105,7 +105,7 @@
|
|||
// remember_page_length: true,
|
||||
fill_slc_on_demand: false,
|
||||
refresh_filters: false,
|
||||
popup_filters: true,
|
||||
popup_filters: false,
|
||||
alternate_rows: true,
|
||||
highlight_keywords: true,
|
||||
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