Skip to content

Commit 4c02a22

Browse files
fastenderfastender
authored
Update fast-search-card.js
1 parent 4531b50 commit 4c02a22

File tree

1 file changed

+141
-157
lines changed

1 file changed

+141
-157
lines changed

‎dist/fast-search-card.js‎

Lines changed: 141 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -7418,26 +7418,19 @@ class FastSearchCard extends HTMLElement {
74187418
}
74197419
}
74207420

7421-
showTimeSelection(item, action, container) {
7422-
console.log(`⏰ Zeige Time Selection für ${action} - aufgerufen von:`, new Error().stack);
7423-
7424-
if (this.isTimeSelectionOpen) {
7425-
console.log('⚠️ Time Selection bereits offen - ignoriere');
7426-
return;
7427-
}
7428-
7421+
showTimeSelection(item, action, container, animate = true) {
7422+
console.log(`⏰ Zeige Time Selection für ${action} - animate: ${animate}`);
7423+
74297424
let timeSelectionContainer = container.querySelector('.timer-time-selection');
74307425
if (!timeSelectionContainer) {
74317426
timeSelectionContainer = document.createElement('div');
74327427
timeSelectionContainer.className = 'timer-time-selection';
7433-
timeSelectionContainer.setAttribute('data-is-open', 'false');
7434-
container.appendChild(timeSelectionContainer);
7428+
7429+
// WICHTIG: Panel wird jetzt VOR den Timer-Controls eingefügt (oberste Position)
7430+
const timerControlDesign = container.querySelector('.timer-control-design');
7431+
container.insertBefore(timeSelectionContainer, timerControlDesign);
74357432
}
74367433

7437-
timeSelectionContainer.style.maxHeight = '0px';
7438-
timeSelectionContainer.style.opacity = '0';
7439-
timeSelectionContainer.style.overflow = 'hidden';
7440-
74417434
timeSelectionContainer.innerHTML = `
74427435
<div class="time-selection-header">
74437436
<div class="selected-action-display">
@@ -7447,7 +7440,7 @@ class FastSearchCard extends HTMLElement {
74477440
</div>
74487441
74497442
<div class="time-picker-container">
7450-
<div class="time-picker-wheel">
7443+
<div class="time-picker-wheel">
74517444
<div class="time-input-group">
74527445
<input type="number" class="time-input hours" min="0" max="23" value="0" data-type="hours">
74537446
<label class="time-label">Std</label>
@@ -7473,11 +7466,14 @@ class FastSearchCard extends HTMLElement {
74737466
</div>
74747467
`;
74757468

7476-
requestAnimationFrame(() => {
7469+
// Animation nur ausführen, wenn gewünscht
7470+
if (animate) {
74777471
requestAnimationFrame(() => {
7478-
this.expandTimeSelection(timeSelectionContainer, container);
7472+
requestAnimationFrame(() => {
7473+
this.expandTimeSelection(timeSelectionContainer, container);
7474+
});
74797475
});
7480-
});
7476+
}
74817477

74827478
this.setupTimeSelectionEvents(item, action, timeSelectionContainer, container);
74837479
}
@@ -7491,42 +7487,18 @@ class FastSearchCard extends HTMLElement {
74917487
};
74927488
return labels[action] || action;
74937489
}
7494-
7490+
74957491
expandTimeSelection(timeContainer, parentContainer) {
7496-
console.log('🎬 Expanding Time Selection - Start');
7497-
7498-
// Startwerte setzen
7499-
timeContainer.style.maxHeight = '0px';
7500-
timeContainer.style.opacity = '0';
7501-
timeContainer.style.overflow = 'hidden';
7502-
timeContainer.style.transition = 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
7492+
console.log('🎬 Expanding Time Selection - NEW VERSION');
75037493

7504-
// Nach kurzer Verzögerung zu Zielwerten wechseln
7505-
requestAnimationFrame(() => {
7506-
requestAnimationFrame(() => {
7507-
console.log('🎬 Setze Zielwerte');
7508-
timeContainer.style.maxHeight = '400px';
7509-
timeContainer.style.opacity = '1';
7510-
timeContainer.style.transform = 'translateY(0)';
7511-
});
7512-
});
7494+
// Für die neue Version wird diese Methode vereinfacht,
7495+
// da die Hauptanimation bereits in startTimerOpenSequence stattfindet
7496+
timeContainer.style.maxHeight = 'none'; // Keine Höhenbeschränkung
7497+
timeContainer.style.opacity = '1';
7498+
timeContainer.style.overflow = 'visible';
75137499

7514-
// Unterelemente animieren
7515-
setTimeout(() => {
7516-
const elements = timeContainer.querySelectorAll('.time-picker-wheel > *, .quick-time-buttons, .timer-create-actions');
7517-
console.log('🎭 Animiere', elements.length, 'Unterelemente');
7518-
7519-
elements.forEach((el, index) => {
7520-
el.style.opacity = '0';
7521-
el.style.transform = 'translateY(10px)';
7522-
el.style.transition = `all 0.3s ease ${index * 50}ms`;
7523-
7524-
setTimeout(() => {
7525-
el.style.opacity = '1';
7526-
el.style.transform = 'translateY(0)';
7527-
}, 100);
7528-
});
7529-
}, 200);
7500+
// Kaskadierende Animation der Inhalte
7501+
this.animateTimeSelectionContents(timeContainer);
75307502
}
75317503

75327504
setupTimeSelectionEvents(item, action, timeContainer, parentContainer) {
@@ -7641,57 +7613,63 @@ class FastSearchCard extends HTMLElement {
76417613
}
76427614

76437615
resetToInitialTimerState(container) {
7644-
console.log('🔄 Reset to initial timer state');
7645-
this.isTimeSelectionOpen = false; // ← State zurücksetzen
7646-
7616+
console.log('🔄 Reset to initial timer state (NEW - Simultaneous)');
7617+
this.isTimeSelectionOpen = false;
7618+
76477619
const timeSelectionContainer = container.querySelector('.timer-time-selection');
76487620
const activeTimersSection = container.querySelector('.active-timers');
76497621
const timerControlDesign = container.querySelector('.timer-control-design');
7650-
7651-
// 1. Time Selection ausblenden und entfernen
7652-
if (timeSelectionContainer) {
7653-
timeSelectionContainer.animate([
7654-
{ opacity: 1, transform: timeSelectionContainer.style.transform || 'translateY(0)' },
7655-
{ opacity: 0, transform: 'translateY(20px)' }
7656-
], {
7657-
duration: 300,
7658-
fill: 'forwards'
7659-
}).finished.then(() => {
7622+
7623+
// 1. Zeitwahl-Panel ausblenden und entfernen
7624+
const fadeOutTimeSelection = timeSelectionContainer ? timeSelectionContainer.animate([
7625+
{ opacity: 1, transform: 'translateY(0)' },
7626+
{ opacity: 0, transform: 'translateY(-20px)' }
7627+
], {
7628+
duration: 300,
7629+
fill: 'forwards',
7630+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
7631+
}).finished : Promise.resolve();
7632+
7633+
fadeOutTimeSelection.then(() => {
7634+
// Panel entfernen
7635+
if (timeSelectionContainer) {
76607636
timeSelectionContainer.remove();
7661-
});
7662-
}
7663-
7664-
// 2. Timer Control Design zurück zur ursprünglichen Position
7665-
if (timerControlDesign) {
7666-
setTimeout(() => {
7667-
timerControlDesign.animate([
7668-
{ transform: timerControlDesign.style.transform || 'translateY(0)' },
7669-
{ transform: 'translateY(0)' }
7670-
], {
7671-
duration: 400,
7672-
fill: 'forwards',
7673-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
7637+
}
7638+
7639+
// 2. Timer-Liste und Steuerung GLEICHZEITIG wieder einblenden
7640+
const fadeInAnimations = [];
7641+
7642+
if (activeTimersSection) {
7643+
const fadeInTimers = activeTimersSection.animate([
7644+
{ opacity: 0, transform: 'translateY(-20px)' },
7645+
{ opacity: 1, transform: 'translateY(0)' }
7646+
], {
7647+
duration: 400,
7648+
fill: 'forwards',
7649+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
76747650
});
7675-
}, 100);
7676-
}
7677-
7678-
// 3. Active Timers wieder einblenden
7679-
if (activeTimersSection) {
7680-
setTimeout(() => {
7681-
activeTimersSection.animate([
7651+
fadeInAnimations.push(fadeInTimers);
7652+
}
7653+
7654+
if (timerControlDesign) {
7655+
const fadeInControls = timerControlDesign.animate([
76827656
{ opacity: 0, transform: 'translateY(-20px)' },
76837657
{ opacity: 1, transform: 'translateY(0)' }
7684-
], {
7685-
duration: 400,
7686-
fill: 'forwards',
7687-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
7658+
], {
7659+
duration: 400,
7660+
fill: 'forwards',
7661+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
76887662
});
7689-
}, 200);
7690-
}
7691-
7692-
// 4. Button-States zurücksetzen
7693-
const timerPresets = container.querySelectorAll('.timer-control-preset');
7694-
timerPresets.forEach(p => p.classList.remove('active'));
7663+
fadeInAnimations.push(fadeInControls);
7664+
}
7665+
7666+
// 3. Button-States zurücksetzen nach Animations-Ende
7667+
Promise.all(fadeInAnimations.map(anim => anim.finished)).then(() => {
7668+
const timerPresets = container.querySelectorAll('.timer-control-preset');
7669+
timerPresets.forEach(p => p.classList.remove('active'));
7670+
console.log('✅ Reset complete - all elements restored');
7671+
});
7672+
});
76957673
}
76967674

76977675
async createTimerFromSelection(item, action, durationMinutes, timeContainer, parentContainer) {
@@ -10151,80 +10129,86 @@ class FastSearchCard extends HTMLElement {
1015110129
}
1015210130

1015310131
startTimerOpenSequence(item, action, container) {
10154-
console.log('🎬 Starting Timer Open Sequence');
10155-
10132+
console.log('🎬 Starting NEW Timer Open Sequence - Simultaneous fade');
10133+
this.isTimeSelectionOpen = true; // Zustand sofort setzen
10134+
1015610135
const activeTimersSection = container.querySelector('.active-timers');
1015710136
const timerControlDesign = container.querySelector('.timer-control-design');
10158-
10137+
1015910138
console.log('🔍 Elements found:', {
1016010139
activeTimersSection: !!activeTimersSection,
10161-
timerControlDesign: !!timerControlDesign,
10162-
activeTimersHeight: activeTimersSection?.offsetHeight
10163-
});
10164-
10165-
// Animation 1: Active Timers ausblenden
10166-
const fadeOutPromise = activeTimersSection ?
10167-
activeTimersSection.animate([
10168-
{ opacity: 1, transform: 'translateY(0)' },
10169-
{ opacity: 0, transform: 'translateY(-20px)' }
10170-
], {
10171-
duration: 300,
10172-
fill: 'forwards',
10173-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
10174-
}).finished : Promise.resolve();
10175-
10176-
console.log('🎭 fadeOutPromise erstellt, starte .then()');
10177-
10178-
// Animation 2: Timer Control nach oben (NACH Animation 1)
10179-
fadeOutPromise.then(() => {
10180-
console.log('🔄 fadeOutPromise beendet - bewege Timer Control nach oben');
10181-
10182-
if (timerControlDesign && activeTimersSection) {
10183-
const activeSectionHeight = activeTimersSection.offsetHeight;
10184-
10185-
// ✅ ANGEPASST: Weniger Bewegung für besseren Abstand
10186-
const moveDistance = activeSectionHeight;
10187-
10188-
console.log(`📏 Active Timers Höhe: ${activeSectionHeight}px`);
10189-
console.log(`🔄 Bewege Timer Control um ${moveDistance}px nach oben`);
10190-
10191-
const moveUpPromise = timerControlDesign.animate([
10192-
{ transform: 'translateY(0)' },
10193-
{ transform: `translateY(-${moveDistance}px)` }
10140+
timerControlDesign: !!timerControlDesign
10141+
});
10142+
10143+
// Animation 1: Timer-Liste und Steuerungs-Buttons GLEICHZEITIG ausblenden
10144+
const fadeOutTimers = activeTimersSection ? activeTimersSection.animate([
10145+
{ opacity: 1, transform: 'translateY(0)' },
10146+
{ opacity: 0, transform: 'translateY(-20px)' }
10147+
], {
10148+
duration: 300,
10149+
fill: 'forwards',
10150+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
10151+
}) : null;
10152+
10153+
const fadeOutControls = timerControlDesign ? timerControlDesign.animate([
10154+
{ opacity: 1, transform: 'translateY(0)' },
10155+
{ opacity: 0, transform: 'translateY(-20px)' }
10156+
], {
10157+
duration: 300,
10158+
fill: 'forwards',
10159+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
10160+
}) : null;
10161+
10162+
// Erstelle das Zeitwahl-Panel sofort, aber halte es unsichtbar
10163+
this.showTimeSelection(item, action, container, false); // false = keine sofortige Animation
10164+
const timeSelectionContainer = container.querySelector('.timer-time-selection');
10165+
10166+
if (timeSelectionContainer) {
10167+
timeSelectionContainer.style.opacity = '0';
10168+
timeSelectionContainer.style.transform = 'translateY(-20px)';
10169+
}
10170+
10171+
// Animation 2: Zeitwahl-Panel einblenden nach gleichzeitigem Ausblenden
10172+
const animations = [fadeOutTimers?.finished, fadeOutControls?.finished].filter(Boolean);
10173+
10174+
Promise.all(animations).then(() => {
10175+
console.log('✅ Simultaneous fade-out complete. Starting time selection fade-in.');
10176+
if (timeSelectionContainer) {
10177+
// Sofortiges Einblenden des Zeitwahl-Panels an oberster Position
10178+
timeSelectionContainer.animate([
10179+
{ opacity: 0, transform: 'translateY(-20px)' },
10180+
{ opacity: 1, transform: 'translateY(0)' }
1019410181
], {
1019510182
duration: 400,
1019610183
fill: 'forwards',
1019710184
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
10198-
}).finished;
10199-
10200-
// Animation 3: Time Selection einblenden UND nach oben bewegen (NACH Animation 2)
10201-
moveUpPromise.then(() => {
10202-
console.log('⏰ moveUpPromise beendet - zeige Time Selection');
10203-
this.showTimeSelection(item, action, container);
10204-
this.isTimeSelectionOpen = true;
10205-
10206-
// ✅ NEU: Time Selection auch nach oben bewegen
10207-
setTimeout(() => {
10208-
const timeSelectionContainer = container.querySelector('.timer-time-selection');
10209-
if (timeSelectionContainer && activeTimersSection) {
10210-
const moveDistance = activeTimersSection.offsetHeight;
10211-
10212-
console.log('🎯 Bewege auch Time Selection nach oben um:', moveDistance, 'px');
10213-
10214-
timeSelectionContainer.animate([
10215-
{ transform: 'translateY(0)' },
10216-
{ transform: `translateY(-${moveDistance}px)` }
10217-
], {
10218-
duration: 400,
10219-
fill: 'forwards',
10220-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
10221-
});
10222-
}
10223-
}, 100);
10185+
}).finished.then(() => {
10186+
// Kaskadierende Animation der Inhalte
10187+
this.animateTimeSelectionContents(timeSelectionContainer);
1022410188
});
1022510189
}
1022610190
}).catch(error => {
10227-
console.error('❌ Fehler in fadeOutPromise:', error);
10191+
console.error('❌ Fehler in simultaneous fade-out:', error);
10192+
});
10193+
}
10194+
10195+
animateTimeSelectionContents(timeSelectionContainer) {
10196+
console.log('🎭 Animating time selection contents');
10197+
10198+
const animatableElements = timeSelectionContainer.querySelectorAll(
10199+
'.time-selection-header, .time-picker-container, .quick-time-buttons, .timer-create-actions'
10200+
);
10201+
10202+
animatableElements.forEach((el, index) => {
10203+
el.style.opacity = '0';
10204+
el.style.transform = 'translateY(10px)';
10205+
el.style.transition = `all 0.3s cubic-bezier(0.16, 1, 0.3, 1) ${index * 50}ms`;
10206+
10207+
// Trigger animation
10208+
requestAnimationFrame(() => {
10209+
el.style.opacity = '1';
10210+
el.style.transform = 'translateY(0)';
10211+
});
1022810212
});
1022910213
}
1023010214

0 commit comments

Comments
 (0)