1(function ($) { 2 3 const wdtWidgetsOptionsHandler = function($scope) { 4 const animationEffectInstance = new wdtWidgetsAnimationEffectHandlerInit($scope); 5 animationEffectInstance.init(); 6 const inviewInstance = new wdtWidgetsInViewHandlerInit($scope); 7 inviewInstance.init(); 8 }; 9 10 const wdtWidgetsAnimationEffectHandlerInit = function($scope) { 11 12 const $self = this, 13 $window = $(window), 14 $widgetId = $scope.data('id'), 15 $editMode = Boolean(elementorFrontend.isEditMode()), 16 $activeBreakpoints = elementorFrontend.config.responsive.activeBreakpoints, 17 $deviceMode = elementorFrontend.getCurrentDeviceMode(); 18 19 let $parallaxInstance; 20 let $activeBreakpointkeys = []; 21 let $animationEffectSettings = false; 22 let $animationEffectBreakpointSettings = []; 23 24 let $autoMoveElement; 25 26 $self.init = function() { 27 $self.animationEffectInit(); 28 }; 29 30 $self.animationEffectInit = function() { 31 32 if($editMode) { 33 $animationEffectSettings = $self.generateEditorSettings($widgetId); 34 } else { 35 $animationEffectSettings = $scope.data('settings') || false; 36 $animationEffectSettings = (false !== $animationEffectSettings) ? $animationEffectSettings : false; 37 } 38 39 if(!$animationEffectSettings || $animationEffectSettings['wdt_animation_effect'] === 'none') { 40 return false; 41 } 42 43 // Updatebreakpoints 44 $self.updateActiveBreakpoints(); 45 46 // Mouse Move Effect 47 if($animationEffectSettings['wdt_animation_effect'] === 'mouse-move') { 48 $self.animationEffectMouseMove(); 49 } 50 51 // Scroll Effect 52 if($animationEffectSettings['wdt_animation_effect'] === 'scroll') { 53 $self.animationEffectScroll(); 54 } 55 56 // Auto Moving Effect 57 if($animationEffectSettings['wdt_animation_effect'] === 'auto-movement') { 58 $self.animationEffectAutoMovement(); 59 } 60 61 // Marquee Effect 62 if($animationEffectSettings['wdt_animation_effect'] === 'marquee') { 63 $self.animationEffectMarquee(); 64 } 65 66 }; 67 68 $self.generateEditorSettings = function($widgetId) { 69 70 let $editorModels = null; 71 let $editorSettings = {}; 72 73 if(!window.elementor.hasOwnProperty('elements')) { 74 return false; 75 } 76 77 $editorModels = window.elementor.elements.models; 78 if(!$editorModels) { 79 return false; 80 } 81 82 $.each( $editorModels, function( index, obj ) { 83 $.each( obj.attributes.elements.models, function( index, obj ) { 84 $.each( obj.attributes.elements.models, function( index, obj ) { 85 if($widgetId === obj.id) { 86 $editorSettings = obj.attributes.settings.attributes; 87 } 88 }); 89 }); 90 }); 91 92 let $wdtEditorKeys = Object.keys($editorSettings).filter((key) => key.includes('wdt')); 93 let $wdtEditorSettings = $wdtEditorKeys.reduce((cur, key) => { return Object.assign(cur, { [key]: $editorSettings[key] })}, {}); 94 95 let $customDirections = []; 96 if($wdtEditorSettings['wdt_ame_custom_directions']) { 97 $.each( $wdtEditorSettings['wdt_ame_custom_directions'].models, function( index, obj ) { 98 let $customDirection = obj.attributes; 99 $customDirections.push($customDirection); 100 }); 101 } 102 $wdtEditorSettings['wdt_ame_custom_directions'] = $customDirections; 103 104 return $wdtEditorSettings; 105 106 }; 107 108 $self.updateActiveBreakpoints = function() { 109 110 $.each($activeBreakpoints, function (key, value) { 111 if('widescreen' === key) { 112 $activeBreakpointkeys.push( 'desktop' ); 113 $activeBreakpointkeys.push( key ); 114 } else { 115 $activeBreakpointkeys.push( key ); 116 } 117 118 }); 119 120 if ( -1 === $activeBreakpointkeys.indexOf( 'widescreen' ) ) { 121 $activeBreakpointkeys.push( 'desktop' ); 122 } 123 124 }; 125 126 $self.getMouseMoveResponsiveSettings = function() { 127 128 $activeBreakpointkeys.forEach( function( $breakpoint ) { 129 130 if('desktop' === $breakpoint) { 131 $animationEffectBreakpointSettings[$breakpoint] = { 132 'speed' : ($animationEffectSettings['wdt_mme_speed']['size'] && '' != $animationEffectSettings['wdt_mme_speed']['size']) ? $animationEffectSettings['wdt_mme_speed']['size'] : 0.1, 133 'depth' : ($animationEffectSettings['wdt_mme_depth']['size'] && '' != $animationEffectSettings['wdt_mme_depth']['size']) ? $animationEffectSettings['wdt_mme_depth']['size'] : 1 134 }; 135 } else { 136 $animationEffectBreakpointSettings[$breakpoint] = { 137 'speed' : ($animationEffectSettings['wdt_mme_speed_' + $breakpoint]['size'] && '' != $animationEffectSettings['wdt_mme_speed_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_mme_speed_' + $breakpoint]['size'] : $animationEffectSettings['wdt_mme_speed']['size'], 138 'depth' : ($animationEffectSettings['wdt_mme_depth_' + $breakpoint]['size'] && '' != $animationEffectSettings['wdt_mme_depth_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_mme_depth_' + $breakpoint]['size'] : $animationEffectSettings['wdt_mme_depth']['size'] 139 }; 140 } 141 142 }); 143 144 }; 145 146 $self.animationEffectMouseMove = function() { 147 148 // Responsivewise Options 149 $self.getMouseMoveResponsiveSettings();
150 151 // Get settings 152 if(!$animationEffectBreakpointSettings[$deviceMode]) { 153 return false; 154 } 155 156 const $speed = $animationEffectBreakpointSettings[$deviceMode].speed; 157 const $depth = $animationEffectBreakpointSettings[$deviceMode].depth; 158 const $moveAlong = $animationEffectSettings['wdt_mme_move_along'] ? $animationEffectSettings['wdt_mme_move_along'] : 'both'; 159 const $invertMovement = $animationEffectSettings['wdt_mme_invert_movement'] ? Boolean($animationEffectSettings['wdt_mme_invert_movement']) : false; 160 161 // Wrap with div to apply mouse move effect 162 163 let $options = {}; 164 165 $scope.find('.elementor-widget-container').wrapInner('<div class="wdt-effect-mouse-move-wrapper layer" />') 166 $scope.find('.wdt-effect-mouse-move-wrapper').attr('data-depth', $depth); 167 168 if($moveAlong === 'x-axis') { 169 $options['scalarX'] = 10.0; 170 $options['scalarY'] = 0.0; 171 } 172 if($moveAlong === 'y-axis') { 173 $options['scalarX'] = 0.0; 174 $options['scalarY'] = 10.0; 175 } 176 if($moveAlong === 'both') { 177 $options['scalarX'] = 10.0; 178 $options['scalarY'] = 10.0; 179 } 180 181 $options['frictionX'] = $speed; 182 $options['frictionY'] = $speed; 183 $options['invertX'] = $invertMovement; 184 $options['invertY'] = $invertMovement; 185 186 $parallaxInstance = $scope.parallax($options); 187 188 }; 189 190 $self.getScrollResponsiveSettings = function() { 191 192 let $wdt_sle_parallax_x_depth = ($animationEffectSettings['wdt_sle_parallax_x_depth'] && '' != $animationEffectSettings['wdt_sle_parallax_x_depth']['size']) ? $animationEffectSettings['wdt_sle_parallax_x_depth']['size'] : 50; 193 let $wdt_sle_parallax_y_depth = ($animationEffectSettings['wdt_sle_parallax_y_depth'] && '' != $animationEffectSettings['wdt_sle_parallax_y_depth']['size']) ? $animationEffectSettings['wdt_sle_parallax_y_depth']['size'] : 50; 194 let $wdt_sle_rotate_x_angle = ($animationEffectSettings['wdt_sle_rotate_x_angle'] && '' != $animationEffectSettings['wdt_sle_rotate_x_angle']['size']) ? $animationEffectSettings['wdt_sle_rotate_x_angle']['size'] : 45; 195 let $wdt_sle_rotate_y_angle = ($animationEffectSettings['wdt_sle_rotate_y_angle'] && '' != $animationEffectSettings['wdt_sle_rotate_y_angle']['size']) ? $animationEffectSettings['wdt_sle_rotate_y_angle']['size'] : 45; 196 let $wdt_sle_rotate_z_angle = ($animationEffectSettings['wdt_sle_rotate_z_angle'] && '' != $animationEffectSettings['wdt_sle_rotate_z_angle']['size']) ? $animationEffectSettings['wdt_sle_rotate_z_angle']['size'] : 45; 197 let $wdt_sle_scale_value = ($animationEffectSettings['wdt_sle_scale_value'] && '' != $animationEffectSettings['wdt_sle_scale_value']['size']) ? $animationEffectSettings['wdt_sle_scale_value']['size'] : 1; 198 let $wdt_sle_blur_value = ($animationEffectSettings['wdt_sle_blur_value'] && '' != $animationEffectSettings['wdt_sle_blur_value']['size']) ? $animationEffectSettings['wdt_sle_blur_value']['size'] : 0; 199 let $wdt_sle_opacity_value = ($animationEffectSettings['wdt_sle_opacity_value'] && '' != $animationEffectSettings['wdt_sle_opacity_value']['size']) ? $animationEffectSettings['wdt_sle_opacity_value']['size'] : 1; 200 201 $activeBreakpointkeys.forEach( function( $breakpoint ) { 202 203 if('desktop' === $breakpoint) { 204 $animationEffectBreakpointSettings[$breakpoint] = { 205 'parallaxDepthX': $wdt_sle_parallax_x_depth, 206 'parallaxDepthY': $wdt_sle_parallax_y_depth, 207 'rotateAngleX' : $wdt_sle_rotate_x_angle, 208 'rotateAngleY' : $wdt_sle_rotate_y_angle, 209 'rotateAngleZ' : $wdt_sle_rotate_z_angle, 210 'scaleValue' : $wdt_sle_scale_value, 211 'blurValue' : $wdt_sle_blur_value, 212 'opacityValue' : $wdt_sle_opacity_value 213 }; 214 } else { 215 $animationEffectBreakpointSettings[$breakpoint] = { 216 'parallaxDepthX' : ($animationEffectSettings['wdt_sle_parallax_x_depth_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_parallax_x_depth_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_parallax_x_depth_' + $breakpoint]['size'] : $wdt_sle_parallax_x_depth, 217 'parallaxDepthY' : ($animationEffectSettings['wdt_sle_parallax_y_depth_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_parallax_y_depth_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_parallax_y_depth_' + $breakpoint]['size'] : $wdt_sle_parallax_y_depth, 218 'rotateAngleX' : ($animationEffectSettings['wdt_sle_rotate_x_angle_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_rotate_x_angle_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_rotate_x_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_x_angle, 219 'rotateAngleY' : ($animationEffectSettings['wdt_sle_rotate_y_angle_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_rotate_y_angle_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_rotate_y_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_y_angle, 220 'rotateAngleZ' : ($animationEffectSettings['wdt_sle_rotate_z_angle_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_rotate_z_angle_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_rotate_z_angle_' + $breakpoint]['size'] : $wdt_sle_rotate_z_angle, 221 'scaleValue' : ($animationEffectSettings['wdt_sle_scale_value_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_scale_value_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_scale_value_' + $breakpoint]['size'] : $wdt_sle_scale_value, 222 'blurValue' : ($animationEffectSettings['wdt_sle_blur_value_' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_blur_value_' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_blur_value_' + $breakpoint]['size'] : $wdt_sle_blur_value, 223 'opacityValue' : ($animationEffectSettings['wdt_sle_opacity_value' + $breakpoint] && '' != $animationEffectSettings['wdt_sle_opacity_value' + $breakpoint]['size']) ? $animationEffectSettings['wdt_sle_opacity_value' + $breakpoint]['size'] : $wdt_sle_opacity_value, 224 }; 225 } 226 227 }); 228 229 }; 230 231 $self.animationEffectScroll = function() { 232 233 // Responsivewise Options 234 $self.getScrollResponsiveSettings();
235 236 // Get settings 237 if(!$animationEffectBreakpointSettings[$deviceMode]) { 238 return false; 239 } 240 241 // Wrap with div with apply scroll effect div 242 $scope.find('.elementor-widget-container').wrapInner('<div class="wdt-effect-scroll-wrapper" />') 243 244 const $parallaxDirectionX = $animationEffectSettings['wdt_sle_parallax_x_direction'] ? Boolean($animationEffectSettings['wdt_sle_parallax_x_direction']) : false; 245 const $parallaxDepthX = $animationEffectBreakpointSettings[$deviceMode].parallaxDepthX; 246 const $parallaxDirectionY = $animationEffectSettings['wdt_sle_parallax_y_direction'] ? Boolean($animationEffectSettings['wdt_sle_parallax_y_direction']) : false; 247 const $parallaxDepthY = $animationEffectBreakpointSettings[$deviceMode].parallaxDepthY; 248 249 const $rotateX = $animationEffectSettings['wdt_sle_rotate_x'] ? Boolean($animationEffectSettings['wdt_sle_rotate_x']) : false; 250 const $rotateAngleX = $animationEffectBreakpointSettings[$deviceMode].rotateAngleX; 251 const $rotateY = $animationEffectSettings['wdt_sle_rotate_y'] ? Boolean($animationEffectSettings['wdt_sle_rotate_y']) : false; 252 const $rotateAngleY = $animationEffectBreakpointSettings[$deviceMode].rotateAngleY; 253 const $rotateZ = $animationEffectSettings['wdt_sle_rotate_z'] ? Boolean($animationEffectSettings['wdt_sle_rotate_z']) : false; 254 const $rotateAngleZ = $animationEffectBreakpointSettings[$deviceMode].rotateAngleZ; 255 256 const $scale = $animationEffectSettings['wdt_sle_scale'] ? Boolean($animationEffectSettings['wdt_sle_scale']) : false; 257 const $scaleValue = $animationEffectBreakpointSettings[$deviceMode].scaleValue; 258 259 const $blur = $animationEffectSettings['wdt_sle_blur'] ? Boolean($animationEffectSettings['wdt_sle_blur']) : false; 260 const $blurValue = $animationEffectBreakpointSettings[$deviceMode].blurValue; 261 262 const $opacity = $animationEffectSettings['wdt_sle_opacity'] ? Boolean($animationEffectSettings['wdt_sle_opacity']) : false; 263 const $opacityValue = $animationEffectBreakpointSettings[$deviceMode].opacityValue; 264 265 const $itemTop = +$scope.find('.wdt-effect-scroll-wrapper').offset().top; 266 const $itemHeight = +$scope.find('.wdt-effect-scroll-wrapper').height(); 267 const $toScroll = ($itemTop + $itemHeight); 268 const $windowHeight = $window.height(); 269 const $fromScroll = ($itemTop - $windowHeight); 270 271 // Build options json 272 let $options = {'distance': 10, 'smoothness': 30, 'from-scroll': $fromScroll, 'to-scroll': $toScroll}; 273 if($parallaxDirectionX) { 274 $options['x'] = $parallaxDepthX; 275 } 276 if($parallaxDirectionY) { 277 $options['y'] = $parallaxDepthY; 278 } 279 if($rotateX) { 280 $options['rotateX'] = $rotateAngleX; 281 } 282 if($rotateY) { 283 $options['rotateY'] = $rotateAngleY; 284 } 285 if($rotateZ) { 286 $options['rotateZ'] = $rotateAngleZ; 287 } 288 if($scale) { 289 $options['scale'] = $scaleValue; 290 } 291 if($blur) { 292 $options['blur'] = $blurValue; 293 } 294 if($opacity) { 295 $options['opacity'] = $opacityValue; 296 } 297 298 // Init parallax 299 $scope.find('.wdt-effect-scroll-wrapper').attr('data-parallax', JSON.stringify($options)); 300 301 }; 302 303 $self.autoMovementOnIntersect= function(entries, $observer) { 304 305 entries.forEach((entry) => { 306 if(entry.isIntersecting) { 307 $autoMoveElement.play(); 308 } else { 309 $autoMoveElement.pause(); 310 } 311 }); 312 313 } 314 315 $self.generateResponsiveRandomPoints = function($direction) { 316 317 let $reponsiveRandoms = {}; 318 319 let $wdt_x_depth = ($direction['wdt_x_depth'] && '' != $direction['wdt_x_depth']['size']) ? $direction['wdt_x_depth']['size'] : 0; 320 let $wdt_y_depth = ($direction['wdt_y_depth'] && '' != $direction['wdt_y_depth']['size']) ? $direction['wdt_y_depth']['size'] : 0; 321 let $wdt_rotate_angle = ($direction['wdt_rotate_angle'] && '' != $direction['wdt_rotate_angle']['size']) ? $direction['wdt_rotate_angle']['size'] : 0; 322 let $wdt_scale_value = ($direction['wdt_scale_value'] && '' != $direction['wdt_scale_value']['size']) ? $direction['wdt_scale_value']['size'] : 1; 323 let $wdt_blur_value = ($direction['wdt_blur_value'] && '' != $direction['wdt_blur_value']['size']) ? $direction['wdt_blur_value']['size'] : 0; 324 let $wdt_opacity_value = ($direction['wdt_opacity_value'] && '' != $direction['wdt_opacity_value']['size']) ? $direction['wdt_opacity_value']['size'] : 1; 325 326 $activeBreakpointkeys.forEach( function( $breakpoint ) { 327 328 if('desktop' === $breakpoint) { 329 $reponsiveRandoms[$breakpoint] = { 330 'depthX' : $wdt_x_depth, 331 'depthY' : $wdt_y_depth, 332 'rotateAngle' : $wdt_rotate_angle,
333 'scaleValue' : $wdt_scale_value, 334 'blurValue' : $wdt_blur_value, 335 'opacityValue': $wdt_opacity_value 336 }; 337 } else { 338 $reponsiveRandoms[$breakpoint] = { 339 'depthX' : ($direction['wdt_x_depth_' + $breakpoint] && '' != $direction['wdt_x_depth_' + $breakpoint]['size']) ? $direction['wdt_x_depth_' + $breakpoint]['size'] : $wdt_x_depth, 340 'depthY' : ($direction['wdt_y_depth_' + $breakpoint] && '' != $direction['wdt_y_depth_' + $breakpoint]['size']) ? $direction['wdt_y_depth_' + $breakpoint]['size'] : $wdt_y_depth, 341 'rotateAngle' : ($direction['wdt_rotate_angle_' + $breakpoint] && '' != $direction['wdt_rotate_angle_' + $breakpoint]['size']) ? $direction['wdt_rotate_angle_' + $breakpoint]['size'] : $wdt_rotate_angle, 342 'scaleValue' : ($direction['wdt_scale_value_' + $breakpoint] && '' != $direction['wdt_scale_value_' + $breakpoint]['size']) ? $direction['wdt_scale_value_' + $breakpoint]['size'] : $wdt_scale_value, 343 'blurValue' : ($direction['wdt_blur_value_' + $breakpoint] && '' != $direction['wdt_blur_value_' + $breakpoint]['size']) ? $direction['wdt_blur_value_' + $breakpoint]['size'] : $wdt_blur_value, 344 'opacityValue' : ($direction['wdt_opacity_value' + $breakpoint] && '' != $direction['wdt_opacity_value' + $breakpoint]['size']) ? $direction['wdt_opacity_value' + $breakpoint]['size'] : $wdt_opacity_value, 345 }; 346 } 347 348 }); 349 350 return $reponsiveRandoms; 351 352 }; 353 354 $self.generateRandomPoints = function($ameCustomDirections) { 355 356 let $points = []; 357 358 $ameCustomDirections.forEach(($direction) => { 359 360 let $unitPoint = {}; 361 362 const $responsiveDirections = $self.generateResponsiveRandomPoints($direction); 363 364 // Transform 365 $unitPoint = { 366 transform: '' 367 }; 368 369 const $xDirection = $direction['wdt_x_direction'] ? Boolean($direction['wdt_x_direction']) : false; 370 const $depthX = $responsiveDirections[$deviceMode].depthX; 371 const $yDirection = $direction['wdt_y_direction'] ? Boolean($direction['wdt_y_direction']) : false; 372 const $depthY = $responsiveDirections[$deviceMode].depthY; 373 const $rotate = $direction['wdt_rotate'] ? Boolean($direction['wdt_rotate']) : false; 374 const $rotateAngle = $responsiveDirections[$deviceMode].rotateAngle; 375 const $scale = $direction['wdt_scale'] ? Boolean($direction['wdt_scale']) : false; 376 const $scaleValue = $responsiveDirections[$deviceMode].scaleValue; 377 378 if($xDirection) { 379 $unitPoint['transform'] += 'translateX('+$depthX+'px) '; 380 } 381 if($yDirection) { 382 $unitPoint['transform'] += 'translateY('+$depthY+'px) '; 383 } 384 if($rotate) { 385 $unitPoint['transform'] += 'rotate('+$rotateAngle+'deg) '; 386 } 387 if($scale) { 388 $unitPoint['transform'] += 'scale('+$scaleValue+') '; 389 } 390 391 $unitPoint['transform'] = $.trim($unitPoint['transform']) 392 $unitPoint['opacity'] = 0.2; 393 394 // Blur 395 const $blur = $direction['wdt_blur'] ? Boolean($direction['wdt_blur']) : false; 396 const $blurValue = $responsiveDirections[$deviceMode].blurValue; 397 398 if($blur) { 399 $unitPoint['filter'] = 'blur('+$blurValue+'px)'; 400 } 401 402 // Opacity 403 const $opacity = $direction['wdt_opacity'] ? Boolean($direction['wdt_opacity']) : false; 404 const $opacityValue = $responsiveDirections[$deviceMode].opacityValue; 405 406 if($opacity) {
407 $unitPoint['opacity'] = +$opacityValue; 408 } 409 410 411 if($unitPoint) { 412 $points.push($unitPoint); 413 } 414 415 }); 416 417 return $points; 418 419 } 420 421 $self.animationEffectAutoMovement = function() { 422 423 // Wrap with auto movement div 424 $scope.find('.elementor-widget-container').wrapInner('<div class="wdt-effect-auto-movement-wrapper" />') 425 426 // Animation 427 let $autoMoveElementItem = $scope.find('.wdt-effect-auto-movement-wrapper')[0]; 428 let $ameDirection = $animationEffectSettings['wdt_ame_direction']; 429 let $ameDuration = $animationEffectSettings['wdt_ame_duration']['size'] ? Math.ceil($animationEffectSettings['wdt_ame_duration']['size']*1500) : 10000; 430 let $ameIteration = ($animationEffectSettings['wdt_ame_iteration'] === 'infinity') ? Infinity : 1; 431 let $boundTo = $animationEffectSettings['wdt_bound_to'] ? $animationEffectSettings['wdt_bound_to'] : 'section'; 432 let $boundToElement = ($boundTo === 'section') ? $scope.parents('.elementor-section') : $scope.parents('.elementor-column'); 433 434 let $itemWidth = +$scope.find('.wdt-effect-auto-movement-wrapper').width(); 435 let $sectionWidth = +$boundToElement.width(); 436 let $sectionItemWidth = +$sectionWidth + +$itemWidth; 437 438 let $itemHeight = +$scope.find('.wdt-effect-auto-movement-wrapper').height(); 439 let $sectionHeight = +$boundToElement.height(); 440 let $sectionItemHeight = +$sectionHeight + +$itemHeight; 441 442 if($ameDirection === 'left-to-right') { 443 $autoMoveElement = $autoMoveElementItem.animate([ 444 { transform: 'translateX(-'+$itemWidth+'px)' }, 445 { transform: 'translateX('+$sectionWidth+'px)' } 446 ], { 447 duration: $ameDuration, 448 iterations: $ameIteration 449 }); 450 $autoMoveElement.pause(); 451 } else if($ameDirection === 'right-to-left') { 452 $autoMoveElement = $autoMoveElementItem.animate([ 453 { transform: 'translateX('+$sectionItemWidth+'px)' }, 454 { transform: 'translateX(-'+$itemWidth+'px)' } 455 ], { 456 duration: $ameDuration, 457 iterations: $ameIteration 458 }); 459 $autoMoveElement.pause(); 460 } else if($ameDirection === 'top-to-bottom') { 461 $autoMoveElement = $autoMoveElementItem.animate([ 462 { transform: 'translateY(-'+$itemHeight+'px)' }, 463 { transform: 'translateY('+$sectionHeight+'px)' } 464 ], { 465 duration: $ameDuration, 466 iterations: $ameIteration 467 }); 468 $autoMoveElement.pause(); 469 } else if($ameDirection === 'bottom-to-top') { 470 $autoMoveElement = $autoMoveElementItem.animate([ 471 { transform: 'translateY('+$sectionItemHeight+'px)' }, 472 { transform: 'translateY(-'+$itemHeight+'px)' } 473 ], { 474 duration: $ameDuration, 475 iterations: $ameIteration 476 }); 477 $autoMoveElement.pause(); 478 } else if($ameDirection === 'custom') { 479 480 let $ameCustomDirections = $animationEffectSettings['wdt_ame_custom_directions']; 481 if($ameCustomDirections.length) { 482 let $ameCustomDirectionPoints = $self.generateRandomPoints($ameCustomDirections); 483 $autoMoveElement = $autoMoveElementItem.animate($ameCustomDirectionPoints, { 484 duration: $ameDuration, 485 iterations: $ameIteration 486 }); 487 $autoMoveElement.pause(); 488 } 489 490 } 491 492 // If the widget is in view port init animation 493 if('IntersectionObserver' in window) { 494 let $observer; 495 let $observerOptions = { 496 root: null, 497 rootMargin: "0px", 498 threshold: 0.1 499 }; 500 501 $observer = new IntersectionObserver($self.autoMovementOnIntersect, $observerOptions); 502 $observer.observe($scope[0]); 503 } else { 504 $autoMoveElement.play(); 505 } 506 507 }; 508 509 $self.animationEffectMarquee = function() { 510 511 // Wrap with auto movement div 512 $scope.find('.elementor-widget-container').wrapInner('<div class="wdt-effect-marquee-wrapper" />') 513 514 // Animation 515 let $marqueeElementItem = $scope.find('.wdt-effect-marquee-wrapper'); 516 let $width = $animationEffectSettings['wdt_mqe_width']['size'] ? $animationEffectSettings['wdt_mqe_width']['size'] : 200; 517 let $height = $animationEffectSettings['wdt_mqe_height']['size'] ? $animationEffectSettings['wdt_mqe_height']['size'] : 120; 518 let $speed = $animationEffectSettings['wdt_mqe_speed']['size'] ? $animationEffectSettings['wdt_mqe_speed']['size'] : 1; 519 let $direction = $animationEffectSettings['wdt_mqe_direction'] ? $animationEffectSettings['wdt_mqe_direction'] : 'left-to-right'; 520 let $boundTo = $animationEffectSettings['wdt_mqe_bound_to'] ? $animationEffectSettings['wdt_mqe_bound_to'] : 'section'; 521 let $boundToElement = ($boundTo === 'section') ? $scope.parents('.elementor-section') : $scope.parents('.elementor-column'); 522 523 $marqueeElementItem.css({ 524 'position': 'absolute', 525 'width': $width, 526 'height': $height 527 }); 528 529 const $itemWidth = $marqueeElementItem.width(); 530 const $itemOffset = $marqueeElementItem.offset(); 531 const $itemOffsetLeft = $itemOffset.left; 532
533 const $parentWidth = $boundToElement.width(); 534 const $parentOffset = $boundToElement.offset(); 535 const $parentOffsetLeft = $parentOffset.left; 536 537 if($direction == 'right-to-left') { 538 539 let $itemInitPosition = 0; 540 const $leftDiff = parseFloat($itemOffsetLeft) - parseFloat($parentOffsetLeft); 541 const $rightPositionX = parseFloat($parentWidth) - parseFloat($leftDiff); 542 let $leftOffset = parseFloat($leftDiff) + parseFloat($itemWidth); 543 $leftOffset = '-' + parseFloat($leftOffset); 544 545 function animationLoop() { 546 547 $itemInitPosition = $itemInitPosition - $speed; 548 $marqueeElementItem.css({ 549 'left': $itemInitPosition + 'px' 550 }); 551 $frameRtlID = window.requestAnimationFrame(animationLoop); 552 553 if ($itemInitPosition <= $leftOffset) { 554 window.cancelAnimationFrame($frameRtlID); 555 $itemInitPosition = $rightPositionX; 556 $frameRtlID = window.requestAnimationFrame(animationLoop); 557 } 558 559 } 560 561 let $frameRtlID = window.requestAnimationFrame(animationLoop); 562 563 } else { 564 565 let $itemInitPosition = 0; 566 const $leftDiff = parseFloat($itemOffsetLeft) - parseFloat($parentOffsetLeft); 567 const $maxPositionWidth = parseFloat($leftDiff) + parseFloat($itemWidth); 568 const $maxPositionX = parseFloat($parentWidth) - parseFloat($maxPositionWidth) + parseFloat($itemWidth); 569 const $loopPositionX = parseFloat($leftDiff) + parseFloat($itemWidth); 570 571 function animationLoop() { 572 573 $itemInitPosition = $itemInitPosition + $speed; 574 $marqueeElementItem.css({ 575 'left': $itemInitPosition + 'px' 576 }); 577 $frameLtrID = window.requestAnimationFrame(animationLoop); 578 579 if ($itemInitPosition >= $maxPositionX) { 580 window.cancelAnimationFrame($frameLtrID); 581 $itemInitPosition = -$loopPositionX; 582 $frameLtrID = window.requestAnimationFrame(animationLoop); 583 } 584 585 } 586 587 let $frameLtrID = window.requestAnimationFrame(animationLoop); 588 589 } 590 591 }; 592 593 }; 594 595 const wdtWidgetsInViewHandlerInit = function($scope) { 596 597 const $self = this, 598 $window = $(window), 599 $widgetId = $scope.data('id'), 600 $editMode = Boolean(elementorFrontend.isEditMode()); 601 602 let $inViewSettings = false; 603 let $inViewLoop = false; 604 let $inViewElement = $scope[0]; 605 606 $self.init = function() { 607 $self.inViewStatusUpdateInit(); 608 }; 609 610 $self.inViewStatusUpdateInit = function() { 611 612 if($editMode) { 613 $inViewSettings = $self.generateEditorSettings($widgetId); 614 } else { 615 $inViewSettings = $scope.data('settings') || false; 616 $inViewSettings = (false !== $inViewSettings) ? $inViewSettings : false; 617 } 618 619 if(!$inViewSettings || !$inViewSettings['wdt_enable_inview_status']) { 620 return false; 621 } 622 623 $inViewLoop = $inViewSettings['wdt_enable_inview_loop']; 624 625 if('IntersectionObserver' in window) { 626 $self.createObserver(); 627 } 628 629 }; 630 631 $self.generateEditorSettings = function($widgetId) { 632 633 let $editorModels = null; 634 let $editorSettings = {}; 635 636 if(!window.elementor.hasOwnProperty('elements')) { 637 return false; 638 } 639 640 $editorModels = window.elementor.elements.models; 641 if(!$editorModels) { 642 return false; 643 } 644 645 $.each( $editorModels, function( index, obj ) { 646 $.each( obj.attributes.elements.models, function( index, obj ) { 647 $.each( obj.attributes.elements.models, function( index, obj ) { 648 if($widgetId === obj.id) { 649 $editorSettings = obj.attributes.settings.attributes; 650 } 651 });
652 653 }); 654 }); 655 656 let $wdtEditorKeys = Object.keys($editorSettings).filter((key) => key.includes('wdt')); 657 let $wdtEditorSettings = $wdtEditorKeys.reduce((cur, key) => { return Object.assign(cur, { [key]: $editorSettings[key] })}, {}); 658 659 return $wdtEditorSettings; 660 661 }; 662 663 $self.createObserver = function() { 664 let $observer; 665 666 let $options = { 667 root: null, 668 rootMargin: "0px", 669 threshold: 1 670 }; 671 672 $observer = new IntersectionObserver($self.handleIntersect, $options); 673 $observer.observe($inViewElement); 674 } 675 676 $self.handleIntersect= function(entries, $observer) { 677 entries.forEach((entry) => { 678 if(entry.isIntersecting) { 679 entry.target.classList.add('wdt-item-is-inview'); 680 } else { 681 if($inViewLoop) { 682 entry.target.classList.remove('wdt-item-is-inview'); 683 } 684 } 685 }); 686 } 687 688 }; 689 690 $(window).on('elementor/frontend/init', function () { 691 elementorFrontend.hooks.addAction( 'frontend/element_ready/widget', wdtWidgetsOptionsHandler ); 692 }); 693 694})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.