Skip to content

Commit 5b0dc04

Browse files
zesamerizesameri
committed
debugging
1 parent 19944e1 commit 5b0dc04

File tree

1 file changed

+190
-9
lines changed

1 file changed

+190
-9
lines changed

‎js/footer-delay.js‎

Lines changed: 190 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,31 @@ function initFooterDelay() {
99
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
1010

1111
if (!isMobile) {
12-
console.log('Desktop detected - no delay needed');
12+
// Show desktop indicator
13+
const desktopIndicator = document.createElement('div');
14+
desktopIndicator.innerHTML = '🖥️ Desktop - no delay';
15+
desktopIndicator.style.cssText = `
16+
position: fixed;
17+
top: 10px;
18+
right: 10px;
19+
background: rgba(0,100,0,0.8);
20+
color: white;
21+
padding: 8px 12px;
22+
border-radius: 4px;
23+
font-size: 12px;
24+
z-index: 9999;
25+
font-family: monospace;
26+
`;
27+
document.body.appendChild(desktopIndicator);
28+
setTimeout(() => {
29+
if (desktopIndicator.parentNode) {
30+
desktopIndicator.parentNode.removeChild(desktopIndicator);
31+
}
32+
}, 2000);
1333
return;
1434
}
1535

16-
console.log('Mobile detected - footer delay enabled');
17-
18-
// Add visual debug indicator
36+
// Add visual debug indicator for mobile
1937
const debugIndicator = document.createElement('div');
2038
debugIndicator.innerHTML = '📱 Mobile delay active';
2139
debugIndicator.style.cssText = `
@@ -40,26 +58,189 @@ function initFooterDelay() {
4058
}, 3000);
4159

4260
const footerLinks = document.querySelectorAll('.footer a[href]');
43-
console.log('Found footer links:', footerLinks.length);
61+
62+
// Show footer links count
63+
const linksIndicator = document.createElement('div');
64+
linksIndicator.innerHTML = `🔗 Found ${footerLinks.length} footer links`;
65+
linksIndicator.style.cssText = `
66+
position: fixed;
67+
top: 50px;
68+
right: 10px;
69+
background: rgba(0,0,100,0.8);
70+
color: white;
71+
padding: 8px 12px;
72+
border-radius: 4px;
73+
font-size: 12px;
74+
z-index: 9999;
75+
font-family: monospace;
76+
`;
77+
document.body.appendChild(linksIndicator);
78+
setTimeout(() => {
79+
if (linksIndicator.parentNode) {
80+
linksIndicator.parentNode.removeChild(linksIndicator);
81+
}
82+
}, 2000);
4483

4584
footerLinks.forEach(link => {
4685
link.addEventListener('click', function(e) {
47-
console.log('Footer link clicked:', this.getAttribute('href'));
86+
// Show click indicator
87+
const clickIndicator = document.createElement('div');
88+
clickIndicator.innerHTML = `👆 Clicked: ${this.getAttribute('href')}`;
89+
clickIndicator.style.cssText = `
90+
position: fixed;
91+
top: 90px;
92+
right: 10px;
93+
background: rgba(100,0,0,0.8);
94+
color: white;
95+
padding: 8px 12px;
96+
border-radius: 4px;
97+
font-size: 12px;
98+
z-index: 9999;
99+
font-family: monospace;
100+
`;
101+
document.body.appendChild(clickIndicator);
102+
setTimeout(() => {
103+
if (clickIndicator.parentNode) {
104+
clickIndicator.parentNode.removeChild(clickIndicator);
105+
}
106+
}, 1000);
48107

49108
// Don't delay if it's the same page or a hash link
50109
if (this.getAttribute('href').startsWith('#') ||
51110
this.getAttribute('href') === window.location.pathname) {
52-
console.log('Same page or hash link, no delay');
111+
const samePageIndicator = document.createElement('div');
112+
samePageIndicator.innerHTML = '🚫 Same page - no delay';
113+
samePageIndicator.style.cssText = `
114+
position: fixed;
115+
top: 130px;
116+
right: 10px;
117+
background: rgba(100,100,0,0.8);
118+
color: white;
119+
padding: 8px 12px;
120+
border-radius: 4px;
121+
font-size: 12px;
122+
z-index: 9999;
123+
font-family: monospace;
124+
`;
125+
document.body.appendChild(samePageIndicator);
126+
setTimeout(() => {
127+
if (samePageIndicator.parentNode) {
128+
samePageIndicator.parentNode.removeChild(samePageIndicator);
129+
}
130+
}, 1000);
53131
return;
54132
}
55133

56134
e.preventDefault();
57135
const href = this.getAttribute('href');
58-
console.log('Delaying navigation to:', href);
136+
137+
// Show delay indicator
138+
const delayIndicator = document.createElement('div');
139+
delayIndicator.innerHTML = `⏳ Delaying to: ${href}`;
140+
delayIndicator.style.cssText = `
141+
position: fixed;
142+
top: 130px;
143+
right: 10px;
144+
background: rgba(0,100,100,0.8);
145+
color: white;
146+
padding: 8px 12px;
147+
border-radius: 4px;
148+
font-size: 12px;
149+
z-index: 9999;
150+
font-family: monospace;
151+
`;
152+
document.body.appendChild(delayIndicator);
153+
154+
// Trigger crumple animation manually
155+
const crumple = document.querySelector('.crumple');
156+
const crumpleAfter = document.querySelector('.crumple:after');
157+
if (crumple) {
158+
crumple.style.zIndex = '0';
159+
160+
// Determine which animation to trigger based on link class
161+
const linkClass = this.className;
162+
let animationName = '';
163+
164+
if (linkClass.includes('footer__link--home')) {
165+
animationName = 'a';
166+
} else if (linkClass.includes('footer__link--github')) {
167+
animationName = 'b';
168+
} else if (linkClass.includes('footer__link--playlists')) {
169+
animationName = 'c';
170+
} else if (linkClass.includes('footer__link--instagram')) {
171+
animationName = 'f';
172+
} else if (linkClass.includes('footer__link--alhambra')) {
173+
animationName = 'd';
174+
} else if (linkClass.includes('footer__link--writings')) {
175+
animationName = 'e';
176+
}
177+
178+
if (animationName) {
179+
// Create a temporary style to trigger the animation
180+
const style = document.createElement('style');
181+
style.textContent = `
182+
.crumple:after {
183+
-webkit-animation: ${animationName} 1s .25s linear forwards;
184+
animation: ${animationName} 1s .25s linear forwards;
185+
}
186+
`;
187+
document.head.appendChild(style);
188+
189+
// Remove the style after animation completes
190+
setTimeout(() => {
191+
if (style.parentNode) {
192+
style.parentNode.removeChild(style);
193+
}
194+
}, 1500);
195+
196+
// Show animation indicator
197+
const animationIndicator = document.createElement('div');
198+
animationIndicator.innerHTML = `🎨 Animation: ${animationName}`;
199+
animationIndicator.style.cssText = `
200+
position: fixed;
201+
top: 170px;
202+
right: 10px;
203+
background: rgba(100,0,100,0.8);
204+
color: white;
205+
padding: 8px 12px;
206+
border-radius: 4px;
207+
font-size: 12px;
208+
z-index: 9999;
209+
font-family: monospace;
210+
`;
211+
document.body.appendChild(animationIndicator);
212+
setTimeout(() => {
213+
if (animationIndicator.parentNode) {
214+
animationIndicator.parentNode.removeChild(animationIndicator);
215+
}
216+
}, 1000);
217+
}
218+
}
59219

60220
// Add a small delay to show the crumple animation
61221
setTimeout(() => {
62-
console.log('Navigating to:', href);
222+
// Show navigation indicator
223+
const navIndicator = document.createElement('div');
224+
navIndicator.innerHTML = `🚀 Navigating to: ${href}`;
225+
navIndicator.style.cssText = `
226+
position: fixed;
227+
top: 210px;
228+
right: 10px;
229+
background: rgba(0,100,0,0.8);
230+
color: white;
231+
padding: 8px 12px;
232+
border-radius: 4px;
233+
font-size: 12px;
234+
z-index: 9999;
235+
font-family: monospace;
236+
`;
237+
document.body.appendChild(navIndicator);
238+
setTimeout(() => {
239+
if (navIndicator.parentNode) {
240+
navIndicator.parentNode.removeChild(navIndicator);
241+
}
242+
}, 500);
243+
63244
window.location.href = href;
64245
}, 800); // 800ms delay
65246
});

0 commit comments

Comments
 (0)