Mobile engagement example

mobile_example.js

TXM.creative = {
    _engagement: null,
    _images: {},

    _loadedAssets: 0,
    _totalAssets: 0,

    init: function() {
        TXM.dispatcher.dispatchEvent('INTERACTIVE_ASSET_LOADED');
        
        TXM.dispatcher.addEventListenerOnce('ENGAGEMENT_STARTED', TXM.creative._onStart);
        TXM.dispatcher.addEventListenerOnce('ENGAGEMENT_ENDED', TXM.creative._onEnd);

        var assets = ['//www.example.com/background.png',
                      '//www.example.com/copy.png'];

        TXM.creative._totalAssets = assets.length;

        TXM.creative._loadImages(assets);
    },

    _onAssetLoaded: function() {
        TXM.creative._loadedAssets += 1;
        TXM.dispatcher.dispatchEvent('ENGAGEMENT_ASSET_LOADING_PROGRESS', TXM.creative._loadedAssets/TXM.creative._totalAssets);

        if (TXM.creative._loadedAssets == TXM.creative._totalAssets) {
            TXM.creative._setupSteps();

            TXM.dispatcher.dispatchEvent('INTERACTIVE_ASSET_READY');
        }
    },

    _loadImages: function(urls) {
        for (var i=0; i<urls.length; i++) {
            var url = urls[i];
            TXM.creative._images[url] = $("<img />").attr("src", url).load(TXM.creative._onAssetLoaded);
        }
    },

    _setupSteps: function() {
        TXM.creative._engagement = $('<div>', {
            'class': 'engagement'
        }).css({
            'background': '#ffffff'
        });

        var copy = TXM.creative._images['//www.example.com/copy.png'].addClass('copy').css({
            'top': '500px',
            'left': '98px'
        });

        TXM.creative._engagement.append(TXM.creative._images['//www.example.com/background.png'], copy);
    },

    _onStart: function() {
        TXM.ui.show(TXM.creative._engagement);
    },

    _onEnd: function() {
        
    }
};

TXM.creative.init();