Fix Cell Selector

sakaiproject · Oct 24, 2024 · 966dd3d · 966dd3d
1 parent 64549b1
commit 966dd3d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/gradebookng/tool/src/webapp/scripts/gradebook-gbgrade-table.js b/gradebookng/tool/src/webapp/scripts/gradebook-gbgrade-table.js
@@ -722,6 +722,28 @@ GbGradeTable.studentCellFormatter = function(cell, formatterParams, onRendered)
   return td.innerHTML;
 };
 
+let prevSelectedCell = null;
+
+GbGradeTable.deselectCell = function () {
+  if (prevSelectedCell) {
+    prevSelectedCell.classList.remove("gb-cell-selected");
+    prevSelectedCell = null;
+  }
+};
+
+GbGradeTable.cellSelector = function (rowIndex, colIndex) {
+  GbGradeTable.deselectCell();
+
+  const cell = GbGradeTable.instance.getRows()[rowIndex]?.getCells()[colIndex]?.getElement();
+  if (!cell) return; 
+  cell.classList.add("gb-cell-selected");
+  prevSelectedCell = cell;
+
+  cell.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  cell.focus();
+};
+
+
 GbGradeTable.mergeColumns = function (data, fixedColumns) {
   return data.map((rowData, rowIndex) => {
     return [
@@ -882,6 +904,7 @@ GbGradeTable.renderTable = function (elementId, tableData) {
 
   GbGradeTable.instance.on("cellClick", (e, cell) => {
     if (e.target.closest('.gb-editable')) cell.edit();
+    GbGradeTable.deselectCell();
   });
 
   GbGradeTable.instance.on("cellEdited", function(cell) {
@@ -1574,7 +1597,7 @@ GbGradeTable.selectStudentCell = function(studentId) {
     row = GbGradeTable.rowForStudent(studentId);
   }
 
-  return GbGradeTable.instance.selectCell(row, GbGradeTable.STUDENT_COLUMN_INDEX);
+  return GbGradeTable.cellSelector(row, GbGradeTable.STUDENT_COLUMN_INDEX);
 };
 
 GbGradeTable.updateComment = function(assignmentId, studentId, comment) {
@@ -2354,7 +2377,7 @@ GbGradeTable.setupKeyboardNavigation = function() {
     if ($(this).is(":focus") && event.keyCode == 13) {
       event.stopImmediatePropagation();
       $(this).blur();
-      GbGradeTable.instance.selectCell(0,0);
+      GbGradeTable.cellSelector(0,0);
     }
   });
 
@@ -2503,7 +2526,7 @@ GbGradeTable.setupCellMetaDataSummary = function() {
 
         $("#"+cellKey).hide().on("click", ".gb-metadata-close", function() {
           GbGradeTable.hideMetadata();
-          GbGradeTable.instance.selectCell(row, col);
+          GbGradeTable.cellSelector(row, col);
         });
 
         $("#"+cellKey).hide().on("click", ".gb-revert-score", function(event) {
@@ -2517,7 +2540,7 @@ GbGradeTable.setupCellMetaDataSummary = function() {
             GbGradeTable.setCellState('reverted', row, col);
             GbGradeTable.redrawTable(true);
             GbGradeTable.hideMetadata();
-            GbGradeTable.instance.selectCell(row, col);
+            GbGradeTable.cellSelector(row, col);
           } else {
             // we need to reload the entire page
             location.reload();
@@ -2675,7 +2698,7 @@ GbGradeTable.showTooltip = function(target, data) {
 
   $tooltip.on('click', '.gb-metadata-close', function(event) {
     GbGradeTable.hideTooltip();
-    GbGradeTable.instance.selectCell(selected[0], selected[1]);
+    GbGradeTable.cellSelector(selected[0], selected[1]);
   });
 
   $tooltip.on('click', '.gb-gradebook-settings', function(event) {

diff --git a/library/src/skins/default/src/sass/modules/tool/gradebook/_gradebook.scss b/library/src/skins/default/src/sass/modules/tool/gradebook/_gradebook.scss
@@ -1742,3 +1742,8 @@ max-height:100px;
 .gb-cell-selected {
   border: 2px solid #a5dfa7 !important;
 }
+
+.gb-cell-selected {
+  background-color: rgba(173, 216, 230, 0.2); /* Subtle bluish background */
+  border: 2px solid rgba(173, 216, 230, 0.7);  /* Subtle bluish border */
+}