deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-18 06:16:39 +02:00
Code Issues Releases Wiki Activity

Added tests for Help component

Browse source
This commit is contained in:
Max Guglielmi 2015-02-20 15:03:57 +11:00
parent 79468f5185
commit bedae0a6de
10 changed files with 588 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -1,5 +1,6 @@
# Dependency directory # Dependency directory
node_modules node_modules
npm-debug.log npm-debug.log
*.js.map
.codio .codio
.settings .settings

3
bower.json
View file

@ -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
View file

@ -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
View 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>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, ' +
'<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
'<b>||</b>,<b>&amp;&amp;</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>&copy;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
View file

@ -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>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, ' + // 'operators: <br /><b>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, ' +
'<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' + // '<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
'<b>||</b>,<b>&amp;&amp;</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' + // '<b>||</b>,<b>&amp;&amp;</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>&copy;2009-'+ this.year +' Max Guglielmi.</span>' + // '<span>&copy;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
=====================================================*/ =====================================================*/

2
src/index.html
View file

@ -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
View 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>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, " + "<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, " + "<b>||</b>,<b>&amp;&amp;</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>&copy;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
View file

File diff suppressed because one or more lines are too long

82
test/test-help.html Normal file
View 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
View 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');
});
});