Source: ui/montage-studio-loader.reel/montage-studio-loader.js

/**
 * @module ui/montage-studio-loader.reel
 */
var Loader = require("../loader.reel").Loader;

// Constants
var OFF_CLASS_NAME = "off",
    ANI_CLASS_NAME = "ani",
    TRIANGLES_CLASS_NAME = "tri",

    LOADER_STATE_INIT = 0,
    LOADER_STATE_ANIMATING = 1,
    LOADER_STATE_STOPPED = 2;

/**
 * @class MontageStudioLoader
 * @extends Component
 */
var MontageStudioLoader = exports.MontageStudioLoader = Loader.specialize(/** @lends MontageStudioLoader# */ {


    hasTemplate: {
        value: true
    },


    _state: {
        value: null
    },


    _shouldRotate: {
        value: false
    },


    animationInterval: {
        value: 3500
    },

    minimumFirstLoadingDuration: {
        value: 6000
    },

    state: {
        set: function (state) {
            if (this._state !== state) {
                this._state = state;
            }
        },
        get: function () {
            if (this._state === null) {
                this._state = LOADER_STATE_INIT;
            }

            return this._state;
        }
    },

    enterDocument: {
        value: function (firsTime) {
            Loader.prototype.enterDocument.call(this, firsTime);

            if (firsTime) {
                this.startAnimation();
            }
        }
    },


    exitDocument: {
        value: function () {
            if (this.state === LOADER_STATE_ANIMATING) {
                this.stopAnimation();
            }
        }
    },

    startAnimation: {
        value: function () {
            if (this.state !== LOADER_STATE_STOPPED) {
                var self = this;

                this._animationIntervalTimeoutID = setTimeout(function () {
                    if (self.state !== LOADER_STATE_STOPPED) {
                        self.state = LOADER_STATE_ANIMATING;
                        self.needsDraw = true;
                    }
                }, this.animationInterval);
            }
        }
    },

    stopAnimation: {
        value: function () {
            if (this.state === LOADER_STATE_ANIMATING) {
                if (this._animationIntervalTimeoutID) {
                    clearTimeout(this._animationIntervalTimeoutID);
                    this._animationIntervalTimeoutID = null;
                }

                this.state = LOADER_STATE_STOPPED;
                this.needsDraw = true;
            }
        }
    },

    draw: {
        value: function () {
            Loader.prototype.draw.call(this);

            if (this.state === LOADER_STATE_ANIMATING) {
                this._logoTrianglesElement.classList.remove(OFF_CLASS_NAME);
                this._logoWtrianglesElement.classList.remove(OFF_CLASS_NAME);
                this._logoSVGContainerElement.classList.add(ANI_CLASS_NAME);
                this._logoWtrianglesElement.classList.add(ANI_CLASS_NAME);
                this._logoLinesElement.classList.add(OFF_CLASS_NAME);

                var triangles = document.getElementsByClassName(TRIANGLES_CLASS_NAME),
                    tPrefix = "t";

                for (var i = 0; i < triangles.length; i++) {
                    triangles[i].classList.add(tPrefix + (i + 1));
                }

            } else if (this.state === LOADER_STATE_STOPPED) {
                // Avoid memory leak
                this._logoTrianglesElement = null;
                this._logoWtrianglesElement = null;
                this._logoSVGContainerElement = null;
                this._logoWtrianglesElement = null;
                this._logoLinesElement = null;
                this.element.classList.add(OFF_CLASS_NAME);
            }
        }
    }
});