apple-intelligence-glow
Version:
A JavaScript and CSS implementation of the Apple Intelligence border glow effect
3 lines (2 loc) • 2.67 kB
JavaScript
class e{constructor(e={}){this.options={containerId:e.containerId||null,colorScheme:e.colorScheme||"default",animated:void 0===e.animated||e.animated,...e},this.containers=[],this.init()}init(){if(this.options.containerId){const e=document.getElementById(this.options.containerId);if(!e)return void console.error(`Container with ID "${this.options.containerId}" not found.`);this.containers.push(e)}else{document.querySelectorAll(".border-glow-container").forEach((e=>{this.containers.push(e)}))}this.containers.forEach((e=>{this.initContainer(e)})),this.initControls()}initContainer(e){e.querySelectorAll(".glow-layer").forEach((e=>e.remove()));const t=document.createDocumentFragment();for(let e=1;e<=4;e++){const o=document.createElement("div");o.className=`glow-layer glow-layer-${e}`,t.appendChild(o)}e.prepend(t);const o=e.querySelector(".content-area");if(o){o.querySelectorAll(".pulsing-glow, .pulsing-glow-container").forEach((e=>e.remove()))}this.setColorScheme(e,this.options.colorScheme),this.options.animated?e.classList.add("animated"):e.classList.remove("animated")}setColorScheme(e,t){e.classList.remove("color-scheme-default","color-scheme-blue","color-scheme-green"),e.classList.add(`color-scheme-${t}`);const o=e.querySelector(".app-logo"),n=e.querySelector(".app-button");if(o){let e;switch(t){case"blue":e=["#0033ff","#ff00cc"];break;case"green":e=["#00ff33","#ffcc00"];break;default:e=["#6600ff","#ff6600"]}o.style.background=`linear-gradient(to right, ${e[0]}, ${e[1]})`,o.style.webkitBackgroundClip="text",o.style.backgroundClip="text",n&&(n.style.background=`linear-gradient(to right, ${e[0]}, ${e[1]})`)}}toggleAnimation(e){this.containers.forEach((t=>{e?t.classList.add("paused"):t.classList.remove("paused")}))}initControls(){const e=document.getElementById("pauseButton");if(e){let t=!1;e.addEventListener("click",(()=>{t=!t,this.toggleAnimation(t),e.textContent=t?"Resume Animation":"Pause Animation"}),{passive:!0})}const t=document.querySelector(".color-options");if(t)t.addEventListener("click",(e=>{const t=e.target.closest(".color-option");if(!t)return;document.querySelectorAll(".color-option").forEach((e=>e.classList.remove("active"))),t.classList.add("active");const o=t.getAttribute("data-scheme");this.containers.forEach((e=>{this.setColorScheme(e,o)}))}),{passive:!0});else{const e=document.querySelectorAll(".color-option");e.length>0&&e.forEach((t=>{t.addEventListener("click",(()=>{e.forEach((e=>e.classList.remove("active"))),t.classList.add("active");const o=t.getAttribute("data-scheme");this.containers.forEach((e=>{this.setColorScheme(e,o)}))}),{passive:!0})}))}}}export{e as default};
//# sourceMappingURL=index.min.js.map