Refactor all emoji utility methods into window.Signal.Emoji
Scott Nonnenberg
7 years ago
parent
32e2c6dcb5
commit
a5416e42c4
@ -1,91 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
window.emoji_util = window.emoji_util || {};
|
||||
|
||||
// EmojiConverter overrides
|
||||
EmojiConvertor.prototype.getCountOfAllMatches = function(str, regex) {
|
||||
var match = regex.exec(str);
|
||||
var count = 0;
|
||||
|
||||
if (!regex.global) {
|
||||
return match ? 1 : 0;
|
||||
}
|
||||
|
||||
while (match) {
|
||||
count += 1;
|
||||
match = regex.exec(str);
|
||||
}
|
||||
|
||||
return count;
|
||||
};
|
||||
|
||||
EmojiConvertor.prototype.hasNormalCharacters = function(str) {
|
||||
var self = this;
|
||||
var noEmoji = str.replace(self.rx_unified, '').trim();
|
||||
return noEmoji.length > 0;
|
||||
};
|
||||
|
||||
EmojiConvertor.prototype.getSizeClass = function(str) {
|
||||
var self = this;
|
||||
|
||||
if (self.hasNormalCharacters(str)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
var emojiCount = self.getCountOfAllMatches(str, self.rx_unified);
|
||||
if (emojiCount > 8) {
|
||||
return '';
|
||||
} else if (emojiCount > 6) {
|
||||
return 'small';
|
||||
} else if (emojiCount > 4) {
|
||||
return 'medium';
|
||||
} else if (emojiCount > 2) {
|
||||
return 'large';
|
||||
} else {
|
||||
return 'jumbo';
|
||||
}
|
||||
};
|
||||
|
||||
var imgClass = /(<img [^>]+ class="emoji)(")/g;
|
||||
EmojiConvertor.prototype.addClass = function(text, sizeClass) {
|
||||
if (!sizeClass) {
|
||||
return text;
|
||||
}
|
||||
|
||||
return text.replace(imgClass, function(match, before, after) {
|
||||
return before + ' ' + sizeClass + after;
|
||||
});
|
||||
};
|
||||
|
||||
var imgTitle = /(<img [^>]+ class="emoji[^>]+ title=")([^:">]+)(")/g;
|
||||
EmojiConvertor.prototype.ensureTitlesHaveColons = function(text) {
|
||||
return text.replace(imgTitle, function(match, before, title, after) {
|
||||
return before + ':' + title + ':' + after;
|
||||
});
|
||||
};
|
||||
|
||||
EmojiConvertor.prototype.signalReplace = function(str) {
|
||||
var sizeClass = this.getSizeClass(str);
|
||||
|
||||
var text = this.replace_unified(str);
|
||||
text = this.addClass(text, sizeClass);
|
||||
|
||||
return this.ensureTitlesHaveColons(text);
|
||||
};
|
||||
|
||||
window.emoji = new EmojiConvertor();
|
||||
emoji.init_colons();
|
||||
emoji.img_sets.apple.path =
|
||||
'node_modules/emoji-datasource-apple/img/apple/64/';
|
||||
emoji.include_title = true;
|
||||
emoji.replace_mode = 'img';
|
||||
emoji.supports_css = false; // needed to avoid spans with background-image
|
||||
|
||||
window.emoji_util.parse = function($el) {
|
||||
if (!$el || !$el.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$el.html(emoji.signalReplace($el.html()));
|
||||
};
|
||||
})();
|
||||
@ -1,179 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
describe('EmojiUtil', function() {
|
||||
describe('getCountOfAllMatches', function() {
|
||||
it('returns zero for string with no matches', function() {
|
||||
var r = /s/g;
|
||||
var str = 'no match';
|
||||
var actual = emoji.getCountOfAllMatches(str, r);
|
||||
assert.equal(actual, 0);
|
||||
});
|
||||
it('returns 1 for one match', function() {
|
||||
var r = /s/g;
|
||||
var str = 'just one match';
|
||||
var actual = emoji.getCountOfAllMatches(str, r);
|
||||
assert.equal(actual, 1);
|
||||
});
|
||||
it('returns 2 for two matches', function() {
|
||||
var r = /s/g;
|
||||
var str = 's + s';
|
||||
var actual = emoji.getCountOfAllMatches(str, r);
|
||||
assert.equal(actual, 2);
|
||||
});
|
||||
it('returns zero for no match with non-global regular expression', function() {
|
||||
var r = /s/g;
|
||||
var str = 'no match';
|
||||
var actual = emoji.getCountOfAllMatches(str, r);
|
||||
assert.equal(actual, 0);
|
||||
});
|
||||
it('returns 1 for match with non-global regular expression', function() {
|
||||
var r = /s/;
|
||||
var str = 's + s';
|
||||
var actual = emoji.getCountOfAllMatches(str, r);
|
||||
assert.equal(actual, 1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('hasNormalCharacters', function() {
|
||||
it('returns true for all normal text', function() {
|
||||
var str = 'normal';
|
||||
var actual = emoji.hasNormalCharacters(str);
|
||||
assert.equal(actual, true);
|
||||
});
|
||||
it('returns false for all emoji text', function() {
|
||||
var str = '🔥🔥🔥🔥';
|
||||
var actual = emoji.hasNormalCharacters(str);
|
||||
assert.equal(actual, false);
|
||||
});
|
||||
it('returns false for emojis mixed with spaces', function() {
|
||||
var str = '🔥 🔥 🔥 🔥';
|
||||
var actual = emoji.hasNormalCharacters(str);
|
||||
assert.equal(actual, false);
|
||||
});
|
||||
it('returns true for emojis and text', function() {
|
||||
var str = '🔥 normal 🔥 🔥 🔥';
|
||||
var actual = emoji.hasNormalCharacters(str);
|
||||
assert.equal(actual, true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getSizeClass', function() {
|
||||
it('returns nothing for non-emoji text', function() {
|
||||
assert.equal(emoji.getSizeClass('normal text'), '');
|
||||
});
|
||||
it('returns nothing for emojis mixed with text', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥 normal 🔥'), '');
|
||||
});
|
||||
it('returns nothing for more than 8 emojis', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥'), '');
|
||||
});
|
||||
it('returns "small" for 7-8 emojis', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥🔥'), 'small');
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥'), 'small');
|
||||
});
|
||||
it('returns "medium" for 5-6 emojis', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥'), 'medium');
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥'), 'medium');
|
||||
});
|
||||
it('returns "large" for 3-4 emojis', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥'), 'large');
|
||||
assert.equal(emoji.getSizeClass('🔥🔥 🔥'), 'large');
|
||||
});
|
||||
it('returns "jumbo" for 1-2 emojis', function() {
|
||||
assert.equal(emoji.getSizeClass('🔥🔥'), 'jumbo');
|
||||
assert.equal(emoji.getSizeClass('🔥'), 'jumbo');
|
||||
});
|
||||
});
|
||||
|
||||
describe('addClass', function() {
|
||||
it('returns original string if no emoji images', function() {
|
||||
var start = 'no images. but there is some 🔥. <img src="random.jpg" />';
|
||||
|
||||
var expected = start;
|
||||
var actual = emoji.addClass(start, 'jumbo');
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
|
||||
it('returns original string if no sizeClass provided', function() {
|
||||
var start =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji" title="house"/> after';
|
||||
|
||||
var expected = start;
|
||||
var actual = emoji.addClass(start);
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
|
||||
it('adds provided class to image class', function() {
|
||||
var start =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji" title="house"/> after';
|
||||
|
||||
var expected =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji jumbo" title="house"/> after';
|
||||
var actual = emoji.addClass(start, 'jumbo');
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ensureTitlesHaveColons', function() {
|
||||
it('returns original string if no emoji images', function() {
|
||||
var start = 'no images. but there is some 🔥. <img src="random.jpg" />';
|
||||
|
||||
var expected = start;
|
||||
var actual = emoji.ensureTitlesHaveColons(start);
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
|
||||
it('returns original string if image title already has colons', function() {
|
||||
var start =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji" title=":house:"/> after';
|
||||
|
||||
var expected = start;
|
||||
var actual = emoji.ensureTitlesHaveColons(start);
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
|
||||
it('does not change title for non-emoji image', function() {
|
||||
var start =
|
||||
'before <img src="random.png" title="my random title"/> after';
|
||||
|
||||
var expected = start;
|
||||
var actual = emoji.ensureTitlesHaveColons(start);
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
|
||||
it('adds colons to emoji image title', function() {
|
||||
var start =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji" title="house"/> after';
|
||||
|
||||
var expected =
|
||||
'before <img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji" title=":house:"/> after';
|
||||
var actual = emoji.ensureTitlesHaveColons(start);
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
});
|
||||
|
||||
describe('signalReplace', function() {
|
||||
it('returns images for every emoji', function() {
|
||||
var actual = emoji.signalReplace('🏠 🔥');
|
||||
var expected =
|
||||
'<img src="node_modules/emoji-datasource-apple/img/apple/64/1f3e0.png" class="emoji jumbo" data-codepoints="1f3e0" title=":house:"/>' +
|
||||
' <img src="node_modules/emoji-datasource-apple/img/apple/64/1f525.png" class="emoji jumbo" data-codepoints="1f525" title=":fire:"/>';
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
it('properly hyphenates a variation', function() {
|
||||
var actual = emoji.signalReplace('💪🏿'); // muscle with dark skin tone modifier
|
||||
var expected =
|
||||
'<img src="node_modules/emoji-datasource-apple/img/apple/64/1f4aa-1f3ff.png" class="emoji jumbo" data-codepoints="1f4aa-1f3ff" title=":muscle:"/>';
|
||||
|
||||
assert.equal(expected, actual);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,113 @@
|
||||
// @ts-ignore
|
||||
import EmojiConvertor from 'emoji-js';
|
||||
|
||||
const instance = new EmojiConvertor();
|
||||
instance.init_unified();
|
||||
instance.init_colons();
|
||||
instance.img_sets.apple.path =
|
||||
'node_modules/emoji-datasource-apple/img/apple/64/';
|
||||
instance.include_title = true;
|
||||
instance.replace_mode = 'img';
|
||||
instance.supports_css = false; // needed to avoid spans with background-image
|
||||
|
||||
export function getRegex(): RegExp {
|
||||
return instance.rx_unified;
|
||||
}
|
||||
|
||||
export function getTitle(value: string): string | undefined {
|
||||
return instance.data[value][3][0];
|
||||
}
|
||||
|
||||
export function findImage(value: string, variation?: string) {
|
||||
return instance.find_image(value, variation);
|
||||
}
|
||||
|
||||
export function replaceColons(str: string) {
|
||||
return str.replace(instance.rx_colons, m => {
|
||||
const name = m.substr(1, m.length - 2);
|
||||
const code = instance.map.colons[name];
|
||||
if (code) {
|
||||
return instance.data[code][0][0];
|
||||
}
|
||||
return m;
|
||||
});
|
||||
}
|
||||
|
||||
function getCountOfAllMatches(str: string, regex: RegExp) {
|
||||
let match = regex.exec(str);
|
||||
let count = 0;
|
||||
|
||||
if (!regex.global) {
|
||||
return match ? 1 : 0;
|
||||
}
|
||||
|
||||
while (match) {
|
||||
count += 1;
|
||||
match = regex.exec(str);
|
||||
}
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function hasNormalCharacters(str: string) {
|
||||
const noEmoji = str.replace(instance.rx_unified, '').trim();
|
||||
return noEmoji.length > 0;
|
||||
}
|
||||
|
||||
export function getSizeClass(str: string) {
|
||||
if (hasNormalCharacters(str)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const emojiCount = getCountOfAllMatches(str, instance.rx_unified);
|
||||
if (emojiCount > 8) {
|
||||
return '';
|
||||
} else if (emojiCount > 6) {
|
||||
return 'small';
|
||||
} else if (emojiCount > 4) {
|
||||
return 'medium';
|
||||
} else if (emojiCount > 2) {
|
||||
return 'large';
|
||||
} else {
|
||||
return 'jumbo';
|
||||
}
|
||||
}
|
||||
|
||||
const VARIATION_LOOKUP: { [index: string]: string } = {
|
||||
'\uD83C\uDFFB': '1f3fb',
|
||||
'\uD83C\uDFFC': '1f3fc',
|
||||
'\uD83C\uDFFD': '1f3fd',
|
||||
'\uD83C\uDFFE': '1f3fe',
|
||||
'\uD83C\uDFFF': '1f3ff',
|
||||
};
|
||||
|
||||
// Taken from emoji-js/replace_unified
|
||||
export function getReplacementData(
|
||||
m: string,
|
||||
p1: string | undefined,
|
||||
p2: string | undefined
|
||||
): string | { value: string; variation?: string } {
|
||||
const unified = instance.map.unified[p1];
|
||||
if (unified) {
|
||||
const variation = VARIATION_LOOKUP[p2 || ''];
|
||||
if (variation) {
|
||||
return {
|
||||
value: unified,
|
||||
variation,
|
||||
};
|
||||
}
|
||||
return {
|
||||
value: unified,
|
||||
};
|
||||
}
|
||||
|
||||
const unifiedVars = instance.map.unified_vars[p1];
|
||||
if (unifiedVars) {
|
||||
return {
|
||||
value: unifiedVars[0],
|
||||
variation: unifiedVars[1],
|
||||
};
|
||||
}
|
||||
|
||||
return m;
|
||||
}
|
||||
Loading…
Reference in New Issue