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/>.
  15
  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  */
  22
  23
  24 /**
  25  * Class UpdatableGroupsCombo
  26  */
  27 function UpdatableGroupsCombo(wwwRoot, courseId) {
  28     this.wwwRoot = wwwRoot;
  29     this.courseId = courseId;
  30
  31     this.connectCallback = {
  32
  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                 }
  43
  44                 if (groupsComboEl && o.responseText) {
  45                     var groups = eval("("+o.responseText+")");
  46
  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         },
  60
  61         failure: function(o) {
  62             removeLoaderImgs("membersloader", "memberslabel");
  63             this.currentTransId = null;
  64         }
  65
  66     };
  67
  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     */
  78
  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 }
  84
  85
  86 /**
  87  * Class UpdatableMembersCombo
  88  */
  89 function UpdatableMembersCombo(wwwRoot, courseId) {
  90     this.wwwRoot = wwwRoot;
  91     this.courseId = courseId;
  92
  93     this.connectCallback = {
  94         success: function(o) {
  95
  96             if (o.responseText !== undefined) {
  97                 var selectEl = document.getElementById("members");
  98                 if (selectEl && o.responseText) {
  99                     var roles = eval("("+o.responseText+")");
 100
 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);
 111
 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         },
 126
 127         failure: function(o) {
 128             removeLoaderImgs("membersloader", "memberslabel");
 129         }
 130
 131     };
 132
 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     });
 137 }
 138
 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 () {
 145
 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;
 160
 161     // Add the loader gif image (we only load for single selections)
 162     if(singleSelection) {
 163         createLoaderImg("membersloader", "memberslabel", this.wwwRoot);
 164     }
 165
 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     }
 173
 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     }
 181
 182     document.getElementById("showaddmembersform").disabled = !singleSelection;
 183     document.getElementById("showeditgroupsettingsform").disabled = !singleSelection;
 184     document.getElementById("deletegroup").disabled = selectionCount == 0;
 185
 186     if(singleSelection) {
 187         var sUrl = this.wwwRoot+"/group/index.php?id="+this.courseId+"&group="+groupId+"&act_ajax_getmembersingroup";
 188         var callback = this.connectCallback;
 189         YUI().use('yui2-connection', function (Y) {
 190             Y.YUI2.util.Connect.asyncRequest("GET", sUrl, callback, null);
 191         });
 192     }
 193 };
 194
 195
 196
 197 var createLoaderImg = function (elClass, parentId, wwwRoot) {
 198     var parentEl = document.getElementById(parentId);
 199     if (!parentEl) {
 200         return false;
 201     }
 202     if (document.getElementById("loaderImg")) {
 203         // A loader image already exists.
 204         return false;
 205     }
 206     var loadingImg = document.createElement("img");
 207
 208     loadingImg.setAttribute("src", M.util.image_url('/i/ajaxloader', 'moodle'));
 209     loadingImg.setAttribute("class", elClass);
 210     loadingImg.setAttribute("alt", "Loading");
 211     loadingImg.setAttribute("id", "loaderImg");
 212     parentEl.appendChild(loadingImg);
 213
 214     return true;
 215 };
 216
 217
 218 var removeLoaderImgs = function (elClass, parentId) {
 219     var parentEl = document.getElementById(parentId);
 220     if (parentEl) {
 221         var loader = document.getElementById("loaderImg");
 222         parentEl.removeChild(loader);
 223     }
 224 };
 225
 226 /**
 227  * Updates the current groups information shown about a user when a user is selected.
 228  *
 229  * @global {Array} userSummaries
 230  *      userSummaries is added to the page via /user/selector/lib.php - group_non_members_selector::print_user_summaries()
 231  *      as a global that can be used by this function.
 232  */
 233 function updateUserSummary() {
 234     var selectEl = document.getElementById('addselect'),
 235         summaryDiv = document.getElementById('group-usersummary'),
 236         length = selectEl.length,
 237         selectCnt = 0,
 238         selectIdx = -1,
 239         i;
 240
 241     for (i = 0; i < length; i++) {
 242         if (selectEl.options[i].selected) {
 243             selectCnt++;
 244             selectIdx = i;
 245         }
 246     }
 247
 248     if (selectCnt == 1 && userSummaries[selectIdx]) {
 249         summaryDiv.innerHTML = userSummaries[selectIdx];
 250     } else {
 251         summaryDiv.innerHTML = '';
 252     }
 253
 254     return true;
 255 }
 256
 257 function init_add_remove_members_page(Y) {
 258     var add = Y.one('#add');
 259     var addselect = M.core_user.get_user_selector('addselect');
 260     add.set('disabled', addselect.is_selection_empty());
 261     addselect.on('user_selector:selectionchanged', function(isempty) {
 262         add.set('disabled', isempty);
 263     });
 264
 265     var remove = Y.one('#remove');
 266     var removeselect = M.core_user.get_user_selector('removeselect');
 267     remove.set('disabled', removeselect.is_selection_empty());
 268     removeselect.on('user_selector:selectionchanged', function(isempty) {
 269         remove.set('disabled', isempty);
 270     });
 271
 272     addselect = document.getElementById('addselect');
 273     addselect.onchange = updateUserSummary;
 274 }