https://kuznica.ug.gov.pl/js/concept_carousel_v1_0.js

1/* Concept Carousele
2 Slider / karuzela do przesuwania zawartości lewo prawo
3 v 1.04
4 
5 Concept Intermedia
6 http://sam3.pl
7 napisał: Maciej Dejewski
8 
9 Last modified:
10 2019-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{
17    globalPause = false;
18}
19
20
21function conceptCarousel(jQuery, con, options)
22{
23
24    var $ = jQuery;
25//	console.log('conceptCarousel',con);
26
27    var outlineWidth = 0;	//	extra odstęp żeby outline nie był przycięty
28
29    var source = null;
30    copy();
31
32    if (options.autoPlay === null)
33       
34        options.autoPlay = true;
35    if (options.navArrows === null)
36       
37        options.navArrows = true;
38    if (options.navPager === null)
39       
40        options.navPager = false;
41    if (options.step === null)
42       
43        options.step = 0;
44    if (options.delay === null)
45       
46        options.delay = 3000;
47    if (options.transitionSpeed === null)
48       
49        options.transitionSpeed = 500;
50    if (options.loop === null)
51       
52        options.loop = true;
53    if (options.dragSupport === null)
54       
55        options.dragSupport = false;
56    if (options.minimalMargin === null)
57       
58        options.minimalMargin = 30;
59    if (options.maxMargin === null)
60       
61        options.maxMargin = 100;
62    if (options.alignPagesWithSpace === null)
63       
64        options.alignPagesWithSpace = 'center';
65    if (typeof (options.enableTouchGestures) == 'undefined')
66       
67        options.enableTouchGestures = true;
68    options.transitionSpeed = 500;
69    //options.delay=0;
70    //options.autoPlay = false;
71
72    var paused = false;
73    var mouseOver = false;
74    var focusIn = false;
75
76    var ul = $('ul', con);
77    var els = $('li', ul);
78    var total = els.length;
79    var currentPage = 0;
80    var pages = 0;
81
82    var elW = [];
83    var totalWidth = 0;
84    //var pageWidth = $(con).width()+1-2*outlineWidth;
85    var pageWidth = $('.kar-wrapper', con).width() + 0 - 2 * outlineWidth;
86    var pageTransformWidth = pageWidth + 2 * outlineWidth;
87    var pagesW = [];
88    var direction = 'left';
89
90    //	navigation
91    var navLeft = $('<div class="nav-arrow nav-left" aria-hidden="true"></div>');
92    var navRight = $('<div class="nav-arrow nav-right" aria-hidden="true"></div>');
93    var pager = $('<div class="pager" aria-hidden="true"></div>');
94
95
96
97    var focusinHandler = function (event)
98    {
99        //event.preventDefault();
100        focusIn = true;
101
102        $('.kar-wrapper', con).scrollLeft(0);
103        var targetPage = $(this).parent().attr('data-page');
104        if (targetPage != currentPage)
105        {
106            $('.ban-wrapper', con).css({transition: '0s'});
107            $('.ban-wrapper:not(.p-' + targetPage + ')', con).css({transform: 'translateX(-' + $(con).width() + 'px)'});
108            $('.ban-wrapper.p-' + targetPage, con).css({transform: 'translateX(0px)'});
109        }
110        currentPage = targetPage;
111        if (options.navPager)
112        {
113            $('.pager-but', con).removeClass('current');
114            $('.but-' + currentPage, pager).addClass('current');
115        }
116        setTimeout(function ()
117        {
118            $('.ban-wrapper', con).css({transition: options.transitionSpeed / 1000 + 's'});
119        }, 10);
120    };
121
122    var focusoutHandler = function (event)
123    {
124        focusIn = false;
125        if ((pages > 1) &&
126            (options.autoPlay) &&
127            (!mouseOver) &&
128            (!focusIn))
129        {
130            startTimer();
131        }
132    }
133
134    if (options.navArrows)
135    {
136        $(con).append(navLeft, navRight);
137    }
138    if (options.navPager)
139    {
140        $(con).append(pager);
141    }
142
143    var getElData = function (restore)
144    {
145        var curPageWidth = 0;
146        var curPage = 0;
147        pageWidth = $('.kar-wrapper', con).width() + 0 - 2 * outlineWidth;
148        pagesW[curPage] = 0;
149        $('li', con).attr('class', '').css({transition: '0s', transform: 'translateX(0)'});
150        for (var i = 0; i < total; i++)
151        {
152            if (!restore)
153            {
154                if (elW[i] !== 0 && $(els[i]).width() === 0)
155                {
156                }
157                else
158                {
159                    elW[i] = $(els[i]).width();
160                }
161            }
162            if ((curPageWidth + elW[i] + options.minimalMargin) > pageWidth)
163            {
164                if (i != 0)
165                {
166                    curPage++;
167                }
168                curPageWidth = 0;
169                pagesW[curPage] = 0;
170

171                $(els[i - 1]).addClass('last-on-page');
172            }
173            $(els[i]).attr('data-id', i);
174            $(els[i]).attr('data-width', elW[i]);
175            curPageWidth += elW[i];
176            pagesW[curPage] = pagesW[curPage] + elW[i];
177            curPageWidth += options.minimalMargin;
178            $(els[i]).addClass('ban-wrapper ban p-' + curPage);
179            $(els[i]).attr('data-page', curPage);
180            totalWidth += elW[i];
181
182            //cc('elW i= '+i,elW[i]);
183        }
184        $(els[els.length - 1]).addClass('last-on-page');
185
186        pages = curPage + 1;
187        totalWidth += 2;
188        $(ul).css({width: totalWidth});
189    };
190
191    var setElOffset = function ()
192    {
193        for (var i = 0; i < pages; i++)
194        {
195            var pels = $('.p-' + i, con);
196            var pageMargin = (pageWidth - pagesW[i]) / (pels.length - 1);
197            var pelsW = 0;
198            var extraStartMargin = 0;
199            if (pageMargin > options.maxMargin)
200            {
201                pageMargin = options.minimalMargin;
202                extraStartMargin = (pageWidth - pagesW[i] - options.minimalMargin * (pels.length - 1)) / 2;
203                if (options.alignPagesWithSpace == 'center')
204                    pelsW += extraStartMargin;
205            }
206            ;
207            for (var i1 = 0; i1 < pels.length; i1++)
208            {
209                var wid = parseInt($(pels[i1]).attr('data-width'));
210                $(pels[i1]).css({left: pelsW, position: 'absolute'});
211                pelsW += wid + pageMargin;
212            }
213        }
214    };
215
216
217
218    var showPage = function (targetPage, direction)
219    {
220        //console.log('showPage '+targetPage + direction);
221
222        targetPage = parseInt(targetPage);
223        $('li', con).css({transition: options.transitionSpeed / 1000 + 's'});
224
225        if (direction === 'left')
226        {
227            $('.p-' + targetPage, con).css({transition: '0s'});
228            setTimeout(function ()
229            {
230                $('.p-' + targetPage, con).css({transform: 'translateX(' + pageTransformWidth + 'px)'});
231                setTimeout(function ()
232                {
233                    $('.p-' + targetPage, con).css({transition: options.transitionSpeed / 1000 + 's', transform: 'translateX(0px)'});
234                }, 20);
235            }, 20);
236            $('.p-' + currentPage, con).css({transform: 'translateX(-' + pageTransformWidth + 'px)'});
237        }
238
239        if (direction === 'right')
240        {
241            $('.p-' + targetPage, con).css({transition: '0s'});
242            setTimeout(function ()
243            {
244                $('.p-' + targetPage, con).css({transform: 'translateX(-' + pageTransformWidth + 'px)'});
245                setTimeout(function ()
246                {
247                    $('.p-' + targetPage, con).css({transition: options.transitionSpeed / 1000 + 's', transform: 'translateX(0px)'});
248                }, 20);
249            }, 20);
250            $('.p-' + currentPage, con).css({transform: 'translateX(' + pageTransformWidth + 'px)'});
251        }
252
253        currentPage = targetPage;
254        if (options.navPager)
255        {
256            $('.pager-but', con).removeClass('current');
257            $('.but-' + currentPage, pager).addClass('current');
258        }
259        stopTimer();
260        startTimer();
261    };
262
263
264    var navLeftClickHandler = function ()
265    {
266        var targetPage = currentPage + 1;
267        if (targetPage >= pages)
268            targetPage = 0;
269        showPage(targetPage, 'left');
270        //cc('navPrev',1);
271    };
272    var navRightClickHandler = function ()
273    {
274        var targetPage = currentPage - 1;
275        if (targetPage < 0)
276            targetPage = pages - 1;
277        showPage(targetPage, 'right');
278        //cc('navPrev',1);
279    };
280    var pagerClickHandler = function (e)
281    {
282        var targetPage = parseInt($(e.target).attr('data-id'));
283        if (targetPage > (-1))
284        {
285            var direction = 'left';
286            if (targetPage != currentPage)
287            {
288                if (targetPage < currentPage)
289                   
290                    direction = 'right'
291                showPage(targetPage, direction);
292            }
293        }
294    };
295    var autoPlayTimer = null;
296
297    var stopTimer = function ()
298    {
299        clearInterval(autoPlayTimer)
300    };
301    var startTimer = function ()
302    {
303        //cc('startTimer()',111);
304        stopTimer();
305        autoPlayTimer = setInterval(function ()
306        {
307            if (!focusIn && !mouseOver && !globalPause && !document.hidden)
308            {
309                var targetPage = currentPage + 1;
310                var dir = 'left';
311                if (targetPage >= pages)
312                {
313                    targetPage = 0;
314                    //dir='right';

315                }
316                showPage(targetPage, dir);
317            }
318        }, options.delay);
319    };
320
321
322    $(navLeft).click(navLeftClickHandler);
323    $(navRight).click(navRightClickHandler);
324    $(pager).click(pagerClickHandler);
325    $('a', con).focusin(focusinHandler);
326    $('a', con).focusout(focusoutHandler);
327    $(con).mouseenter(function ()
328    {
329        mouseOver = true;
330    });
331    $(con).mouseleave(function ()
332    {
333        mouseOver = false;
334        if ((pages > 1) &&
335            (options.autoPlay) &&
336            (!mouseOver) &&
337            (!focusIn))
338        {
339            startTimer();
340        }
341    });
342
343    var init = function ()
344    {
345        //	set positions for first page
346        //cc('init');
347        $('.ban:not(.p-0)', con).css({transition: '0s', transform: 'translateX(' + pageTransformWidth + 'px)'});
348        setTimeout(function ()
349        {
350            $('li', con).css({transiton: 'all ' + options.transitionSpeed / 1000 + 's'});
351        }, 10);
352
353        //	add pagination
354        if (options.navPager)
355        {
356            $(pager).empty();
357
358            if (pages > 1)
359            {
360                for (var i = 0; i < pages; i++)
361                {
362                    $(pager).append('<div class="pager-but but-' + i + '" data-id="' + i + '"></div>');
363                }
364                $('.pager-but.but-0', con).addClass('current');
365            }
366        }
367    };
368
369    var resetElData = function ()
370    {
371        var tabW = $(con).parent().parent().parent().parent().width();
372        //console.log(tabW);
373        $(con).parent().parent().css({width: tabW, display: 'block'});
374        $(con).parent().parent().parent().css({width: tabW, display: 'block'});
375
376        $(con).empty();
377        $(con).append(source);
378
379        if (options.navArrows)
380        {
381            $(con).append(navLeft, navRight);
382        }
383        if (options.navPager)
384        {
385            $(con).append(pager);
386        }
387
388        stopTimer();
389
390        setTimeout(function ()
391        {
392            ul = null;
393            els = null;
394            ul = $('ul', con);
395            els = $('li', ul);
396            total = els.length;
397            currentPage = 0;
398            pages = 0;
399
400            //elW = [];
401            totalWidth = 0;
402            pageWidth = $(con).width() + 1 - 2 * outlineWidth;
403            pageTransformWidth = pageWidth + 2 * outlineWidth;
404            pagesW = [];
405            direction = 'left';
406
407            getElData(true);
408            setElOffset();
409            init();
410
411            $(navLeft).click(navLeftClickHandler);
412            $(navRight).click(navRightClickHandler);
413            $(pager).click(pagerClickHandler);
414            if (pages > 1)
415            {
416                $('a', con).focusin(focusinHandler);
417                $('a', con).focusout(focusoutHandler);
418            }
419
420            if ((pages > 1) &&
421                (options.autoPlay) &&
422                (!mouseOver) &&
423                (!focusIn))
424            {
425                startTimer();
426            }
427
428            //	setting height for zdrowie
429            var imageMaxHeight = 0;
430            var titleMaxHeight = 0;
431            for (var i = 0; i < els.length; i++)
432            {
433                var im = $('img', els[i]);
434                var tit = $('.title', els[i]);
435                if ($(im).height() > imageMaxHeight)
436                   
437                    imageMaxHeight = $(im).height();
438                if ($(tit).height() > titleMaxHeight)
439                   
440                    titleMaxHeight = $(tit).height();
441            }
442
443            var marginImgTitle = 30;
444            var marginTitlePager = 10;
445            var pagerHeight = 20;
446
447            $('.title .separator', con).css({
448                height: titleMaxHeight,
449                right: -15,
450                top: marginImgTitle
451            });
452
453            //$(con).css({height:imageMaxHeight+marginImgTitle+titleMaxHeight+marginTitlePager+pagerHeight});
454
455            if (pages > 1)
456            {
457                $(con).addClass('has-many-pages');
458            }
459            else
460            {
461                $(con).removeClass('has-many-pages');
462            }
463        }, 10);
464    };
465
466    function copy()
467    {
468        source = $('.kar-wrapper', con).clone();
469    }
470    ;
471
472
473    getElData(false);
474    setElOffset();
475    resetElData();
476
477    $(window).resize($.debounce(250, resizeActions));
478    function resizeActions()
479    {
480        getElData(false);
481        setElOffset();
482        resetElData();
483
484    }
485
486    //  touch swipe handler
487
488    var leftPage = [];
489    var rightPage = [];
490    var thisPage = [];
491
492    var touchStartX = 0;
493    var touchMoveX = 0;
494    var touchEndX = 0;
495
496    var dragging = false;   //  true false flag
497
498    var leftPageNum = 0;
499    var rightPageNum = 0;
500
501
502    //	swipe Handler
503    var enableTouchGestures = function ()
504    {
505        $(con).each(function ()
506        {
507            mc = new Hammer(this);
508            //mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
509            mc.on('swipeleft swiperight tap panleft panright panend', function (e)
510            {
511                //	PHOTO
512
513                switch (e.type)
514                {
515
516                    case 'swipeleft':
517                        navLeftClickHandler();
518                        break;
519                    case 'swiperight':
520                        navRightClickHandler();
521                        break;
522
523                    case 'panleft':
524                        return 0;
525                        if (e.pointerType != 'mouse')
526                        {
527                            var deltaX = e.deltaX;
528                            var maxDeltaX = x / 2;
529                            if (deltaX < (-maxDeltaX))
530                               
531                                deltaX = (-maxDeltaX);
532                            var opacityOffset = 1 - (Math.abs(deltaX) / maxDeltaX) * 0.95;
533                            $('.photo-image', gal).css('transform', 'translate3d(' + deltaX + 'px,0px,0px)');
534                            $('.photo-image', gal).css('opacity', opacityOffset);
535
536                            //thumbnails
537                            var deltaPercent = (Math.abs(deltaX) / maxDeltaX);
538                            var deltaReversedPercent = 1 - deltaPercent;
539                            var thumbnailsOpacityOffset = deltaPercent;
540                            var thumbnailsScaleOffset = 0.5 + deltaPercent;
541
542                            //right thumbnail
543                            var thumbnailsWidthOffset = $('.next-image-thumbnail img', gal).width() * deltaReversedPercent;
544                            var thumbnailsLeftOffset = deltaReversedPercent * x / 2 + thumbnailsWidthOffset;
545                            if (thumbnailsLeftOffset < 0)
546                               
547                                thumbnailsLeftOffset = 0;
548
549                            if (e.deltaX < 0)
550                            {
551
552                                $('.next-image-thumbnail img', gal).css({
553                                    opacity: thumbnailsOpacityOffset
554                                });
555                                $('.next-image-thumbnail', gal).css({
556                                    left: thumbnailsLeftOffset,
557                                    transform: 'scale3d(' + thumbnailsScaleOffset + ',' + thumbnailsScaleOffset + ',1)'
558                                });
559                            }
560
561                            //left thumbnail
562                            var thumbnailsWidthOffsetL = $('.prev-image-thumbnail img', gal).width() * deltaReversedPercent;
563                            var thumbnailsLeftOffsetL = -(deltaReversedPercent * x / 2 + thumbnailsWidthOffsetL);
564                            if (thumbnailsLeftOffsetL > 0)
565                               
566                                thumbnailsLeftOffsetL = 0;
567                            if (e.deltaX > 0)
568                            {
569                                $('.prev-image-thumbnail img', gal).css({
570                                    opacity: thumbnailsOpacityOffset
571                                });
572                                $('.prev-image-thumbnail', gal).css({
573                                    left: thumbnailsLeftOffsetL,
574                                    transform: 'scale3d(' + thumbnailsScaleOffset + ',' + thumbnailsScaleOffset + ',1)'
575                                });
576                            }
577                        }
578                        break;
579                }
580            });
581        });
582    }
583    if ((options.enableTouchGestures) &&
584        (pages > 1))
585        enableTouchGestures();
586
587
588    getDistance = function (a, b)
589    {
590        return (a > b) ? a - b : b - a
591    }
592
593    currentCubeSlide = 0;
594
595
596    if (pages > 1)
597    {
598        //$('.kar-wrapper',con).on('mousedown touchstart',onTouchStart);
599        //$('.kar-wrapper').on('mousemove touchmove',onTouchMove);
600        //$('body').on('mouseup touchend mouseleave',onTouchEnd);
601    }
602
603
604    if ((pages > 1) &&
605        (options.autoPlay) &&
606        (!mouseOver) &&
607        (!focusIn))
608    {
609        startTimer();
610    }
611
612}