jeudi 18 février 2016

How to provide public access to jQuery plugin using jquery-boilerplate?

I am trying the jquery-boilerplate pattern over the one the jQuery team provides in the learn plugin section of their site.

I provide public access to default settings as I learned in the Advanced Plugin Concepts section. The code below is a simple example of how public access is used:

$.fn.hilight = function( options ) {
    var opts = $.extend( {}, $.fn.hilight.defaults, options );

};

$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};

// Example of usage
$.fn.hilight.defaults.foreground = "blue";

$( ".hilightDiv" ).hilight();

$( "#green" ).hilight({
    foreground: "green"
});

I was wondering, is it possible to provide public access to the plugin using the jquery-boilerplate? And if it is possible, how can I do it?

This is the code I am testing:

;( function( $, window, document, undefined ) {
    "use strict";

    var pluginName = "boilerplateTest",
        defaults = {
            random: "random text",
            random2: {
                one: 1,
                two: 2
            }
        };

    function Plugin( element, options ) {
        this.element = element;
        this.mainSettings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend( Plugin.prototype, {
        init: function() {
            var cfg = this.mainSettings;

            this.printToConsole( cfg );
        },
        printToConsole: function( e ) {
            console.log( e );
        }
    } );

    $.fn[ pluginName ] = function( options ) {
        return this.each( function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName,
                new Plugin( this, options ) )
            }
        } );
    };
} )( jQuery, window, document );

Aucun commentaire:

Enregistrer un commentaire