implmenet nicer scrolling & add documentation

1 files changed, 58 insertions, 23 deletions

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index bd8a6e7..670c2de 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -43,31 +43,36 @@ $(function() {
 	var
 		$program = $('.program'),
 		$now = $program.find('.now'),
-		$lastUpcoming,
-		manualControl = false,
-		doRewind = false,
-		rewindTimeout;
+		scrollLock = false,
+		rewindTimeout,
+		rewindTime = 10000 /* 10 seconds after manual navigation */,
 
-	$program.on('mouseenter mouseleave touchstart touchend', function(e) {
-		manualControl = (e.type == 'mouseenter');
+		scrollDuration = 500 /* 1/2s animation on the scolling element */;
 
+	$program.on('mouseenter mouseleave touchstart touchend', function(e) {
 		if(e.type == 'mouseleave' || e.type == 'touchend') {
 			rewindTimeout = setTimeout(function() {
-				doRewind = true;
+				scrollLock = false;
 			}, 5000);
 		} else {
 			clearTimeout(rewindTimeout);
+			scrollLock = true;
 		}
 	});
 
-	function interval() {
-		// program timing
+	// program now-marker & scrolling
+	function interval(initial) {
 		var
+			// offset to the browsers realtime (for simulation
 			offset = $('.program').data('offset'),
+
+			// corrected "now" timestamp in unix-counting (seconds, not microseconds)
 			now = (Date.now() / 1000) - offset;
 
-		// find upcoming block
-		var $upcoming = $program
+		// only check the first room (shouldn't matter anyway)
+		// find the newest block that starts in the past
+		// that's the one that is most probably currently still running
+		var $block = $program
 			.find('.room')
 			.first()
 			.find('.block')
@@ -76,25 +81,55 @@ $(function() {
 			}).last();
 
 		var
-			start = $upcoming.data('start'),
-			end = $upcoming.data('end'),
+			// start & end-timestamp
+			start = $block.data('start'),
+			end = $block.data('end'),
+
+			// place of the now-marker between 0 and 1 within this block
 			normalized = Math.max(0, Math.min(1, (now - start) / (end - start))),
-			px = $upcoming.position().left + ($upcoming.outerWidth() * normalized);
 
-		//console.log($upcoming.get(0), normalized, px);
+			// projected to pixels with respect to the programms left end
+			px = $block.position().left + ($block.outerWidth() * normalized),
+
+			// visible width of the program display
+			displayw = $program.width(),
+
+			// current scroll position
+			scrollx = $program.scrollLeft(),
+
+			// distance of the now-marker to the left border of the program display
+			px_in_display = px - scrollx;
+
+		//console.log($block.get(0), new Date(start*1000), new Date(now*1000), new Date(end*1000), normalized, px);
 		$now.css('width', px);
-		if(doRewind || (!$upcoming.is($lastUpcoming) && !manualControl))
-		{
-			$program.scrollTo($upcoming, {
+
+		// scrolling is locked by manual interaction
+		if(scrollLock)
+			return;
+
+		if(
+			// now marker is > 2/3 of the program-display-width
+			px_in_display > (displayw * 2/3) || 
+
+			// now marker is <1/7 of the program-display-width
+			px_in_display < (displayw/7)
+		) {
+			// scroll program so that now-marker is as 1/5 of the screen
+			$program.stop().scrollTo(px - displayw/6, {
 				axis: 'x',
-				offset: -100,
-				duration: $lastUpcoming ? 500 : 0
+				duration: initial ? 0 : scrollDuration,
 			});
-			$lastUpcoming = $upcoming;
-			doRewind = false;
 		}
 	}
 
+	// initial trigger
+	interval(true);
+
+	// timed triggers
 	setInterval(interval, 500);
-	interval();
+
+	// trigger when a tab was changed
+	$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
+		interval(true);
+	});
 });