ElementFactory.js

TXM.studio.ElementFactory = {

    createElement: function(config) {
        var element = null;
        switch (config.type) {
            case 'Image':
                element = $('<img>');
                element.attr('src', config.image_url);
                break;
            case 'Button':
                element = $('<img>');
                element.attr('src', config.image_url).data('src', config.image_url);
                element.data('hover_src', config.hover_image_url);
                element.on('hover', function() {
                    if (this.data('hover_src')) {
                        this.attr('src', this.data('hover_src'));
                    }
                }, function() {
                    if (this.data('src')) {
                        this.attr('src', this.data('src'));
                    }
                });
                break;
            case 'Video':
                element = $('<video>').css('background', '#000');
                element.attr('src', config.video_url).attr('poster', config.preview_image_url);
                if (config.autoplay)
                    element.attr('autoplay', 'autoplay');
                if (config.controls)
                    element.attr('controls', 'controls');
                break;
            case 'YouTube':
                element = $('<iframe>').css('background', '#000');
                element.attr('src', '//www.youtube.com/embed/' + _elementFactory._getYouTubeId(config.youtube_url) + '?autoplay=' + (config.autoplay ? 1 : 0) + '&controls=' + (config.controls ? 1 : 0));
                break;
            case 'IFrame':
                element = $('<iframe>');
                element.attr('src', iframe_url).attr('scrolling', config.scrollbars ? 'no' : 'auto');
                break;
            case 'Text':
                element = $('<textarea>').attr('readonly', 'readonly');
                element.css({'fontSize':config.font_size, 'textAlign':config.alignment, 'color':config.color, 'lineHeight':1});
                if (config.font !== '')
                    element.css('fontFamily', config.font.replace(/\+/g, ' ') + ', sans-serif');
                element.html(config.text);
                break;
            default:
                // error
                break;
        }

        if (element) {
            element.attr('id', config.name);
            element.css('display', 'block').addClass('step-element');
            element.css({'left':config.x + 'px', 'top':config.y + 'px', 'width':config.width + 'px', 'height':config.height + 'px'});
        }
        
        return element;
    }
};