From 52b18b762e0c71512f43b1fa3a4f50520bb4e0ad Mon Sep 17 00:00:00 2001 From: Aero <44799877+AeroWang@users.noreply.github.com> Date: Thu, 30 Nov 2023 23:16:48 +0800 Subject: [PATCH] add Sparkles prop: slot-type --- README.md | 1 + components/Sparkles/index.js | 7 ++- dist/components/a_sparkles.es.js | 70 +++++++++++++++--------------- dist/components/a_sparkles.iife.js | 2 +- dist/components/a_sparkles.umd.js | 2 +- index.html | 6 +-- 6 files changed, 45 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index e6f0ed9..2b19aa6 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ - `left-offset-range` 定义火花✨出现的范围边界；（从左向右边界） - 形式如 `left-offset-range="-10,60"`，属性值为数值类型，映射样式单位为百分比 - `top-offset-range` （从上至下边界） + - `slot-type`，默认为 `slot-type="text"`，此时层级可随机出现在 slot 层级意义上的上下层；否则火花✨仅出现在 slot 上层 - etc... 2. 引入方式： - 在 `body` 标签末尾插入 `` diff --git a/components/Sparkles/index.js b/components/Sparkles/index.js index bfe7bab..05a0216 100644 --- a/components/Sparkles/index.js +++ b/components/Sparkles/index.js @@ -4,6 +4,7 @@ import sparklesStyles from './sparkles.less?inline'; const generateSparkleConfig = ( preferredReducedMotion = false, randomColorList = [], + slotType = 'text', leftOffsetRange, topOffsetRange, ) => { @@ -18,7 +19,7 @@ const generateSparkleConfig = ( : undefined, top: `${random(topOffsetRange[0], topOffsetRange[1])}%`, left: `${random(leftOffsetRange[0], leftOffsetRange[1])}%`, - zIndex: (preferredReducedMotion ? 1 : random(1, 8)).toString() + zIndex: (slotType === 'text' ? preferredReducedMotion ? 1 : random(1, 8) : 6).toString() } }; }; @@ -38,6 +39,7 @@ class Sparkles extends HTMLElement { _maxDelay = 800; _leftOffsetRange = [-15, 60]; _topOffsetRange = [0, 85]; + _slotType = 'text'; constructor () { super(); @@ -61,6 +63,7 @@ class Sparkles extends HTMLElement { this._topOffsetRange = topOffsetRange.length === 2 ? topOffsetRange : [0, 85]; this._minDelay = this.getAttribute('min-delay') ? Number(this.getAttribute('min-delay')) : 300; this._maxDelay = this.getAttribute('max-delay') ? Number(this.getAttribute('max-delay')) < 500 ? 500: Number(this.getAttribute('max-delay')) : 800; + this._slotType = this.getAttribute('slot-type') ? this.getAttribute('slot-type') : 'text'; if (this._preferredReducedMotion) { const initNum = this.getAttribute('init-num'); @@ -105,7 +108,7 @@ class Sparkles extends HTMLElement { } // insert reCreate(){ - const sparkle = generateSparkleConfig(false, this._randomColors, this._leftOffsetRange, this._topOffsetRange); + const sparkle = generateSparkleConfig(false, this._randomColors, this._slotType, this._leftOffsetRange, this._topOffsetRange); const now1 = Date.now(); const nextSparkles = this._sparkles.filter((sparkle) => { const delta = now1 - sparkle.createdAt; diff --git a/dist/components/a_sparkles.es.js b/dist/components/a_sparkles.es.js index 3e790cf..963c066 100644 --- a/dist/components/a_sparkles.es.js +++ b/dist/components/a_sparkles.es.js @@ -1,42 +1,39 @@ var u = Object.defineProperty; -var f = (i, t, e) => t in i ? u(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e; -var n = (i, t, e) => (f(i, typeof t != "symbol" ? t + "" : t, e), e); -const a = (i, t) => Math.floor(Math.random() * (t - i)) + i; -function _(i, t = void 0, e = 1) { - const s = []; - typeof t > "u" && (t = i, i = 0); - for (let r = i; r < t; r += e) - s.push(r); - return s; +var f = (i, s, e) => s in i ? u(i, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[s] = e; +var n = (i, s, e) => (f(i, typeof s != "symbol" ? s + "" : s, e), e); +const a = (i, s) => Math.floor(Math.random() * (s - i)) + i; +function _(i, s = void 0, e = 1) { + const t = []; + typeof s > "u" && (s = i, i = 0); + for (let r = i; r < s; r += e) + t.push(r); + return t; } function g() { return !!(typeof window < "u" && window.document && window.document.createElement); } -const y = (i) => window.matchMedia(i).matches, m = (i, t = { timeId: null }, e, s) => { - if (typeof e == "number" && typeof s == "number") { +const y = (i) => window.matchMedia(i).matches, m = (i, s = { timeId: null }, e, t) => { + if (typeof e == "number" && typeof t == "number") { const r = () => { - const l = a(e, s); - t.timeId = window.setTimeout(() => { + const l = a(e, t); + s.timeId = window.setTimeout(() => { i(), r(); }, l); }; r(); } else - window.clearTimeout(t.timeId); -}, b = ".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}", c = (i = !1, t = [], e, s) => ( - // const randomColorList = ['#fbbf24', '#4ade80', '#60a5fa', '#8b5cf6', '#f43f5e'] - { - id: String(a(1e4, 99999)), - createdAt: Date.now(), - size: a(10, 17), - style: { - color: t.length ? t[a(0, t.length)] : void 0, - top: `${a(e[0], e[1])}%`, - left: `${a(s[0], e[1])}%`, - zIndex: (i ? 1 : a(1, 8)).toString() - } + window.clearTimeout(s.timeId); +}, b = ".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}", c = (i = !1, s = [], e = "text", t, r) => ({ + id: String(a(1e4, 99999)), + createdAt: Date.now(), + size: a(10, 17), + style: { + color: s.length ? s[a(0, s.length)] : void 0, + top: `${a(r[0], r[1])}%`, + left: `${a(t[0], t[1])}%`, + zIndex: (e === "text" ? i ? 1 : a(1, 8) : 6).toString() } -), p = "(prefers-reduced-motion: no-preference)"; +}), p = "(prefers-reduced-motion: no-preference)"; class w extends HTMLElement { constructor() { super(); @@ -52,15 +49,16 @@ class w extends HTMLElement { n(this, "_maxDelay", 800); n(this, "_leftOffsetRange", [-15, 60]); n(this, "_topOffsetRange", [0, 85]); + n(this, "_slotType", "text"); this._shadow = this.attachShadow({ mode: "closed" }); const e = document.createElement("style"); e.textContent = b, this._shadow.appendChild(e), this._sparklesBox = document.createElement("div"), this._sparklesBox.className = "sparkles-box"; - const s = document.createElement("slot"); - s.setAttribute("class", "slot"), this._sparklesBox.appendChild(s), this._shadow.appendChild(this._sparklesBox), this._randomColors = this.getAttribute("colors") ? this.getAttribute("colors").split(",").map((o) => o.trim()) : void 0; - const r = this.getAttribute("left-offset-range") ? this.getAttribute("left-offset-range").split(",").map((o) => o.trim()) : [-15, 60]; + const t = document.createElement("slot"); + t.setAttribute("class", "slot"), this._sparklesBox.appendChild(t), this._shadow.appendChild(this._sparklesBox), this._randomColors = this.getAttribute("colors") ? this.getAttribute("colors").split(",").map((o) => o.trim()) : void 0; + const r = this.getAttribute("left-offset-range") ? this.getAttribute("left-offset-range").split(",").map((o) => Number(o.trim())) : [-15, 60]; this._leftOffsetRange = r.length === 2 ? r : [-10, 60]; - const l = this.getAttribute("top-offset-range") ? this.getAttribute("top-offset-range").split(",").map((o) => o.trim()) : [-15, 60]; - if (this._topOffsetRange = l.length === 2 ? l : [0, 85], this._minDelay = this.getAttribute("min-delay") ? Number(this.getAttribute("min-delay")) : 300, this._maxDelay = this.getAttribute("max-delay") ? Number(this.getAttribute("max-delay")) < 600 ? 600 : Number(this.getAttribute("max-delay")) : 800, this._preferredReducedMotion) { + const l = this.getAttribute("top-offset-range") ? this.getAttribute("top-offset-range").split(",").map((o) => Number(o.trim())) : [-15, 60]; + if (this._topOffsetRange = l.length === 2 ? l : [0, 85], this._minDelay = this.getAttribute("min-delay") ? Number(this.getAttribute("min-delay")) : 300, this._maxDelay = this.getAttribute("max-delay") ? Number(this.getAttribute("max-delay")) < 500 ? 500 : Number(this.getAttribute("max-delay")) : 800, this._slotType = this.getAttribute("slot-type") ? this.getAttribute("slot-type") : "text", this._preferredReducedMotion) { const o = this.getAttribute("init-num"), d = document.createDocumentFragment(); this._sparkles = _(a(0, Number(o))).map(() => c(this._preferredReducedMotion, this._randomColors)), this._sparkles.forEach((h) => { this.generateSparkle(h), d.appendChild(this.generateSparkle(h)); @@ -69,8 +67,8 @@ class w extends HTMLElement { this.reCreate = this.reCreate.bind(this), this.mediaListener = this.mediaListener.bind(this); } generateSparkle(e) { - const s = document.createElement("span"); - return s.className = "single-sparkle-box", s.innerHTML = ``, s.style.color = e.style.color, s.style.top = e.style.top, s.style.left = e.style.left, s.style.zIndex = e.style.zIndex, s.id = e.id, s; + const t = document.createElement("span"); + return t.className = "single-sparkle-box", t.innerHTML = ``, t.style.color = e.style.color, t.style.top = e.style.top, t.style.left = e.style.left, t.style.zIndex = e.style.zIndex, t.id = e.id, t; } mediaListener(e) { if (e && (this._preferredReducedMotion = !e.matches, this._preferredReducedMotion)) @@ -79,8 +77,8 @@ class w extends HTMLElement { } // insert reCreate() { - const e = c(!1, this._randomColors, this._leftOffsetRange, this._topOffsetRange), s = Date.now(), r = this._sparkles.filter((l) => { - if (s - l.createdAt < this._maxDelay + 50) + const e = c(!1, this._randomColors, this._slotType, this._leftOffsetRange, this._topOffsetRange), t = Date.now(), r = this._sparkles.filter((l) => { + if (t - l.createdAt < this._maxDelay + 150) return !0; { const d = this._shadow.getElementById(l.id); diff --git a/dist/components/a_sparkles.iife.js b/dist/components/a_sparkles.iife.js index aaeecbf..d178b90 100644 --- a/dist/components/a_sparkles.iife.js +++ b/dist/components/a_sparkles.iife.js @@ -1 +1 @@ -var b=Object.defineProperty;var w=(s,a,d)=>a in s?b(s,a,{enumerable:!0,configurable:!0,writable:!0,value:d}):s[a]=d;var o=(s,a,d)=>(w(s,typeof a!="symbol"?a+"":a,d),d);(function(){"use strict";const s=(i,r)=>Math.floor(Math.random()*(r-i))+i;function a(i,r=void 0,e=1){const t=[];typeof r>"u"&&(r=i,i=0);for(let n=i;nwindow.matchMedia(i).matches,c=(i,r={timeId:null},e,t)=>{if(typeof e=="number"&&typeof t=="number"){const n=()=>{const h=s(e,t);r.timeId=window.setTimeout(()=>{i(),n()},h)};n()}else window.clearTimeout(r.timeId)},g=".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}",u=(i=!1,r=[],e,t)=>({id:String(s(1e4,99999)),createdAt:Date.now(),size:s(10,17),style:{color:r.length?r[s(0,r.length)]:void 0,top:`${s(e[0],e[1])}%`,left:`${s(t[0],e[1])}%`,zIndex:(i?1:s(1,8)).toString()}}),p="(prefers-reduced-motion: no-preference)";class y extends HTMLElement{constructor(){super();o(this,"_mediaQueryList",window.matchMedia(p));o(this,"_preferredReducedMotion",!_(p));o(this,"_sparklesBox");o(this,"_sparkles",[]);o(this,"_timeId",{timeId:null});o(this,"_shadow");o(this,"_randomColors");o(this,"_minDelay",300);o(this,"_maxDelay",800);o(this,"_leftOffsetRange",[-15,60]);o(this,"_topOffsetRange",[0,85]);this._shadow=this.attachShadow({mode:"closed"});const e=document.createElement("style");e.textContent=g,this._shadow.appendChild(e),this._sparklesBox=document.createElement("div"),this._sparklesBox.className="sparkles-box";const t=document.createElement("slot");t.setAttribute("class","slot"),this._sparklesBox.appendChild(t),this._shadow.appendChild(this._sparklesBox),this._randomColors=this.getAttribute("colors")?this.getAttribute("colors").split(",").map(l=>l.trim()):void 0;const n=this.getAttribute("left-offset-range")?this.getAttribute("left-offset-range").split(",").map(l=>l.trim()):[-15,60];this._leftOffsetRange=n.length===2?n:[-10,60];const h=this.getAttribute("top-offset-range")?this.getAttribute("top-offset-range").split(",").map(l=>l.trim()):[-15,60];if(this._topOffsetRange=h.length===2?h:[0,85],this._minDelay=this.getAttribute("min-delay")?Number(this.getAttribute("min-delay")):300,this._maxDelay=this.getAttribute("max-delay")?Number(this.getAttribute("max-delay"))<600?600:Number(this.getAttribute("max-delay")):800,this._preferredReducedMotion){const l=this.getAttribute("init-num"),m=document.createDocumentFragment();this._sparkles=a(s(0,Number(l))).map(()=>u(this._preferredReducedMotion,this._randomColors)),this._sparkles.forEach(f=>{this.generateSparkle(f),m.appendChild(this.generateSparkle(f))}),this._sparklesBox.appendChild(m)}this.reCreate=this.reCreate.bind(this),this.mediaListener=this.mediaListener.bind(this)}generateSparkle(e){const t=document.createElement("span");return t.className="single-sparkle-box",t.innerHTML=``,t.style.color=e.style.color,t.style.top=e.style.top,t.style.left=e.style.left,t.style.zIndex=e.style.zIndex,t.id=e.id,t}mediaListener(e){if(e&&(this._preferredReducedMotion=!e.matches,this._preferredReducedMotion))return c(this.reCreate,this._timeId,null,null);this._preferredReducedMotion||c(this.reCreate,this._timeId,this._minDelay,this._maxDelay)}reCreate(){const e=u(!1,this._randomColors,this._leftOffsetRange,this._topOffsetRange),t=Date.now(),n=this._sparkles.filter(h=>{if(t-h.createdAta in i?b(i,a,{enumerable:!0,configurable:!0,writable:!0,value:d}):i[a]=d;var o=(i,a,d)=>(w(i,typeof a!="symbol"?a+"":a,d),d);(function(){"use strict";const i=(r,n)=>Math.floor(Math.random()*(n-r))+r;function a(r,n=void 0,e=1){const t=[];typeof n>"u"&&(n=r,r=0);for(let s=r;swindow.matchMedia(r).matches,c=(r,n={timeId:null},e,t)=>{if(typeof e=="number"&&typeof t=="number"){const s=()=>{const h=i(e,t);n.timeId=window.setTimeout(()=>{r(),s()},h)};s()}else window.clearTimeout(n.timeId)},g=".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}",u=(r=!1,n=[],e="text",t,s)=>({id:String(i(1e4,99999)),createdAt:Date.now(),size:i(10,17),style:{color:n.length?n[i(0,n.length)]:void 0,top:`${i(s[0],s[1])}%`,left:`${i(t[0],t[1])}%`,zIndex:(e==="text"?r?1:i(1,8):6).toString()}}),p="(prefers-reduced-motion: no-preference)";class y extends HTMLElement{constructor(){super();o(this,"_mediaQueryList",window.matchMedia(p));o(this,"_preferredReducedMotion",!_(p));o(this,"_sparklesBox");o(this,"_sparkles",[]);o(this,"_timeId",{timeId:null});o(this,"_shadow");o(this,"_randomColors");o(this,"_minDelay",300);o(this,"_maxDelay",800);o(this,"_leftOffsetRange",[-15,60]);o(this,"_topOffsetRange",[0,85]);o(this,"_slotType","text");this._shadow=this.attachShadow({mode:"closed"});const e=document.createElement("style");e.textContent=g,this._shadow.appendChild(e),this._sparklesBox=document.createElement("div"),this._sparklesBox.className="sparkles-box";const t=document.createElement("slot");t.setAttribute("class","slot"),this._sparklesBox.appendChild(t),this._shadow.appendChild(this._sparklesBox),this._randomColors=this.getAttribute("colors")?this.getAttribute("colors").split(",").map(l=>l.trim()):void 0;const s=this.getAttribute("left-offset-range")?this.getAttribute("left-offset-range").split(",").map(l=>Number(l.trim())):[-15,60];this._leftOffsetRange=s.length===2?s:[-10,60];const h=this.getAttribute("top-offset-range")?this.getAttribute("top-offset-range").split(",").map(l=>Number(l.trim())):[-15,60];if(this._topOffsetRange=h.length===2?h:[0,85],this._minDelay=this.getAttribute("min-delay")?Number(this.getAttribute("min-delay")):300,this._maxDelay=this.getAttribute("max-delay")?Number(this.getAttribute("max-delay"))<500?500:Number(this.getAttribute("max-delay")):800,this._slotType=this.getAttribute("slot-type")?this.getAttribute("slot-type"):"text",this._preferredReducedMotion){const l=this.getAttribute("init-num"),m=document.createDocumentFragment();this._sparkles=a(i(0,Number(l))).map(()=>u(this._preferredReducedMotion,this._randomColors)),this._sparkles.forEach(f=>{this.generateSparkle(f),m.appendChild(this.generateSparkle(f))}),this._sparklesBox.appendChild(m)}this.reCreate=this.reCreate.bind(this),this.mediaListener=this.mediaListener.bind(this)}generateSparkle(e){const t=document.createElement("span");return t.className="single-sparkle-box",t.innerHTML=``,t.style.color=e.style.color,t.style.top=e.style.top,t.style.left=e.style.left,t.style.zIndex=e.style.zIndex,t.id=e.id,t}mediaListener(e){if(e&&(this._preferredReducedMotion=!e.matches,this._preferredReducedMotion))return c(this.reCreate,this._timeId,null,null);this._preferredReducedMotion||c(this.reCreate,this._timeId,this._minDelay,this._maxDelay)}reCreate(){const e=u(!1,this._randomColors,this._slotType,this._leftOffsetRange,this._topOffsetRange),t=Date.now(),s=this._sparkles.filter(h=>{if(t-h.createdAta in s?b(s,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):s[a]=l;var o=(s,a,l)=>(w(s,typeof a!="symbol"?a+"":a,l),l);const s=(i,n)=>Math.floor(Math.random()*(n-i))+i;function a(i,n=void 0,e=1){const t=[];typeof n>"u"&&(n=i,i=0);for(let r=i;rwindow.matchMedia(i).matches,c=(i,n={timeId:null},e,t)=>{if(typeof e=="number"&&typeof t=="number"){const r=()=>{const h=s(e,t);n.timeId=window.setTimeout(()=>{i(),r()},h)};r()}else window.clearTimeout(n.timeId)},g=".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}",f=(i=!1,n=[],e,t)=>({id:String(s(1e4,99999)),createdAt:Date.now(),size:s(10,17),style:{color:n.length?n[s(0,n.length)]:void 0,top:`${s(e[0],e[1])}%`,left:`${s(t[0],e[1])}%`,zIndex:(i?1:s(1,8)).toString()}}),u="(prefers-reduced-motion: no-preference)";class y extends HTMLElement{constructor(){super();o(this,"_mediaQueryList",window.matchMedia(u));o(this,"_preferredReducedMotion",!_(u));o(this,"_sparklesBox");o(this,"_sparkles",[]);o(this,"_timeId",{timeId:null});o(this,"_shadow");o(this,"_randomColors");o(this,"_minDelay",300);o(this,"_maxDelay",800);o(this,"_leftOffsetRange",[-15,60]);o(this,"_topOffsetRange",[0,85]);this._shadow=this.attachShadow({mode:"closed"});const e=document.createElement("style");e.textContent=g,this._shadow.appendChild(e),this._sparklesBox=document.createElement("div"),this._sparklesBox.className="sparkles-box";const t=document.createElement("slot");t.setAttribute("class","slot"),this._sparklesBox.appendChild(t),this._shadow.appendChild(this._sparklesBox),this._randomColors=this.getAttribute("colors")?this.getAttribute("colors").split(",").map(d=>d.trim()):void 0;const r=this.getAttribute("left-offset-range")?this.getAttribute("left-offset-range").split(",").map(d=>d.trim()):[-15,60];this._leftOffsetRange=r.length===2?r:[-10,60];const h=this.getAttribute("top-offset-range")?this.getAttribute("top-offset-range").split(",").map(d=>d.trim()):[-15,60];if(this._topOffsetRange=h.length===2?h:[0,85],this._minDelay=this.getAttribute("min-delay")?Number(this.getAttribute("min-delay")):300,this._maxDelay=this.getAttribute("max-delay")?Number(this.getAttribute("max-delay"))<600?600:Number(this.getAttribute("max-delay")):800,this._preferredReducedMotion){const d=this.getAttribute("init-num"),m=document.createDocumentFragment();this._sparkles=a(s(0,Number(d))).map(()=>f(this._preferredReducedMotion,this._randomColors)),this._sparkles.forEach(p=>{this.generateSparkle(p),m.appendChild(this.generateSparkle(p))}),this._sparklesBox.appendChild(m)}this.reCreate=this.reCreate.bind(this),this.mediaListener=this.mediaListener.bind(this)}generateSparkle(e){const t=document.createElement("span");return t.className="single-sparkle-box",t.innerHTML=``,t.style.color=e.style.color,t.style.top=e.style.top,t.style.left=e.style.left,t.style.zIndex=e.style.zIndex,t.id=e.id,t}mediaListener(e){if(e&&(this._preferredReducedMotion=!e.matches,this._preferredReducedMotion))return c(this.reCreate,this._timeId,null,null);this._preferredReducedMotion||c(this.reCreate,this._timeId,this._minDelay,this._maxDelay)}reCreate(){const e=f(!1,this._randomColors,this._leftOffsetRange,this._topOffsetRange),t=Date.now(),r=this._sparkles.filter(h=>{if(t-h.createdAta in s?b(s,a,{enumerable:!0,configurable:!0,writable:!0,value:d}):s[a]=d;var o=(s,a,d)=>(w(s,typeof a!="symbol"?a+"":a,d),d);const s=(n,r)=>Math.floor(Math.random()*(r-n))+n;function a(n,r=void 0,e=1){const t=[];typeof r>"u"&&(r=n,n=0);for(let i=n;iwindow.matchMedia(n).matches,c=(n,r={timeId:null},e,t)=>{if(typeof e=="number"&&typeof t=="number"){const i=()=>{const h=s(e,t);r.timeId=window.setTimeout(()=>{n(),i()},h)};i()}else window.clearTimeout(r.timeId)},g=".sparkles-box{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer}.single-sparkle-box{position:absolute;transform:translate3d(-50%,-50%,0);color:orange;pointer-events:none}.slot{position:relative;z-index:5}@media (prefers-reduced-motion: no-preference){.single-sparkle-box{animation:comeInout .6s ease-in-out forwards}.single-sparkle-box svg{animation:spin .6s ease-in-out forwards}}@keyframes comeInout{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}",u=(n=!1,r=[],e="text",t,i)=>({id:String(s(1e4,99999)),createdAt:Date.now(),size:s(10,17),style:{color:r.length?r[s(0,r.length)]:void 0,top:`${s(i[0],i[1])}%`,left:`${s(t[0],t[1])}%`,zIndex:(e==="text"?n?1:s(1,8):6).toString()}}),f="(prefers-reduced-motion: no-preference)";class y extends HTMLElement{constructor(){super();o(this,"_mediaQueryList",window.matchMedia(f));o(this,"_preferredReducedMotion",!_(f));o(this,"_sparklesBox");o(this,"_sparkles",[]);o(this,"_timeId",{timeId:null});o(this,"_shadow");o(this,"_randomColors");o(this,"_minDelay",300);o(this,"_maxDelay",800);o(this,"_leftOffsetRange",[-15,60]);o(this,"_topOffsetRange",[0,85]);o(this,"_slotType","text");this._shadow=this.attachShadow({mode:"closed"});const e=document.createElement("style");e.textContent=g,this._shadow.appendChild(e),this._sparklesBox=document.createElement("div"),this._sparklesBox.className="sparkles-box";const t=document.createElement("slot");t.setAttribute("class","slot"),this._sparklesBox.appendChild(t),this._shadow.appendChild(this._sparklesBox),this._randomColors=this.getAttribute("colors")?this.getAttribute("colors").split(",").map(l=>l.trim()):void 0;const i=this.getAttribute("left-offset-range")?this.getAttribute("left-offset-range").split(",").map(l=>Number(l.trim())):[-15,60];this._leftOffsetRange=i.length===2?i:[-10,60];const h=this.getAttribute("top-offset-range")?this.getAttribute("top-offset-range").split(",").map(l=>Number(l.trim())):[-15,60];if(this._topOffsetRange=h.length===2?h:[0,85],this._minDelay=this.getAttribute("min-delay")?Number(this.getAttribute("min-delay")):300,this._maxDelay=this.getAttribute("max-delay")?Number(this.getAttribute("max-delay"))<500?500:Number(this.getAttribute("max-delay")):800,this._slotType=this.getAttribute("slot-type")?this.getAttribute("slot-type"):"text",this._preferredReducedMotion){const l=this.getAttribute("init-num"),m=document.createDocumentFragment();this._sparkles=a(s(0,Number(l))).map(()=>u(this._preferredReducedMotion,this._randomColors)),this._sparkles.forEach(p=>{this.generateSparkle(p),m.appendChild(this.generateSparkle(p))}),this._sparklesBox.appendChild(m)}this.reCreate=this.reCreate.bind(this),this.mediaListener=this.mediaListener.bind(this)}generateSparkle(e){const t=document.createElement("span");return t.className="single-sparkle-box",t.innerHTML=``,t.style.color=e.style.color,t.style.top=e.style.top,t.style.left=e.style.left,t.style.zIndex=e.style.zIndex,t.id=e.id,t}mediaListener(e){if(e&&(this._preferredReducedMotion=!e.matches,this._preferredReducedMotion))return c(this.reCreate,this._timeId,null,null);this._preferredReducedMotion||c(this.reCreate,this._timeId,this._minDelay,this._maxDelay)}reCreate(){const e=u(!1,this._randomColors,this._slotType,this._leftOffsetRange,this._topOffsetRange),t=Date.now(),i=this._sparkles.filter(h=>{if(t-h.createdAt 我是一段闪闪发光的文字✨ - + - + - +