Skip to content

E
edx-platform
Commit 8b6c3757 by Amir Qayyum Khan Committed by Jamie Folsom
Options

Removed dragging and added tool tip to student record. 

Clarify and reformat some comments; rename a few functions to clarify those.

Convert tabs to spaces.

Fix inaccurate comment

Fixed jshint issues

Adjust how user-select is applied to the gradebook view. Add i18n for a string.

Allow selection when not dragging.
parent b92d239e
Showing with 151 additions and 107 deletions
lms/static/js/jquery.gradebook.js
...@@ -2,106 +2,129 @@ ...@@ -2,106 +2,129 @@
var Gradebook = function($element) { var Gradebook = function($element) {
var _this = this; "use strict";
var $element = $element; var $body = $('body');
var $body = $('body'); var $grades = $element.find('.grades');
var $grades = $element.find('.grades'); var $studentTable = $element.find('.student-table');
var $studentTable = $element.find('.student-table'); var $gradeTable = $element.find('.grade-table');
var $gradeTable = $element.find('.grade-table'); var $search = $element.find('.student-search-field');
var $search = $element.find('.student-search-field'); var $leftShadow = $('<div class="left-shadow"></div>');
var $leftShadow = $('<div class="left-shadow"></div>'); var $rightShadow = $('<div class="right-shadow"></div>');
var $rightShadow = $('<div class="right-shadow"></div>'); var tableHeight = $gradeTable.height();
var tableHeight = $gradeTable.height(); var maxScroll = $gradeTable.width() - $grades.width();
var maxScroll = $gradeTable.width() - $grades.width();
var mouseOrigin;
var mouseOrigin; var tableOrigin;
var tableOrigin;
var startDrag = function(e) {
var startDrag = function(e) { mouseOrigin = e.pageX;
mouseOrigin = e.pageX; tableOrigin = $gradeTable.position().left;
tableOrigin = $gradeTable.position().left; $body.addClass('no-select');
$body.css('-webkit-user-select', 'none'); $body.bind('mousemove', onDragTable);
$body.bind('mousemove', moveDrag); $body.bind('mouseup', stopDrag);
$body.bind('mouseup', stopDrag); };
};
/**
var moveDrag = function(e) { * - Called when the user drags the gradetable
var offset = e.pageX - mouseOrigin; * - Calculates targetLeft, which is the desired position
var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0); * of the grade table relative to its leftmost position, using:
* - the new x position of the user's mouse pointer;
updateHorizontalPosition(targetLeft); * - the gradebook's current x position, and;
* - the value of maxScroll (gradetable width - container width).
setShadows(targetLeft); * - Updates the position and appearance of the gradetable.
}; */
var onDragTable = function(e) {
var stopDrag = function(e) { var offset = e.pageX - mouseOrigin;
$body.css('-webkit-user-select', 'auto'); var targetLeft = clamp(tableOrigin + offset, maxScroll, 0);
$body.unbind('mousemove', moveDrag); updateHorizontalPosition(targetLeft);
$body.unbind('mouseup', stopDrag); setShadows(targetLeft);
}; };
var setShadows = function(left) { var stopDrag = function() {
var padding = 30; $body.removeClass('no-select');
$body.unbind('mousemove', onDragTable);
var leftPercent = clamp(-left / padding, 0, 1); $body.unbind('mouseup', stopDrag);
$leftShadow.css('opacity', leftPercent); };
var rightPercent = clamp((maxScroll + left) / padding, 0, 1); var setShadows = function(left) {
$rightShadow.css('opacity', rightPercent); var padding = 30;
};
var leftPercent = clamp(-left / padding, 0, 1);
var clamp = function(val, min, max) { $leftShadow.css('opacity', leftPercent);
if(val > max) return max;
if(val < min) return min; var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
return val; $rightShadow.css('opacity', rightPercent);
}; };
var updateWidths = function(e) { var clamp = function(val, min, max) {
maxScroll = $gradeTable.width() - $grades.width(); if(val > max) { return max; }
var targetLeft = clamp($gradeTable.position().left, -maxScroll, 0); if(val < min) { return min; }
updateHorizontalPosition(targetLeft); return val;
setShadows(targetLeft); };
};
/**
var updateHorizontalPosition = function(left) { * - Called when the browser window is resized.
$gradeTable.css({ * - Recalculates maxScroll (gradetable width - container width).
'left': left + 'px' * - Calculates targetLeft, which is the desired position
}); * of the grade table relative to its leftmost position, using:
}; * - the gradebook's current x position, and:
* - the new value of maxScroll
var highlightRow = function(e) { * - Updates the position and appearance of the gradetable.
$element.find('.highlight').removeClass('highlight'); */
var onResizeTable = function() {
var index = $(this).index(); maxScroll = $gradeTable.width() - $grades.width();
$studentTable.find('tr').eq(index + 1).addClass('highlight'); var targetLeft = clamp($gradeTable.position().left, maxScroll, 0);
$gradeTable.find('tr').eq(index + 1).addClass('highlight'); updateHorizontalPosition(targetLeft);
}; setShadows(targetLeft);
};
var filter = function(e) {
var term = $(this).val(); /**
if(term.length > 0) { * - Called on table drag and on window (table) resize.
$studentTable.find('tbody tr').hide(); * - Takes a integer value for the desired (pixel) offset from the left
$gradeTable.find('tbody tr').hide(); * (zero/origin) position of the grade table.
$studentTable.find('tbody tr:contains(' + term + ')').each(function(i) { * - Uses that value to position the table relative to its leftmost
$(this).show(); * possible position within its container.
$gradeTable.find('tr').eq($(this).index() + 1).show(); *
}); * @param {Number} left - The desired pixel offset from left of the
} else { * desired position. If the value is 0, the gradebook should be moved
$studentTable.find('tbody tr').show(); * all the way to the left side relative to its parent container.
$gradeTable.find('tbody tr').show(); */
} var updateHorizontalPosition = function(left) {
} $grades.scrollLeft(left);
};
$leftShadow.css('height', tableHeight + 'px');
$rightShadow.css('height', tableHeight + 'px'); var highlightRow = function() {
$grades.append($leftShadow).append($rightShadow); $element.find('.highlight').removeClass('highlight');
setShadows(0);
$grades.css('height', tableHeight); var index = $(this).index();
$gradeTable.bind('mousedown', startDrag); $studentTable.find('tr').eq(index + 1).addClass('highlight');
$element.find('tr').bind('mouseover', highlightRow); $gradeTable.find('tr').eq(index + 1).addClass('highlight');
$search.bind('keyup', filter); };
$(window).bind('resize', updateWidths);
} var filter = function() {
var term = $(this).val();
if(term.length > 0) {
$studentTable.find('tbody tr').hide();
$gradeTable.find('tbody tr').hide();
$studentTable.find('tbody tr:contains(' + term + ')').each(function() {
$(this).show();
$gradeTable.find('tr').eq($(this).index() + 1).show();
});
} else {
$studentTable.find('tbody tr').show();
$gradeTable.find('tbody tr').show();
}
};
$leftShadow.css('height', tableHeight + 'px');
$grades.append($leftShadow).append($rightShadow);
setShadows(0);
$grades.css('height', tableHeight);
$gradeTable.bind('mousedown', startDrag);
$element.find('tr').bind('mouseover', highlightRow);
$search.bind('keyup', filter);
$(window).bind('resize', onResizeTable);
};
......
lms/static/sass/course/_gradebook.scss
$cell-border-color: #e1e1e1; $cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8; $table-border-color: #c8c8c8;
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.gradebook-wrapper { div.gradebook-wrapper {
section.gradebook-content { section.gradebook-content {
...@@ -75,7 +84,8 @@ div.gradebook-wrapper { ...@@ -75,7 +84,8 @@ div.gradebook-wrapper {
position: relative; position: relative;
float: left; float: left;
width: 76%; width: 76%;
overflow: hidden; overflow-x: auto;
overflow-y: hidden;
.left-shadow, .left-shadow,
.right-shadow { .right-shadow {
......
lms/templates/courseware/gradebook.html
...@@ -74,13 +74,24 @@ from django.core.urlresolvers import reverse ...@@ -74,13 +74,24 @@ from django.core.urlresolvers import reverse
<thead> <thead>
<tr> <!-- Header Row --> <tr> <!-- Header Row -->
%for section in templateSummary['section_breakdown']: %for section in templateSummary['section_breakdown']:
<th><div class="assignment-label">${section['label']}</div></th> <%
tooltip_str = section['detail']
# We are making header labels from the first student record. So for tool tip (title),
# I am processing this string ```section['detail']``` from student record and removing
# all student related data i.e marks, percentage etc to get only the title of homework.
if "=" in section['detail']:
tooltip_str = section['detail'][0: section['detail'].rfind('=')]
if "-" in tooltip_str:
tooltip_str = tooltip_str[0: tooltip_str.rfind('-')]
%>
<th title="${tooltip_str}"><div class="assignment-label">${section['label']}</div></th>
%endfor %endfor
<th><div class="assignment-label">Total</div></th> <th title="${_('Total')}"><div class="assignment-label">${_('Total')}</div></th>
</tr> </tr>
</thead> </thead>
<%def name="percent_data(fraction)"> <%def name="percent_data(fraction, label)">
<% <%
letter_grade = 'None' letter_grade = 'None'
if fraction > 0: if fraction > 0:
...@@ -92,16 +103,16 @@ from django.core.urlresolvers import reverse ...@@ -92,16 +103,16 @@ from django.core.urlresolvers import reverse
data_class = "grade_" + letter_grade data_class = "grade_" + letter_grade
%> %>
<td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td> <td class="${data_class}" data-percent="${fraction}" title="${label}">${ "{0:.0f}".format( 100 * fraction ) }</td>
</%def> </%def>
<tbody> <tbody>
%for student in students: %for student in students:
<tr> <tr>
%for section in student['grade_summary']['section_breakdown']: %for section in student['grade_summary']['section_breakdown']:
${percent_data( section['percent'] )} ${percent_data( section['percent'], section['detail'] )}
%endfor %endfor
${percent_data( student['grade_summary']['percent'])} ${percent_data( student['grade_summary']['percent'], _('Total'))}
</tr> </tr>
%endfor %endfor
</tbody> </tbody>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment