MDL-52954 assign: Rebuild the assignment single grade page.

mod/assign/amd/build/grading_actions.min.js

@@ -0,0 +1 @@
+define(["jquery"],function(a){var b=function(b){this._regionSelector=b,this._region=a(b),a(document).on("user-changed",this._showActionsForm.bind(this)),this._region.find('[name="savechanges"]').on("click",this._trigger.bind(this,"save-changes")),this._region.find('[name="resetbutton"]').on("click",this._trigger.bind(this,"reset")),this._region.find("form").on("submit",function(a){a.preventDefault()})};return b.prototype._regionSelector=null,b.prototype._lastUserId=0,b.prototype._region=null,b.prototype._showActionsForm=function(a,b){var c=this._region.find("[data-region=grading-actions-form]");b!=this._lastUserId&&b>0&&(this._lastUserId=b),b>0?c.removeClass("hide"):c.addClass("hide")},b.prototype._trigger=function(b){a(document).trigger(b)},b});

mod/assign/amd/build/grading_form_change_checker.min.js

@@ -0,0 +1 @@
+define(["jquery"],function(a){return{saveFormState:function(b){a(b).trigger("save-form-state");var c=a(b).serialize();a(b).data("saved-form-state",c)},checkFormForChanges:function(b){a(b).trigger("save-form-state");var c=a(b).serialize(),d=a(b).data("saved-form-state");return"undefined"==typeof d?!1:d!=c}}});

mod/assign/amd/build/grading_navigation_user_info.min.js

@@ -0,0 +1 @@
+define(["jquery","core/notification","core/ajax","core/templates"],function(a,b,c,d){var e=function(b){this._regionSelector=b,this._region=a(b),this._userCache=[],a(document).on("user-changed",this._refreshUserInfo.bind(this))};return e.prototype._regionSelector=null,e.prototype._userCache=null,e.prototype._region=null,e.prototype._lastUserId=0,e.prototype._refreshUserInfo=function(e,f){var g=a.Deferred();this._lastUserId!=f&&(this._lastUserId=f,d.render("mod_assign/loading",{}).done(function(e,h){if(this._region.fadeOut("fast",function(){d.replaceNodeContents(this._region,e,h),this._region.fadeIn("fast")}.bind(this)),0>f)return void d.render("mod_assign/grading_navigation_no_users",{}).done(function(a,b){this._region.fadeOut("fast",function(){d.replaceNodeContents(this._region,a,b),this._region.fadeIn("fast")}.bind(this))}.bind(this)).fail(b.exception);if("undefined"!=typeof this._userCache[f])g.resolve(this._userCache[f]);else{var i=c.call([{methodname:"core_user_get_users_by_field",args:{field:"id",values:[f]}}]);i[0].done(function(b){b.length<1?g.reject("No users"):(a.each(b,function(a,b){this._userCache[b.id]=b}.bind(this)),g.resolve(this._userCache[f]))}.bind(this)).fail(b.exception)}g.done(function(c){var e=a("[data-showuseridentity]").data("showuseridentity").split(","),f=[];c.courseid=a('[data-region="grading-navigation-panel"]').attr("data-courseid"),a.each(e,function(a,b){"undefined"!=typeof c[b]&&""!==c[b]&&(c.hasidentity=!0,f.push(c[b]))}),c.identity=f.join(", "),d.render("mod_assign/grading_navigation_user_summary",c).done(function(a,b){this._region.fadeOut("fast",function(){d.replaceNodeContents(this._region,a,b),this._region.fadeIn("fast")}.bind(this))}.bind(this)).fail(b.exception)}.bind(this)).fail(function(){d.render("mod_assign/grading_navigation_no_users",{}).done(function(a,b){this._region.fadeOut("fast",function(){d.replaceNodeContents(this._region,a,b),this._region.fadeIn("fast")}.bind(this))}.bind(this)).fail(b.exception)})}.bind(this)).fail(b.exception))},e});

mod/assign/amd/build/grading_panel.min.js

@@ -0,0 +1 @@
+define(["jquery","core/notification","core/templates","core/fragment","core/ajax","core/str","mod_assign/grading_form_change_checker"],function(a,b,c,d,e,f,g){var h=function(b){this._regionSelector=b,this._region=a(b),this._userCache=[],a(document).on("user-changed",this._refreshGradingPanel.bind(this)),a(document).on("save-changes",this._submitForm.bind(this)),a(document).on("reset",this._resetForm.bind(this)),a(document).on("save-form-state",this._saveFormState.bind(this))};return h.prototype._regionSelector=null,h.prototype._lastUserId=0,h.prototype._lastAttemptNumber=-1,h.prototype._region=null,h.prototype._niceReplaceNodeContents=function(b,d,e){var f=a.Deferred();return b.fadeOut("fast",function(){c.replaceNodeContents(b,d,e),b.fadeIn("fast",function(){f.resolve()})}),f.promise()},h.prototype._saveFormState=function(){"undefined"!=typeof window.tinyMCE&&window.tinyMCE.triggerSave();var b=a('[data-region="grading-actions-form"] [name="sendstudentnotifications"]').val();a('.gradeform [name="sendstudentnotifications"]').val(b)},h.prototype._submitForm=function(c,d){var f=a(this._region.find("form.gradeform"));a('[data-region="overlay"]').show(),f.trigger("save-form-state");var g=f.serialize(),h=this._region.attr("data-assignmentid");e.call([{methodname:"mod_assign_submit_grading_form",args:{assignmentid:h,userid:this._lastUserId,jsonformdata:JSON.stringify(g)},done:this._handleFormSubmissionResponse.bind(this,g,d),fail:b.exception}])},h.prototype._handleFormSubmissionResponse=function(c,d,e){"undefined"==typeof d&&(d=this._lastUserId),e.length?a(document).trigger("reset",[this._lastUserId,c]):(f.get_strings([{key:"changessaved",component:"core"},{key:"gradechangessaveddetail",component:"mod_assign"}]).done(function(a){b.alert(a[0],a[1])}).fail(b.exception),d==this._lastUserId?a(document).trigger("reset",d):a(document).trigger("user-changed",d)),a('[data-region="overlay"]').hide()},h.prototype._resetForm=function(b,c,d){var e=a.Event("custom");"undefined"==typeof c&&(c=this._lastUserId),this._lastUserId=0,this._refreshGradingPanel(e,c,d)},h.prototype._chooseAttempt=function(c){var d=a(c.target),e=d.data("submissions"),g=a(document.getElementById(e)),h=g.clone(),i=h.wrap(a("<form/>")).html();f.get_strings([{key:"viewadifferentattempt",component:"mod_assign"},{key:"view",component:"core"},{key:"cancel",component:"core"}]).done(function(c){b.confirm(c[0],i,c[1],c[2],function(){var b=a("input:radio[name='select-attemptnumber']:checked").val();this._refreshGradingPanel(null,this._lastUserId,"",b)}.bind(this))}.bind(this)).fail(b.exception)},h.prototype._addPopoutButtons=function(d){var e=a(d);c.render("mod_assign/popout_button",{}).done(function(a){e.find(".fitem_ffilemanager .fitemtitle").append(a),e.find(".fitem_feditor .fitemtitle").append(a),e.find(".fitem_f .fitemtitle").append(a),e.on("click",'[data-region="popout-button"]',this._togglePopout.bind(this))}.bind(this)).fail(b.exception)},h.prototype._togglePopout=function(b){b.preventDefault();var c=a(b.target).closest(".fitem");c.hasClass("popout")?a(".popout").removeClass("popout"):(a(".popout").removeClass("popout"),c.addClass("popout"),c.addClass("moodle-has-zindex"))},h.prototype._refreshGradingPanel=function(e,f,h,i){var j=this._region.attr("data-contextid");"undefined"==typeof h&&(h=""),"undefined"==typeof i&&(i=-1),(this._lastUserId!=f||this._lastAttemptNumber!=i||""!==h)&&(this._lastUserId=f,this._lastAttemptNumber=i,a(document).trigger("start-loading-user"),window.M.util.js_pending("mod-assign-loading-user"),c.render("mod_assign/loading",{}).done(function(c,e){this._niceReplaceNodeContents(this._region,c,e).done(function(){if(f>0){this._region.show();var c={userid:f,attemptnumber:i,jsonformdata:JSON.stringify(h)};d.loadFragment("mod_assign","gradingpanel",j,c).done(function(c,d){this._niceReplaceNodeContents(this._region,c,d).done(function(){g.saveFormState('[data-region="grade-panel"] .gradeform'),a('[data-region="attempt-chooser"]').on("click",this._chooseAttempt.bind(this)),this._addPopoutButtons('[data-region="grade-panel"] .gradeform'),a(document).trigger("finish-loading-user"),window.M.util.js_complete("mod-assign-loading-user")}.bind(this)).fail(b.exception)}.bind(this)).fail(b.exception)}else{this._region.hide();var e=a('[data-region="review-panel"]');e.length&&this._niceReplaceNodeContents(e,"",""),a(document).trigger("finish-loading-user"),window.M.util.js_complete("mod-assign-loading-user")}}.bind(this))}.bind(this)).fail(b.exception))},h});

mod/assign/amd/build/grading_review_panel.min.js

@@ -0,0 +1 @@
+define(["jquery"],function(a){var b=function(){this._region=a('[data-region="review-panel"]')};return b.prototype._region=null,b.prototype.getReviewPanel=function(a){var b=this._region.data("panel-owner");return"undefined"==typeof b&&this._region.data("review-panel-plugin",a),this._region.data("review-panel-plugin")==a?this._region[0]:!1},b});

mod/assign/amd/build/participant_selector.min.js

@@ -0,0 +1 @@
+define(["core/ajax","jquery","core/templates"],function(a,b,c){return{processResults:function(a,b){var c=[],d=0;for(d=0;d<b.length;d++)c[d]={value:b[d].id,label:b[d].label};return c},transport:function(d,e,f,g){var h=b(d).attr("data-assignmentid"),i=b('[data-region="configure-filters"] input[type="checkbox"]'),j=[];i.each(function(a,c){j[b(c).attr("name")]=b(c).prop("checked")});var k=a.call([{methodname:"mod_assign_list_participants",args:{assignid:h,groupid:0,filter:e,limit:30}}]);k[0].then(function(a){var d=[],e=b("[data-showuseridentity]").data("showuseridentity").split(",");b.each(a,function(a,f){var g=f,h=[],i=!0;j.filter_submitted&&!f.submitted&&(i=!1),j.filter_notsubmitted&&f.submitted&&(i=!1),j.filter_requiregrading&&!f.requiregrading&&(i=!1),i&&(b.each(e,function(a,b){"undefined"!=typeof f[b]&&""!==f[b]&&(g.hasidentity=!0,h.push(f[b]))}),g.identity=h.join(", "),d.push(c.render("mod_assign/list_participant_user_summary",g)))}),b.when.apply(b.when,d).then(function(){var c=arguments,d=0;b.each(a,function(a,b){b.label=c[d],d++}),f(a)})},g)}}});

mod/assign/amd/src/grading_actions.js

@@ -0,0 +1,89 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Javascript controller for the "Actions" panel at the bottom of the page.
+ *
+ * @module     mod_assign/grading_actions
+ * @package    mod_assign
+ * @class      GradingActions
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery'], function($) {
+
+    /**
+     * GradingActions class.
+     *
+     * @class GradingActions
+     * @param {String} selector The selector for the page region containing the actions panel.
+     */
+    var GradingActions = function(selector) {
+        this._regionSelector = selector;
+        this._region = $(selector);
+
+        $(document).on('user-changed', this._showActionsForm.bind(this));
+
+        this._region.find('[name="savechanges"]').on('click', this._trigger.bind(this, 'save-changes'));
+        this._region.find('[name="resetbutton"]').on('click', this._trigger.bind(this, 'reset'));
+        this._region.find('form').on('submit', function(e) { e.preventDefault(); });
+    };
+
+    /** @type {String} Selector for the page region containing the user navigation. */
+    GradingActions.prototype._regionSelector = null;
+
+    /** @type {Integer} Remember the last user id to prevent unnessecary reloads. */
+    GradingActions.prototype._lastUserId = 0;
+
+    /** @type {JQuery} JQuery node for the page region containing the user navigation. */
+    GradingActions.prototype._region = null;
+
+    /**
+     * Show the actions if there is valid user.
+     *
+     * @method _showActionsForm
+     * @private
+     * @param {Event} event
+     * @param {Integer} userid
+     * @return {Deferred} promise resolved when the animations are complete.
+     */
+    GradingActions.prototype._showActionsForm = function(event, userid) {
+        var form = this._region.find('[data-region=grading-actions-form]');
+
+        if (userid != this._lastUserId && userid > 0) {
+            this._lastUserId = userid;
+        }
+        if (userid > 0) {
+            form.removeClass('hide');
+        } else {
+            form.addClass('hide');
+        }
+
+    };
+
+    /**
+     * Trigger the named action.
+     *
+     * @method _trigger
+     * @private
+     * @param {String} action
+     */
+    GradingActions.prototype._trigger = function(action) {
+        $(document).trigger(action);
+    };
+
+    return GradingActions;
+});

mod/assign/amd/src/grading_form_change_checker.js

@@ -0,0 +1,60 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Simple method to check for changes to a form between two points in time.
+ *
+ * @module     mod_assign/grading_form_change_checker
+ * @package    mod_assign
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery'], function($) {
+
+    return /** @alias module:mod_assign/grading_form_change_checker */ {
+        /**
+         * Save the values in the form to a data attribute so they can be compared later for changes.
+         *
+         * @method saveFormState
+         * @param {String} selector The selector for the form element.
+         */
+        saveFormState: function(selector) {
+            $(selector).trigger('save-form-state');
+            var data = $(selector).serialize();
+            $(selector).data('saved-form-state', data);
+        },
+
+        /**
+         * Compare the current values in the form to the previously saved state.
+         *
+         * @method checkFormForChanges
+         * @param {String} selector The selector for the form element.
+         * @return {Boolean} True if there are changes to the form data.
+         */
+        checkFormForChanges: function(selector) {
+
+            $(selector).trigger('save-form-state');
+
+            var data = $(selector).serialize(),
+                previousdata = $(selector).data('saved-form-state');
+
+            if (typeof previousdata === 'undefined') {
+                return false;
+            }
+            return (previousdata != data);
+        }
+    };
+});

mod/assign/amd/src/grading_navigation.js

@@ -0,0 +1,470 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Javascript to handle changing users via the user selector in the header.
+ *
+ * @module     mod_assign/grading_navigation
+ * @package    mod_assign
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery', 'core/notification', 'core/str', 'core/form-autocomplete',
+        'core/ajax', 'mod_assign/grading_form_change_checker'],
+       function($, notification, str, autocomplete, ajax, checker) {
+
+    /**
+     * GradingNavigation class.
+     *
+     * @class GradingNavigation
+     * @param {String} selector The selector for the page region containing the user navigation.
+     */
+    var GradingNavigation = function(selector) {
+        this._regionSelector = selector;
+        this._region = $(selector);
+        this._filters = [];
+        this._users = [];
+        this._filteredUsers = [];
+
+        // Get the current user list from a webservice.
+        this._loadAllUsers();
+
+        // Attach listeners to the select and arrow buttons.
+
+        this._region.find('[data-action="previous-user"]').on('click', this._handlePreviousUser.bind(this));
+        this._region.find('[data-action="next-user"]').on('click', this._handleNextUser.bind(this));
+        this._region.find('[data-action="change-user"]').on('change', this._handleChangeUser.bind(this));
+        this._region.find('[data-region="user-filters"]').on('click', this._toggleExpandFilters.bind(this));
+
+        $(document).on('user-changed', this._refreshSelector.bind(this));
+
+        // Position the configure filters panel under the link that expands it.
+        var toggleLink = this._region.find('[data-region="user-filters"]');
+        var configPanel = $(document.getElementById(toggleLink.attr('aria-controls')));
+
+        configPanel.on('change', '[type="checkbox"]', this._filterChanged.bind(this));
+
+        var userid = $('[data-region="grading-navigation-panel"]').data('first-userid');
+        if (userid) {
+            this._selectUserById(userid);
+        }
+
+        str.get_string('changeuser', 'mod_assign').done(function(s) {
+                autocomplete.enhance('[data-action=change-user]', false, 'mod_assign/participant_selector', s);
+            }.bind(this)
+        ).fail(notification.exception);
+
+        // We do not allow navigation while ajax requests are pending.
+
+        $(document).bind("start-loading-user", function(){
+            this._isLoading = true;
+        }.bind(this));
+        $(document).bind("finish-loading-user", function(){
+            this._isLoading = false;
+        }.bind(this));
+    };
+
+    /** @type {Boolean} Boolean tracking active ajax requests. */
+    GradingNavigation.prototype._isLoading = false;
+
+    /** @type {String} Selector for the page region containing the user navigation. */
+    GradingNavigation.prototype._regionSelector = null;
+
+    /** @type {Array} The list of active filter keys */
+    GradingNavigation.prototype._filters = null;
+
+    /** @type {Array} The list of users */
+    GradingNavigation.prototype._users = null;
+
+    /** @type {JQuery} JQuery node for the page region containing the user navigation. */
+    GradingNavigation.prototype._region = null;
+
+    /**
+     * Load the list of all users for this assignment.
+     *
+     * @private
+     * @method _loadAllUsers
+     */
+    GradingNavigation.prototype._loadAllUsers = function() {
+        var select = this._region.find('[data-action=change-user]');
+        var assignmentid = select.attr('data-assignmentid');
+        var groupid = select.attr('data-groupid');
+
+        ajax.call([{
+            methodname: 'mod_assign_list_participants',
+            args: { assignid: assignmentid, groupid: groupid, filter: '', onlyids: true },
+            done: this._usersLoaded.bind(this),
+            fail: notification.exception
+        }]);
+    };
+
+    /**
+     * Call back to rebuild the user selector and x of y info when the user list is updated.
+     *
+     * @private
+     * @method _usersLoaded
+     * @param {Array} users
+     */
+    GradingNavigation.prototype._usersLoaded = function(users) {
+        this._filteredUsers = this._users = users;
+        if (this._users.length) {
+            // Position the configure filters panel under the link that expands it.
+            var toggleLink = this._region.find('[data-region="user-filters"]');
+            var configPanel = $(document.getElementById(toggleLink.attr('aria-controls')));
+
+            configPanel.find('[type="checkbox"]').trigger('change');
+        } else {
+            this._selectNoUser();
+        }
+    };
+
+    /**
+     * Close the configure filters panel if a click is detected outside of it.
+     *
+     * @private
+     * @method _checkClickOutsideConfigureFilters
+     * @param {Event}
+     */
+    GradingNavigation.prototype._checkClickOutsideConfigureFilters = function(event) {
+        var configPanel = this._region.find('[data-region="configure-filters"]');
+
+        if (!configPanel.is(event.target) && configPanel.has(event.target).length === 0) {
+            var toggleLink = this._region.find('[data-region="user-filters"]');
+
+            configPanel.hide();
+            configPanel.attr('aria-hidden', 'true');
+            toggleLink.attr('aria-expanded', 'false');
+            $(document).unbind('click.mod_assign_grading_navigation');
+        }
+    };
+
+    /**
+     * Turn a filter on or off.
+     *
+     * @private
+     * @method _filterChanged
+     * @param {Event}
+     */
+    GradingNavigation.prototype._filterChanged = function(event) {
+        var name = $(event.target).attr('name');
+        var key = name.split('_').pop();
+        var enabled = $(event.target).prop('checked');
+
+        if (enabled) {
+            if (this._filters.indexOf(key) == -1) {
+                this._filters[this._filters.length] = key;
+            }
+        } else {
+            var index = this._filters.indexOf(key);
+            if (index != -1) {
+                this._filters.splice(index, 1);
+            }
+        }
+
+        // Update the active filter string.
+        var filterlist = [];
+        this._region.find('[data-region="configure-filters"]').find('[type="checkbox"]').each(function(idx, ele) {
+            if ($(ele).prop('checked')) {
+                filterlist[filterlist.length] = $(ele).closest('label').text();
+            }
+        }.bind(this));
+        if (filterlist.length) {
+            this._region.find('[data-region="user-filters"] span').text(filterlist.join(', '));
+        } else {
+            str.get_string('nofilters', 'mod_assign').done(function(s) {
+                this._region.find('[data-region="user-filters"] span').text(s);
+            }.bind(this)).fail(notification.exception);
+        }
+
+        // Filter the options in the select box that do not match the current filters.
+
+        var select = this._region.find('[data-action=change-user]');
+        var userid = select.attr('data-selected');
+        var foundIndex = 0;
+
+        this._filteredUsers = [];
+
+        $.each(this._users, function(index, user) {
+            var show = true;
+            $.each(this._filters, function(filterindex, filter) {
+                if (filter == "submitted") {
+                    if (user.submitted == "0") {
+                        show = false;
+                    }
+                } else if (filter == "notsubmitted") {
+                    if (user.submitted == "1") {
+                        show = false;
+                    }
+                } else if (filter == "requiregrading") {
+                    if (user.requiregrading == "0") {
+                        show = false;
+                    }
+                }
+            }.bind(this));
+
+            if (show) {
+                this._filteredUsers[this._filteredUsers.length] = user;
+                if (userid == user.id) {
+                    foundIndex = index;
+                }
+            }
+        }.bind(this));
+
+        if (this._filteredUsers.length) {
+            this._selectUserById(this._filteredUsers[foundIndex].id);
+        } else {
+            this._selectNoUser();
+        }
+    };
+
+    /**
+     * Select no users, because no users match the filters.
+     *
+     * @private
+     * @method _selectNoUser
+     */
+    GradingNavigation.prototype._selectNoUser = function() {
+        // Detect unsaved changes, and offer to save them - otherwise change user right now.
+        if (this._isLoading) {
+            return;
+        }
+        if (checker.checkFormForChanges('[data-region="grade-panel"] .gradeform')) {
+            // Form has changes, so we need to confirm before switching users.
+            str.get_strings([
+                { key: 'unsavedchanges', component: 'mod_assign' },
+                { key: 'unsavedchangesquestion', component: 'mod_assign' },
+                { key: 'saveandcontinue', component: 'mod_assign' },
+                { key: 'cancel', component: 'core' },
+            ]).done(function(strs) {
+                notification.confirm(strs[0], strs[1], strs[2], strs[3], function() {
+                    $(document).trigger('save-changes', -1);
+                });
+            }.bind(this));
+        } else {
+            $(document).trigger('user-changed', -1);
+        }
+    };
+
+    /**
+     * Select the specified user by id.
+     *
+     * @private
+     * @method _selectUserById
+     * @param {Number} userid
+     */
+    GradingNavigation.prototype._selectUserById = function(userid) {
+        var select = this._region.find('[data-action=change-user]');
+        var useridnumber = parseInt(userid, 10);
+
+        // Detect unsaved changes, and offer to save them - otherwise change user right now.
+        if (this._isLoading) {
+            return;
+        }
+        if (checker.checkFormForChanges('[data-region="grade-panel"] .gradeform')) {
+            // Form has changes, so we need to confirm before switching users.
+            str.get_strings([
+                { key: 'unsavedchanges', component: 'mod_assign' },
+                { key: 'unsavedchangesquestion', component: 'mod_assign' },
+                { key: 'saveandcontinue', component: 'mod_assign' },
+                { key: 'cancel', component: 'core' },
+            ]).done(function(strs) {
+                notification.confirm(strs[0], strs[1], strs[2], strs[3], function() {
+                    $(document).trigger('save-changes', useridnumber);
+                });
+            }.bind(this));
+        } else {
+            select.attr('data-selected', userid);
+
+            if (!isNaN(useridnumber) && useridnumber > 0) {
+                $(document).trigger('user-changed', userid);
+            }
+        }
+    };
+
+    /**
+     * Expand or collapse the filter config panel.
+     *
+     * @private
+     * @method _toggleExpandFilters
+     * @param {Event}
+     */
+    GradingNavigation.prototype._toggleExpandFilters = function(event) {
+        event.preventDefault();
+        var toggleLink = $(event.target).closest('[data-region="user-filters"]');
+        var expanded = toggleLink.attr('aria-expanded') == 'true';
+        var configPanel = $(document.getElementById(toggleLink.attr('aria-controls')));
+
+        if (expanded) {
+            configPanel.hide();
+            configPanel.attr('aria-hidden', 'true');
+            toggleLink.attr('aria-expanded', 'false');
+            $(document).unbind('click.mod_assign_grading_navigation');
+        } else {
+            configPanel.css('display', 'inline-block');
+            configPanel.attr('aria-hidden', 'false');
+            toggleLink.attr('aria-expanded', 'true');
+            event.stopPropagation();
+            $(document).on('click.mod_assign_grading_navigation', this._checkClickOutsideConfigureFilters.bind(this));
+        }
+    };
+
+    /**
+     * Change to the previous user in the grading list.
+     *
+     * @private
+     * @method _handlePreviousUser
+     * @param {Event} e
+     */
+    GradingNavigation.prototype._handlePreviousUser = function(e) {
+        e.preventDefault();
+        var select = this._region.find('[data-action=change-user]');
+        var currentUserId = select.attr('data-selected');
+        var i = 0, currentIndex = 0;
+
+        for (i = 0; i < this._filteredUsers.length; i++) {
+            if (this._filteredUsers[i].id == currentUserId) {
+                currentIndex = i;
+                break;
+            }
+        }
+
+        var count = this._filteredUsers.length;
+        var newIndex = (currentIndex - 1);
+        if (newIndex < 0) {
+            newIndex = count - 1;
+        }
+
+        if (count) {
+            this._selectUserById(this._filteredUsers[newIndex].id);
+        }
+    };
+
+    /**
+     * Change to the next user in the grading list.
+     *
+     * @param {Event} e
+     */
+    GradingNavigation.prototype._handleNextUser = function(e) {
+        e.preventDefault();
+        var select = this._region.find('[data-action=change-user]');
+        var currentUserId = select.attr('data-selected');
+        var i = 0, currentIndex = 0;
+
+        for (i = 0; i < this._filteredUsers.length; i++) {
+            if (this._filteredUsers[i].id == currentUserId) {
+                currentIndex = i;
+                break;
+            }
+        }
+
+        var count = this._filteredUsers.length;
+        var newIndex = (currentIndex + 1) % count;
+
+        if (count) {
+            this._selectUserById(this._filteredUsers[newIndex].id);
+        }
+    };
+
+    /**
+     * Rebuild the x of y string.
+     *
+     * @private
+     * @method _refreshCount
+     */
+    GradingNavigation.prototype._refreshCount = function() {
+        var select = this._region.find('[data-action=change-user]');
+        var userid = select.attr('data-selected');
+        var i = 0;
+        var currentIndex = 0;
+
+        if (isNaN(userid) || userid <= 0) {
+            this._region.find('[data-region="user-count"]').hide();
+        } else {
+            this._region.find('[data-region="user-count"]').show();
+
+            for (i = 0; i < this._filteredUsers.length; i++) {
+                if (this._filteredUsers[i].id == userid) {
+                    currentIndex = i;
+                    break;
+                }
+            }
+            var count = this._filteredUsers.length;
+            if (count) {
+                currentIndex += 1;
+            }
+            var param = { x: currentIndex, y: count };
+
+            str.get_string('xofy', 'mod_assign', param).done(function(s) {
+                this._region.find('[data-region="user-count-summary"]').text(s);
+            }.bind(this)).fail(notification.exception);
+        }
+    };
+
+    /**
+     * Respond to a user-changed event by updating the selector.
+     *
+     * @private
+     * @method _refreshSelector
+     * @param {Event} event
+     * @param {String} userid
+     */
+    GradingNavigation.prototype._refreshSelector = function(event, userid) {
+        var select = this._region.find('[data-action=change-user]');
+        userid = parseInt(userid, 10);
+
+        if (!isNaN(userid) && userid > 0) {
+            select.attr('data-selected', userid);
+        }
+        this._refreshCount();
+    };
+
+    /**
+     * Change to a different user in the grading list.
+     *
+     * @private
+     * @method _handleChangeUser
+     * @param {Event}
+     */
+    GradingNavigation.prototype._handleChangeUser = function() {
+        var select = this._region.find('[data-action=change-user]');
+        var userid = parseInt(select.val(), 10);
+
+        if (this._isLoading) {
+            return;
+        }
+        if (checker.checkFormForChanges('[data-region="grade-panel"] .gradeform')) {
+            // Form has changes, so we need to confirm before switching users.
+            str.get_strings([
+                { key: 'unsavedchanges', component: 'mod_assign' },
+                { key: 'unsavedchangesquestion', component: 'mod_assign' },
+                { key: 'saveandcontinue', component: 'mod_assign' },
+                { key: 'cancel', component: 'core' },
+            ]).done(function(strs) {
+                notification.confirm(strs[0], strs[1], strs[2], strs[3], function() {
+                    $(document).trigger('save-changes', userid);
+                });
+            }.bind(this));
+        } else {
+            if (!isNaN(userid) && userid > 0) {
+                select.attr('data-selected', userid);
+
+                $(document).trigger('user-changed', userid);
+            }
+        }
+    };
+
+    return GradingNavigation;
+});

mod/assign/amd/src/grading_navigation_user_info.js

@@ -0,0 +1,147 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Javascript controller for the "User summary" panel at the top of the page.
+ *
+ * @module     mod_assign/grading_navigation_user_info
+ * @package    mod_assign
+ * @class      UserInfo
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery', 'core/notification', 'core/ajax', 'core/templates'], function($, notification, ajax, templates) {
+
+    /**
+     * UserInfo class.
+     *
+     * @class UserInfo
+     * @param {String} selector The selector for the page region containing the user navigation.
+     */
+    var UserInfo = function(selector) {
+        this._regionSelector = selector;
+        this._region = $(selector);
+        this._userCache = [];
+
+        $(document).on('user-changed', this._refreshUserInfo.bind(this));
+    };
+
+    /** @type {String} Selector for the page region containing the user navigation. */
+    UserInfo.prototype._regionSelector = null;
+
+    /** @type {Array} Cache of user info contexts. */
+    UserInfo.prototype._userCache = null;
+
+    /** @type {JQuery} JQuery node for the page region containing the user navigation. */
+    UserInfo.prototype._region = null;
+
+    /** @type {Integer} Remember the last user id to prevent unnessecary reloads. */
+    UserInfo.prototype._lastUserId = 0;
+
+    /**
+     * Get the user context - re-render the template in the page.
+     *
+     * @private
+     * @method _refreshUserInfo
+     * @param {Event} event
+     * @param {Number} userid
+     */
+    UserInfo.prototype._refreshUserInfo = function(event, userid) {
+        var promise = $.Deferred();
+
+        // Skip reloading if it is the same user.
+        if (this._lastUserId == userid) {
+            return;
+        }
+        this._lastUserId = userid;
+
+        // First insert the loading template.
+        templates.render('mod_assign/loading', {}).done(function(html, js) {
+            // Update the page.
+            this._region.fadeOut("fast", function() {
+                templates.replaceNodeContents(this._region, html, js);
+                this._region.fadeIn("fast");
+            }.bind(this));
+
+            if (userid < 0) {
+                // Render the template.
+                templates.render('mod_assign/grading_navigation_no_users', {}).done(function(html, js) {
+                    // Update the page.
+                    this._region.fadeOut("fast", function() {
+                        templates.replaceNodeContents(this._region, html, js);
+                        this._region.fadeIn("fast");
+                    }.bind(this));
+                }.bind(this)).fail(notification.exception);
+                return;
+            }
+
+            if (typeof this._userCache[userid] !== "undefined") {
+                promise.resolve(this._userCache[userid]);
+            } else {
+                // Load context from ajax.
+                var requests = ajax.call([{
+                    methodname: 'core_user_get_users_by_field',
+                    args: { field: 'id', values: [ userid ] }
+                }]);
+
+                requests[0].done(function(result) {
+                    if (result.length < 1) {
+                        promise.reject('No users');
+                    } else {
+                        $.each(result, function(index, user) {
+                            this._userCache[user.id] = user;
+                        }.bind(this));
+                        promise.resolve(this._userCache[userid]);
+                    }
+                }.bind(this)).fail(notification.exception);
+            }
+
+            promise.done(function(context) {
+                var identityfields = $('[data-showuseridentity]').data('showuseridentity').split(','),
+                    identity = [];
+                // Render the template.
+                context.courseid = $('[data-region="grading-navigation-panel"]').attr('data-courseid');
+                // Build a string for the visible identity fields listed in showuseridentity config setting.
+                $.each(identityfields, function(i, k) {
+                    if (typeof context[k] !== 'undefined' && context[k] !== '') {
+                        context.hasidentity = true;
+                        identity.push(context[k]);
+                    }
+                });
+                context.identity = identity.join(', ');
+
+                templates.render('mod_assign/grading_navigation_user_summary', context).done(function(html, js) {
+                    // Update the page.
+                    this._region.fadeOut("fast", function() {
+                        templates.replaceNodeContents(this._region, html, js);
+                        this._region.fadeIn("fast");
+                    }.bind(this));
+                }.bind(this)).fail(notification.exception);
+            }.bind(this)).fail(function() {
+                // Render the template.
+                templates.render('mod_assign/grading_navigation_no_users', {}).done(function(html, js) {
+                    // Update the page.
+                    this._region.fadeOut("fast", function() {
+                        templates.replaceNodeContents(this._region, html, js);
+                        this._region.fadeIn("fast");
+                    }.bind(this));
+                }.bind(this)).fail(notification.exception);
+            });
+        }.bind(this)).fail(notification.exception);
+    };
+
+    return UserInfo;
+});

mod/assign/amd/src/grading_panel.js

@@ -0,0 +1,307 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Javascript controller for the "Grading" panel at the right of the page.
+ *
+ * @module     mod_assign/grading_panel
+ * @package    mod_assign
+ * @class      GradingPanel
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery', 'core/notification', 'core/templates', 'core/fragment',
+        'core/ajax', 'core/str', 'mod_assign/grading_form_change_checker'],
+       function($, notification, templates, fragment, ajax, str, checker) {
+
+    /**
+     * GradingPanel class.
+     *
+     * @class GradingPanel
+     * @param {String} selector The selector for the page region containing the user navigation.
+     */
+    var GradingPanel = function(selector) {
+        this._regionSelector = selector;
+        this._region = $(selector);
+        this._userCache = [];
+
+        $(document).on('user-changed', this._refreshGradingPanel.bind(this));
+        $(document).on('save-changes', this._submitForm.bind(this));
+        $(document).on('reset', this._resetForm.bind(this));
+
+        $(document).on('save-form-state', this._saveFormState.bind(this));
+    };
+
+    /** @type {String} Selector for the page region containing the user navigation. */
+    GradingPanel.prototype._regionSelector = null;
+
+    /** @type {Integer} Remember the last user id to prevent unnessecary reloads. */
+    GradingPanel.prototype._lastUserId = 0;
+
+    /** @type {Integer} Remember the last attempt number to prevent unnessecary reloads. */
+    GradingPanel.prototype._lastAttemptNumber = -1;
+
+    /** @type {JQuery} JQuery node for the page region containing the user navigation. */
+    GradingPanel.prototype._region = null;
+
+    /**
+     * Fade the dom node out, update it, and fade it back.
+     *
+     * @private
+     * @method _niceReplaceNodeContents
+     * @param {JQuery} node
+     * @param {String} html
+     * @param {String} js
+     * @return {Deferred} promise resolved when the animations are complete.
+     */
+    GradingPanel.prototype._niceReplaceNodeContents = function(node, html, js) {
+        var promise = $.Deferred();
+
+        node.fadeOut("fast", function() {
+            templates.replaceNodeContents(node, html, js);
+            node.fadeIn("fast", function() {
+                promise.resolve();
+            });
+        });
+
+        return promise.promise();
+    };
+
+    /**
+     * Make sure all form fields have the latest saved state.
+     * @private
+     * @method _saveFormState
+     */
+    GradingPanel.prototype._saveFormState = function() {
+        // Grrrrr! TinyMCE you know what you did.
+        if (typeof window.tinyMCE !== 'undefined') {
+            window.tinyMCE.triggerSave();
+        }
+
+        // Copy data from notify students checkbox which was moved out of the form.
+        var checked = $('[data-region="grading-actions-form"] [name="sendstudentnotifications"]').val();
+        $('.gradeform [name="sendstudentnotifications"]').val(checked);
+    };
+
+    /**
+     * Make form submit via ajax.
+     *
+     * @private
+     * @method _submitForm
+     */
+    GradingPanel.prototype._submitForm = function(event, nextUserId) {
+        // The form was submitted - send it via ajax instead.
+        var form = $(this._region.find('form.gradeform'));
+
+        $('[data-region="overlay"]').show();
+
+        // We call this, so other modules can update the form with the latest state.
+        form.trigger('save-form-state');
+
+        // Now we get all the current values from the form.
+        var data = form.serialize();
+        var assignmentid = this._region.attr('data-assignmentid');
+
+        // Now we can continue...
+        ajax.call([{
+            methodname: 'mod_assign_submit_grading_form',
+            args: {assignmentid: assignmentid, userid: this._lastUserId, jsonformdata: JSON.stringify(data)},
+            done: this._handleFormSubmissionResponse.bind(this, data, nextUserId),
+            fail: notification.exception
+        }]);
+    };
+
+    /**
+     * Handle form submission response.
+     *
+     * @private
+     * @method _handleFormSubmissionResponse
+     * @param {Array} formdata - submitted values
+     * @param {Integer} nextUserId - optional. The id of the user to load after the form is saved.
+     * @param {Array} response List of errors.
+     */
+    GradingPanel.prototype._handleFormSubmissionResponse = function(formdata, nextUserId, response) {
+        if (typeof nextUserId === "undefined") {
+            nextUserId = this._lastUserId;
+        }
+        if (response.length) {
+            // There was an error saving the grade. Re-render the form using the submitted data so we can show
+            // validation errors.
+            $(document).trigger('reset', [this._lastUserId, formdata]);
+        } else {
+            str.get_strings([
+                { key: 'changessaved', component: 'core' },
+                { key: 'gradechangessaveddetail', component: 'mod_assign' },
+            ]).done(function(strs) {
+                notification.alert(strs[0], strs[1]);
+            }).fail(notification.exception);
+            if (nextUserId == this._lastUserId) {
+                $(document).trigger('reset', nextUserId);
+            } else {
+                $(document).trigger('user-changed', nextUserId);
+            }
+        }
+        $('[data-region="overlay"]').hide();
+    };
+
+    /**
+     * Refresh form with default values.
+     *
+     * @private
+     * @method _resetForm
+     * @param {Event} e
+     * @param {Integer} userid
+     * @param {Array} formdata
+     */
+    GradingPanel.prototype._resetForm = function(e, userid, formdata) {
+        // The form was cancelled - refresh with default values.
+        var event = $.Event("custom");
+        if (typeof userid == "undefined") {
+            userid = this._lastUserId;
+        }
+        this._lastUserId = 0;
+        this._refreshGradingPanel(event, userid, formdata);
+    };
+
+    /**
+     * Open a picker to choose an older attempt.
+     *
+     * @private
+     * @method _chooseAttempt
+     */
+    GradingPanel.prototype._chooseAttempt = function(e) {
+        // Show a dialog.
+
+        // The form is in the element pointed to by data-submissions.
+        var link = $(e.target);
+        var submissionsId = link.data('submissions');
+        var submissionsform = $(document.getElementById(submissionsId));
+        var formcopy = submissionsform.clone();
+        var formhtml = formcopy.wrap($('<form/>')).html();
+
+        str.get_strings([
+            { key: 'viewadifferentattempt', component: 'mod_assign' },
+            { key: 'view', component: 'core' },
+            { key: 'cancel', component: 'core' },
+        ]).done(function(strs) {
+            notification.confirm(strs[0], formhtml, strs[1], strs[2], function() {
+                var attemptnumber = $("input:radio[name='select-attemptnumber']:checked").val();
+
+                this._refreshGradingPanel(null, this._lastUserId, '', attemptnumber);
+            }.bind(this));
+        }.bind(this)).fail(notification.exception);
+    };
+
+    /**
+     * Add popout buttons
+     *
+     * @private
+     * @method _addPopoutButtons
+     * @param {JQuery} region The region to add popout buttons to.
+     */
+    GradingPanel.prototype._addPopoutButtons = function(selector) {
+        var region = $(selector);
+
+        templates.render('mod_assign/popout_button', {}).done(function(html) {
+            region.find('.fitem_ffilemanager .fitemtitle').append(html);
+            region.find('.fitem_feditor .fitemtitle').append(html);
+            region.find('.fitem_f .fitemtitle').append(html);
+
+            region.on('click', '[data-region="popout-button"]', this._togglePopout.bind(this));
+        }.bind(this)).fail(notification.exception);
+    };
+
+    /**
+     * Make a div "popout" or "popback".
+     *
+     * @private
+     * @method _togglePopout
+     * @param {Event} event
+     */
+    GradingPanel.prototype._togglePopout = function(event) {
+        event.preventDefault();
+        var container = $(event.target).closest('.fitem');
+        if (container.hasClass('popout')) {
+            $('.popout').removeClass('popout');
+        } else {
+            $('.popout').removeClass('popout');
+            container.addClass('popout');
+            container.addClass('moodle-has-zindex');
+        }
+    };
+
+    /**
+     * Get the user context - re-render the template in the page.
+     *
+     * @private
+     * @method _refreshGradingPanel
+     * @param {Event} event
+     * @param {Number} userid
+     * @param {String} serialised submission data.
+     */
+    GradingPanel.prototype._refreshGradingPanel = function(event, userid, submissiondata, attemptnumber) {
+        var contextid = this._region.attr('data-contextid');
+        if (typeof submissiondata === 'undefined') {
+            submissiondata = '';
+        }
+        if (typeof attemptnumber === 'undefined') {
+            attemptnumber = -1;
+        }
+        // Skip reloading if it is the same user.
+        if (this._lastUserId == userid && this._lastAttemptNumber == attemptnumber && submissiondata === '') {
+            return;
+        }
+        this._lastUserId = userid;
+        this._lastAttemptNumber = attemptnumber;
+        $(document).trigger('start-loading-user');
+        // Tell behat to back off too.
+        window.M.util.js_pending('mod-assign-loading-user');
+        // First insert the loading template.
+        templates.render('mod_assign/loading', {}).done(function(html, js) {
+            // Update the page.
+            this._niceReplaceNodeContents(this._region, html, js).done(function() {
+                if (userid > 0) {
+                    this._region.show();
+                    // Reload the grading form "fragment" for this user.
+                    var params = { userid: userid, attemptnumber: attemptnumber, jsonformdata: JSON.stringify(submissiondata) };
+                    fragment.loadFragment('mod_assign', 'gradingpanel', contextid, params).done(function(html, js) {
+                        this._niceReplaceNodeContents(this._region, html, js)
+                        .done(function() {
+                            checker.saveFormState('[data-region="grade-panel"] .gradeform');
+                            $('[data-region="attempt-chooser"]').on('click', this._chooseAttempt.bind(this));
+                            this._addPopoutButtons('[data-region="grade-panel"] .gradeform');
+                            $(document).trigger('finish-loading-user');
+                            // Tell behat we are friends again.
+                            window.M.util.js_complete('mod-assign-loading-user');
+                        }.bind(this))
+                        .fail(notification.exception);
+                    }.bind(this)).fail(notification.exception);
+                } else {
+                    this._region.hide();
+                    var reviewPanel = $('[data-region="review-panel"]');
+                    if (reviewPanel.length) {
+                        this._niceReplaceNodeContents(reviewPanel, '', '');
+                    }
+                    $(document).trigger('finish-loading-user');
+                    // Tell behat we are friends again.
+                    window.M.util.js_complete('mod-assign-loading-user');
+                }
+            }.bind(this));
+        }.bind(this)).fail(notification.exception);
+    };
+
+    return GradingPanel;
+});

mod/assign/amd/src/grading_review_panel.js

@@ -0,0 +1,62 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Javascript controller for the "Review" panel at the left of the page.
+ *
+ * @module     mod_assign/grading_review_panel
+ * @package    mod_assign
+ * @class      GradingReviewPanel
+ * @copyright  2016 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(['jquery'], function($) {
+
+    /**
+     * GradingReviewPanel class.
+     *
+     * @class GradingReviewPanel
+     * @param {String} selector The selector for the page region containing the user navigation.
+     */
+    var GradingReviewPanel = function() {
+        this._region = $('[data-region="review-panel"]');
+    };
+
+    /** @type {JQuery} JQuery node for the page region containing the user navigation. */
+    GradingReviewPanel.prototype._region = null;
+
+    /**
+     * It is first come first served to get ownership of the grading review panel.
+     * There can be only one.
+     *
+     * @public
+     * @method getReviewPanel
+     * @param {String} pluginname - the first plugin to ask for the panel gets it.
+     * @return {DOMNode} or false
+     */
+    GradingReviewPanel.prototype.getReviewPanel = function(pluginname) {
+        var owner = this._region.data('panel-owner');
+        if (typeof owner == "undefined") {
+            this._region.data('review-panel-plugin', pluginname);
+        }
+        if (this._region.data('review-panel-plugin') == pluginname) {
+            return this._region[0];
+        }
+        return false;
+    };
+
+    return GradingReviewPanel;
+});

mod/assign/amd/src/participant_selector.js

@@ -0,0 +1,113 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Custom auto-complete adapter to load users from the assignment list_participants webservice.
+ *
+ * @module     mod_assign/participants_selector
+ * @copyright  2015 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['core/ajax', 'jquery', 'core/templates'], function(ajax, $, templates) {
+
+
+    return /** @alias module:mod_assign/participants_selector */ {
+
+        // Public variables and functions.
+        /**
+         * Process the results returned from transport (convert to value + label)
+         *
+         * @method processResults
+         * @param {String} selector
+         * @param {Array} data
+         * @return {Array}
+         */
+        processResults: function(selector, data) {
+            var results = [], i = 0;
+            for (i = 0; i < data.length; i++) {
+                results[i] = { value: data[i].id, label: data[i].label };
+            }
+            return results;
+        },
+
+        /**
+         * Fetch results based on the current query. This also renders each result from a template before returning them.
+         *
+         * @method transport
+         * @param {String} selector Selector for the original select element
+         * @param {String} query Current search string
+         * @param {Function} success Success handler
+         * @param {Function} failure Failure handler
+         */
+        transport: function(selector, query, success, failure) {
+            var assignmentid = $(selector).attr('data-assignmentid');
+            var filters = $('[data-region="configure-filters"] input[type="checkbox"]');
+            var filterstrings = [];
+
+            filters.each(function(index, element) {
+                filterstrings[$(element).attr('name')] = $(element).prop('checked');
+            });
+
+            var promise = ajax.call([{
+                methodname: 'mod_assign_list_participants', args: { assignid: assignmentid, groupid: 0, filter: query, limit: 30 }
+            }]);
+
+            promise[0].then(function(results) {
+                var promises = [];
+                var identityfields = $('[data-showuseridentity]').data('showuseridentity').split(',');
+
+                // We got the results, now we loop over them and render each one from a template.
+                $.each(results, function(index, user) {
+                    var ctx = user,
+                        identity = [],
+                        show = true;
+
+                    if (filterstrings.filter_submitted && !user.submitted) {
+                        show = false;
+                    }
+                    if (filterstrings.filter_notsubmitted && user.submitted) {
+                        show = false;
+                    }
+                    if (filterstrings.filter_requiregrading && !user.requiregrading) {
+                        show = false;
+                    }
+                    if (show) {
+                        $.each(identityfields, function(i, k) {
+                            if (typeof user[k] !== 'undefined' && user[k] !== '') {
+                                ctx.hasidentity = true;
+                                identity.push(user[k]);
+                            }
+                        });
+                        ctx.identity = identity.join(', ');
+                        promises.push(templates.render('mod_assign/list_participant_user_summary', ctx));
+                    }
+                });
+
+                // When all the templates have been rendered, call the success handler.
+                $.when.apply($.when, promises).then(function() {
+                    var args = arguments,
+                        i = 0;
+
+                    $.each(results, function(index, user) {
+                        user.label = args[i];
+                        i++;
+                    });
+
+                    success(results);
+                });
+            }, failure);
+        }
+    };
+});