From bedae0a6dea97802a204e42aff479d6308cea4a6 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Fri, 20 Feb 2015 15:03:57 +1100 Subject: [PATCH] Added tests for Help component --- .gitignore | 3 +- bower.json | 3 +- dist/filtergrid.css | 2 +- src-es6/modules/help.js | 150 ++++++++++++++++++ src/core.js | 339 +++++++++++++++++----------------------- src/index.html | 2 +- src/modules/help.js | 149 ++++++++++++++++++ src/modules/help.js.map | 1 + test/test-help.html | 82 ++++++++++ test/test-help.js | 56 +++++++ 10 files changed, 588 insertions(+), 199 deletions(-) create mode 100644 src-es6/modules/help.js create mode 100644 src/modules/help.js create mode 100644 src/modules/help.js.map create mode 100644 test/test-help.html create mode 100644 test/test-help.js 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 = '

HTML Table ' + + 'Filter Generator v. '+ tf.version +'

' + + '' + + 'http://tablefilter.free.fr
' + + '©2009-'+ tf.year +' Max Guglielmi.' + + '
' + + 'Close
'; + + 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 = '

HTML Table ' + - 'Filter Generator v. '+ this.version +'

' + - '' + - 'http://tablefilter.free.fr
' + - '©2009-'+ this.year +' Max Guglielmi.' + - '
' + - 'Close
'; + // /*==================================================== + // - 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 = '

HTML Table ' + + // 'Filter Generator v. '+ this.version +'

' + + // '' + + // 'http://tablefilter.free.fr
' + + // '©2009-'+ this.year +' Max Guglielmi.' + + // '
' + + // 'Close
'; - 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 = "

HTML Table " + "Filter Generator v. " + tf.version + "

" + "" + "http://tablefilter.free.fr
" + "©2009-" + tf.year + " Max Guglielmi." + "
" + "Close
"; + + 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 = '

HTML Table ' +\r\n 'Filter Generator v. '+ tf.version +'

' +\r\n '' +\r\n 'http://tablefilter.free.fr
' +\r\n '©2009-'+ tf.year +' Max Guglielmi.' +\r\n '
' +\r\n 'Close
';\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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+ + + +
+
+ + \ 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'); + }); + +});