Skip to content

E
edx-platform
Commit d673895e by Tom Giannattasio
Options

added drag functionality

parent defa5b31
Showing with 137 additions and 57 deletions
lms/static/js/jquery.gradebook.js
/*
var $gradebook;
$(document).ready(function() {
console.log('gradebook');
});
*/
var Gradebook = function($element) {
var _this = this;
_this.$element = $element;
_this.$grades = $element.find('.grade-table');
_this.maxScroll = _this.$grades.width() - _this.$element.find('.grades').width();
_this.body = $('body');
_this.startDrag = function(e) {
_this.mouseOrigin = e.pageX;
_this.tableOrigin = _this.$grades.position().left;
_this.body.bind('mousemove', _this.moveDrag);
_this.body.bind('mouseup', _this.stopDrag);
};
var $element = $element;
var $grades = $element.find('.grades');
var $gradeTable = $element.find('.grade-table');
var $leftShadow = $('<div class="left-shadow"></div>');
var $rightShadow = $('<div class="right-shadow"></div>');
var tableHeight = $gradeTable.height();
var maxScroll = $gradeTable.width() - $element.find('.grades').width();
var $body = $('body');
var mouseOrigin;
var tableOrigin;
_this.moveDrag = function(e) {
var offset = e.pageX - _this.mouseOrigin;
var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0);
var startDrag = function(e) {
mouseOrigin = e.pageX;
tableOrigin = $gradeTable.position().left;
$body.bind('mousemove', moveDrag);
$body.bind('mouseup', stopDrag);
};
console.log(offset);
var moveDrag = function(e) {
var offset = e.pageX - mouseOrigin;
var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0);
_this.$grades.css({
$gradeTable.css({
'left': targetLeft + 'px'
})
});
setShadows(targetLeft);
};
_this.stopDrag = function(e) {
_this.body.unbind('mousemove', _this.moveDrag);
_this.body.unbind('mouseup', _this.stopDrag);
var stopDrag = function(e) {
$body.unbind('mousemove', moveDrag);
$body.unbind('mouseup', stopDrag);
};
_this.clamp = function(val, min, max) {
var setShadows = function(left) {
var padding = 30;
if(left > -padding) {
var percent = -left / padding;
$leftShadow.css('opacity', percent);
}
if(left < -maxScroll + padding) {
var percent = (maxScroll + left) / padding;
$rightShadow.css('opacity', percent);
}
};
var clamp = function(val, min, max) {
if(val > max) return max;
if(val < min) return min;
return val;
}
};
_this.$element.bind('mousedown', _this.startDrag);
$leftShadow.css('height', tableHeight + 'px');
$rightShadow.css('height', tableHeight + 'px');
$grades.append($leftShadow).append($rightShadow);
setShadows(0);
$grades.css('height', tableHeight);
$gradeTable.bind('mousedown', startDrag);
}
\ No newline at end of file
lms/static/sass/course/_gradebook.scss
$cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8;
div.gradebook-wrapper {
@extend .table-wrapper;
section.gradebook-content {
@extend .content;
.student-search {
padding: 0 15px;
}
.student-search-field {
width: 230px;
height: 27px;
padding: 0 15px;
box-sizing: border-box;
border-radius: 13px;
border: 1px solid $table-border-color;
background: url(../images/search-icon.png) no-repeat 205px center #f6f6f6;
font-family: $sans-serif;
font-size: 11px;
@include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset);
outline: none;
@include transition(border-color .15s);
&::-webkit-input-placeholder,
&::-moz-input-placeholder {
font-style: italic;
}
&:focus {
border-color: #1d9dd9;
}
}
.student-table {
float: left;
width: 265px;
width: 264px;
border-radius: 3px 0 0 3px;
color: #3c3c3c;
......@@ -15,20 +46,20 @@ div.gradebook-wrapper {
}
tr:first-child td {
border-top: 1px solid #c8c8c8;
border-top: 1px solid $table-border-color;
border-radius: 5px 0 0 0;
}
tr:last-child td {
border-bottom: 1px solid #c8c8c8;
border-bottom: 1px solid $table-border-color;
border-radius: 0 0 0 5px;
}
td {
height: 50px;
padding-left: 20px;
border-bottom: 1px solid #e9e9e9;
border-left: 1px solid #c8c8c8;
border-bottom: 1px solid $cell-border-color;
border-left: 1px solid $table-border-color;
background: #f6f6f6;
font-size: 13px;
line-height: 50px;
......@@ -43,8 +74,26 @@ div.gradebook-wrapper {
position: relative;
float: left;
width: 800px;
height: 712px;
overflow: hidden;
.left-shadow,
.right-shadow {
position: absolute;
top: 0;
z-index: 9999;
width: 20px;
pointer-events: none;
}
.left-shadow {
left: 0;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
}
.right-shadow {
right: 0;
background: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
}
}
.grade-table {
......@@ -64,35 +113,39 @@ div.gradebook-wrapper {
}
thead th {
position: relative;
height: 50px;
background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2);
background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2);
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-align: center;
box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
&:after {
&:before {
content: '';
display: block;
position: absolute;
right: 0;
left: 0;
top: 0;
z-index: 9999;
width: 1px;
height: 50px;
background: #000;
height: 100%;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
}
&:first-child {
border-radius: 5px 0 0 0;
box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
&:before {
display: hidden;
}
}
&:last-child {
border-radius: 0 3px 0 0;
box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
}
.assignment {
......@@ -114,20 +167,25 @@ div.gradebook-wrapper {
}
}
tr {
border-right: 1px solid $table-border-color;
}
tr:first-child td {
border-top: 1px solid #c8c8c8;
border-top: 1px solid $table-border-color;
}
tr:last-child td {
border-bottom: 1px solid #c8c8c8;
border-bottom: 1px solid $table-border-color;
}
td {
height: 50px;
border-bottom: 1px solid #e9e9e9;
border-bottom: 1px solid $cell-border-color;
background: #f6f6f6;
font-size: 13px;
line-height: 50px;
border-left: 1px solid $cell-border-color;
}
tr:nth-child(even) td {
......
lms/templates/gradebook.html
......@@ -20,6 +20,12 @@
.grade_None {color:LightGray;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var gradebook = new Gradebook($('.gradebook-content'));
});
</script>
</%block>
<%include file="course_navigation.html" args="active_page=''" />
......@@ -32,7 +38,11 @@
<table class="student-table">
<thead>
<tr>
<th><input type="search" /></th>
<th>
<form class="student-search">
<input type="search" class="student-search-field" placeholder="Search students" />
</form>
</th>
</tr>
</thead>
<tbody>
......@@ -84,7 +94,7 @@
%for section in student['grade_summary']['section_breakdown']:
${percent_data( section['percent'] )}
%endfor
<th>${percent_data( student['grade_summary']['percent'])}</th>
<td>${percent_data( student['grade_summary']['percent'])}</td>
</tr>
%endfor
</tbody>
......@@ -97,8 +107,3 @@
</section>
<script type="text/javascript">
$(document).ready(function() {
var gradebook = new Gradebook($('.gradebook-content'));
});
</script>
\ No newline at end of file
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