diff --git a/website/main.js b/website/main.js index 7aa36d4..7234572 100644 --- a/website/main.js +++ b/website/main.js @@ -37,22 +37,16 @@ let lastMediaVolume = 1; // Define attachHoverListeners function function attachHoverListeners(postElement) { - // The base rotation is what was used for the loading animation. - // It's stored in the CSS custom property '--post-rotation'. const baseRotation = postElement.style.getPropertyValue('--post-rotation'); postElement.addEventListener('mouseenter', function () { postElement.style.zIndex = 100; - // Apply specific transition for this hover effect postElement.style.transition = "transform 0.22s cubic-bezier(.5,1.5,.5,1), box-shadow 0.22s cubic-bezier(.5,1.5,.5,1)"; - // Hover transform: new random rotation + scale postElement.style.transform = `rotate(${getRandomRotation()}deg) scale(1.1)`; }); postElement.addEventListener('mouseleave', function () { - // Apply specific transition for unhover postElement.style.transition = "transform 0.18s cubic-bezier(.5,0,.5,1), box-shadow 0.18s cubic-bezier(.5,0,.5,1)"; - // Return to base rotation + scale(1) postElement.style.transform = `rotate(${baseRotation || '0deg'}) scale(1)`; postElement.style.zIndex = 1; }); @@ -61,12 +55,9 @@ function attachHoverListeners(postElement) { function createPost(t) { const post = document.createElement("div"); post.className = "post"; - // Set initial transform. This will be used by addPostToLayout to set --post-rotation. post.style.transform = `rotate(${getRandomRotation()}deg)`; post.style.backgroundColor = getPostItColorByDate(t.createdAt); - // Hover listeners are now attached in addPostToLayout after the loading animation. - const link = document.createElement("a"); link.href = t.url; link.target = "_blank"; @@ -217,8 +208,6 @@ function createPost(t) { link.href = t.url; link.appendChild(post); - console.log(`[Main] Created post with ${t.embed.length} embeds`); - return link; } @@ -418,29 +407,24 @@ function addPostToLayout(postEl, zIndex) { if (!layoutColumns) return; const col = getShortestColumn(layoutColumns); - const postDiv = postEl.firstElementChild; // This is the .post div + const postDiv = postEl.firstElementChild; - // Store the current rotation (from postDiv.style.transform) for the animation const currentTransform = postDiv.style.transform; const rotationMatch = currentTransform.match(/rotate\(([-\d.]+deg)\)/); const rotation = rotationMatch ? rotationMatch[1] : '0deg'; - postDiv.style.setProperty('--post-rotation', rotation); // Used by slideUpFadeIn animation + postDiv.style.setProperty('--post-rotation', rotation); postDiv.style.zIndex = zIndex; - // Add loading animation class postDiv.classList.add('loading'); col.appendChild(postEl); - // Remove animation class after animation completes AND THEN attach hover listeners setTimeout(() => { postDiv.classList.remove('loading'); - // Now that the loading animation is done, attach hover listeners attachHoverListeners(postDiv); - }, 600); // Duration of slideUpFadeIn animation (0.6s) + }, 600); - // Add tape only for this specific post setTimeout(() => { const imgs = postEl.querySelectorAll('img.image-placeholder'); if (imgs.length > 0 && window.addTapeToPost) { @@ -499,7 +483,6 @@ async function processPostQueue() { function layoutPosts(postElements) { if (document.fullscreenElement && document.fullscreenElement.tagName === "VIDEO") { - console.log('[Main] Skipping layoutPosts: video is fullscreen'); return; } const numCols = getNumColumns(); @@ -510,7 +493,6 @@ function layoutPosts(postElements) { col.appendChild(postEl); }); - console.log('[Main] Posts laid out, adding tape for all images'); setTimeout(() => { if (window.addTapeToImages) { window.addTapeToImages(); @@ -563,8 +545,6 @@ async function fetchPosts() { }; }); - console.log(`[Main] Fetched ${posts.length} posts, ${posts.filter(p => p.embed.some(e => e.type === "image")).length} have images, ${posts.filter(p => p.embed.some(e => e.type === "video")).length} have videos`); - // Initialize layout columns const numCols = getNumColumns(); layoutColumns = createColumns(numCols); @@ -588,7 +568,6 @@ async function fetchPosts() { window.addEventListener("resize", () => { if (document.fullscreenElement && document.fullscreenElement.tagName === "VIDEO") { - console.log('[Main] Skipping resize layout: video is fullscreen'); return; } if (postElementsCache && layoutColumns) { diff --git a/website/tape.js b/website/tape.js index 51231a9..bc25ea6 100644 --- a/website/tape.js +++ b/website/tape.js @@ -1,34 +1,24 @@ function addTapeToImages() { const images = document.querySelectorAll('.image-placeholder'); - console.log(`[Tape] Found ${images.length} images to add tape to`); if (images.length === 0) { - console.warn('[Tape] No .image-placeholder elements found'); return; } images.forEach((image, index) => { - console.log(`[Tape] Processing image ${index + 1}/${images.length}`); - - // Check if image already has tape const existingTape = image.querySelectorAll('.tape'); if (existingTape.length > 0) { - console.log(`[Tape] Image ${index + 1} already has tape, skipping`); return; } - // Ensure the image parent has relative positioning const imageParent = image.parentElement; if (imageParent && window.getComputedStyle(imageParent).position === 'static') { imageParent.style.position = 'relative'; - console.log(`[Tape] Set image parent to relative positioning`); } - // Create two tape pieces const tape1 = createTapeElement(index, 1); const tape2 = createTapeElement(index, 2); - // Position based on pattern const usePattern1 = index % 2 === 0; if (usePattern1) { positionTape(tape1, 'top-left'); @@ -38,11 +28,8 @@ function addTapeToImages() { positionTape(tape2, 'bottom-left'); } - // Add to the image's parent container imageParent.appendChild(tape1); imageParent.appendChild(tape2); - - console.log(`[Tape] Added tape to image ${index + 1} parent`); }); } @@ -50,9 +37,8 @@ function createTapeElement(imageIndex, tapeNumber) { const tape = document.createElement('div'); tape.className = 'tape'; - // Even chunkier tape: wider and much taller - const width = 60 + Math.random() * 20; // 60-80px - const height = 40 + Math.random() * 16; // 40-56px + const width = 60 + Math.random() * 20; + const height = 40 + Math.random() * 16; tape.style.cssText = ` position: absolute; @@ -70,15 +56,14 @@ function createTapeElement(imageIndex, tapeNumber) { background-size: 4px 4px; `; - console.log(`[Tape] Created tape element ${tapeNumber} for image ${imageIndex + 1}`); return tape; } function positionTape(tape, corner) { - const randomOffset = () => Math.random() * 8 - 4; // -4 to 4px - const randomRotation = (Math.random() * 20 - 10); // -10 to 10 degrees - const OUT_X = 25; // px, how far out from the left/right - const OUT_Y = 18; // px, how far out from the top/bottom + const randomOffset = () => Math.random() * 8 - 4; + const randomRotation = (Math.random() * 20 - 10); + const OUT_X = 25; + const OUT_Y = 18; switch (corner) { case 'top-left': @@ -102,57 +87,35 @@ function positionTape(tape, corner) { tape.style.transform = `rotate(${-45 + randomRotation}deg)`; break; } - - console.log(`[Tape] Positioned tape at ${corner}:`, { - top: tape.style.top, - bottom: tape.style.bottom, - left: tape.style.left, - right: tape.style.right, - transform: tape.style.transform - }); } function refreshTape() { - console.log('[Tape] Refreshing tape - removing existing tape'); - - // Remove existing tape const existingTape = document.querySelectorAll('.tape'); - console.log(`[Tape] Found ${existingTape.length} existing tape elements to remove`); - existingTape.forEach(tape => tape.remove()); - - console.log('[Tape] Re-adding tape to images'); addTapeToImages(); } -// Add tape to a specific post element function addTapeToPost(postElement) { const images = postElement.querySelectorAll('.image-placeholder'); - console.log(`[Tape] Found ${images.length} images in post to add tape to`); if (images.length === 0) { return; } images.forEach((image, index) => { - // Check if image already has tape const existingTape = image.parentElement.querySelectorAll('.tape'); if (existingTape.length > 0) { - console.log(`[Tape] Image ${index + 1} already has tape, skipping`); return; } - // Ensure the image parent has relative positioning const imageParent = image.parentElement; if (imageParent && window.getComputedStyle(imageParent).position === 'static') { imageParent.style.position = 'relative'; } - // Create two tape pieces const tape1 = createTapeElement(index, 1); const tape2 = createTapeElement(index, 2); - // Position based on pattern const usePattern1 = index % 2 === 0; if (usePattern1) { positionTape(tape1, 'top-left'); @@ -162,18 +125,12 @@ function addTapeToPost(postElement) { positionTape(tape2, 'bottom-left'); } - // Add to the image's parent container imageParent.appendChild(tape1); imageParent.appendChild(tape2); - - console.log(`[Tape] Added tape to image ${index + 1} in specific post`); }); } -// Simple test function function testSimpleTape() { - console.log('[Tape Test] Creating simple test...'); - const firstImage = document.querySelector('.image-placeholder'); if (!firstImage) { console.error('[Tape Test] No images found'); @@ -203,11 +160,9 @@ function testSimpleTape() { testTape.textContent = 'TEST'; parent.appendChild(testTape); - console.log('[Tape Test] Added test tape to first image parent'); setTimeout(() => { testTape.remove(); - console.log('[Tape Test] Removed test tape'); }, 3000); } @@ -216,5 +171,3 @@ window.addTapeToImages = addTapeToImages; window.addTapeToPost = addTapeToPost; window.refreshTape = refreshTape; window.testSimpleTape = testSimpleTape; - -console.log('[Tape] Simple tape system loaded. Use window.testSimpleTape() to test.');