(function ($) { const wdtSectionsOptionsHandler = function($scope) { const animationEffectInstance = new wdtWidgetsAnimationEffectHandlerInit($scope); animationEffectInstance.init(); }; const wdtWidgetsAnimationEffectHandlerInit = function($scope) { const $self = this, $window = $(window), $sectionId = $scope.data('id'), $editMode = Boolean(elementorFrontend.isEditMode()), $activeBreakpoints = elementorFrontend.config.responsive.activeBreakpoints, $deviceMode = elementorFrontend.getCurrentDeviceMode(); let $activeBreakpointkeys = []; let $animationEffectSettings = false; //let $animationEffectBreakpointSettings = []; let $mouseMoveItemSettings = {}; let $scrollItemSettings = {}; $self.init = function() { $self.animationEffectInit(); }; $self.filterObjects = function($settings, $searchKey) { let $settingKeys = Object.keys($settings).filter((key) => key.includes($searchKey)); let $filteredSettings = $settingKeys.reduce((cur, key) => { return Object.assign(cur, { [key]: $settings[key] })}, {}); if(Object.keys($filteredSettings).length) { return $filteredSettings; } return false; }; $self.animationEffectInit = function() { if($editMode) { $animationEffectSettings = $self.generateEditorSettings($sectionId); } else { $animationEffectSettings = $scope.data('settings') || false; $animationEffectSettings = $self.filterObjects($animationEffectSettings, 'wdt_'); } if(!$animationEffectSettings || $animationEffectSettings['wdt_animation_effect'] === 'none' || $animationEffectSettings['wdt_animation_effect'] === '') { return false; } // Updatebreakpoints $self.updateActiveBreakpoints(); // Generate Background sections for effects $self.generateBgItemsInSections(); // Mouse Move Effect if(Object.keys($mouseMoveItemSettings).length) { $self.animationEffectMouseMove(); } // Scroll Effect if(Object.keys($scrollItemSettings).length) { let img = new Image(); if($animationEffectSettings['wdt_bg_image']['url'] !== '') { img.src = $animationEffectSettings['wdt_bg_image']['url']; img.onload = function() { let $bgCSS = { 'height': this.height+'px' }; $scope.find('.wdt-section-bgeffects-image').css($bgCSS); $self.animationEffectScroll(); } } } }; $self.generateEditorSettings = function($sectionId) { let $editorModels = null, $editorSettings = {}; if(!window.elementor.hasOwnProperty('elements')) { return false; } $editorModels = window.elementor.elements.models; if(!$editorModels) { return false; } $.each( $editorModels, function( index, obj ) { if($sectionId === obj.id) { $editorSettings = obj.attributes.settings.attributes; } }); if(!Object.keys($editorSettings).length) { return false; } return $self.filterObjects($editorSettings, 'wdt_'); }; $self.updateActiveBreakpoints = function() { $.each($activeBreakpoints, function (key, value) { if('widescreen' === key) { $activeBreakpointkeys.push( 'desktop' ); $activeBreakpointkeys.push( key ); } else { $activeBreakpointkeys.push( key ); } }); if ( -1 === $activeBreakpointkeys.indexOf( 'widescreen' ) ) { $activeBreakpointkeys.push( 'desktop' ); } }; $self.generateBreakpointwiseBgItems = function($section) { let $bgItems = {}; let $wdt_bg_image = ($section['wdt_bg_image'] && '' != $section['wdt_bg_image']['url']) ? $section['wdt_bg_image']['url'] : ''; let $wdt_bg_position = ($section['wdt_bg_position'] && '' != $section['wdt_bg_position']) ? $section['wdt_bg_position'] : 'center center'; let $wdt_bg_size = ($section['wdt_bg_size'] && '' != $section['wdt_bg_size']) ? $section['wdt_bg_size'] : ''; $activeBreakpointkeys.forEach( function( breakpoint ) { if('desktop' === breakpoint) { $bgItems[breakpoint] = { 'bgImage' : $wdt_bg_image, 'bgPosition' : $wdt_bg_position, 'bgSize' : $wdt_bg_size }; } else { $bgItems[breakpoint] = { 'bgImage' : ($section['wdt_bg_image_' + breakpoint] && '' != $section['wdt_bg_image_' + breakpoint]['url']) ? $section['wdt_bg_image_' + breakpoint]['url'] : $wdt_bg_image, 'bgPosition' : ($section['wdt_bg_position_' + breakpoint] && '' != $section['wdt_bg_position_' + breakpoint]) ? $section['wdt_bg_position_' + breakpoint] : $wdt_bg_position, 'bgSize' : ($section['wdt_bg_size_' + breakpoint] && '' != $section['wdt_bg_size_' + breakpoint]) ? $section['wdt_bg_size_' + breakpoint] : $wdt_bg_size }; } }); return $bgItems; }; $self.generateBgItemsInSections = function() { // Remove existing background items $('.wdt-section-bgeffects-item', $scope).remove(); // Generate background settings and layout html const $effectType = $animationEffectSettings['wdt_animation_effect']; let $bgItem = $self.generateBreakpointwiseBgItems($animationEffectSettings); if($effectType === 'none' || $effectType === '' || !$bgItem[$deviceMode]) { return false; } if(!$scope.hasClass('wdt-section-bgeffects')) { $scope.addClass('wdt-section-bgeffects'); } const $bgImage = $bgItem[$deviceMode].bgImage; const $bgPosition = $bgItem[$deviceMode].bgPosition; const $bgSize = $bgItem[$deviceMode].bgSize; if($effectType === 'mouse-move') { let $layout = $( '
' ).prependTo($scope); // Filter mouse move animation settings $mouseMoveItemSettings = $self.filterObjects($animationEffectSettings, 'wdt_mme_'); $mouseMoveItemSettings['wdt_item'] = $layout; } else if($effectType === 'scroll') { let $layout = $( '
' ).prependTo($scope); let $bgCSS = { 'background-image': 'url(' + $bgImage + ')', 'background-position': $bgPosition, 'background-repeat': 'no-repeat', 'background-size': $bgSize }; $( '> .wdt-section-bgeffects-image', $layout ).css( $bgCSS ); // Filter scroll animation settings $scrollItemSettings = $self.filterObjects($animationEffectSettings, 'wdt_sle_'); $scrollItemSettings['wdt_item'] = $layout; } }; $self.getMouseMoveResponsiveSettings = function($mouseMoveItem) { let $mouseMoveBreakpointItem = {}; $activeBreakpointkeys.forEach( function( $breakpoint ) { if('desktop' === $breakpoint) { $mouseMoveBreakpointItem[$breakpoint] = { 'speed' : ($mouseMoveItem['wdt_mme_speed']['size'] && '' != $mouseMoveItem['wdt_mme_speed']['size']) ? $mouseMoveItem['wdt_mme_speed']['size'] : 0.1, 'depth' : ($mouseMoveItem['wdt_mme_depth']['size'] && '' != $mouseMoveItem['wdt_mme_depth']['size']) ? $mouseMoveItem['wdt_mme_depth']['size'] : 1 }; } else { $mouseMoveBreakpointItem[$breakpoint] = { 'speed' : ($mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size'] && '' != $mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size']) ? $mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size'] : $mouseMoveItem['wdt_mme_speed']['size'], 'depth' : ($mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size'] && '' != $mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size']) ? $mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size'] : $mouseMoveItem['wdt_mme_depth']['size'] }; } }); return $mouseMoveBreakpointItem; }; $self.animationEffectMouseMove = function() { // Responsivewise Options let $mouseMoveBreakpointwiseItem = $self.getMouseMoveResponsiveSettings($mouseMoveItemSettings); // Get settings if(!$mouseMoveBreakpointwiseItem[$deviceMode]) { return false; } const $speed = $mouseMoveBreakpointwiseItem[$deviceMode].speed; const $depth = $mouseMoveBreakpointwiseItem[$deviceMode].depth; const $moveAlong = $mouseMoveItemSettings['wdt_mme_move_along'] ? $mouseMoveItemSettings['wdt_mme_move_along'] : 'both'; const $invertMovement = $mouseMoveItemSettings['wdt_mme_invert_movement'] ? Boolean($mouseMoveItemSettings['wdt_mme_invert_movement']) : false; // Wrap with div to apply mouse move effect let $options = {}; $scope.find('.wdt-effect-mouse-move-wrapper').attr('data-depth', $depth); if($moveAlong === 'x-axis') { $options['scalarX'] = 10.0; $options['scalarY'] = 0.0; } if($moveAlong === 'y-axis') { $options['scalarX'] = 0.0; $options['scalarY'] = 10.0; } if($moveAlong === 'both') { $options['scalarX'] = 10.0; $options['scalarY'] = 10.0; } $options['frictionX'] = $speed; $options['frictionY'] = $speed; $options['invertX'] = $invertMovement; $options['invertY'] = $invertMovement; $parallaxInstance = $scope.parallax($options); }; $self.getScrollResponsiveSettings = function($scrollItem) { let $scrollBreakpointItem = {}; let $wdt_sle_parallax_x_depth = ($scrollItem['wdt_sle_parallax_x_depth'] && '' != $scrollItem['wdt_sle_parallax_x_depth']['size']) ? $scrollItem['wdt_sle_parallax_x_depth']['size'] : 50; let $wdt_sle_parallax_y_depth = ($scrollItem['wdt_sle_parallax_y_depth'] && '' != $scrollItem['wdt_sle_parallax_y_depth']['size']) ? $scrollItem['wdt_sle_parallax_y_depth']['size'] : 50; let $wdt_sle_rotate_x_angle = ($scrollItem['wdt_sle_rotate_x_angle'] && '' != $scrollItem['wdt_sle_rotate_x_angle']['size']) ? $scrollItem['wdt_sle_rotate_x_angle']['size'] : 45; let $wdt_sle_rotate_y_angle = ($scrollItem['wdt_sle_rotate_y_angle'] && '' != $scrollItem['wdt_sle_rotate_y_angle']['size']) ? $scrollItem['wdt_sle_rotate_y_angle']['size'] : 45; let $wdt_sle_rotate_z_angle = ($scrollItem['wdt_sle_rotate_z_angle'] && '' != $scrollItem['wdt_sle_rotate_z_angle']['size']) ? $scrollItem['wdt_sle_rotate_z_angle']['size'] : 45; let $wdt_sle_scale_value = ($scrollItem['wdt_sle_scale_value'] && '' != $scrollItem['wdt_sle_scale_value']['size']) ? $scrollItem['wdt_sle_scale_value']['size'] : 1; let $wdt_sle_blur_value = ($scrollItem['wdt_sle_blur_value'] && '' != $scrollItem['wdt_sle_blur_value']['size']) ? $scrollItem['wdt_sle_blur_value']['size'] : 0; let $wdt_sle_opacity_value = ($scrollItem['wdt_sle_opacity_value'] && '' != $scrollItem['wdt_sle_opacity_value']['size']) ? $scrollItem['wdt_sle_opacity_value']['size'] : 1; $activeBreakpointkeys.forEach( function( $breakpoint ) { if('desktop' === $breakpoint) { $scrollBreakpointItem[$breakpoint] = { 'parallaxDepthX': $wdt_sle_parallax_x_depth, 'parallaxDepthY': $wdt_sle_parallax_y_depth, 'rotateAngleX' : $wdt_sle_rotate_x_angle, 'rotateAngleY' : $wdt_sle_rotate_y_angle, 'rotateAngleZ' : $wdt_sle_rotate_z_angle, 'scaleValue' : $wdt_sle_scale_value, 'blurValue' : $wdt_sle_blur_value, 'opacityValue' : $wdt_sle_opacity_value }; } else { $scrollBreakpointItem[$breakpoint] = { 'parallaxDepthX' : ($scrollItem['wdt_sle_parallax_x_depth_' + $breakpoint] && '' != $scrollItem['wdt_sle_parallax_x_depth_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_parallax_x_depth_' + $breakpoint]['size'] : $wdt_sle_parallax_x_depth, 'parallaxDepthY' : ($scrollItem['wdt_sle_parallax_y_depth_' + $breakpoint] && '' != $scrollItem['wdt_sle_parallax_y_depth_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_parallax_y_depth_' + $breakpoint]['size'] : $wdt_sle_parallax_y_depth, 'rotateAngleX' : ($scrollItem['wdt_sle_rotate_x_angle_' + $breakpoint] && '' != $scrollItem['wdt_sle_rotate_x_angle_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_rotate_x_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_x_angle, 'rotateAngleY' : ($scrollItem['wdt_sle_rotate_y_angle_' + $breakpoint] && '' != $scrollItem['wdt_sle_rotate_y_angle_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_rotate_y_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_y_angle, 'rotateAngleZ' : ($scrollItem['wdt_sle_rotate_z_angle_' + $breakpoint] && '' != $scrollItem['wdt_sle_rotate_z_angle_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_rotate_z_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_z_angle, 'scaleValue' : ($scrollItem['wdt_sle_scale_value_' + $breakpoint] && '' != $scrollItem['wdt_sle_scale_value_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_scale_value_' + $breakpoint]['size'] : $wdt_sle_scale_value, 'blurValue' : ($scrollItem['wdt_sle_blur_value_' + $breakpoint] && '' != $scrollItem['wdt_sle_blur_value_' + $breakpoint]['size']) ? $scrollItem['wdt_sle_blur_value_' + $breakpoint]['size'] : $wdt_sle_blur_value, 'opacityValue' : ($scrollItem['wdt_sle_opacity_value' + $breakpoint] && '' != $scrollItem['wdt_sle_opacity_value' + $breakpoint]['size']) ? $scrollItem['wdt_sle_opacity_value' + $breakpoint]['size'] : $wdt_sle_opacity_value, }; } }); return $scrollBreakpointItem; }; $self.animationEffectScroll = function() { // Responsivewise Options let $scrollBreakpointwiseItem = $self.getScrollResponsiveSettings($scrollItemSettings); // Get settings if(!$scrollBreakpointwiseItem[$deviceMode]) { return false; } const $parallaxDirectionX = $scrollItemSettings['wdt_sle_parallax_x_direction'] ? Boolean($scrollItemSettings['wdt_sle_parallax_x_direction']) : false; const $parallaxDepthX = $scrollBreakpointwiseItem[$deviceMode].parallaxDepthX; const $parallaxDirectionY = $scrollItemSettings['wdt_sle_parallax_y_direction'] ? Boolean($scrollItemSettings['wdt_sle_parallax_y_direction']) : false; const $parallaxDepthY = $scrollBreakpointwiseItem[$deviceMode].parallaxDepthY; const $rotateX = $scrollItemSettings['wdt_sle_rotate_x'] ? Boolean($scrollItemSettings['wdt_sle_rotate_x']) : false; const $rotateAngleX = $scrollBreakpointwiseItem[$deviceMode].rotateAngleX; const $rotateY = $scrollItemSettings['wdt_sle_rotate_y'] ? Boolean($scrollItemSettings['wdt_sle_rotate_y']) : false; const $rotateAngleY = $scrollBreakpointwiseItem[$deviceMode].rotateAngleY; const $rotateZ = $scrollItemSettings['wdt_sle_rotate_z'] ? Boolean($scrollItemSettings['wdt_sle_rotate_z']) : false; const $rotateAngleZ = $scrollBreakpointwiseItem[$deviceMode].rotateAngleZ; const $scale = $scrollItemSettings['wdt_sle_scale'] ? Boolean($scrollItemSettings['wdt_sle_scale']) : false; const $scaleValue = $scrollBreakpointwiseItem[$deviceMode].scaleValue; const $blur = $scrollItemSettings['wdt_sle_blur'] ? Boolean($scrollItemSettings['wdt_sle_blur']) : false; const $blurValue = $scrollBreakpointwiseItem[$deviceMode].blurValue; const $opacity = $scrollItemSettings['wdt_sle_opacity'] ? Boolean($scrollItemSettings['wdt_sle_opacity']) : false; const $opacityValue = $scrollBreakpointwiseItem[$deviceMode].opacityValue; const $itemTop = +$scope.find('.wdt-effect-scroll-wrapper').offset().top; const $itemHeight = +$scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').height(); const $toScroll = ($itemTop + $itemHeight); const $windowHeight = $window.height(); const $fromScroll = ($itemTop - $windowHeight); if($parallaxDirectionX) { $scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').css({ 'left': '-'+$parallaxDepthX+'px' }) } else if($parallaxDirectionY) { $scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').css({ 'top': '-'+$parallaxDepthY+'px' }) } // Build options json let $options = {'distance': 10, 'smoothness': 30, 'from-scroll': $fromScroll, 'to-scroll': $toScroll}; if($parallaxDirectionX) { $options['x'] = $parallaxDepthX; } if($parallaxDirectionY) { $options['y'] = $parallaxDepthY; } if($rotateX) { $options['rotateX'] = $rotateAngleX; } if($rotateY) { $options['rotateY'] = $rotateAngleY; } if($rotateZ) { $options['rotateZ'] = $rotateAngleZ; } if($scale) { $options['scale'] = $scaleValue; } if($blur) { $options['blur'] = $blurValue; } if($opacity) { $options['opacity'] = $opacityValue; } // Init parallax $scope.find('.wdt-effect-scroll-wrapper').attr('data-parallax', JSON.stringify($options)); }; }; $(window).on('elementor/frontend/init', function () { elementorFrontend.hooks.addAction( 'frontend/element_ready/section', wdtSectionsOptionsHandler ); }); })(jQuery);