https://www.dvv-pokal.de/jakarta.faces.resource/js/components/Sams…?v=1a2b7f6e8f7d1f32880df3dadb0855ebff7214de

1var samsArticleTeaserHandler = new function () {
2  this.initialized = false;
3
4  this.init = function () {
5    this.initialized = true;
6
7    var componentSelector = '.samsTeaserArticleComponent';
8    var listWrapperSelector = '.samsTeaserListWrapper';
9    var listSelector = '.samsTeaserArticleList';
10    var scrollOffset = 34;
11    var interruptTimerToggleAfterSwipe = false;
12
13    var thumbnailSelector = '.samsArticleThumbnail';
14
15    var $lists = jQuery(componentSelector + ' ' + listSelector);
16
17    function toggleActive($component, $article) {
18      $component.find('.samsArticle').removeClass('active');
19      $article.addClass('active');
20
21      var $thumbnail = $article.find(thumbnailSelector);
22      var $list = $component.find(listSelector);
23      var thumbnailBottomPos = $thumbnail.position().top + $thumbnail.height();
24
25      if (thumbnailBottomPos > $list.height()) {
26        $list.scrollTo($article, 200, {
27          axis: 'y',
28          offset: $thumbnail.height() - $component.height() + scrollOffset
29        });
30      } else if ($thumbnail.position().top < 0) {
31        $list.scrollTo($article, 200, {
32          axis: 'y',
33          offset: -scrollOffset
34        });
35      }
36    }
37
38    var thumbnailHoverCallback = function (e) {
39      $thumbnail = jQuery(e.target);
40      var $component = $thumbnail.closest(componentSelector);
41      if (!$component.is('.teaserMode')) {
42        return true;
43      }
44
45      toggleActive($component, $thumbnail.closest('.samsArticle'));
46    };
47
48    var componentClickCallback = function (e) {
49      var $target = jQuery(e.target);
50      if ($target.closest('a:not(.samsPhotoSwipeAnchor)').length) {
51        // ignore clicks on links
52        return true;
53      }
54      var $component = $target.closest(componentSelector);
55      var $articleContainer = $component.find('.activeArticle');
56      var $article = $component.find('.samsArticle.active .fullArticle');
57
58      if ($component.is('.teaserMode')) {
59        $articleContainer.empty();
60        $article = $article.clone();
61        $articleContainer.append($article);
62        $component.removeClass('teaserMode');
63        $component.addClass('showMode');
64        $articleContainer.height($article.outerHeight(true));
65      } else {
66        $articleContainer.height($component.data('height'));
67        $component.removeClass('showMode');
68        $component.addClass('teaserMode');
69      }
70      return false;
71    };
72
73    var timerToggleActiveCallback = function () {
74      jQuery(componentSelector + '.teaserMode').find(
75          '.samsArticle.active').each(function (i, e) {
76        var $article = jQuery(e);
77        var $component = $article.closest(componentSelector);
78        if ($component.is(':hover') || interruptTimerToggleAfterSwipe) {
79          return;
80        }
81        var $nextArticle = jQuery(e).next();
82        if (!$nextArticle.length) {
83          $nextArticle = $component.find('.samsArticle:first-child');
84        }
85        toggleActive($component, $nextArticle);
86      });
87    };
88
89    var addSwipeDetectionForElement = function ($element, swipeCallback) {
90
91      var swipeDirection;
92      var startX;
93      var distX;
94      var startTime;
95
96      $element.on('touchstart', function ($event) {
97        var touchobj = $event.originalEvent.changedTouches[0];
98        swipeDirection = 'none';
99        startX = touchobj.pageX;
100        startTime = new Date().getTime();
101      })
102
103      $element.on('touchend', function ($event) {
104        var touchobj = $event.originalEvent.changedTouches[0];
105        distX = touchobj.pageX - startX;
106
107        swipeDirection = (distX < 0) ? 'left' : 'right';
108
109        swipeCallback(swipeDirection, $event.target);
110      })
111    }
112
113    var swipeCallback = function (swipedir, targetObject) {
114      var $activeArticleDiv = jQuery(targetObject);
115      var $component = $activeArticleDiv.closest(componentSelector);
116      var $currentActiveListArticle = $component.find('.samsArticle.active');
117
118      var $nextArticle;
119
120      switch (swipedir) {
121        case 'right':
122          $nextArticle = $currentActiveListArticle.prev();
123          if (!$nextArticle.length) {
124            //Stop swiping at the first article
125            $nextArticle = null;
126          }
127          break;
128        case 'left':
129          $nextArticle = $currentActiveListArticle.next();
130          if (!$nextArticle.length) {
131            //Swipe to the first article after the last one
132            $nextArticle = $component.find('.samsArticle:first-child');
133          }
134          break;
135      }
136
137      if ($nextArticle) {
138        interruptTimerToggleAfterSwipe = true;
139
140        window.setTimeout(function () {
141          interruptTimerToggleAfterSwipe = false;

142        }, 3000);
143
144        toggleActive($component, $nextArticle);
145      }
146    }
147
148    jQuery(componentSelector + ' ' + listWrapperSelector).click(
149        componentClickCallback);
150    jQuery(componentSelector + ' .activeArticle').click(componentClickCallback);
151
152    addSwipeDetectionForElement(jQuery(componentSelector + ' .activeArticle'),
153        swipeCallback);
154    addSwipeDetectionForElement(
155        jQuery(componentSelector + ' .samsArticleTeaserImage'), swipeCallback);
156    addSwipeDetectionForElement(
157        jQuery(componentSelector + ' .samsArticleHeader'), swipeCallback);
158
159    $lists.find(thumbnailSelector).mouseenter(thumbnailHoverCallback);
160    window.setInterval(timerToggleActiveCallback, 3000);
161  };
162};
163
164jQuery(window).on('load', function () {
165  if (!samsArticleTeaserHandler.initialized) {
166    samsArticleTeaserHandler.init();
167  }
168});