https://staatstheater-hannover.de/media/scripts/timeline_datepicker.js

1
2function TimelineDatepicker(timelineContainer, selectedDateCallbackFunction) {
3    var self = this;
4    self.timelineContainer = timelineContainer;
5    self.selectedDateCallbackFunction = selectedDateCallbackFunction;
6    self.animDuration = 600;
7    self.scrolling = false;
8
9    self.init();
10}
11
12TimelineDatepicker.prototype.init = function () {
13    var self = this;
14    self.registerTimelineButtons();
15};
16
17TimelineDatepicker.prototype.registerTimelineButtons = function () {
18    var self = this;
19    var scrollIntervall = Math.round($(self.timelineContainer).width() / 2);
20    var ul = $(self.timelineContainer).find('ul.timeline');
21
22    $(self.timelineContainer).find('.bwd').on('click', function () {
23        if (self.scrolling)
24            return;
25        self.scrolling = true;
26
27        $(ul).animate({
28            scrollLeft: '-=' + scrollIntervall + 'px'
29        }, self.animDuration, function () {
30            self.scrolling = false;
31        });
32
33    });
34
35    $(self.timelineContainer).find('.fwd').on('click', function () {
36        if (self.scrolling)
37            return;
38        self.scrolling = true;
39
40        $(ul).animate({
41            scrollLeft: '+=' + scrollIntervall + 'px'
42        }, self.animDuration, function () {
43            self.scrolling = false;
44        });
45
46    });
47
48    $(self.timelineContainer).find('.timeline-day').on('click', function () {
49        self.scrollToDate($(this).data('date'));
50        self.selectedDateCallbackFunction($(this).data('date'));
51    });
52};
53
54TimelineDatepicker.prototype.scrollToDate = function (date) {
55    var self = this;
56    var ul = $(self.timelineContainer).find('ul.timeline');
57    var scrollIntervall = Math.round($(self.timelineContainer).width() / 2);
58    
59
60    var momentObj = moment(date, 'DD.MM.YYYY');
61    var momentString = momentObj.format('YYYY-MM-DD'); // 2016-07-15
62    console.log(momentString);
63
64    if (self.scrolling)
65        return;
66    self.scrolling = true;
67
68
69
70    var leftSpace = scrollIntervall ;
71    
72    if($(window).width() > 1280) {
73        leftSpace += (($(window).width() - 1280) / 2);
74    }
75
76    $(ul).animate({
77        scrollLeft: '+=' + ($('.timeline-day-' + momentString).offset().left - leftSpace) + 'px'
78    }, self.animDuration, function () {
79        self.scrolling = false;
80    });
81
82    $('.timeline-day').removeClass('active');
83    $('.timeline-day-' + momentString).addClass('active');
84};
85