Merge pull request #8 from dryabov/master

emoticons

home.html

@@ -5,6 +5,7 @@
     <title>twister</title>
     <link rel="stylesheet" href="css/style.css" type="text/css"/>
     <link rel="stylesheet" href="css/profile.css" type="text/css"/>
+    <link rel="stylesheet" href="jquery-emotions/jquery.emotions.fb.css" type="text/css"/>
     <script src="js/jquery.min.js"></script>
     <script src="js/jQueryPlugins.js"></script>
     <script src="js/jquery.json-2.4.js"></script>
@@ -28,6 +29,7 @@
     <script src="js/jquery.textcomplete.js"></script>
     <script src="js/calm.js"></script>
     <script src="js/options.js"></script>
+    <script src="jquery-emotions/jquery.emotions.js"></script>
     <script>$(function(){setInterval("networkUpdate()", 2000); homeIntInit ();})</script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />

jquery-emotions/README.md

@@ -0,0 +1,40 @@
+# Emotions: a jQuery plugin
+
+Emotions is a jQuery plugin that makes it easy to convert some emotion text to images. ( e.g. 8) => img )
+
+## Usage
+
+First, load css, jQuery and the plugin:
+
+```html
+<link rel="stylesheet" href="jquery.emotions.icq.css">
+<script src="jquery.min.js" type="text/javascript"></script>
+<script src="jquery.emotions.js" type="text/javascript"></script>
+```
+
+Now, let's attach it to your dom elements:
+
+```html
+<script type="text/javascript">
+   jQuery(document).ready(function() {
+     $(".txt").emotions();
+   });
+</script>
+```
+
+Create dom elements which text should be transformed:
+
+```html
+<div class="txt">Some text with smile 8)</div>
+<div class="txt">o.O o.O o.O :D :D :D</div>
+<div class="txt">o:) o.O 3:) :D <3 :* :) 8| :/ ;) :'( :( 8) >:( :p</div>
+```
+
+## Links
+[Смайлы в чате как в Facebook или ICQ c помощью JQuery](http://www.itlessons.info/javascript/facebook-or-icq-jquery-emotions-plugin/)
+
+## Author
+[itlessons](http://www.itlessons.info) ([@itlessonsinfo](http://twitter.com/itlessonsinfo))
+
+## Other
+[MIT License](http://www.opensource.org/licenses/mit-license.php)

jquery-emotions/jquery.emotions.fb.css

@@ -0,0 +1,71 @@
+.emotions {
+    width: 14px;
+    height: 14px;
+    background: url("emotions/blank.gif") no-repeat center center;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.emo-angel {
+    background: url("emotions/fb/angel.gif");
+    width: 16px;
+    height: 15px;
+}
+
+.emo-confused {
+    background: url("emotions/fb/confused.gif");
+}
+
+.emo-devil {
+    background: url("emotions/fb/devil.gif");
+    height: 15px;
+}
+
+.emo-grin {
+    background: url("emotions/fb/grin.gif");
+}
+
+.emo-heart {
+    background: url("emotions/fb/heart.gif");
+    width: 15px;
+}
+
+.emo-kiss {
+    background: url("emotions/fb/kiss.gif");
+}
+
+.emo-smile {
+    background: url("emotions/fb/smile.gif");
+}
+
+.emo-sunglasses {
+    background: url("emotions/fb/sunglasses.gif");
+}
+
+.emo-unsure {
+    background: url("emotions/fb/unsure.gif");
+}
+
+.emo-wink {
+    background: url("emotions/fb/wink.gif");
+}
+
+.emo-cry {
+    background: url("emotions/fb/cry.gif");
+}
+
+.emo-glasses {
+    background: url("emotions/fb/glasses.gif");
+}
+
+.emo-grumpy {
+    background: url("emotions/fb/grumpy.gif");
+}
+
+.emo-tongue {
+    background: url("emotions/fb/tongue.gif");
+}
+
+.emo-frown {
+    background: url("emotions/fb/frown.gif");
+}

jquery-emotions/jquery.emotions.icq.css

@@ -0,0 +1,67 @@
+.emotions {
+    width: 20px;
+    height: 20px;
+    background: url("emotions/blank.gif") no-repeat center center;
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+.emo-angel {
+    background: url("emotions/icq/angel.gif");
+}
+
+.emo-confused {
+    background: url("emotions/icq/confused.gif");
+}
+
+.emo-devil {
+    background: url("emotions/icq/devil.gif");
+}
+
+.emo-grin {
+    background: url("emotions/icq/grin.gif");
+}
+
+.emo-heart {
+    background: url("emotions/icq/heart.gif");
+}
+
+.emo-kiss {
+    background: url("emotions/icq/kiss.gif");
+}
+
+.emo-smile {
+    background: url("emotions/icq/smile.gif");
+}
+
+.emo-sunglasses {
+    background: url("emotions/icq/sunglasses.gif");
+}
+
+.emo-unsure {
+    background: url("emotions/icq/unsure.gif");
+}
+
+.emo-wink {
+    background: url("emotions/icq/wink.gif");
+}
+
+.emo-cry {
+    background: url("emotions/icq/cry.gif");
+}
+
+.emo-glasses {
+    background: url("emotions/icq/glasses.gif");
+}
+
+.emo-grumpy {
+    background: url("emotions/icq/grumpy.gif");
+}
+
+.emo-tongue {
+    background: url("emotions/icq/tongue.gif");
+}
+
+.emo-frown {
+    background: url("emotions/icq/frown.gif");
+}

jquery-emotions/jquery.emotions.js

@@ -0,0 +1,97 @@
+/**
+ * Emotions is a jQuery plugin that makes it easy to convert some emotion text to images (e.g 8) )
+ *
+ * @name emotions
+ * @version 0.0.1
+ * @requires jQuery v1.2.3+
+ * @license MIT License - http://www.opensource.org/licenses/mit-license.php
+ *
+ * For usage and examples, visit:
+ * https://github.com/itlessons/jquery-emotions
+ * http://www.itlessons.info/javascript/facebook-or-icq-jquery-emotions-plugin/
+ *
+ * Copyright (c) 2013, www.itlessons.info
+ */
+(function ($) {
+
+    $.emotions = function (text) {
+        return $.emotions.parse(text);
+    };
+
+    var $t = $.emotions;
+
+    $.extend($.emotions, {
+
+        settings: {
+            replacement: '<span class="emotions emo-{eId}"></span>',
+            map: {
+                "o:)": "angel",
+                "o.O": "confused",
+                "3:)": "devil",
+                "<3": "heart",
+                ":*": "kiss",
+                ":-)": "smile",
+                ":]": "smile",
+                "8|": "sunglasses",
+                ":/": "unsure",
+                ";)": "wink",
+                ":'(": "cry",
+                ">:(": "grumpy",
+                ":(": "frown",
+                "8)": "glasses",
+                ":p": "tongue",
+                ":)": "smile",
+                "=)": "smile",
+                ":D": "grin"
+            }
+        },
+        shortcode: function(eId){
+            var $s = $t.settings;
+            for (var pattern in $s.map) {
+                if($s.map[pattern] == eId)
+                    return pattern;
+            }
+
+            return "";
+        },
+        parse: function (text) {
+
+            var $s = $t.settings;
+
+            for (var pattern in $s.map) {
+
+                var encPattent = $t.encode(pattern);
+
+                if (text.indexOf(pattern) < 0 && text.indexOf(encPattent) < 0) {
+                    continue;
+                }
+
+                var rep = $s.replacement
+                    .replace(/\{eId\}/g, $s.map[pattern]);
+
+                text = text
+                    .replace(new RegExp($t.quote(pattern), "g"), rep)
+                    .replace(new RegExp($t.quote(encPattent), "g"), rep);
+            }
+
+            return text;
+        },
+        encode: function (str) {
+            return (str + '')
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;');
+        },
+        quote: function (str) {
+            return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
+        }
+    });
+
+    $.fn.emotions = function (action, options) {
+        this.each(function () {
+            var el = $(this);
+            el.html($.emotions(el.html()));
+        });
+    };
+})(jQuery);

js/twister_formatpost.js

@@ -153,7 +153,7 @@ function htmlFormatMsg( msg, output, mentions ) {
         match = reAll.exec(msg);
         if( match ) {
             if( match[0] == "@" ) {
-                output.append(msg.substr(0, match.index));
+                output.append($.emotions(msg.substr(0, match.index)));
                 tmp = msg.substr(match.index+1);
                 var username = _extractUsername(tmp);
                 if( username.length ) {
@@ -170,7 +170,7 @@ function htmlFormatMsg( msg, output, mentions ) {
             }
     
             if( reHttp.exec(match[0]) ) {
-                output.append(msg.substr(0, match.index));
+                output.append($.emotions(msg.substr(0, match.index)));
                 tmp = msg.substring(match.index);
                 var space = tmp.indexOf(" ");
                 var url;
@@ -188,7 +188,7 @@ function htmlFormatMsg( msg, output, mentions ) {
             }
     
             if( match[0] == "#" ) {
-                output.append(msg.substr(0, match.index));
+                output.append($.emotions(msg.substr(0, match.index)));
                 tmp = msg.substr(match.index+1);
                 var hashtag = _extractUsername(tmp);
                 if( hashtag.length ) {
@@ -203,7 +203,7 @@ function htmlFormatMsg( msg, output, mentions ) {
             }
         }
 
-        output.append(msg);
+        output.append($.emotions(msg));
         msg = "";
     }
 }