Adds emoji search to chat.
Ajankohdalta
// ==UserScript==
// @name IdlePixel Chat Emojis
// @namespace com.anwinity.idlepixel
// @version 1.0.0
// @description Adds emoji search to chat.
// @author Anwinity
// @license MIT
// @match *://idle-pixel.com/login/play*
// @grant none
// @require https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js
// ==/UserScript==
(function() {
'use strict';
// This is being used by everyone within this plugin. Please be respectful and don't use it for your own needs. It is free and easy to generate your own key if you want. Thanks.
const EMOJI_API_KEY = "c29b9f6f19b8664dd77f62c236f29d0279e950b6";
class ChatEmojiPlugin extends IdlePixelPlusPlugin {
constructor() {
super("emojis", {
about: {
name: GM_info.script.name,
version: GM_info.script.version,
author: GM_info.script.author,
description: GM_info.script.description
}
});
this.cache = {};
}
openSearch() {
const el = $("#emoji-search");
const button = $("#emoji-search-button");
const buttonPosition = button.position();
const buttonWidth = button.outerWidth();
el.css("top", Math.round(buttonPosition.top - el.outerHeight() - 4));
el.css("left", Math.round(buttonPosition.left + buttonWidth - el.outerWidth() + 4));
const input = $("#emoji-search-input");
const results = $("#emoji-search-results");
el.show();
input.focus();
}
closeSearch() {
$("#emoji-search").hide();
}
toggleSearch() {
if($("#emoji-search").is(":visible")) {
this.closeSearch();
}
else {
this.openSearch();
}
}
injectEmoji(emoji) {
const input = document.getElementById("chat-area-input");
const caret = input.selectionStart || 0;
const value = input.value || "";
input.value = value.substring(0, caret) + emoji + value.substring(caret);
input.selectionStart = caret + emoji.length;
this.closeSearch();
}
searchEmojis(search, f) {
search = search.toLowerCase().trim().replace(/\s+/g, " ");
if(search in this.cache) {
if(typeof f === "function") {
f(this.cache[search], search);
}
return;
}
fetch(`https://emoji-api.com/emojis?search=${encodeURIComponent(search)}&access_key=${EMOJI_API_KEY}`)
.then(resp => resp.json())
.then(resp => {
const chars = [];
if(resp) {
resp.forEach(result => {
if(result.character && result.character.length <= 2) {
chars.push(result.character);
}
if(result.variants) {
result.variants.forEach(variant => {
if(variant.character && variant.character.length <= 2) {
chars.push(variant.character);
}
});
}
});
}
this.cache[search] = chars;
if(typeof f === "function") {
f(this.cache[search], search);
}
})
.catch(err => {
console.error("Error fetching emoji data.", err);
});
}
onLogin() {
$("#chat-area-input").after(`<button type="button" id="emoji-search-button">🙂</button>`);
$("#emoji-search-button").on("click", (e) => this.toggleSearch(e));
$("head").append(`
<style>
#emoji-search {
position: absolute;
min-width: 180px;
min-height: 180px;
max-width: 180px;
max-height: 180px;
display: flex;
flex-direction: column;
background: white;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
#emoji-search-results {
min-width: 180px;
max-width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: auto;
}
#emoji-search-results.grid {
display: grid;
gap: 2px 2px;
grid-template-columns: repeat(5, 1fr);
}
#emoji-search-results.grid > .emoji-result {
padding: 2px;
cursor: pointer;
opacity: 0.8;
}
#emoji-search-results.grid > .emoji-result:hover {
opacity: 1;
}
</style>
`);
$("body").append(`
<div id="emoji-search" style="display: none">
<input id="emoji-search-input" type="text" placeholder="search emojis" />
<div id="emoji-search-results"></div>
</div>
`);
var inputTimer;
$("#emoji-search-input").on("input", () => {
clearTimeout(inputTimer);
inputTimer = setTimeout(() => {
const input = $("#emoji-search-input");
const results = $("#emoji-search-results");
const search = input.val();
this.searchEmojis(search, (arr, query) => {
if(search == query) {
results.empty();
if(arr && arr.length) {
results.addClass("grid");
const html = arr.map(char => `<div class="emoji-result" onclick="IdlePixelPlus.plugins.emojis.injectEmoji('${char}')">${char}</div>`);
results.append(html);
}
else {
results.removeClass("grid");
results.text("No results.");
}
}
});
}, 700);
});
if(typeof IdlePixelPlus.registerCustomChatCommand === "function") {
IdlePixelPlus.registerCustomChatCommand("emoji", (command, message) => {
message = (message||"").trim();
if(!message) {
return;
}
this.searchEmojis(message, (arr, query) => {
const result = (arr && arr.length) ? arr.join(" ") : "No results.";
$("#chat-area").append(`<div><strong>Emojis for "${sanitize_input(query)}"</strong>: ${result}</div>`);
if(Chat._auto_scroll) {
$("#chat-area").scrollTop($("#chat-area")[0].scrollHeight);
}
});
}, "Search for emojis.<br /><strong>Usage:</strong> /%COMMAND% <search>");
}
}
}
const plugin = new ChatEmojiPlugin();
IdlePixelPlus.registerPlugin(plugin);
})();