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="😀">😀
<li id="😂">😂
<li id="😃">😃
[...](+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
