Added emoji picker,performance improvements,desktop notifications on notifications page fixed

2018-07-01 17:07:18 +02:00 · 2018-07-01 17:07:18 +02:00 · 2b0cb5e801
parent eb8323853b
commit 2b0cb5e801
23 changed files with 5639 additions and 3527 deletions
--- a/README.md
+++ b/README.md
@ -10,18 +10,19 @@ Follow our Mastodon account and never miss an important update: [@halcyon@social

 ## Instances
 These instances are publicly accessible and usable by everyone, no matter which Mastodon instance you use.
- https://social.dev-wiki.de - 1.2.1
- https://halcyon.toromino.de - 1.2.1
- https://itter.photog.social - 1.2.1
+- https://itter.photog.social - 1.2.2
+- https://halcyon.distsn.org - 1.2.1
+- https://social.dev-wiki.de - 1.2.0
+- https://halcyon.toromino.de - 1.2.0
 - https://halcyon.bka.li - 1.1.7
 - https://halcyon.tilde.team - 1.1.7
- https://halcyon.distsn.org - 1.1.6
 - https://halcyon.cybre.space - Outdated

 You have your own Halcyon instance and want it to be listed here? Create an issue with the link and we will add it to the list.

 ## Blog
- Release  of Version 1.2.1 - New who to follow page with more recommendations,bugfix at search,profiles now ignore "show replies" setting,small login page changes
+- Release of Version 1.2.2 - Added an emoji picker,improved performance (emoji rendering),desktop notifications on notifications page work now
+- Release of Version 1.2.1 - New who to follow page with more recommendations,bugfix at search,profiles now ignore "show replies" setting,small login page changes
 - [Release of Version 1.2.0 - The next big step and a view into future](https://nikisoft.myblog.de/nikisoft/art/11626391/Halcyon-1-2-0-The-next-big-step-and-a-view-into-future)
 - [Our move from Github to NotABug](https://nikisoft.myblog.de/nikisoft/art/11626163/Our-move-from-Github-to-NotABug)
 - Release of Version 1.1.7 - Fixed some bugs in compatibility with Pleroma,text fields now autoresizable,stopped undefined socket tries on profile pages
@ -54,3 +55,4 @@ Upload it, edit config.ini and have fun!
 - [Kirschn/mastodon.js](https://github.com/Kirschn/mastodon.js)
 - [yks118/Mastodon-api-php](https://github.com/yks118/Mastodon-api-php)
 - [distsn/vinayaka](https://github.com/distsn/vinayaka)
+- [LascauxSRL/lsx-emojipicker](https://github.com/LascauxSRL/lsx-emojipicker)
--- a/assets/css/emojipicker.css
+++ b/assets/css/emojipicker.css
@ -0,0 +1,115 @@
+.lsx-emojipicker-emoji span {
+display: inline-block;
+font-size: 24px;
+width: 33px;
+height: 35px;
+cursor: pointer;
+}
+.lsx-emojipicker-appender {
+position: relative;
+}
+.lsx-emojipicker-container {
+background: #ffffff;
+border-radius: 3px;
+z-index: 2;
+position: absolute;
+top: 13px;
+left: -40px;
+box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
+transition: all 0.5s ease-in-out;
+-webkit-transition: all 0.5s ease-in-out;
+display: none;
+font-family:"apple color emoji","segoe ui emoji",notocoloremoji,"segoe ui symbol","android emoji",emojisymbols,"emojione mozilla";
+}
+ul.lsx-emojipicker-tabs {
+margin: 0;
+list-style: none;
+text-align: center;
+border-top-left-radius: 3px;
+border-top-right-radius: 3px;
+}
+ul.lsx-emojipicker-tabs li {
+display: inline-block;
+text-align: left;
+font-size: 15px;
+padding: 6px;
+cursor: pointer;
+transition: 0.15s ease-out;
+border-bottom: 0px solid #189EFC;
+}
+ul.lsx-emojipicker-tabs li.selected,
+ul.lsx-emojipicker-tabs li:HOVER {
+border-bottom: 3px solid #189EFC;
+}
+.lsx-emojipicker-tabs img.emoji {
+width: 22px;
+margin: 5px 10px;
+cursor: pointer;
+}
+.lsx-emojipicker-tabs img.emoji:HOVER,
+.lsx-emojipicker-tabs li.selected img.emoji {
+opacity: 1;
+}
+.lsx-emojipicker-emoji span img.emoji {
+width: 25px;
+margin: 5px 4px;
+cursor: pointer;
+transition: all 0.1s ease-in-out;
+-webkit-transition: all 0.1s ease-in-out;
+}
+.lsx-emojipicker-emoji.lsx-emoji-tab {
+width: 220px;
+padding: 8px;
+height: 200px;
+border-radius: 4px;
+overflow: auto;
+}
+.lsx-emojipicker-emoji span:HOVER,
+.lsx-emojipicker-emoji span img.emoji:HOVER {
+transform: scale(1.1);
+-webkit-transform: scale(1.1);
+-ms-transform: scale(1.1);
+}
+.lsx-emojipicker-container .loader {
+border: 6px solid #ececec;
+border-top: 6px solid #d8d8d8;
+border-radius: 50%;
+width: 40px;
+height: 40px;
+animation: spin 1.2s linear infinite;
+margin: 0 auto;
+}
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+.lsx-emojipicker-wrapper {
+width: 100%;
+height: 100%;
+position: relative;
+}
+.lsx-emojipicker-wrapper .spinner-container {
+position: absolute;
+background: #ffffffbd;
+width: 100%;
+height: 100%;
+z-index: 10;
+border-radius: 4px;
+display: flex;
+align-items: center;
+}
+.lsx-emojipicker-container:before {
+display: block;
+content: "";
+z-index: -1;
+width: 20px;
+height: 20px;
+position: absolute;
+transform: rotate(45deg);
+top: -5px;
+left: 8px;
+background-color: #fff;
+}
+.lsx-emojipicker-emoji.lsx-emoji-tab.hidden {
+display: none;
+}
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -127,7 +127,8 @@ background-color: #E8F4FB;
 background-color: #F2FAFF!important;
 }
 .status_form.ready .status_bottom .status_media_attachment,
-.status_form.ready .status_bottom .status_privacy {
+.status_form.ready .status_bottom .status_privacy,
+.status_form.ready .status_bottom .status_emoji {
 color: #7ECEFF!important;
 }
 .status_form.ready .status_bottom .status_CW > span,
@ -2051,6 +2052,7 @@ width: 628px;
 height: auto;
 margin: 56px auto;
 position: relative;
+margin-bottom: 300px;
 }
 #js-overlay_content_wrap #js-overlay_content .close_button {
 color: #fff;
--- a/assets/js/emojipicker/LICENSE
+++ b/assets/js/emojipicker/LICENSE
@ -0,0 +1,3 @@
+LsxEmojiPicker
+A simple and lightweight emoji picker plugin for jQuery
+(c) 2018 Lascaux s.r.l.
--- a/assets/js/emojipicker/emojidata.js
+++ b/assets/js/emojipicker/emojidata.js
--- a/assets/js/emojipicker/emojipicker.js
+++ b/assets/js/emojipicker/emojipicker.js
@ -0,0 +1,258 @@
+if(typeof jQuery !== 'undefined'){
+(function ($, win) {
+'use strict';
+var emoji = lsxEmojiData;
+var settings = {};
+$.fn.lsxEmojiPicker = function(options) {
+if(options == "destroy") {
+$(this).off("click");
+$(this).children().remove();
+}
+else {
+settings = $.extend({
+width: 265,
+height: 200,
+twemoji: false,
+closeOnSelect: true,
+onSelect: function(em){}
+}, options);
+var appender = $('<div></div>')
+.addClass('lsx-emojipicker-appender');
+var container = $('<div></div>')
+.addClass('lsx-emojipicker-container')
+var wrapper = $('<div></div>')
+.addClass('lsx-emojipicker-wrapper');
+var spinnerContainer = $('<div></div>')
+.addClass('spinner-container');
+var spinner = $('<div></div>')
+.addClass('loader');
+spinnerContainer.append(spinner);
+var customemojis = JSON.parse(localStorage.current_custom_emojis);
+var addhide = "";
+if(customemojis.length > 0) {
+addhide = " hidden";
+var emojiCustomContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-custom')
+.css({'width': settings.width, 'height': settings.height});
+}
+var emojiPeopleContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-people'+addhide)
+.css({'width': settings.width, 'height': settings.height});
+var emojiNatureContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-nature hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiFoodsContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-foods hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiActivityContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-activity hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiPlacesContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-places hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiObjectsContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-objects hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiSymbolsContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-symbols hidden')
+.css({'width': settings.width, 'height': settings.height});
+var emojiFlagsContainer = $('<div></div>')
+.addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-flags hidden')
+.css({'width': settings.width, 'height': settings.height});
+var tabs = $('<ul></ul>')
+.addClass('lsx-emojipicker-tabs');
+if(customemojis.length > 0) {
+var customEmoji = $('<li></li>')
+.addClass('selected')
+.html("&#x2A;&#x20E3")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiCustomContainer.removeClass('hidden');
+});
+}
+var peopleEmoji = $('<li></li>')
+.html("😀")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiPeopleContainer.removeClass('hidden');
+});
+if(customemojis.length == 0) {
+peopleEmoji.addClass("selected");
+}
+var natureEmoji = $('<li></li>')
+.html("🐶")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiNatureContainer.removeClass('hidden');
+});
+var foodsEmoji = $('<li></li>')
+.html("🍏")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiFoodsContainer.removeClass('hidden');
+});
+var activityEmoji = $('<li></li>')
+.html("⚽")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiActivityContainer.removeClass('hidden');
+});
+var placesEmoji = $('<li></li>')
+.html("🚗")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiPlacesContainer.removeClass('hidden');
+});
+var objectsEmoji = $('<li></li>')
+.html("⌚")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiObjectsContainer.removeClass('hidden');
+});
+var symbolsEmoji = $('<li></li>')
+.html("💯")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiSymbolsContainer.removeClass('hidden');
+});
+var flagsEmoji = $('<li></li>')
+.html("🇦🇫")
+.click(function(e){
+e.preventDefault();
+$('ul.lsx-emojipicker-tabs li').removeClass('selected');
+$(this).addClass('selected');
+$('.lsx-emoji-tab').addClass('hidden');
+emojiFlagsContainer.removeClass('hidden');
+});
+if(customemojis.length > 0) {
+tabs.append(customEmoji);
+}
+tabs.append(peopleEmoji)
+.append(natureEmoji)
+.append(placesEmoji)
+.append(foodsEmoji)
+.append(activityEmoji)
+.append(objectsEmoji)
+.append(symbolsEmoji)
+.append(flagsEmoji);
+if(customemojis.length > 0) {
+createCustomEmojiTab(emojiCustomContainer,container);
+}
+createEmojiTab('people',emojiPeopleContainer,container);
+createEmojiTab('nature',emojiNatureContainer,container);
+createEmojiTab('foods',emojiFoodsContainer,container);
+createEmojiTab('activity',emojiActivityContainer,container);
+createEmojiTab('places',emojiPlacesContainer,container);
+createEmojiTab('objects',emojiObjectsContainer,container);
+createEmojiTab('symbols',emojiSymbolsContainer,container);
+createEmojiTab('flags',emojiFlagsContainer,container);
+//wrapper.append(spinnerContainer);
+wrapper.append(tabs);
+if(customemojis.length > 0) {
+wrapper.append(emojiCustomContainer);
+}
+wrapper.append(emojiPeopleContainer)
+.append(emojiNatureContainer)
+.append(emojiFoodsContainer)
+.append(emojiActivityContainer)
+.append(emojiPlacesContainer)
+.append(emojiObjectsContainer)
+.append(emojiSymbolsContainer)
+.append(emojiFlagsContainer);
+container.append(wrapper);
+appender.append(container);
+this.append(appender);
+if(settings.twemoji){
+twemoji.parse(emojiPeopleContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiNatureContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiFoodsContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiActivityContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiPlacesContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiObjectsContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiSymbolsContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(emojiFlagsContainer[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+twemoji.parse(tabs[0],{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
+}
+this.click(function(e){
+e.preventDefault();
+if(!$(e.target).parent().hasClass('lsx-emojipicker-tabs') 
+&& !$(e.target).parent().parent().hasClass('lsx-emojipicker-tabs') 
+&& !$(e.target).parent().hasClass('lsx-emoji-tab')
+&& !$(e.target).parent().parent().hasClass('lsx-emoji-tab')){
+if(container.is(':visible')){
+container.hide();
+} else {
+container.show();
+}
+}
+});
+return this;
+}
+}
+function createEmojiTab(type,container,wrapper) {
+for(var i = 0;i < emoji[type].length;i++){
+var selectedEmoji = emoji[type][i];
+var emoticon = $('<span></span>')
+.data('value',selectedEmoji.value)
+.attr('title',selectedEmoji.name)
+.html(selectedEmoji.value);
+emoticon.click(function(e){
+e.preventDefault();
+settings.onSelect({
+'name':$(this).attr('title'),
+'value':$(this).data('value')
+});
+if(settings.closeOnSelect){
+wrapper.hide();
+}
+});
+container.append(emoticon);
+}
+}
+function createCustomEmojiTab(container,wrapper) {
+var customemojis = JSON.parse(localStorage.current_custom_emojis);
+for(var i = 0;i < customemojis.length;i++){
+var selectedEmoji = customemojis[i];
+var emoticon = $('<span></span>')
+.data('value',selectedEmoji.url)
+.attr('title',selectedEmoji.code)
+.html($("<img>").addClass("emoji").attr("src",selectedEmoji.url));
+emoticon.click(function(e){
+e.preventDefault();
+settings.onSelect({
+'name':$(this).attr('title'),
+'value':$(this).data('value')
+});
+if(settings.closeOnSelect){
+wrapper.hide();
+}
+});
+container.append(emoticon);
+}
+}
+}(jQuery, window));
+}
--- a/assets/js/halcyon/halcyonFunctions.js
+++ b/assets/js/halcyon/halcyonFunctions.js
@ -222,6 +222,16 @@ localStorage.setItem("current_instance_charlimit",500);
 current_instance_charlimit = 500;
 }
 });
+api.get("custom_emojis",function(data) {
+var emojis = new Array();
+for(i=0;i<data.length;i++) {
+var emoji = new Object();
+emoji.code = data[i].shortcode;
+emoji.url = data[i].url;
+emojis.push(emoji);
+}
+localStorage.setItem("current_custom_emojis",JSON.stringify(emojis));
+});
 $.cookie("session","true",{path:'/'});
 }
 function refreshApp() {
@ -321,6 +331,7 @@ if(follow_loaded == 3) {
 clearInterval(checkload);
 $(".follow_loading").hide();
 $(".what_to_follow").show();
+replace_emoji();
 }
 },100);
 }
@ -358,10 +369,15 @@ search.accounts[0].display_name = search.accounts[0].username;
 }
 $('.what_to_follow_'+id+' > .icon_box img').attr('src',search.accounts[0].avatar);
 $('.what_to_follow_'+id+' .label_box > a').attr('href',getRelativeURL(search.accounts[0].url,search.accounts[0].id));
-$('.what_to_follow_'+id+' .label_box > a > h3 .dn').text(search.accounts[0].display_name);
+$('.what_to_follow_'+id+' .label_box > a > h3 .dn').addClass("emoji_poss").text(search.accounts[0].display_name);
 $('.what_to_follow_'+id+' .label_box > a > h3 .un').text('@'+search.accounts[0].username);
 $('.what_to_follow_'+id+' .label_box > .follow_button').attr('mid',search.accounts[0].id);
 $('.what_to_follow_'+id+' .label_box > .follow_button').attr('data',search.accounts[0].url);
 follow_loaded++;
 });
 }
+function checkEmojiSupport() {
+var ctx = document.createElement("canvas").getContext("2d");
+ctx.fillText("😗",-2,4);
+return ctx.getImageData(0,0,1,1).data[3] > 0;
+}
--- a/assets/js/halcyon/halcyonTemplates.js
+++ b/assets/js/halcyon/halcyonTemplates.js
@ -312,7 +312,7 @@ const html = (`
 </a>
 <i class="fa fa-fw fa-star font-icon favourite"></i>
 <a class="notice_author" href="${notice_author_link}">
-<span class="emoji_poss" >${htmlEscape(NotificationObj.account.display_name)}</span> favourited Your Toot
+<span class="emoji_poss">${htmlEscape(NotificationObj.account.display_name)}</span> favourited Your Toot
 </a>
 </div>
 <div class="notice_entry_body">
@ -329,7 +329,7 @@ ${htmlEscape(NotificationObj.status.account.display_name)}
 </a>
 </div>
 </header>
-<article class="toot_article">
+<article class="toot_article emoji_poss">
 <p>${NotificationObj.status.content}</p>
 </article>
 <footer class="toot_footer"></footer>
@ -369,7 +369,7 @@ ${htmlEscape(NotificationObj.status.account.display_name)}
 </a>
 </div>
 </header>
-<article class="toot_article">
+<article class="toot_article emoji_poss">
 <p>${NotificationObj.status.content}</p>
 </article>
 <footer class="toot_footer"></footer>
@ -531,8 +531,8 @@ const html = (`
 <i class="fa fa-fw fa-user-plus"></i>
 <span>Follow</span>
 </button>
-<div class="follows_profile_name_box emoji_poss">
-<a class="js_follows_profile_link" href="${profile_link}">
+<div class="follows_profile_name_box">
+<a class="js_follows_profile_link emoji_poss" href="${profile_link}">
 <h2 class="js_follows_profile_displayname">
 ${htmlEscape(AccountObj.display_name)}
 </h2>
@ -541,7 +541,7 @@ ${htmlEscape(AccountObj.display_name)}
 </span>
 </a>
 </div>
-<div class="follows_profile_bio" >
+<div class="follows_profile_bio emoji_poss">
 <p>${AccountObj.note}</p>
 </div>
 </div>
@ -635,7 +635,7 @@ ${htmlEscape(status.account.display_name)}
 <section class="toot_content">
 <article class="toot_article ${article_option} emoji_poss">
 ${alart_text}
-<span class="status_content">
+<span class="status_content emoji_poss">
 ${status.content}
 </span>
 ${media_views}
@ -712,6 +712,9 @@ ${toot_reblog_button}
 </label>
 </div>
 </div>
+<label for="reply_status_emoji" class="status_emoji status_option_button">
+<i class="fa fa-smile-o" aria-hidden="true"></i>
+</label>
 <input id="reply_status_media_atta" name="files" type="file" multiple class="invisible"/>
 <input id="reply_status_cw" name="status_cw" type="checkbox" class="invisible" />
 <input id="reply_status_nsfw" name="status_nsfw" type="checkbox" class="invisible" />
@ -719,6 +722,7 @@ ${toot_reblog_button}
 <input id="reply_status_unlisted" name='privacy_option' value="unlisted" class="invisible" type="radio"${checked_unlisted}>
 <input id="reply_status_fonly" name='privacy_option' value="private" class="invisible" type="radio"${checked_private}>
 <input id="reply_status_direct" name='privacy_option' value="direct" class="invisible" type="radio"${checked_direct}>
+<button id="reply_status_emoji" name="status_emoji" type="button"></button>
 <div class="submit_status_label_wrap">
 <span class="character_count">
 ${current_instance_charlimit}
@ -809,7 +813,7 @@ ${htmlEscape(status.reblog.account.display_name)}
 <section class="toot_content">
 <article class="toot_article ${article_option} emoji_poss">
 ${alart_text}
-<span class="status_content">
+<span class="status_content emoji_poss">
 ${status.reblog.content}
 </span>
 ${media_views}
@ -891,6 +895,9 @@ ${media_views}
 </label>
 </div>
 </div>
+<label for="single_reply_status_emoji" class="status_emoji status_option_button">
+<i class="fa fa-smile-o" aria-hidden="true"></i>
+</label>
 <input id="reply_status_media_atta" name="files" type="file" multiple class="invisible"/>
 <input id="reply_status_cw" name="status_cw" type="checkbox" class="invisible" />
 <input id="reply_status_nsfw" name="status_nsfw" type="checkbox" class="invisible" />
@ -898,6 +905,7 @@ ${media_views}
 <input id="reply_status_unlisted" name='privacy_option' value="unlisted" class="invisible" type="radio"${checked_unlisted}>
 <input id="reply_status_fonly" name='privacy_option' value="private" class="invisible" type="radio">
 <input id="reply_status_direct" name='privacy_option' value="direct" class="invisible" type="radio">
+<button id="reply_status_emoji" name="status_emoji" type="button"></button>
 <div class="submit_status_label_wrap">
 <span class="character_count">
 ${current_instance_charlimit}
@ -1025,7 +1033,7 @@ ${htmlEscape(status.account.display_name)}
 </header>
 <article class="toot_article ${article_option}">
 ${alart_text}
-<span class="status_content">
+<span class="status_content emoji_poss">
 ${status.content}
 </span>
 ${media_views}
@ -1131,7 +1139,7 @@ ${htmlEscape(status.reblog.account.display_name)}
 </header>
 <article class="toot_article ${article_option}">
 ${alart_text}
-<span class="status_content">
+<span class="status_content emoji_poss">
 ${status.reblog.content}
 </span>
 ${media_views}
--- a/assets/js/halcyon/halcyonUI.js
+++ b/assets/js/halcyon/halcyonUI.js
@ -421,7 +421,6 @@ function setFollows(mid, param, load_options) {
 let isSyncing = true,
 followsList = [];
 api.get('accounts/'+mid+'/'+param, load_options, function(follows) {
-
 for (let i in follows) {
 follows_template(follows[i]).appendTo("#js-follows_profile");
 followsList.unshift(follows[i].id);
@ -490,9 +489,9 @@ $("#js_profile_image").attr('src', AccountObj.avatar);
 $("#js_toots_count").text(AccountObj.statuses_count);
 $("#js_following_count").text(AccountObj.following_count);
 $("#js_followers_count").text(AccountObj.followers_count);
-$("#js_profile_displayname").text(AccountObj.display_name);
+$("#js_profile_displayname").addClass("emoji_poss").text(AccountObj.display_name);
 $("#js_profile_username").text(AccountObj.acct);
-$("#js_profile_bio").html(AccountObj.note);
+$("#js_profile_bio").addClass("emoji_poss").html(AccountObj.note);
 console.log(AccountObj.id);
 console.log(current_id);
 if( AccountObj.id == current_id ) {
@ -557,16 +556,18 @@ $('#header .header_nav_list .notification_badge').removeClass('invisible');
 $('#header .header_nav_list .notification_badge').text( current_count );
 }
 api.stream("user", function(userstream) {
-if (userstream.event === "update" & location.pathname !== "/" ) {
+if(userstream.event === "update" & location.pathname !== "/") {
 $('#header .header_nav_list .home_badge').removeClass('invisible');
 }
-else if (userstream.event === "notification" & location.pathname !== "/notifications") {
+else if(userstream.event === "notification" & location.pathname !== "/notifications") {
 current_count += 1;
-localStorage.setItem("notification_count", current_count );
-$('#header .header_nav_list .notification_badge').text( current_count );
-if ( $('#header .header_nav_list .notification_badge').hasClass('invisible') ) {
+localStorage.setItem("notification_count",current_count);
+$('#header .header_nav_list .notification_badge').text(current_count );
+if($('#header .header_nav_list .notification_badge').hasClass('invisible')) {
 $('#header .header_nav_list .notification_badge').removeClass('invisible')
 }
+}
+if(userstream.event === "notification") {
 if(userstream.payload.account.display_name.length == 0) {
 userstream.payload.account.display_name = userstream.payload.account.username;
 }
@ -652,6 +653,11 @@ setOverlayMediaWithoutStatus($(this).attr('src'));
 });
 })
 $(function() {
+$(document).on('click', function(e) {
+if(!$(e.target).closest('#creat_status').length && !$(e.target).closest('.overlay_status').length) {
+$('#overlay_status_emoji').lsxEmojiPicker("destroy");
+}
+});
 $(document).on('click', '#creat_status', function(e) {
 switch(localStorage.getItem("setting_post_privacy")) {
 case "public":picon="globe";break;
@ -670,17 +676,24 @@ autosize($('#overlay_status_form .status_textarea textarea'));
 $('#overlay_status_form input[name="privacy_option"]').val([localStorage.getItem("setting_post_privacy")]);
 $('#overlay_status_form .expand_privacy_menu_button > i').attr('class', "fa fa-" + picon);
 $('#overlay_status_form .character_count').html(current_instance_charlimit);
+$('#overlay_status_emoji').lsxEmojiPicker({
+closeOnSelect:true,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+$('#overlay_status_form .status_textarea textarea').val($('#overlay_status_form .status_textarea textarea').val()+":"+emoji.name+": ");
+$('#overlay_status_form .status_textarea textarea').trigger("change");
+$('#overlay_status_form .status_textarea textarea').focus();
+var textLen = $('#overlay_status_form .status_textarea textarea').val().length * 2;
+$('#overlay_status_form .status_textarea textarea')[0].setSelectionRange(textLen,textLen);
+}
+});
 if(localStorage.setting_post_sensitive == "true") {
 $("#overlay_status_nsfw")[0].checked = true;
 $('#overlay_status_form .media_attachments_preview_area').addClass('nsfw');
 }
 });
 $(document).on('change keyup','#overlay_status_form textarea, #overlay_status_form .status_spoiler', function(e) {
-if (
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
+if(e.keyCode !== 224 & e.keyCode !== 17) {
 const textCount = $('#overlay_status_form textarea').val().length + $('#overlay_status_form .status_spoiler').val().length;
 let textLen = ( current_instance_charlimit - textCount );
 if ( textLen <= -1 ) {
@ -781,6 +794,8 @@ $('#overlay_status_form .status_textarea').removeClass('disallow_select');
 $('#overlay_status_form .character_count').html(current_instance_charlimit);
 $('.overlay_status .submit_status_label').removeClass('active_submit_button');
 $('.overlay_status').addClass('invisible');
+autosize.destroy($('#overlay_status_form .status_textarea textarea'));
+$('#overlay_status_emoji').lsxEmojiPicker("destroy");
 $('#js-overlay_content_wrap').removeClass('view');
 $('#js-overlay_content_wrap').removeClass('black_05');
 putMessage('Your Toot was posted!');
@ -798,20 +813,18 @@ media_array.unshift(postMedia.id);
 })
 $(function() {
 $(document).on('click', function(e) {
-if (!$(e.target).closest('#header_status_form').length) {
+if(!$(e.target).closest('#header_status_form').length) {
 $('#header_status_form .submit_status_label').removeClass('active_submit_button');
 $('#header_status_form .expand_privacy_menu').addClass('invisible');
 $('#header_status_form .status_textarea textarea').removeClass('focus');
 $('#header_status_form .status_bottom').addClass('invisible');
 autosize.destroy($('#header_status_form .status_textarea textarea'));
+$('#header_status_emoji').lsxEmojiPicker("destroy");
 }
 });
 $(document).on('change keyup','#header_status_form textarea, #header_status_form .status_spoiler', function(e) {
-if (
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
+if(e.keyCode !== 224 & e.keyCode !== 17) {
+$(this).val(replaced_emoji_return($(this).val()));
 const textCount = $('#header_status_form textarea').val().length + $('#header_status_form .status_spoiler').val().length;
 let textLen = ( current_instance_charlimit - textCount );
 if ( textLen <= -1 ) {
@ -823,7 +836,6 @@ $('#header_status_form').addClass('ready');
 $('#header_status_form .character_count').removeClass('red');
 $('#header_status_form').removeClass('ready');
 }
-$(this).val(replaced_emoji_return($(this).val()));
 $('#header_status_form .character_count').text(textLen);
 }
 });
@ -853,6 +865,17 @@ autosize($('#header_status_form .status_textarea textarea'));
 $('#header_status_form .status_bottom').removeClass('invisible');
 $('#header_status_form .submit_status_label').addClass('active_submit_button');
 $('#header_status_form .character_count').html(current_instance_charlimit);
+$('#header_status_emoji').lsxEmojiPicker({
+closeOnSelect:true,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+$('#header_status_form .status_textarea textarea').val($('#header_status_form .status_textarea textarea').val()+":"+emoji.name+": ");
+$('#header_status_form .status_textarea textarea').trigger("change");
+$('#header_status_form .status_textarea textarea').focus();
+var textLen = $('#header_status_form .status_textarea textarea').val().length * 2;
+$('#header_status_form .status_textarea textarea')[0].setSelectionRange(textLen,textLen);
+}
+});
 if(localStorage.setting_post_sensitive == "true") {
 $("#header_status_nsfw")[0].checked = true;
 $('#header_status_form .media_attachments_preview_area').addClass('nsfw');
@ -946,6 +969,7 @@ $('#reply_status_form .expand_privacy_menu').addClass('invisible');
 $('#reply_status_form .status_bottom').addClass('invisible');
 $('#reply_status_form .status_textarea textarea').removeClass('focus');
 $('#reply_status_form .submit_status_label').removeClass('active_submit_button');
+$('#reply_status_emoji').lsxEmojiPicker("destroy");
 }
 });
 $(document).on('click','#reply_status_form', function(e) {
@ -956,6 +980,17 @@ $('#reply_status_form .status_bottom').removeClass('invisible');
 $('#reply_status_form .submit_status_label').addClass('active_submit_button');
 $('#reply_status_form textarea').val("@"+$('#reply_status_form').attr('username')+" ");
 $('#reply_status_form .character_count').html(current_instance_charlimit);
+$('#reply_status_emoji').lsxEmojiPicker({
+closeOnSelect:true,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+$('#reply_status_form .status_textarea textarea').val($('#reply_status_form .status_textarea textarea').val()+":"+emoji.name+": ");
+$('#reply_status_form .status_textarea textarea').trigger("change");
+$('#reply_status_form .status_textarea textarea').focus();
+var textLen = $('#reply_status_form .status_textarea textarea').val().length * 2;
+$('#reply_status_form .status_textarea textarea')[0].setSelectionRange(textLen,textLen);
+}
+});
 if(localStorage.setting_post_sensitive == "true") {
 $("#reply_status_nsfw")[0].checked = true;
 $('#reply_status_form .media_attachments_preview_area').addClass('nsfw');
@ -963,11 +998,7 @@ $('#reply_status_form .media_attachments_preview_area').addClass('nsfw');
 }
 });
 $(document).on('change keyup','#reply_status_form textarea, #reply_status_form .status_spoiler', function(e) {
-if (
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
+if(e.keyCode !== 224 & e.keyCode !== 17) {
 const textCount = $('#reply_status_form textarea').val().length + $('#reply_status_form .status_spoiler').val().length;
 let textLen = ( current_instance_charlimit - textCount );
 if ( textLen <= -1 ) {
@ -1084,6 +1115,11 @@ media_array.unshift(postMedia.id);
 });
 })
 $(function() {
+$(document).on('click', function(e) {
+if(!$(e.target).closest('.reply_button').length && !$(e.target).closest('.single_reply_status').length) {
+$('#single_reply_status_emoji').lsxEmojiPicker("destroy");
+}
+});
 $(document).on('click','single_reply_status_header, #single_reply_status_form', function(e) {
 e.stopPropagation();
 });
@ -1114,6 +1150,17 @@ $('#single_reply_status_form').attr('tid',sid);
 $('.single_reply_status .single_reply_status_header span').text("Reply to "+display_name);
 $('#single_reply_status_form textarea').val(acct+" ");
 $('#single_reply_status_form .character_count').html(current_instance_charlimit);
+$('#single_reply_status_emoji').lsxEmojiPicker({
+closeOnSelect:true,
+twemoji:!checkEmojiSupport(),
+onSelect:function(emoji) {
+$('#single_reply_status_form .status_textarea textarea').val($('#single_reply_status_form .status_textarea textarea').val()+":"+emoji.name+": ");
+$('#single_reply_status_form .status_textarea textarea').trigger("change");
+$('#single_reply_status_form .status_textarea textarea').focus();
+var textLen = $('#single_reply_status_form .status_textarea textarea').val().length * 2;
+$('#single_reply_status_form .status_textarea textarea')[0].setSelectionRange(textLen,textLen);
+}
+});
 if(localStorage.setting_post_sensitive == "true") {
 $("#single_reply_status_nsfw")[0].checked = true;
 $('#single_reply_status_form .media_attachments_preview_area').addClass('nsfw');
@ -1125,11 +1172,7 @@ replace_emoji();
 return false;
 });
 $(document).on('change keyup','#single_reply_status_form textarea, #single_reply_status_form .status_spoiler', function(e) {
-if (
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
+if(e.keyCode !== 224 & e.keyCode !== 17) {
 const textCount = $('#single_reply_status_form textarea').val().length + $('#single_reply_status_form .status_spoiler').val().length;
 let textLen = ( current_instance_charlimit - textCount );
 if ( textLen <= -1 ) {
@ -1198,6 +1241,8 @@ $('#single_reply_status_form .status_textarea').removeClass('disallow_select');
 $('#single_reply_status_form .character_count').html(current_instance_charlimit);
 $('.single_reply_status .submit_status_label').removeClass('active_submit_button');
 $('.single_reply_status').addClass('invisible');
+autosize.destroy($('#single_reply_status_form .status_textarea textarea'));
+$('#single_reply_status_emoji').lsxEmojiPicker("destroy");
 $('#js-overlay_content_wrap').removeClass('view');
 $('#js-overlay_content_wrap').removeClass('black_05');
 $("#js-overlay_content_wrap .single_reply_status .status_preview").empty();
@ -1233,6 +1278,8 @@ $('#single_reply_status_form .status_textarea').removeClass('disallow_select');
 $('#single_reply_status_form .character_count').html(current_instance_charlimit);
 $('.single_reply_status .submit_status_label').removeClass('active_submit_button');
 $('.single_reply_status').addClass('invisible');
+autosize.destroy($('#single_reply_status_form .status_textarea textarea'));
+$('#single_reply_status_emoji').lsxEmojiPicker("destroy");
 $('#js-overlay_content_wrap').removeClass('view');
 $('#js-overlay_content_wrap').removeClass('black_05');
 $("#js-overlay_content_wrap .single_reply_status .status_preview").empty();
--- a/assets/js/replace_emoji.js
+++ b/assets/js/replace_emoji.js
--- a/footer.php
+++ b/footer.php
@ -21,7 +21,6 @@ badges_update();
 $('.footer_widget_about').attr('href','https://'+current_instance+'/about');
 $('.footer_widget_instance').attr('href','https://'+current_instance+'/about/more');
 $('.footer_widget_terms').attr('href','https://'+current_instance+'/terms');
-replace_emoji();
 </script>
 </body>
 </html>
--- a/header.php
+++ b/header.php
@ -12,6 +12,7 @@ error_reporting(E_ALL);
 <link rel="shortcut icon" href="/assets/images/favicon.ico">
 <link rel="stylesheet" href="/assets/css/style.css" media="all">
 <link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
+<link rel="stylesheet" href="/assets/css/emojipicker.css" media="all">
 <script src="//yastatic.net/jquery/3.2.1/jquery.min.js"></script>
 <script src="/assets/js/halcyon/halcyonFunctions.js"></script>
 <script src="/assets/js/mastodon.js/mastodon.js"></script><!-- thx @kirschn -->
@ -19,6 +20,8 @@ error_reporting(E_ALL);
 <script src="/assets/js/autosize/autosize.js"></script>
 <script src="/assets/js/shortcut.js"></script>
 <script src="/assets/js/replace_emoji.js"></script>
+<script src="/assets/js/emojipicker/emojidata.js"></script>
+<script src="/assets/js/emojipicker/emojipicker.js"></script>
 <script src="/assets/js/halcyon/halcyonTemplates.js"></script>
 <script src="/assets/js/halcyon/halcyonUI.js"></script>
 <script src="//cdn.staticfile.org/twemoji/2.2.5/twemoji.min.js"></script>
@ -93,7 +96,7 @@ resetApp();
 <li class="header_nav_item my_account_wrap">
 <button class="header_account_avatar">
 <div class="my_account">
-<img class="js_current_profile_image" />
+<img class="js_current_profile_image">
 </div>
 </button>
 <nav class="header_my_account_nav invisible">
--- a/user.php
+++ b/user.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a><span class="profile_followed_by invisible">FOLLOWS YOU</span>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 </aside>
--- a/user_favorite.php
+++ b/user_favorite.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 </aside>
--- a/user_followers.php
+++ b/user_followers.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 <?php include dirname(__FILE__).('/widgets/side_who_to_follow.php'); ?>
--- a/user_following.php
+++ b/user_following.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 <?php include dirname(__FILE__).('/widgets/side_who_to_follow.php'); ?>
--- a/user_include_replies.php
+++ b/user_include_replies.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 </aside>
--- a/user_only_media.php
+++ b/user_only_media.php
@ -8,12 +8,12 @@
 </div>
 <section class="profile_section_wrap">
 <h1 class="profile_displayname">
-<a id="js_profile_displayname" class="emoji_poss" href="#"></a>
+<a id="js_profile_displayname" href="#"></a>
 </h1>
 <h2 class="profile_username">
@<a id="js_profile_username" href="#"></a>
 </h2>
-<p id="js_profile_bio" class="profile_bio emoji_poss"></p>
+<p id="js_profile_bio" class="profile_bio"></p>
 <?php include dirname(__FILE__).('/widgets/user_recent_images.php'); ?>
 </section>
 </aside>
--- a/version.txt
+++ b/version.txt
@ -1 +1 @@
-1.2.1
+1.2.2
--- a/widgets/create_status.php
+++ b/widgets/create_status.php
@ -38,6 +38,9 @@
 </label>
 </div>
 </div>
+<label for="header_status_emoji" class="status_emoji status_option_button">
+<i class="fa fa-smile-o" aria-hidden="true"></i>
+</label>
 <input id="header_status_media_atta" name="files" type="file" multiple class="invisible">
 <input id="header_status_cw" name="status_cw" type="checkbox" class="invisible">
 <input id="header_status_nsfw" name="status_nsfw" type="checkbox" class="invisible">
@ -45,6 +48,7 @@
 <input id="header_status_unlisted" name='privacy_option' value="unlisted" class="invisible" type="radio">
 <input id="header_status_fonly" name='privacy_option' value="private" class="invisible" type="radio">
 <input id="header_status_direct" name='privacy_option' value="direct" class="invisible" type="radio">
+<button id="header_status_emoji" name="status_emoji" type="button"></button>
 <div class="submit_status_label_wrap">
 <span class="character_count">
 </span>
--- a/widgets/overlay_create_status.php
+++ b/widgets/overlay_create_status.php
@ -39,6 +39,9 @@
 </label>
 </div>
 </div>
+<label for="overlay_status_emoji" class="status_emoji status_option_button">
+<i class="fa fa-smile-o" aria-hidden="true"></i>
+</label>
 <input id="overlay_status_media_atta" name="files" type="file" multiple class="invisible">
 <input id="overlay_status_cw" name="status_cw" type="checkbox" class="invisible">
 <input id="overlay_status_nsfw" name="status_nsfw" type="checkbox" class="invisible">
@ -46,6 +49,7 @@
 <input id="overlay_status_unlisted" name='privacy_option' value="unlisted" class="invisible" type="radio">
 <input id="overlay_status_fonly" name='privacy_option' value="private" class="invisible" type="radio">
 <input id="overlay_status_direct" name='privacy_option' value="direct" class="invisible" type="radio">
+<button id="overlay_status_emoji" name="status_emoji" type="button"></button>
 <div class="submit_status_label_wrap">
 <span class="character_count">
 </span>
--- a/widgets/overlay_single_reply.php
+++ b/widgets/overlay_single_reply.php
@ -40,6 +40,9 @@
 </label>
 </div>
 </div>
+<label for="single_reply_status_emoji" class="status_emoji status_option_button">
+<i class="fa fa-smile-o" aria-hidden="true"></i>
+</label>
 <input id="single_reply_status_media_atta" name="files" type="file" multiple class="invisible">
 <input id="single_reply_status_cw" name="status_cw" type="checkbox" class="invisible">
 <input id="single_reply_status_nsfw" name="status_nsfw" type="checkbox" class="invisible">
@ -47,6 +50,7 @@
 <input id="single_reply_status_unlisted" name='privacy_option' value="unlisted" class="invisible" type="radio">
 <input id="single_reply_status_fonly" name='privacy_option' value="private" class="invisible" type="radio">
 <input id="single_reply_status_direct" name='privacy_option' value="direct" class="invisible" type="radio">
+<button id="single_reply_status_emoji" name="status_emoji" type="button"></button>
 <div class="submit_status_label_wrap">
 <span class="character_count">
 </span>
--- a/widgets/side_who_to_follow.php
+++ b/widgets/side_who_to_follow.php
@ -34,7 +34,7 @@ Halcyon needs to connect to an external server to get a list of users which have
 <div class="label_box">
 <a href="">
 <h3>
-<span class="dn emoji_poss"></span>
+<span class="dn"></span>
 <span class="un"></span>
 </h3>
 </a>
@ -51,7 +51,7 @@ Halcyon needs to connect to an external server to get a list of users which have
 <div class="label_box">
 <a href="">
 <h3>
-<span class="dn emoji_poss"></span>
+<span class="dn"></span>
 <span class="un"></span>
 </h3>
 </a>
@ -68,7 +68,7 @@ Halcyon needs to connect to an external server to get a list of users which have
 <div class="label_box">
 <a href="">
 <h3>
-<span class="dn emoji_poss"></span>
+<span class="dn"></span>
 <span class="un"></span>
 </h3>
 </a>
 @ -1 +1 @@
 .2.1
 .2.2