JSFiddle - React, Tailwind, and code Playground

by mooyah

HTML

<div id="output">
    Changes should appear here:
</div>

<button id="button_anything">Change Anything</button>

JavaScript

var interface = new Class({
    aSomethings: [],
    changeSomething: function(strSomething)
    {
        this.aSomethings.push(strSomething);
    },
    watcher: function()
    {
        console.log("watching...", this);
        if(typeof this.aSomethings != 'undefined' && this.aSomethings.length > 0)
        {
            this.fireEvent("change", this.aSomethings);
            this.aSomethings = [];
        }
    }
});
var myParent = new Class({
    Binds: [
        "changeAnything"
        ],
    initialize: function()
    {
        console.log("creating parent");
    },
    changeAnything: function()
    {
        console.log(this);
        alert(this.aSomethings.length);
    }
});
var myClass = new Class({
    Extends: myParent,
    Implements: [Events, interface],
    Binds: [
        "changeAnything"
        ],
    initialize: function()
    {
        //this.watcher.periodical(1000, this);
    },
    changeAnything: function()
    {
        console.log("child anything");
        this.parent();
    }
});

var oInstance = new myClass();

oInstance.addEvent("change", function(strChange) {
    $("output").appendText(strChange);
});

oInstance.changeSomething("change1");

oInstance.changeSomething.delay(1000, oInstance, "change2");

window.addEvent("domready", function() {
    $("button_anything").addEvent(
        "click", oInstance.changeAnything
    );
});