work in progress

css/style.css

+
+.form-control:focus {
+border-color: #66afe9;
+outline: 0;
+-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+}
+
+.emoji-wysiwyg-editor:empty:before {
+content: attr(placeholder);
+color: #9aa2ab;
+}
+
+
+.icon-emoji {
+display: inline-block;
+width: 23px;
+height: 23px;
+vertical-align: text-top;
+background: url('/img/IconsetW.png') -10px -4px/42px 1171px no-repeat;
+opacity: 0.8;
+}
+
+.im_emoji_btn:hover .icon-emoji {
+opacity: 1;
+}
+
+
+
+/* Emoji area */
+.emoji-wysiwyg-editor:empty:before {
+  content: attr(placeholder);
+  color: #9aa2ab;
+}
+.emoji-wysiwyg-editor:active:before,
+.emoji-wysiwyg-editor:focus:before {
+  content: none;
+}
+
+.emoji-wysiwyg-editor {
+	float:left;
+	margin-left:2px;
+	padding:6px;
+  box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  font-size: 12px;
+  margin-bottom: 10px;
+  min-height: 36px;
+  height: 30px;
+  width: 500px;
+  max-height: 284px;
+  overflow: auto;
+  line-height: 17px;
+
+  border: 1px solid #d2dbe3;
+  border-radius: 2px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+
+  -webkit-user-select: text;
+  word-wrap: break-word;
+}
+.emoji-wysiwyg-editor img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin: -3px 0 0 0;
+}
+.emoji-menu {
+  position: absolute;
+  z-index: 999;
+  width: 225px;
+  margin-left: -107px;
+  margin-top: -252px;
+  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);
+}
+.emoji-items-wrap1 {
+  background: #FFF;
+  padding: 5px 2px 5px 5px;
+}
+.emoji-items-wrap1 .emoji-menu-tabs {
+    width: 100%;
+    margin-bottom: 8px;
+    margin-top: 3px;
+}
+.emoji-items-wrap1 .emoji-menu-tabs td {
+    text-align: center;
+    color: white;
+    line-height: 0;
+}
+.emoji-menu-tabs .emoji-menu-tab {
+  display: inline-block;
+  width: 24px;
+  height: 29px;
+  background: url('/img/IconsetSmiles.png') no-repeat;
+  background-size: 42px 350px;
+}
+.is_1x .emoji-menu-tabs .emoji-menu-tab {
+  background-image: url('/img/IconsetSmiles_1x.png');
+}
+
+.emoji-menu-tabs .icon-recent {background-position: -9px -306px; }
+.emoji-menu-tabs .icon-recent-selected {background-position: -9px -277px; }
+
+.emoji-menu-tabs .icon-smile {background-position: -9px -34px; }
+.emoji-menu-tabs .icon-smile-selected {background-position: -9px -5px; }
+
+.emoji-menu-tabs .icon-flower {background-position: -9px -145px; }
+.emoji-menu-tabs .icon-flower-selected {background-position: -9px -118px; }
+
+.emoji-menu-tabs .icon-bell {background-position: -9px -89px; }
+.emoji-menu-tabs .icon-bell-selected {background-position: -9px -61px; }
+
+.emoji-menu-tabs .icon-car {background-position: -9px -196px; }
+.emoji-menu-tabs .icon-car-selected {background-position: -9px -170px; }
+
+.emoji-menu-tabs .icon-grid {background-position: -9px -248px; }
+.emoji-menu-tabs .icon-grid-selected {background-position: -9px -222px; }
+
+.emoji-menu-tabs .icon-smile,
+.emoji-menu-tabs .icon-flower,
+.emoji-menu-tabs .icon-bell,
+.emoji-menu-tabs .icon-car,
+.emoji-menu-tabs .icon-grid {
+  opacity: 0.7;
+}
+.emoji-menu-tabs .icon-smile:hover,
+.emoji-menu-tabs .icon-flower:hover,
+.emoji-menu-tabs .icon-bell:hover,
+.emoji-menu-tabs .icon-car:hover,
+.emoji-menu-tabs .icon-grid:hover {
+  opacity: 1;
+}
+
+
+.emoji-menu .emoji-items-wrap {
+  position: relative;
+  height: 174px;
+}
+.emoji-menu .emoji-items {
+  padding-right: 8px;
+  outline: 0 !important;
+}
+.emoji-menu img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  border: 0 none;
+}
+.emoji-menu .emoji-items a {
+  margin: -1px 0 0 -1px;
+  padding: 5px;
+  display: block;
+  float: left;
+  border-radius: 2px;
+}
+.emoji-menu .emoji-items a:hover {
+  background-color: #edf2f5;
+}
+.emoji-menu:after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.emoji-menu a .label {
+  display: none;
+}
+
+.myform
+{
+	 position: fixed;
+    top: 50%;
+    width:100%;
+    left: 20%;
+}
\ No newline at end of file

index.html

@@ -8,21 +8,35 @@
 </head>
 
 <body ng-controller="emojiController">
+<!--<h1>Angular Emoji Popup</h1>-->
+<p/>
+<p/>
+<p/>
+<p/>
 
-    <div myForm>
+    <div my-form class="myform">
         <textarea id="messageInput" ng-enter="replyToUser()" ng-model="messagetext" placeholder="Write a message..." class="ng-untouched ng-valid ng-dirty ng-valid-parse" style="display: none;"></textarea>
+
+
+     <div style="margin-right:10px;margin-top:5px;" class="im_emoji_btn" id="emojibtn" style="cursor:pointer">
+                      <i class="icon icon-emoji"  style="cursor:pointer; margin-left:20px;margin-top:10px;"></i>
+                    </div>
+
     </div>
 
 
     <script type="text/javascript" src="js/angular.min.js"></script>
     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
-    <script type="text/javascript" src="js/config.js"></script>
+   
     <script type="text/javascript" src="js/emoji.js"></script>
     <script type="text/javascript" src="js/jquery.emojiarea.js"></script>
 
     <script type="text/javascript" src="js/app.js"></script>
+     <script type="text/javascript" src="js/config.js"></script>
     <script type="text/javascript" src="js/emojiController.js"></script>
     <script type="text/javascript" src="js/emojiDirectives.js"></script>
+    <script type="text/javascript" src="js/nanoscroller.js"></script>
+
 </body>
 
 </html>

js/app.js

@@ -2,3 +2,27 @@
 
 var emojiApp  = angular.module("emojiApp", []);
 
+emojiApp.config(['ConfigProvider',function(ConfigProvider) {
+
+	var icons = {}, reverseIcons = {}, i, j, hex, name, dataItem, row, column, totalColumns;
+
+			for (j = 0; j < Config.EmojiCategories.length; j++) {
+				totalColumns = Config.EmojiCategorySpritesheetDimens[j][1];
+				for (i = 0; i < Config.EmojiCategories[j].length; i++) {
+					dataItem = Config.Emoji[Config.EmojiCategories[j][i]];
+					name = dataItem[1][0];
+					row = Math.floor(i / totalColumns);
+					column = (i % totalColumns);
+					icons[':' + name + ':'] = [ j, row, column,
+							':' + name + ':' ];
+					reverseIcons[name] = dataItem[0];
+				}
+			}
+
+			$.emojiarea.spritesheetPath = '/img/emojisprite_!.png';
+			$.emojiarea.spritesheetDimens = Config.EmojiCategorySpritesheetDimens;
+			$.emojiarea.iconSize = 20;
+			$.emojiarea.icons = icons;
+			$.emojiarea.reverseIcons = reverseIcons;
+	
+}]);
\ No newline at end of file

js/emojiDirectives.js

 'use strict';
 
 
-emojiApp.directive('myForm', ['', function()
+emojiApp.directive('myForm', ['$http', '$interpolate', function($http, $interpolate)
 {
     // Runs during compile
     return {
         // name: '',
         // priority: 1,
         // terminal: true,
-        // scope: {}, // {} = isolate, true = child, false/undefined = no change
+        scope:
+        {}, // {} = isolate, true = child, false/undefined = no change
         // controller: function($scope, $element, $attrs, $transclude) {},
         // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
-        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
+        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
         // template: '',
         // templateUrl: '',
         // replace: true,
@@ -26,7 +27,8 @@ emojiApp.directive('myForm', ['', function()
             fileSelects = $('input', element),
             dropbox = $('#dropbox', element)[0],
             emojiButton = $('#emojibtn', element)[0],
-                editorElement = messageField, dragStarted, dragTimeout,
+            editorElement = messageField,
+            dragStarted, dragTimeout,
 
             emojiArea = $(messageField).emojiarea(
             {
@@ -390,5 +392,4 @@ emojiApp.directive('myForm', ['', function()
          */
 
     }
-    }
-]);
+}]);