// Explore Page - Pinterest-style inspiration browsing with persistent mood boards (function() { // Processor IDs (following pattern from track.js:14-15) var CUSTOMER_PROC_ID = "R7hpLWsQoZsGExxyT"; // State var state = { boards: [], // User's boards from database currentBoardId: null, // Board being viewed in detail modal currentItem: null, // Item being added to board sidebarOpen: false, currentFilter: "all", allItems: [], // Inspiration items (from database or fallback) isSignedIn: false, isLoading: false }; // Fallback inspiration data (used when database is empty or user not signed in) var SAMPLE_INSPIRATIONS = [ { id: "1", title: "Elegant Evening Gown", category: "eveningwear", image: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=400&h=600&fit=crop", height: 380 }, { id: "2", title: "Beach Wedding Dress", category: "bridal", image: "https://images.unsplash.com/photo-1594552072238-b8a33785b261?w=400&h=500&fit=crop", height: 320 }, { id: "3", title: "Caribbean Carnival Costume", category: "carnival", image: "https://images.unsplash.com/photo-1551927336-09d50efd69cd?w=400&h=550&fit=crop", height: 350 }, { id: "4", title: "Modern Swimwear Set", category: "swimwear", image: "https://images.unsplash.com/photo-1570976447640-ac859083963f?w=400&h=480&fit=crop", height: 300 }, { id: "5", title: "Classic Tailored Suit", category: "menswear", image: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=400&h=600&fit=crop", height: 400 }, { id: "6", title: "Athleisure Set", category: "athleisure", image: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?w=400&h=450&fit=crop", height: 280 }, { id: "7", title: "Romantic Lace Gown", category: "bridal", image: "https://images.unsplash.com/photo-1519741497674-611481863552?w=400&h=580&fit=crop", height: 380 }, { id: "8", title: "Cocktail Dress", category: "eveningwear", image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=400&h=520&fit=crop", height: 340 }, { id: "9", title: "Tropical Print Bikini", category: "swimwear", image: "https://images.unsplash.com/photo-1632682940163-b496d377d3b8?w=400&h=500&fit=crop", height: 320 }, { id: "10", title: "Feathered Carnival Piece", category: "carnival", image: "https://images.unsplash.com/photo-1578632767115-351597cf2477?w=400&h=600&fit=crop", height: 400 }, { id: "11", title: "Linen Summer Suit", category: "menswear", image: "https://images.unsplash.com/photo-1617127365659-c47fa864d8bc?w=400&h=550&fit=crop", height: 360 }, { id: "12", title: "Yoga Ensemble", category: "athleisure", image: "https://images.unsplash.com/photo-1518310383802-640c2de311b2?w=400&h=480&fit=crop", height: 300 }, { id: "13", title: "Ball Gown", category: "eveningwear", image: "https://images.unsplash.com/photo-1566174053879-31528523f8ae?w=400&h=620&fit=crop", height: 420 }, { id: "14", title: "Minimalist Wedding Dress", category: "bridal", image: "https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400&h=540&fit=crop", height: 360 }, { id: "15", title: "One-Piece Swimsuit", category: "swimwear", image: "https://images.unsplash.com/photo-1502163140606-888448ae8cfe?w=400&h=500&fit=crop", height: 320 }, { id: "16", title: "Sequined Party Dress", category: "eveningwear", image: "https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=400&h=560&fit=crop", height: 370 }, { id: "17", title: "Casual Blazer", category: "menswear", image: "https://images.unsplash.com/photo-1555069519-127aadedf1ee?w=400&h=500&fit=crop", height: 330 }, { id: "18", title: "Running Set", category: "athleisure", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=450&fit=crop", height: 290 }, { id: "19", title: "Bohemian Wedding Gown", category: "bridal", image: "https://images.unsplash.com/photo-1550005809-91ad75fb315f?w=400&h=600&fit=crop", height: 400 }, { id: "20", title: "Carnival Headpiece Set", category: "carnival", image: "https://images.unsplash.com/photo-1544022613-e87ca75a784a?w=400&h=520&fit=crop", height: 340 } ]; // ========== UTILITY FUNCTIONS ========== function getPerson() { try { var person = phoros.person(); return person && person._id ? person : null; } catch (e) { return null; } } function showError(message) { Swal.fire({ icon: "error", title: "Error", text: message, timer: 3000, showConfirmButton: false }); } function showSuccess(message) { Swal.fire({ icon: "success", title: "Success", text: message, timer: 2000, showConfirmButton: false }); } // ========== BOARD FUNCTIONS ========== // Load boards from database function loadBoards(callback) { if (!state.isSignedIn) { state.boards = []; renderBoardsList(); if (callback) callback(); return; } phoros.processor(CUSTOMER_PROC_ID, { type: "listMyBoards" }, function(err, res) { if (err || !res || !res.success) { var errCode = res && res.error; if (errCode !== "NOT_SIGNED_IN") showError("Unable to load your boards. Please try again."); console.warn("[Explore] Failed to load boards:", errCode); state.boards = []; } else { state.boards = res.data.boards || []; } renderBoardsList(); updateBoardsCount(); if (callback) callback(); }); } // Render boards in sidebar function renderBoardsList() { var listEl = document.getElementById("explore-boards-list"); var emptyEl = document.getElementById("explore-boards-empty"); var signinEl = document.getElementById("explore-boards-signin-prompt"); if (!listEl) return; // Clear existing items (keep empty state element) var items = listEl.querySelectorAll(".explore-board-item"); items.forEach(function(item) { item.remove(); }); // Show sign-in prompt if not signed in if (!state.isSignedIn) { if (emptyEl) emptyEl.style.display = "none"; if (signinEl) signinEl.style.display = "block"; return; } if (signinEl) signinEl.style.display = "none"; if (state.boards.length === 0) { if (emptyEl) emptyEl.style.display = "block"; return; } if (emptyEl) emptyEl.style.display = "none"; // Render each board state.boards.forEach(function(board) { var item = document.createElement("div"); item.className = "explore-board-item"; item.onclick = function() { openBoardDetailModal(board._id); }; // Icon var icon = document.createElement("div"); icon.className = "explore-board-item__icon"; var iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); iconSvg.setAttribute("viewBox", "0 0 24 24"); iconSvg.setAttribute("fill", "none"); iconSvg.setAttribute("stroke", "currentColor"); iconSvg.setAttribute("stroke-width", "2"); var iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); iconPath.setAttribute("d", "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"); iconSvg.appendChild(iconPath); icon.appendChild(iconSvg); item.appendChild(icon); // Info var info = document.createElement("div"); info.className = "explore-board-item__info"; var name = document.createElement("p"); name.className = "explore-board-item__name"; name.textContent = board.name; info.appendChild(name); var meta = document.createElement("div"); meta.className = "explore-board-item__meta"; var privacy = document.createElement("span"); privacy.className = "explore-board-item__privacy"; var lockSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); lockSvg.setAttribute("viewBox", "0 0 24 24"); lockSvg.setAttribute("fill", "none"); lockSvg.setAttribute("stroke", "currentColor"); lockSvg.setAttribute("stroke-width", "2"); var lockPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); if (board.privacy === "private") { lockPath.setAttribute("d", "M19 11H5V21H19V11ZM7 11V7C7 4.24 9.24 2 12 2C14.76 2 17 4.24 17 7V11"); } else { lockPath.setAttribute("d", "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"); } lockSvg.appendChild(lockPath); privacy.appendChild(lockSvg); privacy.appendChild(document.createTextNode(board.privacy === "private" ? "Private" : "Public")); meta.appendChild(privacy); var count = document.createElement("span"); count.textContent = " • " + (board.item_count || 0) + " items"; meta.appendChild(count); info.appendChild(meta); item.appendChild(info); listEl.appendChild(item); }); } // Update boards count badge function updateBoardsCount() { var countEl = document.getElementById("explore-boards-count"); if (countEl) { countEl.textContent = state.boards.length; } } // Toggle sidebar function toggleBoardsSidebar() { var sidebar = document.getElementById("explore-boards-sidebar"); if (!sidebar) return; state.sidebarOpen = !state.sidebarOpen; if (state.sidebarOpen) { sidebar.classList.remove("explore-boards-sidebar--hidden"); loadBoards(); // Refresh boards when opening } else { sidebar.classList.add("explore-boards-sidebar--hidden"); } } // ========== CREATE BOARD MODAL ========== function openCreateBoardModal() { if (!state.isSignedIn) { promptSignIn(); return; } var modal = document.getElementById("explore-create-board-modal"); if (modal) { modal.classList.remove("explore-modal--hidden"); var nameInput = document.getElementById("explore-board-name"); if (nameInput) { nameInput.value = ""; nameInput.focus(); } // Reset privacy to private var privateRadio = document.querySelector('input[name="board-privacy"][value="private"]'); if (privateRadio) privateRadio.checked = true; } } function closeCreateBoardModal() { var modal = document.getElementById("explore-create-board-modal"); if (modal) { modal.classList.add("explore-modal--hidden"); } } function createBoard() { if (!state.isSignedIn) { promptSignIn(); return; } var nameInput = document.getElementById("explore-board-name"); var name = nameInput ? nameInput.value.trim() : ""; if (!name) { showError("Please enter a board name"); return; } var privacyInput = document.querySelector('input[name="board-privacy"]:checked'); var privacy = privacyInput ? privacyInput.value : "private"; var createBtn = document.querySelector("#explore-create-board-modal .spool-btn--primary"); if (createBtn) { createBtn.disabled = true; createBtn.textContent = "Creating..."; } phoros.processor(CUSTOMER_PROC_ID, { type: "createBoard", payload: { name: name, privacy: privacy } }, function(err, res) { if (createBtn) { createBtn.disabled = false; createBtn.textContent = "Create Board"; } if (err || !res || !res.success) { showError(res && res.error === "NOT_SIGNED_IN" ? "Please sign in to create boards" : "Failed to create board"); return; } closeCreateBoardModal(); showSuccess("Board created!"); loadBoards(); // Refresh boards list // If there's a pending item to add, add it now if (state.currentItem) { addItemToBoard(res.data.board_id, state.currentItem); state.currentItem = null; } }); } // ========== ADD TO BOARD MODAL ========== function openAddToBoardModal(item) { if (!state.isSignedIn) { promptSignIn(); return; } state.currentItem = item; var modal = document.getElementById("explore-add-to-board-modal"); if (!modal) return; // Render boards in picker var listEl = document.getElementById("explore-add-to-board-list"); if (listEl) { listEl.innerHTML = ""; if (state.boards.length === 0) { var empty = document.createElement("div"); empty.className = "explore-board-picker__empty"; empty.style.padding = "1rem"; empty.style.textAlign = "center"; empty.style.color = "#94a3b8"; empty.textContent = "No boards yet. Create one!"; listEl.appendChild(empty); } else { state.boards.forEach(function(board) { var item = document.createElement("div"); item.className = "explore-board-picker__item"; item.onclick = function() { addItemToBoard(board._id, state.currentItem); }; var icon = document.createElement("div"); icon.className = "explore-board-picker__item-icon"; icon.innerHTML = ''; item.appendChild(icon); var info = document.createElement("div"); info.className = "explore-board-picker__item-info"; var name = document.createElement("div"); name.className = "explore-board-picker__item-name"; name.textContent = board.name; info.appendChild(name); var count = document.createElement("div"); count.className = "explore-board-picker__item-count"; count.textContent = (board.item_count || 0) + " items"; info.appendChild(count); item.appendChild(info); listEl.appendChild(item); }); } } modal.classList.remove("explore-modal--hidden"); } function closeAddToBoardModal() { var modal = document.getElementById("explore-add-to-board-modal"); if (modal) { modal.classList.add("explore-modal--hidden"); } state.currentItem = null; } function addItemToBoard(boardId, item) { if (!item) return; var addBtns = document.querySelectorAll(".explore-board-option"); for (var i = 0; i < addBtns.length; i++) addBtns[i].style.opacity = "0.5"; phoros.processor(CUSTOMER_PROC_ID, { type: "addToBoard", board_id: boardId, payload: { type: item.type || "library", source_id: item.id || item.source_id, url: item.image || item.url, title: item.title || "", category: item.category || "" } }, function(err, res) { if (err || !res || !res.success) { showError("Failed to add to board"); return; } closeAddToBoardModal(); showSuccess("Added to board!"); loadBoards(); // Refresh counts }); } function openCreateBoardFromPicker() { closeAddToBoardModal(); openCreateBoardModal(); } // ========== BOARD DETAIL MODAL ========== function openBoardDetailModal(boardId) { if (!state.isSignedIn) return; state.currentBoardId = boardId; var detailModal = document.getElementById("explore-board-detail-modal"); if (detailModal) { var dc = detailModal.querySelector(".explore-board-detail-content"); if (dc) dc.innerHTML = "

Loading board...

"; detailModal.classList.remove("explore-modal--hidden"); } phoros.processor(CUSTOMER_PROC_ID, { type: "getBoardDetails", board_id: boardId }, function(err, res) { if (err || !res || !res.success) { showError("Failed to load board"); return; } var board = res.data.board; renderBoardDetail(board); var modal = document.getElementById("explore-board-detail-modal"); if (modal) { modal.classList.remove("explore-modal--hidden"); } }); } function renderBoardDetail(board) { var nameEl = document.getElementById("explore-board-detail-name"); var privacyEl = document.getElementById("explore-board-detail-privacy"); var countEl = document.getElementById("explore-board-detail-count"); var gridEl = document.getElementById("explore-board-detail-grid"); var emptyEl = document.getElementById("explore-board-detail-empty"); if (nameEl) nameEl.textContent = board.name; if (privacyEl) { privacyEl.textContent = board.privacy === "private" ? "Private" : "Public"; privacyEl.className = "explore-privacy-badge" + (board.privacy === "public" ? " explore-privacy-badge--public" : ""); } if (countEl) { var items = board.items || []; countEl.textContent = items.length + " inspiration" + (items.length !== 1 ? "s" : ""); } if (gridEl) { gridEl.innerHTML = ""; var items = board.items || []; if (items.length === 0) { if (emptyEl) emptyEl.style.display = "block"; gridEl.style.display = "none"; } else { if (emptyEl) emptyEl.style.display = "none"; gridEl.style.display = "grid"; items.forEach(function(item) { var card = document.createElement("div"); card.className = "explore-board-detail__item"; var img = document.createElement("img"); img.src = item.url; img.alt = item.title || "Inspiration"; img.loading = "lazy"; card.appendChild(img); // Remove button (only if owner) if (board.is_owner) { var removeBtn = document.createElement("button"); removeBtn.className = "explore-board-detail__item-remove"; removeBtn.setAttribute("aria-label", "Remove from board"); removeBtn.onclick = function(e) { e.stopPropagation(); removeFromBoard(board._id, item._id); }; removeBtn.innerHTML = ''; card.appendChild(removeBtn); } gridEl.appendChild(card); }); } } // Show/hide edit and delete buttons based on ownership var editBtn = document.getElementById("explore-board-edit-btn"); var deleteBtn = document.getElementById("explore-board-delete-btn"); var uploadBtn = document.getElementById("explore-board-upload-btn"); if (editBtn) editBtn.style.display = board.is_owner ? "" : "none"; if (deleteBtn) deleteBtn.style.display = board.is_owner ? "" : "none"; if (uploadBtn) uploadBtn.style.display = board.is_owner ? "" : "none"; } function closeBoardDetailModal() { var modal = document.getElementById("explore-board-detail-modal"); if (modal) { modal.classList.add("explore-modal--hidden"); } state.currentBoardId = null; } function deleteBoard() { if (!state.currentBoardId) return; Swal.fire({ title: "Delete Board?", text: "This will permanently delete this board and all its contents.", icon: "warning", showCancelButton: true, confirmButtonColor: "#ef4444", confirmButtonText: "Delete", cancelButtonText: "Cancel" }).then(function(result) { if (result.isConfirmed) { Swal.fire({ title: "Deleting...", allowOutsideClick: false, didOpen: function() { Swal.showLoading(); } }); phoros.processor(CUSTOMER_PROC_ID, { type: "deleteBoard", board_id: state.currentBoardId }, function(err, res) { Swal.close(); if (err || !res || !res.success) { showError("Failed to delete board"); return; } closeBoardDetailModal(); showSuccess("Board deleted"); loadBoards(); }); } }); } function editBoard() { if (!state.currentBoardId) return; // Find current board var board = null; for (var i = 0; i < state.boards.length; i++) { if (state.boards[i]._id === state.currentBoardId) { board = state.boards[i]; break; } } if (!board) return; Swal.fire({ title: "Edit Board", html: '' + '', focusConfirm: false, showCancelButton: true, confirmButtonText: "Save", preConfirm: function() { var name = document.getElementById("swal-board-name").value.trim(); var privacy = document.getElementById("swal-board-privacy").value; if (!name) { Swal.showValidationMessage("Please enter a name"); return false; } return { name: name, privacy: privacy }; } }).then(function(result) { if (result.isConfirmed && result.value) { phoros.processor(CUSTOMER_PROC_ID, { type: "updateBoard", board_id: state.currentBoardId, payload: { name: result.value.name, privacy: result.value.privacy } }, function(err, res) { if (err || !res || !res.success) { showError("Failed to update board"); return; } showSuccess("Board updated"); loadBoards(); // Refresh the detail view openBoardDetailModal(state.currentBoardId); }); } }); } function removeFromBoard(boardId, itemId) { // Show loading for remove operation if (window.Swal) Swal.fire({ title: "Removing...", allowOutsideClick: false, didOpen: function() { Swal.showLoading(); } }); phoros.processor(CUSTOMER_PROC_ID, { type: "removeFromBoard", board_id: boardId, item_id: itemId }, function(err, res) { if (err || !res || !res.success) { showError("Failed to remove item"); return; } if (window.Swal) Swal.close(); // Refresh board detail openBoardDetailModal(boardId); loadBoards(); // Update counts }); } function uploadToBoard() { if (!state.currentBoardId) return; // Create hidden file input var input = document.createElement("input"); input.type = "file"; input.accept = "image/*"; input.style.display = "none"; input.onchange = function(e) { var file = e.target.files[0]; if (!file) return; // Validate file type if (!file.type.startsWith("image/")) { showError("Please select an image file"); return; } // Validate file size (max 10MB) if (file.size > 10 * 1024 * 1024) { showError("Image must be less than 10MB"); return; } // Upload using phoros file upload Swal.fire({ title: "Uploading...", allowOutsideClick: false, didOpen: function() { Swal.showLoading(); } }); // Use phoros file upload API if (window.phoros && typeof phoros.uploadFile === "function") { phoros.uploadFile(file, function(err, result) { Swal.close(); if (err || !result || !result.url) { showError("Failed to upload image"); return; } // Add uploaded image to board phoros.processor(CUSTOMER_PROC_ID, { type: "addToBoard", board_id: state.currentBoardId, payload: { type: "uploaded", url: result.url, title: file.name.replace(/\.[^/.]+$/, ""), category: "" } }, function(err2, res2) { if (err2 || !res2 || !res2.success) { showError("Failed to add image to board"); return; } showSuccess("Image uploaded!"); openBoardDetailModal(state.currentBoardId); loadBoards(); }); }); } else { Swal.close(); showError("File upload not available"); } }; document.body.appendChild(input); input.click(); document.body.removeChild(input); } function useBoard() { if (!state.currentBoardId) return; // Find the board var board = null; for (var i = 0; i < state.boards.length; i++) { if (state.boards[i]._id === state.currentBoardId) { board = state.boards[i]; break; } } if (!board) return; // Store board info for customer page to pick up try { sessionStorage.setItem("spool_selected_board", JSON.stringify({ board_id: board._id, board_name: board.name, items: board.items || [] })); } catch (e) { console.warn("[Explore] Could not save board selection:", e); } closeBoardDetailModal(); sessionStorage.setItem("spool_open_create_modal", "true"); phoros.page.change("customer"); } function promptSignIn() { Swal.fire({ title: "Sign In Required", text: "Please sign in to create and manage boards", icon: "info", showCancelButton: true, confirmButtonText: "Sign In", cancelButtonText: "Cancel" }).then(function(result) { if (result.isConfirmed) { // Trigger sign-in (platform handles this) if (window.phoros && typeof phoros.signIn === "function") { phoros.signIn(); } else { // Fallback - navigate to a sign-in page or show form phoros.page.change("landing", { signin: true }); } } }); } // ========== INSPIRATION GRID FUNCTIONS ========== // Create a card element function createCard(item) { var card = document.createElement("div"); card.className = "explore-card"; card.dataset.id = item.id || item._id; card.dataset.category = item.category; // Image var img = document.createElement("img"); img.className = "explore-card__image"; img.src = item.image || item.image_url; img.alt = item.title; img.style.height = (item.height || 350) + "px"; img.loading = "lazy"; card.appendChild(img); // Pin/Add button var pinBtn = document.createElement("button"); pinBtn.className = "explore-card__pin"; pinBtn.setAttribute("aria-label", "Add to board"); pinBtn.onclick = function(e) { e.stopPropagation(); handleAddToBoard(item); }; var pinSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); pinSvg.setAttribute("class", "w-5 h-5"); pinSvg.setAttribute("viewBox", "0 0 24 24"); pinSvg.setAttribute("fill", "none"); pinSvg.setAttribute("stroke", "currentColor"); pinSvg.setAttribute("stroke-width", "2"); var pinPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); pinPath.setAttribute("d", "M12 5v14M5 12h14"); pinSvg.appendChild(pinPath); pinBtn.appendChild(pinSvg); card.appendChild(pinBtn); // Overlay var overlay = document.createElement("div"); overlay.className = "explore-card__overlay"; var info = document.createElement("div"); info.className = "explore-card__info"; var title = document.createElement("h3"); title.className = "explore-card__title"; title.textContent = item.title; info.appendChild(title); var category = document.createElement("p"); category.className = "explore-card__category"; category.textContent = item.category; info.appendChild(category); overlay.appendChild(info); card.appendChild(overlay); // Click card to add to board card.onclick = function(e) { if (e.target.closest(".explore-card__pin")) return; handleAddToBoard(item); }; return card; } function handleAddToBoard(item) { if (!state.isSignedIn) { promptSignIn(); return; } // If user has only one board, add directly if (state.boards.length === 1) { addItemToBoard(state.boards[0]._id, item); } else { openAddToBoardModal(item); } } // Render the grid function renderGrid() { var grid = document.getElementById("explore-grid"); if (!grid) return; // Clear grid while (grid.firstChild) { grid.removeChild(grid.firstChild); } var items = state.currentFilter === "all" ? state.allItems : state.allItems.filter(function(item) { return item.category === state.currentFilter; }); items.forEach(function(item) { grid.appendChild(createCard(item)); }); } // Filter by category function filterCategory(category) { state.currentFilter = category; // Update filter buttons var filters = document.querySelectorAll(".explore-filter"); filters.forEach(function(btn) { if (btn.dataset.filter === category) { btn.classList.add("explore-filter--active"); } else { btn.classList.remove("explore-filter--active"); } }); renderGrid(); } // Load inspirations from database (fallback to samples) function loadInspirations() { var loadingEl = document.getElementById("explore-grid-loading"); if (loadingEl) loadingEl.classList.remove("hidden"); phoros.processor(CUSTOMER_PROC_ID, { type: "getInspirations", payload: { category: "all", limit: 100 } }, function(err, res) { if (loadingEl) loadingEl.classList.add("hidden"); if (err || !res || !res.success || !res.data.inspirations || res.data.inspirations.length === 0) { // Processor call may have failed — use fallback sample data gracefully console.log("[Explore] Using sample inspirations (no database items)"); state.allItems = SAMPLE_INSPIRATIONS.slice().sort(function() { return Math.random() - 0.5; }); } else { // Map database items to expected format state.allItems = res.data.inspirations.map(function(insp) { return { id: insp._id, title: insp.title || "Inspiration", category: insp.category || "other", image: insp.image_url || insp.url, height: insp.height || 350, type: "library" }; }); } renderGrid(); }); } // ========== PROJECT FLOW (kept for backwards compatibility) ========== function clearPins() { // No-op - boards now handle this showSuccess("Use boards to organize your inspirations!"); } function startProject() { if (!state.isSignedIn) { promptSignIn(); return; } sessionStorage.setItem("spool_open_create_modal", "true"); phoros.page.change("customer"); } function skipToProject() { if (!state.isSignedIn) { promptSignIn(); return; } sessionStorage.removeItem("spool_pinned_inspirations"); sessionStorage.removeItem("spool_selected_board"); sessionStorage.setItem("spool_open_create_modal", "true"); phoros.page.change("customer"); } // ========== TUTORIAL ========== var TUTORIAL_COOKIE_KEY = 'spoolExploreTutorialSeen'; function launchExploreTutorial(force) { // Don't auto-launch if already seen if (!force && window.SpoolTutorials && window.SpoolTutorials.hasSeen(TUTORIAL_COOKIE_KEY)) { console.log('[Explore] Tutorial already seen, skipping auto-launch'); return false; } // Wait for Intro.js to be ready if (!window.__spoolIntroLoaded || !window.introJs) { console.log('[Explore] Intro.js not ready, retrying in 200ms'); setTimeout(function() { launchExploreTutorial(force); }, 200); return false; } // Define 4 tutorial steps per spec var steps = [ { element: document.querySelector('.explore-header'), title: 'Find Your Inspiration', intro: 'Browse styles, save favorites to boards, then start your project with ideas ready to share.' }, { element: document.getElementById('explore-grid'), title: 'Browse the Feed', intro: 'Scroll through curated styles and designs. Click the + button to save, or click an image to add it to a board.' }, { element: document.getElementById('explore-boards-toggle'), title: 'Your Mood Boards', intro: 'Organize saved styles into boards. Perfect for sharing with makers or planning multiple projects.' }, { element: document.querySelector('.explore-btn--primary'), title: 'Ready to Create?', intro: 'When you\'ve found your inspiration, click here to start a project with your saved images.' } ]; // Filter out steps where element doesn't exist steps = steps.filter(function(step) { return step.element; }); if (steps.length === 0) { console.warn('[Explore] No tutorial elements found'); return false; } console.log('[Explore] Launching tutorial with', steps.length, 'steps'); if (window.SpoolTutorials && typeof window.SpoolTutorials.runTutorial === 'function') { return window.SpoolTutorials.runTutorial(TUTORIAL_COOKIE_KEY, steps); } return false; } // Attach launcher to SpoolTutorials for consistency if (typeof window.SpoolTutorials === 'undefined') { window.SpoolTutorials = {}; } window.SpoolTutorials.launchExploreTutorial = launchExploreTutorial; // ========== INITIALIZATION ========== function init() { console.log("[Explore] Initializing..."); // Wait for platform hydration before loading data if (window.SPOOL_waitForHydration) { SPOOL_waitForHydration(function(err) { if (err) { console.warn("[Explore] Hydration failed, proceeding with fallback data"); } initAfterHydration(); }); } else { // Fallback: direct init if hydration utility not available initAfterHydration(); } } function initAfterHydration() { // Check sign-in status var person = getPerson(); state.isSignedIn = !!person; console.log("[Explore] Signed in:", state.isSignedIn); // Load inspirations (from database or fallback) loadInspirations(); // Load boards if signed in if (state.isSignedIn) { loadBoards(); } else { updateBoardsCount(); } // Auto-launch tutorial for first-time visitors (after grid renders) setTimeout(function() { var grid = document.getElementById('explore-grid'); if (grid && grid.children.length > 0) { launchExploreTutorial(false); } else { // Wait for grid to render setTimeout(function() { launchExploreTutorial(false); }, 500); } }, 800); } // ========== SIGN-IN/OUT HANDLERS ========== // Handle sign-in after page has loaded (called from spool-v3.js) function onExploreSignedIn(person) { console.log("[Explore] User signed in, refreshing state..."); state.isSignedIn = true; loadBoards(function() { // Refresh UI to remove "sign in required" prompts renderBoardsList(); updateBoardsCount(); }); } window.SPOOL_onExploreSignedIn = onExploreSignedIn; // Handle sign-out after page has loaded function onExploreSignedOut() { console.log("[Explore] User signed out, clearing state..."); state.isSignedIn = false; state.boards = []; renderBoardsList(); updateBoardsCount(); } window.SPOOL_onExploreSignedOut = onExploreSignedOut; // Expose API window.SPOOL_EXPLORE = { // Board functions toggleBoardsSidebar: toggleBoardsSidebar, openCreateBoardModal: openCreateBoardModal, closeCreateBoardModal: closeCreateBoardModal, createBoard: createBoard, openBoardDetailModal: openBoardDetailModal, closeBoardDetailModal: closeBoardDetailModal, deleteBoard: deleteBoard, editBoard: editBoard, uploadToBoard: uploadToBoard, useBoard: useBoard, openAddToBoardModal: openAddToBoardModal, closeAddToBoardModal: closeAddToBoardModal, openCreateBoardFromPicker: openCreateBoardFromPicker, promptSignIn: promptSignIn, // Grid functions filterCategory: filterCategory, clearPins: clearPins, startProject: startProject, skipToProject: skipToProject, // Retry/error retryLoad: function() { var errEl = document.getElementById("explore-error-state"); if (errEl) errEl.style.display = "none"; var gridEl = document.getElementById("explore-grid"); if (gridEl) gridEl.style.display = ""; loadInspirations(); if (state.isSignedIn) loadBoards(); }, // Tutorial launchTutorial: function() { launchExploreTutorial(true); } }; // Run immediately (JMDK pattern) init(); })();

My Boards

Create New Board

Add to Board

Board Name