https://www.mot.be/assets/blocks/imports/image/scripts/main.js?etag=LygHa0Lrh2u

1/*
2 * Copyright (c) 2024 Republic of Reinvention BV <[email protected]>. All Rights Reserved.
3 * This file is part of project "cinematek-filmout-site" and can not be copied and/or distributed without
4 * the express permission and written consent of the legal responsible of Republic of Reinvention BV.
5 */
6
7base.plugin("blocks.imports.Image", ["blocks.core.Broadcaster", "constants.blocks.imports.image", "messages.blocks.imports.image", function (Broadcaster, ImageConstants, ImageMessages)
8{
9    var ImportsImage = this;
10
11    this.init = function ()
12    {
13        var lightboxElems = $('blocks-image.' + ImageConstants.IMG_LIGHTBOX_CLASS + ' img');
14
15        //make sure all possible event handlers are removed before initializing them
16        //so we don't attach twice in case of double initializing
17        lightboxElems.each(function (index)
18        {
19            //see featherlight sources and docs, this is the event handler (by default):
20            //config.openTrigger+'.'+config.namespace
21            $(this).off('click.featherlight');
22        });
23
24        lightboxElems.featherlightGallery({
25            type: 'image',
26            targetAttr: 'src',
27
28            // note that this will be called (with the right references) even when jumping from one img to the next
29            // and also when going back to a previously loaded/shown img
30            afterContent: function (e)
31            {
32                var thumbImg = this.$currentTarget;
33                var lightboxImg = this.$content;
34                var lightboxContainer = lightboxImg.parent();
35
36                // if the thumbnail image was inside a href ('Make a link' option),
37                // it makes sense to re-create that link here (but make it open in a new tab)
38                if (thumbImg.parent().hasAttribute('href')) {
39                    // init a wrapping link tag if not present
40                    if (lightboxImg.parent().prop("tagName").toLowerCase() !== "a") {
41                        lightboxImg.wrap($('<a/>'));
42                    }
43                    var link = lightboxImg.parent();
44                    link.attr('href', thumbImg.parent().attr('href'));
45                    link.attr('target', '_blank');
46
47                    // After this method, the code in /resources/webjars/featherlight/1.3.5/src/featherlight.js:527
48                    // uses the width/height css of the parent of the image to calculate the maximum bounds of the image.
49                    // Since we're wrapping the image in a link tag, we're changing that parent and we must inherit them so that it still works
50                    link.css('width', lightboxContainer.css('width'));
51                    link.css('height', lightboxContainer.css('height'));
52                }
53                else {
54                    // remove the wrapping link tag if present
55                    if (lightboxImg.parent().prop("tagName").toLowerCase() === "a") {
56                        lightboxImg.unwrap();
57                    }
58                }
59            }
60        });
61    };
62
63    $(document).ready(function ()
64    {
65        //when the dom is ready, attach the event handlers
66        ImportsImage.init();
67
68        //when we close the admin-sidebar, we need to re-install the event handlers
69        //because they were lost during raw html-copy-pasting
70        $(document).on(Broadcaster.EVENTS.BLOCKS.STOPPED, function ()
71        {
72            ImportsImage.init();
73        });
74    });
75
76}]);