Chat Plugin Using Agular js
HTML:
<div id="wrapper">
</div>
<div id="chat" ng-app="chat-app" ng-controller="chat-controller">
<div id="chat-header">
<span>Chat with people</span>
</div>
<div id="chat-body">
<div class="user-info" ng-click="register_popup(user.name, user.id, user.profimage)" ng-if="user.id!='0'" ng-repeat="user in users">
<img class="profimage" src="{{user.profimage}}" />
<span class="name">{{user.name}}</span>
</div>
</div>
</div>
<div id="chat_popups"></div>
CSS:
*{
box-sizing:border-box;
}
#chat{
position: fixed;
bottom:0;
right:15px;
}
#chat-header{
cursor: pointer;
width: 250px;
height: 50px;
line-height: 50px;
background-color: #21618C;
color:#fff;''
margin:auto;
}
#chat-header span{
font-size: 20px;
font-weight: bold;
padding: 20px;
}
#chat-body{
height: 400px;
padding: 10px;
overflow-y: scroll;
overflow-x:hidden;
background-color: #ddd;
}
.user-info{
position: relative;
cursor: pointer;
width: 100%;
height: 50px;
padding:7px 0;
}
.user-info:hover{
background-color: #fff;p
}
.user-info img{
width: 40px;
height: 40px;
}
.user-info .name{
position:absolute;
margin-top:5px;
}
.popup-box
{
display: none;
position: fixed;
bottom: 0px;
right: 220px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
z-index: 10000;
}
.popup-head{
height: 30px;
font-family: 'Roboto', sans-serif;
}
.popup-messages{
height: 250px;
}
.popup-box .popup-head
{
background-color: #C0392B;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
cursor: pointer;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-left span
{
position: absolute;
}
.profimage{
margin-right:10px;
margin-top:-4px;
padding:0;
width:25px;
height:25px;
}
.popup-box .popup-head .popup-head-right
{
opacity: 0.5;
position: absolute;
right: 20px;
color: #fff;
z-index:1000;
}
.popup-head-right a{
position: absolute;
right: 0;
margin: 0;
margin-top: -1px;
color:#fff;
font-size: 16px;
}
.popup-head-right a:hover{
color:#ccc;
}
.user_messages{
max-height: 185px;
overflow-y: scroll;
overflow-x: hidden;
}
.textarea-div{
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
}
.msg_input{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
border: 0px;
border-top: 1px solid #555;
resize: none;
}
/***
Chats
***/
.chats {
margin:0;
padding: 0;
margin-top: -15px;
}
.chats li {
list-style: none;
padding: 5px 0;
margin: 10px auto;
font-size: 12px;
}
.chats li img.avatar {
height: 30px;
width: 30px;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.chats li.in img.avatar {
float: left;
margin-right: 5px;
}
.chats li .name {
color:#3590c1;
font-size: 13px;
font-weight: 400;
}
.chats li .datetime {
color:#333;
font-size: 13px;
font-weight: 400;
}
.chats li.out img.avatar {
float: right;
margin-left: 5px;
}
.chats li .message {
display: block;
padding: 5px;
position: relative;
}
.chats li.in .message {
text-align: left;
border-left: 2px solid #35aa47;
margin-left: 45px;
background: #fafafa
}
.chats li.in .message .arrow {
display: block;
position: absolute;
top: 5px;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #35aa47;
}
.chats li.out .message .arrow {
display: block;
position: absolute;
top: 5px;
right: -8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #da4a38;
}
.chats li.out .message {
border-right: 2px solid #da4a38;
margin-right: 45px;
background: #fafafa;
text-align: right;
}
.chats li.out .name,
.chats li.out .datetime {
text-align: right;
}
.chats li .message .body {
display: block;
font-size: 15.5px;
word-wrap: break-word;
}
JS:
var app = angular.module("chat-app",[]);
app.controller("chat-controller", ['$scope', function($scope){
var users=[
{
id:"0",
name:"anuragasurus",
profimage:"http://wallpapercave.com/wp/sbWDAui.jpg"
},
{
id:"1",
name: "John Smith",
profimage: "https://s-media-cache-ak0.pinimg.com/564x/d3/7c/95/d37c95fa337e60c56f5d62608a8aeae9.jpg"
}, {
id:"2",
name: "John Doe",
profimage: "http://wallpapercave.com/wp/sbWDAui.jpg"
}, {
id:"3",
name: "Trevor",
profimage:"http://cdn.paper4pc.com/images/superman-wallpaper-10.jpg"
}, {
id:"4",
name: "Chin Nyugen",
profimage: "https://s-media-cache-ak0.pinimg.com/236x/95/1b/ca/951bca8160b6302ba37d0444be080e91.jpg"
}, {
id:"5",
name:"Aamir Hussain",
profimage:"https://ae01.alicdn.com/kf/HTB1qxUCGXXXXXbiXpXXq6xXFXXXx/221566997/HTB1qxUCGXXXXXbiXpXXq6xXFXXXx.jpg"
}, {
id:"6",
name: "Sunil Mehta",
profimage:"http://cdn.paper4pc.com/images/superman-wallpaper-10.jpg"
}, {
id:"7",
name: "Andy Guerra",
profimage:"https://s-media-cache-ak0.pinimg.com/originals/74/47/a6/7447a63ca0b6426e583a57b357d73ec5.jpg"
}, {
id:"8",
name: "Charles Smith",
profimage: "http://cdn.paper4pc.com/images/superman-wallpaper-10.jpg"
}];
var user_id = "0";
$("#chat-body").hide();
$("#chat-header").click(function() {
$("#chat-body").slideToggle('slow');
});
setTimeout(function(){
$("#chat-header").click();
}, 1000);
function convertTimeToString(timestamp){
const d1 = new Date(timestamp);
return " at "+d1.getHours()+":"+d1.getMinutes();
}
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0,popups=[];
//arrays of popups ids
//this is used to close a popup
function close_popup(id) {
console.log("close popup");
for (var iii = 0; iii < popups.length; iii++) {
if (id == popups[iii]) {
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups() {
var right = 290;
console.log(popups);
var iii = 0;
for (iii; iii < total_popups; iii++) {
if (popups[iii] != undefined) {
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for (var jjj = iii; jjj < popups.length; jjj++) {
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(name, id, profimage) {
console.log("register_popup");
id=id.toString();
console.log(id, name);
for (var iii = 0; iii < popups.length; iii++) {
//already registered. Bring it to front.
if (id == popups[iii]) {
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="' + id + '">';
element = element + '<div class="popup-head" id="popup_head_' + id + '" onclick="handle_click_on_popup_head('+id+')">';
element = element + '<div class="popup-head-left"><img class="profimage" src="'+profimage+'" /><span>' + name + '</span></div>';
element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\'' + id + '\')">✕</a></div>';
element = element + '</div><div class="popup-messages" id="popup_messages_' + id + '"><div class="user_messages" id="user_messages_' + id + '"><ul class="chats"></ul></div><div class="textarea-div" id="textarea_div_' + id + '"><textarea class="msg_input" id="textarea_' + id + '" onkeypress="handle_click_on_textarea(event, '+id+')"></textarea></div>' + '</div></div>';
const chat_popup_html = $("#chat_popups").html();
$("#chat_popups").html(chat_popup_html + element);
function handle_click_on_textarea(e,id) {
e = e || window.event;
var msg = $("#textarea_"+id).val();
if (e.keyCode == 13) {
$("#textarea_"+id).val('');
if(msg!="" && msg!="\n"){
$("#user_messages_" + id+" .chats").append("<li class='out'><img class='avatar' alt='' src='"+users[user_id].profimage+"'><div class='message'><span class='arrow'></span><span class='name'>"+users[user_id].name+"</span><span class='datetime'>"+convertTimeToString(Date.now())+"</span><span class='body'>" + msg + "</span></div></li>");
$("#user_messages_" + id).scrollTop($("#user_messages_" + id).get(0).scrollHeight);
}
}
};
function handle_click_on_popup_head(id) {
console.log("popup head clicked");
$("#popup_messages_" + id).slideToggle('slow');
$("#textarea_"+ id).slideToggle('slow');
$("#unread_message_"+id).text('');
$("#unread_message_"+id).hide();
$("#user_messages_" + id).scrollTop($("#user_messages_" + id).get(0).scrollHeight);
};
popups.unshift(id);
calculate_popups();
window.handle_click_on_popup_head = handle_click_on_popup_head;
window.handle_click_on_textarea = handle_click_on_textarea;
}
function handle_key_press(e) {
console.log("key pressed");
if (e.keyCode == 13) {
e.preventDefault();
console.log("Enter pressed");
}
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups() {
var width = window.innerWidth;
if (width < 600) {
total_popups = 0;
} else {
width = width - 290;
//320 is width of a single popup box
total_popups = parseInt(width / 320);
}
display_popups();
}
$scope.users = users;
$scope.register_popup =register_popup;
window.close_popup = close_popup;
window.addEventListener("resize", calculate_popups);
}]);
No comments:
Post a Comment