createAppLoader.js

/**
 *    EXAMPLE:
 *
 *    /// HTML:
 *    <div.app-loading>
 *        <div.app-loading__backing>
 *            <img.app-loading__img src='https://media0.giphy.com/media/aFTt8wvDtqKCQ/giphy.gif?cid=3640f6095c35e19e7366515351ade54e'/>
 *            <div.app-loading__txts>
 *               <span.app-loading__txts__desp></span>
 *               <span.app-loading__txts__cnt></span>%
 *            </div>
 *         </div>
 *    </div>
 *        
 *    /// JS:
 *         const loader = createAppLoader({containerSelecter: '.app-loading', counterSelecter: '.app-loading__txts__cnt', despSelecter: '.app-loading__txts__desp', speed: 100});
 *
 *         /// Start loading:
 *         loader.start('系統初始化');
 *         
 *         /// Start loading with different speed:
 *         loader.start('劇情載入中', 750);
 *
 *         /// End loading:
 *         loader.end();
 *
 *         /// End loading with callback
 *         loader.end(() => console.log('8816'));
 */
function __createAppLoader(opts) {
    var containerEl = document.querySelector(opts.containerSelecter);
    var counterEl = document.querySelector(opts.counterSelecter);
    var despEl = document.querySelector(opts.despSelecter);
    var speed = opts.speed;
    var cb = function(){};
    var n = 0;
    var isDone = false;
    var timeoutHandle = null;
    var inc = function() {
        if(isDone === true) {
            speed = 1000/60;
        }

        if(n < 99) {
            n = n + 1;
            counterEl.innerHTML = n;
            timeoutHandle = setTimeout(inc, speed);
            return;
        }

        if(isDone === true) {
            clearTimeout(timeoutHandle);
            counterEl.innerHTML = '100';
            timeoutHandle = setTimeout(function() {
                containerEl.style.display = 'none';
                cb();
            }, speed);
        }
    };

    var start = function(_desp, _speed) {
        if(typeof _desp !== 'string') {
            _desp = '';
        }
        if(typeof _speed === 'number') { /// Reset speed
            speed = _speed;
        }
        cb = function(){};
        n = 0;
        isDone = false;
        counterEl.innerHTML = n;
        despEl.innerHTML = _desp;
        containerEl.style.display = 'block';
        inc();
    };

    var end = function(_cb) {
        cb = _cb || function(){};
        isDone = true;
    };

    return {
        start: start,
        end: end,
    };
};