JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<!doctype html>
<html>
    <title>Test</title>
    <div id="system-message-container"></div>

    <button onclick="Joomla.renderMessages(testMessages); return false;">Render messages without mootools</buton>
    <button onclick="Joomla.renderMessagesOld(testMessages); return false;">Render messages with mootools</buton>
    <br />
    <button onclick="Joomla.removeMessages(); return false">Clear messages</buton>
</html>

CSS

#system-message-container{
    border: 1px dotted red;
    padding: 10px 0;
    margin: 10px;
}
/* System Messages */
#system-message {
    margin-bottom: 10px;
    padding: 0;
}

#system-message > dt {
    font-weight: bold;
    display: none;
}

#system-message > dd {
    margin: 0;
    font-weight: bold;
    text-indent: 30px;
}

#system-message > dd > ul {
    color: #0055BB;
    background-position: 4px top;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    list-style: none;
    padding: 10px;
    border-top: 3px solid #84A7DB;
    border-bottom: 3px solid #84A7DB;
}

#system-message > dd > ul > li {
    line-height: 1.5em
}

/* System Standard Messages */
#system-message > .message > ul {
    background-color: #C3D2E5;
    background-image: url(../images/notice-info.png);
}

/* System Error Messages */
#system-message > .error > ul,
#system-message > .warning > ul,
#system-message > .notice > ul {
    color: #c00;
}

#system-message > .error > ul {
    background-color: #E6C0C0;
    background-image: url(../images/notice-alert.png);
    border-color: #DE7A7B;
}

/* System Warning Messages */
#system-message > .warning > ul {
    background-color: #E6C8A6;
    background-image: url(../images/notice-note.png);
    border-color: #FFBB00;
}

/* System Notice Messages */
#system-message > .notice > ul {
    background-color: #EFE7B8;
    background-image: url(../images/notice-note.png);
    border-color: #F0DC7E;
}

JavaScript

Joomla = {};
/**
 * Render messages send via JSON
 *
 * @param    object    messages    JavaScript object containing the messages to render
 * @return    void
 */
 

Joomla.renderMessagesOld = function(messages) {
    Joomla.removeMessages();
    var container = document.id('system-message-container');

    var dl = new Element('dl', {
        id: 'system-message',
        role: 'alert'
    });
    Object.each(messages, function (item, type) {
        var dt = new Element('dt', {
            'class': type,
            html: type
        });
        dt.inject(dl);
        var dd = new Element('dd', {
            'class': type
        });
        dd.addClass('message');
        var list = new Element('ul');

        Array.each(item, function (item, index, object) {
            var li = new Element('li', {
                html: item
            });
            li.inject(list);
        }, this);
        list.inject(dd);
        dd.inject(dl);
    }, this);
    dl.inject(container);
};


Joomla.renderMessages = function(messages) {
    Joomla.removeMessages();
    var container = document.getElementById('system-message-container');

    var dl = document.createElement('dl');
    dl.id = 'system-message';
    dl.role = 'alert';

    Object.each(messages, function (item, type) {
        var dt = document.createElement('dt');
        dt.className = type;
        dt.innerHTML = type;
        dl.appendChild(dt);

        var dd = document.createElement('dd');
        dd.className = type + ' message';

        var list = document.createElement('ul');

        Array.each(item, function (item, index, object) {
            var li = document.createElement('li');
            li.innerHTML = item;
            list.appendChild(li);
        }, this);
        
        dd.appendChild(list);
        dl.appendChild(dd);

    }, this);
    container.appendChild(dl);
};



/**
 * Remove messages
 *
 * @return    void
 */
Joomla.removeMessages = function() {
    var children =...