Skip to content

Commit 09f5e64

Browse files
fastenderfastender
authored
Add files via upload
1 parent 8b193b8 commit 09f5e64

File tree

1 file changed

+2
-300
lines changed

1 file changed

+2
-300
lines changed

‎dist/fast-search-card.js‎

Lines changed: 2 additions & 300 deletions
Original file line numberDiff line numberDiff line change
@@ -4588,89 +4588,9 @@ 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-
46594591

46604592
</style>
46614593

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-
46744594
<div class="main-container">
46754595
<div class="search-row">
46764596
<div class="search-panel glass-panel">
@@ -4780,27 +4700,6 @@ class FastSearchCard extends HTMLElement {
47804700
</button>
47814701
</div>
47824702

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-
48044703

48054704
</div>
48064705

@@ -5062,9 +4961,6 @@ class FastSearchCard extends HTMLElement {
50624961
}
50634962
], { duration: 300, easing: 'ease-out' });
50644963
if (!this.isPanelExpanded) { this.expandPanel(); }
5065-
5066-
// Spotlight Animation triggern
5067-
this.triggerSpotlightAnimation();
50684964
}
50694965

50704966
clearSearch() {
@@ -5080,9 +4976,6 @@ class FastSearchCard extends HTMLElement {
50804976
this.hasAnimated = false;
50814977
this.showCurrentCategoryItems();
50824978
searchInput.focus();
5083-
5084-
// Spotlight Animation zurücksetzen
5085-
this.resetSpotlightAnimation();
50864979
}
50874980

50884981
toggleCategoryButtons() {
@@ -5095,7 +4988,7 @@ class FastSearchCard extends HTMLElement {
50954988

50964989
showCategoryButtons() {
50974990
this.collapsePanel(); // <-- HINZUGEFÜGTE ZEILE
5098-
4991+
50994992
// NEU: Search-Wrapper auf Mobile verstecken
51004993
if (this.isMobile()) {
51014994
const searchWrapper = this.shadowRoot.querySelector('.search-panel');
@@ -5107,9 +5000,7 @@ class FastSearchCard extends HTMLElement {
51075000
const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
51085001
this.isMenuView = true;
51095002
categoryButtons.classList.add('visible');
5110-
5111-
// Spotlight Animation für Category Buttons
5112-
this.triggerCategorySpotlightAnimation();
5003+
categoryButtons.animate([{ opacity: 0, transform: 'translateX(20px) scale(0.9)' }, { opacity: 1, transform: 'translateX(0) scale(1)' }], { duration: 400, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'forwards' });
51135004
}
51145005

51155006
hideCategoryButtons() {
@@ -15333,197 +15224,8 @@ class FastSearchCard extends HTMLElement {
1533315224
}
1533415225
}
1533515226

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

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

15483-
triggerCategorySpotlightAnimation() {
15484-
const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
15485-
const buttons = this.shadowRoot.querySelectorAll('.category-button');
15486-
15487-
// Spotlight-ähnliche Animation für die 5 Buttons
15488-
this.animateButtonsAsSpotlight(buttons);
15489-
}
15490-
15491-
animateButtonsAsSpotlight(buttons) {
15492-
// Phase 1: Alle Buttons unsichtbar machen
15493-
buttons.forEach(button => {
15494-
button.style.opacity = '0';
15495-
button.style.transform = 'scale(0.8)';
15496-
button.style.filter = 'blur(5px)';
15497-
});
15498-
15499-
// Phase 2: Gooey Blob-Effekt simulieren durch gestaffelte Erscheinung
15500-
buttons.forEach((button, index) => {
15501-
setTimeout(() => {
15502-
// Blob-ähnlicher Effekt
15503-
button.animate([
15504-
{
15505-
opacity: 0,
15506-
transform: 'scale(0.3) translateX(-20px)',
15507-
filter: 'blur(8px)'
15508-
},
15509-
{
15510-
opacity: 0.7,
15511-
transform: 'scale(1.2) translateX(0px)',
15512-
filter: 'blur(3px)'
15513-
},
15514-
{
15515-
opacity: 1,
15516-
transform: 'scale(1) translateX(0px)',
15517-
filter: 'blur(0px)'
15518-
}
15519-
], {
15520-
duration: 600,
15521-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
15522-
fill: 'forwards'
15523-
});
15524-
}, index * 150); // 150ms Verzögerung zwischen jedem Button
15525-
});
15526-
}
1552715229

1552815230

1552915231
}

0 commit comments

Comments
 (0)