https://www.erzbistum-paderborn.de/wp-content/themes/flib/template…?ver=71cb3500ee9779bb97edcb56374c9677

1$ = jQuery;
2
3var newsSystemsFilters = {};
4var newsSystemsFiltersDefaults = {};
5var ajaxRequests = false;
6var isFrontPage = document.body.classList.contains('home'); // Check if current page is front page
7
8/**
9 * JS Ready-Event
10 */
11document.addEventListener("DOMContentLoaded", function() {
12    newsLoadCheck();
13});
14
15/**
16 * JS Window Load-Event
17 */
18window.addEventListener('load', (event) => {
19    newsLoadCheck();
20    saveDefaultFilters();
21    ajaxRequests = true;
22});
23
24/**
25 * 
26 * callback__datepickerComponent_news_2
27 * 
28 * Function to handle the datepicker component
29 * 
30 * @param {*} dom The DOM-Element that triggered the event
31 * @param {*} event The event that was triggered
32 * @param {*} datetype The type of the datepicker
33 * @param {*} dateStr The date string
34 * @param {*} updateElement The flag to update the element
35 * 
36 * @returns void
37 */
38 function callback__datepickerComponent_news_2(dom, event, datetype, dateStr, updateElement) {	 
39	  
40	if(updateElement === undefined){
41		updateElement = true;
42	}
43	 
44    updateNewsSystemFilters(dom, dateStr, updateElement);
45}
46
47/**
48 * 
49 * callback__selectComponent_news_2
50 * 
51 * Function to handle the select component
52 * 
53 * @param {*} dom The DOM-Element that triggered the event
54 * @param {*} data The data that was triggered
55 * @param {*} updateElement The flag to update the element
56 * 
57 * @returns void
58 */
59function callback__selectComponent_news_2(dom, data, updateElement) {
60	
61	if(updateElement === undefined){
62		updateElement = true;
63	}
64	
65    updateNewsSystemFilters(dom, data, updateElement);
66}
67
68/**
69 * 
70 * callback__paginationComponent_news_2
71 * 
72 * Function to handle the pagination component
73 * 
74 * @param {*} dom The DOM-Element that triggered the event
75 * @param {*} goTo The page number to go to
76 * 
77 * @returns void
78 */
79function callback__paginationComponent_news_2(dom, goTo) {
80    updateNewsSystemFilters(dom, goTo, true);
81}
82
83/**
84 * 
85 * newsResetFilter
86 * 
87 * Function to reset the filter of the news element
88 * 
89 * @param {*} button The button that triggered the event
90 */
91function newsResetFilter(button) {
92    let pageElement = button.closest('.page-element');
93    let elmNumber = pageElement.getAttribute('data-elementnumber');
94    let elmName = 'news_2';
95    let defaultCategory = $(pageElement).find('.news-list').data('default-cats');
96    
97    let startDateInputElm = $(pageElement).find('.startdate').get(0);
98    let startDateDefault = '';
99
100    window['callback__datepickerComponent_'+elmName](startDateInputElm, 'onChange', 'startdate', startDateDefault, true);
101    startDateInputElm.value = "";
102    
103    let endDateInputElm = $(pageElement).find('.enddate').get(0);
104    let endDateDefault = formatDate(Date());
105    
106    window['callback__datepickerComponent_'+elmName](endDateInputElm, 'onChange', 'enddate', endDateDefault, true);
107    endDateInputElm.value = endDateDefault;
108    
109    document.querySelector('[data-name="place"]').slim.setSelected([]);
110    document.querySelector('[data-name="category"]').slim.setSelected(defaultCategory);
111}
112
113/**
114 * 
115 * updateNewsSystemFilters
116 * 
117 * Function to update the news system filters with new data
118 * 
119 * @param {*} dom The DOM-Element that triggered the event
120 * @param {*} data The data that was triggered
121 * @param {*} updateElementFlag The flag to update the element
122 * 
123 * @returns void
124 */
125function updateNewsSystemFilters(dom, data, updateElementFlag) {
126    let elmNumber = dom.closest('.page-element').getAttribute('data-elementnumber');
127    let name = dom.getAttribute('data-name');
128    
129    if(dom.classList.contains('pagination-number')) {
130        name = 'currentpage';
131    }
132
133    if (typeof newsSystemsFilters[elmNumber] == 'undefined') {
134        newsSystemsFilters[elmNumber] = {};
135    }
136
137    newsSystemsFilters[elmNumber][name] = data;
138
139	if(updateElementFlag === true){
140	    updateElement(newsSystemsFilters, elmNumber, dom);
141	}
142}
143
144/**
145 * 
146 * updateElement
147 * 
148 * Function to update the element with new data from the filters
149 * 
150 * @param {*} filters The filters to use
151 * @param {*} elmNumber The element number
152 * @param {*} dom The DOM-Element that triggered the event
153 * 
154 * @returns void
155 */
156function updateElement(filters, elmNumber, dom) {
157    
158    if(ajaxRequests == true) {
159
160        document.querySelector('.news-loading').style.display = 'flex';
161		
162		if(newsSystemsFilters[elmNumber]['category'] == undefined){
163			let pageElement = dom.closest('.page-element');
164			let defaultCategory = $(pageElement).find('.news-list').data('default-cats');
165			newsSystemsFilters[elmNumber]['category'] = defaultCategory;
166		}
167			
168
169        // Get the ajax url because the script is not localized, see /inc/api/config.php
170        var baseUrl = window.location.protocol + '//' + window.location.host;
171        var ajaxurl = baseUrl + '/wp-admin/admin-ajax.php';
172    
173        // Build the data object for the AJAX call
174        var data = {};
175        data.action = 'getNews';
176        data.filters = newsSystemsFilters[elmNumber];
177        data.settings = $(document).find("[data-elementnumber = '" + elmNumber + "']").find('.news-list').data('settings');
178        data.ajaxCall = true;
179        data.isFrontPage = isFrontPage;
180        
181        // Perform the AJAX call
182        $.ajax({
183            url: ajaxurl,
184            type: 'POST',
185            data: data,
186            success: function(response) {
187
188                $(document).find("[data-elementnumber = '" + elmNumber + "']").find('.news-list-container').html(response.data);
189                svgVisible();
190                document.querySelector('.news-loading').style.display = 'none';
191
192                newsLoadCheck();
193            }
194        });
195    }
196}
197
198/**
199 * 
200 * saveDefaultFilters
201 * 
202 * Function to save the default filters of the news element on the page
203 * 
204 * @returns void
205 */
206function saveDefaultFilters() {
207    let newsElemente = document.querySelectorAll('section.news_2');
208    for (let i = 0; i < newsElemente.length; i++) {
209        
210        let currentElement = newsElemente[i];
211        let curElementNumber = $(currentElement).data('elementnumber');
212        newsSystemsFiltersDefaults[curElementNumber] = $(currentElement).find('.filter-wrapper').html();
213    }
214}
215
216/**
217 * 
218 * newsLoadCheck
219 * 
220 * Function to check if the news are loaded and initialize the masonry or carousel

221 * 
222 * @returns void
223 */
224function newsLoadCheck() {
225
226    // Get all news lists
227    let newsLists = document.querySelectorAll('.news_2 .news-list');
228
229    for (let i = 0; i < newsLists.length; i++) {
230        let newsList = newsLists[i];
231        let images = newsList.querySelectorAll('img');
232
233        // Inform the news list about the number of loaded images
234        newsList.imagesLoaded = 0;
235        newsList.imageCount = images.length;
236
237        // Check if images are already loaded
238        for (let j = 0; j < images.length; j++) {
239            let image = images[j];
240
241            if (image.complete) {
242                newsListImgLoaded(image);
243            } else {
244                image.addEventListener('load', newsListImgLoaded);
245            }
246        }
247    }
248
249}
250
251/**
252 * 
253 * newsListImgLoaded
254 * 
255 * Function to handle the loaded images of the news list and initialize the masonry or carousel
256 * 
257 * @param {*} image The image that was loaded
258 * 
259 * @returns void
260 */
261function newsListImgLoaded(image) {
262
263    // If the image is not yet a DOM element, get the image from the load event
264    if (!image.tagName) {
265        image = image.target;
266    }
267
268    // Determine the Masonry of the image element
269    let newsList = image.closest('.news-list');
270
271    // Inform the Masonry that another image has been loaded
272    newsList.imagesLoaded++;
273
274    // If as many images have been loaded as the Masonry element has, initialize the Masonry
275    if (newsList.imagesLoaded >= newsList.imageCount) {
276        switch(newsList.getAttribute('data-type')) {
277            case 'masonry':
278                initMasonry(newsList);
279                break;
280            case 'carousel':
281                initCarousel(newsList);
282                break;
283            case 'prio':
284                initPrioCarousel(newsList);
285                break;
286            default:
287                initMasonry(newsList);
288                break;
289        }
290    }
291}
292
293/**
294 * initMasonry
295 * 
296 * Init the masonry layout for the news list element
297 * 
298 * @param {*} masonry The masonry element
299 * 
300 * @returns void
301 */
302var newsMasonries = [];
303function initMasonry(masonry) {
304    let masonryInstance = new Masonry( masonry, {
305        columnWidth: '.news-sizer',
306        itemSelector: '.news-item',
307        percentPosition: true,
308        horizontalOrder: true
309    });
310
311    newsMasonries.push(masonryInstance);
312}
313
314/**
315 * 
316 * initCarousel

317 * 
318 * Init the carousel layout for the news list element 
319 * 
320 * @param {*} carousel The carousel element to initialize
321 * 
322 * @returns void
323 */
324function initCarousel(carousel) {
325    let container = carousel.querySelector('.tns-replacer');
326
327    // Check if the carousel is already initialized
328    if (!container.classList.contains('tns-carousel')) {
329        tns({
330            container: container,
331            items: 3,
332            slideBy: 'page',
333            autoplay: true,
334            mouseDrag: true,
335            autoplay: false,
336            nav: false,
337            preventScrollOnTouch: 'force',
338            controlsText: [
339                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm116-292H256v-70.9c0-10.7-13-16.1-20.5-8.5L121.2 247.5c-4.7 4.7-4.7 12.2 0 16.9l114.3 114.9c7.6 7.6 20.5 2.2 20.5-8.5V300h116c6.6 0 12-5.4 12-12v-64c0-6.6-5.4-12-12-12z"/></svg>',
340                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"/></svg>'
341            ],
342            responsive: {
343                0: {
344                    items: 1
345                },
346                767: {
347                    items: 2
348                },
349                991: {
350                    items: 3
351                }
352            }
353        });
354    }
355}
356
357/**
358 *
359 * initPrioCarousel
360 *
361 * Init the swiper carousel below the prioritized news.
362 * Three columns on desktop, on mobile the third slide peeks over the right edge and is swipeable.
363 *
364 * @param {*} newsList The news list element of the prioritized layout
365 *
366 * @returns void
367 */
368function initPrioCarousel(newsList) {
369    let carousel = newsList.querySelector('.news-prio-carousel');
370
371    // No carousel entries, swiper not loaded or already initialized (e.g. backend preview)
372    if (!carousel || carousel.classList.contains('is-preview') || typeof Swiper == 'undefined' || carousel.swiper) {
373        return;
374    }
375
376    new Swiper(carousel, {
377        slidesPerView: 2.15,
378        spaceBetween: 15,
379        navigation: {
380            prevEl: carousel.querySelector('.swiper-button-prev'),
381            nextEl: carousel.querySelector('.swiper-button-next')
382        },
383        breakpoints: {
384            992: {
385                slidesPerView: 3,
386                spaceBetween: 30
387            }
388        }
389    });
390}
391
392/**
393 *
394 * formatDate
395 *
396 * Function to format a date to a string in the format dd.mm.yyyy
397 * 
398 * @param {*} date The date to format
399 * @returns The formatted date string
400 */
401function formatDate(date) {
402    date = new Date(date)
403    var format = ('0' + date.getDate()).slice(-2)+'.'+('0' + (date.getMonth()+1)).slice(-2) +'.'+date.getFullYear();
404    return format;
405}