Merge branch 'MDL-73612-master-2' of https://github.com/bmbrands/moodle

grade/report/grader/amd/build/stickycolspan.min.js

@@ -0,0 +1,2 @@
+define ("gradereport_grader/stickycolspan",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;var b={GRADEPARENT:".gradeparent",STUDENTHEADER:"#studentheader",TABLEHEADER:"th.header",BEHAT:"body.behat-site"};a.init=function init(){if(document.querySelector(b.BEHAT)){return}var a=document.querySelector(b.GRADEPARENT),c=a.querySelector(b.STUDENTHEADER),d=getComputedStyle(c).getPropertyValue("left"),e=getComputedStyle(c).getPropertyValue("right");a.querySelectorAll(b.TABLEHEADER).forEach(function(a){if(1<a.colSpan){var b=a.offsetWidth-c.offsetWidth;if(window.right_to_left()){a.style.right="calc("+e+" - "+b+"px )"}else{a.style.left="calc("+d+" - "+b+"px )"}}})}});
+//# sourceMappingURL=stickycolspan.min.js.map

grade/report/grader/amd/build/stickycolspan.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stickycolspan.js"],"names":["SELECTORS","GRADEPARENT","STUDENTHEADER","TABLEHEADER","BEHAT","init","document","querySelector","grader","studentHeader","leftOffset","getComputedStyle","getPropertyValue","rightOffset","querySelectorAll","forEach","tableHeader","colSpan","addOffset","offsetWidth","window","right_to_left","style","right","left"],"mappings":"kJAuBMA,CAAAA,CAAS,CAAG,CACdC,WAAW,CAAE,cADC,CAEdC,aAAa,CAAE,gBAFD,CAGdC,WAAW,CAAE,WAHC,CAIdC,KAAK,CAAE,iBAJO,C,QAUE,QAAPC,CAAAA,IAAO,EAAM,CACtB,GAAIC,QAAQ,CAACC,aAAT,CAAuBP,CAAS,CAACI,KAAjC,CAAJ,CAA6C,CACzC,MACH,CAHqB,GAIhBI,CAAAA,CAAM,CAAGF,QAAQ,CAACC,aAAT,CAAuBP,CAAS,CAACC,WAAjC,CAJO,CAKhBQ,CAAa,CAAGD,CAAM,CAACD,aAAP,CAAqBP,CAAS,CAACE,aAA/B,CALA,CAMhBQ,CAAU,CAAGC,gBAAgB,CAACF,CAAD,CAAhB,CAAgCG,gBAAhC,CAAiD,MAAjD,CANG,CAOhBC,CAAW,CAAGF,gBAAgB,CAACF,CAAD,CAAhB,CAAgCG,gBAAhC,CAAiD,OAAjD,CAPE,CAStBJ,CAAM,CAACM,gBAAP,CAAwBd,CAAS,CAACG,WAAlC,EAA+CY,OAA/C,CAAuD,SAACC,CAAD,CAAiB,CACpE,GAA0B,CAAtB,CAAAA,CAAW,CAACC,OAAhB,CAA6B,CACzB,GAAMC,CAAAA,CAAS,CAAIF,CAAW,CAACG,WAAZ,CAA0BV,CAAa,CAACU,WAA3D,CACA,GAAIC,MAAM,CAACC,aAAP,EAAJ,CAA4B,CACxBL,CAAW,CAACM,KAAZ,CAAkBC,KAAlB,CAA0B,QAAUV,CAAV,CAAwB,KAAxB,CAAgCK,CAAhC,CAA4C,MACzE,CAFD,IAEO,CACHF,CAAW,CAACM,KAAZ,CAAkBE,IAAlB,CAAyB,QAAUd,CAAV,CAAuB,KAAvB,CAA+BQ,CAA/B,CAA2C,MACvE,CACJ,CACJ,CATD,CAUH,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Javascript module for fixing the position of sticky headers with multiple colspans\n *\n * @module      gradereport_grader/stickycolspan\n * @copyright   2022 Bas Brands <bas@moodle.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst SELECTORS = {\n    GRADEPARENT: '.gradeparent',\n    STUDENTHEADER: '#studentheader',\n    TABLEHEADER: 'th.header',\n    BEHAT: 'body.behat-site'\n};\n\n/**\n * Initialize module\n */\nexport const init = () => {\n    if (document.querySelector(SELECTORS.BEHAT)) {\n        return;\n    }\n    const grader = document.querySelector(SELECTORS.GRADEPARENT);\n    const studentHeader = grader.querySelector(SELECTORS.STUDENTHEADER);\n    const leftOffset = getComputedStyle(studentHeader).getPropertyValue('left');\n    const rightOffset = getComputedStyle(studentHeader).getPropertyValue('right');\n\n    grader.querySelectorAll(SELECTORS.TABLEHEADER).forEach((tableHeader) => {\n        if (tableHeader.colSpan > 1) {\n            const addOffset = (tableHeader.offsetWidth - studentHeader.offsetWidth);\n            if (window.right_to_left()) {\n                tableHeader.style.right = 'calc(' + rightOffset + ' - ' + addOffset + 'px )';\n            } else {\n                tableHeader.style.left = 'calc(' + leftOffset + ' - ' + addOffset + 'px )';\n            }\n        }\n    });\n};\n"],"file":"stickycolspan.min.js"}

grade/report/grader/amd/src/stickycolspan.js

@@ -0,0 +1,53 @@
+// 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 module for fixing the position of sticky headers with multiple colspans
+ *
+ * @module      gradereport_grader/stickycolspan
+ * @copyright   2022 Bas Brands <bas@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const SELECTORS = {
+    GRADEPARENT: '.gradeparent',
+    STUDENTHEADER: '#studentheader',
+    TABLEHEADER: 'th.header',
+    BEHAT: 'body.behat-site'
+};
+
+/**
+ * Initialize module
+ */
+export const init = () => {
+    if (document.querySelector(SELECTORS.BEHAT)) {
+        return;
+    }
+    const grader = document.querySelector(SELECTORS.GRADEPARENT);
+    const studentHeader = grader.querySelector(SELECTORS.STUDENTHEADER);
+    const leftOffset = getComputedStyle(studentHeader).getPropertyValue('left');
+    const rightOffset = getComputedStyle(studentHeader).getPropertyValue('right');
+
+    grader.querySelectorAll(SELECTORS.TABLEHEADER).forEach((tableHeader) => {
+        if (tableHeader.colSpan > 1) {
+            const addOffset = (tableHeader.offsetWidth - studentHeader.offsetWidth);
+            if (window.right_to_left()) {
+                tableHeader.style.right = 'calc(' + rightOffset + ' - ' + addOffset + 'px )';
+            } else {
+                tableHeader.style.left = 'calc(' + leftOffset + ' - ' + addOffset + 'px )';
+            }
+        }
+    });
+};

grade/report/grader/index.php

@@ -44,8 +44,8 @@ $graderreportsifirst  = optional_param('sifirst', null, PARAM_NOTAGS);
 $graderreportsilast   = optional_param('silast', null, PARAM_NOTAGS);
 
 $PAGE->set_url(new moodle_url('/grade/report/grader/index.php', array('id'=>$courseid)));
-$PAGE->requires->yui_module('moodle-gradereport_grader-gradereporttable', 'Y.M.gradereport_grader.init', null, null, true);
 $PAGE->set_pagelayout('report');
+$PAGE->requires->js_call_amd('gradereport_grader/stickycolspan', 'init');
 
 // basic access checks
 if (!$course = $DB->get_record('course', array('id' => $courseid))) {

grade/report/grader/lib.php

@@ -682,16 +682,17 @@ class grade_report_grader extends grade_report {
         $studentheader->scope = 'col';
         $studentheader->header = true;
         $studentheader->id = 'studentheader';
-        if ($hasuserreportcell) {
-            $studentheader->colspan = 2;
-        }
         $studentheader->text = $arrows['studentname'];
-
         $headerrow->cells[] = $studentheader;
 
+        if ($hasuserreportcell) {
+            $emptyheader = new html_table_cell();
+            $headerrow->cells[] = $emptyheader;
+        }
+
         foreach ($extrafields as $field) {
             $fieldheader = new html_table_cell();
-            $fieldheader->attributes['class'] = 'header userfield user' . $field;
+            $fieldheader->attributes['class'] = 'userfield user' . $field;
             $fieldheader->scope = 'col';
             $fieldheader->header = true;
             $fieldheader->text = $arrows[$field];
@@ -1305,10 +1306,11 @@ class grade_report_grader extends grade_report {
             $controlsrow->attributes['class'] = 'controls';
             $controlscell = new html_table_cell();
             $controlscell->attributes['class'] = 'header controls';
+            $controlscell->header = true;
             $controlscell->colspan = $colspan;
             $controlscell->text = $this->get_lang_string('controls', 'grades');
-
             $controlsrow->cells[] = $controlscell;
+
             $rows[] = $controlsrow;
         }
         return $rows;

grade/report/grader/yui/src/gradereporttable/build.json

@@ -1,11 +0,0 @@
-{
-    "name": "moodle-gradereport_grader-gradereporttable",
-    "builds": {
-        "moodle-gradereport_grader-gradereporttable": {
-            "jsfiles": [
-                "gradereporttable.js",
-                "floatingheaders.js"
-            ]
-        }
-    }
-}

grade/report/grader/yui/src/gradereporttable/js/gradereporttable.js

@@ -1,142 +0,0 @@
-// 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/>.
-/* eslint-disable no-unused-vars */
-
-/**
- * Grader Report Functionality.
- *
- * @module    moodle-gradereport_grader-gradereporttable
- * @package   gradereport_grader
- * @copyright 2014 UC Regents
- * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- * @author    Alfonso Roman <aroman@oid.ucla.edu>
- */
-
-/**
- * @module moodle-gradereport_grader-gradereporttable
- */
-
-var SELECTORS = {
-        FOOTERTITLE: '.avg .header',
-        FOOTERCELLS: '#user-grades .avg .cell',
-        FOOTERROW: '#user-grades .avg',
-        GRADECELL: 'td.grade',
-        GRADERTABLE: '.gradeparent table',
-        GRADEPARENT: '.gradeparent',
-        HEADERCELLS: '#user-grades .heading .cell',
-        HEADERCELL: '.gradebook-header-cell',
-        HEADERROW: '#user-grades tr.heading',
-        STUDENTHEADER: '#studentheader',
-        USERCELL: '#user-grades .user.cell',
-        USERMAIL: '#user-grades .useremail'
-    },
-    CSS = {
-        OVERRIDDEN: 'overridden',
-        TOOLTIPACTIVE: 'tooltipactive'
-    };
-
-/**
- * The Grader Report Table.
- *
- * @namespace M.gradereport_grader
- * @class ReportTable
- * @constructor
- */
-function ReportTable() {
-    ReportTable.superclass.constructor.apply(this, arguments);
-}
-
-Y.extend(ReportTable, Y.Base, {
-    /**
-     * Array of EventHandles.
-     *
-     * @type EventHandle[]
-     * @property _eventHandles
-     * @protected
-     */
-    _eventHandles: [],
-
-    /**
-     * A Node reference to the grader table.
-     *
-     * @property graderTable
-     * @type Node
-     */
-    graderTable: null,
-
-    /**
-     * Setup the grader report table.
-     *
-     * @method initializer
-     */
-    initializer: function() {
-        // Some useful references within our target area.
-        this.graderRegion = Y.one(SELECTORS.GRADEPARENT);
-        this.graderTable = Y.one(SELECTORS.GRADERTABLE);
-
-        // Setup the floating headers.
-        this.setupFloatingHeaders();
-    },
-
-    /**
-     * Get the text content of the username for the specified grade item.
-     *
-     * @method getGradeUserName
-     * @param {Node} cell The grade item cell to obtain the username for
-     * @return {String} The string content of the username cell.
-     */
-    getGradeUserName: function(cell) {
-        var userrow = cell.ancestor('tr'),
-            usercell = userrow.one("th.user .username");
-
-        if (usercell) {
-            return usercell.get('text');
-        } else {
-            return '';
-        }
-    },
-
-    /**
-     * Get the text content of the item name for the specified grade item.
-     *
-     * @method getGradeItemName
-     * @param {Node} cell The grade item cell to obtain the item name for
-     * @return {String} The string content of the item name cell.
-     */
-    getGradeItemName: function(cell) {
-        var itemcell = Y.one("th.item[data-itemid='" + cell.getData('itemid') + "']");
-        if (itemcell) {
-            return itemcell.get('text');
-        } else {
-            return '';
-        }
-    },
-
-    /**
-     * Get the text content of any feedback associated with the grade item.
-     *
-     * @method getGradeFeedback
-     * @param {Node} cell The grade item cell to obtain the item name for
-     * @return {String} The string content of the feedback.
-     */
-    getGradeFeedback: function(cell) {
-        return cell.getData('feedback');
-    }
-});
-
-Y.namespace('M.gradereport_grader').ReportTable = ReportTable;
-Y.namespace('M.gradereport_grader').init = function(config) {
-    return new Y.M.gradereport_grader.ReportTable(config);
-};

grade/report/grader/yui/src/gradereporttable/meta/gradereporttable.json

@@ -1,12 +0,0 @@
-{
-    "moodle-gradereport_grader-gradereporttable": {
-        "requires": [
-            "base",
-            "node",
-            "event",
-            "handlebars",
-            "overlay",
-            "event-hover"
-        ]
-    }
-}

theme/boost/scss/moodle/debug.scss

@@ -51,6 +51,18 @@ body.behat-site {
     &.jsenabled #page-footer .footer-content-popover {
         display: block;
     }
+
+    &.path-grade-report-grader .gradeparent {
+        tr.heading,
+        tr.lastrow,
+        th.header {
+            position: relative;
+            left: auto;
+        }
+        tr.heading {
+            top: auto;
+        }
+    }
 }
 
 .phpinfo table,

theme/boost/scss/moodle/grade.scss

@@ -424,6 +424,32 @@
         table .clickable {
             cursor: pointer;
         }
+
+        tr.heading {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+
+        tr.lastrow {
+            position: sticky;
+            bottom: 0;
+            z-index: 1;
+
+            td,
+            th {
+                border-top: 1px solid $table-border-color;
+            }
+        }
+
+        th.header {
+            position: sticky;
+            left: -3rem;
+        }
+
+        td.noborder {
+            border-right: transparent;
+        }
     }
 }
 

theme/boost/style/moodle.css

@@ -19522,6 +19522,26 @@ p.arrow_button {
 .path-grade-report-grader .gradeparent table .clickable {
   cursor: pointer; }
 
+.path-grade-report-grader .gradeparent tr.heading {
+  position: sticky;
+  top: 0;
+  z-index: 1; }
+
+.path-grade-report-grader .gradeparent tr.lastrow {
+  position: sticky;
+  bottom: 0;
+  z-index: 1; }
+  .path-grade-report-grader .gradeparent tr.lastrow td,
+  .path-grade-report-grader .gradeparent tr.lastrow th {
+    border-top: 1px solid #dee2e6; }
+
+.path-grade-report-grader .gradeparent th.header {
+  position: sticky;
+  left: -3rem; }
+
+.path-grade-report-grader .gradeparent td.noborder {
+  border-right: transparent; }
+
 /**
  * User report.
  */
@@ -19803,6 +19823,15 @@ body.behat-site [data-region="message-drawer"] {
 body.behat-site.jsenabled #page-footer .footer-content-popover {
   display: block; }
 
+body.behat-site.path-grade-report-grader .gradeparent tr.heading,
+body.behat-site.path-grade-report-grader .gradeparent tr.lastrow,
+body.behat-site.path-grade-report-grader .gradeparent th.header {
+  position: relative;
+  left: auto; }
+
+body.behat-site.path-grade-report-grader .gradeparent tr.heading {
+  top: auto; }
+
 .phpinfo table,
 .phpinfo th,
 .phpinfo h2 {

theme/classic/scss/classic/post.scss

@@ -116,6 +116,16 @@
     }
 }
 
+.path-grade-report-grader .gradeparent {
+    tr.heading {
+        top: $navbar-height;
+    }
+
+    th.header {
+        left: 0;
+    }
+}
+
 // The block column needs some padding on small devices.
 @include media-breakpoint-down(sm) {
     .blockcolumn,

theme/classic/style/moodle.css

@@ -19522,6 +19522,26 @@ p.arrow_button {
 .path-grade-report-grader .gradeparent table .clickable {
   cursor: pointer; }
 
+.path-grade-report-grader .gradeparent tr.heading {
+  position: sticky;
+  top: 0;
+  z-index: 1; }
+
+.path-grade-report-grader .gradeparent tr.lastrow {
+  position: sticky;
+  bottom: 0;
+  z-index: 1; }
+  .path-grade-report-grader .gradeparent tr.lastrow td,
+  .path-grade-report-grader .gradeparent tr.lastrow th {
+    border-top: 1px solid #dee2e6; }
+
+.path-grade-report-grader .gradeparent th.header {
+  position: sticky;
+  left: -3rem; }
+
+.path-grade-report-grader .gradeparent td.noborder {
+  border-right: transparent; }
+
 /**
  * User report.
  */
@@ -19749,6 +19769,15 @@ body.behat-site [data-region="message-drawer"] {
 body.behat-site.jsenabled #page-footer .footer-content-popover {
   display: block; }
 
+body.behat-site.path-grade-report-grader .gradeparent tr.heading,
+body.behat-site.path-grade-report-grader .gradeparent tr.lastrow,
+body.behat-site.path-grade-report-grader .gradeparent th.header {
+  position: relative;
+  left: auto; }
+
+body.behat-site.path-grade-report-grader .gradeparent tr.heading {
+  top: auto; }
+
 .phpinfo table,
 .phpinfo th,
 .phpinfo h2 {
@@ -21544,6 +21573,12 @@ body {
     .show > .btn-outline-warning.dropdown-toggle:focus {
       box-shadow: 0 0 0 0.2rem rgba(166, 103, 14, 0.5); }
 
+.path-grade-report-grader .gradeparent tr.heading {
+  top: 50px; }
+
+.path-grade-report-grader .gradeparent th.header {
+  left: 0; }
+
 @media (max-width: 767.98px) {
   .blockcolumn,
   .region-main {