https://www.grenzgaengerroute.de/typo3conf/ext/skeleton/Resources/…/81_pl_timeline-vertical.js?1707145171

1(function($) {
2
3	function initTimelineVertical($timeline) {
4		var $slides = $timeline.find('.timeline-vertical__item'),
5			$media = $timeline.find('.timeline-vertical__media'),
6			$btns = $timeline.find('.js-timeline-vertical-btn'),
7			$btnMore = $timeline.find('.js-timeline-vertical-btn-showmore'),
8			$btnLess = $timeline.find('.js-timeline-vertical-btn-showless'),
9			maxitems = $timeline.data('timelineVerticalMaxItems') ? $timeline.data('timelineVerticalMaxItems') : false,
10			count = 0;
11
12		$slides.filter(':odd').addClass('timeline-vertical__item--odd').find('.timeline-vertical__media').addClass('timeline-vertical__media--odd');
13		$slides.filter(':even').addClass('timeline-vertical__item--even').find('.timeline-vertical__media').addClass('timeline-vertical__media--even');
14
15		if(maxitems && $slides.length > maxitems) {
16			$btnMore.show();
17			$btnLess.hide();
18			$btns.removeClass('hide');
19
20			$slides.each(function() {
21				var $elem = $(this);
22				$elem.removeClass('hide');
23				count++;
24				if(count > maxitems) {
25					$elem.addClass('js-timeline-vertical-toggle').hide();
26				}
27			});
28		} else {
29			$slides.removeClass('hide');
30		}
31
32		if(isPalm()) {
33			$media.addClass('timeline-vertical__media--inview');
34		} else {
35			$slides.each(function() {
36				var visible = false;
37				var $elem = $(this);
38				var waypoint = new Waypoint.Inview({
39					element: $elem,
40					entered: function(direction) {
41						if(!visible && direction == 'down') {
42							$elem.addClass('timeline-vertical__item--inview');
43							$elem.find('.timeline-vertical__media').addClass('timeline-vertical__media--inview');
44						}
45					}
46				});
47			});
48		}
49
50        $btnMore.on('click',function(event){
51            event.preventDefault();
52            $timeline.find('.js-timeline-vertical-toggle').slice(0,5).show().removeClass('js-timeline-vertical-toggle');
53			$btnLess.show();
54			if ($timeline.find('.js-timeline-vertical-toggle').length === 0) {
55				$(this).hide();
56			}
57            return false;
58        });
59
60        $btnLess.on('click',function(event){
61            event.preventDefault();
62            var sliceValue = -5;
63            var visible = $timeline.find('.timeline-vertical__item:not(.js-timeline-vertical-toggle)').length;
64            var remainder = visible % 5;
65            if(remainder !== 0 && (visible - remainder) / 5 !== 0){
66                sliceValue = -Math.abs(remainder);
67            }
68            $timeline.find('.timeline-vertical__item:not(.js-timeline-vertical-toggle)').slice(sliceValue).hide().addClass('js-timeline-vertical-toggle');
69            $btnMore.show();
70            $("html,body").animate({scrollTop: $timeline.find('.timeline-vertical__item:not(.js-timeline-vertical-toggle):last').offset().top - 30});
71            if ($timeline.find('.timeline-vertical__item:not(.js-timeline-vertical-toggle)').length <= 5) {
72				$(this).hide();
73			}
74            return false;
75        });
76	}
77
78	$(document).ready(function() {
79		var $timelineVertical = $('.timeline-vertical');
80
81		if(elementExists($timelineVertical)) {
82			initTimelineVertical($timelineVertical);
83		}
84	});
85
86})(jQuery);