PageSourceSearch

https://schifflange.lu/wp-content/themes/schifflange/js/sliders.js?ver=2

js schifflange.lu collected 2026-09-24 09:34:09 UTC 17,610 bytes, 566 lines download raw bytes

1/**
2 * This file contains all codes for every slider in the site and the functions that are related to these sliders
3 * Some sliders code are used for more than one slider, please make sure when you modify something that
4 * it will not effect something else
5 */
6
7jQuery(document).ready(function ($) {
8    var $body = $("body")
9    var $html = $("html")
10
11    var responsive_viewport = window.innerWidth
12
13    /**
14     * slick on wheel function
15     */
16    function onWheelSlick(onScroll) {
17        onScroll.on("wheel", function (e) {
18            e.preventDefault()
19            if (e.originalEvent.deltaY < 0) {
20                $(this).slick("slickPrev")
21            } else {
22                $(this).slick("slickNext")
23            }
24        })
25    }
26
27    /**
28     * Homepage header slider
29     */
30
31    var $homepageSlider = $(".single-slider-item")
32    $homepageSlider.slick({
33        //mobileFirst:true,
34        infinite: true,
35        slidesToScroll: 1,
36        dots: true,
37        prevArrow: null,
38        nextArrow: null,
39        autoplay: true,
40        autoplaySpeed: 7000,
41    })
42    //onWheelSlick($homepageSlider);
43
44    var $homepageEventsSpinner = $(".events-spinner")
45
46    if (responsive_viewport < 768) {
47        /**
48         * Homepage events spinner
49         */
50
51        $homepageEventsSpinner.slick({
52            prevArrow: null,
53            nextArrow: null,
54            slidesToShow: 1,
55            swipe: true,
56            centerMode: true,
57            centerPadding: "50px",
58            infinite: false,
59        })
60    }
61
62    if (responsive_viewport >= 768) {
63        $homepageEventsSpinner.slick({
64            prevArrow: false,
65            nextArrow: false,
66            slidesToShow: 1,
67            slidesToScroll: 1,
68            infinite: false,
69            draggable: true,
70            swipe: true,
71            swipeToSlide: true,
72            centerMode: true,
73            centerPadding: "150px",
74            cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
75            verticalSwiping: true,
76            focusOnSelect: true,
77            vertical: true,
78            asNavFor: ".homepage-events-spinner-nav",
79        })
80
81        $(".thumbnails-spinner").slick({
82            prevArrow: false,
83            nextArrow: false,
84            slidesToShow: 1,
85            slidesToScroll: 1,
86            infinite: false,
87            cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
88            draggable: true,
89            verticalSwiping: true,
90            swipe: true,
91            swipeToSlide: true,
92            centerMode: false,
93            focusOnSelect: false,
94            vertical: true,
95            asNavFor: ".homepage-events-spinner-nav",
96        })
97
98        $(".controls-spinner").slick({
99            prevArrow: '<span class="icon-up-drop"></span>',
100            nextArrow: '<span class="icon-down-drop"></span>',
101            slidesToShow: 1,
102            slidesToScroll: 1,
103            cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
104            verticalSwiping: true,
105            infinite: false,
106            draggable: true,
107            swipe: true,
108            swipeToSlide: true,
109            focusOnSelect: true,
110            vertical: true,
111            centerMode: true,
112            centerPadding: "35px",
113            asNavFor: ".homepage-events-spinner-nav",
114        })
115
116        $(".homepage-single-event:eq(1)").trigger("click")
117    }
118
119    onWheelSlick($homepageEventsSpinner)
120
121    // Toggle play pause button
122    const $buttonPlay = $('<button class="slider-toggle-play-pause button-play"></button>')
123    $buttonPlay.append(
124        $(
125            '<svg class="icon-play-2 play" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M489.031 215.047L201.031 39.047C193.365 34.367 184.697 32.016 176.012 32.016C148.396 32.016 128 54.619 128 80V432C128 457.607 148.615 480 176 480C184.688 480 193.359 477.641 201.031 472.953L489.031 296.953C503.297 288.234 512 272.719 512 256S503.297 223.766 489.031 215.047ZM472.346 269.648L184.348 445.646C181.828 447.186 178.941 448 176 448C166.117 448 160 439.695 160 432V80C160 72.312 166.121 64.016 176.012 64.016C178.961 64.016 181.848 64.826 184.346 66.352L472.344 242.352C477.066 245.236 480 250.467 480 256C480 261.531 477.066 266.762 472.346 269.648Z"/></svg>'
126        ),
127        $('<span class="sr-only play">Play slider</span>')
128    )
129    const $buttonPause = $('<button class="slider-toggle-play-pause button-pause"></button>')
130    $buttonPause.append(
131        $(
132            '<svg class="icon-pause pause" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M48 64C39.164 64 32 71.162 32 80V432C32 440.836 39.164 448 48 448S64 440.836 64 432V80C64 71.162 56.836 64 48 64ZM272 64C263.164 64 256 71.162 256 80V432C256 440.836 263.164 448 272 448S288 440.836 288 432V80C288 71.162 280.836 64 272 64Z"/></svg>'
133        ),
134        $('<span class="sr-only pause">Stop slider</span>')
135    )
136    $homepageSlider.append($buttonPlay, $buttonPause)
137    $buttonPlay.hide()
138    $buttonPause.click(function () {
139        $homepageSlider.slick("pause")
140
141        console.log($homepageSlider)
142        $(this).hide()
143        $buttonPlay.show()
144    })
145    $buttonPlay.click(function () {
146        $homepageSlider.slick("play")
147        console.log($homepageSlider)
148        $(this).hide()
149        $buttonPause.show()
150    })
151
152    /**
153     * Homepage actuality slider
154     */
155
156    var $multiControlsSliderCarousel = $(".multi-controls-slider-carousel")
157
158    var $multiControlsSliderCarousel = $(".multi-controls-slider-carousel")
159
160    $multiControlsSliderCarousel.slick({
161        slidesToShow: 1,
162        mobileFirst: true,
163        infinite: false,
164        dots: true,
165        prevArrow: '<span class="icon-arrow-pre"></span>',
166        nextArrow: '<span class="icon-arrow-next"></span>',
167        customPaging: function (slider, i) {
168            return '<span class="dots"></span>'
169        },
170        responsive: [
171            {
172                breakpoint: 768,
173                settings: {
174                    slidesToShow: 1,
175                    dots: false,
176                    customPaging: false,
177                },
178            },
179            {
180                breakpoint: 999,
181                settings: {
182                    slidesToShow: 3,
183                    slidesToScroll: 3,
184                    dots: false,
185                    customPaging: false,
186                },
187            },
188        ],
189    })
190
191    //onWheelSlick($multiControlsSliderCarousel);
192
193    /**
194     * Reiders slider
195     */
196
197    /*
198        var $reidersSlider = $('.reiders-slider-carousel');
199
200        $reidersSlider.slick();
201    */
202
203    /**
204     * Homepage reider slider
205     */
206
207    var $homepageReiderSlider = $(".homepage-reider-slider")
208
209    $homepageReiderSlider.slick({
210        slidesToShow: 1,
211        mobileFirst: true,
212        infinite: false,
213        dots: true,
214        prevArrow: '<span class="icon-arrow-pre"></span>',
215        nextArrow: '<span class="icon-arrow-next"></span>',
216        customPaging: function (slider, i) {
217            return '<span class="dots dashes"></span>'
218        },
219        responsive: [
220            {
221                breakpoint: 768,
222                settings: {
223                    slidesToShow: 2,
224                    dots: false,
225                },
226            },
227            {
228                breakpoint: 999,
229                settings: {
230                    dots: true,
231                    slidesToShow: 1,
232                    prevArrow: '<span class="icon-arrow-pre"></span>',
233                    nextArrow: '<span class="icon-arrow-next"></span>',
234                },
235            },
236        ],
237    })
238
239    /**
240     * Homepage discover slider
241     */
242
243    var $homepageDiscoverGallery = $(".homepage-discover-slider")
244
245    $homepageDiscoverGallery.slick({
246        slidesToShow: 1,
247        slidesToScroll: 1,
248        infinite: true,
249        dots: false,
250        prevArrow: '<span class="icon-arrow-pre"></span>',
251        nextArrow: '<span class="icon-arrow-next"></span>',
252    })
253
254    /**
255     * Creches slider
256     */
257
258    var $crechesSlider = $(".creches-slider")
259
260    $crechesSlider.slick({
261        mobileFirst: true,
262        slidesToShow: 1,
263        slidesToScroll: 1,
264        infinite: false,
265        dots: false,
266        prevArrow: '<span class="icon-arrow-pre"></span>',
267        nextArrow: '<span class="icon-arrow-next"></span>',
268        responsive: [
269            {
270                breakpoint: 767,
271                settings: {
272                    slidesToShow: 2,
273                    slidesToScroll: 2,
274                },
275            },
276        ],
277    })
278
279    /**
280     * About schifflange galleries' categories sliders
281     */
282
283    var $categoriesSlider = $(".galleries-categories-slider")
284    var $singleTermContentSlider = $(".category-single-slider", $categoriesSlider)
285    var $switcherSingleSlider = $(".switcher-single-slider", $categoriesSlider)
286
287    $singleTermContentSlider.slick({
288        slidesToShow: 1,
289        slidesToScroll: 1,
290        arrows: false,
291        draggable: false,
292        swipe: false,
293        fade: false,
294        asNavFor: ".switcher-single-slider",
295    })
296
297    $switcherSingleSlider.slick({
298        slidesToShow: 5,
299        slidesToScroll: 1,
300        draggable: false,
301        swipe: false,
302        asNavFor: ".category-single-slider",
303        focusOnSelect: true,
304    })
305
306    $(".single-term-slider").slick({
307        draggable: false,
308        swipe: false,
309        prevArrow: '<span class="icon-arrow-pre"></span>',
310        nextArrow: '<span class="icon-arrow-next"></span>',
311    })
312
313    //Events months and months name sliders
314    var $eventsMonthsTitlesSlider = $(".events-months-titles-slider")
315    var $eventsMonthsTitlesSliderSecondary = $(".events-months-titles-slider-secondary")
316    var $eventsMonthsBodySlider = $(".events-months-body-slider")
317
318    $eventsMonthsTitlesSlider.slick({
319        slidesToShow: 3,
320        slidesToScroll: 3,
321        asNavFor: ".events-slider-to-nav",
322        infinite: false,
323        draggable: true,
324        swipe: true,
325        swipeToSlide: true,
326        focusOnSelect: true,
327        prevArrow: '<span class="icon-arrow-pre"></span>',
328        nextArrow: '<span class="icon-arrow-next"></span>',
329    })
330
331    $eventsMonthsBodySlider.slick({
332        slidesToShow: 1,
333        slidesToScroll: 1,
334        draggable: true,
335        swipe: true,
336        infinite: false,
337        asNavFor: ".events-slider-to-nav",
338        focusOnSelect: true,
339    })
340
341    $eventsMonthsTitlesSliderSecondary.slick({
342        slidesToShow: 1,
343        slidesToScroll: 1,
344        asNavFor: ".events-slider-to-nav",
345        infinite: false,
346        draggable: true,
347        swipe: true,
348        focusOnSelect: true,
349        prevArrow: '<span class="icon-arrow-pre"></span>',
350        nextArrow: '<span class="icon-arrow-next"></span>',
351    })
352
353    //onWheelSlick($('.events-months-titles-slider'));
354
355    /**
356     * Constructions status sliders
357     */
358
359    var $constructionsTitlesSlider = $(".constructions-titles-slider")
360    var $constructionsBodySlider = $(".constructions-body-slider")
361
362    $constructionsTitlesSlider.slick({
363        slidesToShow: 3,
364        slidesToScroll: 3,
365        asNavFor: ".constructions-body-slider",
366        infinite: false,
367        draggable: false,
368        swipe: false,
369        focusOnSelect: true,
370        centerMode: false,
371    })
372
373    $constructionsBodySlider.slick({
374        slidesToShow: 1,
375        slidesToScroll: 1,
376        asNavFor: ".constructions-titles-slider",
377        infinite: false,
378        draggable: false,
379        swipe: true,
380        focusOnSelect: true,
381    })
382
383    /**
384     * Scroll to the top after scrolling only if the user went too much down
385     */
386    $eventsMonthsTitlesSlider.on("afterChange", function (event, slick, currentSlide, nextSlide) {
387        var scrollTop = $(window).scrollTop(),
388            elementOffset = $("#agenda-overview").offset().top,
389            distance = elementOffset - scrollTop
390        if (distance < -500) {
391            $("html, body").animate(
392                {
393                    scrollTop: $("#agenda-overview").offset().top - 100,
394                },
395                600
396            )
397        }
398    })
399
400    /**
401     * Galleries slider
402     */
403
404    if (responsive_viewport >= 768) {
405        var $galleriesWrapper = $(".images-galleries-wrapper")
406
407        $galleriesWrapper.slick({
408            mobileFirst: true,
409            slidesToShow: 1,
410            infinite: false,
411            prevArrow: '<span class="icon-arrow-left"></span>',
412            nextArrow: '<span class="icon-arrow-right"></span>',
413            slidesToScroll: 1,
414            responsive: [
415                {
416                    breakpoint: 768,
417                    settings: {
418                        slidesToShow: 2,
419                        centerMode: false,
420                        dots: false,
421                        customPaging: false,
422                    },
423                },
424                {
425                    breakpoint: 999,
426                    settings: {
427                        slidesToShow: 3,
428                        centerMode: false,
429                        dots: false,
430                        customPaging: false,
431                    },
432                },
433            ],
434        })
435
436        $galleriesWrapper = $(".videos-galleries-wrapper")
437
438        $galleriesWrapper.slick({
439            mobileFirst: true,
440            slidesToShow: 1,
441            infinite: false,
442            prevArrow: '<span class="icon-arrow-left"></span>',
443            nextArrow: '<span class="icon-arrow-right"></span>',
444            slidesToScroll: 1,
445            responsive: [
446                {
447                    breakpoint: 768,
448                    settings: {
449                        slidesToShow: 2,
450                        centerMode: false,
451                        dots: false,
452                        customPaging: false,
453                    },
454                },
455            ],
456        })
457    }
458
459    $(".slick-filters").on("change", function () {
460        var $this = $(this)
461        $this.parents(".images-galleries-container").find(".galleries-wrapper").slick("slickUnfilter")
462        var selected = Number($this.find(":selected").val())
463        if (selected === 0) {
464            $galleriesWrapper.slick("slickUnfilter")
465            return
466        }
467        $this
468            .parents(".images-galleries-container")
469            .find(".galleries-wrapper")
470            .slick("slickFilter", $this.parents(".images-galleries-container").find("[data-cat*=" + selected + "]"))
471        filtered = true
472    })
473
474    /**
475     * Televe schifflange galleries' categories sliders
476     */
477    var $galleriesCategoriesSliderTele = $(".galleries-categories-slider-tele")
478    var $overviewTeleSlider = $(".overview-tele-slider", $galleriesCategoriesSliderTele)
479    var $singleInnerSlider = $(".category-single-content-televie", $singleInnerSlider)
480
481    if (responsive_viewport < 1000) {
482        $overviewTeleSlider.slick({
483            slidesToShow: 1,
484            slidesToScroll: 1,
485            infinite: false,
486            draggable: true,
487            swipe: true,
488            focusOnSelect: true,
489            prevArrow: '<span class="icon-arrow-pre"></span>',
490            nextArrow: '<span class="icon-arrow-next"></span>',
491        })
492    }
493
494    $singleInnerSlider.slick({
495        slidesToShow: 1,
496        slidesToScroll: 1,
497        infinite: false,
498        draggable: false,
499        swipe: false,
500        focusOnSelect: true,
501        prevArrow: '<span class="icon-arrow-pre"></span>',
502        nextArrow: '<span class="icon-arrow-next"></span>',
503    })
504
505    /**
506     * Meeting height of slider, change to remove the whitespace under the future events.
507     */
508
509    var original_height
510    var future_height
511
512    function resizeSliderHeight() {
513        original_height = $(".meetings-body").innerHeight()
514        future_height = $("#future-meetings-slider").innerHeight()
515        $(".meetings-body").css("height", future_height)
516    }
517
518    if (document.fonts) {
519        document.fonts.ready.then(function () {
520            resizeSliderHeight()
521        })
522    } else {
523        future_height = $("#future-meetings-slider").innerHeight()
524        setTimeout(resizeSliderHeight, 1000)
525    }
526
527    $(".meetings").on("click", function (e) {
528        var $this = $(this)
529        setTimeout(function () {
530            var height_to_add = $this.parents(".basic-list-block").find(".basic-list-block-hidden").outerHeight(true)
531            var containerHeight = $this.parents(".meetings-body").outerHeight()
532            if ($this.hasClass("open")) {
533                var totalHeight = (containerHeight += height_to_add)
534                $(".meetings-body").css("height", totalHeight)
535            } else {
536                totalHeight = containerHeight -= height_to_add
537                console.log(totalHeight)
538                $(".meetings-body").css("height", totalHeight)
539            }
540        }, 350)
541    })
542
543    function resizeMeetingsContainer() {
544        if ($("#past-meetings-slider").hasClass("slick-current")) {
545            $(".meetings-body").css("height", original_height)
546        } else {
547            $(".meetings-body").css("height", future_height)
548        }
549    }
550
551    $(".meetings-title-slider .month-year-container").on("click", function () {
552        resizeMeetingsContainer()
553    })
554
555    /**
556     * Go to past meetings
557     */
558
559    $body.on("click", ".meetings-featured-controllers", function () {
560        if ($(this).attr("id") === "go-to-past-meetings") {
561            $("#meetings-past-header").trigger("click")
562        } else {
563            $("#meetings-future-header").trigger("click")
564        }
565    })
566});

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.