Changed messageDiv id to messageDiv class to avoid errors when using multiple instances

.bower.json

+{
+  "name": "angular-emoji-popup",
+  "version": "1.1.0",
+  "homepage": "https://github.com/Coraza/angular-emoji-popup",
+  "description": "Angular based Emoji Popup along with filters for encoding/decoding emojis",
+  "main": [
+    "dist/js/config.js",
+    "dist/js/emoji.min.js",
+    "dist/css/emoji.min.css"
+  ],
+  "keywords": [
+    "angular",
+    "emoji"
+  ],
+  "authors": [
+    "madhur"
+  ],
+  "license": "MIT",
+  "_release": "1.1.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.1.0",
+    "commit": "8190ee2c3d1cc2405639e6324250d171e4b1ab0d"
+  },
+  "_source": "https://github.com/Coraza/angular-emoji-popup.git",
+  "_target": "^1.1.0",
+  "_originalSource": "angular-emoji-popup",
+  "_direct": true
+}
\ No newline at end of file

README.md

@@ -47,7 +47,7 @@ angular.module("myApp", ['ngSanitize', 'emojiApp']);
 The module consists of following components:
 
 * `emojiForm` - Enclose this directive with a `textarea` and a `button` named `emojibtn`.
-This directive adds a `contenteditable` `div` and hides the `textarea`. Anything typed into this `contenteditable` `div` is synced with the `textarea`. It also hooks up the button to show an Emoji popup. 
+This directive adds a `contenteditable` `div` and hides the `textarea`. Anything typed into this `contebteditable` `div` is synced with the `textarea`. It also hooks up the button to show an Emoji popup. 
 
 ```html
 <div emoji-form emoji-message="emojiMessage">

src/css/emoji.css

@@ -107,19 +107,12 @@ opacity: 1;
 .emoji-menu {
     position: absolute;
     z-index: 999;
-  width: 225px;
-  margin-left: -107px;
-  margin-top: -252px;
+    width: 275px;
+    margin-left: -25px;
+    margin-top: -264px;
     overflow: hidden;
-
-  border: 1px #dfdfdf solid;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  overflow: hidden;
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow:         0px 1px 1px rgba(0, 0, 0, 0.1);
+    border-top: 1px #dfdfdf solid;
+    border-bottom: 1px #dfdfdf solid;
 }
 .emoji-items-wrap1 {
   background: #FFF;
@@ -134,6 +127,8 @@ opacity: 1;
     text-align: center;
     color: white;
     line-height: 0;
+    padding: 0px 4px;
+    border-color: #C1C1C1;
 }
 .emoji-menu-tabs .emoji-menu-tab {
   display: inline-block;
@@ -185,7 +180,7 @@ opacity: 1;
   height: 174px;
 }
 .emoji-menu .emoji-items {
-  padding-right: 8px;
+  /*padding-right: 8px;*/
   outline: 0 !important;
 }
 .emoji-menu img {

src/js/app.js

@@ -29,7 +29,7 @@ emojiApp.config(['$sceProvider', function($sceProvider)
         }
     }
 
-    $.emojiarea.spritesheetPath = 'img/emojisprite_!.png';
+    $.emojiarea.spritesheetPath = '../assets/angular-emoji-popup/dist/img/emojisprite_!.png';
     $.emojiarea.spritesheetDimens = Config.EmojiCategorySpritesheetDimens;
     $.emojiarea.iconSize = 20;
     $.emojiarea.icons = icons;

src/js/emojiDirectives.js

@@ -18,7 +18,6 @@ emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile',
         var messageField = $('textarea', element)[0],
             fileSelects = $('input', element),
             emojiButton = $('#emojibtn', element)[0],
-            submitBtn = $('#submitBtn', element)[0],
             editorElement = messageField,
             emojiArea = $(messageField).emojiarea(
             {
@@ -29,8 +28,8 @@ emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile',
             richTextarea = $(
                 '.emoji-wysiwyg-editor', element)[0];
 
-            var s = $compile($("#messageDiv"));
-            $("#messageDiv").replaceWith(s($scope));
+            var s = $compile($(".messageDiv", element));
+            $(".messageDiv", element).replaceWith(s($scope));
 
 
         if (richTextarea)
@@ -94,6 +93,8 @@ emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile',
                         $timeout.cancel(updatePromise);
                         updateValue();
                         $scope.emojiMessage.replyToUser();
+                        $scope.emojiMessage.messagetext = '';
+                        $(richTextarea).empty();
                         // $(element).trigger('message_send');
                         resetTyping();
                         return cancelEvent(e);
@@ -127,7 +128,7 @@ emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile',
                     $scope.draftMessage.text || '').html();
                 html = html.replace(/\n/g, '<br/>');
                 $(richTextarea).html(html);
-                var lastLength = html.length;
+                //lastLength = html.length;
                 updateHeight();
             }
         }

src/js/jquery.emojiarea.js

@@ -276,7 +276,7 @@
 				+ xoffset + 'px ' + yoffset + 'px no-repeat;';
 		style += 'background-size:' + scaledWidth + 'px ' + scaledHeight
 				+ 'px;';
-		return '<img src="img/blank.gif" class="img" style="'
+		return '<img src="../assets/angular-emoji-popup/dist/img/blank.gif" class="img" style="'
 				+ style + '" alt="' + util.htmlEntities(name) + '">';
 	};