JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<button id="target">Button</button>

JavaScript

(function($) {

    // Accepts a function or an array of functions an calls an
    // anonymous function with each as the only argument.
    function iterate(handlerInput, f) {
        if (handlerInput instanceof Array) {
            for (var i = 0; i < handlerInput.length; i++) {
                f(handlerInput[i]);
            }
        } else {
            f(handlerInput);
        }
    }

    // jQuery methods
    $.extend({
        stateBindings: {
            // Stores the current state
            state: null,

            // Stores the list of jQuery obejcts which the plugin is managing
            objects: [],

            liveObjects: [],

            // A method to set the state, and as a result of doing so, alter
            // the bindings active on the managed objects.
            setState: function(newState) {
                var previousState = $.stateBindings.state;
                var i, j, events, eventName, handlers;

                // Handle the live bindings
                for(i = 0; i < $.stateBindings.liveObjects.length; i++) {
                    var $liveObj = $.stateBindings.liveObjects[i];

                    // Remove the bindings for the previous state
                    if (previousState !== null) {
                        events = $liveObj.stateBindings[previousState];
                        for (eventName in events) {
                            handlers = events[eventName];

                            iterate(handlers, function(handler) {
                                $liveObj.die(eventName, handler);
                            });
                        }
                    }

                    // Add the bindings for the new state
                    events = $liveObj.stateBindings[newState];
                    for (eventName in events) {
                        handlers = events[eventName];

                        iterate(handlers, function(handler) {
                            $liveObj.live(eventName,...