import {Feature} from '../feature';
import {createElm, createText, id, removeElm} from '../dom';
import Event from '../event';
import {NONE} from '../const';
const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' +
'4.-Filter-operators';
const WEBSITE_URL = 'http://koalyptus.github.io/TableFilter/';
export class Help extends Feature{
/**
* Help UI component
* @param {Object} tf TableFilter instance
*/
constructor(tf){
super(tf, 'help');
var f = this.config;
//id of custom container element for instructions
this.tgtId = f.help_instructions_target_id || null;
//id of custom container element for instructions
this.contTgtId = f.help_instructions_container_target_id ||
null;
//defines help text
this.instrText = f.help_instructions_text ?
f.help_instructions_text :
'Use the filters above each column to filter and limit table ' +
'data. Advanced searches can be performed by using the following ' +
'operators:
<, <=, >, ' +
'>=, =, *, !, {, }, ' +
'||,&&, [empty], [nonempty], ' +
'rgx:
' +
'Learn more
';
//defines help innerHtml
this.instrHtml = f.help_instructions_html || null;
//defines reset button text
this.btnText = f.help_instructions_btn_text || '?';
//defines reset button innerHtml
this.btnHtml = f.help_instructions_btn_html || null;
//defines css class for help button
this.btnCssClass = f.help_instructions_btn_css_class || 'helpBtn';
//defines css class for help container
this.contCssClass = f.help_instructions_container_css_class ||
'helpCont';
//help button element
this.btn = null;
//help content div
this.cont = null;
this.defaultHtml = '';
//id prefix for help elements
this.prfxHelpSpan = 'helpSpan_';
//id prefix for help elements
this.prfxHelpDiv = 'helpDiv_';
this.emitter.on(['init-help'], ()=> this.init());
}
init(){
if(this.initialized){
return;
}
var tf = this.tf;
var helpspan = createElm('span', ['id', this.prfxHelpSpan+tf.id]);
var helpdiv = createElm('div', ['id', this.prfxHelpDiv+tf.id]);
//help button is added to defined element
if(!this.tgtId){
tf.setToolbar();
}
var targetEl = !this.tgtId ? tf.rDiv : id(this.tgtId);
targetEl.appendChild(helpspan);
var divContainer = !this.contTgtId ? helpspan : id(this.contTgtId);
if(!this.btnHtml){
divContainer.appendChild(helpdiv);
var helplink = createElm('a', ['href', 'javascript:void(0);']);
helplink.className = this.btnCssClass;
helplink.appendChild(createText(this.btnText));
helpspan.appendChild(helplink);
Event.add(helplink, 'click', () => this.toggle());
} else {
helpspan.innerHTML = this.btnHtml;
var helpEl = helpspan.firstChild;
Event.add(helpEl, 'click', () => this.toggle());
divContainer.appendChild(helpdiv);
}
if(!this.instrHtml){
helpdiv.innerHTML = this.instrText;
helpdiv.className = this.contCssClass;
Event.add(helpdiv, 'dblclick', () => this.toggle());
} else {
if(this.contTgtId){
divContainer.appendChild(helpdiv);
}
helpdiv.innerHTML = this.instrHtml;
if(!this.contTgtId){
helpdiv.className = this.contCssClass;
Event.add(helpdiv, 'dblclick', () => this.toggle());
}
}
helpdiv.innerHTML += this.defaultHtml;
Event.add(helpdiv, 'click', () => this.toggle());
this.cont = helpdiv;
this.btn = helpspan;
this.initialized = true;
}
/**
* Toggle help pop-up
*/
toggle(){
// check only if explicitily set to false as in this case undefined
// signifies the help feature is enabled by default
if(this.enabled === false){
return;
}
var divDisplay = this.cont.style.display;
if(divDisplay === '' || divDisplay === NONE){
this.cont.style.display = 'inline';
} else {
this.cont.style.display = NONE;
}
}
/**
* Remove help UI
*/
destroy(){
if(!this.initialized){
return;
}
removeElm(this.btn);
this.btn = null;
if(!this.cont){
return;
}
removeElm(this.cont);
this.cont = null;
this.initialized = false;
}
}