Changed absolute image src to use class with sprite url

bower.json

 {
   "name": "angular-chat-emoji-popup",
-  "version": "v1.1.2",
+  "version": "v1.2.0",
   "homepage": "https://github.com/ricardo-teixeira/angular-emoji-popup",
   "description": "Angular based Emoji Popup along with filters for encoding/decoding emojis",
   "main": ["src/js/emoji.js", "src/css/emoji.css"],

dist/css/emoji.min.css

-/*! Angular Emoji 1.0.0 2014-12-27 */span.emoji,span.emoji-inner{text-indent:-9999px;vertical-align:baseline}span.emoji{-moz-box-orient:vertical;display:inline-block;width:1em;height:1em;background-size:1em;background-repeat:no-repeat}span.emoji-sizer{line-height:.81em;font-size:1em;margin:-2px 0}span.emoji-outer{display:-moz-inline-box;display:inline-block;height:1em;width:1em}span.emoji-inner{display:-moz-inline-box;display:inline-block;width:100%;height:100%}img.emoji{width:1em;height:1em}.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:.8}.im_emoji_btn:hover .icon-emoji{opacity:1}.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{padding:6px;-moz-box-sizing:content-box;font-size:12px;margin-bottom:10px;min-height:36px;height:30px;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 .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-user-select:text;word-wrap:break-word}.emoji-wysiwyg-editor img{width:20px;height:20px;vertical-align:middle;margin:-3px 0 0}.emoji-menu{position:absolute;z-index:999;width:275px;margin-left:-25px;margin-top:-264px;overflow:hidden;border-top:1px #dfdfdf solid;border-bottom:1px #dfdfdf solid}.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:#fff;line-height:0;padding:0 4px;border-color:#C1C1C1}.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-bell,.emoji-menu-tabs .icon-car,.emoji-menu-tabs .icon-flower,.emoji-menu-tabs .icon-grid,.emoji-menu-tabs .icon-smile{opacity:.7}.emoji-menu-tabs .icon-bell:hover,.emoji-menu-tabs .icon-car:hover,.emoji-menu-tabs .icon-flower:hover,.emoji-menu-tabs .icon-grid:hover,.emoji-menu-tabs .icon-smile:hover{opacity:1}.emoji-menu .emoji-items-wrap{position:relative;height:174px}.emoji-menu .emoji-items{outline:0!important}.emoji-menu img{width:20px;height:20px;vertical-align:middle;border:0}.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}
+span.emoji,span.emoji-inner{text-indent:-9999px;vertical-align:baseline}span.emoji{-moz-box-orient:vertical;display:inline-block;width:1em;height:1em;background-size:1em;background-repeat:no-repeat}span.emoji-sizer{line-height:.81em;font-size:1em;margin:-2px 0}span.emoji-outer{display:-moz-inline-box;display:inline-block;height:1em;width:1em}span.emoji-inner{display:-moz-inline-box;display:inline-block;width:100%;height:100%}img.emoji{width:1em;height:1em}.emoji-img{overflow:hidden;text-indent:100%}.emojisprite_0{background:url(../img/emojisprite_0.png) no-repeat}.emojisprite_1{background:url(../img/emojisprite_1.png) no-repeat}.emojisprite_2{background:url(../img/emojisprite_2.png) no-repeat}.emojisprite_3{background:url(../img/emojisprite_3.png) no-repeat}.emojisprite_4{background:url(../img/emojisprite_4.png) no-repeat}.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:.8}.im_emoji_btn:hover .icon-emoji{opacity:1}.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{padding:6px;-moz-box-sizing:content-box;font-size:12px;margin-bottom:10px;min-height:36px;height:30px;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 .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-user-select:text;word-wrap:break-word}.emoji-wysiwyg-editor img{width:20px;height:20px;vertical-align:middle;margin:-3px 0 0}.emoji-menu{position:absolute;z-index:999;width:275px;margin-left:-25px;margin-top:-264px;overflow:hidden;border-top:1px #dfdfdf solid;border-bottom:1px #dfdfdf solid}.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:#fff;line-height:0;padding:0 4px;border-color:#C1C1C1}.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-bell,.emoji-menu-tabs .icon-car,.emoji-menu-tabs .icon-flower,.emoji-menu-tabs .icon-grid,.emoji-menu-tabs .icon-smile{opacity:.7}.emoji-menu-tabs .icon-bell:hover,.emoji-menu-tabs .icon-car:hover,.emoji-menu-tabs .icon-flower:hover,.emoji-menu-tabs .icon-grid:hover,.emoji-menu-tabs .icon-smile:hover{opacity:1}.emoji-menu .emoji-items-wrap{position:relative;height:174px}.emoji-menu .emoji-items{outline:0!important}.emoji-menu img{width:20px;height:20px;vertical-align:middle;border:0}.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}
 /*! Angular Emoji 1.0.0 2014-12-27 */.nano{position:relative;width:100%;height:100%;overflow:hidden}.nano>.nano-content,.nano>.nano-pane{position:absolute;right:0;top:0;bottom:0}.nano>.nano-content{overflow:scroll;overflow-x:hidden;left:0}.nano>.nano-content:focus{outline:dotted thin}.nano>.nano-content::-webkit-scrollbar{display:none}.has-scrollbar>.nano-content::-webkit-scrollbar{display:block}.nano>.nano-pane{background:rgba(0,0,0,.25);width:10px;visibility:hidden\9;opacity:.01;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.nano>.nano-pane>.nano-slider{background:#444;background:rgba(0,0,0,.5);position:relative;margin:0 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.nano-pane.active,.nano-pane.flashed,.nano:hover>.nano-pane{visibility:visible\9;opacity:.99}
\ No newline at end of file

src/css/emoji.css

-/*! Angular Emoji 1.0.0 2014-12-27 */
-
 span.emoji {
 	display: -moz-inline-box;
 	-moz-box-orient: vertical;
@@ -45,12 +43,35 @@ img.emoji {
 	height: 1em;
 }
 
+.emoji-img {
+    overflow: hidden;
+    text-indent: 100%;
+}
 
 .emoji-wysiwyg-editor:empty:before {
 content: attr(placeholder);
 color: #9aa2ab;
 }
 
+.emojisprite_0 {
+    background: transparent url('../img/emojisprite_0.png') 0 0 no-repeat;
+}
+
+.emojisprite_1 {
+    background: transparent url('../img/emojisprite_1.png') 0 0 no-repeat;
+}
+
+.emojisprite_2 {
+    background: transparent url('../img/emojisprite_2.png') 0 0 no-repeat;
+}
+
+.emojisprite_3 {
+    background: transparent url('../img/emojisprite_3.png') 0 0 no-repeat;
+}
+
+.emojisprite_4 {
+    background: transparent url('../img/emojisprite_4.png') 0 0 no-repeat;
+}
 
 .icon-emoji {
 display: inline-block;
@@ -127,7 +148,7 @@ opacity: 1;
     text-align: center;
     color: white;
     line-height: 0;
-    padding: 0px 4px;
+    padding: 0 4px;
     border-color: #C1C1C1;
 }
 .emoji-menu-tabs .emoji-menu-tab {

src/js/app.js

-/*! Angular Emoji 1.0.0 2014-12-27 */
-
 'use strict';
 
 var emojiApp = angular.module("emojiApp", ['ngSanitize']);
@@ -29,7 +27,8 @@ emojiApp.config(['$sceProvider', function($sceProvider)
         }
     }
 
-    $.emojiarea.spritesheetPath = '/assets/angular-chat-emoji-popup/dist/img/emojisprite_!.png';
+    //$.emojiarea.spritesheetPath = '/assets/angular-chat-emoji-popup/dist/img/emojisprite_!.png';
+    $.emojiarea.spritesheetPath = 'emojisprite_!';
     $.emojiarea.spritesheetDimens = Config.EmojiCategorySpritesheetDimens;
     $.emojiarea.iconSize = 20;
     $.emojiarea.icons = icons;

src/js/emojiDirectives.js

@@ -246,7 +246,7 @@ emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile',
 
             $(document).off('paste', onPasteEvent);
             $(document).off('keydown', onKeyDown);
-            $(submitBtn).off('mousedown')
+            //$(submitBtn).off('mousedown')
             fileSelects.off('change');
             if (richTextarea)
             {

src/js/jquery.emojiarea.js

@@ -272,12 +272,11 @@
 		var style = 'display:inline-block;';
 		style += 'width:' + iconSize + 'px;';
 		style += 'height:' + iconSize + 'px;';
-		style += 'background:url(\'' + filename.replace('!', category) + '\') '
-				+ xoffset + 'px ' + yoffset + 'px no-repeat;';
+		style += 'background-position: ' + xoffset + 'px ' + yoffset + 'px;';
 		style += 'background-size:' + scaledWidth + 'px ' + scaledHeight
-				+ 'px;';
-		return '<img src="/assets/angular-chat-emoji-popup/dist/img/blank.gif" class="img" style="'
-				+ style + '" alt="' + util.htmlEntities(name) + '">';
+			+ 'px;';
+
+		return '<img class="emoji-img '+ filename.replace('!', category) +'" style="' + style + '" alt="' + util.htmlEntities(name) + '" title="' + util.htmlEntities(name) + '"/>';
 	};
 
 	$.emojiarea.createIcon = EmojiArea.createIcon;