group/clientlib.js

   1 /**
   2  * Client-side JavaScript for group management interface.
   3  * @author vy-shane AT moodle.com
   4  * @license http://www.gnu.org/copyleft/gpl.html GNU Public License
   5  * @package groups
   6  */
   7
   8
   9 /**
  10  * Class UpdatableGroupsCombo
  11  */
  12 function UpdatableGroupsCombo(wwwRoot, courseId) {
  13     this.wwwRoot = wwwRoot;
  14     this.courseId = courseId;
  15
  16     this.connectCallback = {
  17
  18         success: function(o) {
  19             if (o.responseText !== undefined) {
  20                 var groupsComboEl = document.getElementById("groups");
  21                 var membersComboEl = document.getElementById("members");
  22                 if (membersComboEl) {
  23                     // Clear the members list box.
  24                     while (membersComboEl.firstChild) {
  25                         membersComboEl.removeChild(membersComboEl.firstChild);
  26                     }
  27                 }
  28
  29                 if (groupsComboEl && o.responseText) {
  30                     var groups = eval("("+o.responseText+")");
  31
  32                     // Populate the groups list box.
  33                     for (var i=0; i<groups.length; i++) {
  34                         var optionEl = document.createElement("option");
  35                         optionEl.setAttribute("value", groups[i].id);
  36                         optionEl.title = groups[i].name;
  37                         optionEl.innerHTML = groups[i].name;
  38                         groupsComboEl.appendChild(optionEl);
  39                     }
  40                 }
  41             }
  42             // Remove the loader gif image.
  43             removeLoaderImgs("groupsloader", "groupslabel");
  44         },
  45
  46         failure: function(o) {
  47             removeLoaderImgs("membersloader", "memberslabel");
  48             this.currentTransId = null;
  49         }
  50
  51     };
  52
  53     // Add onchange event to groups list box.
  54     // Okay, this is not working in IE. The onchange is never fired...
  55     // I'm hard coding the onchange in ../index.php. Not ideal, but it works
  56     // then. vyshane AT moodle DOT com.
  57     /*
  58     groupsComboEl = document.getElementById("groups");
  59     if (groupsComboEl) {
  60         groupsComboEl.setAttribute("onchange", "membersCombo.refreshMembers(this.options[this.selectedIndex].value);");
  61     }
  62     */
  63
  64     // Hide the updategroups input since AJAX will take care of this.
  65     YAHOO.util.Dom.setStyle("updategroups", "display", "none");
  66 }
  67
  68
  69 /**
  70  * Class UpdatableMembersCombo
  71  */
  72 function UpdatableMembersCombo(wwwRoot, courseId) {
  73     this.wwwRoot = wwwRoot;
  74     this.courseId = courseId;
  75
  76     this.connectCallback = {
  77         success: function(o) {
  78
  79             if (o.responseText !== undefined) {
  80                 var selectEl = document.getElementById("members");
  81                 if (selectEl && o.responseText) {
  82                     var roles = eval("("+o.responseText+")");
  83
  84                     // Clear the members list box.
  85                     if (selectEl) {
  86                         while (selectEl.firstChild) {
  87                             selectEl.removeChild(selectEl.firstChild);
  88                         }
  89                     }
  90                     // Populate the members list box.
  91                     for (var i=0; i<roles.length; i++) {
  92                         var optgroupEl = document.createElement("optgroup");
  93                         optgroupEl.setAttribute("label",roles[i].name);
  94
  95                         for(var j=0; j<roles[i].users.length; j++) {
  96                             var optionEl = document.createElement("option");
  97                             optionEl.setAttribute("value", roles[i].users[j].id);
  98                             optionEl.title = roles[i].users[j].name;
  99                             optionEl.innerHTML = roles[i].users[j].name;
 100                             optgroupEl.appendChild(optionEl);
 101                         }
 102                         selectEl.appendChild(optgroupEl);
 103                     }
 104                 }
 105             }
 106             // Remove the loader gif image.
 107             removeLoaderImgs("membersloader", "memberslabel");
 108         },
 109
 110         failure: function(o) {
 111             removeLoaderImgs("membersloader", "memberslabel");
 112         }
 113
 114     };
 115
 116     // Hide the updatemembers input since AJAX will take care of this.
 117     YAHOO.util.Dom.setStyle("updatemembers", "display", "none");
 118 }
 119
 120 /**
 121  * When a group is selected, we need to update the members.
 122  * The Add/Remove Users button also needs to be disabled/enabled
 123  * depending on whether or not a group is selected
 124  */
 125 UpdatableMembersCombo.prototype.refreshMembers = function () {
 126
 127     // Get group selector and check selection type
 128     var selectEl = document.getElementById("groups");
 129     var selectionCount=0,groupId=0;
 130     if( selectEl ) {
 131         for (var i = 0; i < selectEl.options.length; i++) {
 132             if(selectEl.options[i].selected) {
 133                 selectionCount++;
 134                 if(!groupId) {
 135                     groupId=selectEl.options[i].value;
 136                 }
 137             }
 138         }
 139     }
 140     var singleSelection=selectionCount == 1;
 141
 142     // Add the loader gif image (we only load for single selections)
 143     if(singleSelection) {
 144         createLoaderImg("membersloader", "memberslabel", this.wwwRoot);
 145     }
 146
 147     // Update the label.
 148     var spanEl = document.getElementById("thegroup");
 149     if (singleSelection) {
 150         spanEl.innerHTML = selectEl.options[selectEl.selectedIndex].title;
 151     } else {
 152         spanEl.innerHTML = '&nbsp;';
 153     }
 154
 155     // Clear the members list box.
 156     selectEl = document.getElementById("members");
 157     if (selectEl) {
 158         while (selectEl.firstChild) {
 159             selectEl.removeChild(selectEl.firstChild);
 160         }
 161     }
 162
 163     document.getElementById("showaddmembersform").disabled = !singleSelection;
 164     document.getElementById("showeditgroupsettingsform").disabled = !singleSelection;
 165     document.getElementById("deletegroup").disabled = selectionCount == 0;
 166
 167     if(singleSelection) {
 168         var sUrl = this.wwwRoot+"/group/index.php?id="+this.courseId+"&group="+groupId+"&act_ajax_getmembersingroup";
 169         YAHOO.util.Connect.asyncRequest("GET", sUrl, this.connectCallback, null);
 170     }
 171 };
 172
 173
 174
 175 var createLoaderImg = function (elClass, parentId, wwwRoot) {
 176     var parentEl = document.getElementById(parentId);
 177     if (!parentEl) {
 178         return false;
 179     }
 180     if (document.getElementById("loaderImg")) {
 181         // A loader image already exists.
 182         return false;
 183     }
 184     var loadingImg = document.createElement("img");
 185
 186     loadingImg.setAttribute("src", M.util.image_url('/i/ajaxloader', 'moodle'));
 187     loadingImg.setAttribute("class", elClass);
 188     loadingImg.setAttribute("alt", "Loading");
 189     loadingImg.setAttribute("id", "loaderImg");
 190     parentEl.appendChild(loadingImg);
 191
 192     return true;
 193 };
 194
 195
 196 var removeLoaderImgs = function (elClass, parentId) {
 197     var parentEl = document.getElementById(parentId);
 198     if (parentEl) {
 199         var loader = document.getElementById("loaderImg");
 200         parentEl.removeChild(loader);
 201     }
 202 };
 203
 204 /**
 205  * Updates the current groups information shown about a user when a user is selected.
 206  *
 207  * @global {Array} userSummaries
 208  *      userSummaries is added to the page via /user/selector/lib.php - group_non_members_selector::print_user_summaries()
 209  *      as a global that can be used by this function.
 210  */
 211 function updateUserSummary() {
 212     var selectEl = document.getElementById('addselect'),
 213         summaryDiv = document.getElementById('group-usersummary'),
 214         length = selectEl.length,
 215         selectCnt = 0,
 216         selectIdx = -1,
 217         i;
 218
 219     for (i = 0; i < length; i++) {
 220         if (selectEl.options[i].selected) {
 221             selectCnt++;
 222             selectIdx = i;
 223         }
 224     }
 225
 226     if (selectCnt == 1 && userSummaries[selectIdx]) {
 227         summaryDiv.innerHTML = userSummaries[selectIdx];
 228     } else {
 229         summaryDiv.innerHTML = '';
 230     }
 231
 232     return true;
 233 }
 234
 235 function init_add_remove_members_page(Y) {
 236     var add = Y.one('#add');
 237     var addselect = M.core_user.get_user_selector('addselect');
 238     add.set('disabled', addselect.is_selection_empty());
 239     addselect.on('user_selector:selectionchanged', function(isempty) {
 240         add.set('disabled', isempty);
 241     });
 242
 243     var remove = Y.one('#remove');
 244     var removeselect = M.core_user.get_user_selector('removeselect');
 245     remove.set('disabled', removeselect.is_selection_empty());
 246     removeselect.on('user_selector:selectionchanged', function(isempty) {
 247         remove.set('disabled', isempty);
 248     });
 249
 250     addselect = document.getElementById('addselect');
 251     addselect.onchange = updateUserSummary;
 252 }