From 775e70bc4593774edc41bb87eb49230773cdaa44 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Mon, 5 Jun 2017 21:54:39 +0200
Subject: [PATCH] Rewrite HTML generation in emoji-keyboard & add emoji names
to elements
---
Resources/Plugins/emoji-keyboard/browser.js | 83 ++++++++++++++-------
1 file changed, 54 insertions(+), 29 deletions(-)
diff --git a/Resources/Plugins/emoji-keyboard/browser.js b/Resources/Plugins/emoji-keyboard/browser.js
index fb56b84e..ffc750ff 100644
--- a/Resources/Plugins/emoji-keyboard/browser.js
+++ b/Resources/Plugins/emoji-keyboard/browser.js
@@ -20,9 +20,10 @@ enabled(){
this.emojiURL = "https://ton.twimg.com/tweetdeck-web/web/assets/emoji/";
- this.emojiHTML1 = ""; // no skin tones, prepended
- this.emojiHTML2 = {}; // contains emojis with skin tones
- this.emojiHTML3 = ""; // no skin tones, appended
+ this.emojiData1 = []; // no skin tones, prepended
+ this.emojiData2 = {}; // contains emojis with skin tones
+ this.emojiData3 = []; // no skin tones, appended
+ this.emojiNames = [];
var me = this;
@@ -64,7 +65,22 @@ enabled(){
};
var generateEmojiHTML = skinTone => {
- return (this.emojiHTML1+this.emojiHTML2[skinTone]+this.emojiHTML3).replace(/u#/g, this.emojiURL);
+ let index = 0;
+ let html = [ "<p style='font-size:13px;color:#444;margin:4px;text-align:center'>Please, note that most emoji will not show up properly in the text box above, but they will display in the tweet.</p>" ];
+
+ for(let array of [ this.emojiData1, this.emojiData2[skinTone], this.emojiData3 ]){
+ for(let emoji of array){
+ if (emoji === "___"){
+ html.push("<div class='separator'></div>");
+ }
+ else{
+ html.push(TD.util.cleanWithEmoji(emoji).replace(' class="emoji" draggable="false"', ` data-x="${this.emojiNames[index]}"`));
+ index++;
+ }
+ }
+ }
+
+ return html.join("");
};
var selectSkinTone = skinTone => {
@@ -190,18 +206,18 @@ ready(){
};
$TDP.readFileRoot(this.$token, "emoji-ordering.txt").then(contents => {
- let generated1 = [];
- let generated2 = {};
- let generated3 = [];
+ let names1 = [];
+ let names2 = [];
+ let names3 = [];
for(let skinTone of this.skinToneList){
- generated2[skinTone] = [];
+ this.emojiData2[skinTone] = [];
}
// declaration inserters
let addDeclaration1 = decl => {
- generated1.push(decl.split(" ").map(pt => convUnicode(parseInt(pt, 16))).join(""));
+ this.emojiData1.push(decl.split(" ").map(pt => convUnicode(parseInt(pt, 16))).join(""));
};
let addDeclaration2 = (tone, decl) => {
@@ -209,16 +225,16 @@ ready(){
if (tone === null){
for(let skinTone of this.skinToneList){
- generated2[skinTone].push(gen);
+ this.emojiData2[skinTone].push(gen);
}
}
else{
- generated2[tone].push(gen);
+ this.emojiData2[tone].push(gen);
}
};
let addDeclaration3 = decl => {
- generated3.push(decl.split(" ").map(pt => convUnicode(parseInt(pt, 16))).join(""));
+ this.emojiData3.push(decl.split(" ").map(pt => convUnicode(parseInt(pt, 16))).join(""));
};
// line reading
@@ -228,9 +244,9 @@ ready(){
for(let line of contents.split("\n")){
if (line[0] === '@'){
switch(skinToneState){
- case 0: generated1.push("___"); break;
- case 1: this.skinToneList.forEach(skinTone => generated2[skinTone].push("___")); break;
- case 2: generated3.push("___"); break;
+ case 0: this.emojiData1.push("___"); break;
+ case 1: this.skinToneList.forEach(skinTone => this.emojiData2[skinTone].push("___")); break;
+ case 2: this.emojiData3.push("___"); break;
}
if (line[1] === '1'){
@@ -239,9 +255,15 @@ ready(){
else if (line[1] === '2'){
skinToneState = 2;
}
+
+ continue;
}
- else if (skinToneState === 1){
- let decl = line.slice(0, line.indexOf(';'));
+
+ let semicolon = line.indexOf(';');
+ let decl = line.slice(0, semicolon);
+ let desc = line.slice(semicolon+1);
+
+ if (skinToneState === 1){
let skinIndex = decl.indexOf('$');
if (skinIndex !== -1){
@@ -249,35 +271,38 @@ ready(){
let declPost = decl.slice(skinIndex+1);
for(let skinTone of this.skinToneNonDefaultList){
- generated2[skinTone].pop();
+ this.emojiData2[skinTone].pop();
addDeclaration2(skinTone, declPre+skinTone+declPost);
}
}
else{
addDeclaration2(null, decl);
+ names2.push(desc);
}
}
else if (skinToneState === 2){
- addDeclaration3(line.slice(0, line.indexOf(';')));
+ addDeclaration3(decl);
+ names3.push(desc);
}
else if (skinToneState === 0){
- addDeclaration1(line.slice(0, line.indexOf(';')));
+ addDeclaration1(decl);
+ names1.push(desc);
}
}
// final processing
- let urlRegex = new RegExp(this.emojiURL.replace(/\./g, "\\."), "g");
- let process = str => TD.util.cleanWithEmoji(str).replace(/ class=\"emoji\" draggable=\"false\"/g, "").replace(urlRegex, "u#").replace(/___/g, "<div class='separator'></div>");
-
- let start = "<p style='font-size:13px;color:#444;margin:4px;text-align:center'>Please, note that most emoji will not show up properly in the text box above, but they will display in the tweet.</p>";
- this.emojiHTML1 = start+process(generated1.join(""));
-
- for(let skinTone of this.skinToneList){
- this.emojiHTML2[skinTone] = process(generated2[skinTone].join(""));
+ for(let name of names1){
+ this.emojiNames.push(name);
}
- this.emojiHTML3 = process(generated3.join(""));
+ for(let name of names2){
+ this.emojiNames.push(name);
+ }
+
+ for(let name of names3){
+ this.emojiNames.push(name);
+ }
}).catch(err => {
$TD.alert("error", "Problem loading emoji keyboard: "+err.message);
});