JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<p id="myp">click here to toggle</p>

JavaScript

(function(){
    var Element = this.Element,
        Elements = this.Elements;
    
    [Element, Elements].invoke('implement', {
        toggle: function(){
            var args = Array.prototype.slice.call(arguments), 
                count = args.length-1,
                // start at 0
                index = 0;
            
            return this.addEvent('click', function(){
                var fn = args[index];
                typeof fn === 'function' && fn.apply(this, arguments);
                // loop args.
                index = count > index ? index+1 : 0;
            });
        }
    });
    
    Element.Events.outerClick = {
        base : 'click',    
        condition : function(event){
            event.stopPropagation();
            return false;
        },
        onAdd : function(fn){
            this.getDocument().addEvent('click', fn.bind(this));
        },
        onRemove : function(fn){
            this.getDocument().removeEvent('click', fn.bind(this));
        }
    };
}());

document.id('myp').toggle(
    function(e){
        console.log(e); // event.
        this.set('html', 'new text');
    },
    function(){
        console.log(this); // element
        this.set('html', 'old text');
    },
    function(){
        this.set("html", "function 3!");
    }
).addEvent('outerClick', function(e){
     console.log(this, e); 
});