src/components/LoadingDisplay.js

goog.module('gep.components.LoadingDisplay');

const {Component} = goog.require('clulib.cm');

const {WorldProvider,WorldEventType} = goog.require('gep.provider.WorldProvider');

const {listen} = goog.require('goog.events');
const {setStyle} = goog.require('goog.style');
const classlist = goog.require('goog.dom.classlist');

/**
 * This component represents the loading bar
 * Component is used from {@Link https://www.npmjs.com/package/clulib}
 * @extends {Component}
 */
class LoadingDisplay extends Component
{
    constructor()
    {
        super();

        /**
         * Reference to the WorldProvider for monitoring actions, loading processes and status changes of the created THREE.Scene.
         * @type {WorldProvider}
         * @private
         */
        this.worldProvider_ = WorldProvider.getInstance();
    }

    /**
     * Component is ready and had loaded all dependencies (inherit method waitFor and sub components).
     * Inits listener for monitoring the loading
     * @inheritDoc
     */
    onInit()
    {
        super.onInit();

        /**
         * Element which represents the loader bar
         * @type {!Element}
         * @private
         */
        this.progressBar_ = /** @type {!Element} */ (this.getElement().querySelector('.loading-display-progress'));

        this.update_();
        listen(this.worldProvider_, WorldEventType.LOAD_PROGRESS, this.update_, false, this);
        listen(this.worldProvider_, WorldEventType.LOADED, this.loaded_, false, this);
    }

    /**
     * Update the loader bar progress
     * @private
     */
    update_()
    {
        setStyle(this.progressBar_, {'width': Math.round(this.worldProvider_.loadProgress * 100) + '%'});
    }

    /**
     * Hide the loader display
     * @private
     */
    loaded_()
    {
        classlist.remove(this.getElement(), 'is-visible');
    }
}

exports = LoadingDisplay;