Skip to content

Commit 437a682

Browse files
fastenderfastender
authored
Update fast-search-card.js
1 parent 78b8e6d commit 437a682

File tree

1 file changed

+253
-0
lines changed

1 file changed

+253
-0
lines changed

‎dist/fast-search-card.js‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4588,9 +4588,89 @@ class FastSearchCard extends HTMLElement {
45884588
height: 24px;
45894589
transition: all 0.2s ease;
45904590
}
4591+
4592+
/* Spotlight Morphing Animation */
4593+
.spotlight-container {
4594+
position: absolute;
4595+
right: -200px;
4596+
top: 50%;
4597+
transform: translateY(-50%);
4598+
width: 200px;
4599+
height: 50px;
4600+
pointer-events: none;
4601+
opacity: 0;
4602+
transition: opacity 0.3s ease;
4603+
}
4604+
4605+
.spotlight-container.active {
4606+
opacity: 1;
4607+
}
4608+
4609+
.spotlight-svg {
4610+
width: 100%;
4611+
height: 100%;
4612+
}
4613+
4614+
.spotlight-blob {
4615+
fill: rgba(255, 255, 255, 0.3);
4616+
transition: all 0.1s ease;
4617+
}
4618+
4619+
/* Icon Overlay Container */
4620+
.spotlight-icons {
4621+
position: absolute;
4622+
right: -180px;
4623+
top: 50%;
4624+
transform: translateY(-50%);
4625+
display: flex;
4626+
gap: 8px;
4627+
opacity: 0;
4628+
pointer-events: none;
4629+
transition: opacity 0.5s ease 1.5s;
4630+
}
4631+
4632+
.spotlight-icons.visible {
4633+
opacity: 1;
4634+
pointer-events: auto;
4635+
}
4636+
4637+
.spotlight-icon {
4638+
width: 44px;
4639+
height: 44px;
4640+
background: rgba(255, 255, 255, 0.2);
4641+
backdrop-filter: blur(10px);
4642+
border: 1px solid rgba(255, 255, 255, 0.3);
4643+
border-radius: 50%;
4644+
display: flex;
4645+
align-items: center;
4646+
justify-content: center;
4647+
color: white;
4648+
font-size: 18px;
4649+
filter: blur(3px);
4650+
transform: scale(0.8);
4651+
transition: all 0.3s ease;
4652+
}
4653+
4654+
.spotlight-icon.sharp {
4655+
filter: blur(0px);
4656+
transform: scale(1);
4657+
}
4658+
45914659

45924660
</style>
45934661

4662+
<!-- Spotlight Gooey Effect SVG Filter -->
4663+
<svg style="position: absolute; width: 0; height: 0;">
4664+
<defs>
4665+
<filter id="spotlight-goo">
4666+
<feGaussianBlur stdDeviation="6"/>
4667+
<feComponentTransfer>
4668+
<feFuncA type="linear" slope="120" intercept="-40"/>
4669+
</feComponentTransfer>
4670+
</filter>
4671+
</defs>
4672+
</svg>
4673+
45944674
<div class="main-container">
45954675
<div class="search-row">
45964676
<div class="search-panel glass-panel">
@@ -4700,6 +4780,27 @@ class FastSearchCard extends HTMLElement {
47004780
</button>
47014781
</div>
47024782

4783+
<!-- Spotlight Animation Container -->
4784+
<div class="spotlight-container">
4785+
<svg class="spotlight-svg" viewBox="0 0 200 50">
4786+
<g filter="url(#spotlight-goo)">
4787+
<circle class="spotlight-blob blob-main" cx="40" cy="25" r="20"/>
4788+
<circle class="spotlight-blob blob-1" cx="70" cy="25" r="15"/>
4789+
<circle class="spotlight-blob blob-2" cx="95" cy="25" r="15"/>
4790+
<circle class="spotlight-blob blob-3" cx="120" cy="25" r="15"/>
4791+
<circle class="spotlight-blob blob-4" cx="145" cy="25" r="15"/>
4792+
</g>
4793+
</svg>
4794+
</div>
4795+
4796+
<!-- Spotlight Icons Overlay -->
4797+
<div class="spotlight-icons">
4798+
<div class="spotlight-icon">📁</div>
4799+
<div class="spotlight-icon">🏪</div>
4800+
<div class="spotlight-icon">🎭</div>
4801+
<div class="spotlight-icon">📄</div>
4802+
</div>
4803+
47034804

47044805
</div>
47054806

@@ -4961,6 +5062,9 @@ class FastSearchCard extends HTMLElement {
49615062
}
49625063
], { duration: 300, easing: 'ease-out' });
49635064
if (!this.isPanelExpanded) { this.expandPanel(); }
5065+
5066+
// Spotlight Animation triggern
5067+
this.triggerSpotlightAnimation();
49645068
}
49655069

49665070
clearSearch() {
@@ -4976,6 +5080,9 @@ class FastSearchCard extends HTMLElement {
49765080
this.hasAnimated = false;
49775081
this.showCurrentCategoryItems();
49785082
searchInput.focus();
5083+
5084+
// Spotlight Animation zurücksetzen
5085+
this.resetSpotlightAnimation();
49795086
}
49805087

49815088
toggleCategoryButtons() {
@@ -15224,7 +15331,153 @@ class FastSearchCard extends HTMLElement {
1522415331
}
1522515332
}
1522615333

15334+
// Spotlight Animation Methods
15335+
triggerSpotlightAnimation() {
15336+
const container = this.shadowRoot.querySelector('.spotlight-container');
15337+
const icons = this.shadowRoot.querySelector('.spotlight-icons');
15338+
15339+
if (!container || !icons) return;
15340+
15341+
// Phase 1: Container sichtbar machen
15342+
container.classList.add('active');
15343+
15344+
// Phase 2: Blob Animation starten
15345+
this.startBlobMorphing();
15346+
15347+
// Phase 3: Nach 1.5s Icons einblenden
15348+
setTimeout(() => {
15349+
this.showSpotlightIcons();
15350+
}, 1500);
15351+
}
15352+
15353+
startBlobMorphing() {
15354+
const blobs = this.shadowRoot.querySelectorAll('.spotlight-blob');
15355+
15356+
// Animation Keyframes für jeden Blob
15357+
const animations = [
15358+
// Blob Main - wächst und bewegt sich
15359+
{
15360+
element: blobs[0], // blob-main
15361+
keyframes: [
15362+
{ cx: '40', cy: '25', r: '20' },
15363+
{ cx: '60', cy: '25', r: '25' },
15364+
{ cx: '70', cy: '25', r: '18' }
15365+
]
15366+
},
15367+
// Blob 1 - erscheint und trennt sich
15368+
{
15369+
element: blobs[1], // blob-1
15370+
keyframes: [
15371+
{ cx: '70', cy: '25', r: '0' },
15372+
{ cx: '70', cy: '25', r: '15' },
15373+
{ cx: '85', cy: '25', r: '15' }
15374+
]
15375+
},
15376+
// Blob 2 - erscheint zeitversetzt
15377+
{
15378+
element: blobs[2], // blob-2
15379+
keyframes: [
15380+
{ cx: '95', cy: '25', r: '0' },
15381+
{ cx: '95', cy: '25', r: '0' },
15382+
{ cx: '110', cy: '25', r: '15' }
15383+
]
15384+
},
15385+
// Blob 3 - erscheint zeitversetzt
15386+
{
15387+
element: blobs[3], // blob-3
15388+
keyframes: [
15389+
{ cx: '120', cy: '25', r: '0' },
15390+
{ cx: '120', cy: '25', r: '0' },
15391+
{ cx: '135', cy: '25', r: '15' }
15392+
]
15393+
},
15394+
// Blob 4 - erscheint als letztes
15395+
{
15396+
element: blobs[4], // blob-4
15397+
keyframes: [
15398+
{ cx: '145', cy: '25', r: '0' },
15399+
{ cx: '145', cy: '25', r: '0' },
15400+
{ cx: '160', cy: '25', r: '15' }
15401+
]
15402+
}
15403+
];
15404+
15405+
// Animationen starten
15406+
animations.forEach((anim, index) => {
15407+
if (anim.element) {
15408+
this.animateBlob(anim.element, anim.keyframes, index * 200);
15409+
}
15410+
});
15411+
}
15412+
15413+
animateBlob(element, keyframes, delay = 0) {
15414+
setTimeout(() => {
15415+
keyframes.forEach((frame, frameIndex) => {
15416+
setTimeout(() => {
15417+
element.setAttribute('cx', frame.cx);
15418+
element.setAttribute('cy', frame.cy);
15419+
element.setAttribute('r', frame.r);
15420+
}, frameIndex * 300);
15421+
});
15422+
}, delay);
15423+
}
1522715424

15425+
resetSpotlightAnimation() {
15426+
const container = this.shadowRoot.querySelector('.spotlight-container');
15427+
const icons = this.shadowRoot.querySelector('.spotlight-icons');
15428+
const iconElements = this.shadowRoot.querySelectorAll('.spotlight-icon');
15429+
const blobs = this.shadowRoot.querySelectorAll('.spotlight-blob');
15430+
15431+
if (container) container.classList.remove('active');
15432+
if (icons) icons.classList.remove('visible');
15433+
15434+
// Icons zurücksetzen
15435+
iconElements.forEach(icon => {
15436+
icon.classList.remove('sharp');
15437+
});
15438+
15439+
// Blobs in Ausgangsposition
15440+
if (blobs[0]) { // blob-main
15441+
blobs[0].setAttribute('cx', '40');
15442+
blobs[0].setAttribute('cy', '25');
15443+
blobs[0].setAttribute('r', '20');
15444+
}
15445+
if (blobs[1]) { // blob-1
15446+
blobs[1].setAttribute('cx', '70');
15447+
blobs[1].setAttribute('cy', '25');
15448+
blobs[1].setAttribute('r', '15');
15449+
}
15450+
if (blobs[2]) { // blob-2
15451+
blobs[2].setAttribute('cx', '95');
15452+
blobs[2].setAttribute('cy', '25');
15453+
blobs[2].setAttribute('r', '15');
15454+
}
15455+
if (blobs[3]) { // blob-3
15456+
blobs[3].setAttribute('cx', '120');
15457+
blobs[3].setAttribute('cy', '25');
15458+
blobs[3].setAttribute('r', '15');
15459+
}
15460+
if (blobs[4]) { // blob-4
15461+
blobs[4].setAttribute('cx', '145');
15462+
blobs[4].setAttribute('cy', '25');
15463+
blobs[4].setAttribute('r', '15');
15464+
}
15465+
}
15466+
15467+
showSpotlightIcons() {
15468+
const icons = this.shadowRoot.querySelector('.spotlight-icons');
15469+
const iconElements = this.shadowRoot.querySelectorAll('.spotlight-icon');
15470+
15471+
icons.classList.add('visible');
15472+
15473+
// Icons nacheinander scharf stellen
15474+
iconElements.forEach((icon, index) => {
15475+
setTimeout(() => {
15476+
icon.classList.add('sharp');
15477+
}, index * 100);
15478+
});
15479+
}
15480+
}
1522815481

1522915482

1523015483

0 commit comments

Comments
 (0)