Commit 77479e6d authored by Madhur's avatar Madhur

styling

parent bac6ea47
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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
This diff is collapsed.
...@@ -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>
......
...@@ -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;
......
This diff is collapsed.
...@@ -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];
} }
} }
......
...@@ -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);
} }
......
'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')
......
...@@ -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