responsive-embed.js

/**
 * Tailor.Components.ResponsiveEmbed
 *
 * A lightbox component.
 *
 * @class
 */
var $ = window.jQuery,
    Components = window.Tailor.Components,
    ResponsiveEmbed;

ResponsiveEmbed = Components.create( {

    getDefaults: function() {
        return {
          className: 'tailor-responsive-embed',
        };
    },

    /**
     * Initializes the component.
     */
    onInitialize: function() {
        if (! this.el.getAttribute('width') && ! this.el.getAttribute('height')) {
            return;
        }

        let wrapper = $('<div />', {
            class: this.options.className,
            css: {
                paddingBottom: (parseInt(this.el.getAttribute('height')) / parseInt(this.el.getAttribute('width'))) * 100 + '%'
            }
        });

        this.$el.wrap(wrapper);
    },
    
    /**
     * Fired once the component destroyed.
     */
    onDestroy: function () {
        this.$el.unwrap();
    }

} );

/**
 * Responsive Embed jQuery plugin.
 *
 * @since 1.0.0
 *
 * @param options
 * @param callbacks
 * @returns {*}
 */
$.fn.tailorResponsiveEmbed = function( options, callbacks ) {
    return this.each( function() {
        var instance = $.data( this, 'tailorResponsiveEmbed' );
        if ( ! instance ) {
            $.data( this, 'tailorResponsiveEmbed', new ResponsiveEmbed( this, options, callbacks ) );
        }
    } );
};

module.exports = ResponsiveEmbed;