David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MultipleImagesPost

Browse Source
This commit is contained in:
David
2026-01-29 12:30:38 +11:00
parent 4b64a9e13b
commit 6774ff272d
3 changed files with 269 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -237,16 +237,17 @@
<div class="post-creation-area">
<div class="image-upload-wrapper" id="upload-trigger">
<input type="file" id="post-image-input" accept="image/*" hidden>
<input type="file" id="post-image-input" accept="image/*,video/*" multiple hidden>
<div class="upload-placeholder">
<svg viewBox="0 0 24 24" width="48" height="48" stroke="white" fill="none" stroke-width="1">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<span>Tap to Select Photo</span>
<span>Tap to Select Photos or Videos</span>
</div>
<img id="image-preview" class="hidden" src="" alt="Preview">
<!-- Preview Container for Carousel -->
<div id="media-preview-container" class="media-carousel hidden"></div>
</div>
<div class="caption-wrapper">

328
script.js
View File

@@ -1,5 +1,5 @@
document.addEventListener('DOMContentLoaded', () => {
// --- INDEXED DB HELPERS (For >5MB Storage) ---
// --- INDEXED DB HELPERS (Multi-Media Support) ---
const DB_NAME = 'SocialAppDB';
const DB_VERSION = 1;
@@ -17,13 +17,14 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
async function saveImageToDB(id, dataUrl) {
// Save Array of Blobs/Strings
async function saveMediaToDB(id, mediaArray) {
try {
const db = await openDB();
return new Promise((resolve, reject) => {
const tx = db.transaction('images', 'readwrite');
const store = tx.objectStore('images');
store.put({ id, data: dataUrl });
store.put({ id, media: mediaArray });
tx.oncomplete = () => resolve();
tx.onerror = () => reject(tx.error);
});
@@ -33,14 +34,15 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
async function getImageFromDB(id) {
// Get Media Array
async function getMediaFromDB(id) {
try {
const db = await openDB();
return new Promise((resolve, reject) => {
const tx = db.transaction('images', 'readonly');
const store = tx.objectStore('images');
const request = store.get(id);
request.onsuccess = () => resolve(request.result ? request.result.data : null);
request.onsuccess = () => resolve(request.result ? request.result.media : null);
request.onerror = () => reject(request.error);
});
} catch (e) {
@@ -60,7 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
tx.onerror = () => reject(tx.error);
});
} catch (e) {
console.error('IndexedDB Delete Error:', e);
console.log('IndexedDB Delete Error or ID not found:', e);
}
}
@@ -84,7 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
const sharePostBtn = document.getElementById('share-post-btn');
const uploadTrigger = document.getElementById('upload-trigger');
const imageInput = document.getElementById('post-image-input');
const imagePreview = document.getElementById('image-preview');
const mediaPreviewContainer = document.getElementById('media-preview-container');
const captionInput = document.getElementById('post-caption-input');
const navPostBtn = document.querySelector('.nav-btn:nth-child(2)');
const navHomeBtn = document.querySelector('.nav-btn:first-child');
@@ -102,7 +104,6 @@ document.addEventListener('DOMContentLoaded', () => {
function updateUI() {
if (!title || !subtitle || !btnText || !confirmPasswordGroup) return;
if (isLoginMode) {
title.innerText = 'Welcome Back';
subtitle.innerText = 'Enter your details below';
@@ -120,7 +121,6 @@ document.addEventListener('DOMContentLoaded', () => {
confirmPasswordGroup.classList.remove('hidden');
confirmPasswordInput.required = true;
}
const newLink = document.querySelector('.signup-link a');
if (newLink) {
newLink.addEventListener('click', (e) => {
@@ -129,7 +129,6 @@ document.addEventListener('DOMContentLoaded', () => {
updateUI();
});
}
if (loginForm) loginForm.reset();
resetButton();
}
@@ -148,19 +147,8 @@ document.addEventListener('DOMContentLoaded', () => {
submitBtn.style.background = 'linear-gradient(135deg, #10B981 0%, #059669 100%)';
} else {
submitBtn.style.background = 'linear-gradient(135deg, #EF4444 0%, #B91C1C 100%)';
submitBtn.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-5px)' },
{ transform: 'translateX(5px)' },
{ transform: 'translateX(0)' }
], { duration: 300 });
}
setTimeout(() => {
if (!message.includes('Success')) {
resetButton();
}
}, 2000);
setTimeout(() => { if (!message.includes('Success')) resetButton(); }, 2000);
}
function navigateToFeed() {
@@ -169,16 +157,11 @@ document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
loginContainer.classList.add('hidden');
loginContainer.style.display = 'none';
feedView.classList.remove('hidden');
void feedView.offsetWidth; // Reflow
void feedView.offsetWidth;
feedView.classList.add('fade-in');
initFeed(); // Load data (Async)
setTimeout(() => {
feedView.classList.remove('fade-in');
}, 600);
initFeed();
setTimeout(() => feedView.classList.remove('fade-in'), 600);
}, 600);
}
}
@@ -213,60 +196,45 @@ document.addEventListener('DOMContentLoaded', () => {
existingUsers.push(newUser);
localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));
showFeedback(true, 'Account Created!');
setTimeout(() => {
isLoginMode = true;
updateUI();
setTimeout(navigateToFeed, 1000);
}, 1500);
setTimeout(() => { isLoginMode = true; updateUI(); setTimeout(navigateToFeed, 1000); }, 1500);
}
});
}
// --- DATA HELPERS ---
function getPostState() {
return JSON.parse(localStorage.getItem('socialAppPostState') || '{}');
}
function savePostState(state) {
localStorage.setItem('socialAppPostState', JSON.stringify(state));
}
function isPostDeleted(id) {
const deletedPosts = JSON.parse(localStorage.getItem('socialAppDeletedPosts') || '[]');
return deletedPosts.includes(id);
}
function getPostState() { return JSON.parse(localStorage.getItem('socialAppPostState') || '{}'); }
function savePostState(state) { localStorage.setItem('socialAppPostState', JSON.stringify(state)); }
function isPostDeleted(id) { const deletedPosts = JSON.parse(localStorage.getItem('socialAppDeletedPosts') || '[]'); return deletedPosts.includes(id); }
// --- ASYNC LOAD FEED ---
async function initFeed() {
// 1. Render User Posts (Fetch images from DB)
const savedUserPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
// Use a loop to handle async properly
const postsToRender = [...savedUserPosts].reverse();
for (const post of postsToRender) {
if (!isPostDeleted(post.id) && !document.querySelector(`[data-post-id="${post.id}"]`)) {
// Try to get image from DB, fallback to post.imageSrc (legacy support)
let imgSrc = post.imageSrc;
if (!imgSrc || imgSrc.length < 100) { // If it's a placeholder (null)
const dbImg = await getImageFromDB(post.id);
if (dbImg) imgSrc = dbImg;
let mediaItems = post.media;
// Backwards Compatibility
if (!mediaItems && post.imageSrc) {
mediaItems = [{ type: 'image', src: post.imageSrc }];
}
if (!mediaItems || (mediaItems.length > 0 && mediaItems[0].src && mediaItems[0].src.length < 100)) {
const dbMedia = await getMediaFromDB(post.id);
if (dbMedia) mediaItems = dbMedia;
}
if (imgSrc) {
const postWithImg = { ...post, imageSrc: imgSrc };
renderPost(postWithImg, true);
if (mediaItems && mediaItems.length > 0) {
const postWithMedia = { ...post, media: mediaItems };
renderPost(postWithMedia, true);
}
}
}
// 2. Restore Interaction State (Likes/Comments)
// Give a small delay to ensure rendering catches up or run immediately
// Restore State
const state = getPostState();
document.querySelectorAll('.post-card').forEach(card => {
const id = card.getAttribute('data-post-id');
if (id && isPostDeleted(id)) {
card.remove();
return;
}
if (id && isPostDeleted(id)) { card.remove(); return; }
if (id && state[id]) {
const data = state[id];
const likeIcon = card.querySelector('.heart-icon');
@@ -297,7 +265,6 @@ document.addEventListener('DOMContentLoaded', () => {
// --- RENDER POST ---
function renderPost(post, prepend = false) {
// Avoid duplicates
if (document.querySelector(`[data-post-id="${post.id}"]`)) return;
const feedContainer = document.querySelector('.feed-container');
@@ -318,6 +285,31 @@ document.addEventListener('DOMContentLoaded', () => {
</div>
` : `<button class="icon-btn-sm">...</button>`;
let slidesHTML = '';
let dotsHTML = '';
const media = post.media || (post.imageSrc ? [{ type: 'image', src: post.imageSrc }] : []);
if (media.length > 0) {
media.forEach((item, index) => {
if (item.type === 'video') {
slidesHTML += `
<div class="media-slide">
<video src="${item.src}" controls playsinline loop></video>
</div>`;
} else {
slidesHTML += `
<div class="media-slide">
<img src="${item.src}" alt="Post Media ${index + 1}">
</div>`;
}
if (media.length > 1) {
dotsHTML += `<div class="dot ${index === 0 ? 'active' : ''}"></div>`;
}
});
}
const paginationHTML = media.length > 1 ? `<div class="carousel-dots">${dotsHTML}</div>` : '';
article.innerHTML = `
<div class="post-header">
<div class="post-user">
@@ -326,8 +318,11 @@ document.addEventListener('DOMContentLoaded', () => {
</div>
${optionsHTML}
</div>
<div class="post-image">
<img src="${post.imageSrc}" alt="Post">
<div class="post-image-wrapper post-media-wrapper">
<div class="media-carousel" onscroll="updateDots(this)">
${slidesHTML}
</div>
${paginationHTML}
</div>
<div class="post-actions">
<div class="action-left">
@@ -350,57 +345,82 @@ document.addEventListener('DOMContentLoaded', () => {
`;
if (prepend) {
// Check again for safety inside async flows
if (!feedContainer.querySelector(`[data-post-id="${post.id}"]`)) {
feedContainer.insertBefore(article, feedContainer.firstChild);
}
}
else feedContainer.appendChild(article);
// Attach Drag-to-Scroll for Desktop
if (media.length > 1) {
const carousel = article.querySelector('.media-carousel');
if (carousel) enableDragScroll(carousel);
}
}
// --- DRAG TO SCROLL HELPER ---
function enableDragScroll(container) {
let isDown = false;
let startX;
let scrollLeft;
container.addEventListener('mousedown', (e) => {
isDown = true;
container.style.cursor = 'grabbing';
startX = e.pageX - container.offsetLeft;
scrollLeft = container.scrollLeft;
});
container.addEventListener('mouseleave', () => { isDown = false; container.style.cursor = 'grab'; });
container.addEventListener('mouseup', () => { isDown = false; container.style.cursor = 'grab'; });
container.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - container.offsetLeft;
const walk = (x - startX) * 2; // Scroll-fast
container.scrollLeft = scrollLeft - walk;
});
}
// Global helper for dots
window.updateDots = function (carousel) {
const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
const dots = carousel.parentElement.querySelectorAll('.dot');
dots.forEach((dot, i) => {
if (i === index) dot.classList.add('active');
else dot.classList.remove('active');
});
}
// --- FEED LISTENERS ---
if (feedView) {
initFeed(); // Initial Load logic
initFeed();
feedView.addEventListener('click', (e) => {
const target = e.target;
// 1. OPTIONS MENU
const trigger = target.closest('.options-trigger');
if (trigger) {
const header = trigger.closest('.post-header');
const menu = header.querySelector('.options-menu');
if (menu) {
document.querySelectorAll('.options-menu.active').forEach(m => {
if (m !== menu) m.classList.remove('active');
});
document.querySelectorAll('.options-menu.active').forEach(m => m.classList.remove('active'));
menu.classList.toggle('active');
e.stopPropagation();
}
return;
}
// 2. DELETE ACTION
const deleteBtn = target.closest('.delete');
if (deleteBtn) {
const card = deleteBtn.closest('.post-card');
const id = card.getAttribute('data-post-id');
if (id && id.startsWith('post_')) { // Double check ownership
if (id && id.startsWith('post_')) {
if (confirm('Delete this post?')) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.9)';
setTimeout(() => card.remove(), 300);
let userPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
userPosts = userPosts.filter(p => p.id !== id);
localStorage.setItem('socialAppUserPosts', JSON.stringify(userPosts));
// Delete from DB too
deleteImageFromDB(id);
// Also ban ID to be safe
const deletedPosts = JSON.parse(localStorage.getItem('socialAppDeletedPosts') || '[]');
if (!deletedPosts.includes(id)) {
deletedPosts.push(id);
@@ -410,19 +430,15 @@ document.addEventListener('DOMContentLoaded', () => {
}
return;
}
// 3. LIKE ACTION
const likeBtn = target.closest('.heart-icon')?.closest('.icon-btn');
if (likeBtn) {
const icon = likeBtn.querySelector('.heart-icon');
const postCard = likeBtn.closest('.post-card');
const likesText = postCard.querySelector('.likes');
const postId = postCard.getAttribute('data-post-id');
icon.classList.toggle('liked');
let count = parseInt(likesText.innerText);
let isLiked = false;
if (icon.classList.contains('liked')) {
icon.style.fill = '#EF4444';
icon.style.stroke = '#EF4444';
@@ -435,7 +451,6 @@ document.addEventListener('DOMContentLoaded', () => {
isLiked = false;
}
likesText.innerText = count + ' likes';
if (postId) {
const state = getPostState();
if (!state[postId]) state[postId] = { comments: [] };
@@ -446,13 +461,10 @@ document.addEventListener('DOMContentLoaded', () => {
}
return;
}
// 4. COMMENT TOGGLE (Updated logic)
// Identify comment button by checking if it's the 2nd one or has specific path
const commentBtn = target.closest('.icon-btn');
if (commentBtn) {
const svgs = commentBtn.innerHTML;
if (svgs.includes('M21 11.5')) { // Comment icon path substring
if (svgs.includes('M21 11.5')) {
const postCard = commentBtn.closest('.post-card');
const commentSection = postCard.querySelector('.comment-section');
commentSection.classList.toggle('active');
@@ -463,15 +475,12 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
}
// 5. POST COMMENT
if (target.classList.contains('post-btn')) {
const wrapper = target.closest('.comment-input-wrapper');
const input = wrapper.querySelector('.comment-input');
const text = input.value.trim();
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
if (text) {
addComment(wrapper.closest('.comment-section'), text);
if (postId) {
@@ -485,15 +494,12 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
});
// Enter key for comments
feedView.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.target.classList.contains('comment-input')) {
const text = e.target.value.trim();
const wrapper = e.target.closest('.comment-input-wrapper');
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
if (text) {
addComment(e.target.closest('.comment-section'), text);
if (postId) {
@@ -507,8 +513,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
});
// Close menus
document.addEventListener('click', (e) => {
if (!e.target.closest('.options-menu') && !e.target.closest('.options-trigger')) {
document.querySelectorAll('.options-menu.active').forEach(m => m.classList.remove('active'));
@@ -525,69 +529,92 @@ document.addEventListener('DOMContentLoaded', () => {
}
// --- CREATE POST LOGIC ---
// Navigation
if (navPostBtn) {
navPostBtn.addEventListener('click', () => {
if (feedView && createPostView) {
feedView.classList.add('hidden');
createPostView.classList.remove('hidden');
createPostView.classList.add('fade-in');
}
});
navPostBtn.addEventListener('click', () => { if (feedView && createPostView) { feedView.classList.add('hidden'); createPostView.classList.remove('hidden'); createPostView.classList.add('fade-in'); } });
}
// Cancel
if (cancelPostBtn) {
cancelPostBtn.addEventListener('click', () => {
resetPostForm();
createPostView.classList.add('hidden');
feedView.classList.remove('hidden');
});
cancelPostBtn.addEventListener('click', () => { resetPostForm(); createPostView.classList.add('hidden'); feedView.classList.remove('hidden'); });
}
// Home Nav
if (navHomeBtn) {
navHomeBtn.addEventListener('click', () => {
if (createPostView && !createPostView.classList.contains('hidden')) {
resetPostForm();
createPostView.classList.add('hidden');
feedView.classList.remove('hidden');
}
});
navHomeBtn.addEventListener('click', () => { if (createPostView && !createPostView.classList.contains('hidden')) { resetPostForm(); createPostView.classList.add('hidden'); feedView.classList.remove('hidden'); } });
}
// Upload
// Staging Area for Selected Files
let stagedMedia = [];
// Upload Handler (Multiple Files)
if (uploadTrigger && imageInput) {
uploadTrigger.addEventListener('click', () => imageInput.click());
imageInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
imagePreview.classList.remove('hidden');
document.querySelector('.upload-placeholder').classList.add('hidden');
};
reader.readAsDataURL(file);
imageInput.addEventListener('change', async (e) => {
const files = Array.from(e.target.files);
if (files.length > 0) {
stagedMedia = [];
mediaPreviewContainer.innerHTML = '';
mediaPreviewContainer.classList.remove('hidden');
document.querySelector('.upload-placeholder').classList.add('hidden');
for (const file of files) {
if (!file.type.startsWith('image/') && !file.type.startsWith('video/')) {
alert('Skipping invalid file: ' + file.name);
continue;
}
const isVideo = file.type.startsWith('video/');
const dataUrl = await new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.readAsDataURL(file);
});
stagedMedia.push({ type: isVideo ? 'video' : 'image', src: dataUrl });
const slide = document.createElement('div');
slide.className = 'media-slide';
if (isVideo) {
slide.innerHTML = `<video src="${dataUrl}" controls style="width:100%; height:100%; object-fit:contain;"></video>`;
} else {
slide.innerHTML = `<img src="${dataUrl}" style="width:100%; height:100%; object-fit:contain;">`;
}
mediaPreviewContainer.appendChild(slide);
}
// Add Dots for Preview
const wrapper = document.querySelector('#create-post-view .image-upload-wrapper');
const oldDots = wrapper.querySelector('.carousel-dots');
if (oldDots) oldDots.remove();
if (stagedMedia.length > 1) {
const dotsContainer = document.createElement('div');
dotsContainer.className = 'carousel-dots';
stagedMedia.forEach((_, i) => {
const dot = document.createElement('div');
dot.className = `dot ${i === 0 ? 'active' : ''}`;
dotsContainer.appendChild(dot);
});
wrapper.appendChild(dotsContainer);
// Attach Listeners
mediaPreviewContainer.onscroll = () => window.updateDots(mediaPreviewContainer);
enableDragScroll(mediaPreviewContainer); // Desktop Swipe Support
}
}
});
}
// Share (Logic Updated for IndexedDB)
// Share Handler
if (sharePostBtn) {
sharePostBtn.addEventListener('click', async () => {
if (!imagePreview.src || imagePreview.classList.contains('hidden')) {
alert('Please select an image first.');
if (stagedMedia.length === 0) {
alert('Please select at least one photo or video.');
return;
}
const caption = captionInput.value.trim();
const imageSrc = imagePreview.src;
const id = 'post_' + Date.now();
// 1. Render Optimistically (Immediate Feedback)
const displayPost = {
id,
imageSrc,
media: stagedMedia,
caption,
timestamp: new Date().toISOString(),
username: 'you',
@@ -595,11 +622,9 @@ document.addEventListener('DOMContentLoaded', () => {
};
renderPost(displayPost, true);
// 2. Save Metadata to LocalStorage (Small footprint)
// IMPORTANT: We do NOT save the imageSrc string here to save space
const storagePost = {
id,
imageSrc: null, // Placeholder, will look up in DB
media: null,
caption,
timestamp: displayPost.timestamp,
username: displayPost.username,
@@ -610,13 +635,11 @@ document.addEventListener('DOMContentLoaded', () => {
userPosts.unshift(storagePost);
localStorage.setItem('socialAppUserPosts', JSON.stringify(userPosts));
// 3. Save Image Data to IndexedDB (Large Capacity)
// Async operation
try {
await saveImageToDB(id, imageSrc);
await saveMediaToDB(id, stagedMedia);
} catch (e) {
console.error('Failed to save to DB:', e);
alert('Uploaded, but image data count not be saved permanently due to storage error.');
console.error('Failed to save media array:', e);
alert('Uploaded, but media could not be saved permanently due to storage error.');
}
resetPostForm();
@@ -628,10 +651,15 @@ document.addEventListener('DOMContentLoaded', () => {
function resetPostForm() {
if (imageInput) imageInput.value = '';
if (captionInput) captionInput.value = '';
if (imagePreview) {
imagePreview.src = '';
imagePreview.classList.add('hidden');
stagedMedia = [];
if (mediaPreviewContainer) {
mediaPreviewContainer.innerHTML = '';
mediaPreviewContainer.classList.add('hidden');
mediaPreviewContainer.onscroll = null;
}
const dots = document.querySelector('#create-post-view .carousel-dots');
if (dots) dots.remove();
const ph = document.querySelector('.upload-placeholder');
if (ph) ph.classList.remove('hidden');
}

88
styles/main.css
View File

@@ -783,4 +783,90 @@ p {
outline: none;
padding-top: 8px;
/* Align with avatar */
}
}
/* --- CAROUSEL & VIDEO STYLES --- */
/* Carousel Container */
.media-carousel {
width: 100%;
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
background: #000;
}
.media-carousel::-webkit-scrollbar {
display: none;
}
/* Individual Slide */
.media-slide {
min-width: 100%;
height: 100%;
scroll-snap-align: center;
position: relative;
display: flex;
justify-content: center;
background: #000;
}
.media-slide img,
.media-slide video {
width: 100%;
height: 100%;
object-fit: cover; /* or contain depending on pref */
display: block;
}
/* Pagination Dots */
.carousel-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
pointer-events: none;
}
.dot {
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transition: 0.2s;
}
.dot.active {
background: #fff;
transform: scale(1.2);
}
/* Post Media Wrapper (replaces .post-image) */
.post-media-wrapper {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: #111;
overflow: hidden;
}
/* Update create post view to handle carousel preview */
#create-post-view .image-upload-wrapper {
/* Keep aspect ratio but allow overflow for carousel */
display: block;
overflow: hidden;
}
#media-preview-container {
width: 100%;
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}