https://moprkrosno.pl/js/concept_carousel_v1_0.js

1	/* Concept Carousele
2Slider / karuzela do przesuwania zawartości lewo prawo
3v 1.04
4
5Concept Intermedia
6http://sam3.pl
7napisał: Maciej Dejewski
8
9Last modified:
102019-05-10
11
12@TODO: Usprawnić resize - powinienem usuwać najpierw strony i wrappery i potem mierzyć rozmiary (są wewnątrz strony - to wpływa na rozmiar banerów)
13*/
14
15if (typeof globalpause == 'undefined') {
16	globalPause=false;
17}
18
19
20function conceptCarousel(jQuery,con,options){
21	
22	var $=jQuery;
23//	console.log('conceptCarousel',con);
24	
25	var outlineWidth=0;	//	extra odstęp żeby outline nie był przycięty
26	
27	var source = null;
28	copy();
29	
30	if (options.autoPlay===null) options.autoPlay = true;
31	if (options.navArrows===null) options.navArrows = true;
32	if (options.navPager===null) options.navPager=false;
33	if (options.step===null) options.step=0;
34	if (options.delay===null) options.delay=3000;
35	if (options.transitionSpeed===null) options.transitionSpeed=500;
36	if (options.loop===null) options.loop=true;
37	if (options.dragSupport===null) options.dragSupport=false;
38	if (options.minimalMargin===null) options.minimalMargin=30;
39	if (options.maxMargin===null) options.maxMargin=100;
40	if (options.alignPagesWithSpace===null) options.alignPagesWithSpace='center';
41	if (typeof(options.enableTouchGestures)=='undefined') options.enableTouchGestures=true;
42	options.transitionSpeed=500;
43	//options.delay=0;
44	//options.autoPlay = false;
45	
46	var paused=false;
47	var mouseOver=false;
48	var focusIn=false;
49	
50	var ul = $('ul',con);
51	var els = $('li',ul);
52	var total = els.length;
53	var currentPage = 0;
54	var pages = 0;
55	
56	var elW = [];
57	var totalWidth = 0;
58	//var pageWidth = $(con).width()+1-2*outlineWidth;
59	var pageWidth = $('.kar-wrapper',con).width()+0-2*outlineWidth;
60	var pageTransformWidth = pageWidth+2*outlineWidth;
61	var pagesW = [];
62	var direction = 'left';
63	
64	//	navigation
65	var navLeft = $('<div class="nav-arrow nav-left" aria-hidden="true"></div>');
66	var navRight = $('<div class="nav-arrow nav-right" aria-hidden="true"></div>');
67	var pager = $('<div class="pager" aria-hidden="true"></div>');
68
69	
70	
71	var focusinHandler = function(event){
72		//event.preventDefault();
73		focusIn=true;
74		
75		$('.kar-wrapper',con).scrollLeft(0);
76		var targetPage = $(this).parent().attr('data-page');
77		if (targetPage!=currentPage){
78			$('.ban-wrapper',con).css({transition:'0s'});
79			$('.ban-wrapper:not(.p-'+targetPage+')',con).css({transform:'translateX(-'+$(con).width()+'px)'});
80			$('.ban-wrapper.p-'+targetPage,con).css({transform:'translateX(0px)'});
81		}
82		currentPage=targetPage;
83		if (options.navPager) {
84			$('.pager-but',con).removeClass('current');
85			$('.but-'+currentPage,pager).addClass('current');
86		}
87		setTimeout(function(){
88			$('.ban-wrapper',con).css({transition:options.transitionSpeed/1000+'s'});
89		},10);
90	};
91	
92	var focusoutHandler = function(event){
93		focusIn=false;
94		if ((pages>1) &&
95			(options.autoPlay) &&
96			(!mouseOver) &&
97			(!focusIn)) {
98			startTimer();
99		}
100	}
101	
102	if (options.navArrows) {
103		$(con).append(navLeft,navRight);
104	}
105	if (options.navPager) {
106		$(con).append(pager);
107	}
108	
109	var getElData = function(restore){
110		var curPageWidth = 0;
111		var curPage = 0;
112		pageWidth = $('.kar-wrapper',con).width()+0-2*outlineWidth;
113		pagesW[curPage] = 0;
114		$('li',con).attr('class','').css({transition:'0s',transform:'translateX(0)'});
115		for (var i=0;i<total;i++){
116			if (!restore) {
117				if (elW[i]!==0 && $(els[i]).width()===0){
118				}
119				else {
120					elW[i]=$(els[i]).width();
121				}
122			}
123			if ((curPageWidth + elW[i] + options.minimalMargin) > pageWidth) {
124				if (i != 0) {
125					curPage ++;
126				}
127				curPageWidth = 0;
128				pagesW[curPage] = 0;
129				
130				$(els[i-1]).addClass('last-on-page');
131			}
132			$(els[i]).attr('data-id',i);
133			$(els[i]).attr('data-width',elW[i]);
134			curPageWidth += elW[i];
135			pagesW[curPage] = pagesW[curPage] + elW[i];
136			curPageWidth += options.minimalMargin;
137			$(els[i]).addClass('ban-wrapper ban p-'+curPage);
138			$(els[i]).attr('data-page',curPage);
139			totalWidth += elW[i];
140			
141			//cc('elW i= '+i,elW[i]);
142		}
143		$(els[els.length-1]).addClass('last-on-page');
144		
145		pages = curPage+1;
146		totalWidth+=2;
147		$(ul).css({width:totalWidth});
148	};
149	
150	var setElOffset = function(){
151		for (var i=0;i<pages;i++){
152				var pels = $('.p-'+i,con);
153				var pageMargin = (pageWidth - pagesW[i]) / (pels.length -1);
154				var pelsW = 0;
155				var extraStartMargin=0;
156				if (pageMargin > options.maxMargin) {
157					pageMargin=options.minimalMargin;
158					extraStartMargin=(pageWidth - pagesW[i] - options.minimalMargin*(pels.length-1))/2;
159					if (options.alignPagesWithSpace=='center')
160						pelsW+=extraStartMargin;
161				};
162				for (var i1=0;i1<pels.length;i1++){
163					var wid = parseInt($(pels[i1]).attr('data-width'));
164					$(pels[i1]).css({left:pelsW,position:'absolute'});
165					pelsW += wid+pageMargin;
166				}
167		}
168	};
169	
170	
171	
172	var showPage = function(targetPage,direction){
173		//console.log('showPage '+targetPage + direction);
174		
175		targetPage = parseInt(targetPage);
176		$('li',con).css({transition:options.transitionSpeed/1000+'s'});
177		
178		if (direction==='left'){
179			$('.p-'+targetPage,con).css({transition:'0s'});
180			setTimeout(function(){
181				$('.p-'+targetPage,con).css({transform:'translateX('+pageTransformWidth+'px)'});
182				setTimeout(function(){
183					$('.p-'+targetPage,con).css({transition:options.transitionSpeed/1000+'s',transform:'translateX(0px)'});	
184				},20);
185			},20);
186			$('.p-'+currentPage,con).css({transform:'translateX(-'+pageTransformWidth+'px)'});
187		}
188		
189		if (direction==='right'){
190			$('.p-'+targetPage,con).css({transition:'0s'});
191			setTimeout(function(){
192				$('.p-'+targetPage,con).css({transform:'translateX(-'+pageTransformWidth+'px)'});
193				setTimeout(function(){
194					$('.p-'+targetPage,con).css({transition:options.transitionSpeed/1000+'s',transform:'translateX(0px)'});
195				},20);
196			},20);
197			$('.p-'+currentPage,con).css({transform:'translateX('+pageTransformWidth+'px)'});
198		}
199		
200		currentPage=targetPage;
201		if (options.navPager) {
202			$('.pager-but',con).removeClass('current');
203			$('.but-'+currentPage,pager).addClass('current');
204		}
205		stopTimer();
206		startTimer();
207	};
208	
209		
210	var navLeftClickHandler = function(){
211		var targetPage = currentPage+1;
212		if (targetPage>=pages)
213			targetPage=0;
214		showPage(targetPage,'left');
215		//cc('navPrev',1);
216	};
217	var navRightClickHandler = function(){
218		var targetPage = currentPage-1;
219		if (targetPage<0)
220			targetPage=pages-1;
221		showPage(targetPage,'right');
222		//cc('navPrev',1);
223	};
224	var pagerClickHandler = function(e){
225		var targetPage = parseInt($(e.target).attr('data-id'));
226		if (targetPage>(-1)){
227			var direction='left';
228			if (targetPage!=currentPage){
229				if (targetPage<currentPage) direction = 'right'
230				showPage(targetPage,direction);
231			}
232		}
233	};
234	var autoPlayTimer = null;
235	
236	var stopTimer = function(){clearInterval(autoPlayTimer)};
237	var startTimer = function(){
238		//cc('startTimer()',111);
239		stopTimer();
240		autoPlayTimer = setInterval(function(){
241			if (!focusIn && !mouseOver && !globalPause){
242				var targetPage=currentPage+1;
243				var dir='left';
244				if (targetPage >= pages){
245					targetPage=0;
246					//dir='right';

247				}
248				showPage(targetPage,dir);
249			}
250		},options.delay);
251	};
252	
253	
254	$(navLeft).click(navLeftClickHandler);
255	$(navRight).click(navRightClickHandler);
256	$(pager).click(pagerClickHandler);
257	$('a',con).focusin(focusinHandler);
258	$('a',con).focusout(focusoutHandler);
259	$(con).mouseenter(function(){mouseOver=true;});
260	$(con).mouseleave(function(){
261		mouseOver=false;
262		if ((pages>1) &&
263			(options.autoPlay) &&
264			(!mouseOver) &&
265			(!focusIn)) {
266			startTimer();
267		}
268	});
269	
270	var init = function(){
271		//	set positions for first page
272		//cc('init');
273		$('.ban:not(.p-0)',con).css({transition:'0s',transform:'translateX('+pageTransformWidth+'px)'});
274		setTimeout(function(){
275			$('li',con).css({transiton:'all '+options.transitionSpeed/1000+'s'});
276		},10);
277		
278		//	add pagination
279		if (options.navPager) {
280			$(pager).empty();
281			
282			if (pages>1) {
283				for (var i=0;i<pages;i++){
284					$(pager).append('<div class="pager-but but-'+i+'" data-id="'+i+'"></div>');
285				}
286				$('.pager-but.but-0',con).addClass('current');
287			}
288		}
289	};
290	
291	var resetElData = function(){
292		var tabW = $(con).parent().parent().parent().parent().width();
293		//console.log(tabW);
294		$(con).parent().parent().css({width:tabW,display:'block'});
295		$(con).parent().parent().parent().css({width:tabW,display:'block' });
296		
297		$(con).empty();
298		$(con).append(source);
299		
300		if (options.navArrows) {
301			$(con).append(navLeft,navRight);
302		}
303		if (options.navPager) {
304			$(con).append(pager);
305		}
306		
307		stopTimer();
308		
309		setTimeout(function(){
310			ul = null;
311			els=null;
312			ul = $('ul',con);
313			els = $('li',ul);
314			total = els.length;
315			currentPage = 0;
316			pages = 0;
317			
318			//elW = [];
319			totalWidth = 0;
320			pageWidth = $(con).width()+1-2*outlineWidth;
321			pageTransformWidth = pageWidth+2*outlineWidth;
322			pagesW = [];
323			direction = 'left';
324			
325			getElData(true);
326			setElOffset();
327			init();
328			
329			$(navLeft).click(navLeftClickHandler);
330			$(navRight).click(navRightClickHandler);
331			$(pager).click(pagerClickHandler);
332			if (pages>1) {
333				$('a',con).focusin(focusinHandler);
334				$('a',con).focusout(focusoutHandler);
335			}
336			
337			if ((pages>1) &&
338				(options.autoPlay) &&
339				(!mouseOver) &&
340				(!focusIn)) {
341				startTimer();
342			}
343			
344			//	setting height for zdrowie
345			var imageMaxHeight = 0;
346			var titleMaxHeight = 0;
347			for (var i=0;i<els.length;i++){
348				var im = $('img',els[i]);
349				var tit = $('.title',els[i]);
350				if ($(im).height() > imageMaxHeight) imageMaxHeight = $(im).height();
351				if ($(tit).height() > titleMaxHeight) titleMaxHeight = $(tit).height();
352			}
353			
354			var marginImgTitle= 30;
355			var marginTitlePager= 10;
356			var pagerHeight=20;
357			
358			$('.title .separator',con).css({
359				height:titleMaxHeight,
360				right:-15,
361				top:marginImgTitle
362			});
363			
364			//$(con).css({height:imageMaxHeight+marginImgTitle+titleMaxHeight+marginTitlePager+pagerHeight});
365			
366			if (pages>1) {
367				$(con).addClass('has-many-pages');
368			}
369			else {
370				$(con).removeClass('has-many-pages');
371			}
372		},10);
373	};
374	
375	function copy(){
376		source = $('.kar-wrapper',con).clone();
377	};
378	
379	
380	getElData(false);
381	setElOffset();
382	resetElData();
383	
384	$(window).resize($.debounce(250,resizeActions));
385	function resizeActions(){
386		getElData(false);
387		setElOffset();
388		resetElData();
389		
390	}
391	
392	//  touch swipe handler
393	
394	var leftPage = [];
395	var rightPage = [];
396	var thisPage = [];
397	
398	var touchStartX = 0;
399	var touchMoveX = 0;
400	var touchEndX = 0;
401	
402	var dragging = false;   //  true false flag
403	
404	var leftPageNum = 0;
405	var rightPageNum = 0;
406	
407	
408	//	swipe Handler
409	var enableTouchGestures = function(){
410		$(con).each(function(){
411			mc = new Hammer(this);
412			//mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
413			mc.on('swipeleft swiperight tap panleft panright panend',function(e){
414				//	PHOTO
415				
416				switch (e.type) {
417					
418					case 'swipeleft':
419						navLeftClickHandler();
420					break;
421					case 'swiperight':
422						navRightClickHandler();
423					break;
424					
425					case 'panleft':
426					return 0;
427					if (e.pointerType != 'mouse'){
428						var deltaX = e.deltaX;
429						var maxDeltaX = x/2;
430						if (deltaX<(-maxDeltaX)) deltaX=(-maxDeltaX);
431						var opacityOffset = 1 - (Math.abs(deltaX) / maxDeltaX) * 0.95;
432						$('.photo-image',gal).css('transform','translate3d('+deltaX+'px,0px,0px)');
433						$('.photo-image',gal).css('opacity',opacityOffset);
434						
435						//thumbnails
436						var deltaPercent = (Math.abs(deltaX) / maxDeltaX);
437						var deltaReversedPercent = 1 - deltaPercent;
438						var thumbnailsOpacityOffset = deltaPercent;
439						var thumbnailsScaleOffset = 0.5 + deltaPercent;
440						
441						//right thumbnail
442						var thumbnailsWidthOffset = $('.next-image-thumbnail img',gal).width() * deltaReversedPercent;
443						var thumbnailsLeftOffset = deltaReversedPercent * x/2 + thumbnailsWidthOffset;
444						if (thumbnailsLeftOffset<0) thumbnailsLeftOffset=0;
445						
446						if (e.deltaX < 0){
447							
448							$('.next-image-thumbnail img',gal).css({

449								opacity:thumbnailsOpacityOffset
450							});
451							$('.next-image-thumbnail',gal).css({
452								left:thumbnailsLeftOffset,
453								transform:'scale3d('+thumbnailsScaleOffset+','+thumbnailsScaleOffset+',1)'
454							});
455						}
456						
457						//left thumbnail
458						var thumbnailsWidthOffsetL = $('.prev-image-thumbnail img',gal).width() * deltaReversedPercent;
459						var thumbnailsLeftOffsetL = -(deltaReversedPercent * x/2 + thumbnailsWidthOffsetL);
460						if (thumbnailsLeftOffsetL>0) thumbnailsLeftOffsetL=0;
461						if (e.deltaX > 0){
462							$('.prev-image-thumbnail img',gal).css({
463								opacity:thumbnailsOpacityOffset
464							});
465							$('.prev-image-thumbnail',gal).css({
466								left:thumbnailsLeftOffsetL,
467								transform:'scale3d('+thumbnailsScaleOffset+','+thumbnailsScaleOffset+',1)'
468							});
469						}
470					}
471					break;
472				}
473			});
474		});
475	}
476	if ((options.enableTouchGestures) &&
477		(pages>1)) 
478		enableTouchGestures();
479	
480
481	getDistance = function (a,b){
482		return (a>b) ? a-b : b-a
483	}
484	
485	currentCubeSlide = 0;
486	
487	
488	if (pages>1) {
489		//$('.kar-wrapper',con).on('mousedown touchstart',onTouchStart);
490		//$('.kar-wrapper').on('mousemove touchmove',onTouchMove);
491		//$('body').on('mouseup touchend mouseleave',onTouchEnd);
492	}
493	
494	
495	if ((pages>1) &&
496		(options.autoPlay) &&
497		(!mouseOver) &&
498		(!focusIn)) {
499		startTimer();
500	}
501
502}