How to Extend Twitter Bootstrap Plugin

Question

I am digging into Twitter's Bootstrap and now want to try and add some functionality to the plugins, but I can't figure out how to do so. Using the modal plugin as an example (http://twitter.github.com/bootstrap/javascript.html#modals), I'd like to add a new function to the plugin that can be called as one would the standard plugin methods. THe closest I think I have come is with the following code, but all I get when I try to access is that the function is not part of the object.

Any suggestions? This is what I have tried that seems to be the closest to what I need to do:

 $.extend($.fn.modal, { 
    showFooterMessage: function (message) { 
        alert("Hey"); 
    } 
}); 

Then I would want to call it as follows:

  $(this).closest(".modal").modal("showFooterMessage"); 

EDIT: OK, I figured out how to do this:

(function ($) {
    var extensionMethods = {
        displayFooterMessage: function ($msg) {
            var args = arguments[0]
            var that = this;

            // do stuff here
        }
    }

    $.extend(true, $.fn.modal.Constructor.prototype, extensionMethods);
})(jQuery);

The problem with the existing set of Bootstrap plugins is that if anyone wants to extend them, none of the new methods can accept arguments. My attempt to "fix" this was to add the acceptance of arguments in the plugins function call.

$.fn.modal = function (option) {
    var args = arguments[1] || {};
    return this.each(function () {
        var $this = $(this)
        , data = $this.data('modal')
        , options = typeof option == 'object' && option

        if (!data) $this.data('modal', (data = new Modal(this, options)))

        if (typeof option == 'string') data[option](args)
        else data.show()

    }) // end each
} // end $.fn.modal

Answer 1

This is an old thread, but I just made some custom extensions to modal using the following pattern:

// save the original function object
var _super = $.fn.modal;

// add custom defaults
$.extend( _super.defaults, {
    foo: 'bar',
    john: 'doe'
});

// create a new constructor
var Modal = function(element, options) {

    // do custom constructor stuff here

     // call the original constructor
    _super.Constructor.apply( this, arguments );

}

// extend prototypes and add a super function
Modal.prototype = $.extend({}, _super.Constructor.prototype, {
    constructor: Modal,
    _super: function() {
        var args = $.makeArray(arguments);
        _super.Constructor.prototype[args.shift()].apply(this, args);
    },
    show: function() {

        // do custom method stuff

        // call the original method
        this._super('show');
    }
});

// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {

    var args = $.makeArray(arguments),
        option = args.shift();

    return this.each(function() {

        var $this = $(this);
        var data = $this.data('modal'),
            options = $.extend({}, _super.defaults, $this.data(), typeof option == 'object' && option);

        if ( !data ) {
            $this.data('modal', (data = new Modal(this, options)));
        }
        if (typeof option == 'string') {
            data[option].apply( data, args );
        }
        else if ( options.show ) {
            data.show.apply( data, args );
        }
    });

}, $.fn.modal);

This way you can

1) add your own default options

2) create new methods with custom arguments and access to original (super) functions

3) do stuff in the constructor before and/or after the original constructor is called

Answer 2

For the record there is a simple method to override or extend existing functions:

var _show = $.fn.modal.Constructor.prototype.show;

$.fn.modal.Constructor.prototype.show = function() {
    _show.apply(this, arguments);
    //Do custom stuff here
};

Doesn't cover custom arguments, but it's easy as well with the method above; instead of using apply and arguments, specify the original arguments plus the custom ones in the function definition, then call the original _show (or whichever it is) with the original arguments, and finally do other stuff with the new arguments.

Answer 3

For reference, I had a similar problem so I "extended" the Typeahead plugin by forking and adding the functionality I needed in the plugin script itself.

If you have to change the source it's not really an extension anyways so I figured it was easier just to put all my modifications in one place.

Answer 4

For anyone looking to do this with Bootstrap 3. The plugin layout has changed a bit the default options for all Bootstrap 3 plugins are attached to the plugins constructor:

var _super = $.fn.modal;
$.extend(_super.Constructor.DEFAULTS, {
       foo: 'bar',
       john: 'doe'
});

Answer 5

+1 for the accepted answer above from David. But if I could simplify it a bit more, I'd adjust the DEFAULTS extending and $fn.modal extending like so:

!function($) {

    'use strict';

    // save the original function object
    var _super = $.fn.modal;

    // create a new constructor
    var Modal = function(element, options) {

        // do custom constructor stuff here

        // call the original constructor
        _super.Constructor.apply( this, arguments );

    }

    // add custom defaults
    Modal.DEFAULTS = $.extend( _super.defaults, {
         myCustomOption: true
    });

    // extend prototypes and add a super function
    Modal.prototype = $.extend({}, _super.Constructor.prototype, {
        constructor: Modal,
        _super: function() {
            var args = $.makeArray(arguments);
            _super.Constructor.prototype[args.shift()].apply(this, args);
        },
        show: function() {

            // do custom method stuff

            // call the original method
            this._super('show');
        },
        myCustomMethod: function() {
            alert('new feature!');
        }
    });

    // Copied exactly from Bootstrap 3 (as of Modal.VERSION  = '3.3.5')
    // Notice: You can copy & paste it exactly, no differences!
    function Plugin(option, _relatedTarget) {
        return this.each(function () {
            var $this   = $(this)
            var data    = $this.data('bs.modal')
            var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

            if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
            if (typeof option == 'string') data[option](_relatedTarget)
            else if (options.show) data.show(_relatedTarget)
        })
    }

    // override the old initialization with the new constructor
    $.fn.modal = $.extend(Plugin, $.fn.modal);

}(jQuery);