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 {
......@@ -43,16 +48,12 @@ opacity: 1;
}
.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;
......@@ -182,10 +183,14 @@ opacity: 1;
display: none;
}
.myform
.emojiForm
{
position: fixed;
top: 20%;
top: 50%;
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 @@
<html ng-app="emojiApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/emoji.css" />
<link type="text/stylesheet" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</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">
<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 my-form emoji-message="emojiMessage">
<textarea id="messageInput" ng-enter="replyToUser()" ng-model="emojiMessage.messagetext" placeholder="Write a message..."></textarea>
<div class="myform form-group">
<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>
</div>
<button class="btn btn-default im_emoji_btn pull-right" id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
</div>
<div class="clearfix"></div>
<div style="text-align:left;height:50px;width:500px"> String with Colons: </div>
<h4>Raw Html: </h4>
<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> 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>
<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 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-sanitize.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/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/emojiDirectives.js"></script>
<script type="text/javascript" src="js/nanoscroller.js"></script>
......
js/app.js
View file @ 77479e6d
......@@ -2,9 +2,11 @@
var emojiApp = angular.module("emojiApp", ['ngSanitize']);
emojiApp.config(function()
emojiApp.config(function($sceProvider)
{
$sceProvider.enabled(false);
var icons = {},
reverseIcons = {},
i, j, hex, name, dataItem, row, column, totalColumns;
......@@ -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) {
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)
{
for (var j = 0; j < Config.emoji_data[i][0].length; j++)
{
// a.push(emoji_data[i][0][j]);
// it is a map of {"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];
// it is a map of {"unicode char": "colon smiley"}
Config.reversemap[Config.emoji_data[i][0][0]] = Config.emoji_data[i][3][0];
}
}
......
js/emojiController.js
View file @ 77479e6d
......@@ -2,14 +2,11 @@
emojiApp.controller('emojiController', ['$scope', '$log', function($scope, $log) {
$scope.emoji = {};
$scope.emojiMessage={};
$scope.emoji.replyToUser = function()
$scope.emojiMessage.replyToUser = function()
{
alert('You typed' + $scope.messagetext);
alert('You typed ' + $scope.emojiMessage.messagetext);
}
......
js/emojiDirectives.js
View file @ 77479e6d
'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 {
// name: '',
// priority: 1,
// terminal: true,
scope:
{
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
};
......@@ -28,19 +17,19 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
fileSelects = $('input', element),
emojiButton = $('#emojibtn', element)[0],
editorElement = messageField,
dragStarted, dragTimeout,
emojiArea = $(messageField).emojiarea(
{
button: emojiButton,
norealTime: true
}),
emojiMenu = $('.emoji-menu', element)[0],
submitBtn = $(
'.im_submit', element)[0],
richTextarea = $(
'.emoji-wysiwyg-editor', element)[0];
var s = $compile($("#messageDiv"));
$("#messageDiv").replaceWith(s($scope));
if (richTextarea)
{
editorElement = richTextarea;
......@@ -105,7 +94,7 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
{
$timeout.cancel(updatePromise);
updateValue();
$scope.draftMessage.replyToUser();
$scope.emojiMessage.replyToUser();
// $(element).trigger('message_send');
resetTyping();
return cancelEvent(e);
......@@ -114,15 +103,14 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
});
$(submitBtn).on('mousedown touchstart', function(e)
{
$timeout.cancel(updatePromise);
updateValue();
$scope.draftMessage.replyToUser();
// $(element).trigger('message_send');
resetTyping();
return cancelEvent(e);
});
// $(submitBtn).on('mousedown touchstart', function(e)
// {
// $timeout.cancel(updatePromise);
// updateValue();
// $scope.draftMessage.replyToUser();
// resetTyping();
// return cancelEvent(e);
// });
function resetTyping()
{
......@@ -256,8 +244,6 @@ emojiApp.directive('myForm', ['$timeout', '$http', '$interpolate', function($tim
$scope.$on('$destroy', function cleanup()
{
$('body').off('dragenter dragleave dragover drop',
onDragDropEvent);
$(document).off('paste', onPasteEvent);
$(document).off('keydown', onKeyDown);
$(submitBtn).off('mousedown')
......
js/jquery.emojiarea.js
View file @ 77479e6d
......@@ -338,7 +338,8 @@
this.$editor.text($textarea.val());
this.$editor.attr({
contenteditable : 'true',
id : 'messageDiv'
id : 'messageDiv',
'ng-model': 'emojiMessage.rawhtml'
});
// this.$editor.attr({'ng-enter': 'replyToUser()'});
......@@ -494,11 +495,11 @@
if (tagName === 'img') {
var alt = node.getAttribute('alt') || '';
if (alt) {
var code = alt.substring(1, alt.length - 1);
//var code = alt.substring(1, alt.length - 1);
//var smileyCode = Config.map[code];
//if (smileyCode)
line.push(code);
line.push(alt);
}
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