import { ESLCarouselView , ESLCarouselViewRegistry } from './esl-carousel-view' ; import type { ESLCarousel } from '../esl-carousel' ; class ESLMultiCarouselView extends ESLCarouselView { public constructor ( carousel ) { super ( carousel ) ; } public bind ( ) { } public draw ( ) { const { $slides , $slidesArea } = this . carousel ; if ( ! $slidesArea || ! $slides . length ) return ; const slideStyles = getComputedStyle ( $slides [ this . carousel . firstIndex ] ) ; const currentTrans = slideStyles . transform !== 'none' ? parseFloat ( slideStyles . transform . split ( ',' ) [ 4 ] ) : 0 ; const slidesAreaStyles = getComputedStyle ( $slidesArea ) ; const slideWidth = parseFloat ( slidesAreaStyles . width ) / this . carousel . activeCount - parseFloat ( slideStyles . marginLeft ) - parseFloat ( slideStyles . marginRight ) ; const computedLeft = this . carousel . firstIndex === 0 ? - currentTrans : - ( parseFloat ( slidesAreaStyles . width ) / this . carousel . activeCount * this . carousel . firstIndex ) - currentTrans ; $slides . forEach ( ( slide ) => { slide . style . minWidth = slideWidth + 'px' ; slide . style . left = computedLeft + 'px' ; } ) ; } public goTo ( nextIndex , direction ) { const slideIndex = direction === 'right' ? this . carousel . activeIndexes [ 0 ] : this . carousel . firstIndex ; const slideStyles = getComputedStyle ( this . carousel . $slides [ slideIndex ] ) ; const slideWidth = parseFloat ( slideStyles . width ) + parseFloat ( slideStyles . marginLeft ) + parseFloat ( slideStyles . marginRight ) ; const areaWidth = slideWidth * this . carousel . $slides . length ; const transitionDuration = parseFloat ( slideStyles . transitionDuration ) * 1000 ; const currentLeft = parseFloat ( slideStyles . left ) ; const currentTrans = parseFloat ( slideStyles . transform . split ( ',' ) [ 4 ] ) || 0 ; if ( this . carousel . firstIndex === nextIndex ) { return 0 ; } let shiftCount = 0 ; if ( direction === 'left' ) { shiftCount = ( this . carousel . firstIndex - nextIndex + this . carousel . count ) % this . carousel . count ; } else if ( direction === 'right' ) { shiftCount = ( this . carousel . count - this . carousel . firstIndex + nextIndex ) % this . carousel . count ; } const direct = direction === 'left' ? - 1 : 1 ; const trans = currentTrans - ( shiftCount * slideWidth ) * direct ; const nextActiveIndexes = [ ] ; for ( let i = 0 ; i < this . carousel . activeCount ; ++ i ) { nextActiveIndexes . push ( ( nextIndex + i + this . carousel . count ) % this . carousel . count ) ; } const intersectionIndexes = nextActiveIndexes . filter ( ( index ) => this . carousel . activeIndexes . includes ( index ) ) ; let left = 0 ; const animatedCount = shiftCount < this . carousel . activeCount ? this . carousel . activeCount : shiftCount ; for ( let i = 0 ; i < animatedCount ; ++ i ) { const computedIndex = ( nextIndex + i + this . carousel . count ) % this . carousel . count ; const minActive = Math . min ( ... this . carousel . activeIndexes ) ; if ( computedIndex >= this . carousel . firstIndex && direction === 'left' ) { left = currentLeft - areaWidth ; } else if ( computedIndex <= minActive && direction === 'right' ) { left = currentLeft + areaWidth ; } else { left = currentLeft ; } if ( ! intersectionIndexes . includes ( computedIndex ) ) { this . carousel . $slides [ computedIndex ] . style . left = left + 'px' ; } if ( intersectionIndexes . includes ( computedIndex ) ) { const orderIndex = nextActiveIndexes . indexOf ( computedIndex ) ; const time = ( direction === 'right' ) ? ( transitionDuration / this . carousel . activeCount ) * orderIndex : ( transitionDuration / this . carousel . activeCount ) * ( this . carousel . activeCount - orderIndex - 1 ) ; const copyLeft = left ; setTimeout ( ( ) => { this . carousel . $slides [ computedIndex ] . style . left = copyLeft + 'px' ; } , time ) ; } } this . carousel . $slides . forEach ( ( slide ) => { slide . style . transform = `translateX(${ trans }px)` ; const sIndex = slide . index ; if ( intersectionIndexes . includes ( sIndex ) ) { const orderIndex = nextActiveIndexes . indexOf ( sIndex ) ; const time = ( direction === 'right' ) ? ( transitionDuration / this . carousel . activeCount ) * orderIndex : ( transitionDuration / this . carousel . activeCount ) * ( this . carousel . activeCount - orderIndex - 1 ) ; setTimeout ( ( ) => { this . carousel . $slides [ sIndex ] . style . transform = `translateX(${ trans }px)` ; } , time ) ; } } ) ; this . carousel . setAttribute ( 'data-is-animated' , 'true' ) ; setTimeout ( ( ) => { this . carousel . removeAttribute ( 'data-is-animated' ) ; } , transitionDuration ) ; } public unbind ( ) { this . carousel . $slides . forEach ( ( el ) => { el . style . transform = 'none' ; el . style . left = 'none' ; } ) ; } } ESLCarouselViewRegistry . instance . registerView ( 'multiple' , ESLMultiCarouselView ) ;