emoticons moved to CSS
authorDarren <darren@darrenwhitlen.com>
Fri, 13 Sep 2013 23:27:16 +0000 (00:27 +0100)
committerDarren <darren@darrenwhitlen.com>
Fri, 13 Sep 2013 23:27:16 +0000 (00:27 +0100)
client/assets/css/style.css
client/assets/src/helpers/utils.js

index 15f88f81889a8f65749d8a643f1a92db1ff678a4..d0804867f698b56eb13fcfa9e8ee499a78a698dd 100644 (file)
@@ -116,7 +116,32 @@ html, body { height:100%; }
 
 
 /* Emoticons */
-#kiwi .emoticon { display: inline-block; height: 15px; width: 17px; overflow: hidden; font-size: 0; background-repeat: no-repeat; }
+#kiwi .emoticon {
+    display: inline-block;
+    height: 15px; width: 17px;
+    overflow: hidden;
+    font-size: 0;
+    background: url(../img/emoticons.png) no-repeat;
+}
+#kiwi .emoticon.smile { background-position:0px 0; }
+#kiwi .emoticon.sad { background-position:-25px 0; }
+#kiwi .emoticon.lion { background-position:-50px 0; }
+#kiwi .emoticon.winky_lion { background-position:-75px 0; }
+#kiwi .emoticon.confused { background-position:-100px 0; }
+#kiwi .emoticon.cry { background-position:-125px 0; }
+#kiwi .emoticon.wink { background-position:-150px 0; }
+#kiwi .emoticon.wink_happy { background-position:-175px 0; }
+#kiwi .emoticon.tongue { background-position:-200px 0; }
+#kiwi .emoticon.cringe_tongue { background-position:-225px 0; }
+#kiwi .emoticon.shocked { background-position:-250px 0; }
+#kiwi .emoticon.happy { background-position:-275px 0; }
+#kiwi .emoticon.eyebrows { background-position:-300px 0; }
+#kiwi .emoticon.heart { background-position:-325px 0; }
+#kiwi .emoticon.doh { background-position:-373px 0; }
+#kiwi .emoticon.big_grin { background-position:-398px 0; }
+#kiwi .emoticon.wide_eye_right { background-position:-423px 0; }
+#kiwi .emoticon.wide_eye_left { background-position:-448px 0; }
+#kiwi .emoticon.unsure { background-position:-473px 0; }
 
 
 /**
index 7590785859eea356e31819331e9e5cc94542561d..8c9e78c83deac087957e27181abb74a943c046d5 100644 (file)
@@ -367,77 +367,81 @@ function emoticonFromText(str) {
     var words_in = str.split(' '),
         words_out = [],
         i,
-        emoticon_location = _kiwi.app.get('base_path') + '/assets/img/emoticons.png',
-        pushEmoticon = function (alt, offset) {
-            words_out.push('<i class="emoticon" style="background-image:url(' + emoticon_location + '); background-position:-' + offset+ 'px 0px">' + alt + '</i>');
+        pushEmoticon = function (alt, emote_name) {
+            words_out.push('<i class="emoticon ' + emote_name + '">' + alt + '</i>');
         };
 
     for (i = 0; i < words_in.length; i++) {
         switch(words_in[i]) {
         case ':)':
-            pushEmoticon(':)', 0);
+            pushEmoticon(':)', 'smile');
             break;
         case ':(':
-            pushEmoticon(':(', 25);
+            pushEmoticon(':(', 'sad');
             break;
         case ':3':
-            pushEmoticon(':3', 50);
+            pushEmoticon(':3', 'lion');
             break;
         case ';3':
-            pushEmoticon(';3', 75);
+            pushEmoticon(';3', 'winky_lion');
             break;
         case ':s':
-            pushEmoticon(':s', 100);
+        case ':S':
+            pushEmoticon(':s', 'confused');
             break;
         case ';(':
-            pushEmoticon(';(', 125);
+        case ';_;':
+            pushEmoticon(';(', 'cry');
             break;
         case ';)':
-            pushEmoticon(';)', 150);
+            pushEmoticon(';)', 'wink');
             break;
         case ';D':
-            pushEmoticon(';D"', 175);
+            pushEmoticon(';D"', 'wink_happy');
             break;
         case ':P':
-            pushEmoticon(':P', 200);
+        case ':p':
+            pushEmoticon(':P', 'tongue');
             break;
         case 'xP':
-            pushEmoticon('xP', 225);
+            pushEmoticon('xP', 'cringe_tongue');
             break;
         case ':o':
         case ':O':
-            pushEmoticon(':o', 250);
+        case ':0':
+            pushEmoticon(':o', 'shocked');
             break;
         case ':D':
-            pushEmoticon(':D', 275);
+            pushEmoticon(':D', 'happy');
             break;
-        case '^^,':
-            pushEmoticon('^^,', 300);
+        case '^^':
+        case '^.^':
+            pushEmoticon('^^,', 'eyebrows');
             break;
         case '&lt;3':
-            pushEmoticon('<3', 325);
-            break;
-        case '&gt;.&lt;':
-            pushEmoticon('>.<', 348);
+            pushEmoticon('<3', 'heart');
             break;
         case '&gt;_&lt;':
-            pushEmoticon('>_<', 373);
+        case '&gt;.&lt;':
+            pushEmoticon('>_<', 'doh');
             break;
         case 'XD':
         case 'xD':
-            pushEmoticon('xD', 398);
+            pushEmoticon('xD', 'big_grin');
             break;
         case 'o.0':
-            pushEmoticon('o.0', 423);
+        case 'o.O':
+            pushEmoticon('o.0', 'wide_eye_right');
             break;
         case '0.o':
-            pushEmoticon('0.o', 448);
+        case 'O.o':
+            pushEmoticon('0.o', 'wide_eye_left');
             break;
         case ':\\':
         case '=\\':
         case ':/':
         case '=/':
-            pushEmoticon(':\\', 473);
+            pushEmoticon(':\\', 'unsure');
             break;
         default:
             words_out.push(words_in[i]);