mirror of
https://github.com/moodle/moodle.git
synced 2025-08-06 09:26:35 +02:00
MDL-66845 mod_forum: Convert user picker to class
Part of MDL-66074
This commit is contained in:
Andrew Nicols
Mathew May
parent
c72f5e33c5
commit
45c0584c55
6 changed files with 157 additions and 49 deletions
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -25,49 +25,153 @@
|
|||
import Templates from 'core/templates';
|
||||
import Selectors from './user_picker/selectors';
|
||||
|
||||
const renderNavigator = () => {
|
||||
return Templates.render('mod_forum/local/grades/local/grader/user_picker', {});
|
||||
};
|
||||
const templatePath = 'mod_forum/local/grades/local/grader';
|
||||
|
||||
const renderUserChange = (context) => {
|
||||
return Templates.render('mod_forum/local/grades/local/grader/user_picker/user', context);
|
||||
};
|
||||
class UserPicker {
|
||||
|
||||
const showUser = async(root, users, currentUserIndex, showUserCallback) => {
|
||||
const user = {
|
||||
...users[currentUserIndex],
|
||||
total: users.length,
|
||||
displayIndex: currentUserIndex + 1,
|
||||
};
|
||||
const [html] = await Promise.all([renderUserChange(user), showUserCallback(user)]);
|
||||
const userRegion = root.querySelector(Selectors.regions.userRegion);
|
||||
Templates.replaceNodeContents(userRegion, html, '');
|
||||
};
|
||||
/**
|
||||
* Constructor for the User Picker.
|
||||
*
|
||||
* @param {Array} userList List of users
|
||||
* @param {Number} initialUserId The ID of the initial user to display
|
||||
* @param {Function} showUserCallback The callback used to display the user
|
||||
* @param {Function} preChangeUserCallback The callback to use before changing user
|
||||
* @param {Bool} render Whether to render on instantiation
|
||||
*/
|
||||
constructor(userList, initialUserId, showUserCallback, preChangeUserCallback, render = true) {
|
||||
this.userList = userList;
|
||||
this.showUserCallback = showUserCallback;
|
||||
this.preChangeUserCallback = preChangeUserCallback;
|
||||
|
||||
const bindEvents = (root, users, currentUserIndex, showUserCallback, saveUserCallback) => {
|
||||
root.addEventListener('click', (e) => {
|
||||
// Determine the current index.
|
||||
this.currentUserIndex = userList.findIndex(user => {
|
||||
return user.id === parseInt(initialUserId);
|
||||
});
|
||||
|
||||
// Ensure that render is bound correctly.
|
||||
this.render = this.render.bind(this);
|
||||
|
||||
if (render) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the user picker.
|
||||
*/
|
||||
async render() {
|
||||
// Create the root node.
|
||||
this.root = document.createElement('div');
|
||||
|
||||
const {html, js} = await this.renderNavigator();
|
||||
Templates.replaceNodeContents(this.root, html, js);
|
||||
|
||||
// Call the showUser function to show the first user immediately.
|
||||
await this.showUser(this.currentUser);
|
||||
|
||||
// Ensure that the event listeners are all bound.
|
||||
this.registerEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
saveUserCallback(users[currentUserIndex]);
|
||||
currentUserIndex += parseInt(button.dataset.direction);
|
||||
showUser(root, users, currentUserIndex, showUserCallback);
|
||||
this.preChangeUserCallback(this.currentUser);
|
||||
this.updateIndex(parseInt(button.dataset.direction));
|
||||
this.showUser(this.currentUser);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const buildPicker = async(users, currentUserID, showUserCallback, saveUserCallback) => {
|
||||
let root = document.createElement('div');
|
||||
|
||||
const [html] = await Promise.all([renderNavigator()]);
|
||||
Templates.replaceNodeContents(root, html, '');
|
||||
|
||||
const currentUserIndex = users.findIndex((user) => {
|
||||
return user.id === parseInt(currentUserID);
|
||||
});
|
||||
|
||||
await showUser(root, users, currentUserIndex, showUserCallback);
|
||||
|
||||
bindEvents(root, users, currentUserIndex, showUserCallback, saveUserCallback);
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue