Adding new chat js library (with no changes) see #3565
parent
c64d576f00
commit
ce3329af6c
@ -0,0 +1,92 @@ |
||||
.chatbox { |
||||
position: fixed; |
||||
position:expression("absolute"); |
||||
width: 225px; |
||||
display:none; |
||||
} |
||||
|
||||
.chatboxhead { |
||||
background-color: #f99d39; |
||||
padding:7px; |
||||
color: #ffffff; |
||||
|
||||
border-right:1px solid #f99d39; |
||||
border-left:1px solid #f99d39; |
||||
} |
||||
|
||||
.chatboxblink { |
||||
background-color: #176689; |
||||
border-right:1px solid #176689; |
||||
border-left:1px solid #176689; |
||||
} |
||||
|
||||
.chatboxcontent { |
||||
font-family: arial,sans-serif; |
||||
font-size: 13px; |
||||
color: #333333; |
||||
height:200px; |
||||
width:209px; |
||||
overflow-y:auto; |
||||
overflow-x:auto; |
||||
padding:7px; |
||||
border-left:1px solid #cccccc; |
||||
border-right:1px solid #cccccc; |
||||
border-bottom:1px solid #eeeeee; |
||||
background-color: #ffffff; |
||||
line-height: 1.3em; |
||||
} |
||||
|
||||
.chatboxinput { |
||||
padding: 5px; |
||||
background-color: #ffffff; |
||||
border-left:1px solid #cccccc; |
||||
border-right:1px solid #cccccc; |
||||
border-bottom:1px solid #cccccc; |
||||
} |
||||
|
||||
.chatboxtextarea { |
||||
width: 206px; |
||||
height:44px; |
||||
padding:3px 0pt 3px 3px; |
||||
border: 1px solid #eeeeee; |
||||
margin: 1px; |
||||
overflow:hidden; |
||||
} |
||||
|
||||
.chatboxtextareaselected { |
||||
border: 2px solid #f99d39; |
||||
margin:0; |
||||
} |
||||
|
||||
.chatboxmessage { |
||||
margin-left:1em; |
||||
} |
||||
|
||||
.chatboxinfo { |
||||
margin-left:-1em; |
||||
color:#666666; |
||||
|
||||
} |
||||
|
||||
.chatboxmessagefrom { |
||||
margin-left:-1em; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.chatboxmessagecontent { |
||||
} |
||||
|
||||
.chatboxoptions { |
||||
float: right; |
||||
} |
||||
|
||||
.chatboxoptions a { |
||||
text-decoration: none; |
||||
color: white; |
||||
font-weight:bold; |
||||
font-family:Verdana,Arial,"Bitstream Vera Sans",sans-serif; |
||||
} |
||||
|
||||
.chatboxtitle { |
||||
float: left; |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
@charset "utf-8"; |
||||
/* |
||||
* CSS Document |
||||
* Written by Ryan Yonzon |
||||
* http://ryan.rawswift.com/ |
||||
*/ |
||||
|
||||
html, body { |
||||
margin:0px; /* FF hack: or we'll have double scrollbar showing on the browser */ |
||||
overflow:hidden; /* hide browser's main scrollbar */ |
||||
|
||||
} |
||||
|
||||
#main_container { |
||||
width:100%; |
||||
background-color:#ffffff; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */ |
||||
overflow-x: hidden; |
||||
overflow-y: scroll; |
||||
height:100%; /* this will make sure that the height will extend at the bottom */ |
||||
position:absolute; /* container div must be absolute, for our fixed bar to work */ |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
@charset "utf-8"; |
||||
/* |
||||
* CSS Document |
||||
* Written by Ryan Yonzon |
||||
* http://ryan.rawswift.com/ |
||||
*/ |
||||
|
||||
/* |
||||
* IE hack |
||||
*/ |
||||
html, body { |
||||
margin:0px; |
||||
overflow:hidden; /* hide browser's main scrollbar */ |
||||
height:100%; /* make sure we'll use 100% of the page's height */ |
||||
} |
||||
|
||||
#main_container { |
||||
width:100%; /* make sure we'll use 100% of page's width */ |
||||
background-color:#ffffff; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */ |
||||
overflow-x: hidden; |
||||
overflow-y: scroll; |
||||
} |
||||
@ -0,0 +1,414 @@ |
||||
/* |
||||
|
||||
Copyright (c) 2009 Anant Garg (anantgarg.com | inscripts.com) |
||||
|
||||
This script may be used for non-commercial purposes only. For any |
||||
commercial purposes, please contact the author at
|
||||
anant.garg@inscripts.com |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
||||
OTHER DEALINGS IN THE SOFTWARE. |
||||
|
||||
*/ |
||||
|
||||
var windowFocus = true; |
||||
var username; |
||||
var chatHeartbeatCount = 0; |
||||
var minChatHeartbeat = 1000; |
||||
var maxChatHeartbeat = 33000; |
||||
var chatHeartbeatTime = minChatHeartbeat; |
||||
var originalTitle; |
||||
var blinkOrder = 0; |
||||
|
||||
var chatboxFocus = new Array(); |
||||
var newMessages = new Array(); |
||||
var newMessagesWin = new Array(); |
||||
var chatBoxes = new Array(); |
||||
|
||||
$(document).ready(function(){ |
||||
originalTitle = document.title; |
||||
startChatSession(); |
||||
|
||||
$([window, document]).blur(function(){ |
||||
windowFocus = false; |
||||
}).focus(function(){ |
||||
windowFocus = true; |
||||
document.title = originalTitle; |
||||
}); |
||||
}); |
||||
|
||||
function restructureChatBoxes() { |
||||
align = 0; |
||||
for (x in chatBoxes) { |
||||
chatboxtitle = chatBoxes[x]; |
||||
|
||||
if ($("#chatbox_"+chatboxtitle).css('display') != 'none') { |
||||
if (align == 0) { |
||||
$("#chatbox_"+chatboxtitle).css('right', '20px'); |
||||
} else { |
||||
width = (align)*(225+7)+20; |
||||
$("#chatbox_"+chatboxtitle).css('right', width+'px'); |
||||
} |
||||
align++; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function chatWith(chatuser) { |
||||
createChatBox(chatuser); |
||||
$("#chatbox_"+chatuser+" .chatboxtextarea").focus(); |
||||
} |
||||
|
||||
function createChatBox(chatboxtitle,minimizeChatBox) { |
||||
if ($("#chatbox_"+chatboxtitle).length > 0) { |
||||
if ($("#chatbox_"+chatboxtitle).css('display') == 'none') { |
||||
$("#chatbox_"+chatboxtitle).css('display','block'); |
||||
restructureChatBoxes(); |
||||
} |
||||
$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus(); |
||||
return; |
||||
} |
||||
|
||||
$(" <div />" ).attr("id","chatbox_"+chatboxtitle) |
||||
.addClass("chatbox") |
||||
.html('<div class="chatboxhead"><div class="chatboxtitle">'+chatboxtitle+'</div><div class="chatboxoptions"><a href="javascript:void(0)" onclick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')">-</a> <a href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chatboxtitle+'\')">X</a></div><br clear="all"/></div><div class="chatboxcontent"></div><div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+chatboxtitle+'\');"></textarea></div>') |
||||
.appendTo($( "body" )); |
||||
|
||||
$("#chatbox_"+chatboxtitle).css('bottom', '0px'); |
||||
|
||||
chatBoxeslength = 0; |
||||
|
||||
for (x in chatBoxes) { |
||||
if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') { |
||||
chatBoxeslength++; |
||||
} |
||||
} |
||||
|
||||
if (chatBoxeslength == 0) { |
||||
$("#chatbox_"+chatboxtitle).css('right', '20px'); |
||||
} else { |
||||
width = (chatBoxeslength)*(225+7)+20; |
||||
$("#chatbox_"+chatboxtitle).css('right', width+'px'); |
||||
} |
||||
|
||||
chatBoxes.push(chatboxtitle); |
||||
|
||||
if (minimizeChatBox == 1) { |
||||
minimizedChatBoxes = new Array(); |
||||
|
||||
if ($.cookie('chatbox_minimized')) { |
||||
minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/); |
||||
} |
||||
minimize = 0; |
||||
for (j=0;j<minimizedChatBoxes.length;j++) { |
||||
if (minimizedChatBoxes[j] == chatboxtitle) { |
||||
minimize = 1; |
||||
} |
||||
} |
||||
|
||||
if (minimize == 1) { |
||||
$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none'); |
||||
$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none'); |
||||
} |
||||
} |
||||
|
||||
chatboxFocus[chatboxtitle] = false; |
||||
|
||||
$("#chatbox_"+chatboxtitle+" .chatboxtextarea").blur(function(){ |
||||
chatboxFocus[chatboxtitle] = false; |
||||
$("#chatbox_"+chatboxtitle+" .chatboxtextarea").removeClass('chatboxtextareaselected'); |
||||
}).focus(function(){ |
||||
chatboxFocus[chatboxtitle] = true; |
||||
newMessages[chatboxtitle] = false; |
||||
$('#chatbox_'+chatboxtitle+' .chatboxhead').removeClass('chatboxblink'); |
||||
$("#chatbox_"+chatboxtitle+" .chatboxtextarea").addClass('chatboxtextareaselected'); |
||||
}); |
||||
|
||||
$("#chatbox_"+chatboxtitle).click(function() { |
||||
if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') != 'none') { |
||||
$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus(); |
||||
} |
||||
}); |
||||
|
||||
$("#chatbox_"+chatboxtitle).show(); |
||||
} |
||||
|
||||
|
||||
function chatHeartbeat(){ |
||||
|
||||
var itemsfound = 0; |
||||
|
||||
if (windowFocus == false) { |
||||
|
||||
var blinkNumber = 0; |
||||
var titleChanged = 0; |
||||
for (x in newMessagesWin) { |
||||
if (newMessagesWin[x] == true) { |
||||
++blinkNumber; |
||||
if (blinkNumber >= blinkOrder) { |
||||
document.title = x+' says...'; |
||||
titleChanged = 1; |
||||
break;
|
||||
} |
||||
} |
||||
} |
||||
|
||||
if (titleChanged == 0) { |
||||
document.title = originalTitle; |
||||
blinkOrder = 0; |
||||
} else { |
||||
++blinkOrder; |
||||
} |
||||
|
||||
} else { |
||||
for (x in newMessagesWin) { |
||||
newMessagesWin[x] = false; |
||||
} |
||||
} |
||||
|
||||
for (x in newMessages) { |
||||
if (newMessages[x] == true) { |
||||
if (chatboxFocus[x] == false) { |
||||
//FIXME: add toggle all or none policy, otherwise it looks funny
|
||||
$('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$.ajax({ |
||||
url: "chat.php?action=chatheartbeat", |
||||
cache: false, |
||||
dataType: "json", |
||||
success: function(data) { |
||||
|
||||
$.each(data.items, function(i,item){ |
||||
if (item) { // fix strange ie bug
|
||||
|
||||
chatboxtitle = item.f; |
||||
|
||||
if ($("#chatbox_"+chatboxtitle).length <= 0) { |
||||
createChatBox(chatboxtitle); |
||||
} |
||||
if ($("#chatbox_"+chatboxtitle).css('display') == 'none') { |
||||
$("#chatbox_"+chatboxtitle).css('display','block'); |
||||
restructureChatBoxes(); |
||||
} |
||||
|
||||
if (item.s == 1) { |
||||
item.f = username; |
||||
} |
||||
|
||||
if (item.s == 2) { |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>'); |
||||
} else { |
||||
newMessages[chatboxtitle] = true; |
||||
newMessagesWin[chatboxtitle] = true; |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+': </span><span class="chatboxmessagecontent">'+item.m+'</span></div>'); |
||||
} |
||||
|
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight); |
||||
itemsfound += 1; |
||||
} |
||||
}); |
||||
|
||||
chatHeartbeatCount++; |
||||
|
||||
if (itemsfound > 0) { |
||||
chatHeartbeatTime = minChatHeartbeat; |
||||
chatHeartbeatCount = 1; |
||||
} else if (chatHeartbeatCount >= 10) { |
||||
chatHeartbeatTime *= 2; |
||||
chatHeartbeatCount = 1; |
||||
if (chatHeartbeatTime > maxChatHeartbeat) { |
||||
chatHeartbeatTime = maxChatHeartbeat; |
||||
} |
||||
} |
||||
|
||||
setTimeout('chatHeartbeat();',chatHeartbeatTime); |
||||
}}); |
||||
} |
||||
|
||||
function closeChatBox(chatboxtitle) { |
||||
$('#chatbox_'+chatboxtitle).css('display','none'); |
||||
restructureChatBoxes(); |
||||
|
||||
$.post("chat.php?action=closechat", { chatbox: chatboxtitle} , function(data){
|
||||
}); |
||||
|
||||
} |
||||
|
||||
function toggleChatBoxGrowth(chatboxtitle) { |
||||
if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') == 'none') {
|
||||
|
||||
var minimizedChatBoxes = new Array(); |
||||
|
||||
if ($.cookie('chatbox_minimized')) { |
||||
minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/); |
||||
} |
||||
|
||||
var newCookie = ''; |
||||
|
||||
for (i=0;i<minimizedChatBoxes.length;i++) { |
||||
if (minimizedChatBoxes[i] != chatboxtitle) { |
||||
newCookie += chatboxtitle+'|'; |
||||
} |
||||
} |
||||
|
||||
newCookie = newCookie.slice(0, -1) |
||||
|
||||
|
||||
$.cookie('chatbox_minimized', newCookie); |
||||
$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','block'); |
||||
$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','block'); |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight); |
||||
} else { |
||||
|
||||
var newCookie = chatboxtitle; |
||||
|
||||
if ($.cookie('chatbox_minimized')) { |
||||
newCookie += '|'+$.cookie('chatbox_minimized'); |
||||
} |
||||
|
||||
|
||||
$.cookie('chatbox_minimized',newCookie); |
||||
$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none'); |
||||
$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none'); |
||||
} |
||||
|
||||
} |
||||
|
||||
function checkChatBoxInputKey(event,chatboxtextarea,chatboxtitle) { |
||||
|
||||
if(event.keyCode == 13 && event.shiftKey == 0) { |
||||
message = $(chatboxtextarea).val(); |
||||
message = message.replace(/^\s+|\s+$/g,""); |
||||
|
||||
$(chatboxtextarea).val(''); |
||||
$(chatboxtextarea).focus(); |
||||
$(chatboxtextarea).css('height','44px'); |
||||
if (message != '') { |
||||
$.post("chat.php?action=sendchat", {to: chatboxtitle, message: message} , function(data){ |
||||
message = message.replace(/</g,"<").replace(/>/g,">").replace(/\"/g,"""); |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+username+': </span><span class="chatboxmessagecontent">'+message+'</span></div>'); |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight); |
||||
}); |
||||
} |
||||
chatHeartbeatTime = minChatHeartbeat; |
||||
chatHeartbeatCount = 1; |
||||
|
||||
return false; |
||||
} |
||||
|
||||
var adjustedHeight = chatboxtextarea.clientHeight; |
||||
var maxHeight = 94; |
||||
|
||||
if (maxHeight > adjustedHeight) { |
||||
adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight); |
||||
if (maxHeight) |
||||
adjustedHeight = Math.min(maxHeight, adjustedHeight); |
||||
if (adjustedHeight > chatboxtextarea.clientHeight) |
||||
$(chatboxtextarea).css('height',adjustedHeight+8 +'px'); |
||||
} else { |
||||
$(chatboxtextarea).css('overflow','auto'); |
||||
} |
||||
|
||||
} |
||||
|
||||
function startChatSession(){
|
||||
$.ajax({ |
||||
url: "chat.php?action=startchatsession", |
||||
cache: false, |
||||
dataType: "json", |
||||
success: function(data) { |
||||
|
||||
username = data.username; |
||||
|
||||
$.each(data.items, function(i,item){ |
||||
if (item) { // fix strange ie bug
|
||||
|
||||
chatboxtitle = item.f; |
||||
|
||||
if ($("#chatbox_"+chatboxtitle).length <= 0) { |
||||
createChatBox(chatboxtitle,1); |
||||
} |
||||
|
||||
if (item.s == 1) { |
||||
item.f = username; |
||||
} |
||||
|
||||
if (item.s == 2) { |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>'); |
||||
} else { |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+': </span><span class="chatboxmessagecontent">'+item.m+'</span></div>'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
for (i=0;i<chatBoxes.length;i++) { |
||||
chatboxtitle = chatBoxes[i]; |
||||
$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight); |
||||
setTimeout('$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);', 100); // yet another strange ie bug
|
||||
} |
||||
|
||||
setTimeout('chatHeartbeat();',chatHeartbeatTime); |
||||
|
||||
}}); |
||||
} |
||||
|
||||
/** |
||||
* Cookie plugin |
||||
* |
||||
* Copyright (c) 2006 Klaus Hartl (stilbuero.de) |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* |
||||
*/ |
||||
|
||||
jQuery.cookie = function(name, value, options) { |
||||
if (typeof value != 'undefined') { // name and value given, set cookie
|
||||
options = options || {}; |
||||
if (value === null) { |
||||
value = ''; |
||||
options.expires = -1; |
||||
} |
||||
var expires = ''; |
||||
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { |
||||
var date; |
||||
if (typeof options.expires == 'number') { |
||||
date = new Date(); |
||||
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); |
||||
} else { |
||||
date = options.expires; |
||||
} |
||||
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
|
||||
} |
||||
// CAUTION: Needed to parenthesize options.path and options.domain
|
||||
// in the following expressions, otherwise they evaluate to undefined
|
||||
// in the packed version for some reason...
|
||||
var path = options.path ? '; path=' + (options.path) : ''; |
||||
var domain = options.domain ? '; domain=' + (options.domain) : ''; |
||||
var secure = options.secure ? '; secure' : ''; |
||||
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); |
||||
} else { // only name given, get cookie
|
||||
var cookieValue = null; |
||||
if (document.cookie && document.cookie != '') { |
||||
var cookies = document.cookie.split(';'); |
||||
for (var i = 0; i < cookies.length; i++) { |
||||
var cookie = jQuery.trim(cookies[i]); |
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) == (name + '=')) { |
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
return cookieValue; |
||||
} |
||||
}; |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue