JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<textarea id="newContent"></textarea>
        <input type="button" id="editPanel" value="Edit content of panel" />
        <div id="pnlRegular"></div>

JavaScript

YUI().use('panel', 'dd-plugin', function(Y) {

    var pnlRegular = new Y.Panel({
        srcNode: "#pnlRegular",
        render: true,
        visible: false,
        width: 500,
        centered: true,
        modal: false,
        draggable: true,
        headerContent: 'HEADER',
        footerContent: 'FOOTER',
        buttons: [{
            value: '<img src="http://docs.gimp.org/en/images/dialogs/stock-edit-16.png"/>',
            section: 'header',
            action: function(e) {
                e.preventDefault();
                alert('edit clicked');
            }},
        {
            type: "close",
            section: 'header'},
        {
            value: "RESIZE",
            section: 'footer',
            action: function(e) {
                e.preventDefault();
                if (pnlRegular.get('bodyContent').get('textContent')[0] == pnlRegular.get('smallContent')) {
                    pnlRegular.set('bodyContent', pnlRegular.get('largeContent'));
                } else {
                    pnlRegular.set('bodyContent', pnlRegular.get('smallContent'));
                }

            }}]

    });


    pnlRegular.plug(Y.Plugin.Drag);
    pnlRegular.dd.plug(Y.Plugin.DDProxy);
    pnlRegular.show();

    Y.one("#editPanel").on("click", function() {
        var newContent = Y.one('#newContent').get('value');
        var subNewContent = newContent.substring(0, 96) + ' ...';
        pnlRegular.set('largeContent', newContent);
        if (newContent.length < 100) {
            pnlRegular.set('smallContent', newContent);
        } else {
            pnlRegular.set('smallContent', subNewContent);
        }
        pnlRegular.set('bodyContent', pnlRegular.get('smallContent'));
        pnlRegular.show();
    });
});