new sequence nav functionality - accommodates an infinite number of items

2012-08-21 18:12:59 -04:00
parent 557975458c
commit e762844c35
6 changed files with 190 additions and 38 deletions
--- a/lms/static/js/jquery.sequence.js
+++ b/lms/static/js/jquery.sequence.js
@@ -0,0 +1,104 @@
+
+
+
+var SequenceNav = function($element) {
+	var _this = this;
+	var $element = $element;
+	var $wrapper = $element.find('.sequence-list-wrapper');
+	var $list = $element.find('#sequence-list');
+	var $arrows = $element.find('.sequence-nav-buttons');
+	var maxScroll = $list.width() - $wrapper.width() + 20;
+	var $leftShadow = $('<div class="left-shadow"></div>');
+	var $rightShadow = $('<div class="right-shadow"></div>');
+	var $body = $('body');
+	var listOrigin;
+	var mouseOrigin;
+
+	var startDrag = function(e) {
+		updateWidths();
+		mouseOrigin = e.pageX;
+		listOrigin = $list.position().left;
+		$body.css('-webkit-user-select', 'none');
+		$body.bind('mousemove', moveDrag);
+		$body.bind('mouseup', stopDrag);
+	};
+
+	var moveDrag = function(e) {
+		var offset = e.pageX - mouseOrigin;
+		var targetLeft = clamp(listOrigin + offset, -maxScroll, 0);
+
+		console.log('---------------');
+		console.log('offset: ' + offset);
+		console.log('target left: ' + targetLeft);
+		console.log('max: ' + maxScroll);
+
+		updateHorizontalPosition(targetLeft);
+
+		setShadows(targetLeft);
+	};
+
+	var stopDrag = function(e) {
+		$body.css('-webkit-user-select', 'auto');
+		$body.unbind('mousemove', moveDrag);
+		$body.unbind('mouseup', stopDrag);
+	};
+
+	var setShadows = function(left) {
+		var left = left || $list.position().left;
+		var padding = 30;
+
+		var leftPercent = clamp(-left / padding, 0, 1);
+		$leftShadow.css('opacity', leftPercent);
+	
+		var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
+		$rightShadow.css('opacity', rightPercent);
+	};
+
+	var clamp = function(val, min, max) {
+	    if(val > max) return max;
+	    if(val < min) return min;
+	    return val;
+	};
+
+	var updateWidths = function(e) {
+		maxScroll = $list.width() - $wrapper.width() + 20;
+		var targetLeft = clamp($list.position().left, -maxScroll, 0);
+		updateHorizontalPosition(targetLeft);
+		setShadows(targetLeft);
+	};
+
+	var updateHorizontalPosition = function(left) {
+		$list.css({
+			'left': left + 'px'
+		});
+	};
+
+	var checkPosition = function(e) {
+		var $active = $element.find('.active');
+		if(!$active[0]) {
+			return;
+		}
+		if($active.position().left + $active.width() > $wrapper.width() - $list.position().left) {
+			$list.animate({
+				'left': (-$active.position().left + $wrapper.width() - $active.width() - 10) + 'px'
+			}, {
+				step: setShadows
+			});
+		} else if($active.position().left < -$list.position().left) {
+			$list.animate({
+				'left': (-$active.position().left + 10) + 'px'
+			}, {
+				step: setShadows
+			});
+		}
+	};
+
+	$wrapper.append($leftShadow).append($rightShadow);
+	setShadows(0);
+	$wrapper.bind('mousedown', startDrag);
+	$arrows.bind('click', checkPosition);
+	$(window).bind('resize', updateWidths);
+	setTimeout(function() {
+		checkPosition();
+	}, 200);	
+}