https://opcina-policnik.hr/components/com_gridbox/libraries/modules/initSimpleGallery.js?2.20.3.1

1/**
2* @package   Gridbox
3* @author    Balbooa http://www.balbooa.com/
4* @copyright Copyright @ Balbooa
5* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
6*/
7
8if (window.themeData && themeData.page.view == 'gridbox') {
9    app.checkModule('setGalleryMasonryHeight');
10}
11
12app.initSimpleGallery = function(obj, key){
13    var wrapper = $g('#'+key+' .gridbox-gallery-wrapper');
14    wrapper.find('.ba-gridbox-gallery-image').attr('tabindex', 0);
15    wrapper.off('click.lightbox keyup').on('click.lightbox keyup', '.ba-gridbox-gallery-image', function(event){
16        app.AccessibilityHelper.processAction(event, () => {
17            var div = document.createElement('div'),
18                index = 0,
19                $this = this,
20                endCoords = {},
21                startCoords = {},
22                image = this.querySelector('img'),
23                images = [],
24                width = $g(this).width(),
25                height = $g(this).height(),
26                offset = $g(this).offset(),
27                top = offset.top - window.scrollY,
28                modal = $g(div),
29                img = document.createElement('div');
30            img.style.backgroundImage = 'url('+image.src+')';
31            div.className = 'ba-image-modal gridbox-gallery-modal';
32            if (document.body.classList.contains('blog-post-editor')) {
33                top -= document.querySelector('#cke_editor1').offsetHeight;
34            }
35            img.style.top = top+'px';
36            img.style.left = offset.left+'px';
37            img.style.width = width+'px';
38            img.style.height = height+'px';
39            div.style.backgroundColor = app.getCorrectColor(app.items[key].lightbox.color);
40            div.appendChild(img);
41            this.parentNode.imageOffset = offset;
42            modal.on('click', function(){
43                simpleModalClose(modal, images, index)
44            }).on('touchstart', function(event){
45                endCoords = event.originalEvent.targetTouches[0];
46                startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
47                startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
48            }).on('touchmove', function(event){
49                endCoords = event.originalEvent.targetTouches[0];
50            }).on('touchend', function(){

51                var hDistance = endCoords.pageX - startCoords.pageX,
52                    xabs = Math.abs(endCoords.pageX - startCoords.pageX),
53                    yabs = Math.abs(endCoords.pageY - startCoords.pageY);
54                if (hDistance >= 100 && xabs >= yabs) {
55                    index = simpleGetPrev(img, images, index);
56                } else if (hDistance <= -100 && xabs >= yabs) {
57                    index = simpleGetNext(img, images, index);
58                }
59            });
60            $g('body').append(div);
61            setSimpleImage(image);
62            setTimeout(function(){
63                var str = '';
64                if (images.length > 1) {
65                    str += '<i class="ba-icons ba-icon-chevron-left" tabindex="0"></i><i class="ba-icons ba-icon-chevron-right" tabindex="0"></i>';
66                }
67                str += '<i class="ba-icons ba-icon-close" tabindex="0">';
68                modal.append(str);
69                app.AccessibilityHelper.trapFocus(modal[0], 350);
70                modal.find('.ba-icon-chevron-left').on('click keyup', function(event){
71                    app.AccessibilityHelper.processAction(event, () => {
72                        event.stopPropagation();
73                        index = simpleGetPrev(img, images, index);
74                    });
75                });
76                modal.find('.ba-icon-chevron-right').on('click keyup', function(event){
77                    app.AccessibilityHelper.processAction(event, () => {
78                        event.stopPropagation();
79                        index = simpleGetNext(img, images, index);
80                    });
81                });
82                modal.find('.ba-icon-close').on('click keyup', function(event){
83                    app.AccessibilityHelper.processAction(event, () => {
84                        event.stopPropagation();
85                        simpleModalClose(modal, images, index)
86                    });
87                });
88            }, 600);
89            wrapper.find('.ba-gridbox-gallery-image').each(function(ind){
90                if (!this.classList.contains('ba-unpublished-html-item')) {
91                    images.push(this);
92                }
93                if (this == $this) {
94                    index = ind;
95                }
96            });
97            $g(window).on('keyup.instagram', function(event) {
98                event.preventDefault();
99                event.stopPropagation();
100                if (event.keyCode === 37) {
101                    index = simpleGetPrev(img, images, index);
102                } else if (event.keyCode === 39) {
103                    index = simpleGetNext(img, images, index);
104                } else if (event.keyCode === 27) {
105                    simpleModalClose(modal, images, index)
106                }
107            });
108        });
109    });
110    initItems();
111}
112
113function setSimpleImage(image)
114{
115    var imgHeight = image.naturalHeight,
116        imgWidth = image.naturalWidth,
117        modal = $g('.ba-image-modal.gridbox-gallery-modal').removeClass('gridbox-gallery-fade-animation'),
118        comp = getComputedStyle(document.body),
119        isBlogPost = document.body.classList.contains('blog-post-editor'),
120        wWidth = isBlogPost ? modal[0].clientWidth : document.body.clientWidth,
121        wHeigth = isBlogPost ? modal[0].clientHeight : window.innerHeight,
122        percent = imgWidth / imgHeight;
123    if (wWidth > 1024) {
124        if (imgWidth < wWidth && imgHeight < wHeigth) {
125        
126        } else {
127            if (imgWidth > imgHeight) {
128                imgWidth = wWidth - 100;
129                imgHeight = imgWidth / percent;
130            } else {
131                imgHeight = wHeigth - 100;
132                imgWidth = percent * imgHeight;
133            }
134            if (imgHeight > wHeigth) {
135                imgHeight = wHeigth - 100;
136                imgWidth = percent * imgHeight;
137            }
138            if (imgWidth > wWidth) {
139                imgWidth = wWidth - 100;
140                imgHeight = imgWidth / percent;
141            }
142        }
143    } else {
144        percent = imgWidth / imgHeight;
145        if (percent >= 1) {
146            imgWidth = wWidth * 0.90;
147            imgHeight = imgWidth / percent;
148            if (wHeigth - imgHeight < wHeigth * 0.1) {
149                imgHeight = wHeigth * 0.90;
150                imgWidth = imgHeight * percent;
151            }
152        } else {
153            imgHeight = wHeigth * 0.90;
154            imgWidth = imgHeight * percent;
155            if (wWidth - imgWidth < wWidth * 0.1) {
156                imgWidth = wWidth * 0.90;
157                imgHeight = imgWidth / percent;
158            }
159        }
160    }
161    var modalTop = (wHeigth - imgHeight) / 2,
162        left = (wWidth - imgWidth) / 2 + comp.borderLeftWidth.replace('px', '') * 1;
163    setTimeout(function(){
164        modal.find('> div').css({
165            width: Math.round(imgWidth),
166            height: Math.round(imgHeight),
167            left: Math.round(left),

168            top: Math.round(modalTop)
169        }).addClass('gridbox-gallery-fade-animation');
170    }, 1);
171}
172
173function simpleGetPrev(img, images, index)
174{
175    let ind = images[index - 1] ? index - 1 : images.length - 1,
176        image = images[ind].querySelector('img');
177    img.style.backgroundImage = 'url('+image.src+')';
178    setSimpleImage(image);
179
180    return ind;
181}
182
183function simpleGetNext(img, images, index)
184{
185    let ind = images[index + 1] ? index + 1 : 0,
186        image = images[ind].querySelector('img');
187    img.style.backgroundImage = 'url('+image.src+')';
188    setSimpleImage(image);
189
190    return ind;
191}
192
193function simpleModalClose(modal, images, index)
194{
195    $g(window).off('keyup.instagram');
196    modal.addClass('image-lightbox-out');
197    let $image = $g(images[index]), 
198        width = $image.width(),
199        height = $image.height(),
200        marginTop = 0,
201        offset = $image.offset();
202    if ($image.closest('.ba-flipbox-backside').length > 0) {
203        offset = images[index].parentNode.imageOffset;
204    }
205    if (document.body.classList.contains('blog-post-editor')) {
206        marginTop = document.querySelector('#cke_editor1').offsetHeight;
207    }
208    modal.find('> div').css({
209        width: width,
210        height: height,
211        left: offset.left,
212        top: (offset.top - window.scrollY - marginTop)
213    });
214    setTimeout(function(){
215        app.AccessibilityHelper.releaseTrap(modal[0]);
216        modal.remove();
217    }, 500);
218}
219
220if (app.modules.initSimpleGallery) {
221    app.initSimpleGallery(app.modules.initSimpleGallery.data, app.modules.initSimpleGallery.selector);
222}