https://www.still.fr/typo3conf/ext/mmpackage/Resources/Public/Js/modules/contentDivider.js?1789559271

1/**
2 * Content divider
3 * Collection
4 */
5(function( app ) {
6    /**
7     * Module Namespace
8     * Use to register module and events.
9     */
10    var NAMESPACE = 'contentDivider';
11
12    /**
13     * Default configuration
14     * Required configuration to ensure minimal functionality.
15     */
16    var defaults = {
17        selector: '.content-divider',
18        autoStart: true,
19        breakpoints: {
20            hideVideoBelow: 768
21        }
22    };
23
24    /**
25     * Private variables/state
26     * Variables not to be exposed, nor inherited or modified.
27     * e.g. shortcuts to dependencies or variables to spare memory.
28     */
29    var conf;
30    var $ = app.$;
31
32    // Module startup
33    // The DOM is ready to be manipulated
34    app.ready(function() {
35        // apply custom config if present
36        conf = _.defaults({}, app.getConfig(NAMESPACE), defaults);
37
38        // set private variables and check dependencies
39        if ( !app.viewportHelper ) throw 'viewportHelper module missing';
40
41        // Register Module
42        app.register(NAMESPACE, Module);
43
44        // Auto-initialize collection
45        if ( conf.autoStart === true ) {
46            $(conf.selector).each(function() {
47                Module({
48                    targetElem: $(this)
49                });
50            });
51        }
52    });
53
54    /**
55     * Module api
56     * Return new instances of a prototype or plain functionality.
57     * Depending on options supplied you may choose what object/functionality to run/return.
58     */
59    var Module = function( options ) {
60        options = _.extend({}, conf, options);
61
62        if ( $(options.targetElem).hasClass('content-divider--type-4') ) {
63            return ContentMediaDivider(options);
64        }
65    };
66
67    var ContentMediaDivider = function( options ) {
68        var $targetElem = $(options.targetElem);
69        if ( !$targetElem.length ) return;
70
71        var video = $targetElem.find('.content-divider__bg-video')[0];
72        if ( !video ) return;
73
74        app.on('breakpointDebounced.viewportHelper', breakpointHandler);
75        breakpointHandler();
76
77        // no methods yet
78        return {};
79
80        function breakpointHandler() {
81            if ( app.viewportHelper.getViewportState().width < options.breakpoints.hideVideoBelow ) {
82                $targetElem.addClass('content-divider--bg-video-hidden');
83                video.pause();
84            } else {
85                $targetElem.removeClass('content-divider--bg-video-hidden');
86                playVideo(video);

87            }
88        }
89
90        function playVideo( video ) {
91            var promise = video.play();
92            if ( promise !== undefined ) {
93                // catch exception to avoid console error message
94                promise.catch(_.noop);
95            }
96        }
97    };
98
99}(app));