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

README.md

@@ -10,17 +10,18 @@ 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://itter.photog.social - 1.2.2
-- https://halcyon.toromino.de - 1.2.1
+- https://halcyon.distsn.org - 1.2.1
-- https://itter.photog.social - 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.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)
@@ -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)

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

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;

assets/js/emojipicker/LICENSE

@@ -0,0 +1,3 @@
+LsxEmojiPicker
+A simple and lightweight emoji picker plugin for jQuery
+(c) 2018 Lascaux s.r.l.

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

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

assets/js/halcyon/halcyonTemplates.js

@@ -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">
+<div class="follows_profile_name_box">
-<a class="js_follows_profile_link" href="${profile_link}">
+<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}

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 ) {
@@ -567,6 +566,8 @@ $('#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 (
+if(e.keyCode !== 224 & e.keyCode !== 17) {
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
 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!');
@@ -804,14 +819,12 @@ $('#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 (
+if(e.keyCode !== 224 & e.keyCode !== 17) {
-e.keyCode !== 224 &
+$(this).val(replaced_emoji_return($(this).val()));
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
 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 (
+if(e.keyCode !== 224 & e.keyCode !== 17) {
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
 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 (
+if(e.keyCode !== 224 & e.keyCode !== 17) {
-e.keyCode !== 224 &
-e.keyCode !== 17&
-e.keyCode !== undefined
-) {
 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();

assets/js/replace_emoji.js

@@ -1,4 +1,118 @@
-const emoji_dict = {":hash:": "#⃣",
+.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;
+}const emoji_dict = {":hash:":"#⃣",
 ":zero:":"0⃣",
 ":one:":"1⃣",
 ":two:":"2⃣",
@@ -20,11 +134,13 @@ const emoji_dict = {":hash:": "#⃣",
 ":arrow_upper_left:":"↖",
 ":third_place:":"🥉",
 ":third_place_medal:":"🥉",
+":3rd_place_medal:":"🥉",
 ":arrow_upper_right:":"↗",
 ":arrow_lower_right:":"↘",
 ":arrow_lower_left:":"↙",
 ":second_place:":"🥈",
 ":second_place_medal:":"🥈",
+":2nd_place_medal:":"🥈",
 ":leftwards_arrow_with_hook:":"↩",
 ":arrow_right_hook:":"↪",
 ":watch:":"⌚",
@@ -55,6 +171,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":aries:":"♈",
 ":first_place:":"🥇",
 ":first_place_medal:":"🥇",
+":1st_place_medal:":"🥇",
 ":taurus:":"♉",
 ":fencer:":"🤺",
 ":fencing:":"🤺",
@@ -1062,84 +1179,123 @@ const emoji_dict = {":hash:": "#⃣",
 ":loop:":"➿",
 ":flag_af:":"🇦🇫",
 ":af:":"🇦🇫",
+":afghanistan:":"🇦🇫",
 ":flag_al:":"🇦🇱",
 ":al:":"🇦🇱",
+":albania:":"🇦🇱",
 ":flag_dz:":"🇩🇿",
 ":dz:":"🇩🇿",
+":algeria:":"🇩🇿",
 ":flag_ad:":"🇦🇩",
 ":ad:":"🇦🇩",
+":andorra:":"🇦🇩",
 ":flag_ao:":"🇦🇴",
 ":ao:":"🇦🇴",
+":angola:":"🇦🇴",
 ":flag_ag:":"🇦🇬",
 ":ag:":"🇦🇬",
+":antigua_barbuda:":"🇦🇬",
 ":flag_ar:":"🇦🇷",
 ":ar:":"🇦🇷",
+":argentinia:":"🇦🇷",
 ":flag_am:":"🇦🇲",
 ":am:":"🇦🇲",
+":armenia:":"🇦🇲",
 ":flag_au:":"🇦🇺",
 ":au:":"🇦🇺",
+":australia:":"🇦🇺",
 ":flag_at:":"🇦🇹",
 ":at:":"🇦🇹",
+":austria:":"🇦🇹",
 ":flag_az:":"🇦🇿",
 ":az:":"🇦🇿",
+":azerbaijan:":"🇦🇿",
 ":flag_bs:":"🇧🇸",
 ":bs:":"🇧🇸",
+":bahamas:":"🇧🇸",
 ":flag_bh:":"🇧🇭",
 ":bh:":"🇧🇭",
+":bahrain:":"🇧🇭",
 ":flag_bd:":"🇧🇩",
 ":bd:":"🇧🇩",
+":bangladesh:":"🇧🇩",
 ":flag_bb:":"🇧🇧",
 ":bb:":"🇧🇧",
+":barbados:":"🇧🇧",
 ":flag_by:":"🇧🇾",
 ":by:":"🇧🇾",
+":belarus:":"🇧🇾",
 ":flag_be:":"🇧🇪",
 ":be:":"🇧🇪",
+":belgium:":"🇧🇪",
 ":flag_bz:":"🇧🇿",
 ":bz:":"🇧🇿",
+":belize:":"🇧🇿",
 ":flag_bj:":"🇧🇯",
 ":bj:":"🇧🇯",
+":benin:":"🇧🇯",
 ":flag_bt:":"🇧🇹",
 ":bt:":"🇧🇹",
+":bhutan:":"🇧🇹",
 ":flag_bo:":"🇧🇴",
 ":bo:":"🇧🇴",
+":bolivia:":"🇧🇴",
 ":flag_ba:":"🇧🇦",
 ":ba:":"🇧🇦",
+":bosnia_herzegovina:":"🇧🇦",
 ":flag_bw:":"🇧🇼",
 ":bw:":"🇧🇼",
+":botswana:":"🇧🇼",
 ":flag_br:":"🇧🇷",
 ":br:":"🇧🇷",
+":brazil:":"🇧🇷",
 ":flag_bn:":"🇧🇳",
 ":bn:":"🇧🇳",
+":brunei:":"🇧🇳",
 ":flag_bg:":"🇧🇬",
 ":bg:":"🇧🇬",
+":bulgaria:":"🇧🇬",
 ":flag_bf:":"🇧🇫",
 ":bf:":"🇧🇫",
+":burkina_faso:":"🇧🇫",
 ":flag_bi:":"🇧🇮",
 ":bi:":"🇧🇮",
+":burundi:":"🇧🇮",
 ":flag_kh:":"🇰🇭",
 ":kh:":"🇰🇭",
+":cambodia:":"🇰🇭",
 ":flag_cm:":"🇨🇲",
 ":cm:":"🇨🇲",
+":cameroon:":"🇨🇲",
 ":flag_ca:":"🇨🇦",
 ":ca:":"🇨🇦",
+":canada:":"🇨🇦",
 ":flag_cv:":"🇨🇻",
 ":cv:":"🇨🇻",
+":cape_verde:":"🇨🇻",
 ":call_me_tone4:":"🤙🏾",
 ":call_me_hand_tone4:":"🤙🏾",
 ":flag_cf:":"🇨🇫",
 ":cf:":"🇨🇫",
+":central_african_republic:":"🇨🇫",
 ":flag_td:":"🇹🇩",
 ":td:":"🇹🇩",
+":chad:":"🇹🇩",
 ":flag_cl:":"🇨🇱",
+":cl:":"🇨🇱",
 ":chile:":"🇨🇱",
 ":flag_co:":"🇨🇴",
 ":co:":"🇨🇴",
+":colombia:":"🇨🇴",
 ":flag_km:":"🇰🇲",
 ":km:":"🇰🇲",
+":comoros:":"🇰🇲",
 ":flag_cr:":"🇨🇷",
 ":cr:":"🇨🇷",
+":costa_rica:":"🇨🇷",
 ":flag_ci:":"🇨🇮",
 ":ci:":"🇨🇮",
+":cote_divoire:":"🇨🇮",
 ":flag_hr:":"🇭🇷",
 ":hr:":"🇭🇷",
 ":flag_cu:":"🇨🇺",
@@ -1501,6 +1657,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":tickets:":"🎟",
 ":admission_tickets:":"🎟",
 ":medal:":"🏅",
+":medal_sports:":"🏅",
 ":sports_medal:":"🏅",
 ":lifter:":"🏋",
 ":weight_lifter:":"🏋",
@@ -1510,6 +1667,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":race_car:":"🏎",
 ":racing_car:":"🏎",
 ":military_medal:":"🎖",
+":medal_military:":"🎖",
 ":reminder_ribbon:":"🎗",
 ":hot_pepper:":"🌶",
 ":right_facing_fist_tone4:":"🤜🏾",
@@ -1613,6 +1771,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":satellite_orbital:":"🛰",
 ":fork_knife_plate:":"🍽",
 ":fork_and_knife_with_plate:":"🍽",
+":plate_with_cutlery:":"🍽",
 ":eye:":"👁",
 ":levitate:":"🕴",
 ":man_in_business_suit_levitating:":"🕴",
@@ -2041,27 +2200,59 @@ const emoji_dict = {":hash:": "#⃣",
 ":vulcan_tone5:":"🖖🏿",
 ":raised_hand_with_part_between_middle_and_ring_fingers_tone5:":"🖖🏿",
 ":family_mmb:":"👨‍👨‍👦",
+":family_man_man_boy:":"👨‍👨‍👦",
 ":family_mmbb:":"👨‍👨‍👦‍👦",
+":family_man_man_boy_boy:":"👨‍👨‍👦‍👦",
 ":family_mmg:":"👨‍👨‍👧",
+":family_man_man_girl:":"👨‍👨‍👧",
 ":family_mmgb:":"👨‍👨‍👧‍👦",
+":family_man_man_girl_boy:":"👨‍👨‍👧‍👦",
 ":family_mmgg:":"👨‍👨‍👧‍👧",
-":family_mwbb:": "👨‍👩‍👧‍👦",
+":family_man_man_girl_girl:":"👨‍👨‍👧‍👧",
+":family_mwb:":"👨‍👩‍👦",
+":family_man_woman_boy:":"👨‍👩‍👦",
+":family_mwbb:":"👨‍👩‍👦‍👦",
+":family_man_woman_boy_boy:":"👨‍👩‍👦‍👦",
 ":family_mwg:":"👨‍👩‍👧",
+":family_man_woman_girl:":"👨‍👩‍👧",
 ":family_mwgb:":"👨‍👩‍👧‍👦",
+":family_man_woman_girl_boy:":"👨‍👩‍👧‍👦",
 ":family_mwgg:":"👨‍👩‍👧‍👧",
+":family_man_woman_girl_girl:":"👨‍👩‍👧‍👧",
 ":family_wwb:":"👩‍👩‍👦",
+":family_woman_woman_boy:":"👩‍👩‍👦",
 ":family_wwbb:":"👩‍👩‍👦‍👦",
+":family_woman_woman_boy_boy:":"👩‍👩‍👦‍👦",
 ":family_wwg:":"👩‍👩‍👧",
+":family_woman_woman_girl:":"👩‍👩‍👧",
 ":family_wwgb:":"👩‍👩‍👧‍👦",
+":family_woman_woman_girl_boy:":"👩‍👩‍👧‍👦",
 ":family_wwgg:":"👩‍👩‍👧‍👧",
+":family_woman_woman_girl_girl:":"👩‍👩‍👧‍👧",
 ":couple_ww:":"👭",
+":couple_woman_woman:":"👭",
 ":couple_with_heart_ww:":"👩‍❤️‍👩",
+":couple_with_heart_woman_woman:":"👩‍❤️‍👩",
 ":couple_mm:":"👬",
+":couple_man_man:":"👬",
 ":couple_with_heart_mm:":"👨‍❤️‍👨",
+":couple_with_heart_man_man:":"👨‍❤️‍👨",
+":couple_mw:":"👫",
+":couple_man_woman:":"👫",
+":couple_with_heart_wm:":"👨‍❤️‍👩",
+":couple_with_heart_woman_man:":"👨‍❤️‍👩",
 ":kiss_ww:":"👩‍❤️‍💋‍👩",
+":kiss_woman_woman:":"👩‍❤️‍💋‍👩",
 ":couplekiss_ww:":"👩‍❤️‍💋‍👩",
+":couplekiss_woman_woman:":"👩‍❤️‍💋‍👩",
 ":kiss_mm:":"👨‍❤️‍💋‍👨",
+":kiss_man_man:":"👨‍❤️‍💋‍👨",
 ":couplekiss_mm:":"👨‍❤️‍💋‍👨",
+":couplekiss_man_man:":"👨‍❤️‍💋‍👨",
+":kiss_mw:":"👩‍❤️‍💋‍👨",
+":kiss_man_woman:":"👩‍❤️‍💋‍👨",
+":couplekiss_mw:":"👩‍❤️‍💋‍👨",
+":couplekiss_man_woman:":"👩‍❤️‍💋‍👨",
 ":tone1:":"🏻",
 ":tone2:":"🏼",
 ":tone3:":"🏽",
@@ -2085,6 +2276,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":stop_button:":"⏹",
 ":record_button:":"⏺",
 ":umbrella2:":"☂",
+":open_umbrella:":"☂",
 ":snowman2:":"☃",
 ":comet:":"☄",
 ":shamrock:":"☘",
@@ -2367,6 +2559,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":snowboarder_tone1:":"🏂🏻",
 ":snowboarder_light_skin_tone:":"🏂🏻",
 ":man_golfing:":"🏌",
+":golfing_man:":"🏌",
 ":man_golfing_tone1:":"🏌🏻",
 ":man_golfing_light_skin_tone:":"🏌🏻",
 ":man_golfing_tone2:":"🏌🏼",
@@ -2378,6 +2571,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_golfing_tone5:":"🏌🏿",
 ":man_golfing_dark_skin_tone:":"🏌🏿",
 ":woman_golfing:":"🏌",
+":golfing_woman:":"🏌",
 ":woman_golfing_tone1:":"🏌🏻",
 ":woman_golfing_light_skin_tone:":"🏌🏻",
 ":woman_golfing_tone2:":"🏌🏼",
@@ -2511,6 +2705,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_mountain_biking_tone1:":"🚵🏻",
 ":man_mountain_biking_light_skin_tone:":"🚵🏻",
 ":man_mountain_biking:":"🚵",
+":mountain_biking_man:":"🚵",
 ":woman_mountain_biking_tone5:":"🚵🏿",
 ":woman_mountain_biking_dark_skin_tone:":"🚵🏿",
 ":woman_mountain_biking_tone4:":"🚵🏾",
@@ -2522,6 +2717,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":woman_mountain_biking_tone1:":"🚵🏻",
 ":woman_mountain_biking_light_skin_tone:":"🚵🏻",
 ":woman_mountain_biking:":"🚵",
+":mountain_biking_woman:":"🚵",
 ":man_biking_tone5:":"🚴🏿",
 ":man_biking_dark_skin_tone:":"🚴🏿",
 ":man_biking_tone4:":"🚴🏾",
@@ -2533,6 +2729,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_biking_tone1:":"🚴🏻",
 ":man_biking_light_skin_tone:":"🚴🏻",
 ":man_biking:":"🚴",
+":biking_man:":"🚴",
 ":woman_biking_tone5:":"🚴🏿",
 ":woman_biking_dark_skin_tone:":"🚴🏿",
 ":woman_biking_tone4:":"🚴🏾",
@@ -2544,6 +2741,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":woman_biking_tone1:":"🚴🏻",
 ":woman_biking_light_skin_tone:":"🚴🏻",
 ":woman_biking:":"🚴",
+":biking_woman:":"🚴",
 ":man_rowing_boat_tone5:":"🚣🏿",
 ":man_rowing_boat_dark_skin_tone:":"🚣🏿",
 ":man_rowing_boat_tone4:":"🚣🏾",
@@ -2555,6 +2753,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_rowing_boat_tone1:":"🚣🏻",
 ":man_rowing_boat_light_skin_tone:":"🚣🏻",
 ":man_rowing_boat:":"🚣",
+":rowing_man:":"🚣",
 ":woman_rowing_boat_tone5:":"🚣🏿",
 ":woman_rowing_boat_dark_skin_tone:":"🚣🏿",
 ":woman_rowing_boat_tone4:":"🚣🏾",
@@ -2566,6 +2765,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":woman_rowing_boat_tone1:":"🚣🏻",
 ":woman_rowing_boat_light_skin_tone:":"🚣🏻",
 ":woman_rowing_boat:":"🚣",
+":rowing_woman:":"🚣",
 ":man_lifting_weights_tone5:":"🏋🏿",
 ":man_lifting_weights_dark_skin_tone:":"🏋🏿",
 ":man_lifting_weights_tone4:":"🏋🏾",
@@ -2577,6 +2777,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_lifting_weights_tone1:":"🏋🏻",
 ":man_lifting_weights_light_skin_tone:":"🏋🏻",
 ":man_lifting_weights:":"🏋",
+":weight_lifting_man:":"🏋",
 ":woman_lifting_weights_tone5:":"🏋🏿",
 ":woman_lifting_weights_dark_skin_tone:":"🏋🏿",
 ":woman_lifting_weights_tone4:":"🏋🏾",
@@ -2588,6 +2789,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":woman_lifting_weights_tone1:":"🏋🏻",
 ":woman_lifting_weights_light_skin_tone:":"🏋🏻",
 ":woman_lifting_weights:":"🏋",
+":weight_lifting_woman:":"🏋",
 ":man_swimming_tone5:":"🏊🏿",
 ":man_swimming_dark_skin_tone:":"🏊🏿",
 ":man_swimming_tone4:":"🏊🏾",
@@ -2599,6 +2801,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":man_swimming_tone1:":"🏊🏻",
 ":man_swimming_light_skin_tone:":"🏊🏻",
 ":man_swimming:":"🏊",
+":swimming_man:":"🏊",
 ":woman_swimming_tone5:":"🏊🏿",
 ":woman_swimming_dark_skin_tone:":"🏊🏿",
 ":woman_swimming_tone4:":"🏊🏾",
@@ -2610,6 +2813,7 @@ const emoji_dict = {":hash:": "#⃣",
 ":woman_swimming_tone1:":"🏊🏻",
 ":woman_swimming_light_skin_tone:":"🏊🏻",
 ":woman_swimming:":"🏊",
+":swimming_woman:":"🏊",
 ":man_surfing_tone5:":"🏄🏿",
 ":man_surfing_dark_skin_tone:":"🏄🏿",
 ":man_surfing_tone4:":"🏄🏾",
@@ -3451,22 +3655,24 @@ const emoji_dict = {":hash:": "#⃣",
 }
 function replace_emoji() {
 $('.emoji_poss').each(function(){
-const emoji = $(this).html().match(/(:.+?:)|✅/g);
+const emojis = $(this).html().match(/(:.+?:)|✅/g);
-for(let i in emoji) {
+for(let i in emojis) {
-if(emoji_dict[emoji[i]]) {
+var emoji = emojis[i].replace(/-/g,"_");
-$(this).html($(this).html().replace(emoji[i], emoji_dict[emoji[i]]));
+if(emoji_dict[emoji]) {
+$(this).html($(this).html().replace(emojis[i],emoji_dict[emoji]));
+}
+}
+$(this).html($(this).html().replace(/✅/g, "<img class='emoji' src='/assets/images/self_auth_min.png'>"));
+twemoji.parse(this,{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
 $(this).removeClass('emoji_poss');
-}
-}
-$(this).html($(this).html().replace("✅", "<img class='emoji' src='/assets/images/self_auth_min.png'>"));
 });
-twemoji.parse(document.body,{base:(location.protocol==="https:"?"https:":"http:")+"//cdn.staticfile.org/twemoji/2.2.5/"});
 }
 function replaced_emoji_return(original) {
-const emoji = original.match(/(:.+?:)/g);
+const emojis = original.match(/(:.+?:)/g);
-for(let i in emoji) {
+for(let i in emojis) {
-if(emoji_dict[emoji[i]]) {
+var emoji = emojis[i].replace(/-/g,"_");
-original = original.replace(emoji[i], emoji_dict[emoji[i]]);
+if(emoji_dict[emoji]) {
+original = original.replace(emojis[i],emoji_dict[emoji]);
 }
 }
 return original;

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>

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">

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>

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>

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'); ?>

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'); ?>

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>

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>

version.txt

@@ -1 +1 @@
-1.2.1
+1.2.2

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>

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>

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>

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>