1class DeStaggeringHandlerClass extends elementorModules.frontend.handlers.Base { 2 getDefaultSettings() { 3 return { 4 selectors: { 5 wrapper: '.de_staggering_hover_yes', 6 widget_container: '.de_staggering_animation_yes', 7 }, 8 }; 9 } 10 11 getDefaultElements() { 12 const selectors = this.getSettings( 'selectors' ); 13 return { 14 $wrapper: this.$element.find( selectors.wrapper ), 15 $widget_container: this.$element.find( selectors.widget_container ), 16 }; 17 } 18 19 do_frontend_animation() { 20 if (!this.$element.hasClass('de_staggering_hover_yes')) { 21 return 22 } 23 24 var ele = this.$element.get() 25 26 var element = ele[0] 27 var column_classes = element.classList 28 29 var delay_increment = 500, parent_animation_mousehover = 'fadeIn', parent_animation_mouseout = 'fadeOut', run_animation = false 30 jQuery.each(column_classes, (index, value) => { 31 if ( value.search('de_staggering_parent_animation_mousehover_') === 0 ) { 32 parent_animation_mousehover = value.replace('de_staggering_parent_animation_mousehover_','') 33 } 34 35 if ( value.search('de_staggering_parent_animation_mouseout_') === 0 ) { 36 parent_animation_mouseout = value.replace('de_staggering_parent_animation_mouseout_','') 37 } 38 39 if ( value.search('de_staggering_child_delay_') === 0 ) { 40 delay_increment = parseInt(value.replace('de_staggering_child_delay_','')) 41 } 42 43 if ( value.search('de_staggering_run_animation') === 0 ) { 44 run_animation = true 45 } 46 }) 47 48 // On Mouse Hover on Column 49 element.addEventListener("mouseenter", function(e) { 50 e.preventDefault; 51 52 var run_animation = element.classList.contains('de_staggering_run_animation') 53 54 55 // find all animated element wrappers with data-anim attribute 56 var childs = element.querySelectorAll(".de_staggering_animation_yes") 57 var delay = 0 58 59 Array.prototype.forEach.call(childs, function (el, index) { 60 61 delay = delay + delay_increment 62 63 var arr_classes = el.classList 64 65 var animation_mousehover = 'inherited' 66 var animation_mouseout = 'inherited' 67 68 jQuery.each(arr_classes, (index, value) => { 69 if ( value.search('de_staggering_animation_mousehover_') === 0 ) { 70 animation_mousehover = value.replace('de_staggering_animation_mousehover_','') 71 } 72 73 if ( value.search('de_staggering_animation_mouseout_') === 0 ) { 74 animation_mouseout = value.replace('de_staggering_animation_mouseout_','') 75 } 76 77 }) 78 79 if ( animation_mousehover === 'inherited' ) { 80 animation_mousehover = parent_animation_mousehover 81 } 82 83 if ( animation_mouseout === 'inherited' ) { 84 animation_mouseout = parent_animation_mouseout 85 } 86 87 if (run_animation) { 88 var animation_delay = 'animation-delay:' + delay + 'ms' 89 el.setAttribute('style',animation_delay) 90 91 // -> removing the class 92 el.classList.remove("animate__animated"); 93 el.classList.remove("animate__" + animation_mousehover); 94 el.classList.remove("animate__" + animation_mouseout); 95 96 // -> triggering reflow /* The actual magic */ 97 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 98 // Oops! This won't work in strict mode. Thanks Felis Phasma! 99 // element.offsetWidth = element.offsetWidth; 100 // Do this instead: 101 void el.offsetWidth; 102 103 // -> and re-adding the class 104 el.classList.add("animate__animated"); 105 el.classList.add("animate__" + animation_mousehover); 106 } else { //if (run_animation) 107 // -> removing the class 108 el.classList.remove("animate__animated"); 109 el.classList.remove("animate__" + animation_mousehover); 110 el.classList.remove("animate__" + animation_mouseout); 111 112 // -> triggering reflow /* The actual magic */ 113 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 114 // Oops! This won't work in strict mode. Thanks Felis Phasma! 115 // element.offsetWidth = element.offsetWidth; 116 // Do this instead: 117 void el.offsetWidth; 118 } //if (run_animation) 119 120 }) 121 122 }, false); 123 124 // On Mouse Leave from Column 125 element.addEventListener("mouseleave", function(e) { 126 e.preventDefault; 127 128 var run_animation = element.classList.contains('de_staggering_run_animation') 129 130 // find all animated element wrappers with data-anim attribute 131 var childs = element.querySelectorAll(".de_staggering_animation_yes");
132 var delay = 0 133 134 Array.prototype.forEach.call(childs, function (el, index) { 135 136 delay = delay + delay_increment 137 138 var arr_classes = el.classList 139 140 var animation_mousehover = 'inherited' 141 var animation_mouseout = 'inherited' 142 143 jQuery.each(arr_classes, (index, value) => { 144 if ( value.search('de_staggering_animation_mousehover_') === 0 ) { 145 animation_mousehover = value.replace('de_staggering_animation_mousehover_','') 146 } 147 148 if ( value.search('de_staggering_animation_mouseout_') === 0 ) { 149 animation_mouseout = value.replace('de_staggering_animation_mouseout_','') 150 } 151 }) 152 153 if ( animation_mousehover === 'inherited' ) { 154 animation_mousehover = parent_animation_mousehover 155 } 156 157 if ( animation_mouseout === 'inherited' ) { 158 animation_mouseout = parent_animation_mouseout 159 } 160 161 if (run_animation) { 162 var animation_delay = 'animation-delay:' + delay + 'ms' 163 el.setAttribute('style',animation_delay) 164 165 // -> removing the class 166 el.classList.remove("animate__animated"); 167 el.classList.remove("animate__" + animation_mousehover); 168 el.classList.remove("animate__" + animation_mouseout); 169 170 // -> triggering reflow /* The actual magic */ 171 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 172 // Oops! This won't work in strict mode. Thanks Felis Phasma! 173 // element.offsetWidth = element.offsetWidth; 174 // Do this instead: 175 void el.offsetWidth; 176 177 // -> and re-adding the class 178 el.classList.add("animate__animated"); 179 el.classList.add("animate__" + animation_mouseout); 180 } else { 181 // -> removing the class 182 el.classList.remove("animate__animated"); 183 el.classList.remove("animate__" + animation_mousehover); 184 el.classList.remove("animate__" + animation_mouseout); 185 186 // -> triggering reflow /* The actual magic */ 187 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 188 // Oops! This won't work in strict mode. Thanks Felis Phasma! 189 // element.offsetWidth = element.offsetWidth; 190 // Do this instead: 191 void el.offsetWidth; 192 } 193 194 }) 195 196 197 }, false); 198 } 199 200 onInit() { 201 // var editMode = document.querySelector('.elementor-editor-active') 202 203 // Is in elementor editor 204 // if (editMode) { 205 var observer = new MutationObserver(function(mutations) { 206 mutations.forEach(function(mutation) { 207 if (mutation.attributeName === "class") { 208 209 var classes = $(mutation.target).prop(mutation.attributeName); 210 var arr_classes = classes.split(' ') 211 var do_animation = false, delay_increment = 500, parent_animation_mousehover = 'fadeIn', parent_animation_mouseout = 'fadeOut' 212 var de_staggering_hover_yes = false, de_staggering_preview_on_hover_yes = false, run_animation = false 213 214 jQuery.each(arr_classes, (index, value) => { 215 if ( value.search('de_staggering_hover_yes') === 0 ) { 216 de_staggering_hover_yes = true 217 } 218 219 if ( value.search('de_staggering_preview_on_hover_yes') === 0 ) { 220 de_staggering_preview_on_hover_yes = true; 221 } 222 223 if ( value.search('de_staggering_parent_animation_mousehover_') === 0 ) { 224 parent_animation_mousehover = value.replace('de_staggering_parent_animation_mousehover_','') 225 } 226 227 if ( value.search('de_staggering_parent_animation_mouseout_') === 0 ) { 228 parent_animation_mouseout = value.replace('de_staggering_parent_animation_mouseout_','') 229 } 230 231 if ( value.search('de_staggering_child_delay_') === 0 ) { 232 delay_increment = parseInt(value.replace('de_staggering_child_delay_','')) 233 } 234 235 if ( value.search('de_staggering_run_animation') === 0 ) { 236 run_animation = true 237 } 238 }) 239 240 if ( de_staggering_hover_yes && de_staggering_preview_on_hover_yes && run_animation ) { 241 do_animation = true 242 } 243 244 var elementId = mutation.target.attributes['data-id'].nodeValue; 245 var elementSelector = document.querySelector("[data-id='" + elementId + "']"); 246 247 if ( do_animation ) { 248 249 mutation.target.onmouseenter = function(e) { 250 // find all animated element wrappers with data-anim attribute 251 var childs = elementSelector.querySelectorAll(".de_staggering_animation_yes");
252 var delay = 0 253 254 Array.prototype.forEach.call(childs, function (el, index) { 255 256 delay = delay + delay_increment 257 258 var arr_classes = el.classList 259 var remove_classes = [] 260 261 var animation_mousehover = 'inherited' 262 var animation_mouseout = 'inherited' 263 264 jQuery.each(arr_classes, (index, value) => { 265 if ( value.search('de_staggering_animation_mousehover_') === 0 ) { 266 animation_mousehover = value.replace('de_staggering_animation_mousehover_','') 267 // remove_classes.push(value) 268 } 269 270 if ( value.search('de_staggering_animation_mouseout_') === 0 ) { 271 animation_mouseout = value.replace('de_staggering_animation_mouseout_','') 272 // remove_classes.push(value) 273 } 274 275 if ( value.search('animate__') === 0 ) { 276 // -> removing the class 277 remove_classes.push(value) 278 } 279 }) 280 281 jQuery.each(remove_classes, (index, value) => { 282 el.classList.remove(value) 283 }) 284 285 var animation_delay = 'animation-delay:' + delay + 'ms' 286 el.setAttribute('style',animation_delay) 287 288 // -> removing the class 289 // el.classList.remove("animate__animated"); 290 // el.classList.remove("animate__" + animation_type); 291 292 // -> triggering reflow /* The actual magic */ 293 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 294 // Oops! This won't work in strict mode. Thanks Felis Phasma! 295 // element.offsetWidth = element.offsetWidth; 296 // Do this instead: 297 void el.offsetWidth; 298 299 // -> and re-adding the class 300 301 // el.classList.add("de_staggering_animation_type_" + animation_mousehover); 302 el.classList.add("animate__animated"); 303 if ( animation_mousehover === 'inherited' ) { 304 el.classList.add("animate__" + parent_animation_mousehover); 305 } else { 306 el.classList.add("animate__" + animation_mousehover); 307 } 308 309 }) 310 } 311 312 mutation.target.onmouseleave = function(e) { 313 // find all animated element wrappers with data-anim attribute 314 var childs = elementSelector.querySelectorAll(".de_staggering_animation_yes"); 315 var delay = 0 316 317 Array.prototype.forEach.call(childs, function (el, index) { 318 319 delay = delay + delay_increment 320 321 var arr_classes = el.classList 322 var remove_classes = [] 323 324 var animation_mousehover = 'inherited' 325 var animation_mouseout = 'inherited' 326 327 jQuery.each(arr_classes, (index, value) => { 328 if ( value.search('de_staggering_animation_mousehover_') === 0 ) { 329 animation_mousehover = value.replace('de_staggering_animation_mousehover_','') 330 // remove_classes.push(value) 331 } 332 333 if ( value.search('de_staggering_animation_mouseout_') === 0 ) { 334 animation_mouseout = value.replace('de_staggering_animation_mouseout_','') 335 // remove_classes.push(value) 336 } 337 338 if ( value.search('animate__') === 0 ) { 339 // -> removing the class 340 remove_classes.push(value) 341 } 342 }) 343 344 jQuery.each(remove_classes, (index, value) => { 345 el.classList.remove(value) 346 }) 347 348 var animation_delay = 'animation-delay:' + delay + 'ms' 349 el.setAttribute('style',animation_delay) 350 351 // -> removing the class 352 // el.classList.remove("animate__animated"); 353 // el.classList.remove("animate__" + animation_type); 354 355 // -> triggering reflow /* The actual magic */ 356 // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 357 // Oops! This won't work in strict mode. Thanks Felis Phasma! 358 // element.offsetWidth = element.offsetWidth; 359 // Do this instead: 360 void el.offsetWidth; 361 362 // -> and re-adding the class 363 364 // el.classList.add("de_staggering_animation_type_" + animation_mouseout); 365 el.classList.add("animate__animated"); 366 if ( animation_mouseout === 'inherited' ) { 367 el.classList.add("animate__" + parent_animation_mouseout); 368 } else { 369 el.classList.add("animate__" + animation_mouseout); 370 } 371 372 }) 373 } 374 } else { 375 if ( elementSelector ) { 376 // find all animated element wrappers with data-anim attribute 377 var childs = elementSelector.querySelectorAll(".de_staggering_animation_yes"); 378 379 Array.prototype.forEach.call(childs, function (el, index) { 380 381 var arr_classes = el.classList 382 var remove_classes = [] 383 384 var animation_type = 'inherited' 385 jQuery.each(arr_classes, (index, value) => { 386 if (value) { 387 if ( value.search('de_staggering_animation_mousehover_') === 0 ) { 388 animation_type = value.replace('de_staggering_animation_mousehover_','') 389 } 390 391 if ( value.search('animate__') === 0 ) { 392 // -> removing the class 393 remove_classes.push(value) 394 } 395 } 396 }) 397 398 jQuery.each(remove_classes, (index, value) => { 399 el.classList.remove(value) 400 }) 401 402 // if ( animation_type === 'inherited' ) { 403 // animation_type = parent_animation_type 404 // } 405 406 // -> removing the class 407 // el.classList.remove("animate__animated"); 408 // el.classList.remove("animate__" + animation_type); 409 }) 410 mutation.target.onmouseenter = null 411 mutation.target.onmouseleave = null 412 } 413 } 414 } 415 }); 416 }); 417 418 if (this.$element) { 419 var element_type = this.$element.context.attributes['data-element_type'].value; 420 421 if ( element_type === 'column' ) { 422 var elementId = this.$element.context.attributes['data-id'].nodeValue; 423 var elementSelector = document.querySelector("[data-id='" + elementId + "']"); 424 if (elementSelector) { 425 observer.observe(elementSelector, { 426 attributes: true 427 }); 428 } 429 } 430 } 431 432 433 // } else { //if (editMode) 434 // this.do_frontend_animation() 435 // } //if (editMode) 436 } //onInit() 437} 438 439jQuery( window ).on( 'elementor/frontend/init', () => { 440 const addHandler = ( $element ) => { 441 elementorFrontend.elementsHandler.addHandler( DeStaggeringHandlerClass, { 442 $element, 443 } ); 444 }; 445 446 elementorFrontend.hooks.addAction( 'frontend/element_ready/global', addHandler ); 447} ); 448 449jQuery( document ).ready( () => { 450 de_staggering_init_responsive() 451}) 452 453jQuery( window ).on( 'resize', () => { 454 de_staggering_init_responsive() 455}) 456 457function de_staggering_init_responsive() { 458 var onDesktop = false 459 var onTablet = false 460 var onMobile = false 461 var docWidth = document.body.clientWidth
462 var tabletBreakpoint = elementorFrontend.config.responsive.breakpoints.tablet.value 463 var mobileBreakpoint = elementorFrontend.config.responsive.breakpoints.mobile.value 464 465 if ( docWidth > tabletBreakpoint ) { 466 onDesktop = true 467 } else if ( docWidth <= mobileBreakpoint ) { 468 onMobile = true 469 } else { 470 onTablet = true 471 } 472 473 var columns = document.querySelectorAll(".de_staggering_hover_yes") 474 475 Array.prototype.forEach.call(columns, function (col, index) { 476 477 col.classList.remove('de_staggering_run_animation') 478 479 if ( onDesktop && col.classList.contains('de_staggering_on_desktop_yes') ) { 480 if (!col.classList.contains('de_staggering_run_animation')) { 481 col.classList.add('de_staggering_run_animation') 482 } 483 } 484 485 if ( onTablet && col.classList.contains('de_staggering_on_tablet_yes') ) { 486 if (!col.classList.contains('de_staggering_run_animation')) { 487 col.classList.add('de_staggering_run_animation') 488 } 489 } 490 491 if ( onMobile && col.classList.contains('de_staggering_on_mobile_yes') ) { 492 if (!col.classList.contains('de_staggering_run_animation')) { 493 col.classList.add('de_staggering_run_animation') 494 } 495 } 496 497 }) 498}
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.