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

1/**
2 * Content Image Gallery
3 * Collection
4 * @see https://teamnet.mellowmessage.de/display/ci/Inhaltselement%3A+Bildergalerie
5 */
6(function( app ) {
7    /**
8     * Module Namespace
9     * Use to register module and events.
10     */
11    var NAMESPACE = 'contentImageGallery';
12
13    /**
14     * Default configuration
15     * Required configuration to ensure minimal functionality.
16     *
17     * @property {string} selector - selector string
18     * @property {object} magnificPopup - plugin settings, see http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
19     */
20    var defaults = {
21        selector: '.content-image-gallery__inner',
22        autoStart: true,
23        // http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
24        magnificPopup: {
25            delegate: '.content-image-gallery__item-link',
26            type: 'image',
27            image: {
28                cursor: null
29            },
30            gallery: {
31                enabled: true,
32                preload: [1,3],
33                navigateByImgClick: true,
34                // use mmKit arrow icon plainly due to issues in IE 11 ('use' can be used as soon as IE 11 is not to be supported anymore)
35                arrowMarkup: '<button title="%title%" type="button" class="content-image-gallery__popup-arrow content-image-gallery__popup-arrow--%dir% mfp-arrow mfp-arrow-%dir%"><svg class="svg-icon svg-icon--arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 280"><path d="M491.2 8.8c-11.7-11.7-30.7-11.7-42.4 0L250 207.6 51.2 8.8C39.5-2.9 20.5-2.9 8.8 8.8-3 20.5-3 39.5 8.8 51.2l220 220c2.9 2.9 6.3 5.1 9.9 6.6 3.6 1.5 7.4 2.2 11.3 2.2 7.7 0 15.4-2.9 21.2-8.8l220-220c11.8-11.7 11.8-30.7 0-42.4z"/></svg></button>',
36                tCounter: '<span class="content-image-gallery__popup-counter mfp-counter">%curr%/%total%</span>'
37            },
38            // use mmKit cross icon plainly due to issues in IE 11 ('use' can be used as soon as IE 11 is not to be supported anymore)
39            closeMarkup: '<button title="%title%" type="button" class="content-image-gallery__popup-close-btn mfp-close"><svg class="svg-icon svg-icon--cross" xmlns="http://www.w3.org/2000/svg" width="422.6" height="422.6" viewBox="0 0 422.6 422.6"><path d="M246.7 211.3L415.3 42.7c9.8-9.8 9.8-25.6 0-35.4-9.8-9.8-25.6-9.8-35.4 0L211.3 175.9 42.7 7.3c-9.8-9.8-25.6-9.8-35.4 0-9.8 9.8-9.8 25.6 0 35.4l168.6 168.6L7.3 379.9c-9.8 9.8-9.8 25.6 0 35.4 4.9 4.9 11.3 7.3 17.7 7.3s12.8-2.4 17.7-7.3l168.6-168.6 168.6 168.6c4.9 4.9 11.3 7.3 17.7 7.3s12.8-2.4 17.7-7.3c9.8-9.8 9.8-25.6 0-35.4L246.7 211.3z"/></svg></button>',
40            mainClass: 'content-image-gallery__popup',
41            fixedContentPos: true,
42            overflowY: 'scroll',
43            callbacks: {
44                open: function() {
45                    $(this.content[0]).find('.mfp-img').css('max-height', 800);
46                    generateDownloadButton();
47                },
48                change: function() {
49                    $(this.content[0]).find('.mfp-img').css('max-height', 800);
50                    generateDownloadButton();
51                }
52            }
53        }
54    };
55
56    /**
57     * Private variables/state
58     * Variables not to be exposed, nor inherited or modified.
59     * e.g. shortcuts to dependencies or variables to spare memory.
60     */
61    var conf;
62    var $ = app.$;
63
64    // Module startup
65    // The DOM is ready to be manipulated
66    app.ready(function() {
67        // apply custom config if present
68        conf = _.defaults({}, app.getConfig(NAMESPACE), defaults);
69
70        // set private variables and check dependencies
71        if ( !$.fn.magnificPopup ) throw 'jQuery Magnific Popup missing';
72
73        // Register Module
74        app.register(NAMESPACE, Module);
75
76        // Auto-initialize collection
77        if ( conf.autoStart === true ) {
78            $(conf.selector).each(function() {
79                Module({
80                    targetElem: $(this)
81                });
82            });
83        }
84    });
85
86    /**
87     * Module api
88     * Return new instances of a prototype or plain functionality.

89     * Depending on options supplied you may choose what object/functionality to run/return.
90     */
91    var Module = function( options ) {
92        return ContentImageGallery(_.extend({}, conf, options));
93    };
94
95    var ContentImageGallery = function( options ) {
96        var api;
97        var $targetElem = $(options.targetElem);
98        if ( !$targetElem.length ) return;
99
100        $targetElem.magnificPopup(options.magnificPopup);
101
102        api = {
103            // No methods yet
104        };
105
106        // expose API to public
107        //$targetElem.data(NAMESPACE, api);
108
109        return api;
110    };
111
112    var generateDownloadButton = function () {
113        var mfp = $.magnificPopup.instance;
114        var $imgContainer = $(mfp.content).find('.mfp-img').parent();
115        var $originalImg = mfp.currItem.el.find('img');
116        var downloadUrl = $originalImg.data('download-url');
117        var downloadTitle = $originalImg.attr('alt');
118        $imgContainer.find('.mfp-download').remove();
119
120        if (!downloadUrl) return;
121        // deactivate close on bg click because if you click on download button the lightbox will close otherwise
122        mfp.st.closeOnBgClick = false;
123        // check if we need a translation for Download but at the moment I think it's not necessary
124        $imgContainer.append('<a href="' + downloadUrl + '" download="' + downloadTitle + '" class="mfp-download btn btn--cta" rel="nofollow">Download</a>');
125    };
126
127}(app));