JSFiddle - React, Tailwind, and code Playground

by jackwanders

JavaScript

/**
*  jQuery Plugin Boilerplate
*  - find and replace the following variable names
*    - utilities   : namespace for shared utility functions
*    - PluginClass : class name for plugin object
*    - pluginName  : the name of your plugin function, e.g. $('.foo').myPlugin()
**/
(function($) {
    
    /**
    *  Utility function object
    *  - namespace wrapper for functions shared between all plugin instances
    **/
    var utilities = {
        
        // example utility function
        getInt: function(i) {
            i = parseInt(i, 10);
            return isNaN(i) ? 0 : i;
        }
        
    },
        
    /**
    *  Main plugin class
    *  - encapsulate each instance of plugin as an object
    **/
    PluginClass = {
        
        // other instance-specific functions get defined here
        
        init: function(el,options) {
            var _t = this;  // for maintaining reference to plugin class in callbacks
            
            this.options = $.extend({}, $.fn.pluginName.defaults, options);
            this.el = el;
            this.$el = $(el);
            
            // do your plugin stuff
        }
        
    };
    
    /**
    *  Plugin function
    *  - for each element passed to the plugin, create a new class instance
    **/
    $.fn.pluginName = function () {
        var arg = arguments[0];
        var fn, options;
        
        if(typeof arg === 'string') { 
            fn = arg; 
        }
        else {
            options = arg;
        }
        
        if (this.length > 0) {
            return this.each(function(i) {
                var el = $(this), p;
                
                if(el.data('pluginName')) {
                    p = el.data('pluginName');
                    if(fn) { p.callFn(fn); }
                    else { p.init(this,options); }
                } else {
                    p = new PluginClass();
                    el.data('pluginName', p);
                    p.init(this,options);
    ...