src/third_party/specimenTools/lib/widgets/LoadProgressIndicator.js
/**
     * LoadProgressIndicator visualizes the progress of the loading of the
     * font files.
     * It also applies CSS-classes to its container element to help styling
     * the document while loading the fonts.
     *
     * Before loading, no CSS-Classes are set by this widget.
     * While loading the fonts `loadingClass` is set to the container.
     * When loading is finished `loadedClass` is set to the container and
     * `loadingClass` is removed.
     *
     * So, when `loadedClass` is present, the specimen content can be shown
     * and when none of these classes or `loadingClass` are present a progress
     * indicator window can be shown.
     *
     * Child elements with the CSS-Class configured at `progressBarClass`
     * will either get their `element.style.width` set to "{percent}%"
     * or the configurable method at `setProgressBar` will be called
     * like this: `setProgressBar.call(widgetInstance, element, percent)`.
     *
     * Child elements with the CSS-Class configured at `percentIndicatorClass`
     * will have their element.textContent set to: "{percent} %"
     *
     * Child elements with the CSS-Class configured at `taskIndicatorClass`
     * will have their element.innerHTML set to: "<em>{task}:</em> {fontFileName}"
     *
     * The idea is to initialize this widget on the <body> element.
     */
LoadProgressIndicator visualizes the progress of the loading of the
font files.
It also applies CSS-classes to its container element to help styling
the document while loading the fonts.

Before loading, no CSS-Classes are set by this widget.
While loading the fonts `loadingClass` is set to the container.
When loading is finished `loadedClass` is set to the container and
`loadingClass` is removed.

So, when `loadedClass` is present, the specimen content can be shown
and when none of these classes or `loadingClass` are present a progress
indicator window can be shown.



Child elements with the CSS-Class configured at `percentIndicatorClass`
will have their element.textContent set to: "{percent} %"

Child elements with the CSS-Class configured at `taskIndicatorClass`
will have their element.innerHTML set to: "{task}: {fontFileName}"

The idea is to initialize this widget on the  element.
LoadProgressIndicator visualizes the progress of the loading of the font files . It also applies CSS - classes to its container element to help styling the document while loading the fonts . Before loading no CSS - Classes are set by this widget . While loading the fonts ` loadingClass ` is set to the container . When loading is finished ` loadedClass ` is set to the container and ` loadingClass ` is removed . So when ` loadedClass ` is present the specimen content can be shown and when none of these classes or ` loadingClass ` are present a progress indicator window can be shown . Child elements with the CSS - Class configured at ` percentIndicatorClass ` will have their element . textContent set to : " { percent } % " Child elements with the CSS - Class configured at ` taskIndicatorClass ` will have their element . innerHTML set to : " { task } : { fontFileName } " The idea is to initialize this widget on the element .
function LoadProgressIndicator(container, pubSub, options) {
        Parent.call(this, options);
        this._container = container;
        this._pubSub = pubSub;
        this._pubSub.subscribe('prepareFont', this._onPrepareFont.bind(this));
        this._pubSub.subscribe('loadFont', this._onLoadFont.bind(this));
        this._pubSub.subscribe('allFontsLoaded', this._onAllFontsLoaded.bind(this));
        this._numAllFonts = null;
        this._fontsLoaded = 0;
        this._elements = {
            progressBar: this._container.getElementsByClassName(this._options.progressBarClass)
          , percentIndicator: this._container.getElementsByClassName(this._options.percentIndicatorClass)
          , taskIndicator: this._container.getElementsByClassName(this._options.taskIndicatorClass)
        };
    }
function LoadProgressIndicator ( container , pubSub , options ) { Parent . call ( this , options ) ; this . _container = container ; this . _pubSub = pubSub ; this . _pubSub . subscribe ( 'prepareFont' , this . _onPrepareFont . bind ( this ) ) ; this . _pubSub . subscribe ( 'loadFont' , this . _onLoadFont . bind ( this ) ) ; this . _pubSub . subscribe ( 'allFontsLoaded' , this . _onAllFontsLoaded . bind ( this ) ) ; this . _numAllFonts = null ; this . _fontsLoaded = 0 ; this . _elements = { progressBar : this . _container . getElementsByClassName ( this . _options . progressBarClass ) , percentIndicator : this . _container . getElementsByClassName ( this . _options . percentIndicatorClass ) , taskIndicator : this . _container . getElementsByClassName ( this . _options . taskIndicatorClass ) } ; }
LoadProgressIndicator visualizes the progress of the loading of the
 font files.
LoadProgressIndicator visualizes the progress of the loading of the font files .