1/* 2 * WP Custom Cursors | WordPress Cursor Plugin 3 * Author: Hamid Reza Sepehr 4 * 5 * "Open your hands if you want to be held." -Rumi 6 * 7 */ 8 9(function(){ 10 window.addEventListener('DOMContentLoaded', function(event) { 11 window.addEventListener('load', function(event) { 12 let stopFlag = false, el1VelocityXYFlag = false, el2VelocityXYFlag = false, el1VelocityResizeFlag = false, el2VelocityResizeFlag = false, hoverElementWidth = 0, hoverElementHeight = 0, elementTop = 0, elementLeft = 0, calcTop = 0, calcLeft = 0, paddingTop = 0, paddingLeft = 0, hx = 0, hy = 0; 13 14 let mouseData = { 15 x:0, 16 y:0, 17 hx:0, 18 hy:0, 19 prevX: 0, 20 prevY: 0, 21 prevTimeStamp: 0, 22 el1ScaleX: 1, 23 el1ScaleY: 1, 24 el2ScaleX: 1, 25 el2ScaleY: 1 26 }; 27 let distanceX, timeDiff, velX = 1, distanceY, velY = 1, el1VelX = 1, el1VelY = 1, el2VelX = 1, el2VelY = 1; 28 const getMousePosition = function(e) { 29 hx = e.clientX; 30 hy = e.clientY; 31 if (stopFlag) { 32 hx = elementLeft; 33 hy = elementTop; 34 } 35 if (el1VelocityXYFlag || el2VelocityXYFlag) { 36 distanceX = Math.sqrt( Math.pow( e.clientX - mouseData.prevX, 2 ) ); 37 timeDiff = e.timeStamp - mouseData.prevTimeStamp; 38 velX = distanceX / timeDiff; 39 velX = 1 / ( 1 + velX ); 40 41 distanceY = Math.sqrt( Math.pow( e.clientY - mouseData.prevY, 2 ) ); 42 velY = distanceY / timeDiff; 43 velY = 1 / ( 1 + velY ); 44 } 45 46 if (el1VelocityResizeFlag || el2VelocityResizeFlag) { 47 distanceX = Math.sqrt( Math.pow( e.clientX - mouseData.prevX, 2 ) + Math.pow( e.clientY - mouseData.prevY, 2 ) ); 48 timeDiff = e.timeStamp - mouseData.prevTimeStamp; 49 velX = distanceX / timeDiff; 50 velX = 1 / ( 1 + velX ); 51 } 52 53 if (el1VelocityXYFlag) { 54 el1VelX = velX; 55 el1VelY = velY; 56 } 57 58 if (el2VelocityXYFlag) { 59 el2VelX = velX; 60 el2VelY = velY; 61 } 62 63 if (el1VelocityResizeFlag) { 64 el1VelX = velX; 65 el1VelY = velX; 66 } 67 68 if (el2VelocityResizeFlag) { 69 el2VelX = velX; 70 el2VelY = velX; 71 } 72 73 return { 74 x : e.clientX, 75 y : e.clientY, 76 hx:hx, 77 hy:hy, 78 prevX: e.clientX, 79 prevY: e.clientY, 80 prevTimeStamp: e.timeStamp, 81 el1ScaleX: el1VelY, 82 el1ScaleY: el1VelX, 83 el2ScaleX: el2VelY, 84 el2ScaleY: el2VelX 85 } 86 } 87 88 89 90 91 let body = document.querySelector('body'), 92 frames = document.querySelectorAll('iframe'); 93 94 body.addEventListener('pointermove', function(ev) {mouseData = getMousePosition(ev)}); 95 96 // IFrame Stop Cursor 97 if (frames.length > 0) {
98 [...frames].forEach(function(frame){ 99 frame.addEventListener('mouseenter', function(){ 100 body.classList.add('iframe-hover'); 101 }); 102 frame.addEventListener('mouseleave', function(){ 103 body.classList.remove('iframe-hover'); 104 }); 105 }); 106 } 107 108 // For Each Cursor 109 [...added_cursors].forEach(function(cursor) { 110 let elements = null; 111 112 // Activate Cursor on Body 113 if (cursor.activate_on == 0) { 114 elements = document.querySelectorAll("body"); 115 } 116 117 // Activate Cursor on Elements 118 else { 119 switch (cursor.selector_type) { 120 case 'tag': 121 elements = document.querySelectorAll(cursor.selector_data); 122 break; 123 124 case 'class': 125 elements = document.querySelectorAll("." + cursor.selector_data); 126 break; 127 128 case 'id': 129 elements = document.querySelectorAll("#" + cursor.selector_data); 130 break; 131 132 case 'attribute': 133 elements = document.querySelectorAll("[" + cursor.selector_data + "]"); 134 break; 135 } 136 } 137 138 if (elements != null && elements.length > 0) {
139 [...elements].forEach(function(element){ 140 createCursor(element, cursor); 141 }); 142 } 143 144 }); 145 146 function createCursor(element, cursor) { 147 let cursorWrapper = document.createElement('div'), 148 cursorEl1 = document.createElement('div'), 149 cursorEl2 = document.createElement('div'), 150 mouseEntered = false; 151 152 cursorEl1.classList.add('cursor-el1'); 153 cursorEl2.classList.add('cursor-el2'); 154 155 if (cursor.cursor_type == 'shape') { 156 cursorWrapper.classList.add(`cursor-${cursor.cursor_shape}`); 157 } 158 159 // Mobile & Tablet Hide 160 if (cursor.hide_tablet == "on") { 161 cursorWrapper.classList.add('hide-tablet'); 162 } 163 164 if (cursor.hide_mobile == "on") { 165 cursorWrapper.classList.add('hide-mobile'); 166 } 167 168 cursorWrapper.classList.add('wpcc-cursor'); 169 cursorWrapper.classList.add('no-transition'); 170 171 cursorWrapper.appendChild(cursorEl1); 172 cursorWrapper.appendChild(cursorEl2); 173 174 body.appendChild(cursorWrapper); 175 176 let createdCursorId = cursor.cursor_shape.substring(8), predefinedCursor = true; 177 [...created_cursors].forEach(function(createdCursor){ 178 if (createdCursor.cursor_id == createdCursorId) { 179 180 predefinedCursor = false; 181 182 let className = createdCursor.cursor_type; 183 if (createdCursor.cursor_type == 'text') { 184 className = createdCursor.cursor_options.normal_text_type; 185 } 186 cursorWrapper.setAttribute('data-cursor-type', className); 187 188 switch(createdCursor.cursor_type){ 189 case 'shape': 190 cursorWrapper.style.setProperty('--fe-width', createdCursor.cursor_options.fe_width + "px"); 191 cursorWrapper.style.setProperty('--fe-height', createdCursor.cursor_options.fe_height + "px"); 192 cursorWrapper.style.setProperty('--fe-color', createdCursor.cursor_options.fe_color); 193 cursorWrapper.style.setProperty('--fe-border-width', createdCursor.cursor_options.fe_border_width + "px"); 194 cursorWrapper.style.setProperty('--fe-border-radius', createdCursor.cursor_options.fe_radius + "px"); 195 cursorWrapper.style.setProperty('--fe-border-color', createdCursor.cursor_options.fe_border_color); 196 cursorWrapper.style.setProperty('--fe-transition-duration', createdCursor.cursor_options.fe_duration + "ms"); 197 cursorWrapper.style.setProperty('--fe-transition-timing', createdCursor.cursor_options.fe_timing); 198 cursorWrapper.style.setProperty('--fe-blending-mode', createdCursor.cursor_options.fe_blending); 199 cursorWrapper.style.setProperty('--fe-zindex', createdCursor.cursor_options.fe_zindex); 200 cursorWrapper.style.setProperty('--fe-backdrop', `${createdCursor.cursor_options.fe_backdrop}(${createdCursor.cursor_options.fe_backdrop_value})`); 201 202 switch(createdCursor.cursor_options.fe_velocity) { 203 case 'xy': 204 el1VelocityXYFlag = true; 205 break; 206 case 'resize': 207 el1VelocityResizeFlag = true; 208 break; 209 } 210 211 cursorWrapper.style.setProperty('--se-width', createdCursor.cursor_options.se_width + "px"); 212 cursorWrapper.style.setProperty('--se-height', createdCursor.cursor_options.se_height + "px"); 213 cursorWrapper.style.setProperty('--se-color', createdCursor.cursor_options.se_color); 214 cursorWrapper.style.setProperty('--se-border-width', createdCursor.cursor_options.se_border_width + "px"); 215 cursorWrapper.style.setProperty('--se-border-radius', createdCursor.cursor_options.se_radius + "px"); 216 cursorWrapper.style.setProperty('--se-border-color', createdCursor.cursor_options.se_border_color); 217 cursorWrapper.style.setProperty('--se-transition-duration', createdCursor.cursor_options.se_duration + "ms"); 218 cursorWrapper.style.setProperty('--se-transition-timing', createdCursor.cursor_options.se_timing); 219 cursorWrapper.style.setProperty('--se-blending-mode', createdCursor.cursor_options.se_blending); 220 cursorWrapper.style.setProperty('--se-zindex', createdCursor.cursor_options.se_zindex); 221 cursorWrapper.style.setProperty('--se-backdrop', `${createdCursor.cursor_options.se_backdrop}(${createdCursor.cursor_options.se_backdrop_value})`); 222 223 switch(createdCursor.cursor_options.se_velocity) { 224 case 'xy': 225 el2VelocityXYFlag = true; 226 break; 227 case 'resize': 228 el2VelocityResizeFlag = true; 229 break; 230 } 231 break; 232 case 'image': 233 let imageCursor = document.createElement('img'); 234 imageCursor.setAttribute('src', createdCursor.cursor_options.image_url); 235 cursorEl1.appendChild(imageCursor); 236 cursorWrapper.classList.add('cursor-image'); 237
238 let clickPointOption = createdCursor.cursor_options.click_point.split(','), 239 clickPointX = ( Number(clickPointOption[0]) * Number(createdCursor.cursor_options.width) ) / 100, 240 clickPointY = ( Number(clickPointOption[1]) * Number(createdCursor.cursor_options.height) ) / 100; 241 242 cursorWrapper.style.setProperty('--width', createdCursor.cursor_options.width + "px"); 243 cursorWrapper.style.setProperty('--color', createdCursor.cursor_options.color); 244 cursorWrapper.style.setProperty('--radius', createdCursor.cursor_options.radius + "px"); 245 if (createdCursor.cursor_options.background != 'off') { 246 cursorWrapper.style.setProperty('--padding', createdCursor.cursor_options.padding + "px"); 247 paddingTop = createdCursor.cursor_options.padding; 248 paddingLeft = createdCursor.cursor_options.padding; 249 } 250 251 calcTop = ( Number(paddingTop) + clickPointY ) * -1; 252 calcLeft = ( Number(paddingLeft) + clickPointX ) * -1; 253 cursorWrapper.style.setProperty('--blending', createdCursor.cursor_options.blending); 254 break; 255 case 'text': 256 if (createdCursor.cursor_options.normal_text_type == 'horizontal') { 257 let hrDom = document.createElement('div'); 258 259 hrDom.innerHTML = createdCursor.cursor_options.hr_text; 260 cursorEl1.appendChild(hrDom); 261 cursorWrapper.classList.add('cursor-horizontal'); 262 cursorEl1.firstChild.style.setProperty('--hr-width', createdCursor.cursor_options.hr_width + "px"); 263 cursorEl1.firstChild.style.setProperty('--hr-transform', createdCursor.cursor_options.hr_transform); 264 cursorEl1.firstChild.style.setProperty('--hr-size', createdCursor.cursor_options.hr_size + "px"); 265 cursorEl1.firstChild.style.setProperty('--hr-weight', createdCursor.cursor_options.hr_weight); 266 cursorEl1.firstChild.style.setProperty('--bg-color', createdCursor.cursor_options.hr_bgcolor); 267 cursorEl1.firstChild.style.setProperty('--hr-size', createdCursor.cursor_options.hr_size + "px"); 268 cursorEl1.firstChild.style.setProperty('--hr-spacing', createdCursor.cursor_options.hr_spacing + "px"); 269 cursorEl1.firstChild.style.setProperty('--hr-radius', createdCursor.cursor_options.hr_radius + "px"); 270 cursorEl1.firstChild.style.setProperty('--hr-padding', createdCursor.cursor_options.hr_padding + "px"); 271 cursorEl1.firstChild.style.setProperty('--hr-backdrop', createdCursor.cursor_options.hr_backdrop + "(" + createdCursor.cursor_options.hr_backdrop_amount + ")"); 272 cursorEl1.firstChild.style.setProperty('--hr-color', createdCursor.cursor_options.hr_color); 273 cursorWrapper.style.setProperty('--duration', createdCursor.cursor_options.hr_duration + "ms"); 274 cursorWrapper.style.setProperty('--timing', createdCursor.cursor_options.hr_timing); 275 } 276 else { 277 let svgString = `<svg viewBox="0 0 500 500"><path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle" fill="none"></path><text dy="25"><textPath xlink:href="#textcircle">${createdCursor.cursor_options.text}</textPath></text><circle cx="250" cy="250" r="${createdCursor.cursor_options.dot_width}" id="svg_circle_node"/></svg>`; 278 279 cursorEl1.innerHTML = svgString; 280 cursorWrapper.classList.add('cursor-text'); 281 cursorEl1.firstChild.style.setProperty('--dot-fill', createdCursor.cursor_options.dot_color); 282 cursorEl1.firstChild.style.setProperty('--text-width', createdCursor.cursor_options.width + "px"); 283 cursorEl1.firstChild.style.setProperty('--text-transform', createdCursor.cursor_options.text_transform); 284 cursorEl1.firstChild.style.setProperty('--font-weight', createdCursor.cursor_options.font_weight); 285 cursorEl1.firstChild.style.setProperty('--text-color', createdCursor.cursor_options.text_color); 286 cursorEl1.firstChild.style.setProperty('--font-size', createdCursor.cursor_options.font_size + "px"); 287 cursorEl1.firstChild.style.setProperty('--word-spacing', createdCursor.cursor_options.word_spacing + "px"); 288 cursorEl1.firstChild.style.setProperty('--animation-name', createdCursor.cursor_options.animation); 289 cursorEl1.firstChild.style.setProperty('--animation-duration', createdCursor.cursor_options.animation_duration + "s"); 290 cursorEl1.firstChild.style.setProperty('--dot-width', createdCursor.cursor_options.dot_width + "px"); 291 } 292 break; 293 } 294 295 if (createdCursor.hover_cursors) {
296 createdCursor.hover_cursors.forEach(function(hoverCursor) { 297 switch (hoverCursor.hover_type) { 298 case 'default': 299 let defaultSelector = ['a', 'button']; 300 defaultSelector.forEach(function(hoverSelector){ 301 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`); 302 [...hoverElements].forEach(function(el){ 303 el.addEventListener('mouseenter', function(){ 304 cursorWrapper.classList.add('link-hover'); 305 }); 306 el.addEventListener('mouseleave', function(){ 307 cursorWrapper.classList.remove('link-hover'); 308 }); 309 }); 310 }); 311 break; 312 case 'snap': 313 let snapSelector = []; 314 if (hoverCursor.buttons == "on") {snapSelector.push('button')} 315 if (hoverCursor.images == "on") {snapSelector.push('img')} 316 if (hoverCursor.links == "on") {snapSelector.push('a')} 317 if (hoverCursor.custom == "on") {snapSelector.push(hoverCurs
317or.selector)} 318 319 snapSelector.forEach(function(hoverSelector){ 320 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft, currentEl1VelXYFlag, currentEl1VelResizeFlag, currentEl2VelXYFlag, currentEl2VelResizeFlag; 321 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`); 322 [...hoverElements].forEach(function(el){ 323 el.addEventListener('mouseenter', function(){ 324 325 currentEl1VelXYFlag = el1VelocityXYFlag; 326 currentEl1VelResizeFlag = el1VelocityResizeFlag; 327 currentEl2VelXYFlag = el2VelocityXYFlag; 328 currentEl2VelResizeFlag = el2VelocityResizeFlag; 329 330 el1VelocityXYFlag = false; 331 el1VelocityResizeFlag = false; 332 el2VelocityXYFlag = false; 333 el2VelocityResizeFlag = false; 334 el1VelX = 1; 335 el1VelY = 1; 336 el2VelX = 1; 337 el2VelY = 1; 338 339 stopFlag = true; 340 if (cursorWrapper.getAttribute('style')) { 341 currentStyles = cursorWrapper.getAttribute('style'); 342 cursorWrapper.removeAttribute('style'); 343 } 344 currentType = cursorWrapper.getAttribute('data-cursor-type'); 345 cursorWrapper.classList.remove(`cursor-${currentType}`); 346 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 347 348 currentCalcTop = calcTop; 349 currentCalcLeft = calcLeft; 350 calcTop = 0; 351 calcLeft = 0; 352 353 cursorWrapper.classList.add('cursor-snap'); 354 let elementPos = el.getBoundingClientRect(); 355 elementTop = elementPos.top - hoverCursor.padding; 356 elementLeft = elementPos.left - hoverCursor.padding; 357 hoverElementWidth = elementPos.width + (hoverCursor.padding * 2); 358 hoverElementHeight = elementPos.height + (hoverCursor.padding * 2); 359 cursorWrapper.style.setProperty('--width', hoverElementWidth + "px"); 360 cursorWrapper.style.setProperty('--height', hoverElementHeight + "px"); 361 362 cursorWrapper.style.setProperty('--blending', hoverCursor.blending); 363 cursorWrapper.style.setProperty('--bgcolor', hoverCursor.bgcolor); 364 cursorWrapper.style.setProperty('--border-color', hoverCursor.border_color); 365 cursorWrapper.style.setProperty('--border-width', hoverCursor.border_width + "px"); 366 cursorWrapper.style.setProperty('--radius', hoverCursor.radius + "px"); 367 368 cursorEl1.style.top = 0; 369 cursorEl1.style.left = 0; 370 }); 371 el.addEventListener('mouseleave', function(){ 372 373 el1VelocityXYFlag = currentEl1VelXYFlag; 374 el1VelocityResizeFlag = currentEl1VelResizeFlag; 375 el2VelocityXYFlag = currentEl2VelXYFlag; 376 el2VelocityResizeFlag = currentEl2VelResizeFlag; 377 378 stopFlag = false; 379 380 calcTop = currentCalcTop; 381 calcLeft = currentCalcLeft; 382 cursorWrapper.removeAttribute('style'); 383 if (currentStyles) { 384 cursorWrapper.setAttribute('style', currentStyles); 385 } 386 387 cursorWrapper.classList.remove('cursor-snap'); 388 cursorWrapper.classList.add(`cursor-${currentType}`); 389 cursorWrapper.setAttribute('data-cursor-type', currentType); 390 if (currentChild) {cursorEl1.appendChild(currentChild);} 391 cursorEl1.style.removeProperty('top'); 392 cursorEl1.style.removeProperty('left'); 393 }); 394 }); 395 }); 396 break; 397 case 'shape': 398 let selector = []; 399 if (hoverCursor.buttons == "on") {selector.push('button')} 400 if (hoverCursor.images == "on") {selector.push('img')} 401 if (hoverCursor.links == "on") {selector.push('a')} 402 if (hoverCursor.custom == "on") {selector.push(hoverCurs
402or.selector)} 403 404 selector.forEach(function(hoverSelector){ 405 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`); 406 [...hoverElements].forEach(function(el){ 407 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft, currentEl1VelXYFlag, currentEl1VelResizeFlag, currentEl2VelXYFlag, currentEl2VelResizeFlag; 408 el.addEventListener('mouseenter', function(){ 409 currentEl1VelXYFlag = el1VelocityXYFlag; 410 currentEl1VelResizeFlag = el1VelocityResizeFlag; 411 currentEl2VelXYFlag = el2VelocityXYFlag; 412 currentEl2VelResizeFlag = el2VelocityResizeFlag; 413 414 el1VelocityXYFlag = false; 415 el1VelocityResizeFlag = false; 416 el2VelocityXYFlag = false; 417 el2VelocityResizeFlag = false; 418 el1VelX = 1; 419 el1VelY = 1; 420 el2VelX = 1; 421 el2VelY = 1; 422 423 switch(hoverCursor.hover_fe_velocity) { 424 case 'xy': 425 el1VelocityXYFlag = true; 426 break; 427 case 'resize': 428 el1VelocityResizeFlag = true; 429 break; 430 } 431 432 switch(hoverCursor.hover_se_velocity) { 433 case 'xy': 434 el2VelocityXYFlag = true; 435 break; 436 case 'resize': 437 el2VelocityResizeFlag = true; 438 break; 439 } 440 441 if (cursorWrapper.getAttribute('style')) { 442 currentStyles = cursorWrapper.getAttribute('style'); 443 cursorWrapper.removeAttribute('style'); 444 } 445 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 446 currentType = cursorWrapper.getAttribute('data-cursor-type'); 447 448 cursorWrapper.classList.remove(`cursor-${currentType}`); 449 cursorWrapper.setAttribute('data-cursor-type', hoverCursor.hover_type); 450 currentCalcTop = calcTop; 451 currentCalcLeft = calcLeft; 452 calcTop = 0; 453 calcLeft = 0; 454 455 cursorWrapper.classList.add(`cursor-${cursor.cursor_shape}`); 456 457 cursorWrapper.style.setProperty('--fe-width', hoverCursor.hover_fe_width + "px"); 458 cursorWrapper.style.setProperty('--fe-height', hoverCursor.hover_fe_height + "px"); 459 cursorWrapper.style.setProperty('--fe-color', hoverCursor.hover_fe_color); 460 cursorWrapper.style.setProperty('--fe-border-width', hoverCursor.hover_fe_border_width + "px"); 461 cursorWrapper.style.setProperty('--fe-border-radius', hoverCursor.hover_fe_radius + "px"); 462 cursorWrapper.style.setProperty('--fe-border-color', hoverCursor.hover_fe_border_color); 463 cursorWrapper.style.setProperty('--fe-transition-duration', hoverCursor.hover_fe_duration + "ms"); 464 cursorWrapper.style.setProperty('--fe-transition-timing', hoverCursor.hover_fe_timing); 465 cursorWrapper.style.setProperty('--fe-blending-mode', hoverCursor.hover_fe_blending); 466 cursorWrapper.style.setProperty('--fe-zindex', hoverCursor.hover_fe_zindex); 467 cursorWrapper.style.setProperty('--fe-backdrop', `${hoverCursor.hover_fe_backdrop}(${hoverCursor.hover_fe_backdrop_value})`); 468 469 cursorWrapper.style.setProperty('--se-width', hoverCursor.hover_se_width + "px"); 470 cursorWrapper.style.setProperty('--se-height', hoverCursor.hover_se_height + "px"); 471 cursorWrapper.style.setProperty('--se-color', hoverCursor.hover_se_color); 472 cursorWrapper.style.setProperty('--se-border-width', hoverCursor.hover_se_border_width + "px"); 473 cursorWrapper.style.setProperty('--se-border-radius', hoverCursor.hover_se_radius + "px"); 474 cursorWrapper.style.setProperty('--se-border-color', hoverCursor.hover_se_border_color); 475 cursorWrapper.style.setProperty('--se-transition-duration', hoverCursor.hover_se_duration + "ms"); 476 cursorWrapper.style.setProperty('--se-transition-timing', hoverCurs
476or.hover_se_timing); 477 cursorWrapper.style.setProperty('--se-blending-mode', hoverCursor.hover_se_blending); 478 cursorWrapper.style.setProperty('--se-zindex', hoverCursor.hover_se_zindex); 479 cursorWrapper.style.setProperty('--se-backdrop', `${hoverCursor.hover_se_backdrop}(${createdCursor.cursor_options.se_backdrop_value})`); 480 }); 481 el.addEventListener('mouseleave', function(){ 482 el1VelocityXYFlag = currentEl1VelXYFlag; 483 el1VelocityResizeFlag = currentEl1VelResizeFlag; 484 el2VelocityXYFlag = currentEl2VelXYFlag; 485 el2VelocityResizeFlag = currentEl2VelResizeFlag; 486 cursorWrapper.removeAttribute('style'); 487 if (currentStyles) { 488 cursorWrapper.setAttribute('style', currentStyles); 489 } 490 cursorWrapper.classList.add(`cursor-${currentType}`); 491 cursorWrapper.setAttribute('data-cursor-type', currentType); 492 calcTop = currentCalcTop; 493 calcLeft = currentCalcLeft; 494 495 if (currentChild) {cursorEl1.appendChild(currentChild);} 496 }); 497 }); 498 }); 499 break; 500 case 'image': 501 let imageSelector = []; 502 if (hoverCursor.buttons == "on") {imageSelector.push('button')} 503 if (hoverCursor.images == "on") {imageSelector.push('img')} 504 if (hoverCursor.links == "on") {imageSelector.push('a')} 505 if (hoverCursor.custom == "on") {imageSelector.push(hoverCursor.selector)} 506 507 let imageCursor = document.createElement('img'); 508 imageCursor.setAttribute('src', hoverCursor.hover_image_url); 509 510 let clickPointOption = hoverCursor.hover_click_point.split(','), 511 clickPointX = ( Number(clickPointOption[0]) * Number(hoverCursor.width) ) / 100, 512 clickPointY = ( Number(clickPointOption[1]) * Number(hoverCursor.height) ) / 100; 513 514 imageSelector.forEach(function(hoverSelector){ 515 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`); 516 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft, currentEl1VelXYFlag, currentEl1VelResizeFlag, currentEl2VelXYFlag, currentEl2VelResizeFlag;
517 [...hoverElements].forEach(function(el){ 518 el.addEventListener('mouseenter', function(){ 519 currentEl1VelXYFlag = el1VelocityXYFlag; 520 currentEl1VelResizeFlag = el1VelocityResizeFlag; 521 currentEl2VelXYFlag = el2VelocityXYFlag; 522 currentEl2VelResizeFlag = el2VelocityResizeFlag; 523 524 el1VelocityXYFlag = false; 525 el1VelocityResizeFlag = false; 526 el2VelocityXYFlag = false; 527 el2VelocityResizeFlag = false; 528 el1VelX = 1; 529 el1VelY = 1; 530 el2VelX = 1; 531 el2VelY = 1; 532 if (cursorWrapper.getAttribute('style')) { 533 currentStyles = cursorWrapper.getAttribute('style'); 534 cursorWrapper.removeAttribute('style'); 535 } 536 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 537 cursorEl1.appendChild(imageCursor); 538 currentType = cursorWrapper.getAttribute('data-cursor-type'); 539 540 cursorWrapper.classList.remove(`cursor-${currentType}`); 541 cursorWrapper.classList.add('cursor-image'); 542 cursorWrapper.setAttribute('data-cursor-type', hoverCursor.hover_type); 543 currentCalcTop = calcTop; 544 currentCalcLeft = calcLeft; 545 546 cursorWrapper.style.setProperty('--width', hoverCursor.width + "px"); 547 cursorWrapper.style.setProperty('--color', hoverCursor.color); 548 cursorWrapper.style.setProperty('--radius', hoverCursor.radius + "px"); 549 if (hoverCursor.background != 'off') { 550 cursorWrapper.style.setProperty('--padding', hoverCursor.padding + "px"); 551 paddingTop = hoverCursor.padding; 552 paddingLeft = hoverCursor.padding; 553 } 554 555 calcTop = ( Number(paddingTop) + clickPointY ) * -1; 556 calcLeft = ( Number(paddingLeft) + clickPointX ) * -1; 557 cursorWrapper.style.setProperty('--blending', hoverCursor.blending); 558 }); 559 el.addEventListener('mouseleave', function(){ 560 el1VelocityXYFlag = currentEl1VelXYFlag; 561 el1VelocityResizeFlag = currentEl1VelResizeFlag; 562 el2VelocityXYFlag = currentEl2VelXYFlag; 563 el2VelocityResizeFlag = currentEl2VelResizeFlag; 564 cursorEl1.removeChild(imageCursor); 565 cursorWrapper.removeAttribute('style'); 566 if (currentStyles) { 567 cursorWrapper.setAttribute('style', currentStyles); 568 } 569 cursorWrapper.classList.remove('cursor-image'); 570 cursorWrapper.classList.add(`cursor-${currentType}`); 571 cursorWrapper.setAttribute('data-cursor-type', currentType); 572 calcTop = currentCalcTop; 573 calcLeft = currentCalcLeft; 574 575 if (currentChild) {cursorEl1.appendChild(currentChild);} 576 }); 577 }); 578 }); 579 break; 580 case 'text': 581 let textSelector = []; 582 if (hoverCursor.buttons == "on") {textSelector.push('button')} 583 if (hoverCursor.images == "on") {textSelector.push('img')} 584 if (hoverCursor.links == "on") {textSelector.push('a')} 585 if (hoverCursor.custom == "on") {textSelector.push(hoverCursor.selector)} 586 587 textSelector.forEach(function(hoverSelector){ 588 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft, currentEl1VelXYFlag, currentEl1VelResizeFlag, currentEl2VelXYFlag, currentEl2VelResizeFlag; 589 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`);
590 [...hoverElements].forEach(function(el){ 591 el.addEventListener('mouseenter', function(){ 592 currentEl1VelXYFlag = el1VelocityXYFlag; 593 currentEl1VelResizeFlag = el1VelocityResizeFlag; 594 currentEl2VelXYFlag = el2VelocityXYFlag; 595 currentEl2VelResizeFlag = el2VelocityResizeFlag; 596 597 el1VelocityXYFlag = false; 598 el1VelocityResizeFlag = false; 599 el2VelocityXYFlag = false; 600 el2VelocityResizeFlag = false; 601 el1VelX = 1; 602 el1VelY = 1; 603 el2VelX = 1; 604 el2VelY = 1; 605 if (cursorWrapper.getAttribute('style')) { 606 currentStyles = cursorWrapper.getAttribute('style'); 607 cursorWrapper.removeAttribute('style'); 608 } 609 610 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 611 currentType = cursorWrapper.getAttribute('data-cursor-type'); 612 cursorWrapper.classList.remove(`cursor-${currentType}`); 613 cursorWrapper.classList.add('cursor-text'); 614 cursorWrapper.setAttribute('data-cursor-type', hoverCursor.hover_type); 615 616 currentCalcTop = calcTop; 617 currentCalcLeft = calcLeft; 618 calcTop = 0; 619 calcLeft = 0; 620 621 let svgString = `<svg viewBox="0 0 500 500"><path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle" fill="none"></path><text dy="25"><textPath xlink:href="#textcircle">${hoverCursor.hover_text}</textPath></text><circle cx="250" cy="250" r="${hoverCursor.hover_dot_width}" id="svg_circle_node"/></svg>`; 622 cursorEl1.innerHTML = svgString; 623 cursorWrapper.style.setProperty('--dot-fill', hoverCursor.dot_color); 624 cursorWrapper.style.setProperty('--text-width', hoverCursor.width + "px"); 625 cursorWrapper.style.setProperty('--text-transform', hoverCursor.hover_text_transform); 626 cursorWrapper.style.setProperty('--font-weight', hoverCursor.hover_font_weight); 627 cursorWrapper.style.setProperty('--text-color', hoverCursor.hover_text_color); 628 cursorWrapper.style.setProperty('--font-size', hoverCursor.font_size + "px"); 629 cursorWrapper.style.setProperty('--word-spacing', hoverCursor.hover_word_spacing + "px"); 630 cursorWrapper.style.setProperty('--animation-name', hoverCursor.hover_animation); 631 cursorWrapper.style.setProperty('--animation-duration', hoverCursor.hover_animation_duration + "s"); 632 cursorWrapper.style.setProperty('--dot-width', hoverCursor.hover_dot_width + "px"); 633 634 }); 635 el.addEventListener('mouseleave', function(){ 636 el1VelocityXYFlag = currentEl1VelXYFlag; 637 el1VelocityResizeFlag = currentEl1VelResizeFlag; 638 el2VelocityXYFlag = currentEl2VelXYFlag; 639 el2VelocityResizeFlag = currentEl2VelResizeFlag; 640 cursorWrapper.removeAttribute('style'); 641 if (currentStyles) { 642 cursorWrapper.setAttribute('style', currentStyles); 643 } 644 cursorEl1.innerHTML = ""; 645 cursorWrapper.classList.remove('cursor-text'); 646 647 cursorWrapper.classList.add(`cursor-${currentType}`); 648 cursorWrapper.setAttribute('data-cursor-type', currentType); 649 650 if (currentChild) {cursorEl1.appendChild(currentChild);} 651 652 calcTop = currentCalcTop; 653 calcLeft = currentCalcLeft; 654 }); 655 }); 656 }); 657 break; 658 case 'horizontal': 659 660 let hrSelector = []; 661 if (hoverCursor.buttons == "on") {hrSelector.push('button')} 662 if (hoverCursor.images == "on") {hrSelector.push('img')} 663 if (hoverCursor.links == "on") {hrSelector.push('a')} 664 if (hoverCursor.custom == "on") {hrSelector.push(hoverCursor.selector)} 665 666 let hrContainer = document.createElement('div'); 667 668 hrSelector.forEach(function(hoverSelector){
669 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft; 670 let hoverElements = document.querySelectorAll(`${hoverSelector}:not(.wpcc-cursor *)`); 671 [...hoverElements].forEach(function(el){ 672 el.addEventListener('mouseenter', function(){ 673 if (cursorWrapper.getAttribute('style')) { 674 currentStyles = cursorWrapper.getAttribute('style'); 675 cursorWrapper.removeAttribute('style'); 676 } 677 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 678 currentType = cursorWrapper.getAttribute('data-cursor-type'); 679 currentCalcTop = calcTop; 680 currentCalcLeft = calcLeft; 681 calcTop = 0; 682 calcLeft = 0; 683 684 cursorWrapper.classList.add('cursor-horizontal'); 685 hrContainer.innerHTML = hoverCursor.hover_hr_text; 686 cursorEl1.appendChild(hrContainer); 687 688 cursorWrapper.style.setProperty('--hr-width', hoverCursor.hover_hr_width + "px"); 689 cursorWrapper.style.setProperty('--hr-transform', hoverCursor.hover_hr_transform); 690 cursorWrapper.style.setProperty('--hr-size', hoverCursor.hover_hr_size + "px"); 691 cursorWrapper.style.setProperty('--hr-weight', hoverCursor.hover_hr_weight); 692 cursorWrapper.style.setProperty('--bg-color', hoverCursor.hover_hr_bgcolor); 693 cursorWrapper.style.setProperty('--hr-spacing', hoverCursor.hover_hr_spacing + "px"); 694 cursorWrapper.style.setProperty('--hr-radius', hoverCursor.hover_hr_radius + "px"); 695 cursorWrapper.style.setProperty('--hr-padding', hoverCursor.hover_hr_padding + "px"); 696 cursorWrapper.style.setProperty('--hr-backdrop', hoverCursor.hover_hr_backdrop + "(" + hoverCursor.hover_hr_backdrop_amount + ")"); 697 cursorWrapper.style.setProperty('--hr-color', hoverCursor.hover_hr_color); 698 cursorWrapper.style.setProperty('--duration', hoverCursor.hover_hr_duration + "ms"); 699 cursorWrapper.style.setProperty('--timing', hoverCursor.hover_hr_timing); 700 701 }); 702 el.addEventListener('mouseleave', function(){ 703 cursorWrapper.removeAttribute('style'); 704 if (currentStyles) { 705 cursorWrapper.setAttribute('style', currentStyles); 706 } 707 cursorEl1.removeChild(hrContainer); 708 cursorWrapper.classList.remove('cursor-horizontal'); 709 710 cursorWrapper.classList.add(`cursor-${currentType}`); 711 cursorWrapper.setAttribute('data-cursor-type', currentType); 712 713 calcTop = currentCalcTop; 714 calcLeft = currentCalcLeft; 715 716 if (currentChild) {cursorEl1.appendChild(currentChild);} 717 }); 718 }); 719 }); 720 break; 721 } 722 }); 723 } 724 // If no hover cursor is added 725 else { 726 let innerLinks = element.querySelectorAll('a'); 727 [...innerLinks].forEach(function(link) { 728 link.addEventListener('mouseenter', function() { 729 cursorWrapper.classList.add('link-hover'); 730 } ); 731 link.addEventListener('mouseleave', function() { 732 cursorWrapper.classList.remove('link-hover'); 733 } ); 734 }); 735 } 736 } 737 }); 738 739 if (predefinedCursor) { 740 cursorWrapper.style.setProperty('--fe-width', cursor.width + "px"); 741 cursorWrapper.style.setProperty('--fe-height', cursor.width + "px"); 742 cursorWrapper.style.setProperty('--se-width', cursor.width + "px"); 743 cursorWrapper.style.setProperty('--se-height', cursor.width + "px"); 744 cursorWrapper.style.setProperty('--fe-color', cursor.color); 745 cursorWrapper.style.setProperty('--se-color', cursor.color); 746 cursorWrapper.style.setProperty('--fe-blending', cursor.blending_mode); 747 cursorWrapper.style.setProperty('--se-blending', cursor.blending_mode); 748 749 let innerLinks = element.querySelectorAll('a');
750 [...innerLinks].forEach(function(link) { 751 link.addEventListener('mouseenter', function() { 752 cursorWrapper.classList.add('link-hover'); 753 } ); 754 link.addEventListener('mouseleave', function() { 755 cursorWrapper.classList.remove('link-hover'); 756 } ); 757 }); 758 } 759 760 // Show Default Cursor 761 if ( !Number(cursor.default_cursor) ) { 762 element.classList.add('no-cursor'); 763 } 764 else { 765 element.classList.add('default-cursor'); 766 } 767 768 element.addEventListener('mouseenter', function() { 769 mouseEntered = true; 770 cursorWrapper.classList.add('active'); 771 window.setTimeout(function(){ 772 cursorWrapper.classList.remove('no-transition'); 773 }, 1000); 774 }); 775 776 element.addEventListener('mouseleave', function() { 777 mouseEntered = false; 778 cursorWrapper.classList.remove('active'); 779 }); 780 781 element.addEventListener('pointermove', function() { 782 if (!mouseEntered) { 783 mouseEntered = true; 784 cursorWrapper.classList.add('active'); 785 786 window.setTimeout(function(){ 787 cursorWrapper.classList.remove('no-transition'); 788 }, 1000); 789 } 790 }); 791 requestAnimationFrame(renderCursor); 792 793 function renderCursor() { 794 cursorEl1.style.transform = `matrix(${mouseData.el1ScaleX}, 0, 0, ${mouseData.el1ScaleY}, ${mouseData.hx + calcLeft}, ${mouseData.hy + calcTop})`; 795 cursorEl2.style.transform = `matrix(${mouseData.el2ScaleX}, 0, 0, ${mouseData.el2ScaleY}, ${mouseData.x}, ${mouseData.y})`; 796 797 requestAnimationFrame(renderCursor); 798 } 799 800 var innerInputs = element.querySelectorAll('input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], input[type="date"], input[type="range"], textarea'); 801 [...innerInputs].forEach(function(input) { 802 input.addEventListener('mouseenter', function() { 803 cursorWrapper.classList.add('input-hover'); 804 } ); 805 input.addEventListener('mouseleave', function() { 806 cursorWrapper.classList.remove('input-hover'); 807 } ); 808 }); 809 810 // Mutation Observer 811 let observerOptions = { 812 childList: true, 813 subtree: true, 814 }, 815 observer = new MutationObserver(callback); 816 817 function callback(mutations) { 818 for (let mutation of mutations) { 819 if (mutation.type === 'childList') { 820 for(let addedNode of mutation.addedNodes) { 821 if (addedNode.nodeType == Node.ELEMENT_NODE) { 822 if (cursorWrapper.contains(addedNode)) { 823 return false; 824 } 825 let cursorId = cursor.cursor_shape.substring(8); 826 [...created_cursors].forEach(function(createdCursor){ 827 if (createdCursor.cursor_id == cursorId) { 828 createdCursor.hover_cursors.forEach(function(hover) { 829 let selector = []; 830 if (hover.buttons == "on") {selector.push('button')} 831 if (hover.images == "on") {selector.push('img')} 832 if (hover.links == "on") {selector.push('a')} 833 if (hover.custom == "on") {selector.push(hover.selector)} 834 835 selector.forEach(function(selectorItem){ 836 if (addedNode.matches(selectorItem)) { 837 switch (hover.hover_type) { 838 case 'default': 839 addedNode.addEventListener('mouseenter', function(){ 840 cursorWrapper.classList.add('link-hover'); 841 }); 842 addedNode.addEventListener('mouseleave', function(){ 843 cursorWrapper.classList.remove('link-hover'); 844 }); 845 break; 846 case 'snap': 847 let currentStyles, currentChild, currentType, currentCalcTop, currentCalcLeft; 848 addedNode.addEventListener('mouseenter', function(){ 849 stopFlag = true; 850 if (cursorWrapper.getAttribute('style')) { 851 currentStyles = cursorWrapper.getAttribute('style'); 852 cursorWrapper.removeAttribute('style'); 853 } 854 855 currentType = cursorWrapper.getAttribute('data-cursor-type'); 856 cursorWrapper.classList.remove(`cursor-${currentType}`); 857 currentChild = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 858 859 currentCalcTop = calcTop; 860 currentCalcLeft = calcLeft; 861 862 calcTop = 0; 863 calcLeft = 0; 864 865 cursorWrapper.classList.add('cursor-snap'); 866 let elementPos = el.getBoundingClientRect();
867 elementTop = elementPos.top - hoverCursor.padding; 868 elementLeft = elementPos.left - hoverCursor.padding; 869 hoverElementWidth = elementPos.width + (hoverCursor.padding * 2); 870 hoverElementHeight = elementPos.height + (hoverCursor.padding * 2); 871 cursorWrapper.style.setProperty('--width', hoverElementWidth + "px"); 872 cursorWrapper.style.setProperty('--height', hoverElementHeight + "px"); 873 874 875 cursorWrapper.style.setProperty('--blending', hoverCursor.blending); 876 cursorWrapper.style.setProperty('--bgcolor', hoverCursor.bgcolor); 877 cursorWrapper.style.setProperty('--border-color', hoverCursor.border_color); 878 cursorWrapper.style.setProperty('--border-width', hoverCursor.border_width + "px"); 879 cursorWrapper.style.setProperty('--radius', hoverCursor.radius + "px"); 880 881 cursorEl1.style.top = 0; 882 cursorEl1.style.left = 0; 883 884 }); 885 addedNode.addEventListener('mouseleave', function(){ 886 stopFlag = false; 887 888 calcTop = currentCalcTop; 889 calcLeft = currentCalcLeft; 890 cursorWrapper.removeAttribute('style'); 891 if (currentStyles) { 892 cursorWrapper.setAttribute('style', currentStyles); 893 } 894 895 896 cursorWrapper.classList.remove('cursor-snap'); 897 cursorWrapper.classList.add(`cursor-${currentType}`); 898 cursorWrapper.setAttribute('data-cursor-type', currentType); 899 if (currentChild) {cursorEl1.appendChild(currentChild);} 900 cursorEl1.style.removeProperty('top'); 901 cursorEl1.style.removeProperty('left'); 902 }); 903 break; 904 case 'shape': 905 let currentStylesShape, currentChildShape, currentTypeShape, currentCalcTopShape, currentCalcLeftShape; 906 addedNode.addEventListener('mouseenter', function(){ 907 if (cursorWrapper.getAttribute('style')) { 908 currentStylesShape = cursorWrapper.getAttribute('style'); 909 cursorWrapper.removeAttribute('style'); 910 } 911 912 currentChildShape = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 913 currentTypeShape = cursorWrapper.getAttribute('data-cursor-type'); 914 915 cursorWrapper.classList.remove(`cursor-${currentTypeShape}`); 916 cursorWrapper.setAttribute('data-cursor-type', hover.hover_type); 917 currentCalcTopShape = calcTop; 918 currentCalcLeftShape = calcLeft; 919 calcTop = 0; 920 calcLeft = 0; 921 cursorWrapper.classList.add(`cursor-${cursor.cursor_shape}`); 922 923 cursorWrapper.style.setProperty('--fe-width', hover.hover_fe_width + "px"); 924 cursorWrapper.style.setProperty('--fe-height', hover.hover_fe_height + "px"); 925 cursorWrapper.style.setProperty('--fe-color', hover.hover_fe_color); 926 cursorWrapper.style.setProperty('--fe-border-width', hover.hover_fe_border_width + "px"); 927 cursorWrapper.style.setProperty('--fe-border-radius', hover.hover_fe_radius + "px"); 928 cursorWrapper.style.setProperty('--fe-border-color', hover.hover_fe_border_color); 929 cursorWrapper.style.setProperty('--fe-transition-duration', hover.hover_fe_duration + "ms"); 930 cursorWrapper.style.setProperty('--fe-transition-timing', hover.hover_fe_timing); 931 cursorWrapper.style.setProperty('--fe-blending-mode', hover.hover_fe_blending); 932 cursorWrapper.style.setProperty('--fe-zindex', hover.hover_fe_zindex); 933 cursorWrapper.style.setProperty('--fe-backdrop', `${hover.hover_fe_backdrop}(${hover.hover_fe_backdrop_value})`); 934 935 cursorWrapper.style.setProperty('--se-width', hover.hover_se_width + "px"); 936 cursorWrapper.style.setProperty('--se-height', hover.hover_se_height + "px"); 937 cursorWrapper.style.setProperty('--se-color', hover.hover_se_color); 938 cursorWrapper.style.setProperty('--se-border-width', hover.hover_se_border_width + "px"); 939 cursorWrapper.style.setProperty('--se-border-radius', hover.hover_se_radius + "px"); 940 cursorWrapper.style.setProperty('--se-border-color', hover.hover_se_border_color); 941 cursorWrapper.style.setProperty('--se-transition-duration', hover.hover_se_duration + "ms"); 942 cursorWrapper.style.setProperty('--se-transition-timing', hover.hover_se_timing); 943 cursorWrapper.style.setProperty('--se-blending-mode', hover.hover_se_blending); 944 cursorWrapper.style.setProperty('--se-zindex', hover.hover_se_zindex); 945 cursorWrapper.style.setProperty('--se-backdrop', `${hover.hover_se_backdrop}(${createdCursor.cursor_options.se_backdrop_value})`); 946 }); 947 addedNode.addEventListener('mouseleave', function(){ 948 cursorWrapper.removeAttribute('style'); 949 if (currentStylesShape) { 950 cursorWrapper.setAttribute('style', currentStylesShape); 951 } 952 cursorWrapper.classList.add(`cursor-${currentTypeShape}`); 953 cursorWrapper.setAttribute('data-cursor-type', currentTypeShape); 954 955 calcTop = currentCalcTopShape; 956 calcLeft = currentCalcLeftShape; 957 958 if (currentChildShape) {cursorEl1.appendChild(currentChildShape);} 959 }); 960 break; 961 case 'image': 962 let imageCursor = document.createElement('img'); 963 imageCursor.setAttribute('src', hover.hover_image_url); 964
965 let clickPointOption = hover.hover_click_point.split(','), 966 clickPointX = ( Number(clickPointOption[0]) * Number(hover.width) ) / 100, 967 clickPointY = ( Number(clickPointOption[1]) * Number(hover.height) ) / 100; 968 969 let currentStylesImage, currentChildImage, currentTypeImage, currentCalcTopImage, currentCalcLeftImage; 970 addedNode.addEventListener('mouseenter', function(){ 971 if (cursorWrapper.getAttribute('style')) { 972 currentStylesImage = cursorWrapper.getAttribute('style'); 973 cursorWrapper.removeAttribute('style'); 974 } 975 currentChildImage = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 976 cursorEl1.appendChild(imageCursor); 977 currentTypeImage = cursorWrapper.getAttribute('data-cursor-type'); 978 979 cursorWrapper.classList.remove(`cursor-${currentTypeImage}`); 980 cursorWrapper.classList.add('cursor-image'); 981 cursorWrapper.setAttribute('data-cursor-type', hover.hover_type); 982 currentCalcTopImage = calcTop; 983 currentCalcLeftImage = calcLeft; 984 985 cursorWrapper.style.setProperty('--width', hover.width + "px"); 986 cursorWrapper.style.setProperty('--color', hover.color); 987 cursorWrapper.style.setProperty('--radius', hover.radius + "px"); 988 if (hover.background != 'off') { 989 cursorWrapper.style.setProperty('--padding', hover.padding + "px"); 990 paddingTop = hover.padding; 991 paddingLeft = hover.padding; 992 } 993 calcTop = ( Number(paddingTop) + clickPointY ) * -1; 994 calcLeft = ( Number(paddingLeft) + clickPointX ) * -1; 995 cursorWrapper.style.setProperty('--blending', hover.blending); 996 }); 997 addedNode.addEventListener('mouseleave', function(){ 998 cursorEl1.removeChild(imageCursor); 999 cursorWrapper.removeAttribute('style'); 1000 if (currentStylesImage) { 1001 cursorWrapper.setAttribute('style', currentStylesImage); 1002 } 1003 cursorWrapper.classList.remove('cursor-image'); 1004 cursorWrapper.classList.add(`cursor-${currentTypeImage}`); 1005 cursorWrapper.setAttribute('data-cursor-type', currentTypeImage); 1006 calcTop = currentCalcTopImage; 1007 calcLeft = currentCalcLeftImage; 1008 if (currentChildImage) {cursorEl1.appendChild(currentChildImage);} 1009 }); 1010 1011 break; 1012 case 'text': 1013 let currentStylesText, currentChildText, currentTypeText, currentCalcTopText, currentCalcLeftText; 1014 addedNode.addEventListener('mouseenter', function(){ 1015 if (cursorWrapper.getAttribute('style')) {
1016 currentStylesText = cursorWrapper.getAttribute('style'); 1017 cursorWrapper.removeAttribute('style'); 1018 } 1019 1020 currentChildText = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 1021 currentTypeText = cursorWrapper.getAttribute('data-cursor-type'); 1022 cursorWrapper.classList.remove(`cursor-${currentTypeText}`); 1023 cursorWrapper.classList.add('cursor-text'); 1024 cursorWrapper.setAttribute('data-cursor-type', hover.hover_type); 1025 currentCalcTopText = calcTop; 1026 currentCalcLeftText = calcLeft; 1027 calcTop = 0; 1028 calcLeft = 0; 1029 1030 let svgString = `<svg viewBox="0 0 500 500"><path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle" fill="none"></path><text dy="25"><textPath xlink:href="#textcircle">${hover.hover_text}</textPath></text><circle cx="250" cy="250" r="${hover.hover_dot_width}" id="svg_circle_node"/></svg>`; 1031 cursorEl1.innerHTML = svgString; 1032 cursorWrapper.style.setProperty('--dot-fill', hover.dot_color); 1033 cursorWrapper.style.setProperty('--text-width', hover.width + "px"); 1034 cursorWrapper.style.setProperty('--text-transform', hover.hover_text_transform); 1035 cursorWrapper.style.setProperty('--font-weight', hover.hover_font_weight); 1036 cursorWrapper.style.setProperty('--text-color', hover.hover_text_color); 1037 cursorWrapper.style.setProperty('--font-size', hover.font_size + "px"); 1038 cursorWrapper.style.setProperty('--word-spacing', hover.hover_word_spacing + "px"); 1039 cursorWrapper.style.setProperty('--animation-name', hover.hover_animation); 1040 cursorWrapper.style.setProperty('--animation-duration', hover.hover_animation_duration + "s"); 1041 cursorWrapper.style.setProperty('--dot-width', hover.hover_dot_width + "px"); 1042 1043 }); 1044 addedNode.addEventListener('mouseleave', function(){ 1045 cursorWrapper.removeAttribute('style'); 1046 if (currentStylesText) { 1047 cursorWrapper.setAttribute('style', currentStylesText); 1048 } 1049 cursorEl1.innerHTML = ""; 1050 cursorWrapper.classList.remove('cursor-text'); 1051 cursorWrapper.classList.add(`cursor-${currentTypeText}`); 1052 cursorWrapper.setAttribute('data-cursor-type', currentTypeText); 1053 if (currentChildText) {cursorEl1.appendChild(currentChildText);} 1054 calcTop = currentCalcTopText; 1055 calcLeft = currentCalcLeftText; 1056 }); 1057 break; 1058 case 'horizontal': 1059 let hrContainer = document.createElement('div'); 1060 let currentStylesHorizontal, currentChildHorizontal, currentTypeHorizontal, currentCalcTopHorizontal, currentCalcLeftHorizontal; 1061 addedNode.addEventListener('mouseenter', function(){ 1062 if (cursorWrapper.getAttribute('style')) { 1063 currentStylesHorizontal = cursorWrapper.getAttribute('style'); 1064 cursorWrapper.removeAttribute('style'); 1065 } 1066 currentChildHorizontal = cursorEl1.firstChild ? cursorEl1.removeChild(cursorEl1.firstChild) : null; 1067 currentTypeHorizontal = cursorWrapper.getAttribute('data-cursor-type'); 1068 currentCalcTopHorizontal = calcTop; 1069 currentCalcLeftHorizontal = calcLeft; 1070 calcTop = 0; 1071 calcLeft = 0; 1072 cursorWrapper.classList.add('cursor-horizontal'); 1073 hrContainer.innerHTML = hover.hover_hr_text; 1074 cursorEl1.appendChild(hrContainer); 1075 cursorWrapper.style.setProperty('--hr-width', hover.hover_hr_width + "px"); 1076 cursorWrapper.style.setProperty('--hr-transform', hover.hover_hr_transform); 1077 cursorWrapper.style.setProperty('--hr-size', hover.hover_hr_size + "px"); 1078 cursorWrapper.style.setProperty('--hr-weight', hover.hover_hr_weight); 1079 cursorWrapper.style.setProperty('--bg-color', hover.hover_hr_bgcolor); 1080 cursorWrapper.style.setProperty('--hr-spacing', hover.hover_hr_spacing + "px"); 1081 cursorWrapper.style.setProperty('--hr-radius', hover.hover_hr_radius + "px"); 1082 cursorWrapper.style.setProperty('--hr-padding', hover.hover_hr_padding + "px"); 1083 cursorWrapper.style.setProperty('--hr-backdrop', hover.hover_hr_backdrop + "(" + hover.hover_hr_backdrop_amount + ")"); 1084 cursorWrapper.style.setProperty('--hr-color', hover.hover_hr_color); 1085 cursorWrapper.style.setProperty('--duration', hover.hover_hr_duration + "ms"); 1086 cursorWrapper.style.setProperty('--timing', hover.hover_hr_timing); 1087 }); 1088 addedNode.addEventListener('mouseleave', function(){ 1089 cursorWrapper.removeAttribute('style'); 1090 if (currentStylesHorizontal) { 1091 cursorWrapper.setAttribute('style', currentStylesHorizontal); 1092 } 1093 cursorEl1.removeChild(hrContainer); 1094 cursorWrapper.classList.remove('cursor-horizontal'); 1095 cursorWrapper.classList.add(`cursor-${currentTypeHorizontal}`); 1096 cursorWrapper.setAttribute('data-cursor-type', currentTypeHorizontal); 1097 calcTop = currentCalcTopHorizontal; 1098 calcLeft = currentCalcLeftHorizontal; 1099 if (currentChildHorizontal) {cursorEl1.appendChild(currentChildHorizontal);} 1100 }); 1101 break; 1102 } 1103 } 1104 }); 1105 }) 1106 } 1107 }); 1108 } 1109 } 1110 } 1111 } 1112 } 1113 observer.observe(body, observerOptions); 1114 1115 } 1116 }); 1117 }); 1118})(); 1119 1120 1121 1122/* :) Let's meke internet BEAUTIFUL*/ 1123/* 1124 _ __ __ ______ __ 1125| | / /__ / /_ /_ __/_______ ____ ____/ /_ __ 1126| | /| / / _ \/ __ \ / / / ___/ _ \/ __ \/ __ / / / / 1127| |/ |/ / __/ /_/ / / / / / / __/ / / / /_/ / /_/ / 1128|__/|__/\___/_.___/ /_/ /_/ \___/_/ /_/\__,_/\__, / 1129 /____/ 1130*/
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.