forked from science-ation/science-ation
270 lines
7.8 KiB
PHP
270 lines
7.8 KiB
PHP
<?
|
|
/*
|
|
This file is part of the 'Science Fair In A Box' project
|
|
SFIAB Website: http://www.sfiab.ca
|
|
|
|
Copyright (C) 2005 Sci-Tech Ontario Inc <info@scitechontario.org>
|
|
Copyright (C) 2005-2008 James Grant <james@lightbox.org>
|
|
|
|
This program is free software; you can redistribute it and/or
|
|
modify it under the terms of the GNU General Public
|
|
License as published by the Free Software Foundation, version 2.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program; see the file COPYING. If not, write to
|
|
the Free Software Foundation, Inc., 59 Temple Place - Suite 330,
|
|
Boston, MA 02111-1307, USA.
|
|
*/
|
|
?>
|
|
<?php
|
|
function draw_chatbox($subject){
|
|
global $config;
|
|
$chatCollapsed = $_SESSION['chat_collapsed'] ? 1 : 0;
|
|
?>
|
|
<style type="text/css">
|
|
#chatbox_wrapper{
|
|
border: 3px solid;
|
|
border-color: #EEEEFF #5C6F90 #5C6F90 #EEEEFF;
|
|
border-radius: 8px;
|
|
display:inline-block;
|
|
width: <?=($chatCollapsed ? '0px' : '30em')?>;
|
|
height: 38em;
|
|
float:right;
|
|
margin: 1em;
|
|
padding: 1.25em;
|
|
background-color: #E0E0FF;
|
|
position:relative;
|
|
}
|
|
#chatbox_dialogue{
|
|
width:100%;
|
|
height: 30em;
|
|
top: 0.5em;
|
|
overflow:auto;
|
|
border: 3px solid;
|
|
border-color: #5C6F90 #EEEEFF #EEEEFF #5C6F90;
|
|
background-color: #FFF;
|
|
border-radius: 3px;
|
|
<?php
|
|
if($chatCollapsed) echo "display: none;\n";
|
|
?>
|
|
}
|
|
#chatbox_separator{
|
|
border-top:1px solid white;
|
|
height: 1.5em;
|
|
}
|
|
#chatbox_input{
|
|
width: 100%;
|
|
background-color: #FFF;
|
|
height: 3em;
|
|
border: 3px solid;
|
|
border-radius: 3px;
|
|
border-color: #5C6F90 #EEEEFF #EEEEFF #5C6F90;
|
|
display: none;
|
|
}
|
|
#chatbox_submit{
|
|
margin: 0;
|
|
margin-top: 0.5em;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
background-color: #CECEDF;
|
|
border-color: #E8E8EE #5C6F90 #5C6F90 #E8E8EE;
|
|
font-size: 18px;
|
|
height: 1.5em;
|
|
line-height: 1em;
|
|
font-weight: normal;
|
|
display: none;
|
|
}
|
|
div.chatbox_messageHeader{
|
|
margin-top: 1em;
|
|
border-top: 1px solid #668;
|
|
border-bottom: 1px solid #224;
|
|
background-color: #557;
|
|
color: #FFF;
|
|
}
|
|
#chatbox_collapsebutton{
|
|
position: absolute;
|
|
left: 0;/*32em;*/
|
|
top: 0;/*16em;*/
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
line-height: 1.2em;
|
|
text-align:center;
|
|
/* border-radius: 0.5em;
|
|
background-color: #CECEDF;
|
|
border: 2px solid;
|
|
border-color: #EEEEFF #5C6F90 #5C6F90 #EEEEFF;
|
|
*/
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var lastMessageIndex = {};
|
|
var ajaxLock = false;
|
|
var refreshRate = 30000;
|
|
var viewCollapsed = <?=$chatCollapsed;?>;
|
|
$(document).ready(function(){
|
|
loadChat('<?=$subject;?>', function(){
|
|
setTimeout(function(){refreshChat('<?=$subject;?>');}, refreshRate);
|
|
if(!viewCollapsed){
|
|
$('#chatbox_input').css('display', 'block');
|
|
$('#chatbox_submit').css('display', 'block');
|
|
}
|
|
$('#chatbox_input').focus(function(event){
|
|
$('#chatbox_input').val('');
|
|
$('#chatbox_input').unbind(event)
|
|
});
|
|
});
|
|
});
|
|
function doSubmit(){
|
|
postMessage('<?=$subject;?>', $('#chatbox_input').val());
|
|
$('#chatbox_input').val('');
|
|
}
|
|
function loadChat(subject, callback){
|
|
ajaxLock = true;
|
|
if(callback == undefined) callback = function(){};
|
|
if(lastMessageIndex[subject] == undefined) lastMessageIndex[subject] = 0;
|
|
$.post(
|
|
'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
|
|
{'action':'fetch', 'subject':subject, 'since':lastMessageIndex[subject]},
|
|
function(result){
|
|
ajaxLock = false;
|
|
handleReply(subject, result);
|
|
callback();
|
|
}
|
|
);
|
|
}
|
|
|
|
function refreshChat(subject){
|
|
if(ajaxLock == false){
|
|
ajaxLock = true;
|
|
$.post(
|
|
'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
|
|
{'action':'fetch', 'subject':subject, 'since':lastMessageIndex[subject]},
|
|
function(result){
|
|
ajaxLock = false;
|
|
handleReply(subject, result);
|
|
}
|
|
);
|
|
setTimeout(function(){refreshChat(subject);}, refreshRate);
|
|
}else{
|
|
setTimeout(function(){refreshChat(subject);}, refreshRate);
|
|
}
|
|
}
|
|
|
|
function postMessage(subject, message){
|
|
if(ajaxLock == false){
|
|
ajaxLock = true;
|
|
message = $.trim(message);
|
|
if(message.length > 0){
|
|
$.post(
|
|
'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
|
|
{'action':'fetch', 'subject':subject, 'message':message, 'since':lastMessageIndex[subject]},
|
|
function(result){
|
|
ajaxLock = false;
|
|
handleReply(subject, result);
|
|
}
|
|
);
|
|
}
|
|
}else{
|
|
setTimeout(function(){postMessage(subject, message);}, 200 + 400 * Math.random());
|
|
}
|
|
}
|
|
|
|
function textMessage(time, speaker, fairname, text){
|
|
var line = $('<div></div>');
|
|
var header = $('<div class="chatbox_messageHeader"></div>');
|
|
if(fairname != null) header.append(fairname + "<br/>");
|
|
header.append('<strong>' + speaker + '</strong>');
|
|
if(time) header.append('<span style="float:right">' + time + '</span>');
|
|
line.html(text);
|
|
$('#chatbox_dialogue').append(header);
|
|
$('#chatbox_dialogue').append(line);
|
|
$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
|
|
}
|
|
|
|
function errorMessage(text){
|
|
var line = $('<div class="error"></div>');
|
|
line.html('<strong>' + text + '</strong>');
|
|
$('#chatbox_dialogue').append(line);
|
|
$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
|
|
}
|
|
|
|
function systemMessage(text){
|
|
var line = $('<div></div>');
|
|
line.html('<strong>' + text + '</strong>');
|
|
$('#chatbox_dialogue').append(line);
|
|
$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
|
|
}
|
|
|
|
function handleReply(subject, response){
|
|
var data;
|
|
eval('data = ' + response);
|
|
if(data.info.length > 0){
|
|
for(n in data.info){
|
|
systemMessage(data.info[n].text);
|
|
}
|
|
}
|
|
if(data.error.length > 0){
|
|
for(n in data.error){
|
|
errorMessage(data.error[n]);
|
|
}
|
|
}
|
|
if(data.message.length > 0){
|
|
for(n in data.message){
|
|
textMessage(
|
|
data.message[n].time,
|
|
data.message[n].speaker,
|
|
data.message[n].fairname,
|
|
data.message[n].text
|
|
);
|
|
lastMessageIndex[subject] = data.message[n].index;
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleView(){
|
|
var newWidth, callback;
|
|
if(viewCollapsed){
|
|
newWidth = '30em';
|
|
viewCollapsed = false;
|
|
$('#chatbox_input').css('display', 'block');
|
|
$('#chatbox_submit').css('display', 'block');
|
|
$('#chatbox_dialogue').css('display', 'block');
|
|
$('#chatbox_collapsebutton').html('»');
|
|
callback = function(){
|
|
$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
|
|
}
|
|
}else{
|
|
newWidth = '0px';
|
|
viewCollapsed = true;
|
|
callback = function(){
|
|
$('#chatbox_input').css('display', 'none');
|
|
$('#chatbox_submit').css('display', 'none');
|
|
$('#chatbox_dialogue').css('display', 'none');
|
|
$('#chatbox_collapsebutton').html('«');
|
|
}
|
|
}
|
|
$.post('<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',{'collapsed':viewCollapsed ? '1' : '0'});
|
|
$('#chatbox_wrapper').animate({'width':newWidth}, 500, callback);
|
|
}
|
|
|
|
</script>
|
|
<div id="chatbox_wrapper">
|
|
<div id="chatbox_dialogue"></div>
|
|
<div id="chatbox_separator"></div>
|
|
<textarea id="chatbox_input">Type your message here...</textarea>
|
|
<button id="chatbox_submit" type="submit" onclick="doSubmit(); return false;">send</button>
|
|
<div id="chatbox_collapsebutton" onclick="toggleView();"><?php
|
|
if($chatCollapsed) echo "«\n";
|
|
else echo "»";
|
|
?></div>
|
|
</div>
|
|
<pre>
|
|
</pre>
|
|
<?php
|
|
}
|