From 860a084e67a0d189c2b5af8e8c9e2d49c2c5e488 Mon Sep 17 00:00:00 2001
From: MaZderMind
Date: Sat, 8 Nov 2014 10:00:11 +0100
Subject: implmenet nicer scrolling & add documentation
---
assets/js/lustiges-script.js | 81 +++++++++++++++++++++++++++++++-------------
1 file 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);
+ });
});
--
cgit v1.2.3