weekly release 2.8dev
[moodle.git] / mod / chat / gui_ajax / module.js
CommitLineData
2daed78a
PS
1
2/*
3 * NOTE: the /mod/chat/gui_header_js/ is not a real plugin,
4 * ideally this code should be in /mod/chat/module.js
5 */
6
7/**
8 * @namespace M.mod_chat_ajax
9 */
10M.mod_chat_ajax = M.mod_chat_ajax || {};
11
579a4976 12/**
2daed78a
PS
13 * Init ajax based Chat UI.
14 * @namespace M.mod_chat_ajax
15 * @function
16 * @param {YUI} Y
17 * @param {Object} cfg configuration data
579a4976 18 */
2daed78a
PS
19M.mod_chat_ajax.init = function(Y, cfg) {
20
21 var gui_ajax = {
579a4976
SH
22
23 // Properties
467902f2 24 api : M.cfg.wwwroot+'/mod/chat/chat_ajax.php?sesskey='+M.cfg.sesskey, // The path to the ajax callback script
579a4976
SH
25 cfg : {}, // A configuration variable
26 interval : null, // The interval object for refreshes
27 layout : null, // A reference to the layout used in this module
28 messages : [], // An array of messages
29 scrollable : true, // True is scrolling should occur
30 thememenu : null, // A reference to the menu for changing themes
31
32 // Elements
33 messageinput : null,
34 sendbutton : null,
35 messagebox : null,
36
2daed78a 37 init : function(cfg) {
579a4976
SH
38 this.cfg = cfg;
39 this.cfg.req_count = this.cfg.req_count || 0;
e9c599cb
AD
40 participantswidth = 180;
41 if (Y.one('#input-message').get('docWidth') < 640) {
42 participantswidth = 120;
43 }
69ccc32d 44 this.layout = new Y.YUI2.widget.Layout({
579a4976 45 units : [
e9c599cb
AD
46 {position: 'right', width: participantswidth, resize: true, gutter: '1px', scroll: true, body: 'chat-userlist', animate: false},
47 {position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '1px', collapse: false, resize: false},
48 {position: 'center', body: 'chat-messages', gutter: '0px', scroll: true}
579a4976
SH
49 ]
50 });
51
52 this.layout.on('render', function() {
7d2975c1
DC
53 var unit = this.getUnitByPosition('right');
54 if (unit) {
55 unit.on('close', function() {
56 closeLeft();
57 });
58 }
579a4976
SH
59 }, this.layout);
60 this.layout.render();
61
62 // Gather the general elements
63 this.messageinput = Y.one('#input-message');
64 this.sendbutton = Y.one('#button-send');
65 this.messagebox = Y.one('#chat-messages');
66
02a011ea
RT
67 // Set aria attributes to messagebox and chat-userlist
68 this.messagebox.set('role', 'log');
69 this.messagebox.set('aria-live', 'polite');
70 var userlist = Y.one('#chat-userlist');
71 userlist.set('aria-live', 'polite');
72 userlist.set('aria-relevant', 'all');
73
579a4976
SH
74 // Attach the default events for this module
75 this.sendbutton.on('click', this.send, this);
2daed78a
PS
76 this.messagebox.on('mouseenter', function() {
77 this.scrollable = false;
78 }, this);
79 this.messagebox.on('mouseleave', function() {
80 this.scrollable = true;
81 }, this);
579a4976
SH
82
83 // Send the message when the enter key is pressed
84 Y.on('key', this.send, this.messageinput, 'press:13', this);
85
86 document.title = this.cfg.chatroom_name;
87
88 // Prepare and execute the first AJAX request of information
89 Y.io(this.api,{
90 method : 'POST',
91 data : build_querystring({
92 action : 'init',
93 chat_init : 1,
94 chat_sid : this.cfg.sid,
95 theme : this.theme
96 }),
97 on : {
98 success : function(tid, outcome) {
5be94998 99 this.messageinput.removeAttribute('disabled');
579a4976 100 this.messageinput.set('value', '');
c67a139c 101 this.messageinput.focus();
579a4976
SH
102 try {
103 var data = Y.JSON.parse(outcome.responseText);
104 } catch (ex) {
105 return;
106 }
107 this.update_users(data.users);
108 }
109 },
110 context : this
111 });
112
c67a139c
DC
113 var scope = this;
114 this.interval = setInterval(function() {
115 scope.update_messages();
579a4976
SH
116 }, this.cfg.timer, this);
117
118 // Create and initalise theme changing menu
69ccc32d 119 this.thememenu = new Y.YUI2.widget.Menu('basicmenu', {xy:[0,0]});
579a4976 120 this.thememenu.addItems([
6f8624f7
AB
121 {text: M.util.get_string('bubble', 'mod_chat'), url: this.cfg.chaturl+'&theme=bubble'},
122 {text: M.util.get_string('compact', 'mod_chat'), url: this.cfg.chaturl+'&theme=compact'}
579a4976 123 ]);
b661e76c 124 if (this.cfg.showcoursetheme == 1) {
6f8624f7 125 this.thememenu.addItem({text: M.util.get_string('coursetheme', 'mod_chat'), url: this.cfg.chaturl+'&theme=course_theme'});
b661e76c 126 }
579a4976
SH
127 this.thememenu.render(document.body);
128 Y.one('#choosetheme').on('click', function(e){
129 this.moveTo((e.pageX-20), (e.pageY-20));
130 this.show();
131 }, this.thememenu);
132 },
133
134 append_message : function(key, message, row) {
135 var item = Y.Node.create('<li id="mdl-chat-entry-'+key+'">'+message.message+'</li>');
136 item.addClass((message.mymessage)?'mdl-chat-my-entry':'mdl-chat-entry');
137 Y.one('#messages-list').append(item);
138 if (message.type && message.type == 'beep') {
139 Y.one('#chat-notify').setContent('<embed src="../beep.wav" autostart="true" hidden="true" name="beep" />');
140 }
141 },
142
143 send : function(e, beep) {
b661e76c 144 this.sendbutton.set('value', M.str.chat.sending);
579a4976 145 var data = {
2daed78a
PS
146 chat_message : (!beep)?this.messageinput.get('value'):'',
147 chat_sid : this.cfg.sid,
148 theme : this.cfg.theme
149 };
150 if (beep) {
151 data.beep = beep
152 }
467902f2 153 data.action = 'chat';
579a4976 154
467902f2 155 Y.io(this.api, {
2daed78a
PS
156 method : 'POST',
157 data : build_querystring(data),
158 on : {
159 success : this.send_callback
160 },
161 context : this
579a4976
SH
162 });
163 },
164
165 send_callback : function(tid, outcome, args) {
529817c8
DC
166 try {
167 var data = Y.JSON.parse(outcome.responseText);
168 } catch (ex) {
169 return;
579a4976 170 }
529817c8
DC
171 this.sendbutton.set('value', M.str.chat.send);
172 this.messageinput.set('value', '');
579a4976
SH
173 clearInterval(this.interval);
174 this.update_messages();
58f3f058
DC
175 var scope = this;
176 this.interval = setInterval(function() {
177 scope.update_messages();
579a4976
SH
178 }, this.cfg.timer, this);
179 },
180
e8a4928d 181 talkto: function (e, name) {
579a4976
SH
182 this.messageinput.set('value', "To "+name+": ");
183 this.messageinput.focus();
184 },
185
186 update_messages : function() {
187 this.cfg.req_count++;
467902f2 188 Y.io(this.api, {
579a4976
SH
189 method : 'POST',
190 data : build_querystring({
467902f2 191 action: 'update',
579a4976
SH
192 chat_lastrow : this.cfg.chat_lastrow || false,
193 chat_lasttime : this.cfg.chat_lasttime,
194 chat_sid : this.cfg.sid,
195 theme : this.cfg.theme
196 }),
197 on : {
198 success : this.update_messages_callback
199 },
200 context : this
201 });
202 },
203
204 update_messages_callback : function(tid, outcome) {
205 try {
206 var data = Y.JSON.parse(outcome.responseText);
207 } catch (ex) {
208 return;
209 }
210 if (data.error) {
a8e3b008
DC
211 clearInterval(this.interval);
212 alert(data.error);
213 window.location = this.cfg.home;
579a4976
SH
214 }
215 this.cfg.chat_lasttime = data.lasttime;
216 this.cfg.chat_lastrow = data.lastrow;
217 // Update messages
218 for (var key in data.msgs){
2daed78a 219 if (!M.util.in_array(key, this.messages)) {
579a4976
SH
220 this.messages.push(key);
221 this.append_message(key, data.msgs[key], data.lastrow);
222 }
223 }
224 // Update users
225 this.update_users(data.users);
226 // Scroll to the bottom of the message list
227 if (this.scrollable) {
228 Y.Node.getDOMNode(this.messagebox).parentNode.scrollTop+=500;
229 }
230 this.messageinput.focus();
231 },
232
233 update_users : function(users) {
2daed78a 234 if (!users) {
579a4976
SH
235 return;
236 }
237 var list = Y.one('#users-list');
238 list.get('children').remove();
239 for (var i in users) {
240 var li = Y.Node.create('<li><table><tr><td>'+users[i].picture+'</td><td></td></tr></table></li>');
241 if (users[i].id == this.cfg.userid) {
242 li.all('td').item(1).append(Y.Node.create('<strong><a target="_blank" href="'+users[i].url+'">'+ users[i].name+'</a></strong>'));
243 } else {
244 li.all('td').item(1).append(Y.Node.create('<div><a target="_blank" href="'+users[i].url+'">'+users[i].name+'</a></div>'));
9d3b8b24 245 var talk = Y.Node.create('<a href="###">'+M.str.chat.talk+'</a>');
e8a4928d
DC
246 talk.on('click', this.talkto, this, users[i].name);
247 var beep = Y.Node.create('<a href="###">'+M.str.chat.beep+'</a>');
248 beep.on('click', this.send, this, users[i].id);
9d3b8b24 249 li.all('td').item(1).append(Y.Node.create('<div></div>').append(talk).append('&nbsp;').append(beep));
579a4976
SH
250 }
251 list.append(li);
252 }
253 }
2daed78a
PS
254
255 };
256
257 gui_ajax.init(cfg);
258};