'; } onTabClick ( event ) { event . preventDefault (); jQuery ( '.fskRankingListTabs li' ) . removeClass ( 'active' ); jQuery ( event . target ) . closest ( 'li' ) . addClass ( 'active' ); this . handleTopBar (); } onWeekClick ( event ) { event . preventDefault (); jQuery ( '.fskRankingListTopBarWeeksList li' ) . removeClass ( 'active' ); jQuery ( event . target ) . closest ( 'li' ) . addClass ( 'active' ); let listId = jQuery ( event . target ) . closest ( 'a' ) . attr ( 'data-listid' ); this . loadSlidesByListId ( listId ); } handleTopBar () { jQuery ( '#fskRankingListTopBarWeeks' ) [this . getCurrentType () === 'Kino' ? 'fadeIn' : 'fadeOut'] (); let type = this . getCurrentType (); let currentParams = new URLSearchParams ( window . location . search ); let paramString = currentParams . toString (); let url = '/fskapi/RankingLists/weeksByType/' + type; if ( paramString ) url += '?' + paramString; htmx . ajax ( 'GET', url, { target: '#fskRankingListTopBarWeeks', swap: 'innerHTML' }); } onBeforeRequest ( event ) { if ( this . isSlider ( event ) ) { if ( this . swiper !== null ) { this . swiper . destroy (); this . swiper = null; jQuery ( this . sliderSelector ) . html ( '' ); jQuery ( this . sliderSelector ) . html ( this . getLoadingSpinnerMarkup () ); } } let cache = this . getHtmxCache ( this . getHtmxTarget ( event ), this . getHtmxCacheKey ( event ) ); if ( cache ) { event . preventDefault (); event . detail . target . innerHTML = cache; this . onAfterSwap ( event ); } } onAfterRequest ( event ) { this . setHtmxCache ( this . getHtmxTarget ( event ), this . getHtmxCacheKey ( event ), event . detail . xhr . responseText ); } getHtmxCacheKey ( event ) { return event . originalEvent . detail . pathInfo . finalRequestPath; } onAfterSwap ( event ) { if ( this . isWeeks ( event ) ) { let listId = jQuery ( this . weeksSelector ) . find ( 'li.active a' ) . attr ( 'data-listid' ); this . loadSlidesByListId ( listId ); } if ( jQuery . trim ( jQuery ( '#fskRankingListSlider' ) . text () ) === '' ) { jQuery ( '.fskRankingListSliderNoDataHint' ) . show (); } else { jQuery ( '.fskRankingListSliderNoDataHint' ) . hide (); if ( this . isSlider ( event ) ) { // Wrapper für Swiper hinzufügen const content = jQuery(this.sliderSelector).html(); jQuery(this.sliderSelector).html(` `); // Slide-Elemente mit Swiper-Klasse versehen jQuery(this.sliderSelector).find('.swiper-wrapper > *').addClass('swiper-slide'); // Swiper initialisieren this . swiper = new Swiper(this.sliderSelector, { slidesPerView : 7, spaceBetween : 10, watchSlidesProgress: true, watchSlidesVisibility: true, slideVisibleClass: 'swiper-slide-visible', navigation : { prevEl : `${this.sliderSelector} .swiper-button-prev`, nextEl : `${this.sliderSelector} .swiper-button-next` }, breakpoints : { 320 : { slidesPerView: 2 }, 800 : { slidesPerView: 3 }, 1000 : { slidesPerView: 4 }, 1100 : { slidesPerView: 5 }, 1200 : { slidesPerView: 7 } } }); } } } loadSlidesByListId ( listId ) { htmx . ajax ( 'GET', '/fskapi/RankingLists/slidesById/' + listId, { target: '#fskRankingListSlider', swap: 'innerHTML' }); } getCurrentType () { return jQuery ( '.fskRankingListTabs ul li.active' ) . attr ( 'data-type' ); } isWeeks ( event ) { return ( '#' + this . getHtmxTarget ( event ) === this . weeksSelector ); } isSlider ( event ) { return ( '#' + this . getHtmxTarget ( event ) === this . sliderSelector ); } getHtmxTarget ( event ) { return event . detail . target . id; } setHtmxCache ( target, key, value ) { if ( typeof this . htmxCache . target === 'undefined' ) this . htmxCache . target = []; this . htmxCache . target[key] = value; } getHtmxCache ( target, key ) { if ( typeof this . htmxCache . target === 'undefined' ) return false; if ( typeof this . htmxCache . target[key] === 'undefined' ) return false; return this . htmxCache . target[key]; } } new fskRankingList ();