JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="newContent"></textarea>
<input type="button" id="editPanel" value="Edit content of panel" />
<div id="pnlRegular"></div>
JavaScript
YUI().use('panel', function(Y) {
var pnlRegular = new Y.Panel({
srcNode : "#pnlRegular",
render : true,
visible : false,
width : 500,
centered : true,
modal : false,
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.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 {
...