Question

I want to create a jQuery plugin that has both methods and callbacks, methods work but I can’t get the callbacks working, the scope of the callbacks confuses me,

(function($)
{
    var methods = {

        create: function(options) {

            var defaults = {
                width: 320,
                height: 240,
                background: '#000',
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return $(this).each(function(i) {

                console.log('create');

            });

        },
        stop: function(options) {

            var defaults = {
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return $(this).each(function(i) {

                console.log('stop');
                options.onstop.call();

            });
        }
    };

    $.fn.myplugin = function(option) {

        if (methods[option]) {
            return methods[option].apply( this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.create.apply(this, arguments);
        } else {
            $.error('Method ' +  option + ' does not exist in jQuery.plugin');
        }    
    };

})(jQuery);

so in the <script>:

$(document).ready(function(){

    $('#start').click( function(){
        $('#myvideo').myplugin('create', { onstop: function(){ console.log('on stop'); } });
    });

    $('#stop').click( function(){
        $('#myvideo').myplugin('stop');
    });

});

basically it seems I want to make the onstop: function(){} global to the plugin

/* ======== updated code (see comments) ======== */

(function($)
{

    var callbacks = {
        onready: $.Callbacks("once memory unique").add(function() {
            //console.log('onready');
        }),
        ondeny: $.Callbacks("unique").add(function() {
            //console.log('ondeny');
        }),
        onerror: $.Callbacks("unique").add(function() {
            //console.log('onerror');
        }),
        onstop: $.Callbacks("unique").add(function() {
            //console.log('onstop');
        })
    };

    var methods = {

        construct: function(){
        },
        create: function(options) {

            var defaults = {
                width: 320,
                height: 240,
                background: '#000',
                onready: function(){},
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return this.each(function(i, elements) {

                for (var prop in options) {
                    if (prop in callbacks) {
                        callbacks[prop].add(options.prop);
                    }
                }

                callbacks.onready.fire();

            });

        },
        stop: function() {

            return this.each(function(i, elements) {
                callbacks.onstop.fire();
            });
        }
    };

    $.fn.myplugin = function(option) {

        if (methods[option]) {
            return methods[option].apply( this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.construct.apply(this, arguments);
        } else {
            $.error('Method ' +  option + ' does not exist in jQuery.plugin');
        }    
    };

})(jQuery);

Answer 1

I used a globalOptions variable to store the plugins initialization options as global,

Here’s the two files to test things out and use as a stencyl.

jquery.plugin.js
(function($){

    var pluginName = 'myPlugin';

    var globalOptions = '';

    var methods = {

        create: function(options) {

            var defaults = {
                backgroundColor: '#000',
                color: '#fff',
                oncreate: function(){},
                onchangecolor: function(){},
                onloadpage: function(page){}
            };

            globalOptions = $.extend(defaults, options);

            return $(this).each(function(i, elements) {

                $(elements).data('globalOptions', globalOptions);

                globalOptions.oncreate();

            });

        },
        changeColor: function(){

            return $(this).each(function(i, elements) {

                globalOptions = $(elements).data('globalOptions');
                if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; }

                $(this).css('background-color', globalOptions.backgroundColor);
                $(this).css('color', globalOptions.color);

                globalOptions.onchangecolor();

            });
        },
        loadPage: function(options){

            return $(this).each(function(i, elements) {

                globalOptions = $(elements).data('globalOptions');
                if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; }

                globalOptions.onloadpage(options.page);
                location.href = options.page;

            });
        }

    };

    $.fn.myPlugin = function(option) {

        if (methods[option]) {
            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.create.apply(this, arguments);
        } else {
            $.error('Error: Method "' + option + '" does not exist in ' + pluginName);
            return false;
        }    
    };

})(jQuery); 

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <script src="jquery.min.js"></script>
        <script src="jquery.plugin.js"></script>
        <script>
$(document).ready(function() {

    var myElement = $('.container').myPlugin({
        color: '#555',
        backgroundColor: '#ddd',
        oncreate: function(){
            console.log('Callback: create');
        },
        onchangecolor: function(){
            console.log('Callback: onchangecolor');
        },
        onloadpage: function(page){
            console.log('Callback: onloadpage = '+page);
        }
    });

    $('.color').click(function(event){
        myElement.myPlugin('changeColor');
    });

    $('.page').click(function(event){
        myElement.myPlugin('loadPage', { page: '#test' });
    });

});
        </script>
    </head>
    <body>
        <div class="container">
            <button class="color">changeColor</button> <button class="page">loadPage</button>
        </div>
    </body>
</html>

If anyone has a better way of doing this and a way to add “private” methods, please share. 🙂