https://www.st-xaver.de/wp-content/themes/flib/inc/core/includes/l…?ver=85120206ead2745fba9a965df04c2131

1$ = jQuery;
2
3let galleryImageLoading = false;
4
5$(document).ready(function () {
6    initFlibGallery();
7    checkUninitializedGalleries();
8});
9$(window).scroll(checkUninitializedGalleries);
10
11/* AJAX-Call für SVGs */
12// TODO: This should not need to be added here, since its already in the core-js script.js file, but if I remove it here, initFlibGallery() can not find the function loadSVG
13/**
14 * 
15 * Load SVG
16 * 
17 * Load an SVG from the server and inject it into the DOM
18 * 
19 * @param {*} appendElement 
20 * @param {*} icon 
21 * @param {*} type 
22 * @param {*} color 
23 */
24function loadSVG(appendElement, icon, type, color) {
25    $.ajax({
26        url: '/wp-content/themes/flib/inc/core/includes/libraries/fontawesome/svgs/'+type+'/'+icon+'.svg',
27        dataType: 'html',
28        type: 'GET',
29        success: function (data) {
30            let firstSVGPart = data.substr(0, 5);
31            let injectStyles = 'style="fill: '+color+'"';
32            let secondSVGPart = data.substr(4);
33            let svgElement = firstSVGPart+injectStyles+secondSVGPart;
34            appendElement.append(svgElement);
35        }
36    });
37}
38
39/* Init */
40function initFlibGallery() {
41    let index = 0;
42
43    let body = $('body');
44    body.append('<div class="flib-gallery-stage"><div class="stage-content"></div></div>');
45
46    let stageWrapper = body.children('.flib-gallery-stage');
47    stageWrapper.children('.stage-content').append('<div class="flib-gallery-navigation"><div class="arrowleft"></div><div class="arrowright"></div></div>');
48    stageWrapper.children('.stage-content').append('<div class="gallery-loading"></div>');
49    stageWrapper.children('.stage-content').append('<div class="close-stage"></div>');
50
51    let stage = stageWrapper.children('.stage-content');
52    loadSVG(stage.find('.arrowleft'), 'chevron-left', 'light', '#fff');
53    loadSVG(stage.find('.arrowright'), 'chevron-right', 'light', '#fff');
54    loadSVG(stage.find('.gallery-loading'), 'spinner', 'light', '#fff');
55    loadSVG(stage.find('.close-stage'), 'times', 'light', '#fff');
56
57    stage.find('.arrowleft').click(function () {
58        if (!galleryImageLoading) {
59            index = stage.data('index');
60            index = switchSlide('prev', stage, index);
61        }
62    });
63    stage.find('.arrowright').click(function () {
64        if (!galleryImageLoading) {
65            index = stage.data('index');
66            index = switchSlide('next', stage, index);
67        }
68    });
69    stage.find('.close-stage').click(function () {
70        closeGallery();
71        index = 0;
72    });
73
74    $(document).on('keyup',function(evt) {
75        if (evt.keyCode == 27) { // Escape Taste gedrückt
76            closeGallery();
77            index = 0;
78        }
79    });
80
81    $(window).on('resize', function () {
82        resizeActiveImage(stage);
83    });
84}
85
86function checkUninitializedGalleries() {
87    if ($('.flib-gallery:not(.initialized)').length <= 0) {
88        $(window).off('scroll', checkUninitializedGalleries);
89    }
90    $('.flib-gallery:not(.initialized)').each(function () {
91        let windowScroll = $(document).scrollTop();
92        let galleryPosition = $(this)[0].getBoundingClientRect().top;
93        galleryPosition += windowScroll;
94        if (windowScroll + $(window).height() > galleryPosition) {
95            initGalleryElement($(this));
96        }
97    });
98}
99
100function initGalleryElement(flibGallery) {
101    let allGallery = flibGallery.hasClass('all');
102    let galleryContent = flibGallery.children();
103
104    flibGallery.empty();
105
106    flibGallery.append('<div class="previewimage"></div>');
107    flibGallery.children('.previewimage').append(galleryContent.clone()[0]);
108
109    flibGallery.append('<div class="gallery-datastorage"></div>');
110    flibGallery.children('.gallery-datastorage').append(galleryContent);
111
112    if (allGallery) {
113        flibGallery.append('<div class="gallery-allimages"></div>');
114        flibGallery.children('.gallery-allimages').append(galleryContent.clone());
115    }
116
117    flibGallery.addClass('has-gallery');
118
119    if (galleryContent.length > 1 && allGallery == false) {
120        flibGallery.append('<div class="gallery-icon"></div>');
121        loadSVG(flibGallery.children('.gallery-icon'), 'images', 'light', '#fff');
122    }
123
124    flibGallery.on('click', function (event) {
125        let allGallery = flibGallery.hasClass('all');
126
127        let linkingClicker = event.target.closest('.linking-clicker');
128        if (linkingClicker) {
129            let linking = linkingClicker.getAttribute('data-linking');
130            let linkingTarget = linkingClicker.getAttribute('data-linking-target');
131            if (linking) {
132                if (linkingTarget == '_blank') {
133                    window.open(linking);
134                }
135                else {
136                    window.location.href = linking;
137                }
138                return false;

139            }
140        } 
141
142        if (allGallery) {
143            let target = $(event.target);
144            let tImageContainer = target.parentsUntil('.allimage').parent('.allimage');
145            let tImageContainerIndex = tImageContainer.index();
146            openGallery(flibGallery, tImageContainerIndex);
147        } else {
148            openGallery(flibGallery, 0);
149        }
150    });
151
152    initPreviewImage(flibGallery);
153    flibGallery.addClass('initialized');
154
155    // Trigger Galerie-Element, wenn vorhanden
156    if (typeof initAvailableGalleries !== "undefined") {
157        initAvailableGalleries();
158    }
159}
160
161/* Vorschaubild laden */
162function initPreviewImage(flibGallery) {
163    let noPreview = flibGallery.hasClass('nopreview');
164    let imageElement = flibGallery.children('.previewimage').find('img');
165    let imageURL = imageElement.attr('data-src');
166
167    if (!noPreview) {
168        imageElement.attr('src', imageURL);
169        imageElement.on('load', function () {
170            imageElement.addClass('loaded');
171        });
172    }
173}
174
175/* Galerie öffnen */
176function openGallery(flibGallery, index) {
177    if (flibGallery.hasClass('has-gallery')) {
178        let galleryItems = flibGallery.children('.gallery-datastorage').clone();
179
180        galleryItems.find('.imagePreview').each(function () {
181            $(this).parentsUntil('.image-container').parents('.image-container').remove()
182        });
183
184        let body = $('body');
185
186        let stage = body.children('.flib-gallery-stage').children('.stage-content');
187        stage.children('.gallery-datastorage').empty();
188        stage.append(galleryItems);
189
190        body.children('.flib-gallery-stage').addClass('stagevisible');
191
192        if (galleryItems.find('.image-container').length > 1) {
193            stage.find('.flib-gallery-navigation').css('display', 'block');
194        } else {
195            stage.find('.flib-gallery-navigation').css('display', 'none');
196        }
197
198        showStageItem(stage, index);
199    }
200}
201
202/* Galerieitem vorbereiten */
203function showStageItem(stage, index) {
204    stage.find('.showimage').removeClass('showimage');
205    stage.find('.gallery-loading').css('opacity', 1);
206    initStageImage(stage, index);
207}
208
209/* Bild des Galerieitems laden */
210function initStageImage(stage, index) {
211    galleryImageLoading = true;
212    let imageElement = stage.find('img').eq(index);
213    if (!imageElement.attr('src')) {
214        let imageURL = imageElement.attr('data-src');
215        imageElement.attr('src', imageURL);
216        imageElement.on('load', function () {
217            stage.find('.gallery-loading').css('opacity', 0);
218            renderStageItem(stage, index);
219        });
220    } else {
221        stage.find('.gallery-loading').css('opacity', 0);
222        renderStageItem(stage, index);
223    }
224}
225
226/* Geladenes Bild anzeigen */

227function renderStageItem(stage, index) {
228    let imageToRender = stage.find('.image-container').eq(index);
229    imageToRender.addClass('showimage');
230    if (typeof(stage.data('index')) == "undefined") {
231        stage.attr('data-index', index);
232    } else {
233        stage.data('index', index);
234    }
235    resizeActiveImage(stage);
236    stage.find('img').on('load', function () {
237        resizeActiveImage(stage);
238    });
239}
240
241/* Angezeigtes Bild skalieren, dass es von der Breite/Höhe passt */
242function resizeActiveImage(stage) {
243    let imageContainer = stage.find('.image-container.showimage');
244    let image = imageContainer.find('img');
245    let imageBox = imageContainer.find('.image-box');
246    imageBox.height('auto');
247    let caption = imageContainer.find('.caption');
248    let captionHeight = caption.outerHeight();
249    let imageWidth = image.width();
250    let imageHeight = image.height();
251    let halfWidth = imageWidth;
252    let halfHeight = imageHeight;
253    let windowWidth = $(window).width();
254    let windowHeight = $(window).height();
255
256    if (windowWidth > 1200) {
257        windowWidth = 1140;
258    } else {
259        windowWidth -= 60;
260    }
261    if (windowWidth < 61) {
262        windowWidth = 61;
263    }
264    if (captionHeight) {
265        windowHeight -= captionHeight;
266    }
267    windowHeight -= 60;
268    if (windowHeight < 61) {
269        windowHeight = 61;
270    }
271
272    let aspectRatioWidth = halfWidth;
273    let aspectRatioHeight = halfHeight;
274

275    let imageWidthTooBig = (windowHeight / aspectRatioHeight) * aspectRatioWidth > windowWidth;
276    let imageHeightTooBig = (windowWidth / aspectRatioWidth) * aspectRatioHeight > windowHeight;
277
278    if (imageWidthTooBig) {
279        let scaleRatio = windowWidth / imageWidth;
280        imageBox.width(windowWidth);
281        caption.width(windowWidth - 30);
282        imageBox.height(imageHeight * scaleRatio);
283    } else if (imageHeightTooBig) {
284        let scaleRatio = windowHeight / imageHeight;
285        imageBox.height(windowHeight);
286        imageBox.width(imageWidth * scaleRatio);
287        caption.width(imageWidth * scaleRatio - 30);
288    }
289    galleryImageLoading = false;
290}
291
292/* Gehe eine Slide vor oder zurück */
293function switchSlide(direction, stage, index) {
294    if (direction == 'prev') {
295        index--;
296    } else {
297        index++;
298    }
299    let allGallery = stage.children('.gallery-datastorage').children('.allimage').length > 0;
300    let itemCount;
301    if (!allGallery) {
302        itemCount = stage.find('.gallery-datastorage .image-container').length - 1;
303    } else {
304        itemCount = stage.children('.gallery-datastorage').children('.allimage').length - 1;
305    }
306
307    if (index < 0) {
308        index = itemCount;
309    } else if (index > itemCount) {
310        index = 0;
311    }
312    showStageItem(stage, index);
313    return index;
314}
315
316/* Galerie schließen */
317function closeGallery() {
318    $('.stagevisible').removeClass('stagevisible');
319}