MDL-66845 mod_forum: Convert user picker to class

Part of MDL-66074

mod/forum/amd/build/local/grades/grader.min.js

@@ -1,2 +1,2 @@
-define ("mod_forum/local/grades/grader",["exports","core/templates","./local/grader/selectors","./local/grader/user_picker","mod_forum/local/layout/fullscreen","./local/grader/gradingpanel","core/toast","core/str"],function(a,b,c,d,e,f,g,h){"use strict";Object.defineProperty(a,"__esModule",{value:!0});Object.defineProperty(a,"getGradingPanelFunctions",{enumerable:!0,get:function get(){return f.default}});a.launch=void 0;b=i(b);c=i(c);d=function(a){if(a&&a.__esModule){return a}else{var b={};if(null!=a){for(var c in a){if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};if(d.get||d.set){Object.defineProperty(b,c,d)}else{b[c]=a[c]}}}}b.default=a;return b}}(d);f=i(f);function i(a){return a&&a.__esModule?a:{default:a}}function j(a,b){return m(a)||l(a,b)||k()}function k(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function l(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function m(a){if(Array.isArray(a))return a}function n(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function o(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){n(h,d,e,f,g,"next",a)}function g(a){n(h,d,e,f,g,"throw",a)}f(void 0)})}}var p={grader:{app:"mod_forum/local/grades/grader"}},q=function(a,d){var e=a.querySelector(c.default.regions.pickerRegion);b.default.replaceNodeContents(e,d,"")},r=function(a,b){return[a,b]},s=function(a,d,e){return function(){var f=o(regeneratorRuntime.mark(function f(g){var h,i,k,l,m,n,o,p,q,s;return regeneratorRuntime.wrap(function(f){while(1){switch(f.prev=f.next){case 0:f.next=2;return Promise.all([d(g.id).then(r),e(g.id)]);case 2:h=f.sent;i=j(h,2);k=j(i[0],2);l=k[0];m=k[1];n=i[1];b.default.replaceNodeContents(a.querySelector(c.default.regions.moduleReplace),l,m);f.next=11;return b.default.render(n.templatename,n.grade).then(r);case 11:o=f.sent;p=j(o,2);q=p[0];s=p[1];b.default.replaceNodeContents(a.querySelector(c.default.regions.gradingPanel),q,s);case 16:case"end":return f.stop();}}},f)}));return function(){return f.apply(this,arguments)}}()},t=function(a){var b=a.getContainer();b.addEventListener("click",function(b){if(b.target.closest(c.default.buttons.toggleFullscreen)){b.stopImmediatePropagation();b.preventDefault();a.toggleFullscreen()}else if(b.target.closest(c.default.buttons.closeGrader)){b.stopImmediatePropagation();b.preventDefault();a.close()}})},u=function(a,b){return function(){var d=o(regeneratorRuntime.mark(function d(e){var f;return regeneratorRuntime.wrap(function(d){while(1){switch(d.prev=d.next){case 0:d.prev=0;d.next=3;return b(e.id,a.querySelector(c.default.regions.gradingPanel));case 3:f=d.sent;d.t0=g.add;d.next=7;return(0,h.get_string)("grades:gradesavedfor","mod_forum",e);case 7:d.t1=d.sent;(0,d.t0)(d.t1);return d.abrupt("return",f);case 12:d.prev=12;d.t2=d["catch"](0);throw d.t2;case 15:case"end":return d.stop();}}},d,null,[[0,12]])}));return function(){return d.apply(this,arguments)}}()},v=function(){var a=o(regeneratorRuntime.mark(function a(c,f,g,h){var i,k,l,m,n,o,r,v,w,x,y,z,A=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:i=4<A.length&&A[4]!==void 0?A[4]:{},k=i.initialUserId,l=void 0===k?0:k,m=i.moduleName;a.next=3;return Promise.all([(0,e.createLayout)({fullscreen:!1,showLoader:!1}),b.default.render(p.grader.app,{moduleName:m}),c()]);case 3:n=a.sent;o=j(n,3);r=o[0];v=o[1];w=o[2];x=r.getContainer();b.default.replaceNodeContents(x,v,"");t(r);y=s(x,f,g);a.next=14;return d.buildPicker(w,l,y,u(x,h));case 14:z=a.sent;q(x,z);case 16:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.launch=v});
+define ("mod_forum/local/grades/grader",["exports","core/templates","./local/grader/selectors","./local/grader/user_picker","mod_forum/local/layout/fullscreen","./local/grader/gradingpanel","core/toast","core/str"],function(a,b,c,d,e,f,g,h){"use strict";Object.defineProperty(a,"__esModule",{value:!0});Object.defineProperty(a,"getGradingPanelFunctions",{enumerable:!0,get:function get(){return f.default}});a.launch=void 0;b=i(b);c=i(c);d=i(d);f=i(f);function i(a){return a&&a.__esModule?a:{default:a}}function j(a,b){return m(a)||l(a,b)||k()}function k(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function l(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function m(a){if(Array.isArray(a))return a}function n(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function o(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){n(h,d,e,f,g,"next",a)}function g(a){n(h,d,e,f,g,"throw",a)}f(void 0)})}}var p={grader:{app:"mod_forum/local/grades/grader"}},q=function(a,d){var e=a.querySelector(c.default.regions.pickerRegion);b.default.replaceNodeContents(e,d,"")},r=function(a,b){return[a,b]},s=function(a,d,e){return function(){var f=o(regeneratorRuntime.mark(function f(g){var h,i,k,l,m,n,o,p,q,s;return regeneratorRuntime.wrap(function(f){while(1){switch(f.prev=f.next){case 0:f.next=2;return Promise.all([d(g.id).then(r),e(g.id)]);case 2:h=f.sent;i=j(h,2);k=j(i[0],2);l=k[0];m=k[1];n=i[1];b.default.replaceNodeContents(a.querySelector(c.default.regions.moduleReplace),l,m);f.next=11;return b.default.render(n.templatename,n.grade).then(r);case 11:o=f.sent;p=j(o,2);q=p[0];s=p[1];b.default.replaceNodeContents(a.querySelector(c.default.regions.gradingPanel),q,s);case 16:case"end":return f.stop();}}},f)}));return function(){return f.apply(this,arguments)}}()},t=function(a){var b=a.getContainer();b.addEventListener("click",function(b){if(b.target.closest(c.default.buttons.toggleFullscreen)){b.stopImmediatePropagation();b.preventDefault();a.toggleFullscreen()}else if(b.target.closest(c.default.buttons.closeGrader)){b.stopImmediatePropagation();b.preventDefault();a.close()}})},u=function(a,b){return function(){var d=o(regeneratorRuntime.mark(function d(e){var f;return regeneratorRuntime.wrap(function(d){while(1){switch(d.prev=d.next){case 0:d.prev=0;d.next=3;return b(e.id,a.querySelector(c.default.regions.gradingPanel));case 3:f=d.sent;d.t0=g.add;d.next=7;return(0,h.get_string)("grades:gradesavedfor","mod_forum",e);case 7:d.t1=d.sent;(0,d.t0)(d.t1);return d.abrupt("return",f);case 12:d.prev=12;d.t2=d["catch"](0);throw d.t2;case 15:case"end":return d.stop();}}},d,null,[[0,12]])}));return function(){return d.apply(this,arguments)}}()},v=function(){var a=o(regeneratorRuntime.mark(function a(c,f,g,h){var i,k,l,m,n,o,r,v,w,x,y,z,A,B=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:i=4<B.length&&B[4]!==void 0?B[4]:{},k=i.initialUserId,l=void 0===k?0:k,m=i.moduleName;a.next=3;return Promise.all([(0,e.createLayout)({fullscreen:!1,showLoader:!1}),b.default.render(p.grader.app,{moduleName:m}),c()]);case 3:n=a.sent;o=j(n,3);r=o[0];v=o[1];w=o[2];x=r.getContainer();y=u(x,h);b.default.replaceNodeContents(x,v,"");t(r);z=s(x,f,g);a.next=15;return(0,d.default)(w,l,z,y);case 15:A=a.sent;q(x,A.rootNode);case 17:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.launch=v});
 //# sourceMappingURL=grader.min.js.map

mod/forum/amd/build/local/grades/local/grader/user_picker.min.js

@@ -1,2 +1,2 @@
-define ("mod_forum/local/grades/local/grader/user_picker",["exports","core/templates","./user_picker/selectors"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.buildPicker=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){return h(a)||g(a,b)||f()}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function g(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function h(a){if(Array.isArray(a))return a}function i(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);if("function"==typeof Object.getOwnPropertySymbols){d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))}d.forEach(function(b){j(a,b,c[b])})}return a}function j(a,b,c){if(b in a){Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0})}else{a[b]=c}return a}function k(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function l(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){k(h,d,e,f,g,"next",a)}function g(a){k(h,d,e,f,g,"throw",a)}f(void 0)})}}var m=function(){return b.default.render("mod_forum/local/grades/local/grader/user_picker",{})},n=function(a){return b.default.render("mod_forum/local/grades/local/grader/user_picker/user",a)},o=function(){var a=l(regeneratorRuntime.mark(function a(d,f,g,h){var j,k,l,m,o;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:j=i({},f[g],{total:f.length,displayIndex:g+1});a.next=3;return Promise.all([n(j),h(j)]);case 3:k=a.sent;l=e(k,1);m=l[0];o=d.querySelector(c.default.regions.userRegion);b.default.replaceNodeContents(o,m,"");case 8:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),p=function(a,b,d,e,f){a.addEventListener("click",function(g){var h=g.target.closest(c.default.actions.changeUser);if(h){f(b[d]);d+=parseInt(h.dataset.direction);o(a,b,d,e)}})},q=function(){var a=l(regeneratorRuntime.mark(function a(c,d,f,g){var h,i,j,k,l;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:h=document.createElement("div");a.next=3;return Promise.all([m()]);case 3:i=a.sent;j=e(i,1);k=j[0];b.default.replaceNodeContents(h,k,"");l=c.findIndex(function(a){return a.id===parseInt(d)});a.next=10;return o(h,c,l,f);case 10:p(h,c,l,f,g);return a.abrupt("return",h);case 12:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.buildPicker=q});
+define ("mod_forum/local/grades/local/grader/user_picker",["exports","core/templates","./user_picker/selectors"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}function e(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);if("function"==typeof Object.getOwnPropertySymbols){d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))}d.forEach(function(b){f(a,b,c[b])})}return a}function f(a,b,c){if(b in a){Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0})}else{a[b]=c}return a}function g(a,b){return k(a)||j(a,b)||h()}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function j(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function k(a){if(Array.isArray(a))return a}function l(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function m(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){l(h,d,e,f,g,"next",a)}function g(a){l(h,d,e,f,g,"throw",a)}f(void 0)})}}function n(a,b){if(!(a instanceof b)){throw new TypeError("Cannot call a class as a function")}}function o(a,b){for(var c=0,d;c<b.length;c++){d=b[c];d.enumerable=d.enumerable||!1;d.configurable=!0;if("value"in d)d.writable=!0;Object.defineProperty(a,d.key,d)}}function p(a,b,c){if(b)o(a.prototype,b);if(c)o(a,c);return a}var q=function(){function a(b,c,d,e){var f=4<arguments.length&&arguments[4]!==void 0?arguments[4]:!0;n(this,a);this.userList=b;this.showUserCallback=d;this.preChangeUserCallback=e;this.currentUserIndex=b.findIndex(function(a){return a.id===parseInt(c)});this.render=this.render.bind(this);if(f){this.render()}}p(a,[{key:"render",value:function(){var a=m(regeneratorRuntime.mark(function a(){var c,d,e;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:this.root=document.createElement("div");a.next=3;return this.renderNavigator();case 3:c=a.sent;d=c.html;e=c.js;b.default.replaceNodeContents(this.root,d,e);a.next=9;return this.showUser(this.currentUser);case 9:this.registerEventListeners();case 10:case"end":return a.stop();}}},a,this)}));return function render(){return a.apply(this,arguments)}}()},{key:"renderNavigator",value:function renderNavigator(){return b.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker"),{})}},{key:"renderUserChange",value:function renderUserChange(a){return b.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker/user"),a)}},{key:"showUser",value:function(){var a=m(regeneratorRuntime.mark(function a(d){var e,f,h,i,j,k;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return Promise.all([this.renderUserChange(d),this.showUserCallback(d)]);case 2:e=a.sent;f=g(e,1);h=f[0];i=h.html;j=h.js;k=this.root.querySelector(c.default.regions.userRegion);b.default.replaceNodeContents(k,i,j);case 9:case"end":return a.stop();}}},a,this)}));return function showUser(){return a.apply(this,arguments)}}()},{key:"registerEventListeners",value:function registerEventListeners(){var a=this;this.root.addEventListener("click",function(b){var d=b.target.closest(c.default.actions.changeUser);if(d){a.preChangeUserCallback(a.currentUser);a.updateIndex(parseInt(d.dataset.direction));a.showUser(a.currentUser)}})}},{key:"updateIndex",value:function updateIndex(a){this.currentUserIndex+=a;if(0>this.currentUserIndex){this.currentUserIndex=this.userList.length-1}else if(this.currentUserIndex>this.userList.length-1){this.currentUserIndex=0}return this.currentUserIndex}},{key:"currentUser",get:function get(){return e({},this.userList[this.currentUserIndex],{total:this.userList.length,displayIndex:this.currentUserIndex+1})}},{key:"rootNode",get:function get(){return this.root}}]);return a}(),r=function(){var a=m(regeneratorRuntime.mark(function a(b,c,d,e){var f;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=new q(b,c,d,e,!1);a.next=3;return f.render();case 3:return a.abrupt("return",f);case 4:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.default=r;return a.default});
 //# sourceMappingURL=user_picker.min.js.map

mod/forum/amd/src/local/grades/grader.js

@@ -24,7 +24,7 @@
 import Templates from 'core/templates';
 // TODO import Notification from 'core/notification';
 import Selectors from './local/grader/selectors';
-import * as UserPicker from './local/grader/user_picker';
+import getUserPicker from './local/grader/user_picker';
 import {createLayout as createFullScreenWindow} from 'mod_forum/local/layout/fullscreen';
 import getGradingPanelFunctions from './local/grader/gradingpanel';
 import {add as addToast} from 'core/toast';
@@ -116,18 +116,22 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
     ]);
     const graderContainer = graderLayout.getContainer();
 
+    const saveGradeFunction = getSaveUserGradeFunction(graderContainer, setGradeForUser);
+
     Templates.replaceNodeContents(graderContainer, graderHTML, '');
     registerEventListeners(graderLayout);
     const updateUserContent = getUpdateUserContentFunction(graderContainer, getContentForUser, getGradeForUser);
 
-    const pickerHTML = await UserPicker.buildPicker(
+    // Fetch the userpicker for display.
+    const userPicker = await getUserPicker(
         userList,
         initialUserId,
         updateUserContent,
-        getSaveUserGradeFunction(graderContainer, setGradeForUser)
+        saveGradeFunction
     );
 
-    displayUserPicker(graderContainer, pickerHTML);
+    // Display the newly created user picker.
+    displayUserPicker(graderContainer, userPicker.rootNode);
 };
 
 export {getGradingPanelFunctions};

mod/forum/amd/src/local/grades/local/grader/user_picker.js

@@ -25,49 +25,153 @@
 import Templates from 'core/templates';
 import Selectors from './user_picker/selectors';
 
-const renderNavigator = () => {
+const templatePath = 'mod_forum/local/grades/local/grader';
-    return Templates.render('mod_forum/local/grades/local/grader/user_picker', {});
-};
 
-const renderUserChange = (context) => {
+class UserPicker {
-    return Templates.render('mod_forum/local/grades/local/grader/user_picker/user', context);
-};
 
-const showUser = async(root, users, currentUserIndex, showUserCallback) => {
+    /**
-    const user = {
+     * Constructor for the User Picker.
-        ...users[currentUserIndex],
+     *
-        total: users.length,
+     * @param {Array} userList List of users
-        displayIndex: currentUserIndex + 1,
+     * @param {Number} initialUserId The ID of the initial user to display
-    };
+     * @param {Function} showUserCallback The callback used to display the user
-    const [html] = await Promise.all([renderUserChange(user), showUserCallback(user)]);
+     * @param {Function} preChangeUserCallback The callback to use before changing user
-    const userRegion = root.querySelector(Selectors.regions.userRegion);
+     * @param {Bool} render Whether to render on instantiation
-    Templates.replaceNodeContents(userRegion, html, '');
+     */
-};
+    constructor(userList, initialUserId, showUserCallback, preChangeUserCallback, render = true) {
+        this.userList = userList;
+        this.showUserCallback = showUserCallback;
+        this.preChangeUserCallback = preChangeUserCallback;
 
-const bindEvents = (root, users, currentUserIndex, showUserCallback, saveUserCallback) => {
+        // Determine the current index.
-    root.addEventListener('click', (e) => {
+        this.currentUserIndex = userList.findIndex(user => {
-        const button = e.target.closest(Selectors.actions.changeUser);
+            return user.id === parseInt(initialUserId);
-        if (button) {
+        });
-            saveUserCallback(users[currentUserIndex]);
+
-            currentUserIndex += parseInt(button.dataset.direction);
+        // Ensure that render is bound correctly.
-            showUser(root, users, currentUserIndex, showUserCallback);
+        this.render = this.render.bind(this);
+
+        if (render) {
+            this.render();
         }
-    });
+    }
-};
+
-
+    /**
-export const buildPicker = async(users, currentUserID, showUserCallback, saveUserCallback) => {
+     * Render the user picker.
-    let root = document.createElement('div');
+     */
-
+    async render() {
-    const [html] = await Promise.all([renderNavigator()]);
+        // Create the root node.
-    Templates.replaceNodeContents(root, html, '');
+        this.root = document.createElement('div');
-
+
-    const currentUserIndex = users.findIndex((user) => {
+        const {html, js} = await this.renderNavigator();
-        return user.id === parseInt(currentUserID);
+        Templates.replaceNodeContents(this.root, html, js);
-    });
+
-
+        // Call the showUser function to show the first user immediately.
-    await showUser(root, users, currentUserIndex, showUserCallback);
+        await this.showUser(this.currentUser);
-
+
-    bindEvents(root, users, currentUserIndex, showUserCallback, saveUserCallback);
+        // Ensure that the event listeners are all bound.
-
+        this.registerEventListeners();
-    return root;
+    }
+
+    /**
+     * Render the navigator itself.
+     *
+     * @returns {Promise}
+     */
+    renderNavigator() {
+        return Templates.renderForPromise(`${templatePath}/user_picker`, {});
+    }
+
+    /**
+     * Render the current user details for the picker.
+     *
+     * @param {Object} context The data used to render the user picker.
+     * @returns {Promise}
+     */
+    renderUserChange(context) {
+        return Templates.renderForPromise(`${templatePath}/user_picker/user`, context);
+    }
+
+    /**
+     * Show the specified user in the picker.
+     *
+     * @param {Object} user
+     */
+    async showUser(user) {
+        const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);
+        const userRegion = this.root.querySelector(Selectors.regions.userRegion);
+        Templates.replaceNodeContents(userRegion, html, js);
+    }
+
+    /**
+     * Register the event listeners for the user picker.
+     */
+    registerEventListeners() {
+        this.root.addEventListener('click', (e) => {
+            const button = e.target.closest(Selectors.actions.changeUser);
+            if (button) {
+                this.preChangeUserCallback(this.currentUser);
+                this.updateIndex(parseInt(button.dataset.direction));
+                this.showUser(this.currentUser);
+            }
+        });
+    }
+
+    /**
+     * Update the current user index.
+     *
+     * @param {Number} direction
+     * @returns {Number}}
+     */
+    updateIndex(direction) {
+        this.currentUserIndex += direction;
+
+        // Loop around the edges.
+        if (this.currentUserIndex < 0) {
+            this.currentUserIndex = this.userList.length - 1;
+        } else if (this.currentUserIndex > this.userList.length - 1) {
+            this.currentUserIndex = 0;
+        }
+
+        return this.currentUserIndex;
+    }
+
+    /**
+     * Get the details of the user currently shown with the total number of users, and the 1-indexed count of the
+     * current user.
+     *
+     * @returns {Object}
+     */
+    get currentUser() {
+        return {
+            ...this.userList[this.currentUserIndex],
+            total: this.userList.length,
+            displayIndex: this.currentUserIndex + 1,
+        };
+    }
+
+    /**
+     * Get the root node for the User Picker.
+     *
+     * @returns {HTMLElement}
+     */
+    get rootNode() {
+        return this.root;
+    }
+}
+
+/**
+ * Create a new user picker.
+ *
+ * @param {Array} users The list of users
+ * @param {Number} currentUserID The userid of the current user
+ * @param {Function} showUserCallback The function to call to show a specific user
+ * @param {Function} preChangeUserCallback The fucntion to call to save the grade for the current user
+ * @returns {UserPicker}
+ */
+export default async(users, currentUserID, showUserCallback, preChangeUserCallback) => {
+    const userPicker = new UserPicker(users, currentUserID, showUserCallback, preChangeUserCallback, false);
+    await userPicker.render();
+
+    return userPicker;
 };