From d282604d9ce275d537e7b3d26190947cb8beac60 Mon Sep 17 00:00:00 2001 From: zbdd Date: Mon, 1 Sep 2014 05:25:02 +0000 Subject: [PATCH 1/2] MDL-46936 gradereport_grader: AJAX fixes for gradereport Fixed functionality of arrow-key movement on all browsers. Added in ESC key during non-edit mode to revert any changes to a cell. Fixed positioning of analysis icon in cells being edited. Corrected AJAX not loading problem, id no longer supplied to module.js. This issue is a part of the MDL-46658 Task. This issue is a part of the MDL-25544 Epic. --- grade/report/grader/module.js | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/grade/report/grader/module.js b/grade/report/grader/module.js index 9effafe..5a191f5 100644 --- a/grade/report/grader/module.js +++ b/grade/report/grader/module.js @@ -3,10 +3,6 @@ */ M.gradereport_grader = { /** - * @param {Array} reports An array of instantiated report objects - */ - reports : [], - /** * @namespace M.gradereport_grader * @param {Object} reports A collection of classes used by the grader report module */ @@ -16,16 +12,15 @@ M.gradereport_grader = { * * @function * @param {YUI} Y - * @param {String} id The id attribute of the reports table * @param {Object} cfg A configuration object * @param {Array} An array of items in the report * @param {Array} An array of users on the report * @param {Array} An array of feedback objects * @param {Array} An array of student grades */ - init_report : function(Y, id, cfg, items, users, feedback, grades) { + init_report : function(Y, cfg, items, users, feedback, grades) { // Create the actual report - this.reports[id] = new this.classes.report(Y, id, cfg, items, users, feedback, grades); + new this.classes.report(Y, cfg, items, users, feedback, grades); } }; @@ -41,13 +36,12 @@ M.gradereport_grader = { * @constructor * @this {M.gradereport_grader} * @param {YUI} Y - * @param {int} id The id of the table to attach the report to * @param {Object} cfg Configuration variables * @param {Array} items An array containing grade items * @param {Array} users An array containing user information * @param {Array} feedback An array containing feedback information */ -M.gradereport_grader.classes.report = function(Y, id, cfg, items, users, feedback, grades) { +M.gradereport_grader.classes.report = function(Y, cfg, items, users, feedback, grades) { this.Y = Y; this.isediting = (cfg.isediting); this.ajaxenabled = (cfg.ajaxenabled); @@ -222,8 +216,21 @@ M.gradereport_grader.classes.ajax.prototype.make_editable = function(e) { break; } this.current.replace().attach_key_events(); + }; /** + * Handles escaping from cell on keypress + * + * @function + * @this {M.gradereport_grader.classes.ajax} + * @param {Event} e + */ +M.gradereport_grader.classes.ajax.prototype.keypress_escape = function(e) { + this.current.revert(); + this.grade = this.oldfeedback; + this.current = null; +} +/** * Callback function for the user pressing the enter key on an editable field * * @function @@ -627,7 +634,7 @@ M.gradereport_grader.classes.existingfield = function(ajax, userid, itemid) { this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.grade, 'press:9+shift', this)); // Handle Shift+Tab this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.feedback, 'press:9', this, true)); // Handle Tab this.keyevents.push(this.report.Y.on('key', this.keypress_enter, this.feedback, 'press:13', this)); // Handle the Enter key being pressed - this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.feedback, 'press:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys + this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.feedback, 'down:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys // Override the default tab movements for fields in the same cell this.keyevents.push(this.report.Y.on('key', function(e){e.preventDefault();this.grade.focus();}, this.feedback, 'press:9+shift', this)); @@ -636,7 +643,7 @@ M.gradereport_grader.classes.existingfield = function(ajax, userid, itemid) { this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.grade, 'press:9', this)); // Handle Tab and Shift+Tab } this.keyevents.push(this.report.Y.on('key', this.keypress_enter, this.grade, 'press:13', this)); // Handle the Enter key being pressed - this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.grade, 'press:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys + this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.grade, 'down:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys }; /** * Attach the required properties and methods to the existing field class @@ -789,9 +796,9 @@ M.gradereport_grader.classes.textfield = function(report, node) { this.report = report; this.node = node; this.gradespan = node.one('.gradevalue'); - this.inputdiv = this.report.Y.Node.create('
'); + this.inputdiv = this.report.Y.Node.create(''); this.editfeedback = this.report.ajax.showquickfeedback; - this.grade = this.report.Y.Node.create(''); + this.grade = this.report.Y.Node.create(''); this.gradetype = 'value'; this.inputdiv.append(this.grade); if (this.report.ajax.showquickfeedback) { @@ -979,10 +986,12 @@ M.gradereport_grader.classes.textfield.prototype.attach_key_events = function() this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.grade, 'press:9+shift', a)); // Handle Shift+Tab this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.feedback, 'press:9', a, true)); // Handle Tab this.keyevents.push(this.report.Y.on('key', a.keypress_enter, this.feedback, 'press:13', a)); // Handle the Enter key being pressed + this.keyevents.push(this.report.Y.on('key', a.keypress_escape, this.feedback, 'down:27', a)); // Handle the Esc key being pressed } else { this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.grade, 'press:9', a)); // Handle Tab and Shift+Tab } this.keyevents.push(this.report.Y.on('key', a.keypress_enter, this.grade, 'press:13', a)); // Handle the Enter key being pressed + this.keyevents.push(this.report.Y.on('key', a.keypress_escape, this.grade, 'down:27', a)); // Handle the Esc key being pressed // Setup the arrow key events this.keyevents.push(this.report.Y.on('key', a.keypress_arrows, this.grade.ancestor('td'), 'down:37,38,39,40+ctrl', a)); // Handle CTRL + arrow keys // Prevent the default key action on all fields for arrow keys on all key events! -- 1.9.1 From d642c0523417ee6911e08a25780e449eb15efcd5 Mon Sep 17 00:00:00 2001 From: Zachary Durber Date: Wed, 3 Sep 2014 07:38:39 +0000 Subject: [PATCH 2/2] MDL-46936 gradereport_grader: Fixes for AJAX editing on the grade report RTL support for keyboard navigation. New function for editing_cancelled. Fixed CSS style which cause the feedback field to extend over the next cell. Removed broken TAB code from non-edit mode. This issue is a part of the MDL-46658 Task. This issue is a part of the MDL-25544 Epic. --- grade/report/grader/module.js | 50 ++++++++++++++++++++++++++++++++---------- grade/report/grader/styles.css | 1 - 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/grade/report/grader/module.js b/grade/report/grader/module.js index 5a191f5..b22790a 100644 --- a/grade/report/grader/module.js +++ b/grade/report/grader/module.js @@ -226,8 +226,19 @@ M.gradereport_grader.classes.ajax.prototype.make_editable = function(e) { * @param {Event} e */ M.gradereport_grader.classes.ajax.prototype.keypress_escape = function(e) { + this.editing_cancelled(); +} +/** + * Deselect cell and revert changes + * + * @function + * @this {M.gradereport_grader.classes.ajax} + * @param {Event} e + */ +M.gradereport_grader.classes.ajax.prototype.editing_cancelled = function() { this.current.revert(); - this.grade = this.oldfeedback; + this.grade = this.oldgrade; + this.feedback = this.oldfeedback; this.current = null; } /** @@ -269,6 +280,16 @@ M.gradereport_grader.classes.ajax.prototype.keypress_tab = function(e, ignoreshi M.gradereport_grader.classes.ajax.prototype.keypress_arrows = function(e) { e.preventDefault(); var next = null; + if (right_to_left()) { + switch (e.keyCode) { + case 37: + e.keyCode = 39; // Right + break; + case 39: + e.keyCode = 37; // Left + break; + } + } switch (e.keyCode) { case 37: // Left next = this.get_prev_cell(); @@ -305,7 +326,7 @@ M.gradereport_grader.classes.ajax.prototype.process_editable_field = function(ne if (next) { this.make_editable(next, null); } -}; +} /** * Gets the next cell that is editable (right) * @function @@ -631,16 +652,16 @@ M.gradereport_grader.classes.existingfield = function(ajax, userid, itemid) { this.feedback.on('blur', this.submit, this); // Override the default tab movements when moving between cells - this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.grade, 'press:9+shift', this)); // Handle Shift+Tab - this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.feedback, 'press:9', this, true)); // Handle Tab + this.keyevents.push(this.feedback.on('key', this.keypress_tab, 'down:9+shift', this)); // Handle Shift+Tab + this.keyevents.push(this.grade.on('key', this.keypress_tab, 'down:9', this)); // Handle Tab and Shift+Tab this.keyevents.push(this.report.Y.on('key', this.keypress_enter, this.feedback, 'press:13', this)); // Handle the Enter key being pressed this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.feedback, 'down:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys // Override the default tab movements for fields in the same cell this.keyevents.push(this.report.Y.on('key', function(e){e.preventDefault();this.grade.focus();}, this.feedback, 'press:9+shift', this)); - this.keyevents.push(this.report.Y.on('key', function(e){if (e.shiftKey) {return;}e.preventDefault();this.feedback.focus();}, this.grade, 'press:9', this)); + this.keyevents.push(this.report.Y.on('key', function(e){if (e.shiftKey) {return;}e.preventDefault();this.feedback.focus();}, this.grade, 'down:9', this)); } else { - this.keyevents.push(this.report.Y.on('key', this.keypress_tab, this.grade, 'press:9', this)); // Handle Tab and Shift+Tab + this.keyevents.push(this.grade.on('key', this.keypress_tab, 'down:9', this)); // Handle Tab and Shift+Tab } this.keyevents.push(this.report.Y.on('key', this.keypress_enter, this.grade, 'press:13', this)); // Handle the Enter key being pressed this.keyevents.push(this.report.Y.on('key', this.keypress_arrows, this.grade, 'down:37,38,39,40+ctrl', this)); // Handle CTRL + arrow keys @@ -696,6 +717,16 @@ M.gradereport_grader.classes.existingfield.prototype.keypress_tab = function(e, */ M.gradereport_grader.classes.existingfield.prototype.keypress_arrows = function(e) { var next = null; + if (right_to_left()) { + switch (e.keyCode) { + case 37: + e.keyCode = 39; // Right + break; + case 39: + e.keyCode = 37; // Left + break; + } + } switch (e.keyCode) { case 37: // Left next = this.report.ajax.get_prev_cell(this.grade.ancestor('td')); @@ -755,7 +786,6 @@ M.gradereport_grader.classes.existingfield.prototype.submit = function() { if (!this.has_changed()) { return; } - var properties = this.report.get_cell_info([this.userid,this.itemid]); var values = (function(f){ var feedback, oldfeedback = null; @@ -798,7 +828,7 @@ M.gradereport_grader.classes.textfield = function(report, node) { this.gradespan = node.one('.gradevalue'); this.inputdiv = this.report.Y.Node.create(''); this.editfeedback = this.report.ajax.showquickfeedback; - this.grade = this.report.Y.Node.create(''); + this.grade = this.report.Y.Node.create(''); this.gradetype = 'value'; this.inputdiv.append(this.grade); if (this.report.ajax.showquickfeedback) { @@ -983,12 +1013,8 @@ M.gradereport_grader.classes.textfield.prototype.attach_key_events = function() var a = this.report.ajax; // Setup the default key events for tab and enter if (this.editfeedback) { - this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.grade, 'press:9+shift', a)); // Handle Shift+Tab - this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.feedback, 'press:9', a, true)); // Handle Tab this.keyevents.push(this.report.Y.on('key', a.keypress_enter, this.feedback, 'press:13', a)); // Handle the Enter key being pressed this.keyevents.push(this.report.Y.on('key', a.keypress_escape, this.feedback, 'down:27', a)); // Handle the Esc key being pressed - } else { - this.keyevents.push(this.report.Y.on('key', a.keypress_tab, this.grade, 'press:9', a)); // Handle Tab and Shift+Tab } this.keyevents.push(this.report.Y.on('key', a.keypress_enter, this.grade, 'press:13', a)); // Handle the Enter key being pressed this.keyevents.push(this.report.Y.on('key', a.keypress_escape, this.grade, 'down:27', a)); // Handle the Esc key being pressed diff --git a/grade/report/grader/styles.css b/grade/report/grader/styles.css index 3f96811..d9a08e1 100644 --- a/grade/report/grader/styles.css +++ b/grade/report/grader/styles.css @@ -169,7 +169,6 @@ font-weight: bold; color: red; font-size: 9px; - float: left; } .dir-rtl .gradeparent .excludedfloater { float: right; -- 1.9.1