1let animObjects = []; 2let deScrollOptions = []; 3 4class DeScrollOption { 5 constructor(classes) { 6 var arr_classes = classes.split(' ') 7 8 this.active = false; 9 this.animation_preview = false; 10 this.editMode = false; 11 this.elementWatcher = null; 12 this.scrollTop = 0; 13 this.id = ''; 14 this.transform = 'translateX'; 15 this.distance = '50'; 16 this.duration = '1000', 17 this.direction = 'normal', 18 this.easing = 'linear', 19 this.start_animate = 0, 20 this.finish_animate = 0, 21 22 this.translateX = false, 23 this.translateX_distance = '', 24 25 this.translateY = false, 26 this.translateY_distance = '', 27 28 this.rotate = false, 29 this.rotate_distance = '', 30 31 this.scale = false, 32 this.scale_distance = '', 33 34 this.skew = false, 35 this.skew_distance = '', 36 37 this.run_on_desktop = false, 38 this.run_on_tablet = false, 39 this.run_on_mobile = false, 40 this.run_animation = true, 41 42 jQuery.each(arr_classes, (index, value) => { 43 if ( value.search('de_scroll_animation_yes') === 0 ) { 44 this.active = true; 45 } 46 47 if ( value.search('de_scroll_animation_preview_yes') === 0 ) { 48 this.animation_preview = true; 49 } 50 51 if ( value.search('elementor-element-edit-mode') === 0 ) { 52 this.editMode = true; 53 } 54 55 if ( value.length === 25 && value.search('elementor-element-') === 0 ) { 56 this.id = value.replace('elementor-element-','') 57 } 58 59 if ( value.search('de_scroll_transform_') === 0 ) { 60 this.transform = value.replace('de_scroll_transform_','') 61 } 62 63 if ( value.search('de_scroll_distance_') === 0 ) { 64 this.distance = value.replace('de_scroll_distance_','') 65 } 66 67 if ( value.search('de_scroll_start_animate_') === 0 ) { 68 this.start_animate = parseInt(value.replace('de_scroll_start_animate_','')) 69 } 70 71 if ( value.search('de_scroll_finish_animate_') === 0 ) { 72 this.finish_animate = parseInt(value.replace('de_scroll_finish_animate_','')) 73 } 74 75 if (this.finish_animate < this.start_animate) { 76 this.finish_animate = parseInt(this.start_animate) + 100 77 } 78 79 if ( 'de_scroll_translateX_popover_checked' === value ) { this.translateX = true } 80 if ( 'de_scroll_translateY_popover_checked' === value ) { this.translateY = true } 81 if ( 'de_scroll_rotate_popover_checked' === value ) { this.rotate = true } 82 if ( 'de_scroll_scale_popover_checked' === value ) { this.scale = true } 83 if ( 'de_scroll_skew_popover_checked' === value ) { this.skew = true } 84 85 if ( value.search('de_scroll_translateX_distance_') === 0 ) { 86 this.translateX_distance = value.replace('de_scroll_translateX_distance_','') 87 } 88 if ( value.search('de_scroll_translateY_distance_') === 0 ) { 89 this.translateY_distance = value.replace('de_scroll_translateY_distance_','') 90 } 91 if ( value.search('de_scroll_rotate_distance_') === 0 ) { 92 this.rotate_distance = value.replace('de_scroll_rotate_distance_','') 93 } 94 if ( value.search('de_scroll_scale_distance_') === 0 ) { 95 this.scale_distance = value.replace('de_scroll_scale_distance_','') 96 } 97 if ( value.search('de_scroll_skew_distance_') === 0 ) { 98 this.skew_distance = value.replace('de_scroll_skew_distance_','') 99 } 100 if ( value.search('de_scroll_animation_on_desktop_yes') === 0 ) { 101 this.run_on_desktop = true; 102 } 103 if ( value.search('de_scroll_animation_on_tablet_yes') === 0 ) { 104 this.run_on_tablet = true; 105 } 106 if ( value.search('de_scroll_animation_on_mobile_yes') === 0 ) { 107 this.run_on_mobile = true; 108 } 109 }) 110 111 } 112} 113 114class DeScrollAnimationHandlerClass extends elementorModules.frontend.handlers.Base { 115 getDefaultSettings() { 116 return { 117 selectors: { 118 wrapper: '.de_scroll_animation_yes', 119 widget_container: '.elementor-widget-container', 120 }, 121 last_known_scroll_position: this.last_known_scroll_position, 122 }; 123 } 124 125 getDefaultElements() {
126 const selectors = this.getSettings( 'selectors' ); 127 return { 128 $wrapper: this.$element.find( selectors.wrapper ), 129 $widget_container: this.$element.find( selectors.widget_container ), 130 $body: this.$element.find( 'body' ), 131 $document: this.$element.find( 'document' ), 132 }; 133 } 134 135 onInit() { 136 // console.log(elementorFrontend.config.responsive.breakpoints) 137 // console.log(elementorFrontend.config.responsive.activeBreakpoints) 138 // console.log(elementorFrontend.config.responsive.breakpoints.mobile.value) 139 // console.log('scrollWidth : ' + document.scrollingElement.scrollWidth) 140 141 var observer = new MutationObserver(function(mutations) { 142 mutations.forEach(function(mutation) { 143 if (mutation.attributeName === "class") { 144 var attributeValue = $(mutation.target).prop(mutation.attributeName); 145 146 var $arr_classes = attributeValue.split(' ') 147 148 var do_animation = false 149 var do_animation_preview = false 150 151 jQuery.each($arr_classes, (index, value) => { 152 if ( value.search('de_scroll_animation_yes') === 0 ) { 153 do_animation = true; 154 } 155 156 if ( value.search('de_scroll_animation_preview_yes') === 0 ) { 157 do_animation_preview = true; 158 } 159 }) 160 161 if (do_animation) { 162 let deScrollOption = new DeScrollOption(attributeValue); 163 let animindex = animObjects.length; 164 let i; 165 for (i = 0; i < deScrollOptions.length; i++) { 166 if ( deScrollOptions[i].id === deScrollOption.id ) { 167 animindex = i; 168 break; 169 } 170 } 171 172 let tZ_perspective = 0; 173 174 deScrollOptions[animindex] = new DeScrollOption(attributeValue); 175 176 // reset transform 177 var el = document.querySelector(".elementor-element-" + deScrollOption.id + ".de_scroll_animation_yes .elementor-widget-container") 178 179 if (el) { 180 el.setAttribute('style','') 181 // console.log(el) 182 } 183 184 // create anim 185 animObjects[animindex] = anime({ 186 targets: ".elementor-element-" + deScrollOption.id + ".de_scroll_animation_yes .elementor-widget-container", 187 perspective: [tZ_perspective, tZ_perspective], 188 scale: function() { 189 let result = 1; 190 if ( deScrollOption.scale ) { 191 result = deScrollOption.scale_distance; 192 } 193 return result; 194 }, 195 translateX: function() { 196 let result = 0; 197 if ( deScrollOption.translateX ) { 198 result = deScrollOption.translateX_distance; 199 } 200 return result; 201 }, 202 translateY: function() { 203 let result = 0; 204 if ( deScrollOption.translateY ) { 205 result = deScrollOption.translateY_distance; 206 } 207 return result; 208 }, 209 rotate: function() { 210 let result = 0; 211 if ( deScrollOption.rotate ) { 212 result = deScrollOption.rotate_distance; 213 } 214 return result; 215 }, 216 skew: function() { 217 let result = 0; 218 if ( deScrollOption.skew ) { 219 result = deScrollOption.skew_distance; 220 } 221 return result; 222 }, 223 // delay: function(el, i) { 224 // return i * 100; 225 // }, 226 // elasticity: 200, 227 easing: deScrollOption.easing,
228 direction: "normal", 229 autoplay: false, 230 duration: deScrollOption.duration 231 }); 232 } 233 } 234 }); 235 }); 236 237 if (this.$element) { 238 var elementId = this.$element.context.attributes['data-id'].nodeValue; 239 var elementSelector = document.querySelector("[data-id='" + elementId + "']"); 240 if (elementSelector) { 241 observer.observe(elementSelector, { 242 attributes: true 243 }); 244 245 if ( this.$element.context.classList.contains('de_scroll_animation_yes') ) { 246 let last_known_scroll_position = 0; 247 let ticking = false; 248 let animindex = animObjects.length; 249 let optionindex = deScrollOptions.length; 250 251 252 deScrollOptions[optionindex] = new DeScrollOption(this.$element.context.className); 253 254 let tZ_perspective = 0; 255 256 animObjects[animindex] = anime({ 257 targets: ".elementor-element-" + deScrollOptions[optionindex].id + ".de_scroll_animation_yes .elementor-widget-container", 258 perspective: [tZ_perspective, tZ_perspective], 259 scale: function() { 260 let result = 1; 261 if ( deScrollOptions[optionindex].scale ) { 262 result = deScrollOptions[optionindex].scale_distance; 263 } 264 return result; 265 }, 266 translateX: function() { 267 let result = 0; 268 if ( deScrollOptions[optionindex].translateX ) { 269 result = deScrollOptions[optionindex].translateX_distance; 270 } 271 return result; 272 }, 273 translateY: function() { 274 let result = 0; 275 if ( deScrollOptions[optionindex].translateY ) { 276 result = deScrollOptions[optionindex].translateY_distance; 277 } 278 return result; 279 }, 280 rotate: function() { 281 let result = 0; 282 if ( deScrollOptions[optionindex].rotate ) { 283 result = deScrollOptions[optionindex].rotate_distance; 284 } 285 return result; 286 }, 287 skew: function() { 288 let result = 0; 289 if ( deScrollOptions[optionindex].skew ) { 290 result = deScrollOptions[optionindex].skew_distance; 291 } 292 return result; 293 }, 294 // delay: function(el, i) { 295 // return i * 100; 296 // }, 297 // elasticity: 200, 298 easing: deScrollOptions[optionindex].easing, 299 autoplay: false, 300 duration: deScrollOptions[optionindex].duration 301 }); 302 303 var elRect = elementSelector.getBoundingClientRect() 304 deScrollOptions[optionindex].scrollTop = elRect.y 305 306 document.onscroll = () => { 307 if (!ticking) { 308 window.requestAnimationFrame(function() { 309 var i; 310 for (i = 0; i < animObjects.length; i++) { 311 // last_known_scroll_position = ( document.scrollingElement.scrollTop - deScrollOptions[i].scrollTop ) / window.innerHeight 312 313 last_known_scroll_position = 0 314 315 // console.log(document.querySelector(animObjects[i].targets)) 316 var scrolledEl = document.querySelector(".elementor-element-" + deScrollOptions[i].id + ".de_scroll_animation_yes .elementor-widget-container") 317 var sTop = 0 318 if (scrolledEl) { 319 var scrollbarHeight = document.scrollingElement.scrollHeight 320 var scrollbarTop = document.scrollingElement.scrollTop 321 322 var rect = scrolledEl.getBoundingClientRect() 323 sTop = rect.y 324 var sHeight = rect.height 325 // var wHeight = window.innerHeight - sHeight - 50 326 var wHeight = window.innerHeight 327 328 // console.log('document.body.clientHeight : ' + document.body.clientHeight) 329 // console.log('window.clientHeight : ' + window.clientHeight) 330 // console.log('window.innerHeight :' + window.innerHeight) 331 // console.log(document.documentElement.offsetHeight) 332 333 // if ( scrollbarTop === 0 ) { 334 // last_known_scroll_position = 0 335 // } else if ( sTop <= 50 ) { 336 // last_known_scroll_position = 100 337 // } else if ( sTop <= wHeight ) { 338 // if ( sHeight > (.5 * wHeight) ) { 339 // last_known_scroll_position = ( wHeight - sTop) / sHeight * 100 340 // } else { 341 // last_known_scroll_position = ( wHeight - sTop) / wHeight * 100 342 // } 343 // } 344 345 346 347 if ( scrollbarTop === 0 ) { 348 last_known_scroll_position = 0 349 } else if ( sTop <= wHeight ) { 350 var animHeight = (deScrollOptions[i].finish_animate - deScrollOptions[i].start_animate) * sHeight / 100 351 var animTop = sTop + deScrollOptions[i].start_animate * sHeight / 100 352 last_known_scroll_position = ( wHeight - animTop) / animHeight * 100 353 // if (deScrollOptions[i].id === 'cd08401') { 354 // console.log('last_known_scroll_position : ' + last_known_scroll_position) 355 // console.log('wHeight : ' + wHeight) 356 // console.log('animTop : ' + animTop) 357 // console.log('start_animate : ' + deScrollOptions[i].start_animate) 358 // console.log('finish_animate : ' + deScrollOptions[i].finish_animate) 359 // console.log('sHeight : ' + sHeight) 360 // } 361 } 362 363 } 364 365 if (!deScrollOptions[i].run_animation) { 366 last_known_scroll_position = 0 367 } 368 369 if ( deScrollOptions[i].editMode ) { 370 if ( deScrollOptions[i].animation_preview ) { 371 animObjects[i].seek((last_known_scroll_position / 100) * animObjects[i].duration); 372 } 373 } else { 374 // if ( deScrollOptions[i].id === 'a2d5ac4' ) { 375 // console.log(sHeight) 376 // console.log('calc : ' + (last_known_scroll_position / 100) * animObjects[i].duration ) 377 // } 378 animObjects[i].seek((last_known_scroll_position / 100) * animObjects[i].duration); 379 } 380 381 382 383 } 384 ticking = false;
385 }); 386 387 ticking = true; 388 } 389 390 } 391 } //if (this.$element.context.classList.contains('de_scroll_animation_yes')) 392 393 } 394 } 395 } 396 397 bindEvents() { 398 } 399} //class DeScrollAnimationHandlerClass 400 401jQuery( window ).on( 'elementor/frontend/init', () => { 402 const addHandler = ( $element ) => { 403 elementorFrontend.elementsHandler.addHandler( DeScrollAnimationHandlerClass, { 404 $element, 405 } ); 406 }; 407 408 elementorFrontend.hooks.addAction( 'frontend/element_ready/global', addHandler ); 409} ); 410 411jQuery( document ).ready( () => { 412 de_scroll_init_responsive() 413}) 414 415jQuery( window ).on( 'resize', () => { 416 de_scroll_init_responsive() 417}) 418 419function de_scroll_init_responsive() { 420 var onDesktop = false 421 var onTablet = false 422 var onMobile = false 423 var docWidth = document.scrollingElement.scrollWidth 424 var tabletBreakpoint = elementorFrontend.config.responsive.breakpoints.tablet.value 425 var mobileBreakpoint = elementorFrontend.config.responsive.breakpoints.mobile.value 426 427 if ( docWidth > tabletBreakpoint ) { 428 onDesktop = true 429 } else if ( docWidth <= mobileBreakpoint ) { 430 onMobile = true 431 } else { 432 onTablet = true 433 } 434 435 for (i = 0; i < deScrollOptions.length; i++) { 436 deScrollOptions[i].run_animation = false 437 438 if ( onDesktop && deScrollOptions[i].run_on_desktop ) { 439 deScrollOptions[i].run_animation = true 440 } 441 442 if ( onTablet && deScrollOptions[i].run_on_tablet ) { 443 deScrollOptions[i].run_animation = true 444 } 445 446 if ( onMobile && deScrollOptions[i].run_on_mobile ) { 447 deScrollOptions[i].run_animation = true 448 } 449 } 450}
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.