MDL-42434 mod_chat: display the whole help text
[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);
130             // Set the data-placement for the help-icon to display all the content.
131             this.helpicon = Y.one('#button-send + a');
132             this.dataset = this.helpicon.get('dataset');
133             this.dataset.placement = 'top';
134             this.helpicon.set('dataset', this.dataset);
135         },
137         append_message : function(key, message, row) {
138             var item = Y.Node.create('<li id="mdl-chat-entry-' + key + '">' + message.message + '</li>');
139             item.addClass((message.mymessage) ? 'mdl-chat-my-entry' : 'mdl-chat-entry');
140             Y.one('#messages-list').append(item);
141             if (message.type && message.type == 'beep') {
142                 var audioElement = document.createElement('audio');
143                 audioElement.setAttribute('src', '../beep.mp3');
144                 audioElement.play();
145             }
146         },
148         send : function(e, beep) {
149             if((this.messageinput.get('value') != '') || (typeof beep != 'undefined')) {
150                 this.sendbutton.set('value', M.util.get_string('sending', 'chat'));
151                 var data = {
152                     chat_message : (!beep) ? this.messageinput.get('value') : '',
153                     chat_sid : this.cfg.sid,
154                     chat_theme : this.cfg.theme
155                 };
156                 if (beep) {
157                     data.beep = beep
158                 }
159                 data.action = 'chat';
161                 Y.io(this.api, {
162                     method : 'POST',
163                     data : build_querystring(data),
164                     on : {
165                         success : this.send_callback
166                     },
167                     context : this
168                 });
169             }
170         },
172         send_callback : function(tid, outcome, args) {
173             try {
174                 var data = Y.JSON.parse(outcome.responseText);
175             } catch (ex) {
176                 return;
177             }
178             this.sendbutton.set('value', M.util.get_string('send', 'chat'));
179             this.messageinput.set('value', '');
180             clearInterval(this.interval);
181             this.update_messages();
182             var scope = this;
183             this.interval = setInterval(function() {
184                 scope.update_messages();
185             }, this.cfg.timer, this);
186         },
188         talkto: function (e, name) {
189             this.messageinput.set('value', "To " + name + ": ");
190             this.messageinput.focus();
191         },
193         update_messages : function() {
194             this.cfg.req_count++;
195             Y.io(this.api, {
196                 method : 'POST',
197                 data : build_querystring({
198                     action: 'update',
199                     chat_lastrow : this.cfg.chat_lastrow || false,
200                     chat_lasttime : this.cfg.chat_lasttime,
201                     chat_sid : this.cfg.sid,
202                     chat_theme : this.cfg.theme
203                 }),
204                 on : {
205                     success : this.update_messages_callback
206                 },
207                 context : this
208             });
209         },
211         update_messages_callback : function(tid, outcome) {
212             try {
213                 var data = Y.JSON.parse(outcome.responseText);
214             } catch (ex) {
215                 return;
216             }
217             if (data.error) {
218                 clearInterval(this.interval);
219                 alert(data.error);
220                 window.location = this.cfg.home;
221             }
222             this.cfg.chat_lasttime = data.lasttime;
223             this.cfg.chat_lastrow  = data.lastrow;
224             // Update messages.
225             for (var key in data.msgs){
226                 if (!M.util.in_array(key, this.messages)) {
227                     this.messages.push(key);
228                     this.append_message(key, data.msgs[key], data.lastrow);
229                 }
230             }
231             // Update users.
232             this.update_users(data.users);
233             // Scroll to the bottom of the message list
234             if (this.scrollable) {
235                 Y.Node.getDOMNode(this.messagebox).parentNode.scrollTop += 500;
236             }
237             this.messageinput.focus();
238         },
240         update_users : function(users) {
241             if (!users) {
242                 return;
243             }
244             var list = Y.one('#users-list');
245             list.get('children').remove();
246             for (var i in users) {
247                 var li = Y.Node.create('<li><table><tr><td>' + users[i].picture + '</td><td></td></tr></table></li>');
248                 if (users[i].id == this.cfg.userid) {
249                     li.all('td').item(1).append(Y.Node.create('<strong><a target="_blank" href="' + users[i].url + '">' + users[i].name + '</a></strong>'));
250                 } else {
251                     li.all('td').item(1).append(Y.Node.create('<div><a target="_blank" href="' + users[i].url + '">' + users[i].name + '</a></div>'));
252                     var talk = Y.Node.create('<a href="###">' + M.util.get_string('talk', 'chat') + '</a>');
253                     talk.on('click', this.talkto, this, users[i].name);
254                     var beep = Y.Node.create('<a href="###">' + M.util.get_string('beep', 'chat') + '</a>');
255                     beep.on('click', this.send, this, users[i].id);
256                     li.all('td').item(1).append(Y.Node.create('<div></div>').append(talk).append('&nbsp;').append(beep));
257                 }
258                 list.append(li);
259             }
260         }
262     };
264     gui_ajax.init(cfg);
265 };