jquery.gradebook.js 1.99 KB
Newer Older
1 2 3 4 5



var Gradebook = function($element) {
	var _this = this;
6 7 8 9 10 11
	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();
Tom Giannattasio committed
12
	var maxScroll = $gradeTable.width() - $grades.width();
13 14 15
	var $body = $('body');
	var mouseOrigin;
	var tableOrigin;
16

17 18 19
	var startDrag = function(e) {
		mouseOrigin = e.pageX;
		tableOrigin = $gradeTable.position().left;
Tom Giannattasio committed
20
		$body.css('-webkit-user-select', 'none');
21 22 23
		$body.bind('mousemove', moveDrag);
		$body.bind('mouseup', stopDrag);
	};
24

25 26 27
	var moveDrag = function(e) {
		var offset = e.pageX - mouseOrigin;
		var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0);
28

Tom Giannattasio committed
29
		updateHorizontalPosition(targetLeft);
30 31

		setShadows(targetLeft);
32 33
	};

34
	var stopDrag = function(e) {
Tom Giannattasio committed
35
		$body.css('-webkit-user-select', 'auto');
36 37
		$body.unbind('mousemove', moveDrag);
		$body.unbind('mouseup', stopDrag);
38 39
	};

40 41 42
	var setShadows = function(left) {
		var padding = 30;

Tom Giannattasio committed
43 44 45 46 47
		var leftPercent = clamp(-left / padding, 0, 1);
		$leftShadow.css('opacity', leftPercent);
	
		var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
		$rightShadow.css('opacity', rightPercent);
48 49 50
	};

	var clamp = function(val, min, max) {
51 52 53
	    if(val > max) return max;
	    if(val < min) return min;
	    return val;
54
	};
55

Tom Giannattasio committed
56 57 58 59 60 61 62 63 64 65 66 67 68
	var updateWidths = function(e) {
		maxScroll = $gradeTable.width() - $grades.width();
		var targetLeft = clamp($gradeTable.position().left, -maxScroll, 0);
		updateHorizontalPosition(targetLeft);
		setShadows(targetLeft);
	}

	var updateHorizontalPosition = function(left) {
		$gradeTable.css({
			'left': left + 'px'
		});
	}

69 70 71 72 73 74
	$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);
Tom Giannattasio committed
75
	$(window).bind('resize', updateWidths);
76
}