Skip to content

A
angular-emoji-popup
Commit 077d2c62 authored by Madhur's avatar Madhur
Browse files
Options

added filters

parent 77479e6d
Show whitespace changes
Inline Side-by-side
Showing with 231 additions and 69 deletions
css/style.css
View file @ 077d2c62
...@@ -189,8 +189,30 @@ opacity: 1; ...@@ -189,8 +189,30 @@ opacity: 1;
width:100%; width:100%;
} }
.form-control .form-control,pre
{ {
background-color:black; background-color:black;
color:white; color:white;
} }
ul li, .radio
{
display:inline;
}
ul {
padding: 0;
list-style-type: none;
}
pre
{
background-color: #555555;
margin-top:20px;
border:none;
}
.emoji-wysiwyg-editor, .userinput
{
background-color: white;
color:black;
}
\ No newline at end of file
index.html
View file @ 077d2c62
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
<link type="text/stylesheet" rel="stylesheet" href="css/style.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head> </head>
<a href="https://github.com/madhur/angular-emoji-popup"><img style="position: absolute; top: 0; right: 30px; border: 0;" src="img/gh-ribbon.png" alt="Fork me on GitHub"></a> <a href="https://github.com/madhur/angular-emoji-popup"><img style="position: absolute; top: 0; right: 30px; border: 0;" src="img/gh-ribbon.png" alt="Fork me on GitHub">
</a>
<body ng-controller="emojiController"> <body ng-controller="emojiController">
<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">Angular Emoji Popup</h1>
...@@ -31,35 +33,47 @@ ...@@ -31,35 +33,47 @@
<div class="myform form-group"> <div class="myform form-group">
<div emoji-form emoji-message="emojiMessage"> <div emoji-form emoji-message="emojiMessage">
<textarea class="form-control" id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea> <textarea class="form-control" id="messageInput" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea>
<button class="btn btn-default im_emoji_btn pull-right" id="emojibtn"> <button class="btn btn-default im_emoji_btn pull-right visible-md visible-lg" id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
<button class="btn btn-default im_emoji_btn visible-sm" id="emojibtn">
<i class="icon icon-emoji"></i> <i class="icon icon-emoji"></i>
</button> </button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<h4>Raw Html: </h4> <h4>Raw: </h4>
<div>
<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>
</div>
<h4>Parsed Html: </h4>
<div>
<div class="form-control" style="height:50px;overflow:auto" ng-bind-html="emojiMessage.rawhtml"></div>
</div>
<h4> String with Colons: </h4> <pre>
<div> &lt;div ng-bind="emojiMessage.rawhtml"&gt;&lt;/div&gt;
</pre>
<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>
</div>
<pre>
&lt;div ng-bind="emojiMessage.messagetext"&gt;&lt;/div&gt;
</pre>
<h4> String with UTF Chars: (Will not display fine in input box) </h4> <h4>Parsed: </h4>
<div> <div class="form-control" style="height:50px;overflow:auto" ng-bind-html="emojiMessage.rawhtml"></div>
<input class="form-control" ng-model="emojiMessage.messagetext">
</div> <pre>
&lt;div ng-bind-html="emojiMessage.messagetext"&gt;&lt;/div&gt;
</pre>
<h4>Unicode: (Will not display fine unless proper font is used) </h4>
<div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext | colonToSmiley"> </div>
<pre>
&lt;div ng-bind="emojiMessage.messagetext | colonToSmiley "&gt;&lt;/div&gt;
</pre>
</div> </div>
...@@ -72,27 +86,36 @@ ...@@ -72,27 +86,36 @@
<div class="form-group"> <div class="form-group">
<div> <textarea class="form-control userinput" id="messageInput" ng-model="emojiMessage.encodedtext" placeholder="Enter encoded text..."></textarea>
<textarea class="form-control" id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea> <h4>Decode mode</h4>
</div> <ul>
<li class="radio">
<label>
<input type="radio" name="optradio">Auto</label>
</li>
<li class="radio">
<label>
<input type="radio" name="optradio">Colon</label>
</li>
<li class="radio">
<label>
<input type="radio" name="optradio">Unicode</label>
</li>
<li class="radio">
<label>
<input type="radio" name="optradio">HTML</label>
</li>
</ul>
<h1 class="visible-md visible-lg">&nbsp;</h1> <h1 class="visible-md visible-lg">&nbsp;</h1>
<div>String with Colons: </div> <h4>Decoded message with smileys: </h4>
<div> <div class="form-control" ng-bind="emojiMessage.encodedtext"></div>
<div class="form-control" ng-bind="emojiMessage.messagetext"></div>
</div>
<h1 class="visible-md visible-lg">&nbsp;</h1>
<div> String with UTF Chars: (Will not display fine in input box) </div>
<div>
<input class="form-control" ng-model="emojiMessage.messagetext">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script>
...@@ -103,6 +126,7 @@ ...@@ -103,6 +126,7 @@
<script type="text/javascript" src="js/emoji.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/nanoscroller.js"></script> <script type="text/javascript" src="js/nanoscroller.js"></script>
</body> </body>
......
js/config.js
View file @ 077d2c62
...@@ -3454,23 +3454,94 @@ Config.smileys = { ...@@ -3454,23 +3454,94 @@ Config.smileys = {
"D:": "anguished" "D:": "anguished"
}; };
Config.inits = {};
Config.map = {};
Config.mapcolon = {};
var a = []; var a = [];
Config.map = {};
Config.reversemap = {}; Config.reversemap = {};
for (var i in Config.emoji_data) Config.init_emoticons = function()
{
if (Config.inits.emoticons)
return;
Config.init_colons(); // we require this for the emoticons map
Config.inits.emoticons = 1;
var a = [];
Config.map.emoticons = {};
for (var i in Config.emoticons_data)
{
// because we never see some characters in our text except as
// entities, we must do some replacing
var emoticon = i.replace(/\&/g, '&amp;').replace(/\</g, '&lt;')
.replace(/\>/g, '&gt;');
if (!Config.map.colons[emoji.emoticons_data[i]])
continue;
Config.map.emoticons[emoticon] = Config.map.colons[Config.emoticons_data[i]];
a.push(Config.escape_rx(emoticon));
}
Config.rx_emoticons = new RegExp(
('(^|\\s)(' + a.join('|') + ')(?=$|[\\s|\\?\\.,!])'), 'g');
};
Config.init_colons = function()
{
if (Config.inits.colons)
return;
Config.inits.colons = 1;
Config.rx_colons = new RegExp('\:[^\\s:]+\:', 'g');
Config.map.colons = {};
for (var i in Config.data)
{
for (var j = 0; j < Config.data[i][3].length; j++)
{
Config.map.colons[emoji.data[i][3][j]] = i;
}
}
};
Config.init_unified = function()
{
if (Config.inits.unified)
return;
Config.inits.unified = 1;
buildMap();
};
Config.escape_rx = function(text)
{ {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
function buildMap()
{
var a = [];
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(
Config.escape_rx (":"+Config.emoji_data[i][3][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];
Config.mapcolon[":"+Config.emoji_data[i][3][0]+":"] = Config.emoji_data[i][0][0];
// it is a map of {"unicode char": "colon smiley"} // it is a map of {"unicode char": "colon smiley"}
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");
}
} }
//ConfigStorage //ConfigStorage
(function(window) (function(window)
{ {
......
js/emojiFilters.js 0 → 100644
View file @ 077d2c62
'use strict';
emojiApp.filter('colonToSmiley', function() {
return function(input) {
if(!input)
return "";
if(!Config.rx_unified)
Config.init_unified();
return input.replace(Config.rx_unified, function(m)
{
var val = Config.mapcolon[m];
if (val)
{
return val;
}
else
return "";
});
};
});
emojiApp.filter('unicodeToSmiley', function() {
return function(input) {
return str.replace(emoji.rx_unified, function(m)
{
var val = Config.reversemap[m];
if (val)
{
val = ":" + val + ":";
var $img = $.emojiarea.createIcon($.emojiarea.icons[val]);
return $img;
}
else
return "";
});
};
});
\ No newline at end of file
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