Steem Messenger™ : Emojis everywhere !

alt

The Steem Messenger™

Chat securely with the power of the Steem blockchain !

New Feature !

Steem Messenger now supports emojis

As the overall functionning is now ready, we thought about improving the user experience by adding an emoji picker into the chat box.

How did we implement them?

Github Repository
Pull request

To begin, UTF emojis were already compatible in the chat box. One could easily copy/paste the UTF code of the desired emoji into the chatbox, and it would show up. But it was inconvenient and not handful at all.

We created a little box that contains 800+ UTF emojis, easily accessible by clicking on the emoji button into the chatbox :

alt

To add an emoji to your message,you simply have to click on the desired emoji.

To implement this, we first created a container on the index.ejs :

<div id="emoji-container">
    <div class="emojiBox">
        <ul id="emoji-list">
            <li id="😀">&#x1F600;
            <li id="😂">&#x1F602;
            <li id="😃">&#x1F603;
            [...](+870 emojis)
        </ul>
    </div> 
</div>

We also created the emoji button, that will open the emoji-container.

<div id="emojiBtn" class="emojiButton" onclick="showEmojiBox()">��</div>

The showEmojiBox() function :

function showEmojiBox() {
    var emojiBox = document.getElementById("emoji-container");
    if (emojiBox.style.display === "none") {
        emojiBox.style.display = "block";
    } 
    else {
        emojiBox.style.display = "none";
    }
}

Then we added an event listener to append the selected emoji to your message. This happens in the client.js :

var emojiList = getElementById("emoji-list");

emojiList.addEventListener("click",function(e) {
    if(e.target && e.target.nodeName == "LI") {
        textarea.value = textarea.value + " " + e.target.innerHTML;
    }
});

And last but not least, we stilized everything in the main.css :

.emojiButton{
        width: 31px;
        height: 31px;
        margin-top: -35px;
        float: right;
        margin-right: 30px;
        cursor: pointer;
    }
.emojiBox{
        width: 200px;
        height: 200px;
        border-radius: 3%;
        background: #fcfdff;
        padding-top: 3px;
        padding-right: 3px;
        padding-bottom: 3px;
        padding-left: 3px;
        z-index: 1;
        word-wrap: break-word;
        overflow: auto;
        font-size: 13px;
        position: fixed;
        bottom: 145px;
        right: 6px;
        box-shadow: 0px 2px 5px #666;

    }
    #emoji-list {
        height: 170px;
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2; 
    }

    #emoji-list li {
        display: inline-block;
    }