Goonchat Twemoji support.

Add twemoji support to goonchat. It only parses annotations if the message has a
<span> tag with the 'emoji_enabled' class.

Also adds utf-8 support with goonchat, for the twemoji.
This commit is contained in:
Tigercat2000
2017-01-11 09:31:56 -08:00
parent 9354c3f8c9
commit 0b69fe7842
7 changed files with 1272 additions and 23 deletions
+1 -1
View File
@@ -79,7 +79,7 @@ var/global/admin_ooc_colour = "#b82e00"
else
display_name = holder.fakekey
to_chat(C, "<font color='[display_colour]'><span class='ooc'><span class='prefix'>OOC:</span> <EM>[display_name]:</EM> <span class='message'>[msg]</span></span></font>")
to_chat(C, "<font color='[display_colour]'><span class='ooc'><span class='prefix'>OOC:</span> <EM>[display_name]:</EM> <span class='message emoji_enabled'>[msg]</span></span></font>")
/proc/toggle_ooc()
config.ooc_allowed = ( !config.ooc_allowed )
+4 -1
View File
@@ -149,8 +149,11 @@
adminhelp(reply) //sender has left, adminhelp instead
return
// for emoji, we have to define a specific span for jquery to look for
msg = "<span class='emoji_enabled'>[msg]</span>"
recieve_message = "<span class='[recieve_span]'>[type] from-<b>[recieve_pm_type][key_name(src, C, C.holder ? 1 : 0, type)]</b>: [msg]</span>"
to_chat(C, recieve_message)
to_chat(C, recieve_message) //we also have to pass the allowEmoji flag
to_chat(src, "<font color='blue'>[send_pm_type][type] to-<b>[key_name(C, src, holder ? 1 : 0, type)]</b>: [msg]</font>")
/*if(holder && !C.holder)
+3
View File
@@ -367,3 +367,6 @@ h1.alert, h2.alert {color: #000000;}
/* HELPER CLASSES */
.text-normal {font-weight: normal; font-style: normal;}
.hidden {display: none; visibility: hidden;}
/* EMOJI STUFF */
.emoji {max-height: 16px; max-width: 16px}
@@ -16,6 +16,8 @@
<!-- The following script(s) require IE9 or above -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="jquery.mark.min.js"></script>
<script type="text/javascript" src="unicode_9_annotations.json"></script>
<script type="text/javascript" src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.2.3"></script>
<!--<![endif]-->
</head>
<body>
+64 -17
View File
@@ -62,7 +62,10 @@ var opts = {
'clientData': [],
// List of macros in the 'hotkeymode' macro set.
'macros': {}
'macros': {},
// Emoji toggle
'enableEmoji': true
};
function outerHTML(el) {
@@ -97,6 +100,32 @@ function linkify(text) {
});
}
function emojiparse(el) {
if (!UNICODE_9_EMOJI || !twemoji) { //something didn't load right, probably IE8
return;
}
var $el = $(el);
var $emojiZone = $el.find(".emoji_enabled");
if ($emojiZone.length) {
$emojiZone.each(function () {
var html = $(this).html();
html = html.replace(/\:(.*?)\:/g, function (match, p1, offset, s) {
var unicode_entity = UNICODE_9_EMOJI[p1];
if (unicode_entity) {
return unicode_entity;
}
return match;
});
html = $.parseHTML(twemoji.parse(html, {size: "svg", ext: ".svg"}));
$(this).html(html);
});
}
}
// Colorizes the highlight spans
function setHighlightColor(match) {
match.style.background = opts.highlightColor
@@ -127,6 +156,12 @@ function output(message, flag) {
if (flag !== 'internal')
opts.lastPang = Date.now();
// Basically we url_encode twice server side so we can manually read the encoded version and actually do UTF-8.
// The replace for + is because FOR SOME REASON, BYOND replaces spaces with a + instead of %20, and a plus with %2b.
// Marvelous.
message = message.replace(/\+/g, "%20");
message = decoder(message);
//The behemoth of filter-code (for Admin message filters)
//Note: This is proooobably hella inefficient
var filteredOut = false;
@@ -215,7 +250,7 @@ function output(message, flag) {
message = linkify(message);
}
opts.messageCount++;
opts.messageCount++;
//Actually append the message
var entry = document.createElement('div');
@@ -227,6 +262,13 @@ function output(message, flag) {
}
entry.innerHTML = message;
// emoji!
if (opts.enableEmoji) {
emojiparse(entry);
}
$messages[0].appendChild(entry);
//Actually do the snap
@@ -240,6 +282,11 @@ function output(message, flag) {
}
}
function internalOutput(message, flag)
{
output(escaper(message), flag);
}
//Runs a route within byond, client or server side. Consider this "ehjax" for byond.
function runByond(uri) {
window.location = uri;
@@ -339,7 +386,7 @@ function ehjaxCallback(data) {
$('#pingDot').css('color', '#'+hex);
} else if (data == 'roundrestart') {
opts.restarting = true;
output('<div class="connectionClosed internal restarting">The connection has been closed because the server is restarting. Please wait while you automatically reconnect.</div>', 'internal');
internalOutput('<div class="connectionClosed internal restarting">The connection has been closed because the server is restarting. Please wait while you automatically reconnect.</div>', 'internal');
} else if (data == 'stopaudio') {
$('.dectalk').remove();
} else {
@@ -374,9 +421,9 @@ function ehjaxCallback(data) {
changeMode(data.modeChange);
} else if (data.firebug) {
if (data.trigger) {
output('<span class="internal boldnshit">Loading firebug console, triggered by '+data.trigger+'...</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loading firebug console, triggered by '+data.trigger+'...</span>', 'internal');
} else {
output('<span class="internal boldnshit">Loading firebug console...</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loading firebug console...</span>', 'internal');
}
var firebugEl = document.createElement('script');
firebugEl.src = 'https://getfirebug.com/firebug-lite-debug.js';
@@ -387,7 +434,7 @@ function ehjaxCallback(data) {
message = '<a href="#" class="stopAudio icon-stack" title="Stop Audio" style="color: black;"><i class="icon-volume-off"></i><i class="icon-ban-circle" style="color: red;"></i></a> '+
'<span class="italic">You hear a strange robotic voice...</span>' + message;
}
output(message, 'preventLink');
internalOutput(message, 'preventLink');
}
}
}
@@ -451,7 +498,7 @@ $(function() {
if (!opts.noResponse) { //Only actually append a message if the previous ping didn't also fail (to prevent spam)
opts.noResponse = true;
opts.noResponseCount++;
output('<div class="connectionClosed internal" data-count="'+opts.noResponseCount+'">You are either AFK, experiencing lag or the connection has closed.</div>', 'internal');
internalOutput('<div class="connectionClosed internal" data-count="'+opts.noResponseCount+'">You are either AFK, experiencing lag or the connection has closed.</div>', 'internal');
}
} else if (opts.noResponse) { //Previous ping attempt failed ohno
$('.connectionClosed[data-count="'+opts.noResponseCount+'"]:not(.restored)').addClass('restored').text('Your connection has been restored (probably)!');
@@ -490,18 +537,18 @@ $(function() {
if (savedConfig.sfontSize) {
$messages.css('font-size', savedConfig.sfontSize);
output('<span class="internal boldnshit">Loaded font size setting of: '+savedConfig.sfontSize+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loaded font size setting of: '+savedConfig.sfontSize+'</span>', 'internal');
}
if (savedConfig.sfontType) {
$messages.css('font-family', savedConfig.sfontType);
output('<span class="internal boldnshit">Loaded font type setting of: '+savedConfig.sfontType+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loaded font type setting of: '+savedConfig.sfontType+'</span>', 'internal');
}
if (savedConfig.spingDisabled) {
if (savedConfig.spingDisabled == 'true') {
opts.pingDisabled = true;
$('#ping').hide();
}
output('<span class="internal boldnshit">Loaded ping display of: '+(opts.pingDisabled ? 'hidden' : 'visible')+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loaded ping display of: '+(opts.pingDisabled ? 'hidden' : 'visible')+'</span>', 'internal');
}
if (savedConfig.shighlightTerms) {
var savedTerms = $.parseJSON(savedConfig.shighlightTerms);
@@ -513,13 +560,13 @@ $(function() {
}
if (actualTerms) {
actualTerms = actualTerms.substring(0, actualTerms.length - 2);
output('<span class="internal boldnshit">Loaded highlight strings of: ' + actualTerms+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loaded highlight strings of: ' + actualTerms+'</span>', 'internal');
opts.highlightTerms = savedTerms;
}
}
if (savedConfig.shighlightColor) {
opts.highlightColor = savedConfig.shighlightColor;
output('<span class="internal boldnshit">Loaded highlight color of: '+savedConfig.shighlightColor+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Loaded highlight color of: '+savedConfig.shighlightColor+'</span>', 'internal');
}
(function() {
@@ -606,14 +653,14 @@ $(function() {
}
e.preventDefault()
var k = e.which;
var command; // Command to execute through winset.
// Hardcoded because else there would be no feedback message.
if (k == 113) { // F2
runByond('byond://winset?screenshot=auto');
output('Screenshot taken', 'internal');
internalOutput('Screenshot taken', 'internal');
}
var c = "";
@@ -747,7 +794,7 @@ $(function() {
fontSize = fontSize - 1 + 'px';
$messages.css({'font-size': fontSize});
setCookie('fontsize', fontSize, 365);
output('<span class="internal boldnshit">Font size set to '+fontSize+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Font size set to '+fontSize+'</span>', 'internal');
});
$('#increaseFont').click(function(e) {
@@ -755,7 +802,7 @@ $(function() {
fontSize = fontSize + 1 + 'px';
$messages.css({'font-size': fontSize});
setCookie('fontsize', fontSize, 365);
output('<span class="internal boldnshit">Font size set to '+fontSize+'</span>', 'internal');
internalOutput('<span class="internal boldnshit">Font size set to '+fontSize+'</span>', 'internal');
});
$('#chooseFont').click(function(e) {
@@ -821,7 +868,7 @@ $(function() {
$('#highlightTerm').click(function(e) {
if(!($().mark)) {
output('<span class="internal boldnshit">Highlighting is disabled. You are probably using Internet Explorer 8 and need to update.</span>', 'internal');
internalOutput('<span class="internal boldnshit">Highlighting is disabled. You are probably using Internet Explorer 8 and need to update.</span>', 'internal');
return;
}
if ($('.popup .highlightTerm').is(':visible')) {return;}
File diff suppressed because it is too large Load Diff
+9 -4
View File
@@ -8,7 +8,8 @@ var/list/chatResources = list(
"goon/browserassets/css/fonts/fontawesome-webfont.ttf",
"goon/browserassets/css/fonts/fontawesome-webfont.woff",
"goon/browserassets/css/font-awesome.css",
"goon/browserassets/css/browserOutput.css"
"goon/browserassets/css/browserOutput.css",
"goon/browserassets/json/unicode_9_annotations.json"
)
/var/savefile/iconCache = new /savefile("data/iconCache.sav")
@@ -210,8 +211,8 @@ var/list/chatResources = list(
var/to_chat_filename
var/to_chat_line
var/to_chat_src
// Call using macro: to_chat(target, message)
/proc/__to_chat(target, message)
// Call using macro: to_chat(target, message, flag)
/proc/__to_chat(target, message, flag)
if(!is_valid_tochat_message(message) || !is_valid_tochat_target(target))
target << message
@@ -262,5 +263,9 @@ var/to_chat_src
C.chatOutput.messageQueue.Add(message)
return
// url_encode it TWICE, this way any UTF-8 characters are able to be decoded by the javascript.
var/output_message = "[url_encode(url_encode(message))]"
if(flag)
output_message += "&[url_encode(flag)]"
target << output(url_encode(message), "browseroutput:output")
target << output(output_message, "browseroutput:output")