added drag functionality
This commit is contained in:
Tom Giannattasio
BIN
lms/static/images/search-icon.png
Normal file
BIN
lms/static/images/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,49 +1,66 @@
|
||||
/*
|
||||
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');
|
||||
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.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 startDrag = function(e) {
|
||||
mouseOrigin = e.pageX;
|
||||
tableOrigin = $gradeTable.position().left;
|
||||
$body.bind('mousemove', moveDrag);
|
||||
$body.bind('mouseup', stopDrag);
|
||||
};
|
||||
|
||||
_this.moveDrag = function(e) {
|
||||
var offset = e.pageX - _this.mouseOrigin;
|
||||
var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0);
|
||||
var moveDrag = function(e) {
|
||||
var offset = e.pageX - mouseOrigin;
|
||||
var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0);
|
||||
|
||||
console.log(offset);
|
||||
|
||||
_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);
|
||||
}
|
||||
@@ -1,12 +1,43 @@
|
||||
$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 {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user