mod-chat MDL-21534 Converted JS to YUI3 and new coding style also fixed several regre...
[moodle.git] / mod / chat / gui_ajax / module.js
CommitLineData
579a4976
SH
1/**
2 * AJAX Chat Module
3 */
4YUI.add('mod_chat_ajax', function(Y) {
5
6 /**
7 * @namespace M.mod_chat
8 */
9 M.mod_chat = M.mod_chat || {};
10 /**
11 * This is the AJAX chat modules main namespace
12 * @namespace M.mod_chat.ajax
13 */
14 M.mod_chat.ajax = {
15
16 // Properties
17 api : M.cfg.wwwroot+'/mod/chat/chat_ajax.php', // The path to the ajax callback script
18 cfg : {}, // A configuration variable
19 interval : null, // The interval object for refreshes
20 layout : null, // A reference to the layout used in this module
21 messages : [], // An array of messages
22 scrollable : true, // True is scrolling should occur
23 thememenu : null, // A reference to the menu for changing themes
24
25 // Elements
26 messageinput : null,
27 sendbutton : null,
28 messagebox : null,
29
30 init : function(m, cfg) {
31 this.cfg = cfg;
32 this.cfg.req_count = this.cfg.req_count || 0;
33 this.layout = new YAHOO.widget.Layout({
34 units : [
35 {position: 'right', width: 180, resize: true, gutter: '5px', scroll: true, body: 'chat-userlist', animate: false},
36 {position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '5px', collapse: false, resize: false},
37 {position: 'center', body: 'chat-messages', gutter: '5px', scroll: true}
38 ]
39 });
40
41 this.layout.on('render', function() {
42 this.getUnitByPosition('left').on('close', function() {
43 closeLeft();
44 });
45 }, this.layout);
46 this.layout.render();
47
48 // Gather the general elements
49 this.messageinput = Y.one('#input-message');
50 this.sendbutton = Y.one('#button-send');
51 this.messagebox = Y.one('#chat-messages');
52
53 // Attach the default events for this module
54 this.sendbutton.on('click', this.send, this);
55 this.messagebox.on('mouseenter', new function(){this.scrollable = false;}, this);
56 this.messagebox.on('mouseleave', new function(){this.scrollable = true;}, this);
57
58 // Send the message when the enter key is pressed
59 Y.on('key', this.send, this.messageinput, 'press:13', this);
60
61 document.title = this.cfg.chatroom_name;
62
63 // Prepare and execute the first AJAX request of information
64 Y.io(this.api,{
65 method : 'POST',
66 data : build_querystring({
67 action : 'init',
68 chat_init : 1,
69 chat_sid : this.cfg.sid,
70 theme : this.theme
71 }),
72 on : {
73 success : function(tid, outcome) {
74 this.messageinput.focus();
75 this.messageinput.removeAttribute('disabled'),
76 this.messageinput.set('value', '');
77 try {
78 var data = Y.JSON.parse(outcome.responseText);
79 } catch (ex) {
80 return;
81 }
82 this.update_users(data.users);
83 }
84 },
85 context : this
86 });
87
88 this.interval = setInterval(function(me){
89 me.update_messages();
90 }, this.cfg.timer, this);
91
92 // Create and initalise theme changing menu
93 /*
94 this.thememenu = new Y.Overlay({
95 bodyContent : '<div class="menuitem"><a href="'+this.cfg.chaturl+'&theme=bubble">Bubble</a></div><div class="menuitem"><a href="'+this.cfg.chaturl+'&theme=compact">Compact</a></div>',
96 visible : false,
97 zIndex : 2,
98 align : {
99 node : '#choosetheme',
100 points : [Y.WidgetPositionExt.BL, Y.WidgetPositionExt.BR]
101 }
102 });
103 this.thememenu.render(document.body);
104 Y.one('#choosetheme').on('click', function(e){
105 this.show();
106 this.get('boundingBox').setStyle('visibility', 'visible');
107 }, this.thememenu);
108
109 return;
110 */
111 this.thememenu = new YAHOO.widget.Menu('basicmenu', {xy:[0,0]});
112 this.thememenu.addItems([
113 {text: "Bubble", url: this.cfg.chaturl+'&theme=bubble'},
114 {text: "Compact", url: this.cfg.chaturl+'&theme=compact'}
115 ]);
116 this.thememenu.render(document.body);
117 Y.one('#choosetheme').on('click', function(e){
118 this.moveTo((e.pageX-20), (e.pageY-20));
119 this.show();
120 }, this.thememenu);
121 },
122
123 append_message : function(key, message, row) {
124 var item = Y.Node.create('<li id="mdl-chat-entry-'+key+'">'+message.message+'</li>');
125 item.addClass((message.mymessage)?'mdl-chat-my-entry':'mdl-chat-entry');
126 Y.one('#messages-list').append(item);
127 if (message.type && message.type == 'beep') {
128 Y.one('#chat-notify').setContent('<embed src="../beep.wav" autostart="true" hidden="true" name="beep" />');
129 }
130 },
131
132 send : function(e, beep) {
133 this.sendbutton.set('value', M.str.chat.sending);
134
135 var data = {
136 chat_message : (!beep)?this.messageinput.get('value'):'',
137 chat_sid : this.cfg.sid,
138 theme : this.cfg.theme
139 }
140 if (beep) {
141 data.beep = beep
142 }
143
144 Y.io(this.api+'?action=chat', {
145 method : 'POST',
146 data : build_querystring(data),
147 on : {
148 success : this.send_callback
149 },
150 context : this
151 });
152 },
153
154 send_callback : function(tid, outcome, args) {
155 if(outcome.responseText == 200){
156 this.sendbutton.set('value', M.str.chat.send);
157 this.messageinput.set('value', '');
158 }
159 clearInterval(this.interval);
160 this.update_messages();
161 this.interval = setInterval(function(me){
162 me.update_messages();
163 }, this.cfg.timer, this);
164 },
165
166 talkto : function (name) {
167 this.messageinput.set('value', "To "+name+": ");
168 this.messageinput.focus();
169 },
170
171 update_messages : function() {
172 this.cfg.req_count++;
173 Y.io(this.api+'?action=update', {
174 method : 'POST',
175 data : build_querystring({
176 chat_lastrow : this.cfg.chat_lastrow || false,
177 chat_lasttime : this.cfg.chat_lasttime,
178 chat_sid : this.cfg.sid,
179 theme : this.cfg.theme
180 }),
181 on : {
182 success : this.update_messages_callback
183 },
184 context : this
185 });
186 },
187
188 update_messages_callback : function(tid, outcome) {
189 try {
190 var data = Y.JSON.parse(outcome.responseText);
191 } catch (ex) {
192 return;
193 }
194 if (data.error) {
195 if (data.error.level == 'ERROR'){
196 clearInterval(this.interval);
197 window.location = this.cfg.home;
198 }
199 }
200 this.cfg.chat_lasttime = data.lasttime;
201 this.cfg.chat_lastrow = data.lastrow;
202 // Update messages
203 for (var key in data.msgs){
204 if(!M.util.in_array(key, this.messages)){
205 this.messages.push(key);
206 this.append_message(key, data.msgs[key], data.lastrow);
207 }
208 }
209 // Update users
210 this.update_users(data.users);
211 // Scroll to the bottom of the message list
212 if (this.scrollable) {
213 Y.Node.getDOMNode(this.messagebox).parentNode.scrollTop+=500;
214 }
215 this.messageinput.focus();
216 },
217
218 update_users : function(users) {
219 if(!users){
220 return;
221 }
222 var list = Y.one('#users-list');
223 list.get('children').remove();
224 for (var i in users) {
225 var li = Y.Node.create('<li><table><tr><td>'+users[i].picture+'</td><td></td></tr></table></li>');
226 if (users[i].id == this.cfg.userid) {
227 li.all('td').item(1).append(Y.Node.create('<strong><a target="_blank" href="'+users[i].url+'">'+ users[i].name+'</a></strong>'));
228 } else {
229 li.all('td').item(1).append(Y.Node.create('<div><a target="_blank" href="'+users[i].url+'">'+users[i].name+'</a></div>'));
230 var talk = Y.Node.create('<a href="###">'+M.str.chat.talk+'</a>').on('click', this.talkto, this, users[i].name);
231 var beep = Y.Node.create('<a href="###">'+M.str.chat.beep+'</a>').on('click', this.send, this, users[i].id);
232 li.all('td').item(1).append(Y.Node.create('<div></div>').append(talk).append(beep));
233 }
234 list.append(li);
235 }
236 }
237
238 }
239
240}, '2.0.0', {requires:['base', 'dom', 'event', 'event-mouseenter', 'event-key', 'json-parse', 'io', 'overlay', 'yui2-resize', 'yui2-layout']});