1(function ($) { 2 3 const wdtSectionsOptionsHandler = function($scope) { 4 const animationEffectInstance = new wdtWidgetsAnimationEffectHandlerInit($scope); 5 animationEffectInstance.init(); 6 }; 7 8 const wdtWidgetsAnimationEffectHandlerInit = function($scope) { 9 10 const $self = this, 11 $window = $(window), 12 $sectionId = $scope.data('id'), 13 $editMode = Boolean(elementorFrontend.isEditMode()), 14 $activeBreakpoints = elementorFrontend.config.responsive.activeBreakpoints, 15 $deviceMode = elementorFrontend.getCurrentDeviceMode(); 16 17 let $activeBreakpointkeys = []; 18 let $animationEffectSettings = false; 19 //let $animationEffectBreakpointSettings = []; 20 let $mouseMoveItemSettings = {}; 21 let $scrollItemSettings = {}; 22 23 $self.init = function() { 24 $self.animationEffectInit(); 25 }; 26 27 $self.filterObjects = function($settings, $searchKey) { 28 let $settingKeys = Object.keys($settings).filter((key) => key.includes($searchKey)); 29 let $filteredSettings = $settingKeys.reduce((cur, key) => { return Object.assign(cur, { [key]: $settings[key] })}, {}); 30 if(Object.keys($filteredSettings).length) { 31 return $filteredSettings; 32 } 33 return false; 34 }; 35 36 $self.animationEffectInit = function() { 37 38 if($editMode) { 39 $animationEffectSettings = $self.generateEditorSettings($sectionId); 40 } else { 41 $animationEffectSettings = $scope.data('settings') || false; 42 $animationEffectSettings = $self.filterObjects($animationEffectSettings, 'wdt_'); 43 } 44 45 if(!$animationEffectSettings || $animationEffectSettings['wdt_animation_effect'] === 'none' || $animationEffectSettings['wdt_animation_effect'] === '') { 46 return false; 47 } 48 49 // Updatebreakpoints 50 $self.updateActiveBreakpoints(); 51 52 // Generate Background sections for effects 53 $self.generateBgItemsInSections(); 54 55 // Mouse Move Effect 56 if(Object.keys($mouseMoveItemSettings).length) { 57 $self.animationEffectMouseMove(); 58 } 59 60 // Scroll Effect 61 if(Object.keys($scrollItemSettings).length) { 62 let img = new Image(); 63 if($animationEffectSettings['wdt_bg_image']['url'] !== '') { 64 img.src = $animationEffectSettings['wdt_bg_image']['url']; 65 img.onload = function() { 66 let $bgCSS = { 67 'height': this.height+'px' 68 }; 69 $scope.find('.wdt-section-bgeffects-image').css($bgCSS); 70 $self.animationEffectScroll(); 71 } 72 } 73 } 74 75 }; 76 77 $self.generateEditorSettings = function($sectionId) { 78 79 let $editorModels = null, 80 $editorSettings = {}; 81 82 if(!window.elementor.hasOwnProperty('elements')) { 83 return false; 84 } 85 86 $editorModels = window.elementor.elements.models; 87 if(!$editorModels) { 88 return false; 89 } 90 91 $.each( $editorModels, function( index, obj ) { 92 if($sectionId === obj.id) { 93 $editorSettings = obj.attributes.settings.attributes; 94 } 95 }); 96 97 if(!Object.keys($editorSettings).length) { 98 return false; 99 } 100 101 return $self.filterObjects($editorSettings, 'wdt_'); 102 103 }; 104 105 $self.updateActiveBreakpoints = function() { 106 107 $.each($activeBreakpoints, function (key, value) { 108 if('widescreen' === key) { 109 $activeBreakpointkeys.push( 'desktop' ); 110 $activeBreakpointkeys.push( key ); 111 } else { 112 $activeBreakpointkeys.push( key ); 113 } 114 115 }); 116 117 if ( -1 === $activeBreakpointkeys.indexOf( 'widescreen' ) ) { 118 $activeBreakpointkeys.push( 'desktop' ); 119 } 120 121 }; 122 123 $self.generateBreakpointwiseBgItems = function($section) { 124 125 let $bgItems = {}; 126 let $wdt_bg_image = ($section['wdt_bg_image'] && '' != $section['wdt_bg_image']['url']) ? $section['wdt_bg_image']['url'] : ''; 127 let $wdt_bg_position = ($section['wdt_bg_position'] && '' != $section['wdt_bg_position']) ? $section['wdt_bg_position'] : 'center center'; 128 let $wdt_bg_size = ($section['wdt_bg_size'] && '' != $section['wdt_bg_size']) ? $section['wdt_bg_size'] : ''; 129 130 $activeBreakpointkeys.forEach( function( breakpoint ) { 131 132 if('desktop' === breakpoint) { 133 $bgItems[breakpoint] = { 134 'bgImage' : $wdt_bg_image, 135 'bgPosition' : $wdt_bg_position, 136 'bgSize' : $wdt_bg_size 137 }; 138 } else { 139 $bgItems[breakpoint] = { 140 'bgImage' : ($section['wdt_bg_image_' + breakpoint] && '' != $section['wdt_bg_image_' + breakpoint]['url']) ? $section['wdt_bg_image_' + breakpoint]['url'] : $wdt_bg_image, 141 'bgPosition' : ($section['wdt_bg_position_' + breakpoint] && '' != $section['wdt_bg_position_' + breakpoint]) ? $section['wdt_bg_position_' + breakpoint] : $wdt_bg_position, 142 'bgSize' : ($section['wdt_bg_size_' + breakpoint] && '' != $section['wdt_bg_size_' + breakpoint]) ? $section['wdt_bg_size_' + breakpoint] : $wdt_bg_size 143 }; 144 } 145 146 }); 147 148 return $bgItems; 149 150 }; 151 152 $self.generateBgItemsInSections = function() { 153 154 // Remove existing background items 155 $('.wdt-section-bgeffects-item', $scope).remove(); 156 157 // Generate background settings and layout html 158 const $effectType = $animationEffectSettings['wdt_animation_effect']; 159 160 let $bgItem = $self.generateBreakpointwiseBgItems($animationEffectSettings); 161 162 if($effectType === 'none' || $effectType === '' || !$bgItem[$deviceMode]) { 163 return false;
164 } 165 166 if(!$scope.hasClass('wdt-section-bgeffects')) { 167 $scope.addClass('wdt-section-bgeffects'); 168 } 169 170 const $bgImage = $bgItem[$deviceMode].bgImage; 171 const $bgPosition = $bgItem[$deviceMode].bgPosition; 172 const $bgSize = $bgItem[$deviceMode].bgSize; 173 174 if($effectType === 'mouse-move') { 175 176 let $layout = $( '<div class="wdt-section-bgeffects-item wdt-effect-mouse-move-wrapper layer"><img src="' + $bgImage + '" class="wdt-section-bgeffects-image-tag" /></div>' ).prependTo($scope); 177 178 // Filter mouse move animation settings 179 $mouseMoveItemSettings = $self.filterObjects($animationEffectSettings, 'wdt_mme_'); 180 $mouseMoveItemSettings['wdt_item'] = $layout; 181 182 } else if($effectType === 'scroll') { 183 184 let $layout = $( '<div class="wdt-section-bgeffects-item wdt-effect-scroll-wrapper"><div class="wdt-section-bgeffects-image"></div><img src="' + $bgImage + '" class="wdt-section-bgeffects-image-tag" style="display:none;" /></div>' ).prependTo($scope); 185 186 let $bgCSS = { 187 'background-image': 'url(' + $bgImage + ')', 188 'background-position': $bgPosition, 189 'background-repeat': 'no-repeat', 190 'background-size': $bgSize 191 }; 192 193 $( '> .wdt-section-bgeffects-image', $layout ).css( $bgCSS ); 194 195 // Filter scroll animation settings 196 $scrollItemSettings = $self.filterObjects($animationEffectSettings, 'wdt_sle_'); 197 $scrollItemSettings['wdt_item'] = $layout; 198 199 } 200 201 }; 202 203 $self.getMouseMoveResponsiveSettings = function($mouseMoveItem) { 204 205 let $mouseMoveBreakpointItem = {}; 206 207 $activeBreakpointkeys.forEach( function( $breakpoint ) { 208 209 if('desktop' === $breakpoint) { 210 $mouseMoveBreakpointItem[$breakpoint] = { 211 'speed' : ($mouseMoveItem['wdt_mme_speed']['size'] && '' != $mouseMoveItem['wdt_mme_speed']['size']) ? $mouseMoveItem['wdt_mme_speed']['size'] : 0.1, 212 'depth' : ($mouseMoveItem['wdt_mme_depth']['size'] && '' != $mouseMoveItem['wdt_mme_depth']['size']) ? $mouseMoveItem['wdt_mme_depth']['size'] : 1 213 }; 214 } else { 215 $mouseMoveBreakpointItem[$breakpoint] = { 216 'speed' : ($mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size'] && '' != $mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size']) ? $mouseMoveItem['wdt_mme_speed_' + $breakpoint]['size'] : $mouseMoveItem['wdt_mme_speed']['size'], 217 'depth' : ($mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size'] && '' != $mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size']) ? $mouseMoveItem['wdt_mme_depth_' + $breakpoint]['size'] : $mouseMoveItem['wdt_mme_depth']['size'] 218 }; 219 } 220 221 }); 222 223 return $mouseMoveBreakpointItem; 224 225 }; 226 227 $self.animationEffectMouseMove = function() { 228 229 // Responsivewise Options 230 let $mouseMoveBreakpointwiseItem = $self.getMouseMoveResponsiveSettings($mouseMoveItemSettings); 231 232 // Get settings 233 if(!$mouseMoveBreakpointwiseItem[$deviceMode]) { 234 return false; 235 } 236 237 const $speed = $mouseMoveBreakpointwiseItem[$deviceMode].speed; 238 const $depth = $mouseMoveBreakpointwiseItem[$deviceMode].depth; 239 const $moveAlong = $mouseMoveItemSettings['wdt_mme_move_along'] ? $mouseMoveItemSettings['wdt_mme_move_along'] : 'both'; 240 const $invertMovement = $mouseMoveItemSettings['wdt_mme_invert_movement'] ? Boolean($mouseMoveItemSettings['wdt_mme_invert_movement']) : false; 241 242 // Wrap with div to apply mouse move effect 243 244 let $options = {}; 245 246 $scope.find('.wdt-effect-mouse-move-wrapper').attr('data-depth', $depth); 247 248 if($moveAlong === 'x-axis') { 249 $options['scalarX'] = 10.0; 250 $options['scalarY'] = 0.0; 251 } 252 if($moveAlong === 'y-axis') { 253 $options['scalarX'] = 0.0; 254 $options['scalarY'] = 10.0; 255 } 256 if($moveAlong === 'both') { 257 $options['scalarX'] = 10.0; 258 $options['scalarY'] = 10.0; 259 } 260 261 $options['frictionX'] = $speed; 262 $options['frictionY'] = $speed; 263 $options['invertX'] = $invertMovement; 264 $options['invertY'] = $invertMovement; 265 266 $parallaxInstance = $scope.parallax($options); 267 268 }; 269 270 $self.getScrollResponsiveSettings = function($scrollItem) { 271 272 let $scrollBreakpointItem = {}; 273 274 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; 275 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; 276 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; 277 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; 278 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; 279 let $wdt_sle_scale_value = ($scrollItem['wdt_sle_scale_value'] && '' != $scrollItem['wdt_sle_scale_value']['size']) ? $scrollItem['wdt_sle_scale_value']['size'] : 1; 280 let $wdt_sle_blur_value = ($scrollItem['wdt_sle_blur_value'] && '' != $scrollItem['wdt_sle_blur_value']['size']) ? $scrollItem['wdt_sle_blur_value']['size'] : 0; 281 let $wdt_sle_opacity_value = ($scrollItem['wdt_sle_opacity_value'] && '' != $scrollItem['wdt_sle_opacity_value']['size']) ? $scrollItem['wdt_sle_opacity_value']['size'] : 1; 282 283 $activeBreakpointkeys.forEach( function( $breakpoint ) { 284 285 if('desktop' === $breakpoint) { 286 $scrollBreakpointItem[$breakpoint] = { 287 'parallaxDepthX': $wdt_sle_parallax_x_depth, 288 'parallaxDepthY': $wdt_sle_parallax_y_depth, 289 'rotateAngleX' : $wdt_sle_rotate_x_angle,
290 'rotateAngleY' : $wdt_sle_rotate_y_angle, 291 'rotateAngleZ' : $wdt_sle_rotate_z_angle, 292 'scaleValue' : $wdt_sle_scale_value, 293 'blurValue' : $wdt_sle_blur_value, 294 'opacityValue' : $wdt_sle_opacity_value 295 }; 296 } else { 297 $scrollBreakpointItem[$breakpoint] = { 298 '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, 299 '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, 300 '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, 301 '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, 302 '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, 303 '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, 304 '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, 305 '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, 306 }; 307 } 308 309 }); 310 311 return $scrollBreakpointItem; 312 313 }; 314 315 $self.animationEffectScroll = function() { 316 317 // Responsivewise Options 318 let $scrollBreakpointwiseItem = $self.getScrollResponsiveSettings($scrollItemSettings); 319 320 // Get settings 321 if(!$scrollBreakpointwiseItem[$deviceMode]) { 322 return false; 323 } 324 325 const $parallaxDirectionX = $scrollItemSettings['wdt_sle_parallax_x_direction'] ? Boolean($scrollItemSettings['wdt_sle_parallax_x_direction']) : false; 326 const $parallaxDepthX = $scrollBreakpointwiseItem[$deviceMode].parallaxDepthX; 327 const $parallaxDirectionY = $scrollItemSettings['wdt_sle_parallax_y_direction'] ? Boolean($scrollItemSettings['wdt_sle_parallax_y_direction']) : false; 328 const $parallaxDepthY = $scrollBreakpointwiseItem[$deviceMode].parallaxDepthY; 329 330 const $rotateX = $scrollItemSettings['wdt_sle_rotate_x'] ? Boolean($scrollItemSettings['wdt_sle_rotate_x']) : false; 331 const $rotateAngleX = $scrollBreakpointwiseItem[$deviceMode].rotateAngleX; 332 const $rotateY = $scrollItemSettings['wdt_sle_rotate_y'] ? Boolean($scrollItemSettings['wdt_sle_rotate_y']) : false; 333 const $rotateAngleY = $scrollBreakpointwiseItem[$deviceMode].rotateAngleY; 334 const $rotateZ = $scrollItemSettings['wdt_sle_rotate_z'] ? Boolean($scrollItemSettings['wdt_sle_rotate_z']) : false; 335 const $rotateAngleZ = $scrollBreakpointwiseItem[$deviceMode].rotateAngleZ; 336 337 const $scale = $scrollItemSettings['wdt_sle_scale'] ? Boolean($scrollItemSettings['wdt_sle_scale']) : false; 338 const $scaleValue = $scrollBreakpointwiseItem[$deviceMode].scaleValue; 339 340 const $blur = $scrollItemSettings['wdt_sle_blur'] ? Boolean($scrollItemSettings['wdt_sle_blur']) : false; 341 const $blurValue = $scrollBreakpointwiseItem[$deviceMode].blurValue; 342 343 const $opacity = $scrollItemSettings['wdt_sle_opacity'] ? Boolean($scrollItemSettings['wdt_sle_opacity']) : false;
344 const $opacityValue = $scrollBreakpointwiseItem[$deviceMode].opacityValue; 345 346 const $itemTop = +$scope.find('.wdt-effect-scroll-wrapper').offset().top; 347 const $itemHeight = +$scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').height(); 348 const $toScroll = ($itemTop + $itemHeight); 349 const $windowHeight = $window.height(); 350 const $fromScroll = ($itemTop - $windowHeight); 351 352 if($parallaxDirectionX) { 353 $scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').css({ 354 'left': '-'+$parallaxDepthX+'px' 355 }) 356 } else if($parallaxDirectionY) { 357 $scope.find('.wdt-effect-scroll-wrapper .wdt-section-bgeffects-image').css({ 358 'top': '-'+$parallaxDepthY+'px' 359 }) 360 } 361 362 // Build options json 363 let $options = {'distance': 10, 'smoothness': 30, 'from-scroll': $fromScroll, 'to-scroll': $toScroll}; 364 if($parallaxDirectionX) { 365 $options['x'] = $parallaxDepthX; 366 } 367 if($parallaxDirectionY) { 368 $options['y'] = $parallaxDepthY; 369 } 370 if($rotateX) { 371 $options['rotateX'] = $rotateAngleX; 372 } 373 if($rotateY) { 374 $options['rotateY'] = $rotateAngleY; 375 } 376 if($rotateZ) { 377 $options['rotateZ'] = $rotateAngleZ; 378 } 379 if($scale) { 380 $options['scale'] = $scaleValue; 381 } 382 if($blur) { 383 $options['blur'] = $blurValue; 384 } 385 if($opacity) { 386 $options['opacity'] = $opacityValue; 387 } 388 389 // Init parallax 390 $scope.find('.wdt-effect-scroll-wrapper').attr('data-parallax', JSON.stringify($options)); 391 392 }; 393 394 }; 395 396 $(window).on('elementor/frontend/init', function () { 397 elementorFrontend.hooks.addAction( 'frontend/element_ready/section', wdtSectionsOptionsHandler ); 398 }); 399 400})(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.