https://service.essbay.de/_assets/1d08ad6d04e98e14156b3431099088f7/JavaScript/Src/NewsSlider.js?1750255392

1// IE console fix
2window.console || (console = {}, console.log=function(){});
3var newsSliderId = null;
4
5$(function(){
6
7	// news
8	$('.layout-list_detail_slide .header a').click(function(event){
9        event.preventDefault();
10		current = $(this).closest('.article').find('.body');
11		$(current).slideToggle();
12
13		$('.layout-list_detail_slide .body').each(function( index ) {
14			if($( this ).attr('id') != $( current ).attr('id') ) {
15				$( this ).slideUp( );
16			}
17		});
18
19	});
20
21	/**
22	 * check if element is in viewport
23	 * @returns {Boolean}
24	 */
25	$.fn.isInViewport = function () {
26		elementTop = $(this).offset().top;
27		elementBottom = elementTop + $(this).outerHeight();
28
29		viewportTop = $(window).scrollTop();
30		viewportBottom = viewportTop + $(window).height();
31		viewportWidth = $(window).width();
32		if(viewportWidth < 600) {
33			return true;
34		} else {
35			return elementTop > viewportTop && elementBottom < viewportBottom;
36		}
37
38	};
39	// -------------------------------
40	// slider news
41	// -------------------------------
42
43	var sliderSpeed = 3500;
44
45	// store actual slide with
46	$(window).on('resize', function(){
47		$( ".rsys-slider").each(function( index ) {
48			var slideWidth = $( this ).find( ".article" ).outerWidth() + 30;
49			$( this ).attr('data-slideWidth',slideWidth);
50		});
51	});
52	$( ".rsys-slider").each(function( index ) {
53		var slideWidth = $( this ).find( ".article" ).outerWidth() + 30;
54		$( this ).attr('data-slideWidth',slideWidth);
55	});
56
57	$('.slider-goto-item').click(function(event){
58        event.preventDefault();
59		var slider = $(this).parent().parent().prev();
60		var index = $(this).attr('data-index');
61
62		gotoSliderItem(slider, index);
63    });
64
65	/**
66	 * update dots
67	 *
68	 * @param {type} slider
69	 * @param {type} index
70	 * @returns {undefined}
71	 */
72	function updateDots(slider, index) {
73		$(slider).parent().find('.slider-goto-item').removeClass('active');
74		$(slider).parent().find('.slider-goto-item').eq(index).addClass('active');
75	}
76
77
78	/**
79	 * slider function called from timer
80	 *
81	 * @param {type} slider
82	 * @param {type} index
83	 * @returns {undefined}
84	 */

85	function gotoSliderItem(slider, index) {
86		updateDots(slider, index);
87		var posXcurrent = parseInt($( slider ).children('.news-list-inner').position().left) ;
88		var slideWidth = parseInt($( slider ).attr('data-slideWidth'));
89		posXcurrent = -1 *  index * slideWidth;
90		$(slider).attr('data-stopSlides',1);
91		$( slider ).children('.news-list-inner').animate({left: + posXcurrent  + 'px'});
92	}
93
94
95	/**
96	 * slider function called from timer
97	 *
98	 * @returns void
99	 */
100	function newsSlider() {
101		$( ".rsys-slider").each(function( index ) {
102			var posXcurrent = parseInt($( this ).children('.news-list-inner').position().left) ;
103			var slideWidth = parseInt($( this ).attr('data-slideWidth'));
104			var itemCount = parseInt($( this ).find('.news-list-inner').children('.article').length);
105			var width = itemCount * slideWidth;
106			var containerwidth = $( this ).width();
107
108			var itemCountVisible = containerwidth  - (containerwidth % slideWidth);
109			if(itemCountVisible < slideWidth) {
110				itemCountVisible = slideWidth;
111			}
112
113			posXcurrent = posXcurrent - slideWidth;
114			if(width + posXcurrent  < itemCountVisible ) {
115				posXcurrent = 0;
116			}
117			var stopSlides = parseInt($(this).attr('data-stopSlides'));
118			var isInViewport = $( this ).isInViewport();
119
120			if(stopSlides == 0 && isInViewport) {
121				$( this ).children('.news-list-inner').animate({left: + posXcurrent  + 'px'});
122				var index = -1 * posXcurrent /slideWidth;
123				updateDots(this, index);
124			}
125		});
126	}
127
128	function restartNewsSlider() {
129		clearInterval(newsSliderId);
130		newsSliderId = setInterval(newsSlider, sliderSpeed);
131	}
132
133	// start timer
134	newsSliderId = setInterval(newsSlider, sliderSpeed);
135
136
137	// assign events
138	$( ".rsys-slider" ).mousedown(dragStart);
139	$( ".rsys-slider" ).mouseleave(dragEnd);
140	$( ".rsys-slider" ).mouseleave(startSlides);
141	$( ".rsys-slider" ).mouseenter(stopSlides);
142
143
144	$( ".rsys-slider" ).on('touchstart', dragStart);
145	$( ".rsys-slider" ).on('touchmove', dragAction);
146	$( ".rsys-slider" ).on('touchend', dragEnd);
147
148	function startSlides(e) {
149		e = e || window.event;
150		$(e.currentTarget).attr('data-stopSlides',0);
151	}
152	function stopSlides(e) {
153		e = e || window.event;
154		$(e.currentTarget).attr('data-stopSlides',1);
155	}
156
157
158	/**
159	 * start drag event
160	 *
161	 * @param {event} e
162	 * @returns void
163	 */
164	function dragStart (e) {
165		//console.log('START');
166		e = e || window.event;
167		var posXsave = 0;
168
169		if (e.type == 'touchstart') {
170			posXsave = e.touches[0].clientX;
171		} else {
172			posXsave = e.clientX;
173			$(e.currentTarget).mousemove(dragAction);
174			$(e.currentTarget).mouseup(dragEnd);
175		}
176		$(e.currentTarget).attr('data-posXsave',posXsave);
177		$(e.currentTarget).attr('data-posXstart',posXsave);
178	}
179
180	/**
181	 * action drag event
182	 *
183	 * @param {event} e
184	 * @returns void
185	 */
186	function dragAction (e) {
187		e = e || window.event;
188		var posXnew = 0;
189
190		var posXsave = parseInt($(e.currentTarget).attr('data-posXsave'));
191		var slideWidth = parseInt($(e.currentTarget).attr('data-slideWidth'));
192
193		if (e.type == 'touchmove') {
194			posXdelta = posXsave - e.touches[0].clientX;
195			posXsave = e.touches[0].clientX;
196		} else {
197			posXdelta = posXsave - e.clientX;
198			posXsave = e.clientX;
199		}
200		var posXcurrent = parseInt($( e.currentTarget ).children('.news-list-inner').position().left);
201		var slideCount = parseInt($( e.currentTarget ).children('.news-list-inner').children('.article').length);
202
203		var itemsWidth = slideCount * slideWidth;
204		var viewportWidth = parseInt($( e.currentTarget ).children('.news-list-inner').width());
205
206		console.log('TO', e.clientX,'itemsWidth',itemsWidth, 'viewportWidth',viewportWidth, 'posXdelta', posXdelta, 'posXsave',posXsave, 'posXcurrent', posXcurrent, 'slideCount', slideCount);
207
208		$( e.currentTarget ).children('.news-list-inner').css('left', posXcurrent - posXdelta + 'px');
209
210		//console.log( posXcurrent, posXdelta,  posXcurrent - posXdelta, 'posXsave', posXsave, 'slideWidth', slideWidth,$(e.currentTarget));
211
212		$(e.currentTarget).attr('data-posXsave',posXsave);
213	}
214
215	/**
216	 * end drag event
217	 *
218	 * @param {event} e
219	 * @returns void
220	 */
221	function dragEnd (e) {
222		e = e || window.event;
223
224		var offs = 0;
225
226		var posXsave = parseInt($(e.currentTarget).attr('data-posXsave'));
227		var posXstart = parseInt($(e.currentTarget).attr('data-posXstart'));

228		var slideWidth = parseInt($(e.currentTarget).attr('data-slideWidth'));
229
230		// direction
231		if(posXstart > posXsave) {
232			offs = 3*slideWidth/4;
233		} else {
234			offs = 1*slideWidth/4;
235		}
236
237		// calculate position
238		var posXcurrent = $( e.currentTarget ).children('.news-list-inner').position().left - (offs) ;
239		var delta = posXcurrent  % slideWidth;
240		var posXsnapSlide = (posXcurrent - delta);
241		if(delta != 0) {
242			posXcurrent = posXsnapSlide;
243		}
244
245		var round = posXcurrent % slideWidth;
246		if(round != 0) {
247			posXcurrent = posXcurrent - round;
248		}
249		var index = -1 * posXcurrent /slideWidth;
250		updateDots(e.currentTarget, index);
251
252		var slideCount = parseInt($( e.currentTarget ).children('.news-list-inner').children('.article').length);
253		var itemsWidth = slideCount * slideWidth;
254		var viewportWidth = parseInt($( e.currentTarget ).children('.news-list-inner').width());
255		if(posXcurrent <  viewportWidth - itemsWidth) {
256			posXcurrent = viewportWidth - itemsWidth;
257		}
258		if(posXcurrent > 0) {
259			posXcurrent = 0;
260		}
261
262		// slide !
263		$( e.currentTarget ).children('.news-list-inner').animate({left: + posXcurrent  + 'px'});
264
265
266
267		// unbild events
268		$(e.currentTarget).unbind('mousemove');
269		$(e.currentTarget).unbind('mouseup');
270
271		restartNewsSlider();
272	}
273
274});