isundil
/
composed-emojis


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<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>