JSFiddle - React, Tailwind, and code Playground

by ericf

JavaScript

YUI().use('widget', 'overlay', 'base-build', function (Y) {

    // -- FooCore --------------------------------------------------------------

    Y.FooCore = function () {};

    Y.FooCore.ATTRS = {
        bar: {
            validator: Y.Lang.isString,
            value    : ''
        }
    };

    Y.FooCore.prototype = {
        BAR_TEMPLATE: '<span />',

        initializer: function () {
            Y.after(this._renderUIFoo, this, 'renderUI');
            Y.after(this._bindUIFoo, this, 'bindUI');
            Y.after(this._syncUIFoo, this, 'syncUI');
        },

        _renderUIFoo: function () {
            var barNode = Y.Node.create(this.BAR_TEMPLATE);

            barNode.addClass(this.getClassName('bar'));
            this.get('contentBox').append(barNode);
        },

        _bindUIFoo: function () {
            this.after('barChange', this._afterBarChange);
        },

        _syncUIFoo: function () {
            this._uiSetBar(this.get('bar'));
        },

        _uiSetBar: function (bar) {
            var contentBox = this.get('contentBox'),
                barNode    = contentBox.one('.' + this.getClassName('bar'));

            barNode.set('text', bar);
        },

        _afterBarChange: function (e) {
            this._uiSetBar(e.newVal);
        }
    };

    // -- Foo ------------------------------------------------------------------

    Y.Foo = Y.Base.create('foo', Y.Widget, [Y.FooCore]);

    // -- FooOverlay -----------------------------------------------------------

    Y.FooOverlay = Y.Base.create('fooOverlay', Y.Overlay, [Y.FooCore]);

    // -- Usage ----------------------------------------------------------------

    new Y.Foo({
        bar   : 'Foo Widget',
        render: true
    });

    new Y.FooOverlay({
        bar     : 'Foo Overlay',
        render  : true,
        centered: true
    });

});