22

✏️ Editing: jet-slider.js

(function ($) {

"use strict";

function widgetSlider( $scope ) {

var $target         = $scope.find( '.jet-slider' ),
        $imagesTagList  = $( '.sp-image', $target ),
        item            = $( '.jet-slider__item', $target ),
        instance        = null,
        item_url        = '',
        item_url_target = '',
        defaultSettings = {
            imageScaleMode: 'cover',
            slideDistance: { size: 10, unit: 'px' },
            slideDuration: 500,
            sliderAutoplay: true,
            sliderAutoplayDelay: 2000,
            sliderAutoplayOnHover: 'pause',
            sliderFadeMode: false,
            sliderFullScreen: true,
            sliderFullscreenIcon: '',
            sliderHeight: { size: 600, unit: 'px' },
            sliderLoop: true,
            sliderNaviOnHover: false,
            sliderNavigation: true,
            sliderNavigationIcon: '',
            sliderPagination: false,
            sliderShuffle: false,
            sliderWidth: { size: 100, unit: '%' },
            thumbnailWidth: 120,
            thumbnailHeight: 80,
            thumbnails: true,
            rightToLeft: false,
        },
        instanceSettings    = $target.data( 'settings' ) || {},
        breakpoints         = JetElementsTools.getElementorElementSettings( $scope ),
        breakpointsSettings = {},
        defaultHeight,
        defaultThumbHeight,
        defaultThumbWidth,
        activeBreakpoints   = elementorFrontend.config.responsive.activeBreakpoints || {},
        settings            = $.extend( {}, defaultSettings, instanceSettings ),
        fraction_nav        = $target.find( '.jet-slider__fraction-pagination' ),
        editMode            = Boolean( elementorFrontend.isEditMode() );

if ( ! $target.length ) {
            return;
        }

if ( !editMode ) {
            $target.on( 'mousedown touchstart', '.jet-slider__content[data-slide-url]', function( e ) {
                window.XPos = e.pageX || e.originalEvent.changedTouches[0].pageX;
                window.YPos = e.pageY || e.originalEvent.changedTouches[0].pageY;
            });

$target.on( 'mouseup touchend', '.jet-slider__content[data-slide-url]', function( e ) {
                var $this = $( this ),
                    item_url = $this.data( 'slide-url' ),
                    item_url_target = $this.data( 'slide-url-target' ),
                    clickXPos = e.pageX || e.originalEvent.changedTouches[0].pageX,
                    clickYPos = e.pageY || e.originalEvent.changedTouches[0].pageY;

if ( window.XPos === clickXPos && window.YPos === clickYPos ) {
                    e.preventDefault();
                    if ( '_blank' === item_url_target ) {
                        window.open( item_url );
                    } else {
                        window.location = item_url;
                    }
                }
            } );
        }

defaultHeight = ( breakpoints['slider_height'] && 'custom' === breakpoints['slider_height']['unit'] ) ? breakpoints['slider_height']['size'] : ( '' != breakpoints['slider_height']['size'] ) ? breakpoints['slider_height']['size'] + breakpoints['slider_height']['unit'] : '600px';

defaultThumbHeight = ( 'thumbnail_height' in breakpoints && '' != breakpoints['thumbnail_height'] ) ? breakpoints['thumbnail_height'] : 80;

defaultThumbWidth  = ( 'thumbnail_width' in breakpoints && '' != breakpoints['thumbnail_width'] ) ? breakpoints['thumbnail_width'] : 120;

var wHeight = $( window ).height(),
 dHeight = $( document ).height(),
 offsetfix = ( editMode && wHeight < dHeight ) ? 18 : 1;

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

if ( 'widescreen' === breakpointName ) {

var breakpoint = activeBreakpoints[breakpointName].value - offsetfix,

breakpointHeight = ( breakpoints['slider_height_' + breakpointName] && 'custom' === breakpoints['slider_height_' + breakpointName]['unit'] ) ? breakpoints['slider_height']['size'] : ( '' != breakpoints['slider_height_' + breakpointName]['size'] ) ? breakpoints['slider_height_' + breakpointName]['size'] + breakpoints['slider_height_' + breakpointName]['unit'] : defaultHeight,

breakpointThumbHeight = '' != breakpoints['thumbnail_height_' + breakpointName] ? breakpoints['thumbnail_height_' + breakpointName] : defaultThumbHeight,

breakpointThumbWidth  = '' != breakpoints['thumbnail_width_' + breakpointName] ? breakpoints['thumbnail_width_' + breakpointName] : defaultThumbWidth,

desktopHeight      = '' != breakpoints['slider_height']['size'] ? breakpoints['slider_height']['size'] + breakpoints['slider_height']['unit'] : settings['sliderHeight']['size'] + settings['sliderHeight']['unit'],

desktopThumbHeight = '' != breakpoints['thumbnail_height'] ? breakpoints['thumbnail_height'] : settings['thumbnailHeight'],

desktopThumbWidth  = '' != breakpoints['thumbnail_width'] ? breakpoints['thumbnail_width'] : settings['thumbnailWidth'];

if ( breakpointHeight || breakpointThumbHeight || breakpointThumbWidth ) {
                    breakpointsSettings[breakpoint] = {};
                } else {
                    return;
                }

if ( breakpointHeight ) {
                    defaultHeight = breakpointHeight;

breakpointsSettings[breakpoint]['height'] = desktopHeight;
                }

if ( breakpointThumbHeight ) {
                    defaultThumbHeight = breakpointThumbHeight;

breakpointsSettings[breakpoint]['thumbnailHeight'] = desktopThumbHeight;
                }

if ( breakpointThumbWidth ) {
                    defaultThumbWidth = breakpointThumbWidth;

breakpointsSettings[breakpoint]['thumbnailWidth'] = desktopThumbWidth;
                }

} else {
                var breakpoint = activeBreakpoints[breakpointName].value - offsetfix,

breakpointThumbHeight = breakpoints['thumbnail_height_' + breakpointName] ? breakpoints['thumbnail_height_' + breakpointName] : false,
                    breakpointThumbWidth  = breakpoints['thumbnail_width_' + breakpointName] ? breakpoints['thumbnail_width_' + breakpointName] : false;

breakpointHeight = ( 'custom' === breakpoints['slider_height_' + breakpointName]['unit'] ) ? breakpoints['slider_height_' + breakpointName]['size'] : ( '' != breakpoints['slider_height_' + breakpointName]['size'] ) ? breakpoints['slider_height_' + breakpointName]['size'] + breakpoints['slider_height_' + breakpointName]['unit'] : false;

if ( breakpointHeight ) {
                    breakpointsSettings[breakpoint]['height'] = breakpointHeight;
                }

if ( breakpointThumbHeight ) {
                    breakpointsSettings[breakpoint]['thumbnailHeight'] = breakpointThumbHeight;
                }

if ( breakpointThumbWidth ) {
                    breakpointsSettings[breakpoint]['thumbnailWidth'] = breakpointThumbWidth;
                }
            }
        } );

$( '.slider-pro', $target ).sliderPro( {
            width: settings['sliderWidth']['size'] + settings['sliderWidth']['unit'],
            height: defaultHeight,
            arrows: settings['sliderNavigation'],
            fadeArrows: settings['sliderNaviOnHover'],
            buttons: settings['sliderPagination'],
            autoplay: settings['sliderAutoplay'],
            autoplayDelay: settings['sliderAutoplayDelay'],
            autoplayOnHover: settings['sliderAutoplayOnHover'],
            fullScreen: settings['sliderFullScreen'],
            shuffle: settings['sliderShuffle'],
            loop: settings['sliderLoop'],
            fade: settings['sliderFadeMode'],
            slideDistance: ( 'string' !== typeof settings['slideDistance']['size'] ) ? settings['slideDistance']['size'] : 0,
            slideAnimationDuration: +settings['slideDuration'],
            imageScaleMode: 'exact',
            waitForLayers: false,
            grabCursor: false,
            thumbnailWidth: defaultThumbWidth,
            thumbnailHeight: defaultThumbHeight,
            rightToLeft: settings['rightToLeft'],
            touchSwipe: settings['touchswipe'],
            init: function() {
                var fullscreenIconHtml = $( '.' + settings['sliderFullscreenIcon'] ).html(),
                    arrowIconHtml      = $( '.' + settings['sliderNavigationIcon'] ).html();

$( '.sp-full-screen-button', $target ).html( fullscreenIconHtml );
                $( '.sp-previous-arrow', $target ).html( arrowIconHtml );
                $( '.sp-next-arrow', $target ).html( arrowIconHtml );
                $( '.slider-pro', $target ).addClass( 'slider-loaded' );

if ( settings.autoSliderHeight ) {

elementorFrontend.elements.$window.trigger("elementor/bg-video/recalc");
 },
 update: function() {
 if ( true === settings['fractionPag'] ) {
 var current = ( this.getSelectedSlide() ? this.getSelectedSlide() : 0 ) + 1,
 total = this.getTotalSlides(),
 prefix = settings['fractionPrefix'] || '',
 separator = settings['fractionSeparator'] || '/',
 suffix = settings['fractionSuffix'] || '';
 
 fraction_nav.html(
 '' +
 '' + prefix + ' ' + current + '' +
 '' + separator + '' +
 '' + suffix + ' ' + total + '' +
 ''
 );
 }
 },
 breakpoints: breakpointsSettings
 } );

$( '.slider-pro', $target ).on( 'gotoSlide', function() {
            $target.find( '[data-element_type]' ).each( function() {
                window.elementorFrontend.hooks.doAction( 'frontend/element_ready/global', $( this ), $ );
            } );
        } );
    }

window.widgetSlider = widgetSlider;

})( jQuery );

MR SKB