2015-05-30 14:23:33 +02:00
|
|
|
import Dom from '../dom';
|
|
|
|
import Event from '../event';
|
2015-02-20 05:03:57 +01:00
|
|
|
|
|
|
|
export class Help{
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Help UI component
|
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
*/
|
|
|
|
constructor(tf){
|
|
|
|
// Configuration object
|
2015-02-21 04:39:09 +01:00
|
|
|
var f = tf.config();
|
2015-02-20 05:03:57 +01:00
|
|
|
|
|
|
|
//id of custom container element for instructions
|
2015-06-08 12:21:50 +02:00
|
|
|
this.tgtId = f.help_instructions_target_id || null;
|
2015-02-20 05:03:57 +01:00
|
|
|
//id of custom container element for instructions
|
2015-06-08 12:21:50 +02:00
|
|
|
this.contTgtId = f.help_instructions_container_target_id ||
|
2015-02-20 05:03:57 +01:00
|
|
|
null;
|
|
|
|
//defines help text
|
2015-06-08 12:21:50 +02:00
|
|
|
this.instrText = f.help_instructions_text ?
|
2015-02-20 05:03:57 +01:00
|
|
|
f.help_instructions_text :
|
|
|
|
'Use the filters above each column to filter and limit table ' +
|
2015-08-23 13:27:32 +02:00
|
|
|
'data. Advanced searches can be performed by using the following ' +
|
2015-02-20 05:03:57 +01:00
|
|
|
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
|
|
|
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
|
|
|
'<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
2015-07-11 10:33:01 +02:00
|
|
|
'<b>rgx:</b><br/>' +
|
2015-07-01 09:27:23 +02:00
|
|
|
'<a href="https://github.com/koalyptus/TableFilter/wiki/' +
|
2015-09-05 14:07:07 +02:00
|
|
|
'4.-Filter-operators" target="_blank">Learn more</a><hr/>';
|
2015-02-20 05:03:57 +01:00
|
|
|
//defines help innerHtml
|
2015-06-08 12:21:50 +02:00
|
|
|
this.instrHtml = f.help_instructions_html || null;
|
2015-02-20 05:03:57 +01:00
|
|
|
//defines reset button text
|
2015-06-08 12:21:50 +02:00
|
|
|
this.btnText = f.help_instructions_btn_text || '?';
|
2015-02-20 05:03:57 +01:00
|
|
|
//defines reset button innerHtml
|
2015-06-08 12:21:50 +02:00
|
|
|
this.btnHtml = f.help_instructions_btn_html || null;
|
2015-02-20 05:03:57 +01:00
|
|
|
//defines css class for help button
|
2015-06-08 12:21:50 +02:00
|
|
|
this.btnCssClass = f.help_instructions_btn_css_class || 'helpBtn';
|
2015-02-20 05:03:57 +01:00
|
|
|
//defines css class for help container
|
2015-06-08 12:21:50 +02:00
|
|
|
this.contCssClass = f.help_instructions_container_css_class ||
|
2015-02-20 05:03:57 +01:00
|
|
|
'helpCont';
|
|
|
|
//help button element
|
2015-06-08 12:21:50 +02:00
|
|
|
this.btn = null;
|
2015-02-20 05:03:57 +01:00
|
|
|
//help content div
|
2015-06-08 12:21:50 +02:00
|
|
|
this.cont = null;
|
|
|
|
this.defaultHtml = '<div class="helpFooter"><h4>TableFilter ' +
|
2015-09-02 08:53:18 +02:00
|
|
|
'v'+ tf.version +'</h4>' +
|
2015-07-01 09:27:23 +02:00
|
|
|
'<a href="https://github.com/koalyptus/TableFilter/" ' +
|
|
|
|
' target="_blank">https://github.com/koalyptus/TableFilter/</a>' +
|
2015-09-04 13:57:27 +02:00
|
|
|
'<br/><span>©2015-'+ tf.year +' {AUTHOR}</span>' +
|
2015-02-20 05:03:57 +01:00
|
|
|
'<div align="center" style="margin-top:8px;">' +
|
2015-07-04 10:49:30 +02:00
|
|
|
'<a href="javascript:void(0);" class="close">Close</a></div></div>';
|
2015-02-20 05:03:57 +01:00
|
|
|
|
2015-04-06 11:53:01 +02:00
|
|
|
//id prefix for help elements
|
|
|
|
this.prfxHelpSpan = 'helpSpan_';
|
|
|
|
//id prefix for help elements
|
|
|
|
this.prfxHelpDiv = 'helpDiv_';
|
|
|
|
|
2015-02-20 05:03:57 +01:00
|
|
|
this.tf = tf;
|
|
|
|
}
|
|
|
|
|
|
|
|
init(){
|
2015-06-08 12:21:50 +02:00
|
|
|
if(this.btn){
|
2015-02-20 05:03:57 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var tf = this.tf;
|
|
|
|
|
2015-04-06 11:53:01 +02:00
|
|
|
var helpspan = Dom.create('span',['id', this.prfxHelpSpan+tf.id]);
|
|
|
|
var helpdiv = Dom.create('div',['id', this.prfxHelpDiv+tf.id]);
|
2015-02-20 05:03:57 +01:00
|
|
|
|
|
|
|
//help button is added to defined element
|
2015-06-08 12:21:50 +02:00
|
|
|
if(!this.tgtId){
|
2015-02-21 04:39:09 +01:00
|
|
|
tf.setToolbar();
|
2015-02-20 05:03:57 +01:00
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
var targetEl = !this.tgtId ?
|
|
|
|
tf.rDiv : Dom.id(this.tgtId);
|
2015-02-20 05:03:57 +01:00
|
|
|
targetEl.appendChild(helpspan);
|
|
|
|
|
2015-06-08 12:21:50 +02:00
|
|
|
var divContainer = !this.contTgtId ?
|
|
|
|
helpspan : Dom.id(this.contTgtId);
|
2015-02-20 05:03:57 +01:00
|
|
|
|
2015-06-08 12:21:50 +02:00
|
|
|
if(!this.btnHtml){
|
2015-02-20 05:03:57 +01:00
|
|
|
divContainer.appendChild(helpdiv);
|
|
|
|
var helplink = Dom.create('a', ['href', 'javascript:void(0);']);
|
2015-06-08 12:21:50 +02:00
|
|
|
helplink.className = this.btnCssClass;
|
|
|
|
helplink.appendChild(Dom.text(this.btnText));
|
2015-02-20 05:03:57 +01:00
|
|
|
helpspan.appendChild(helplink);
|
|
|
|
Event.add(helplink, 'click', () => { this.toggle(); });
|
|
|
|
} else {
|
2015-06-08 12:21:50 +02:00
|
|
|
helpspan.innerHTML = this.btnHtml;
|
2015-02-20 05:03:57 +01:00
|
|
|
var helpEl = helpspan.firstChild;
|
|
|
|
Event.add(helpEl, 'click', () => { this.toggle(); });
|
|
|
|
divContainer.appendChild(helpdiv);
|
|
|
|
}
|
|
|
|
|
2015-06-08 12:21:50 +02:00
|
|
|
if(!this.instrHtml){
|
|
|
|
helpdiv.innerHTML = this.instrText;
|
|
|
|
helpdiv.className = this.contCssClass;
|
2015-02-20 05:03:57 +01:00
|
|
|
Event.add(helpdiv, 'dblclick', () => { this.toggle(); });
|
|
|
|
} else {
|
2015-06-08 12:21:50 +02:00
|
|
|
if(this.contTgtId){
|
2015-02-20 05:03:57 +01:00
|
|
|
divContainer.appendChild(helpdiv);
|
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
helpdiv.innerHTML = this.instrHtml;
|
|
|
|
if(!this.contTgtId){
|
|
|
|
helpdiv.className = this.contCssClass;
|
2015-02-20 05:03:57 +01:00
|
|
|
Event.add(helpdiv, 'dblclick', () => { this.toggle(); });
|
|
|
|
}
|
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
helpdiv.innerHTML += this.defaultHtml;
|
2015-02-20 05:03:57 +01:00
|
|
|
Event.add(helpdiv, 'click', () => { this.toggle(); });
|
|
|
|
|
2015-06-08 12:21:50 +02:00
|
|
|
this.cont = helpdiv;
|
|
|
|
this.btn = helpspan;
|
2015-02-20 05:03:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Toggle help pop-up
|
|
|
|
*/
|
|
|
|
toggle(){
|
2015-06-08 12:21:50 +02:00
|
|
|
if(!this.cont){
|
2015-02-20 05:03:57 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
var divDisplay = this.cont.style.display;
|
2015-07-04 14:08:58 +02:00
|
|
|
if(divDisplay === '' || divDisplay === 'none'){
|
2015-07-04 10:49:30 +02:00
|
|
|
this.cont.style.display = 'inline';
|
2015-02-20 05:03:57 +01:00
|
|
|
} else {
|
2015-06-08 12:21:50 +02:00
|
|
|
this.cont.style.display = 'none';
|
2015-02-20 05:03:57 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove help UI
|
|
|
|
*/
|
|
|
|
destroy(){
|
2015-06-08 12:21:50 +02:00
|
|
|
if(!this.btn){
|
2015-02-20 05:03:57 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
this.btn.parentNode.removeChild(this.btn);
|
|
|
|
this.btn = null;
|
|
|
|
if(!this.cont){
|
2015-02-20 05:03:57 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-06-08 12:21:50 +02:00
|
|
|
this.cont.parentNode.removeChild(this.cont);
|
|
|
|
this.cont = null;
|
2015-02-20 05:03:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|