Skip to content

A
angular-emoji-popup
Commit 77479e6d authored by Madhur's avatar Madhur
Browse files
Options

styling

parent bac6ea47
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 393 additions and 68 deletions
css/bootstrap-theme.css.map 0 → 100644
View file @ 77479e6d
This diff is collapsed.
css/bootstrap-theme.min.css 0 → 100644
View file @ 77479e6d
This diff is collapsed.
css/bootstrap.css.map 0 → 100644
View file @ 77479e6d
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap.min.css 0 → 100644
View file @ 77479e6d
This source diff could not be displayed because it is too large. You can view the blob instead.
css/style.css
View file @ 77479e6d
body
{
background: #222222 url("/img/black_linen_v2.png") repeat;
color: #aaaaaa;
}
.form-control h1
{ {
width: 500px; color:white;
} }
.form-control:focus { .form-control:focus {
...@@ -43,16 +48,12 @@ opacity: 1; ...@@ -43,16 +48,12 @@ opacity: 1;
} }
.emoji-wysiwyg-editor { .emoji-wysiwyg-editor {
float:left;
margin-left:2px;
padding:6px; padding:6px;
box-sizing: content-box;
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
min-height: 36px; min-height: 36px;
height: 30px; height: 30px;
width: 500px;
max-height: 284px; max-height: 284px;
overflow: auto; overflow: auto;
line-height: 17px; line-height: 17px;
...@@ -182,10 +183,14 @@ opacity: 1; ...@@ -182,10 +183,14 @@ opacity: 1;
display: none; display: none;
} }
.myform .emojiForm
{ {
position: fixed; top: 50%;
top: 20%;
width:100%; width:100%;
left: 20%; }
.form-control
{
background-color:black;
color:white;
} }
\ No newline at end of file
fonts/glyphicons-halflings-regular.svg 0 → 100644
View file @ 77479e6d
This diff is collapsed.
index.html
View file @ 77479e6d
...@@ -2,54 +2,105 @@ ...@@ -2,54 +2,105 @@
<html ng-app="emojiApp"> <html ng-app="emojiApp">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Emoji</title> <title>Angular Emoji</title>
<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/nanoscroller.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/nanoscroller.css" />
<link type="text/stylesheet" rel="stylesheet" href="css/emoji.css" /> <link type="text/stylesheet" rel="stylesheet" href="css/emoji.css" />
<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>
<body ng-controller="emojiController"> <body ng-controller="emojiController">
<h1>Angular Emoji Popup</h1>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 style="text-align:center">Angular Emoji Popup</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Encoding</h2>
<h1 class="visible-md visible-lg">&nbsp;</h1>
<div class="myform"> <div class="myform form-group">
<div my-form emoji-message="emojiMessage">
<textarea id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea>
<div emoji-form emoji-message="emojiMessage">
<textarea class="form-control" id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></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> <button class="btn btn-default im_emoji_btn pull-right" id="emojibtn">
</div> <i class="icon icon-emoji"></i>
</button>
</div> </div>
<div class="clearfix"></div>
<div style="text-align:left;height:50px;width:500px"> String with Colons: </div> <h4>Raw Html: </h4>
<div> <div>
<div class="form-control" style="height:50px;width:500px" ng-bind="emojiMessage.messagetext"></div> <div class="form-control" style="height:200px; overflow:auto" ng-bind="emojiMessage.rawhtml"></div>
</div> </div>
<div> String with UTF Chars: (Will not display fine in input box) </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>
<div> <div>
<input class="form-control" ng-model="emojiMessage.messagetext"> </div> <div class="form-control" style="height:50px;overflow:auto" ng-bind="emojiMessage.messagetext"></div>
</div>
<h4> String with UTF Chars: (Will not display fine in input box) </h4>
<div>
<input class="form-control" ng-model="emojiMessage.messagetext">
</div>
</div>
</div> </div>
<div class="col-md-6">
<h2>Decoding</h2>
<h1 class="visible-md visible-lg">&nbsp;</h1>
<div class="form-group">
<div>
<textarea class="form-control" id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea>
</div>
<h1 class="visible-md visible-lg">&nbsp;</h1>
<div>String with Colons: </div>
<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>
<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>
<script type="text/javascript" src="js/angular-sanitize.js"></script> <script type="text/javascript" src="js/angular-sanitize.js"></script>
<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/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/nanoscroller.js"></script> <script type="text/javascript" src="js/nanoscroller.js"></script>
......
js/app.js
View file @ 77479e6d
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
var emojiApp = angular.module("emojiApp", ['ngSanitize']); var emojiApp = angular.module("emojiApp", ['ngSanitize']);
emojiApp.config(function() emojiApp.config(function($sceProvider)
{ {
$sceProvider.enabled(false);
var icons = {}, var icons = {},
reverseIcons = {}, reverseIcons = {},
i, j, hex, name, dataItem, row, column, totalColumns; i, j, hex, name, dataItem, row, column, totalColumns;
...@@ -33,6 +35,41 @@ emojiApp.config(function() ...@@ -33,6 +35,41 @@ emojiApp.config(function()
}); });
emojiApp.directive('contenteditable', [ '$sce', function($sce) {
return {
restrict : 'A', // only activate on element attribute
require : '?ngModel', // get a hold of NgModelController
link : function(scope, element, attrs, ngModel) {
if (!ngModel)
return; // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$evalAsync(read);
});
read(); // initialize
// Write data to the model
function read() {
var html = element.html();
// When we clear the content editable the browser leaves a <br>
// behind
// If strip-br attribute is provided then we strip this out
if (attrs.stripBr && html == '<br>') {
html = '';
}
ngModel.$setViewValue(html);
}
}
};
} ]);
function checkDragEvent(e) { function checkDragEvent(e) {
if (!e || e.target && (e.target.tagName == 'IMG' || e.target.tagName == 'A')) return false; if (!e || e.target && (e.target.tagName == 'IMG' || e.target.tagName == 'A')) return false;
......
js/bootstrap.min.js 0 → 100644
View file @ 77479e6d
This diff is collapsed.
js/config.js
View file @ 77479e6d
...@@ -3463,9 +3463,9 @@ for (var i in Config.emoji_data) ...@@ -3463,9 +3463,9 @@ 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(emoji_data[i][0][j]); // it is a map of {"colon smiley":"unicode char"}
// it is a map of {"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];
// 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];
} }
} }
......
js/emojiController.js
View file @ 77479e6d
...@@ -2,14 +2,11 @@ ...@@ -2,14 +2,11 @@
emojiApp.controller('emojiController', ['$scope', '$log', function($scope, $log) { emojiApp.controller('emojiController', ['$scope', '$log', function($scope, $log) {
$scope.emoji = {};
$scope.emojiMessage={}; $scope.emojiMessage={};
$scope.emojiMessage.replyToUser = function()
$scope.emoji.replyToUser = function()
{ {
alert('You typed' + $scope.messagetext); alert('You typed ' + $scope.emojiMessage.messagetext);
} }
......
js/emojiDirectives.js
View file @ 77479e6d
'use strict'; 'use strict';
emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($timeout, $http, $interpolate) emojiApp.directive('emojiForm', ['$timeout', '$http', '$interpolate','$compile', function($timeout, $http, $interpolate, $compile)
{ {
// Runs during compile
return { return {
// name: '',
// priority: 1,
// terminal: true,
scope: scope:
{ {
emojiMessage: '=' emojiMessage: '='
}, },
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: link link: link
}; };
...@@ -28,19 +17,19 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim ...@@ -28,19 +17,19 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
fileSelects = $('input', element), fileSelects = $('input', element),
emojiButton = $('#emojibtn', element)[0], emojiButton = $('#emojibtn', element)[0],
editorElement = messageField, editorElement = messageField,
dragStarted, dragTimeout,
emojiArea = $(messageField).emojiarea( emojiArea = $(messageField).emojiarea(
{ {
button: emojiButton, button: emojiButton,
norealTime: true norealTime: true
}), }),
emojiMenu = $('.emoji-menu', element)[0], emojiMenu = $('.emoji-menu', element)[0],
submitBtn = $(
'.im_submit', element)[0],
richTextarea = $( richTextarea = $(
'.emoji-wysiwyg-editor', element)[0]; '.emoji-wysiwyg-editor', element)[0];
var s = $compile($("#messageDiv"));
$("#messageDiv").replaceWith(s($scope));
if (richTextarea) if (richTextarea)
{ {
editorElement = richTextarea; editorElement = richTextarea;
...@@ -105,7 +94,7 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim ...@@ -105,7 +94,7 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
{ {
$timeout.cancel(updatePromise); $timeout.cancel(updatePromise);
updateValue(); updateValue();
$scope.draftMessage.replyToUser(); $scope.emojiMessage.replyToUser();
// $(element).trigger('message_send'); // $(element).trigger('message_send');
resetTyping(); resetTyping();
return cancelEvent(e); return cancelEvent(e);
...@@ -114,15 +103,14 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim ...@@ -114,15 +103,14 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
}); });
$(submitBtn).on('mousedown touchstart', function(e) // $(submitBtn).on('mousedown touchstart', function(e)
{ // {
$timeout.cancel(updatePromise); // $timeout.cancel(updatePromise);
updateValue(); // updateValue();
$scope.draftMessage.replyToUser(); // $scope.draftMessage.replyToUser();
// $(element).trigger('message_send'); // resetTyping();
resetTyping(); // return cancelEvent(e);
return cancelEvent(e); // });
});
function resetTyping() function resetTyping()
{ {
...@@ -256,8 +244,6 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim ...@@ -256,8 +244,6 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
$scope.$on('$destroy', function cleanup() $scope.$on('$destroy', function cleanup()
{ {
$('body').off('dragenter dragleave dragover drop',
onDragDropEvent);
$(document).off('paste', onPasteEvent); $(document).off('paste', onPasteEvent);
$(document).off('keydown', onKeyDown); $(document).off('keydown', onKeyDown);
$(submitBtn).off('mousedown') $(submitBtn).off('mousedown')
......
js/jquery.emojiarea.js
View file @ 77479e6d
...@@ -338,7 +338,8 @@ ...@@ -338,7 +338,8 @@
this.$editor.text($textarea.val()); this.$editor.text($textarea.val());
this.$editor.attr({ this.$editor.attr({
contenteditable : 'true', contenteditable : 'true',
id : 'messageDiv' id : 'messageDiv',
'ng-model': 'emojiMessage.rawhtml'
}); });
// this.$editor.attr({'ng-enter': 'replyToUser()'}); // this.$editor.attr({'ng-enter': 'replyToUser()'});
...@@ -494,11 +495,11 @@ ...@@ -494,11 +495,11 @@
if (tagName === 'img') { if (tagName === 'img') {
var alt = node.getAttribute('alt') || ''; var alt = node.getAttribute('alt') || '';
if (alt) { if (alt) {
var code = alt.substring(1, alt.length - 1); //var code = alt.substring(1, alt.length - 1);
//var smileyCode = Config.map[code]; //var smileyCode = Config.map[code];
//if (smileyCode) //if (smileyCode)
line.push(code); line.push(alt);
} }
return; return;
......
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