src/extensions/filtersVisibility/filtersVisibility.js

import Dom from '../../dom';
import Types from '../../types';
import Event from '../../event';

export default class FiltersVisibility{

    /**
     * Filters Row Visibility extension
     * @param {Object} tf TableFilter instance
     * @param {Object} f Config
     */
    constructor(tf, f){

        this.initialized = false;
        this.name = f.name;
        this.desc = f.description || 'Filters row visibility manager';

        // Path and image filenames
        this.stylesheet = f.stylesheet || 'filtersVisibility.css';
        this.icnExpand = f.expand_icon_name || 'icn_exp.png';
        this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';

        //expand/collapse filters span element
        this.contEl = null;
        //expand/collapse filters btn element
        this.btnEl = null;

        this.icnExpandHtml = '<img src="'+ tf.themesPath + this.icnExpand +
            '" alt="Expand filters" >';
        this.icnCollapseHtml = '<img src="'+ tf.themesPath + this.icnCollapse +
            '" alt="Collapse filters" >';
        this.defaultText = 'Toggle filters';

        //id of container element
        this.targetId =  f.target_id || null;
        //enables/disables expand/collapse icon
        this.enableIcon = f.enable_icon===false ? false : true;
        this.btnText = f.btn_text || '';

        //defines expand/collapse filters text
        this.collapseBtnHtml = this.enableIcon ?
            this.icnCollapseHtml + this.btnText :
            this.btnText || this.defaultText;
        this.expandBtnHtml =  this.enableIcon ?
            this.icnExpandHtml + this.btnText :
            this.btnText || this.defaultText;

        //defines expand/collapse filters button innerHtml
        this.btnHtml = f.btn_html || null;
        //defines css class for expand/collapse filters button
        this.btnCssClass = f.btn_css_class || 'btnExpClpFlt';
        //defines css class span containing expand/collapse filters
        this.contCssClass = f.cont_css_class || 'expClpFlt';
        this.filtersRowIndex = !Types.isUndef(f.filters_row_index) ?
                f.filters_row_index : tf.getFiltersRowIndex();

        this.visibleAtStart = !Types.isUndef(f.visible_at_start) ?
            Boolean(f.visible_at_start) : true;

        // Prefix
        this.prfx = 'fltsVis_';

        //callback before filters row is shown
        this.onBeforeShow = Types.isFn(f.on_before_show) ?
            f.on_before_show : null;
        //callback after filters row is shown
        this.onAfterShow = Types.isFn(f.on_after_show) ?
            f.on_after_show : null;
        //callback before filters row is hidden
        this.onBeforeHide = Types.isFn(f.on_before_hide) ?
            f.on_before_hide : null;
        //callback after filters row is hidden
        this.onAfterHide = Types.isFn(f.on_after_hide) ? f.on_after_hide : null;

        //Loads extension stylesheet
        tf.import(f.name+'Style', tf.stylePath + this.stylesheet, null, 'link');

        this.tf = tf;
    }

    /**
     * Initialise extension
     */
    init(){
        if(this.initialized){
            return;
        }

        this.buildUI();
        this.initialized = true;
    }

    /**
     * Build UI elements
     */
    buildUI(){
        let tf = this.tf;
        let span = Dom.create('span',['id', this.prfx+tf.id]);
        span.className = this.contCssClass;

        //Container element (rdiv or custom element)
        if(!this.targetId){
            tf.setToolbar();
        }
        let targetEl = !this.targetId ? tf.rDiv : Dom.id(this.targetId);

        if(!this.targetId){
            let firstChild = targetEl.firstChild;
            firstChild.parentNode.insertBefore(span, firstChild);
        } else {
            targetEl.appendChild(span);
        }

        let btn;
        if(!this.btnHtml){
            btn = Dom.create('a', ['href', 'javascript:void(0);']);
            btn.className = this.btnCssClass;
            btn.title = this.btnText || this.defaultText;
            btn.innerHTML = this.collapseBtnHtml;
            span.appendChild(btn);
            Event.add(btn, 'click', ()=> this.toggle());
        } else { //Custom html
            span.innerHTML = this.btnHtml;
            btn = span.firstChild;
            Event.add(btn, 'click', ()=> this.toggle());
        }

        this.contEl = span;
        this.btnEl = btn;

        if(!this.visibleAtStart){
            this.toggle();
        }
    }

    /**
     * Toggle filters visibility
     */
    toggle(){
        let tf = this.tf;
        let tbl = tf.gridLayout? tf.feature('gridLayout').headTbl : tf.tbl;
        let fltRow = tbl.rows[this.filtersRowIndex];
        let fltRowDisplay = fltRow.style.display;

        if(this.onBeforeShow && fltRowDisplay !== ''){
            this.onBeforeShow.call(this, this);
        }
        if(this.onBeforeHide && fltRowDisplay === ''){
            this.onBeforeHide.call(null, this);
        }

        fltRow.style.display = fltRowDisplay==='' ? 'none' : '';
        if(this.enableIcon && !this.btnHtml){
            this.btnEl.innerHTML = fltRowDisplay === '' ?
                this.expandBtnHtml : this.collapseBtnHtml;
        }

        if(this.onAfterShow && fltRowDisplay !== ''){
            this.onAfterShow.call(null, this);
        }
        if(this.onAfterHide && fltRowDisplay === ''){
            this.onAfterHide.call(null, this);
        }
    }

    /**
     * Destroy the UI
     */
    destroy(){
        if(!this.btnEl && !this.contEl){
            return;
        }

        this.btnEl.innerHTML = '';
        this.btnEl.parentNode.removeChild(this.btnEl);
        this.btnEl = null;

        this.contEl.innerHTML = '';
        this.contEl.parentNode.removeChild(this.contEl);
        this.contEl = null;
        this.initialized = false;
    }

}