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(t, 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() {
 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 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 };
 198
 199
 200
 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");
 211
 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);
 217
 218     return true;
 219 };
 220
 221
 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 };
 229
 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;
 244
 245     for (i = 0; i < length; i++) {
 246         if (selectEl.options[i].selected) {
 247             selectCnt++;
 248             selectIdx = i;
 249         }
 250     }
 251
 252     if (selectCnt == 1 && userSummaries[selectIdx]) {
 253         summaryDiv.innerHTML = userSummaries[selectIdx];
 254     } else {
 255         summaryDiv.innerHTML = '';
 256     }
 257
 258     return true;
 259 }
 260
 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     });
 268
 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     });
 275
 276     addselect = document.getElementById('addselect');
 277     addselect.onchange = updateUserSummary;
 278 }