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