deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-02 06:43:08 +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
node_modules
npm-debug.log
*.js.map
.codio
.settings
.settings

3
bower.json
View file

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

@ -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
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
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>&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. '+ this.version +'</h4>' +
'<a href="http://tablefilter.free.fr" target="_blank">' +
'http://tablefilter.free.fr</a><br/>' +
'<span>&copy;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>&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. '+ this.version +'</h4>' +
// '<a href="http://tablefilter.free.fr" target="_blank">' +
// 'http://tablefilter.free.fr</a><br/>' +
// '<span>&copy;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
=====================================================*/

2
src/index.html
View file

@ -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
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');
});
});