JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <textarea id="newContent"></textarea><br />
        <input type="button" onclick="callCreatePanel();" value="Create a new panel" /><br />
<div id="content"></div>

JavaScript

var createPanel = function(panelID) {
    YUI().use('panel', 'dd-plugin', 'node', function(Y) {
        //var appending = Y.one('#' + panelID);
        var newDiv = Y.Node.create('<div id="' + panelID + '"></div>');
        newDiv.appendTo(Y.one('#content'));

        var pnlRegular = new Y.Panel({
            srcNode: '#' + panelID,
            render: true,
            visible: true,
            width: 500,
            draggable: true,
            id: panelID,
            headerContent: 'HEADER',
            footerContent: 'FOOTER',
            buttons: [{
                value: '<img src="http://www.torta.hu/design/delete.png"/>',
                section: 'header',
                action: function(e) {
                    e.preventDefault();
                    pnlRegular.set('largeContent', '');
                    pnlRegular.set('smallContent', '');
                    pnlRegular.set('bodyContent', '');
                    pnlRegular.render();
                    pnlRegular.show();
                }},
            {
                value: '<img src="http://docs.gimp.org/en/images/dialogs/stock-edit-16.png"/>',
                section: 'header',
                action: function(e) {
                    e.preventDefault();
                    var newContent = Y.one('#newContent').get('value');
                    pnlRegular.set('largeContent', newContent);
                    pnlRegular.set('smallContent', 'small');
                    pnlRegular.set('bodyContent', pnlRegular.get('largeContent'));
                    pnlRegular.render();
                    pnlRegular.show();
                }},
            {
                type: "close",
                section: 'header'},
            {
                value: "RESIZE",
                section: 'footer',
                action: function(e) {
                    e.preventDefault();
                    console.log("pnlRegular.get('bodyContent'):" + pnlRegular.get('bodyContent'));
                   ...