Skip to content

Instantly share code, notes, and snippets.

@highb
Forked from rstacruz/index.html
Created December 24, 2011 21:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save highb/1518414 to your computer and use it in GitHub Desktop.
Save highb/1518414 to your computer and use it in GitHub Desktop.
Facebook chat letters with Emoticons
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<div class="from">
<label>Type here:</label>
<textarea>Hello :trollface:</textarea>
</div>
<div class="to">
<label>Use this:</label>
<textarea></textarea>
</div>
<div class="preview">
<label>Preview:</label>
<div></div>
</div>
<div class="reference">
<label>Reference (Mouse wheel to scroll)</label>
<div></div>
</div>
<style>
div.from, div.to, div.preview { width: 70%; }
div.reference { position: absolute; width: 25%; top: 0px; left: 75%; height: 450px; overflow-y: scroll; }
textarea, .preview div { margin: 0; width: 100%; padding: 10px; background: #eee; border: solid 1px #ddd; border-radius: 4px; height: 100px; color: #333; text-shadow: 1px 1px 0 #fff; overflow: auto; }
.from textarea { background: #fafafa; }
.reference { float: right; }
textarea:focus { outline: 0; border: solid 1px #aaa; }
div { margin: 10px; }
textarea, label { font-size: 10pt; font-family: sans-serif; }
label { padding: 5px 0; display: block; }
body { color: #999; }
.preview img, .reference img { width: 16px; height: 16px; background: #fff; display: inline-block; }
</style>
<script>
var Letters = {
A: '[[399197913893]]',
B: '[[115345298505025]]',
C: '[[53872404042]]',
D: '[[226910642728]]',
E: '[[140775945956538]]',
F: '[[136046106447549]]',
G: '[[119431374760220]]',
H: '[[205082339544090]]',
I: '[[432883640525]]',
J: '[[228315337208110]]',
K: '[[56926372437]]',
L: '[[221310038416]]',
M: '[[161672657237726]]',
N: '[[203933512990765]]',
O: '[[116564658357124]]',
P: '[[64245738440]]',
Q: '[[196390043757013]]',
R: '[[111884958838844]]',
S: '[[136198113087158]]',
T: '[[142464449131926]]',
U: '[[172843133886]]',
V: '[[77189649729]]',
W: '[[116928513730]]',
X: '[[108075899233912]]',
Y: '[[140715832616884]]',
Z: '[[165724910215]]'
};
var Emoticons = {
areyoufuckingkiddingme: '[[143220739082110]]',
beast: '[[293955833972970]] [[293955850639635]] [[293955873972966]] [[293955920639628]] [[293956017306285]]<br />[[293956043972949]] [[293956060639614]] [[293956087306278]] [[293956100639610]] [[293956107306276]]<br />[[293956117306275]] [[293956127306274]] [[293956147306272]] [[293956220639598]] [[293956283972925]]<br />[[293956303972923]] [[293956327306254]] [[293956350639585]] [[293956370639583]] [[293956450639575]]<br />[[293956570639563]] [[293956620639558]] [[293956677306219]] [[293956710639549]] [[293956767306210]]',
cerealguy: '[[170815706323196]]',
challangaccepted: '[[100002727365206]]',
derp: '[[224812970902314]]',
derpina: '[[192644604154319]]',
dumbbitch: '[[218595638164996]]',
feellikeasir: '[[168040846586189]]',
foreveralone: '[[177903015598419]]',
foreveralonechristmas: '[[125038607580286]]',
fuckyeah: '[[105387672833401]]',
lamp: '[[100001256102462]]',
lolface: '[[168456309878025]]',
megusta: '[[211782832186415]]',
megustabig: '[[293943390640881]][[293944357307451]][[293944767307410]]<br />[[293945010640719]][[293945623973991]][[293945800640640]]<br />[[293946030640617]][[293946127307274]][[293946297307257]]',
mog: '[[142670085793927]]',
motherofgod: '[[142670085793927]]',
notbadobama: '[[169919399735055]]',
no: '[[167359756658519]]',
noguy: '[[167359756658519]]',
notbad: '[[notbaad]]',
okayface: '[[100002752520227]]',
pokerface: '[[129627277060203]]',
questionmark: '[[100002727365206]]',
rageface: '[[FUUUOFFICIAL]]',
sociallyawkwardpenguin: '[[98438140742]]',
trollface: '[[171108522930776]]',
yaoming: '[[218595638164996]]',
};
$(".from textarea").live("keyup", function update() {
var str = replaceWordsWithTags($(this).val());
$(".to textarea").val(brToNewline(str));
$(".preview div").html(tagsToImgs(str));
});
function replaceWordsWithTags(str) {
// Regex each word in the string
return str.replace(/[:\w]+/g, function(word) {
console.log(word);
if(word[0] == ":" && word.slice(-1) == ":") {
var emoticon = word.slice(1,-1).toLowerCase();
if(emoticon && Emoticons[emoticon]) {
return Emoticons[emoticon];
}
}
else {
return word.replace(/[A-Za-z]/g, function(letter) {
letter = letter.toUpperCase();
return Letters[letter] + ' ';
});
}
});
}
// Replace [[tags]] with <img>s
function tagsToImgs(str) {
return str.replace(/\[\[(.*?)\]\]/g, function(_, id) {
return "<img src='https://graph.facebook.com/"+id+"/picture' />";
});
}
// Replace <br /> with \n
function brToNewline(str) {
return str.replace(/<br\s*?\/*?>/g, "\n");
};
$(function() {
$(".from textarea").trigger('keyup');
var reference = "";
// Create the reference string
for(var emoticon in Emoticons) {
// Make sure we're not grabbing something from the prototype chain.
if(Emoticons.hasOwnProperty(emoticon)) {
reference += tagsToImgs(Emoticons[emoticon]);
reference += " :" + emoticon + ":<br />";
}
}
$(".reference div").html(reference);
});
</script>
@Girly-Rock
Copy link

I like it.....<3<3<3

@Girly-Rock
Copy link

[[205082339544090]] [[140775945956538]] [[140715832616884]]

@Girly-Rock
Copy link

[[[124641767652266]]] [[[124642810985495]]] [[[124643044318805]]] [[[124643044318805]]] [[[124643487652094]]] [[[124642300985546]]] [[[124644090985367]]] [[[124644404318669]]] [[[124644567651986]]] [[[124642300985546]]] [[[124643487652094]]] [[[124644404318669]]] [[[124642810985495]]] [[[124645367651906]]] [[[124642300985546]]] [[[124645977651845]]] [[[124646247651818]]] [[[124646574318452]]] [[[124645977651845]]] [[[124642300985546]]]

@rodrigograca31
Copy link

@rodrigograca31
Copy link

Boogles you could use this letters and memes: http://pastebin.com/ePJASr0i

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment