1// https://micku7zu.github.io/vanilla-tilt.js/ 2var VanillaTilt = (function () { 3 "use strict"; 4 class t { 5 constructor(e, i = {}) { 6 if (!(e instanceof Node)) 7 throw "Can't initialize VanillaTilt because " + e + " is not a Node."; 8 (this.width = null), 9 (this.height = null), 10 (this.clientWidth = null), 11 (this.clientHeight = null), 12 (this.left = null), 13 (this.top = null), 14 (this.gammazero = null), 15 (this.betazero = null), 16 (this.lastgammazero = null), 17 (this.lastbetazero = null), 18 (this.transitionTimeout = null), 19 (this.updateCall = null), 20 (this.event = null), 21 (this.updateBind = this.update.bind(this)), 22 (this.resetBind = this.reset.bind(this)), 23 (this.element = e), 24 (this.settings = this.extendSettings(i)), 25 (this.reverse = this.settings.reverse ? -1 : 1), 26 (this.resetToStart = t.isSettingTrue(this.settings["reset-to-start"])), 27 (this.glare = t.isSettingTrue(this.settings.glare)), 28 (this.glarePrerender = t.isSettingTrue( 29 this.settings["glare-prerender"], 30 )), 31 (this.fullPageListening = t.isSettingTrue( 32 this.settings["full-page-listening"], 33 )), 34 (this.gyroscope = t.isSettingTrue(this.settings.gyroscope)), 35 (this.gyroscopeSamples = this.settings.gyroscopeSamples), 36 (this.elementListener = this.getElementListener()), 37 this.glare && this.prepareGlare(), 38 this.fullPageListening && this.updateClientSize(), 39 this.addEventListeners(), 40 this.reset(), 41 !1 === this.resetToStart && 42 ((this.settings.startX = 0), (this.settings.startY = 0)); 43 } 44 static isSettingTrue(t) { 45 return "" === t || !0 === t || 1 === t; 46 } 47 getElementListener() { 48 if (this.fullPageListening) return window.document; 49 if ("string" == typeof this.settings["mouse-event-element"]) { 50 const t = document.querySelector(this.settings["mouse-event-element"]); 51 if (t) return t; 52 } 53 return this.settings["mouse-event-element"] instanceof Node 54 ? this.settings["mouse-event-element"] 55 : this.element; 56 } 57 addEventListeners() { 58 (this.onMouseEnterBind = this.onMouseEnter.bind(this)), 59 (this.onMouseMoveBind = this.onMouseMove.bind(this)), 60 (this.onMouseLeaveBind = this.onMouseLeave.bind(this)), 61 (this.onWindowResizeBind = this.onWindowResize.bind(this)), 62 (this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this)), 63 this.elementListener.addEventListener( 64 "mouseenter", 65 this.onMouseEnterBind, 66 ), 67 this.elementListener.addEventListener( 68 "mouseleave", 69 this.onMouseLeaveBind, 70 ), 71 this.elementListener.addEventListener( 72 "mousemove", 73 this.onMouseMoveBind, 74 ), 75 (this.glare || this.fullPageListening) && 76 window.addEventListener("resize", this.onWindowResizeBind), 77 this.gyroscope && 78 window.addEventListener( 79 "deviceorientation", 80 this.onDeviceOrientationBind, 81 ); 82 } 83 removeEventListeners() { 84 this.elementListener.removeEventListener( 85 "mouseenter", 86 this.onMouseEnterBind, 87 ), 88 this.elementListener.removeEventListener( 89 "mouseleave", 90 this.onMouseLeaveBind, 91 ), 92 this.elementListener.removeEventListener( 93 "mousemove", 94 this.onMouseMoveBind, 95 ), 96 this.gyroscope && 97 window.removeEventListener( 98 "deviceorientation", 99 this.onDeviceOrientationBind, 100 ), 101 (this.glare || this.fullPageListening) && 102 window.removeEventListener("resize", this.onWindowResizeBind); 103 } 104 destroy() { 105 clearTimeout(this.transitionTimeout), 106 null !== this.updateCall && cancelAnimationFrame(this.updateCall), 107 (this.element.style.willChange = ""), 108 (this.element.style.transition = ""), 109 (this.element.style.transform = ""), 110 this.resetGlare(), 111 this.removeEventListeners(), 112 (this.element.vanillaTilt = null),
113 delete this.element.vanillaTilt, 114 (this.element = null); 115 } 116 onDeviceOrientation(t) { 117 if (null === t.gamma || null === t.beta) return; 118 this.updateElementPosition(), 119 this.gyroscopeSamples > 0 && 120 ((this.lastgammazero = this.gammazero), 121 (this.lastbetazero = this.betazero), 122 null === this.gammazero 123 ? ((this.gammazero = t.gamma), (this.betazero = t.beta)) 124 : ((this.gammazero = (t.gamma + this.lastgammazero) / 2), 125 (this.betazero = (t.beta + this.lastbetazero) / 2)), 126 (this.gyroscopeSamples -= 1)); 127 const e = 128 this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX, 129 i = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY, 130 s = e / this.width, 131 n = i / this.height, 132 l = (t.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero)) / s, 133 a = (t.beta - (this.settings.gyroscopeMinAngleY + this.betazero)) / n; 134 null !== this.updateCall && cancelAnimationFrame(this.updateCall), 135 (this.event = { clientX: l + this.left, clientY: a + this.top }), 136 (this.updateCall = requestAnimationFrame(this.updateBind)); 137 } 138 onMouseEnter() { 139 this.updateElementPosition(), 140 (this.element.style.willChange = "transform"), 141 this.setTransition(); 142 } 143 onMouseMove(t) { 144 null !== this.updateCall && cancelAnimationFrame(this.updateCall), 145 (this.event = t), 146 (this.updateCall = requestAnimationFrame(this.updateBind)); 147 } 148 onMouseLeave() { 149 this.setTransition(), 150 this.settings.reset && requestAnimationFrame(this.resetBind); 151 } 152 reset() { 153 this.onMouseEnter(), 154 this.fullPageListening 155 ? (this.event = { 156 clientX: 157 ((this.settings.startX + this.settings.max) / 158 (2 * this.settings.max)) * 159 this.clientWidth, 160 clientY: 161 ((this.settings.startY + this.settings.max) / 162 (2 * this.settings.max)) * 163 this.clientHeight, 164 }) 165 : (this.event = { 166 clientX: 167 this.left + 168 ((this.settings.startX + this.settings.max) / 169 (2 * this.settings.max)) * 170 this.width, 171 clientY: 172 this.top + 173 ((this.settings.startY + this.settings.max) / 174 (2 * this.settings.max)) * 175 this.height, 176 }); 177 let t = this.settings.scale; 178 (this.settings.scale = 1), 179 this.update(), 180 (this.settings.scale = t), 181 this.resetGlare(); 182 } 183 resetGlare() { 184 this.glare && 185 ((this.glareElement.style.transform = 186 "rotate(180deg) translate(-50%, -50%)"), 187 (this.glareElement.style.opacity = "0")); 188 } 189 getValues() { 190 let t, e; 191 return ( 192 this.fullPageListening 193 ? ((t = this.event.clientX / this.clientWidth), 194 (e = this.event.clientY / this.clientHeight)) 195 : ((t = (this.event.clientX - this.left) / this.width), 196 (e = (this.event.clientY - this.top) / this.height)), 197 (t = Math.min(Math.max(t, 0), 1)), 198 (e = Math.min(Math.max(e, 0), 1)), 199 { 200 tiltX: ( 201 this.reverse * 202 (this.settings.max - t * this.settings.max * 2) 203 ).toFixed(2), 204 tiltY: ( 205 this.reverse * 206 (e * this.settings.max * 2 - this.settings.max) 207 ).toFixed(2), 208 percentageX: 100 * t, 209 percentageY: 100 * e, 210 angle: 211 Math.atan2( 212 this.event.clientX - (this.left + this.width / 2), 213 -(this.event.clientY - (this.top + this.height / 2)), 214 ) * 215 (180 / Math.PI), 216 } 217 ); 218 } 219 updateElementPosition() { 220 let t = this.element.getBoundingClientRect(); 221 (this.width = this.element.offsetWidth), 222 (this.height = this.element.offsetHeight), 223 (this.left = t.left), 224 (this.top = t.top); 225 } 226 update() { 227 let t = this.getValues(); 228 (this.element.style.transform = 229 "perspective(" + 230 this.settings.perspective + 231 "px) rotateX(" + 232 ("x" === this.settings.axis ? 0 : t.tiltY) + 233 "deg) rotateY(" + 234 ("y" === this.settings.axis ? 0 : t.tiltX) + 235 "deg) scale3d(" + 236 this.settings.scale + 237 ", " + 238 this.settings.scale + 239 ", " + 240 this.settings.scale + 241 ")"), 242 this.glare && 243 ((this.glareElement.style.transform = `rotate(${t.angle}deg) translate(-50%, -50%)`), 244 (this.glareElement.style.opacity = `${ 245 (t.percentageY * this.settings["max-glare"]) / 100 246 }`)), 247 this.element.dispatchEvent( 248 new CustomEvent("tiltChange", { detail: t }), 249 ), 250 (this.updateCall = null); 251 } 252 prepareGlare() { 253 if (!this.glarePrerender) { 254 const t = document.createElement("div"); 255 t.classList.add("js-tilt-glare"); 256 const e = document.createElement("div"); 257 e.classList.add("js-tilt-glare-inner"), 258 t.appendChild(e), 259 this.element.appendChild(t); 260 } 261 (this.glareElementWrapper = this.element.querySelector(".js-tilt-glare")), 262 (this.glareElement = this.element.querySelector( 263 ".js-tilt-glare-inner", 264 )), 265 this.glarePrerender || 266 (Object.assign(this.glareElementWrapper.style, { 267 position: "absolute", 268 top: "0", 269 left: "0", 270 width: "100%", 271 height: "100%", 272 overflow: "hidden", 273 "pointer-events": "none", 274 "border-radius": "inherit", 275 }), 276 Object.assign(this.glareElement.style, { 277 position: "absolute", 278 top: "50%", 279 left: "50%", 280 "pointer-events": "none", 281 "background-image": 282 "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)", 283 transform: "rotate(180deg) translate(-50%, -50%)", 284 "transform-origin": "0% 0%", 285 opacity: "0", 286 }), 287 this.updateGlareSize()); 288 } 289 updateGlareSize() { 290 if (this.glare) { 291 const t = 292 2 * 293 (this.element.offsetWidth > this.element.offsetHeight 294 ? this.element.offsetWidth 295 : this.element.offsetHeight); 296 Object.assign(this.glareElement.style, { 297 width: `${t}px`, 298 height: `${t}px`, 299 }); 300 } 301 } 302 updateClientSize() { 303 (this.clientWidth = 304 window.innerWidth || 305 document.documentElement.clientWidth || 306 document.body.clientWidth), 307 (this.clientHeight = 308 window.innerHeight || 309 document.documentElement.clientHeight || 310 document.body.clientHeight); 311 } 312 onWindowResize() { 313 this.updateGlareSize(), this.updateClientSize(); 314 } 315 setTransition() { 316 clearTimeout(this.transitionTimeout), 317 (this.element.style.transition = 318 this.settings.speed + "ms " + this.settings.easing), 319 this.glare && 320 (this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`), 321 (this.transitionTimeout = setTimeout(() => { 322 (this.element.style.transition = ""), 323 this.glare && (this.glareElement.style.transition = ""); 324 }, this.settings.speed)); 325 } 326 extendSettings(t) { 327 let e = { 328 reverse: !1, 329 max: 15, 330 startX: 0, 331 startY: 0, 332 perspective: 1e3, 333 easing: "cubic-bezier(.03,.98,.52,.99)", 334 scale: 1, 335 speed: 300, 336 transition: !0, 337 axis: null, 338 glare: !1, 339 "max-glare": 1, 340 "glare-prerender": !1, 341 "full-page-listening": !1, 342 "mouse-event-element": null, 343 reset: !0, 344 "reset-to-start": !0, 345 gyroscope: !0, 346 gyroscopeMinAngleX: -45, 347 gyroscopeMaxAngleX: 45, 348 gyroscopeMinAngleY: -45, 349 gyroscopeMaxAngleY: 45, 350 gyroscopeSamples: 10, 351 }, 352 i = {}; 353 for (var s in e) 354 if (s in t) i[s] = t[s]; 355 else if (this.element.hasAttribute("data-tilt-" + s)) { 356 let t = this.element.getAttribute("data-tilt-" + s); 357 try { 358 i[s] = JSON.parse(t); 359 } catch (e) { 360 i[s] = t; 361 } 362 } else i[s] = e[s]; 363 return i; 364 } 365 static init(e, i) { 366 e instanceof Node && (e = [e]), 367 e instanceof NodeList && (e = [].slice.call(e)), 368 e instanceof Array && 369 e.forEach((e) => { 370 "vanillaTilt" in e || (e.vanillaTilt = new t(e, i)); 371 }); 372 } 373 } 374 return ( 375 "undefined" != typeof document && 376 ((window.VanillaTilt = t), 377 t.init(document.querySelectorAll("[data-tilt]"))), 378 t 379 ); 380})();
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.