JSFiddle - React, Tailwind, and code Playground

by ajacksified

HTML

<script src="https://raw.github.com/ajacksified/Mediator.js/master/mediator.min.js"></script>
<html>
    <head>
        <title>Mediator Test</title>
    </head>
    <body>
        <h1>Chat</h1>
        <form id="chatForm">
            <label for="fromBox">Your Name:</label>
            <input id="fromBox" type="text"/>
            <br />
            <label for="toBox">Send to:</label>
            <input id="toBox" type="text"/>
            <br />
            <label for="chatBox">Message:</label>
            <input id="chatBox" type="text"/>
            <button action="submit">Chat</button>
        </form>
        <button id="insanityChecker">Turn off sanity check</button>
        
        <div id="chatResult"></div>
    </body>
</html>

JavaScript

$(function() {
    var mediator = new Mediator();

    $("#chatForm").bind("submit", function(e) {
        e.preventDefault();
        var text = $("#chatBox").val();
        var from = $("#fromBox").val();
        var to = $("#toBox").val();
        mediator.Publish("newMessage", text, from, to);
    });

    $("#insanityChecker").bind("click", function(e) {
        e.preventDefault();
        mediator.Remove("newMessage", iAmClearlyInsane);
        console.log(mediator);
    });

    function displayChat(message, from, to) {
        var date = new Date();
        var msg = from + " said \"" + message + "\" to " + to;

        $("#chatResult").prepend("<p>" + msg + " (" + date.toLocaleTimeString() + ")</p>");
    }

    function logChat(message) {
        if (window.console) {
            console.log(message);
        }
    }

    function amITalkingToMyself(message, from, to) {
        return from === to;
    }

    function iAmClearlyInsane(message, from, to) {
        $("#chatResult").prepend("<p>" + from + " is talking to himself.</p>");
    }
    
    mediator.Subscribe("newMessage", displayChat);
    mediator.Subscribe("newMessage", logChat);
    mediator.Subscribe("newMessage", iAmClearlyInsane, { predicate: amITalkingToMyself });
});