diff --git a/.gitignore b/.gitignore
index 87ec2e3a..dc9b64f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
# Dependency directory
node_modules
npm-debug.log
+*.js.map
.codio
-.settings
\ No newline at end of file
+.settings
diff --git a/bower.json b/bower.json
index 8286b3c9..3331afb8 100644
--- a/bower.json
+++ b/bower.json
@@ -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",
diff --git a/dist/filtergrid.css b/dist/filtergrid.css
index 74efe624..e703c964 100644
--- a/dist/filtergrid.css
+++ b/dist/filtergrid.css
@@ -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
------------------------------------------------------------------------*/
diff --git a/src-es6/modules/help.js b/src-es6/modules/help.js
new file mode 100644
index 00000000..600c1729
--- /dev/null
+++ b/src-es6/modules/help.js
@@ -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:
<, <=, >, ' +
+ '>=, =, *, !, {, }, ' +
+ '||,&&, [empty], [nonempty], ' +
+ 'rgx:
These operators are described here:
' +
+ 'http://tablefilter.free.fr/#operators
';
+ //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 = '';
+
+ 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;
+ }
+
+}
diff --git a/src/core.js b/src/core.js
index fa52bed8..a16cc161 100644
--- a/src/core.js
+++ b/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:
<, <=, >, ' +
- '>=, =, *, !, {, }, ' +
- '||,&&, [empty], [nonempty], ' +
- 'rgx:
These operators are described here:
' +
- 'http://tablefilter.free.fr/#operators
';
- //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 = '';
+ // /*====================================================
+ // - 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:
<, <=, >, ' +
+ // '>=, =, *, !, {, }, ' +
+ // '||,&&, [empty], [nonempty], ' +
+ // 'rgx:
These operators are described here:
' +
+ // 'http://tablefilter.free.fr/#operators
';
+ // //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 = '';
- 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 :
- // '');
-
- // 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
=====================================================*/
diff --git a/src/index.html b/src/index.html
index d63d0b7c..e80f9444 100644
--- a/src/index.html
+++ b/src/index.html
@@ -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,
diff --git a/src/modules/help.js b/src/modules/help.js
new file mode 100644
index 00000000..725e711a
--- /dev/null
+++ b/src/modules/help.js
@@ -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:
<, <=, >, " + ">=, =, *, !, {, }, " + "||,&&, [empty], [nonempty], " + "rgx:
These operators are described here:
" + "http://tablefilter.free.fr/#operators
";
+ //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 = "";
+
+ 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;
+});
\ No newline at end of file
diff --git a/src/modules/help.js.map b/src/modules/help.js.map
new file mode 100644
index 00000000..a53ad01f
--- /dev/null
+++ b/src/modules/help.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["src-es6/modules/help.js"],"names":[],"mappings":"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","file":"src-es6/modules/help.js","sourcesContent":["import {Dom} from '../dom';\r\nimport {Event} from '../event';\r\n\r\nexport class Help{\r\n\r\n /**\r\n * Help UI component\r\n * @param {Object} tf TableFilter instance\r\n */\r\n constructor(tf){\r\n // Configuration object\r\n var f = tf.fObj || {};\r\n\r\n //id of custom container element for instructions\r\n this.helpInstrTgtId = f.help_instructions_target_id || null;\r\n //id of custom container element for instructions\r\n this.helpInstrContTgtId = f.help_instructions_container_target_id ||\r\n null;\r\n //defines help text\r\n this.helpInstrText = f.help_instructions_text ?\r\n f.help_instructions_text :\r\n 'Use the filters above each column to filter and limit table ' +\r\n 'data. Avanced searches can be performed by using the following ' +\r\n 'operators:
<, <=, >, ' +\r\n '>=, =, *, !, {, }, ' +\r\n '||,&&, [empty], [nonempty], ' +\r\n 'rgx:
These operators are described here:
' +\r\n 'http://tablefilter.free.fr/#operators
';\r\n //defines help innerHtml\r\n this.helpInstrHtml = f.help_instructions_html || null;\r\n //defines reset button text\r\n this.helpInstrBtnText = f.help_instructions_btn_text || '?';\r\n //defines reset button innerHtml\r\n this.helpInstrBtnHtml = f.help_instructions_btn_html || null;\r\n //defines css class for help button\r\n this.helpInstrBtnCssClass = f.help_instructions_btn_css_class ||\r\n 'helpBtn';\r\n //defines css class for help container\r\n this.helpInstrContCssClass = f.help_instructions_container_css_class ||\r\n 'helpCont';\r\n //help button element\r\n this.helpInstrBtnEl = null;\r\n //help content div\r\n this.helpInstrContEl = null;\r\n this.helpInstrDefaultHtml = '';\r\n\r\n this.tf = tf;\r\n }\r\n\r\n init(){\r\n if(this.helpInstrBtnEl){\r\n return;\r\n }\r\n\r\n var tf = this.tf;\r\n\r\n var helpspan = Dom.create('span',['id', tf.prfxHelpSpan+tf.id]);\r\n var helpdiv = Dom.create('div',['id', tf.prfxHelpDiv+tf.id]);\r\n\r\n //help button is added to defined element\r\n if(!this.helpInstrTgtId){\r\n tf.SetTopDiv();\r\n }\r\n var targetEl = !this.helpInstrTgtId ?\r\n tf.rDiv : Dom.id(this.helpInstrTgtId);\r\n targetEl.appendChild(helpspan);\r\n\r\n var divContainer = !this.helpInstrContTgtId ?\r\n helpspan : Dom.id(this.helpInstrContTgtId);\r\n\r\n if(!this.helpInstrBtnHtml){\r\n divContainer.appendChild(helpdiv);\r\n var helplink = Dom.create('a', ['href', 'javascript:void(0);']);\r\n helplink.className = this.helpInstrBtnCssClass;\r\n helplink.appendChild(Dom.text(this.helpInstrBtnText));\r\n helpspan.appendChild(helplink);\r\n Event.add(helplink, 'click', () => { this.toggle(); });\r\n } else {\r\n helpspan.innerHTML = this.helpInstrBtnHtml;\r\n var helpEl = helpspan.firstChild;\r\n Event.add(helpEl, 'click', () => { this.toggle(); });\r\n divContainer.appendChild(helpdiv);\r\n }\r\n\r\n if(!this.helpInstrHtml){\r\n helpdiv.innerHTML = this.helpInstrText;\r\n helpdiv.className = this.helpInstrContCssClass;\r\n Event.add(helpdiv, 'dblclick', () => { this.toggle(); });\r\n } else {\r\n if(this.helpInstrContTgtId){\r\n divContainer.appendChild(helpdiv);\r\n }\r\n helpdiv.innerHTML = this.helpInstrHtml;\r\n if(!this.helpInstrContTgtId){\r\n helpdiv.className = this.helpInstrContCssClass;\r\n Event.add(helpdiv, 'dblclick', () => { this.toggle(); });\r\n }\r\n }\r\n helpdiv.innerHTML += this.helpInstrDefaultHtml;\r\n Event.add(helpdiv, 'click', () => { this.toggle(); });\r\n\r\n this.helpInstrContEl = helpdiv;\r\n this.helpInstrBtnEl = helpspan;\r\n }\r\n\r\n /**\r\n * Toggle help pop-up\r\n */\r\n toggle(){\r\n if(!this.helpInstrContEl){\r\n return;\r\n }\r\n var divDisplay = this.helpInstrContEl.style.display;\r\n if(divDisplay==='' || divDisplay==='none'){\r\n this.helpInstrContEl.style.display = 'block';\r\n // TODO: use CSS instead for element positioning\r\n var btnLeft = Dom.position(this.helpInstrBtnEl).left;\r\n if(!this.helpInstrContTgtId){\r\n this.helpInstrContEl.style.left =\r\n (btnLeft - this.helpInstrContEl.clientWidth + 25) + 'px';\r\n }\r\n } else {\r\n this.helpInstrContEl.style.display = 'none';\r\n }\r\n }\r\n\r\n /**\r\n * Remove help UI\r\n */\r\n destroy(){\r\n if(!this.helpInstrBtnEl){\r\n return;\r\n }\r\n this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);\r\n this.helpInstrBtnEl = null;\r\n if(!this.helpInstrContEl){\r\n return;\r\n }\r\n this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);\r\n this.helpInstrContEl = null;\r\n }\r\n\r\n}\r\n"]}
\ No newline at end of file
diff --git a/test/test-help.html b/test/test-help.html
new file mode 100644
index 00000000..443e4e13
--- /dev/null
+++ b/test/test-help.html
@@ -0,0 +1,82 @@
+
+
+
+
+ TableFilter help pop-up
+
+
+
+
+
+
+
+
+
+ From |
+ Destination |
+ Road Distance (km) |
+ By Air (hrs) |
+ By Rail (hrs) |
+
+
+ Sydney |
+ Adelaide |
+ 1412 |
+ 1.4 |
+ 25.3 |
+
+
+ Sydney |
+ Brisbane |
+ 982 |
+ 1.5 |
+ 16 |
+
+
+ Sydney |
+ Canberra |
+ 286 |
+ .6 |
+ 4.3 |
+
+
+ Sydney |
+ Melbourne |
+ 872 |
+ 1.1 |
+ 10.5 |
+
+
+ Adelaide |
+ Perth |
+ 2781 |
+ 3.1 |
+ 38 |
+
+
+ Adelaide |
+ Alice Springs |
+ 1533 |
+ 2 |
+ 20.25 |
+
+
+ Adelaide |
+ Brisbane |
+ 2045 |
+ 2.15 |
+ 40 |
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/test-help.js b/test/test-help.js
new file mode 100644
index 00000000..e80ead6f
--- /dev/null
+++ b/test/test-help.js
@@ -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');
+ });
+
+});