src/modules/loader.js

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

var global = window;

export class Loader{

    /**
     * Loading message/spinner
     * @param {Object} tf TableFilter instance
     */
    constructor(tf){

        // TableFilter configuration
        var f = tf.config();
        //id of container element
        this.loaderTgtId = f.loader_target_id || null;
        //div containing loader
        this.loaderDiv = null;
        //defines loader text
        this.loaderText = f.loader_text || 'Loading...';
        //defines loader innerHtml
        this.loaderHtml = f.loader_html || null;
        //defines css class for loader div
        this.loaderCssClass = f.loader_css_class || 'loader';
        //delay for hiding loader
        this.loaderCloseDelay = 200;
        //callback function before loader is displayed
        this.onShowLoader = Types.isFn(f.on_show_loader) ?
            f.on_show_loader : null;
        //callback function after loader is closed
        this.onHideLoader = Types.isFn(f.on_hide_loader) ?
            f.on_hide_loader : null;
        //loader div
        this.prfxLoader = 'load_';

        this.tf = tf;

        var containerDiv = Dom.create('div', ['id', this.prfxLoader+tf.id]);
        containerDiv.className = this.loaderCssClass;

        var targetEl = !this.loaderTgtId ?
            tf.tbl.parentNode : Dom.id(this.loaderTgtId);
        if(!this.loaderTgtId){
            targetEl.insertBefore(containerDiv, tf.tbl);
        } else {
            targetEl.appendChild(containerDiv);
        }
        this.loaderDiv = Dom.id(this.prfxLoader+tf.id);
        if(!this.loaderHtml){
            this.loaderDiv.appendChild(Dom.text(this.loaderText));
        } else {
            this.loaderDiv.innerHTML = this.loaderHtml;
        }
    }

    show(p) {
        if(!this.tf.loader || !this.loaderDiv ||
            this.loaderDiv.style.display===p){
            return;
        }

        var displayLoader = () => {
            if(!this.loaderDiv){
                return;
            }
            if(this.onShowLoader && p!=='none'){
                this.onShowLoader.call(null, this);
            }
            this.loaderDiv.style.display = p;
            if(this.onHideLoader && p==='none'){
                this.onHideLoader.call(null, this);
            }
        };

        var t = p==='none' ? this.loaderCloseDelay : 1;
        global.setTimeout(displayLoader, t);
    }

    destroy(){
        if(!this.loaderDiv){
            return;
        }
        var tf = this.tf,
            targetEl = !this.loaderTgtId ?
            (tf.gridLayout ?
                tf.feature('gridLayout').tblCont : tf.tbl.parentNode):
            Dom.id(this.loaderTgtId);
        targetEl.removeChild(this.loaderDiv);
        this.loaderDiv = null;
    }
}