Skip to content

Commit

Permalink
add Sparkles prop: slot-type
Browse files Browse the repository at this point in the history
  • Loading branch information
@AeroWang
AeroWang committed Nov 30, 2023
1 parent eabd719 commit 52b18b7
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 43 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` 标签末尾插入 `<script src="a_sparkles.iife.js"></script>`
Expand Down
7 changes: 5 additions & 2 deletions components/Sparkles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import sparklesStyles from './sparkles.less?inline';
const generateSparkleConfig = (
preferredReducedMotion = false,
randomColorList = [],
slotType = 'text',
leftOffsetRange,
topOffsetRange,
) => {
Expand All @@ -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()
}
};
};
Expand All @@ -38,6 +39,7 @@ class Sparkles extends HTMLElement {
_maxDelay = 800;
_leftOffsetRange = [-15, 60];
_topOffsetRange = [0, 85];
_slotType = 'text';

constructor () {
super();
Expand All @@ -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');
Expand Down Expand Up @@ -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;
Expand Down
70 changes: 34 additions & 36 deletions dist/components/a_sparkles.es.js
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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));
Expand All @@ -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 = `<svg xmlns="http://www.w3.org/2000/svg" width="${e.size}" height="${e.size}" viewBox="0 0 160 160" fill="none"><path fill="currentColor" d="M80 0s4.285 41.292 21.496 58.504C118.707 75.715 160 80 160 80s-41.293 4.285-58.504 21.496S80 160 80 160s-4.285-41.293-21.496-58.504C41.292 84.285 0 80 0 80s41.292-4.285 58.504-21.496C75.715 41.292 80 0 80 0z"></path></svg>`, 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 = `<svg xmlns="http://www.w3.org/2000/svg" width="${e.size}" height="${e.size}" viewBox="0 0 160 160" fill="none"><path fill="currentColor" d="M80 0s4.285 41.292 21.496 58.504C118.707 75.715 160 80 160 80s-41.293 4.285-58.504 21.496S80 160 80 160s-4.285-41.293-21.496-58.504C41.292 84.285 0 80 0 80s41.292-4.285 58.504-21.496C75.715 41.292 80 0 80 0z"></path></svg>`, 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))
Expand All @@ -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);
Expand Down
Loading

0 comments on commit 52b18b7

Please sign in to comment.