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