Skip to content

A
angular-emoji-popup
Commit 7e4477c4 authored by Madhur's avatar Madhur
Browse files
Options

final touches

parent d0b54320
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 36 deletions
css/style.css
View file @ 7e4477c4
...@@ -215,4 +215,10 @@ pre ...@@ -215,4 +215,10 @@ pre
{ {
background-color: white; background-color: white;
color:black; color:black;
overflow:auto;
}
.emoji-wysiwyg-editor
{
height: 52px;
} }
\ No newline at end of file
index.html
View file @ 7e4477c4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Emoji</title> <title>AngularJs Emoji Popup Demo</title>
<link type="text/stylesheet" rel="stylesheet" href="css/bootstrap.min.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/stylesheet" rel="stylesheet" href="css/bootstrap-theme.min.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link type="text/stylesheet" rel="stylesheet" href="css/nanoscroller.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/nanoscroller.css" />
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h1 style="text-align:center">Angular Emoji Popup</h1> <h1 style="text-align:center">AngularJs Emoji Popup Demo</h1>
</div> </div>
</div> </div>
...@@ -44,36 +44,41 @@ ...@@ -44,36 +44,41 @@
</button> </button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<pre>&lt;div emoji-form emoji-message="emojiMessage"&gt;
&lt;textarea id="messageInput" ng-model="emojiMessage.messagetext" /&gt;&lt;/textarea&gt;
&lt;button id="emojibtn"&gt;
&lt;i class="icon icon-emoji"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;</pre>
<h4>Raw: </h4> <h4>Raw: </h4>
<div class="form-control" style="height:200px; overflow:auto" ng-bind="emojiMessage.rawhtml"></div> <div class="form-control" style="height:200px; overflow:auto" ng-bind="emojiMessage.rawhtml"></div>
<pre> <pre>
&lt;div ng-bind="emojiMessage.rawhtml"&gt;&lt;/div&gt; &lt;div ng-bind="emojiMessage.rawhtml"&gt;&lt;/div&gt;</pre>
</pre>
<h4>Colons: </h4> <h4>Colons: </h4>
<div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext"></div> <div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext"></div>
<pre> <pre>
&lt;div ng-bind="emojiMessage.messagetext"&gt;&lt;/div&gt; &lt;div ng-bind="emojiMessage.messagetext"&gt;&lt;/div&gt;</pre>
</pre>
<h4>Parsed: </h4> <h4>Parsed: </h4>
<div class="form-control" style="height:50px;overflow:auto" ng-bind-html="emojiMessage.rawhtml"></div> <div class="form-control" style="height:50px;overflow:auto" ng-bind-html="emojiMessage.rawhtml"></div>
<pre> <pre>
&lt;div ng-bind-html="emojiMessage.messagetext"&gt;&lt;/div&gt; &lt;div ng-bind-html="emojiMessage.messagetext"&gt;&lt;/div&gt;</pre>
</pre>
<h4>Unicode: (Will not display fine unless proper font is used) </h4> <h4>Unicode: (Some emoji might be unreadable) </h4>
<div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext | colonToSmiley"> </div> <div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext | colonToCode"> </div>
<pre> <pre>
&lt;div ng-bind="emojiMessage.messagetext | colonToSmiley "&gt;&lt;/div&gt; &lt;div ng-bind="emojiMessage.messagetext | colonToCode "&gt;&lt;/div&gt;</pre>
</pre>
</div> </div>
...@@ -87,29 +92,30 @@ ...@@ -87,29 +92,30 @@
<div class="form-group"> <div class="form-group">
<textarea class="form-control userinput" id="messageInput" ng-model="emojiMessage.encodedtext" placeholder="Enter encoded text..."></textarea> <textarea class="form-control userinput" id="messageInput" ng-model="emojiMessage.encodedtext" placeholder="Enter encoded text..."></textarea>
<pre style="margin-top:65px">&lt;textarea id="messageInput" ng-model="emojiMessage.encodedtext"&gt;&lt;/textarea&gt;</pre>
<h4>Decode mode</h4> <h4>Decode mode</h4>
<ul> <ul>
<li class="radio"> <li class="radio">
<label> <label>
<input type="radio" name="optradio">Auto</label> <input type="radio" ng-model="decodeType" value="colon" name="optradio">Colon</label>
</li> </li>
<li class="radio"> <li class="radio">
<label> <label>
<input type="radio" name="optradio">Colon</label> <input type="radio" ng-model="decodeType" value="unicode" name="optradio">Unicode</label>
</li>
<li class="radio">
<label>
<input type="radio" name="optradio">Unicode</label>
</li> </li>
<li class="radio"> <li class="radio">
<label> <label>
<input type="radio" name="optradio">HTML</label> <input type="radio" ng-model="decodeType" value="html" name="optradio">HTML</label>
</li> </li>
</ul> </ul>
<h1 class="visible-md visible-lg">&nbsp;</h1> <h1 class="visible-md visible-lg">&nbsp;</h1>
<h4>Decoded message with smileys: </h4> <h4>Decoded message: </h4>
<div class="form-control" ng-bind="emojiMessage.encodedtext"></div> <div class="form-control" style="height:50px;overflow:auto" ng-show="decodeType=='colon'" ng-bind-html="emojiMessage.encodedtext | colonToSmiley"></div>
<pre ng-show="decodeType=='colon'">&lt;div ng-bind-html="emojiMessage.encodedtext | colonToSmiley"&gt;&lt;/div&gt;</pre>
<div class="form-control" style="height:50px;overflow:auto" ng-show="decodeType=='unicode'" ng-bind-html="emojiMessage.encodedtext | codeToSmiley"></div>
<pre ng-show="decodeType=='unicode'">&lt;div ng-bind-html="emojiMessage.encodedtext | codeToSmiley"&gt;&lt;/div&gt;</pre>
<div class="form-control" style="height:50px;overflow:auto" ng-show="decodeType=='html'" ng-bind-html="emojiMessage.encodedtext"></div>
<pre ng-show="decodeType=='html'">&lt;div ng-bind-html="emojiMessage.encodedtext"&gt;&lt;/div&gt;</pre>
</div> </div>
...@@ -123,7 +129,6 @@ ...@@ -123,7 +129,6 @@
<script type="text/javascript" src="js/app.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/config.js"></script>
<script type="text/javascript" src="js/jquery.emojiarea.js"></script> <script type="text/javascript" src="js/jquery.emojiarea.js"></script>
<script type="text/javascript" src="js/emoji.js"></script>
<script type="text/javascript" src="js/emojiController.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/emojiDirectives.js"></script>
<script type="text/javascript" src="js/emojiFilters.js"></script> <script type="text/javascript" src="js/emojiFilters.js"></script>
......
js/config.js
View file @ 7e4477c4
...@@ -3520,13 +3520,13 @@ Config.escape_rx = function(text) ...@@ -3520,13 +3520,13 @@ Config.escape_rx = function(text)
function buildMap() function buildMap()
{ {
var a = []; var colons = [],codes=[];
for (var i in Config.emoji_data) for (var i in Config.emoji_data)
{ {
for (var j = 0; j < Config.emoji_data[i][0].length; j++) for (var j = 0; j < Config.emoji_data[i][0].length; j++)
{ {
a.push( colons.push(Config.escape_rx (":"+Config.emoji_data[i][3][0])+":");
Config.escape_rx (":"+Config.emoji_data[i][3][0])+":"); codes.push(Config.emoji_data[i][0][0]);
// it is a map of {"colon smiley":"unicode char"} // it is a map of {"colon smiley":"unicode char"}
Config.map[Config.emoji_data[i][3][0]] = Config.emoji_data[i][0][0]; Config.map[Config.emoji_data[i][3][0]] = Config.emoji_data[i][0][0];
...@@ -3535,7 +3535,8 @@ Config.escape_rx (":"+Config.emoji_data[i][3][0])+":"); ...@@ -3535,7 +3535,8 @@ Config.escape_rx (":"+Config.emoji_data[i][3][0])+":");
Config.reversemap[Config.emoji_data[i][0][0]] = Config.emoji_data[i][3][0]; Config.reversemap[Config.emoji_data[i][0][0]] = Config.emoji_data[i][3][0];
} }
Config.rx_unified = new RegExp('(' + a.join('|') + ')', "g"); Config.rx_colons = new RegExp('(' + colons.join('|') + ')', "g");
Config.rx_codes = new RegExp('(' + codes.join('|') + ')', "g");
} }
} }
......
js/emojiController.js
View file @ 7e4477c4
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
emojiApp.controller('emojiController', ['$scope', '$log', function($scope, $log) { emojiApp.controller('emojiController', ['$scope', '$log', function($scope, $log) {
$scope.emojiMessage={}; $scope.emojiMessage={};
$scope.decodeType='colon';
$scope.emojiMessage.replyToUser = function() $scope.emojiMessage.replyToUser = function()
{ {
......
js/emojiFilters.js
View file @ 7e4477c4
'use strict'; 'use strict';
emojiApp.filter('colonToSmiley', function() { emojiApp.filter('colonToCode', function() {
return function(input) { return function(input) {
if(!input) if(!input)
return ""; return "";
if(!Config.rx_unified) if(!Config.rx_colons)
Config.init_unified(); Config.init_unified();
return input.replace(Config.rx_unified, function(m) return input.replace(Config.rx_colons, function(m)
{ {
var val = Config.mapcolon[m]; var val = Config.mapcolon[m];
if (val) if (val)
...@@ -23,18 +23,48 @@ emojiApp.filter('colonToSmiley', function() { ...@@ -23,18 +23,48 @@ emojiApp.filter('colonToSmiley', function() {
}; };
}); });
emojiApp.filter('codeToSmiley', function() {
emojiApp.filter('unicodeToSmiley', function() {
return function(input) { return function(input) {
return str.replace(emoji.rx_unified, function(m) if(!input)
return "";
if(!Config.rx_codes)
Config.init_unified();
return input.replace(Config.rx_codes, function(m)
{ {
var val = Config.reversemap[m]; var val = Config.reversemap[m];
if (val) if (val) {
val = ":" + val + ":";
var $img = $.emojiarea.createIcon($.emojiarea.icons[val]);
return $img;
}
else
return "";
});
};
});
emojiApp.filter('colonToSmiley', function() {
return function(input) {
if(!input)
return "";
if(!Config.rx_colons)
Config.init_unified();
return input.replace(Config.rx_colons, function(m)
{
if (m)
{ {
val = ":" + val + ":"; var $img = $.emojiarea.createIcon($.emojiarea.icons[m]);
var $img = $.emojiarea.createIcon($.emojiarea.icons[val]);
return $img; return $img;
} }
else else
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment