MDL-41030 JavaScript: Convert remaining YUI2 IO calls to YUI3
[moodle.git] / group / clientlib.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * Client-side JavaScript for group management interface.
18  * @copyright vy-shane AT moodle.com
19  * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
20  * @package core_group
21  */
24 /**
25  * Class UpdatableGroupsCombo
26  */
27 function UpdatableGroupsCombo(wwwRoot, courseId) {
28     this.wwwRoot = wwwRoot;
29     this.courseId = courseId;
31     this.connectCallback = {
33         success: function(o) {
34             if (o.responseText !== undefined) {
35                 var groupsComboEl = document.getElementById("groups");
36                 var membersComboEl = document.getElementById("members");
37                 if (membersComboEl) {
38                     // Clear the members list box.
39                     while (membersComboEl.firstChild) {
40                         membersComboEl.removeChild(membersComboEl.firstChild);
41                     }
42                 }
44                 if (groupsComboEl && o.responseText) {
45                     var groups = eval("("+o.responseText+")");
47                     // Populate the groups list box.
48                     for (var i=0; i<groups.length; i++) {
49                         var optionEl = document.createElement("option");
50                         optionEl.setAttribute("value", groups[i].id);
51                         optionEl.title = groups[i].name;
52                         optionEl.innerHTML = groups[i].name;
53                         groupsComboEl.appendChild(optionEl);
54                     }
55                 }
56             }
57             // Remove the loader gif image.
58             removeLoaderImgs("groupsloader", "groupslabel");
59         },
61         failure: function(o) {
62             removeLoaderImgs("membersloader", "memberslabel");
63             this.currentTransId = null;
64         }
66     };
68     // Add onchange event to groups list box.
69     // Okay, this is not working in IE. The onchange is never fired...
70     // I'm hard coding the onchange in ../index.php. Not ideal, but it works
71     // then. vyshane AT moodle DOT com.
72     /*
73     groupsComboEl = document.getElementById("groups");
74     if (groupsComboEl) {
75         groupsComboEl.setAttribute("onchange", "membersCombo.refreshMembers(this.options[this.selectedIndex].value);");
76     }
77     */
79     // Hide the updategroups input since AJAX will take care of this.
80     YUI().use('yui2-dom', function (Y) {
81         Y.YUI2.util.Dom.setStyle("updategroups", "display", "none");
82     });
83 }
86 /**
87  * Class UpdatableMembersCombo
88  */
89 function UpdatableMembersCombo(wwwRoot, courseId) {
90     this.wwwRoot = wwwRoot;
91     this.courseId = courseId;
93     this.connectCallback = {
94         success: function(t, o) {
96             if (o.responseText !== undefined) {
97                 var selectEl = document.getElementById("members");
98                 if (selectEl && o.responseText) {
99                     var roles = eval("("+o.responseText+")");
101                     // Clear the members list box.
102                     if (selectEl) {
103                         while (selectEl.firstChild) {
104                             selectEl.removeChild(selectEl.firstChild);
105                         }
106                     }
107                     // Populate the members list box.
108                     for (var i=0; i<roles.length; i++) {
109                         var optgroupEl = document.createElement("optgroup");
110                         optgroupEl.setAttribute("label",roles[i].name);
112                         for(var j=0; j<roles[i].users.length; j++) {
113                             var optionEl = document.createElement("option");
114                             optionEl.setAttribute("value", roles[i].users[j].id);
115                             optionEl.title = roles[i].users[j].name;
116                             optionEl.innerHTML = roles[i].users[j].name;
117                             optgroupEl.appendChild(optionEl);
118                         }
119                         selectEl.appendChild(optgroupEl);
120                     }
121                 }
122             }
123             // Remove the loader gif image.
124             removeLoaderImgs("membersloader", "memberslabel");
125         },
127         failure: function() {
128             removeLoaderImgs("membersloader", "memberslabel");
129         }
131     };
133     // Hide the updatemembers input since AJAX will take care of this.
134     YUI().use('yui2-dom', function (Y) {
135         Y.YUI2.util.Dom.setStyle("updatemembers", "display", "none");
136     });
139 /**
140  * When a group is selected, we need to update the members.
141  * The Add/Remove Users button also needs to be disabled/enabled
142  * depending on whether or not a group is selected
143  */
144 UpdatableMembersCombo.prototype.refreshMembers = function () {
146     // Get group selector and check selection type
147     var selectEl = document.getElementById("groups");
148     var selectionCount=0,groupId=0;
149     if( selectEl ) {
150         for (var i = 0; i < selectEl.options.length; i++) {
151             if(selectEl.options[i].selected) {
152                 selectionCount++;
153                 if(!groupId) {
154                     groupId=selectEl.options[i].value;
155                 }
156             }
157         }
158     }
159     var singleSelection=selectionCount == 1;
161     // Add the loader gif image (we only load for single selections)
162     if(singleSelection) {
163         createLoaderImg("membersloader", "memberslabel", this.wwwRoot);
164     }
166     // Update the label.
167     var spanEl = document.getElementById("thegroup");
168     if (singleSelection) {
169         spanEl.innerHTML = selectEl.options[selectEl.selectedIndex].title;
170     } else {
171         spanEl.innerHTML = '&nbsp;';
172     }
174     // Clear the members list box.
175     selectEl = document.getElementById("members");
176     if (selectEl) {
177         while (selectEl.firstChild) {
178             selectEl.removeChild(selectEl.firstChild);
179         }
180     }
182     document.getElementById("showaddmembersform").disabled = !singleSelection;
183     document.getElementById("showeditgroupsettingsform").disabled = !singleSelection;
184     document.getElementById("deletegroup").disabled = selectionCount == 0;
186     if(singleSelection) {
187         var sUrl = this.wwwRoot+"/group/index.php?id="+this.courseId+"&group="+groupId+"&act_ajax_getmembersingroup";
188         var self = this;
189         YUI().use('io', function (Y) {
190             Y.io(sUrl, {
191                 method: 'GET',
192                 context: this,
193                 on: self.connectCallback
194             });
195         });
196     }
197 };
201 var createLoaderImg = function (elClass, parentId, wwwRoot) {
202     var parentEl = document.getElementById(parentId);
203     if (!parentEl) {
204         return false;
205     }
206     if (document.getElementById("loaderImg")) {
207         // A loader image already exists.
208         return false;
209     }
210     var loadingImg = document.createElement("img");
212     loadingImg.setAttribute("src", M.util.image_url('/i/ajaxloader', 'moodle'));
213     loadingImg.setAttribute("class", elClass);
214     loadingImg.setAttribute("alt", "Loading");
215     loadingImg.setAttribute("id", "loaderImg");
216     parentEl.appendChild(loadingImg);
218     return true;
219 };
222 var removeLoaderImgs = function (elClass, parentId) {
223     var parentEl = document.getElementById(parentId);
224     if (parentEl) {
225         var loader = document.getElementById("loaderImg");
226         parentEl.removeChild(loader);
227     }
228 };
230 /**
231  * Updates the current groups information shown about a user when a user is selected.
232  *
233  * @global {Array} userSummaries
234  *      userSummaries is added to the page via /user/selector/lib.php - group_non_members_selector::print_user_summaries()
235  *      as a global that can be used by this function.
236  */
237 function updateUserSummary() {
238     var selectEl = document.getElementById('addselect'),
239         summaryDiv = document.getElementById('group-usersummary'),
240         length = selectEl.length,
241         selectCnt = 0,
242         selectIdx = -1,
243         i;
245     for (i = 0; i < length; i++) {
246         if (selectEl.options[i].selected) {
247             selectCnt++;
248             selectIdx = i;
249         }
250     }
252     if (selectCnt == 1 && userSummaries[selectIdx]) {
253         summaryDiv.innerHTML = userSummaries[selectIdx];
254     } else {
255         summaryDiv.innerHTML = '';
256     }
258     return true;
261 function init_add_remove_members_page(Y) {
262     var add = Y.one('#add');
263     var addselect = M.core_user.get_user_selector('addselect');
264     add.set('disabled', addselect.is_selection_empty());
265     addselect.on('user_selector:selectionchanged', function(isempty) {
266         add.set('disabled', isempty);
267     });
269     var remove = Y.one('#remove');
270     var removeselect = M.core_user.get_user_selector('removeselect');
271     remove.set('disabled', removeselect.is_selection_empty());
272     removeselect.on('user_selector:selectionchanged', function(isempty) {
273         remove.set('disabled', isempty);
274     });
276     addselect = document.getElementById('addselect');
277     addselect.onchange = updateUserSummary;