22

✏️ Editing: jet-horizontal-timeline.js

(function ($) {

"use strict";

function widgetHorizontalTimeline( $scope ) {

var $timeline         = $scope.find( '.jet-hor-timeline' ),
            $timelineTrack    = $scope.find( '.jet-hor-timeline-track' ),
            $items            = $scope.find( '.jet-hor-timeline-item' ),
            $arrows           = $scope.find( '.jet-arrow' ),
            $nextArrow        = $scope.find( '.jet-next-arrow' ),
            $prevArrow        = $scope.find( '.jet-prev-arrow' ),
            columns           = {},
            prevColumns,
            slidesToScroll    = {},
            prevSlidesToScroll,
            firstMouseEvent   = true,
            currentDeviceMode = elementorFrontend.getCurrentDeviceMode(),
            prevDeviceMode    = currentDeviceMode,
            eTarget           = $timeline.closest( '.elementor-widget' ),
            breakpoints       = JetElementsTools.getElementorElementSettings( eTarget ),
            activeBreakpoints = elementorFrontend.config.responsive.activeBreakpoints || {},
            itemsCount        = $scope.find( '.jet-hor-timeline-list--middle .jet-hor-timeline-item' ).length,
            isRTL             = JetElementsTools.isRTL(),
            currentTransform  = 0,
            currentPosition   = 0,
            transform         = {},
            maxPosition       = {};

columns['desktop'] = breakpoints['columns'];
            prevColumns        = columns['desktop'];

transform['desktop'] = 100 / columns['desktop'];

maxPosition['desktop'] = Math.max( 0, ( itemsCount - columns['desktop'] ) );

slidesToScroll['desktop'] = +breakpoints['slides_to_scroll'];
            prevSlidesToScroll        = slidesToScroll['desktop'];

Object.keys( activeBreakpoints ).reverse().forEach( function( breakpointName ) {

if ( 'widescreen' === breakpointName ) {
                    columns[breakpointName] = ( "columns_widescreen" in breakpoints ) && '' != breakpoints.columns_widescreen ? breakpoints['columns_' + breakpointName] : columns['desktop'];

slidesToScroll[breakpointName] = ( "slides_to_scroll_widescreen" in breakpoints ) && '' != breakpoints.slides_to_scroll_widescreen ? +breakpoints['slides_to_scroll_' + breakpointName] : +slidesToScroll['desktop'];
                } else {
                    columns[breakpointName] = ( "" != breakpoints['columns_' + breakpointName] && undefined != breakpoints['columns_' + breakpointName] ) ? breakpoints['columns_' + breakpointName] : prevColumns;

prevColumns = columns[breakpointName];

slidesToScroll[breakpointName] = ( "" != breakpoints['slides_to_scroll_' + breakpointName] && undefined != breakpoints['slides_to_scroll_' + breakpointName] ) ? +breakpoints['slides_to_scroll_' + breakpointName] : +prevSlidesToScroll;

prevSlidesToScroll = slidesToScroll[breakpointName];
                }

transform[breakpointName] = 100 / columns[breakpointName];

maxPosition[breakpointName] = Math.max( 0, ( itemsCount - columns[breakpointName] ) );
            } );

if ( 'ontouchstart' in window || 'ontouchend' in window ) {
            $items.on( 'touchend.jetHorTimeline', function( event ) {
                var itemId = $( this ).data( 'item-id' );

$scope.find( '.elementor-repeater-item-' + itemId ).toggleClass( 'is-hover' );
            } );
        } else {
            $items.on( 'mouseenter.jetHorTimeline mouseleave.jetHorTimeline', function( event ) {

if ( firstMouseEvent && 'mouseleave' === event.type ) {
                    return;
                }

if ( firstMouseEvent && 'mouseenter' === event.type ) {
                    firstMouseEvent = false;
                }

var itemId = $( this ).data( 'item-id' );

$scope.find( '.elementor-repeater-item-' + itemId ).toggleClass( 'is-hover' );
            } );
        }

// Set Line Position
        setLinePosition();
        $( window ).on( 'resize.jetHorTimeline orientationchange.jetHorTimeline', JetElementsTools.debounce( 50, setLinePosition ) );

function setLinePosition() {
            var $line             = $scope.find( '.jet-hor-timeline__line' ),
                $firstPoint       = $scope.find( '.jet-hor-timeline-item__point-content:first' ),
                $lastPoint        = $scope.find( '.jet-hor-timeline-item__point-content:last' ),
                firstPointLeftPos = $firstPoint.position().left + parseInt( $firstPoint.css( 'marginLeft' ) ),
                lastPointLeftPos  = $lastPoint.position().left + parseInt( $lastPoint.css( 'marginLeft' ) ),
                pointWidth        = $firstPoint.outerWidth();

$line.css( {
                'left': !isRTL ? ( firstPointLeftPos + pointWidth/2 ) : ( lastPointLeftPos + pointWidth/2 ),
                'width': Math.abs( lastPointLeftPos - firstPointLeftPos )
            } );
        }

// Arrows Navigation Type
        if ( $nextArrow[0] && maxPosition[ currentDeviceMode ] === 0 ) {
            $nextArrow.addClass( 'jet-arrow-disabled' );
        }

if ( $arrows[0] ) {
            var xPos = 0,
                yPos = 0,
                diffpos;

$arrows.on( 'click.jetHorTimeline', function( event ){
                var $this             = $( this ),
                    currentDeviceMode = elementorFrontend.getCurrentDeviceMode(),
                    slidesScroll      = slidesToScroll[ currentDeviceMode ],
                    direction         = $this.hasClass( 'jet-next-arrow' ) ? 'next' : 'prev',
                    dirMultiplier     = !isRTL ? -1 : 1;

if ( slidesScroll > columns[ currentDeviceMode ] ) {
                    slidesScroll = columns[ currentDeviceMode ];
                } else {
                    slidesScroll = slidesToScroll[ currentDeviceMode ]
                }

$( window ).on( 'resize.jetHorTimeline orientationchange.jetHorTimeline', JetElementsTools.debounce( 50, function(){
                    currentDeviceMode = elementorFrontend.getCurrentDeviceMode();
                    slidesScroll      = slidesToScroll[ currentDeviceMode ];

if ( slidesScroll > columns[ currentDeviceMode ] ) {
                        slidesScroll = columns[ currentDeviceMode ];
                    } else {
                        slidesScroll = slidesToScroll[ currentDeviceMode ]
                    }
                } ) );

if ( 'next' === direction && currentPosition < maxPosition[ currentDeviceMode ] ) {
                    currentPosition += slidesScroll;

if ( currentPosition > maxPosition[ currentDeviceMode ] ) {
                        currentPosition = maxPosition[ currentDeviceMode ];
                    }
                }

if ( 'prev' === direction && currentPosition > 0 ) {
                    currentPosition -= slidesScroll;

if ( currentPosition < 0 ) {
                        currentPosition = 0;
                    }
                }

if ( currentPosition > 0 ) {
                    $prevArrow.removeClass( 'jet-arrow-disabled' );
                } else {
                    $prevArrow.addClass( 'jet-arrow-disabled' );
                }

if ( currentPosition === maxPosition[ currentDeviceMode ] ) {
                    $nextArrow.addClass( 'jet-arrow-disabled' );
                } else {
                    $nextArrow.removeClass( 'jet-arrow-disabled' );
                }

if ( currentPosition === 0 ) {
                    currentTransform = 0;
                } else {
                    currentTransform = currentPosition * transform[ currentDeviceMode ];
                }

$timelineTrack.css({
                    'transform': 'translateX(' + dirMultiplier * currentTransform + '%)'
                });

} );

$( $items ).on( 'touchstart', function( e ) {
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

xPos = touch.pageX;
            } );

$( $items ).on( 'touchend', function( e ) {
                var touch             = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0],
                    currentDeviceMode = elementorFrontend.getCurrentDeviceMode(),
                    slidesScroll      = slidesToScroll[ currentDeviceMode ];

yPos    = touch.pageX;
                diffpos = yPos - xPos;

if ( diffpos < -50 ) {
                    var dirMultiplier = !isRTL ? -1 : 1;

if ( slidesScroll > columns[ currentDeviceMode ] ) {
                        slidesScroll = columns[ currentDeviceMode ];
                    }

if ( currentPosition < maxPosition[ currentDeviceMode ] ) {
                        currentPosition += slidesScroll;

if ( currentPosition > maxPosition[ currentDeviceMode ] ) {
                            currentPosition = maxPosition[ currentDeviceMode ];
                        }
                    }

if ( currentPosition > 0 ) {
                        $prevArrow.removeClass( 'jet-arrow-disabled' );
                    } else {
                        $prevArrow.addClass( 'jet-arrow-disabled' );
                    }

if ( currentPosition === maxPosition[ currentDeviceMode ] ) {
                        $nextArrow.addClass( 'jet-arrow-disabled' );
                    } else {
                        $nextArrow.removeClass( 'jet-arrow-disabled' );
                    }

if ( currentPosition === 0 ) {
                        currentTransform = 0;
                    } else {
                        currentTransform = currentPosition * transform[ currentDeviceMode ];
                    }

$timelineTrack.css( {
                        'transform': 'translateX(' + dirMultiplier * currentTransform + '%)'
                    } );

} else if ( diffpos > 50 ) {
                    var dirMultiplier = !isRTL ? -1 : 1;

if ( slidesScroll > columns[ currentDeviceMode ] ) {
                        slidesScroll = columns[ currentDeviceMode ];
                    }

if ( currentPosition > 0 ) {
                        currentPosition -= slidesScroll;

if ( currentPosition < 0 ) {
                            currentPosition = 0;
                        }
                    }

if ( currentPosition > 0 ) {
                        $prevArrow.removeClass( 'jet-arrow-disabled' );
                    } else {
                        $prevArrow.addClass( 'jet-arrow-disabled' );
                    }

if ( currentPosition === maxPosition[ currentDeviceMode ] ) {
                        $nextArrow.addClass( 'jet-arrow-disabled' );
                    } else {
                        $nextArrow.removeClass( 'jet-arrow-disabled' );
                    }

if ( currentPosition === 0 ) {
                        currentTransform = 0;
                    } else {
                        currentTransform = currentPosition * transform[ currentDeviceMode ];
                    }

$timelineTrack.css( {
                        'transform': 'translateX(' + dirMultiplier * currentTransform + '%)'
                    } );
                }
            } );
        }

setArrowPosition();
        $( window ).on( 'resize.jetHorTimeline orientationchange.jetHorTimeline', JetElementsTools.debounce( 150, setArrowPosition ) );
        $( window ).on( 'resize.jetHorTimeline orientationchange.jetHorTimeline', JetElementsTools.debounce( 50, timelineSliderResizeHandler ) );

function setArrowPosition() {
            if ( ! $arrows[0] ) {
                return;
            }

var $middleList           = $scope.find( '.jet-hor-timeline-list--middle' ),
                middleListTopPosition = $middleList.position().top,
                middleListHeight      = $middleList.outerHeight();

$arrows.css({
                'top': middleListTopPosition + middleListHeight/2
            });
        }

function timelineSliderResizeHandler( event ) {
            if ( ! $timeline.hasClass( 'jet-hor-timeline--arrows-nav' ) ) {
                return;
            }

var currentDeviceMode = elementorFrontend.getCurrentDeviceMode(),
                resetSlider = function() {
                    $prevArrow.addClass( 'jet-arrow-disabled' );

if ( $nextArrow.hasClass( 'jet-arrow-disabled' ) ) {
                        $nextArrow.removeClass( 'jet-arrow-disabled' );
                    }

if ( maxPosition[ currentDeviceMode ] === 0 ) {
                        $nextArrow.addClass( 'jet-arrow-disabled' );
                    }

currentTransform = 0;
                    currentPosition = 0;

$timelineTrack.css({
                        'transform': 'translateX(0%)'
                    });
                };

if ( currentDeviceMode != prevDeviceMode ) {
                resetSlider();
                prevDeviceMode = currentDeviceMode;
            }
        }
    }

window.widgetHorizontalTimeline = widgetHorizontalTimeline;

})( jQuery );

MR SKB