Created
September 4, 2016 16:26
-
-
Save gamefreak/ab5970115dd82c5c0d819f649e239b7b to your computer and use it in GitHub Desktop.
fix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var base_path = 'http://qdb.fimsquad.com/emotes/'; | |
var xhr = new XMLHttpRequest; | |
xhr.open('GET', base_path + 'emotes.json'); | |
xhr.onload = emotes_loaded; | |
xhr.send(null); | |
var emoteTable = {} | |
var emoteReplacements = []; | |
function emotes_loaded(event) { | |
emoteTable = JSON.parse(xhr.responseText); | |
var quotes = document.getElementsByClassName('quote_quote'); | |
for (var i = 0; i < quotes.length; i++) { | |
scan_node(quotes[i]); | |
} | |
} | |
function scan_node(parent) { | |
var node = parent.firstChild; | |
while (node !== null) { | |
if (node.nodeType !== Node.TEXT_NODE) { | |
if (node.hasChildNodes()) { | |
scan_node(node); // recurse | |
} | |
node = node.nextSibling; | |
continue; | |
} | |
/* regex matches 4 styles of emotes | |
Emote pack standard (e.g. :vinylstare: :sun: ) :[\w\-?]+: | |
Smiley style (e.g. :) :-) :P) ) [:;]-?[\w()] | |
MSN? Style (e.g. (S) ) \([\w*{}?]\) | |
and this one DD: | |
//*/ | |
var match = node.textContent.match(/:[\w\-?]+:|[:;]-?[\w()@*]|\([\w*{}?]\)|DD:/); | |
if (match) { | |
node.splitText(match.index); // split before | |
var text = node.nextSibling; | |
text.splitText(match[0].length); // split after | |
var wrapper = generate_emote(text.textContent); | |
parent.replaceChild(wrapper, text); | |
node = node.nextSibling; // now stepping on to the <img> | |
node = node.nextSibling; // now on the <span> (will move off at the end of the loop) | |
} | |
node = node.nextSibling; | |
} | |
} | |
function generate_emote(text) { | |
if (emoteReplacements.length > 1000) throw new Error(":vinylaaaa: SO MANY EMOTES"); | |
if (!(text in emoteTable)) { | |
return document.createTextNode(text); | |
} | |
console.log('generating emote', text); | |
var emoteId = emoteReplacements.length; | |
var fragment = document.createDocumentFragment(); | |
var emote = { | |
state: 'image', | |
image: document.createElement('img'), | |
text: document.createElement('span') | |
}; | |
emoteReplacements.push(emote); | |
emote.image.src = base_path + emoteTable[text]; | |
emote.image.classList.add('emote'); | |
emote.image.dataset.emoteId = emoteId; | |
emote.image.title = text; | |
emote.image.alt = text; | |
fragment.appendChild(emote.image); | |
emote.text.textContent = text; | |
emote.text.style.display = 'none'; | |
emote.text.classList.add('emote'); | |
emote.text.dataset.emoteId = emoteId; | |
fragment.appendChild(emote.text); | |
return fragment; | |
} | |
document.addEventListener('DOMContentLoaded', function() { | |
document.body.addEventListener('click', function(event) { | |
if (event.target.classList.contains('emote')) { | |
var emote = emoteReplacements[event.target.dataset.emoteId]; | |
if (emote.state === 'image') { | |
emote.state = 'text'; | |
emote.image.style.display = 'none'; | |
emote.text.style.display = ''; | |
} else { | |
emote.state = 'image'; | |
emote.image.style.display = ''; | |
emote.text.style.display = 'none'; | |
} | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment