EVOLUTION-NINJA
Edit File: footer_inside.php
<section class="middle_work"> <div class="container"> <!--<button class="open-button" onclick="openForm()"><i class="fa fa-comments-o" aria-hidden="true"></i></button>--> <div class="chat-sidebar chat-popup" id="myForm"> <div class="chat_close" style="position:fixed !important;"> <h4 style="padding-left: 5px;">User List</h4> <a type="button" role="button" class="cancel btn-close" onclick="closeForm()"><i class="fa fa-times" aria-hidden="true"></i></a> </div> <div class="users_list_det" style="margin-top:40px;"> <!-- Pass username and display name to register popup --> </div> </div> </div> </section> <div class="page-footer"> <div class="page-footer-inner"> Copyright © 2015. All Rights Reserved TextileHub. </div> <div class="scroll-to-top"> <i class="icon-arrow-up"></i> </div> </div> <script> //setInterval(function(){ $( document ).ready(function() { var r='success'; //alert(); $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/chat_history", data:{'r':r}, success: function (data) { var response=JSON.parse(data); $('.users_list_det').empty(); var content = ''; $.each(response.user_list, function(key, val) { //var f=jQuery.timeago(val.offline_time); if(response.users_id == val.id) { } else { var ar_new=response.timing_offline[key]; content += '<div class="sidebar-name"><a onclick="register_popup('+ val.id +');"><input type="hidden" class="user_name'+ val.id +'" value="'+ val.name +'">'; if(val.gender == 'Male') { content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/male_img.jpg" />'; } else { content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/female.jpg" />'; } content += '<span>'+ val.name +' </span>'; $.each(response.chat_list, function(key, vals) { if(val.name == vals.name) { content += '<span class="user_chat_count'+ val.id +'"><b><?php echo '('; ?> ' + vals.total +' <?php echo ')'; ?></b></span>' } else { } }); content += '<div class="pull-right" style="clear:both;"><p style="text-align: right;">'; if(val.chat_online == 'online') { content += '<span class="circle circle-online circle-lg"></span>'; content += '</p><p style="font-weight: normal;" for="49"><?php echo 'Online'; ?></p>'; } else { content += '<span class="circle circle-warning circle-lg"></span>'; content += '</p><p style="font-weight: normal;" for="49">' + ar_new + '</p>'; } content += '</div></a></div>'; } //$('time').timeago(); }); $('.users_list_det').html(content); // document.getElementById("myForm").style.display = "block"; } }); }, 1000); </script> <!------------------ end of chat system -------------------------------------> <!-- END FOOTER --> <!-- BEGIN PAGE LEVEL PLUGINS --> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/select2/select2.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.min.js"></script> <!-- END PAGE LEVEL PLUGINS --> <script> jQuery(document).ready(function() { Metronic.init(); // init metronic core components Layout.init(); // init current layout QuickSidebar.init(); // init quick sidebar Demo.init(); // init demo features TableAdvanced.init(); }); </script> <script> function openForm() { var r='success'; $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/chat_history", data:{'r':r}, success: function (data) { var response=JSON.parse(data); $('.users_list_det').empty(); var content = ''; $.each(response.user_list, function(key, val) { //var f=jQuery.timeago(val.offline_time); if(response.users_id == val.id) { } else { var ar_new=response.timing_offline[key]; content += '<div class="sidebar-name"><a onclick="register_popup('+ val.id +');"><input type="hidden" class="user_name'+ val.id +'" value="'+ val.name +'">'; if(val.gender == 'Male') { content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/male_img.jpg" />'; } else { content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/female.jpg" />'; } content += '<span>'+ val.name +' </span>'; $.each(response.chat_list, function(key, vals) { if(val.name == vals.name) { content += '<span class="user_chat_count'+ val.id +'"><b><?php echo '('; ?> ' + vals.total +' <?php echo ')'; ?></b></span>' } else { } }); content += '<div class="pull-right" style="clear:both;"><p style="text-align: right;">'; if(val.chat_online == 'online') { content += '<span class="circle circle-online circle-lg"></span>'; content += '</p><p style="font-weight: normal;" for="49"><?php echo 'Online'; ?></p>'; } else { content += '<span class="circle circle-warning circle-lg"></span>'; content += '</p><p style="font-weight: normal;" for="49">' + ar_new + '</p>'; } content += '</div></a></div>'; } //$('time').timeago(); }); $('.users_list_det').html(content); document.getElementById("myForm").style.display = "block"; } }); } function closeForm() { document.getElementById("myForm").style.display = "none"; } </script> <script> //this function can remove a array element. 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; //arrays of popups ids var popups = []; //this is used to close a popup function close_popup(id) { 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(id) { var right = 310; 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"; } $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/update_unread", data:{'id':id}, success: function (data) { } }); } function fetch_chat_datas(id) { $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/fetch_chat_data", data:{'id':id}, success: function (data) { $('.popup-messages'+id).empty(); var response = jQuery.parseJSON(data); if(response.final_val == 0) { calculate_popups(id); } else { var content = ''; $.each(response.res, function(key, val) { var last_time=response.timings_offline[key]; if(val.to_id == id) { content += '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;margin-right: 9px;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } else { content += '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;margin-left: 9px;border-color: grey;float: left;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } }); $('.popup-messages'+id).html(content); var height = 0; $('.popup-messages'+id).each(function(i, value){ height += parseInt($(this).height()); }); height += ''; $('.popup-messages'+id).animate({scrollTop: height}); } } }); } //creates markup for a new popup. Adds the id to popups array. function register_popup(id) { <!-------- remove comments ---------> //setInterval(function(){ //fetch_chat_datas(id); //}, 1000); //$('.user_chat_count'+id).empty(); $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/fetch_chat_data", data:{'id':id}, success: function (data) { var response = jQuery.parseJSON(data); var name=$('.user_name'+id).val(); 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="options popup-box chat-popup" style="margin-bottom: 25px;" id="'+ id +'">'; element = element + '<div class="popup-head" style="background: #485b7f !important;">'; element = element + '<div class="popup-head-left" >'+ name +'</div>'; element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">✕</a></div><div style="clear: both"></div></div><div style="background-color: white;overflow-y: scroll;height: 400px;width: 299px;"class="pop_up_chat_msg popup-messages'+ id +'">'; $.each(response.res, function(key, val) { var last_time=response.timings_offline[key]; if(val.to_id == id) { element = element + '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;margin-right: 9px;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } else { element = element + '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: left;margin-left: 9px;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } }); element = element + '</div><div class="popup-text"><input type="hidden" id="chat_user_id" class="form-control chat_user_id'+ id +'" value="'+ id +'"/><input type="hidden" id="chat_user_name" name="chat_user_name" class="form-control chat_user_name'+ id +'" value="'+ name +'"/><input type="text" id="chat_message" onkeydown="search_fun('+ id +',event)" name="chat_message" style="width: 100% !important;height: 30px !important;" placeholder="Type a message then press enter" class="form-control chat_message'+ id +'"/></div></div>'; document.getElementsByTagName("section")[0].innerHTML = document.getElementsByTagName("section")[0].innerHTML + element; var height = 0; $('.popup-messages'+id).each(function(i, value){ //alert(); height += parseInt($(this).height()); }); height += ''; $('.popup-messages'+id).animate({scrollTop: height}); popups.unshift(id); calculate_popups(id); var height = 0; $('.popup-messages'+id).each(function(i, value){ height += parseInt($(this).height()); }); height += ''; $('.popup-messages'+id).animate({scrollTop: height}); } }); } //calculate the total number of popups suitable and then populate the toatal_popups variable. function calculate_popups(id) { var width = window.innerWidth; if(width < 540) { total_popups = 0; } else { width = width - 200; //320 is width of a single popup box total_popups = parseInt(width/320); } display_popups(id); $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/fetch_chat_data", data:{'id':id}, success: function (data) { $('.popup-messages'+id).empty(); var response = jQuery.parseJSON(data); var content = ''; $.each(response.res, function(key, val) { var last_time=response.timings_offline[key]; if(val.to_id == id) { content += '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;margin-right: 9px;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } else { content += '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;margin-left: 9px;border-color: grey;float: left;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } }); $('.popup-messages'+id).html(content); var height = 0; $('.popup-messages'+id).each(function(i, value){ height += parseInt($(this).height()); }); height += ''; $('.popup-messages'+id).animate({scrollTop: height}); } }); } //recalculate when window is loaded and also when window is resized. // window.addEventListener("resize", calculate_popups); // window.addEventListener("load", calculate_popups); </script> <script> function search_fun(ele,e) { var code = e.keyCode ? e.keyCode : e.which; $('.user_chat_count'+ele).empty(); $('.user_chat_count'+ele).val(''); //alert(ele); $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/update_unread", data:{'id':ele}, success: function (data) { } }); if(e.key === 'Enter' || code == 13) { $('.user_chat_count'+ele).empty(); $('.user_chat_count'+ele).val(''); var chat_message=$('.chat_message'+ele).val(); var chat_user_id=$('.chat_user_id'+ele).val(); var to_ids=ele; $.ajax({ type: "post", url: "<?php echo base_url(); ?>vendor/insert_chat_messages", data:{'chat_message':chat_message,'chat_user_id':chat_user_id}, success: function (data) { var response=JSON.parse(data); $('.chat_message'+ele).val(''); //$('.chatting_message'+ele).val(''); $('.popup-messages'+ele).empty(); var content = ''; $.each(response.res, function(key, val) { var last_time=response.timings_offline[key]; if(val.to_id == to_ids) { content += '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;margin-right: 9px;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } else { content += '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;margin-left: 9px;border-color: grey;float: left;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>'; } }); $('.popup-messages'+ele).html(content); var height = 0; $('.popup-messages'+ele).each(function(i, value){ //alert(); height += parseInt($(this).height()); }); height += ''; $('.popup-messages'+ele).animate({scrollTop: height}); } }); } } </script> <style> /* Button used to open the chat form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 9px 13px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 11px; right: 28px; //width: 280px; right: 60px; z-index: 9999 !important; } .chat_close { background:#485b7f; display:flex; margin-bottom: 10px; position:fixed; } .chat_close h4 { color:#fff; margin-bottom:5px; margin-top:5px; } .btn-close { float:right; padding:5px; color:#fff; margin-left: 187px !important; } .circle { display: inline-block; width: 7px; height: 7px; border-radius: 500px; margin: 0 .5em; background-color: #ddd; vertical-align: baseline; border: 2px solid transparent; } .circle-lg { width: 11px; height: 11px; } .circle-warning { background-color: #ff902b; } .circle-online { background-color: #66bb66; } @media only screen and (max-width : 540px) { .chat-sidebar { display: none !important; } .chat-popup { display: none !important; } } /* The popup chat - hidden by default */ .chat-popup { display: none; } .chat-sidebar { width: 300px; position: fixed; height: 79%; right: 0px; bottom: 0px; //padding-top: 10px; padding-bottom: 10px; border: 1px solid rgba(29, 49, 91, .3); background: #fff; overflow-y: scroll; z-index: 9999; } .sidebar-name { padding-left: 10px; padding-right: 10px; //margin-bottom: 4px; font-size: 12px; height: 45px; border-bottom: 1px solid #ccc !important; margin-top: 10px; clear: both; } .sidebar-name span { padding-left: 5px; } .sidebar-name a { display: block; height: 100%; text-decoration: none; color: inherit; } .sidebar-name:hover { background-color:#e1e2e5; } .sidebar-name img { width: 32px; height: 32px; vertical-align:middle; } .popup-box { display: none; position: fixed; bottom: 0px; right: 220px; height: 472px; background-color: rgb(237, 239, 244); width: 300px; border: 1px solid rgba(29, 49, 91, .3); z-index: 9999; } .popup-box .popup-head { background-color: #6d84b4; padding: 5px; color: white; font-weight: bold; font-size: 14px; clear: both; } .popup-box .popup-head .popup-head-left { float: left; } .popup-box .popup-head .popup-head-right { float: right; opacity: 0.5; } .popup-box .popup-head .popup-head-right a { text-decoration: none; color: inherit; } .popup-box .popup-messages { height: 100%; overflow : auto; } .popup-box .popup-text { padding:5px; background: #cfdbe2; } p.left:after { content: ""; display: inline-block; position: absolute; left: -8.5px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; } p.left:before { content: ""; display: inline-block; position: absolute; left: -9px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid black; } p.right:after { content: ""; display: inline-block; position: absolute; right: -8px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #dbedfe; } p.right:before { content: ""; display: inline-block; position: absolute; right: -9px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid black; } p.right { float: right; background-color: #dbedfe; } </style>