File: /home/iestorre/moodleAW/moodle01/mod/chat/gui_ajax/module.js
/*
* NOTE: the /mod/chat/gui_header_js/ is not a real plugin,
* ideally this code should be in /mod/chat/module.js
*/
/**
* @namespace M.mod_chat_ajax
*/
M.mod_chat_ajax = M.mod_chat_ajax || {};
/**
* Init ajax based Chat UI.
* @namespace M.mod_chat_ajax
* @function
* @param {YUI} Y
* @param {Object} cfg configuration data
*/
M.mod_chat_ajax.init = function(Y, cfg) {
var gui_ajax = {
// Properties
api : M.cfg.wwwroot+'/mod/chat/chat_ajax.php?sesskey='+M.cfg.sesskey, // The path to the ajax callback script
cfg : {}, // A configuration variable
interval : null, // The interval object for refreshes
layout : null, // A reference to the layout used in this module
messages : [], // An array of messages
scrollable : true, // True is scrolling should occur
thememenu : null, // A reference to the menu for changing themes
// Elements
messageinput : null,
sendbutton : null,
messagebox : null,
init : function(cfg) {
this.cfg = cfg;
this.cfg.req_count = this.cfg.req_count || 0;
participantswidth = 180;
if (Y.one('#input-message').get('docWidth') < 640) {
participantswidth = 120;
}
this.layout = new Y.YUI2.widget.Layout({
units : [
{position: 'right', width: participantswidth, resize: true, gutter: '1px', scroll: true, body: 'chat-userlist', animate: false},
{position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '1px', collapse: false, resize: false},
{position: 'center', body: 'chat-messages', gutter: '0px', scroll: true}
]
});
this.layout.on('render', function() {
var unit = this.getUnitByPosition('right');
if (unit) {
unit.on('close', function() {
closeLeft();
});
}
}, this.layout);
this.layout.render();
// Gather the general elements
this.messageinput = Y.one('#input-message');
this.sendbutton = Y.one('#button-send');
this.messagebox = Y.one('#chat-messages');
// Set aria attributes to messagebox and chat-userlist
this.messagebox.set('role', 'log');
this.messagebox.set('aria-live', 'polite');
var userlist = Y.one('#chat-userlist');
userlist.set('aria-live', 'polite');
userlist.set('aria-relevant', 'all');
// Attach the default events for this module
this.sendbutton.on('click', this.send, this);
this.messagebox.on('mouseenter', function() {
this.scrollable = false;
}, this);
this.messagebox.on('mouseleave', function() {
this.scrollable = true;
}, this);
// Send the message when the enter key is pressed
Y.on('key', this.send, this.messageinput, 'press:13', this);
document.title = this.cfg.chatroom_name;
// Prepare and execute the first AJAX request of information
Y.io(this.api,{
method : 'POST',
data : build_querystring({
action : 'init',
chat_init : 1,
chat_sid : this.cfg.sid,
theme : this.theme
}),
on : {
success : function(tid, outcome) {
this.messageinput.removeAttribute('disabled');
this.messageinput.set('value', '');
this.messageinput.focus();
try {
var data = Y.JSON.parse(outcome.responseText);
} catch (ex) {
return;
}
this.update_users(data.users);
}
},
context : this
});
var scope = this;
this.interval = setInterval(function() {
scope.update_messages();
}, this.cfg.timer, this);
// Create and initalise theme changing menu
this.thememenu = new Y.YUI2.widget.Menu('basicmenu', {xy:[0,0]});
this.thememenu.addItems([
{text: M.util.get_string('bubble', 'mod_chat'), url: this.cfg.chaturl+'&theme=bubble'},
{text: M.util.get_string('compact', 'mod_chat'), url: this.cfg.chaturl+'&theme=compact'}
]);
if (this.cfg.showcoursetheme == 1) {
this.thememenu.addItem({text: M.util.get_string('coursetheme', 'mod_chat'), url: this.cfg.chaturl+'&theme=course_theme'});
}
this.thememenu.render(document.body);
Y.one('#choosetheme').on('click', function(e){
this.moveTo((e.pageX-20), (e.pageY-20));
this.show();
}, this.thememenu);
},
append_message : function(key, message, row) {
var item = Y.Node.create('<li id="mdl-chat-entry-'+key+'">'+message.message+'</li>');
item.addClass((message.mymessage)?'mdl-chat-my-entry':'mdl-chat-entry');
Y.one('#messages-list').append(item);
if (message.type && message.type == 'beep') {
Y.one('#chat-notify').setContent('<embed src="../beep.wav" autostart="true" hidden="true" name="beep" />');
}
},
send : function(e, beep) {
if((this.messageinput.get('value') != '') || (typeof beep != 'undefined')) {
this.sendbutton.set('value', M.str.chat.sending);
var data = {
chat_message : (!beep) ? this.messageinput.get('value') : '',
chat_sid : this.cfg.sid,
theme : this.cfg.theme
};
if (beep) {
data.beep = beep
}
data.action = 'chat';
Y.io(this.api, {
method : 'POST',
data : build_querystring(data),
on : {
success : this.send_callback
},
context : this
});
}
},
send_callback : function(tid, outcome, args) {
try {
var data = Y.JSON.parse(outcome.responseText);
} catch (ex) {
return;
}
this.sendbutton.set('value', M.str.chat.send);
this.messageinput.set('value', '');
clearInterval(this.interval);
this.update_messages();
var scope = this;
this.interval = setInterval(function() {
scope.update_messages();
}, this.cfg.timer, this);
},
talkto: function (e, name) {
this.messageinput.set('value', "To "+name+": ");
this.messageinput.focus();
},
update_messages : function() {
this.cfg.req_count++;
Y.io(this.api, {
method : 'POST',
data : build_querystring({
action: 'update',
chat_lastrow : this.cfg.chat_lastrow || false,
chat_lasttime : this.cfg.chat_lasttime,
chat_sid : this.cfg.sid,
theme : this.cfg.theme
}),
on : {
success : this.update_messages_callback
},
context : this
});
},
update_messages_callback : function(tid, outcome) {
try {
var data = Y.JSON.parse(outcome.responseText);
} catch (ex) {
return;
}
if (data.error) {
clearInterval(this.interval);
alert(data.error);
window.location = this.cfg.home;
}
this.cfg.chat_lasttime = data.lasttime;
this.cfg.chat_lastrow = data.lastrow;
// Update messages
for (var key in data.msgs){
if (!M.util.in_array(key, this.messages)) {
this.messages.push(key);
this.append_message(key, data.msgs[key], data.lastrow);
}
}
// Update users
this.update_users(data.users);
// Scroll to the bottom of the message list
if (this.scrollable) {
Y.Node.getDOMNode(this.messagebox).parentNode.scrollTop+=500;
}
this.messageinput.focus();
},
update_users : function(users) {
if (!users) {
return;
}
var list = Y.one('#users-list');
list.get('children').remove();
for (var i in users) {
var li = Y.Node.create('<li><table><tr><td>'+users[i].picture+'</td><td></td></tr></table></li>');
if (users[i].id == this.cfg.userid) {
li.all('td').item(1).append(Y.Node.create('<strong><a target="_blank" href="'+users[i].url+'">'+ users[i].name+'</a></strong>'));
} else {
li.all('td').item(1).append(Y.Node.create('<div><a target="_blank" href="'+users[i].url+'">'+users[i].name+'</a></div>'));
var talk = Y.Node.create('<a href="###">'+M.str.chat.talk+'</a>');
talk.on('click', this.talkto, this, users[i].name);
var beep = Y.Node.create('<a href="###">'+M.str.chat.beep+'</a>');
beep.on('click', this.send, this, users[i].id);
li.all('td').item(1).append(Y.Node.create('<div></div>').append(talk).append(' ').append(beep));
}
list.append(li);
}
}
};
gui_ajax.init(cfg);
};