Steem Messenger™ : Emojis everywhere !

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 :

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;
    }

Contribution

If you would like to contribute to this project, or have any question about it, feel free to contact me on Discord @Kingswisdom#7650, or on github

If you think this app gives value to the Steem ecosystem, you can vote for me as a witness with SteemConnect, or directly through Steemit