https://www.still.co.uk/typo3conf/ext/mmpackage/Resources/Public/J…/contentStageSlideshow.js?1790758003

1/**
2 * Content stage slider
3 * Collection
4 * @see https://teamnet.mellowmessage.de/pages/viewpage.action?pageId=61094030
5 */
6(function( app ) {
7    /**
8     * Module Namespace
9     * Use to register module and events.
10     */
11    var NAMESPACE = 'contentStageSlideshow';
12
13    /**
14     * Default configuration
15     * Required configuration to ensure minimal functionality.
16     *
17     * @property {string} selector - selector string
18     * @property {object|string} all settings after selector - slick plugin default settings, @see http://kenwheeler.github.io/slick/#settings
19     */
20    var defaults = {
21        selector: '.content-stage-slideshow',
22        autoStart: true,
23        /*resizeHandler: function( event, api ) {
24            var dotNavTop = '';
25            var topValue = '';
26
27            if ( app.viewportHelper.getViewportState().width < 768 ) {
28                var slideImgOrVideoWrapHeight = api.$slides.eq(api.currentSlide).find('.content-stage-slideshow__slide-img-wrap, .content-stage-slideshow__slide-video-wrap').outerHeight();
29                topValue = slideImgOrVideoWrapHeight / 2;
30                dotNavTop = slideImgOrVideoWrapHeight - 30;
31            }
32
33            api.$dots.css('top', dotNavTop);
34            api.$prevArrow.css('top', topValue);
35            api.$nextArrow.css('top', topValue);
36        },*/
37        hideVideosBelow: 768,
38        stopAutoplayAfterClickInteraction: true,
39
40        // slider settings
41        autoplay: (function() {
42            return !Modernizr.touchevents;
43        }()),
44        autoplaySpeed: 5500,
45        speed: 1000,
46        swipe: true,
47        fade: false,
48        dots: true,
49        pauseOnHover: true,
50        pauseOnFocus: false,
51        pauseOnDotsHover: true,
52        waitForAnimate: false,
53        dotsClass: 'content-stage-slideshow__dot-nav container',
54        slidesToShow: 1,
55        slidesToScroll: 1,
56        arrows: true,
57        prevArrow: '<button type="button" class="content-stage-slideshow__arrow content-stage-slideshow__arrow-prev" tabindex="-1"><svg class="svg-icon svg-icon--arrow"><use xlink:href="#kit--arrow"></use></svg>Prev</button>',
58        nextArrow: '<button type="button" class="content-stage-slideshow__arrow content-stage-slideshow__arrow-next" tabindex="-1"><svg class="svg-icon svg-icon--arrow"><use xlink:href="#kit--arrow"></use></svg>Next</button>',
59        mobileFirst: true,
60        customPaging: function( api, i ) {
61            return '<button type="button" class="content-stage-slideshow__dot-nav-btn" data-role="none" role="button" tabindex="0">' + i + '</button>';
62        },
63        adaptiveHeight: true
64    };
65
66    /**
67     * Private variables/state
68     * Variables not to be exposed, nor inherited or modified.
69     * e.g. shortcuts to dependencies or variables to spare memory.
70     */
71    var conf;
72    var $ = app.$;
73
74    // Module startup
75    // The DOM is ready to be manipulated
76    app.ready(function() {
77        // apply custom config if present
78        conf = _.defaults({}, app.getConfig(NAMESPACE), defaults);
79
80        // set private variables and check dependencies
81        if ( !Modernizr ) throw 'Modernizr missing';
82        if ( !$.fn.slick ) throw 'jQuery slick slider plugin missing';
83        if ( !app.viewportHelper ) throw 'viewportHelper module missing';
84
85        // Register Module
86        app.register(NAMESPACE, Module);
87
88        // Auto-initialize collection
89        if ( conf.autoStart === true ) {
90            $(conf.selector).each(function() {
91                Module({
92                    targetElem: $(this)
93                });
94            });
95        }
96    });
97
98    /**
99     * Module api
100     * Return new instances of a prototype or plain functionality.
101     * Depending on options supplied you may choose what object/functionality to run/return.
102     */
103    var Module = function( options ) {
104        options = _.extend({}, conf, options);
105
106        return ContentStageSlideshow(options);
107    };
108
109    var ContentStageSlideshow = function( options ) {
110        var api;
111        var $targetElem = $(options.targetElem);
112        var lastVideo;
113        var videosVisible;
114        if ( !$targetElem.length ) return;
115
116        options = _.defaults({}, options, {
117            videosHiddenClass: 'content-stage-slideshow--videos-hidden'

118        });
119
120        if ( _.isFunction(options.resizeHandler) ) {
121            $targetElem.on('setPosition.' + NAMESPACE, options.resizeHandler);
122        }
123
124        app.on('breakpointDebounced.viewportHelper', breakpointHandler);
125        breakpointHandler();
126
127        $targetElem.on('init afterChange', function( event, slickApi ) {
128            var currentSlideIdx = slickApi.currentSlide;
129
130            var currentSlideVideo = slickApi.$slides.eq(currentSlideIdx).find('.content-stage-slideshow__slide-video')[0];
131            if ( currentSlideVideo ) {
132                if ( lastVideo ) {
133                    lastVideo.pause();
134                }
135                // save and play video in the current slide
136                lastVideo = currentSlideVideo;
137                if ( videosVisible ) {
138                    playVideo(lastVideo);
139                }
140            } else {
141                if ( lastVideo ) {
142                    lastVideo.pause();
143                    lastVideo = null;
144                }
145            }
146        });
147        $targetElem.slick(options);
148
149        if ( options.autoplay === true && options.stopAutoplayAfterClickInteraction === true ) {
150            $targetElem.one('click', function( event ) {
151                $targetElem.slick('slickPause');
152                $targetElem.slick('slickSetOption', 'autoplay', false);
153            });
154        }
155
156        api = {
157            // No methods yet
158        };
159
160        // expose API to public
161        //$targetElem.data(NAMESPACE, api);
162
163        return api;
164
165        function getNeighborSlidesByCurrentIdx( currentIdx, $slides ) {
166            var slideCount = $slides.length;
167            var previousSlideIdx = currentIdx === 0 ? slideCount - 1 : currentIdx - 1;
168            var nextSlideIdx = currentIdx === slideCount - 1 ? 0 : currentIdx + 1;
169            return $slides.eq(previousSlideIdx).add($slides.eq(nextSlideIdx));
170        }
171
172        function playVideo( video ) {
173            var promise = video.play();
174            if ( promise !== undefined ) {
175                // catch exception to avoid console error message
176                promise.catch(_.noop);
177            }
178        }
179
180        function breakpointHandler() {
181            videosVisible = app.viewportHelper.getViewportState().width >= options.hideVideosBelow;
182
183            $targetElem.toggleClass(options.videosHiddenClass, !videosVisible);
184            if ( lastVideo ) {
185                if ( videosVisible ) {
186                    playVideo(lastVideo);
187                } else {
188                    lastVideo.pause();
189                }
190            }
191        }
192    };
193
194}(app));