|
|
@@ -0,0 +1,93 @@
|
|
|
+<DOCTYPE html5>
|
|
|
+<html>
|
|
|
+<head><style>
|
|
|
+li { font-weight: bolder; font-family: sans-serif; }
|
|
|
+</style></head>
|
|
|
+<body>
|
|
|
+<script language="javascript">
|
|
|
+COMPOSED_EMOJI = (function(){
|
|
|
+ var ready = false
|
|
|
+ ,onceReady = []
|
|
|
+ ,emojiParts = {
|
|
|
+ ":": {pos: [0, 0], zIndex: 50}
|
|
|
+ ,";": {pos: [1, 0], zIndex: 50}
|
|
|
+ ,"-": {pos: [0, 1], zIndex: 0}
|
|
|
+ ,"(": {pos: [0, 2], zIndex: 10}
|
|
|
+ ,")": {pos: [1, 2], zIndex: 10}
|
|
|
+ }
|
|
|
+ ,masks = []
|
|
|
+ ,SPRITE_SIZE = 64
|
|
|
+ ,sprites = new Image();
|
|
|
+
|
|
|
+ sprites.onload = function() {
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+ canvas.height = sprites.height;
|
|
|
+ canvas.width = sprites.width;
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ ctx.drawImage(sprites, 0, 0);
|
|
|
+ sprites = canvas;
|
|
|
+ ready = true;
|
|
|
+ onceReady.forEach(function(cb) {
|
|
|
+ cb();
|
|
|
+ });
|
|
|
+ onceReady = [];
|
|
|
+ };
|
|
|
+ sprites.onerror = function() {
|
|
|
+ console.error("Failed loading images");
|
|
|
+ };
|
|
|
+ sprites.src = "emojiComposer.sprites.png";
|
|
|
+
|
|
|
+ var applyItem = function(ctx, spritePos) {
|
|
|
+ ctx.drawImage(sprites,
|
|
|
+ spritePos[0] * SPRITE_SIZE *2, spritePos[1]* SPRITE_SIZE,
|
|
|
+ SPRITE_SIZE, SPRITE_SIZE,
|
|
|
+ 0, 0,
|
|
|
+ SPRITE_SIZE, SPRITE_SIZE);
|
|
|
+ };
|
|
|
+ var addEmoji = function(emojiCode, cb) {
|
|
|
+ var i =0
|
|
|
+ ,codeLength =emojiCode.length
|
|
|
+ ,items = []
|
|
|
+
|
|
|
+ for (; i < codeLength; i++) {
|
|
|
+ var c = emojiCode[i];
|
|
|
+ if (!emojiParts[c])
|
|
|
+ break;
|
|
|
+ items.push(emojiParts[c]);
|
|
|
+ }
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+ canvas.height = canvas.width = SPRITE_SIZE;
|
|
|
+ var ctx = canvas.getContext('2d');
|
|
|
+ items.sort(function(a, b) {
|
|
|
+ return a.zIndex -b.zIndex;
|
|
|
+ });
|
|
|
+ items.forEach(function(i) {
|
|
|
+ applyItem(ctx, i.pos);
|
|
|
+ });
|
|
|
+ return canvas;
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ toHTMLElement: addEmoji,
|
|
|
+ onceReady: function(cb) {
|
|
|
+ if (ready)
|
|
|
+ cb();
|
|
|
+ else
|
|
|
+ onceReady.push(cb);
|
|
|
+ }
|
|
|
+ };
|
|
|
+})();
|
|
|
+
|
|
|
+COMPOSED_EMOJI.onceReady(function() {
|
|
|
+ var list = document.createElement("ul");
|
|
|
+ ([":-)", ":-(", ";-)", ";-("]).forEach(function(i) {
|
|
|
+ var listItem = document.createElement("li"),
|
|
|
+ expl = document.createElement("span");
|
|
|
+ expl.textContent = i;
|
|
|
+ listItem.appendChild(expl);
|
|
|
+ listItem.appendChild(COMPOSED_EMOJI.toHTMLElement(i));
|
|
|
+ list.appendChild(listItem);
|
|
|
+ });
|
|
|
+ document.body.appendChild(list);
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body></html>
|
