Richard Paul Skinner

Loading...

Lounge Posts (11)
Richard's Wall (21)
Loglines (3)
</li> </ul> </div> </div> </div> </div> </div> <script> /** * Add newsletter modal parameter to URL and show the modal * This function adds the modal=newsletter parameter to the current URL and opens the modal */ function addNewsletterModal() { const url = new URL(window.location); url.searchParams.set('modal', 'newsletter'); // Update the URL without reloading the page history.pushState({}, '', url.toString()); // Show the newsletter modal immediately $('#newsletter-modal').modal('show'); console.log('Newsletter modal opened with URL:', url.toString()); } /** * Update location in profile header * Called when profile data loads or when location is updated */ window.updateProfileLocation = function(location) { var container = $('#profile-location'); if (!location) { // Don't show anything if no location container.text(''); return; } // Update the location text container.text(location); }; /** * Update position in profile header * Called when profile data loads * Position is a computed property from work experience on the backend */ window.updateProfilePosition = function(position) { var container = $('#profile-position'); if (!position) { // Don't show anything if no position container.text(''); return; } // Update the position text container.text(position); }; /** * Update professional interests in profile header * Called when profile data loads or when interests are updated * Shows first 5, with "See More" toggle if more than 5 */ window.updateProfileProfessionalInterests = function(interests) { var container = $('#profile-professional-interests'); container.empty(); if (!interests || interests.length === 0) { // Don't show anything if no professional interests return; } var showAll = false; var maxVisible = 5; function renderInterests() { container.empty(); // Determine how many to show var interestsToShow = showAll ? interests : interests.slice(0, maxVisible); // Render pills interestsToShow.forEach(function(interest) { var pill = $('<span>') .css({ 'background-color': '#323232', 'color': '#fff', 'padding': '4px 10px', 'border-radius': '100px', 'font-size': '12px' }) .text(interest.name); container.append(pill); }); // Add See More / See Less toggle if more than maxVisible if (interests.length > maxVisible) { var toggleLink = $('<a>') .attr('href', 'javascript:void(0)') .css({ 'font-size': '11px', 'margin-left': '6px', 'color': '#999', 'cursor': 'pointer', 'text-decoration': 'none' }) .text(showAll ? 'See Less' : 'See More (' + (interests.length - maxVisible) + ')') .on('click', function(e) { e.preventDefault(); showAll = !showAll; renderInterests(); }); container.append(toggleLink); } } // Initial render renderInterests(); }; // Update profile header when profile data loads $(document).ready(function() { // Wait for profile data to load with polling function checkAndUpdateProfileHeader() { if (window._jsProfileData) { console.log('Profile Header: Profile data found, updating header'); // Update location if it exists if (window._jsProfileData.location !== undefined) { updateProfileLocation(window._jsProfileData.location); } // Update position if it exists (computed from work experience) if (window._jsProfileData.position !== undefined) { updateProfilePosition(window._jsProfileData.position); } // Update professional interests if they exist if (window._jsProfileData.user_interests) { updateProfileProfessionalInterests(window._jsProfileData.user_interests.professional_interests || []); } } else { console.log('Profile Header: Waiting for profile data to load...'); // Check again in 100ms setTimeout(checkAndUpdateProfileHeader, 100); } } // Start checking checkAndUpdateProfileHeader(); }); // Listen for profile updates from bio-goals modal and other sources $(document).on('profileUpdated', function(event, data) { // Update location if changed if (data.location !== undefined) { updateProfileLocation(data.location); } // Update professional interests if changed if (data.user_interests && data.user_interests.professional_interests) { updateProfileProfessionalInterests(data.user_interests.professional_interests); } }); </script> <script> /** * Cover Photo Carousel Component * Auto-rotating carousel for displaying cover photos on the profile page * Features: Auto-rotation, pause on hover, manual navigation, click to open gallery */ window.CoverPhotoCarousel = { // Configuration config: { autoRotateInterval: 3000, // 3 seconds transitionDuration: 300, pauseOnHover: true }, // State state: { photos: [], currentIndex: 0, isPlaying: true, intervalId: null, carouselElement: null, isInitialized: false, isTransitioning: false, // Prevent rapid clicking during transitions clickHandler: null, // Store event handlers for cleanup mouseenterHandler: null, mouseleaveHandler: null, progressStartTime: null // Track when current slide started }, // Single source of truth - data from API only apiEndpoint: null, authToken: null, isOwner: false, // Initialize with required dependencies initialize: function(userSlug, authToken, isOwner = false) { if (!userSlug) { return false; } this.apiEndpoint = `https://backend.stage32.com/api/v2/users/${userSlug}/media?collection_name=cover`; this.authToken = authToken; this.isOwner = isOwner; // Start loading immediately this.loadPhotos(); return true; }, // Setup carousel DOM element setupDOM: function() { this.findOrCreateCarouselElement(); if (!this.state.carouselElement) { return false; } // Hide any static banner images that might be covering the carousel const bannerContainer = document.getElementById('profile-cover-photo-container'); if (bannerContainer) { const staticImages = bannerContainer.querySelectorAll('img:not([id])'); staticImages.forEach(img => { img.style.display = 'none'; }); } this.bindEvents(); this.state.isInitialized = true; return true; }, // Find existing banner or create carousel element findOrCreateCarouselElement: function() { // First check if we already have a carousel let carousel = document.getElementById('profile-cover-carousel'); if (carousel) { this.state.carouselElement = carousel; return; } // Look for existing banner div by ID const existingBanner = document.getElementById('profile-cover-photo-container'); if (existingBanner) { // Replace existing banner content with carousel const carouselDiv = document.createElement('div'); carouselDiv.id = 'profile-cover-carousel'; carouselDiv.className = 'profile-cover-carousel'; // Clear ALL content including any static images while (existingBanner.firstChild) { existingBanner.removeChild(existingBanner.firstChild); } existingBanner.appendChild(carouselDiv); // Add carousel inside banner container this.state.carouselElement = carouselDiv; } else { // Create new carousel element if no banner exists const headerRow = document.querySelector('.row'); if (headerRow) { const carouselCol = document.createElement('div'); carouselCol.className = 'col-sm-24'; carouselCol.innerHTML = '<div id="profile-cover-carousel" class="profile-cover-carousel"></div>'; headerRow.insertBefore(carouselCol, headerRow.firstChild); this.state.carouselElement = document.getElementById('profile-cover-carousel'); } } }, // Load photos from API (single source of truth) loadPhotos: async function() { if (!this.apiEndpoint) { this.state.photos = []; this.renderPlaceholder(); return; } try { const response = await fetch(this.apiEndpoint, { method: 'GET', headers: { 'Accept': 'application/json', 'Authorization': this.authToken ? `Bearer ${this.authToken}` : '' } }); if (response.ok) { const result = await response.json(); // Single source of truth - use API response directly this.state.photos = result.data || []; // If no photos, show placeholder. Otherwise render carousel if (this.state.photos.length === 0) { this.renderPlaceholder(); } else { this.renderCarousel(); if (this.state.photos.length > 1) { this.startAutoRotate(); } } } else { this.state.photos = []; this.renderPlaceholder(); } } catch (error) { this.state.photos = []; this.renderPlaceholder(); } }, // Render placeholder when no photos available renderPlaceholder: function() { if (!this.state.carouselElement) { this.setupDOM(); } this.showPlaceholder(); }, // Render the carousel renderCarousel: function() { if (!this.state.carouselElement) { if (!this.setupDOM()) return; } // Determine if mobile based on viewport const isMobile = window.innerWidth < 768; // Clone first and last photos for infinite scroll const photosWithClones = []; if (this.state.photos.length > 1) { // Add last photo at the beginning photosWithClones.push({...this.state.photos[this.state.photos.length - 1], isClone: true}); } // Add all original photos photosWithClones.push(...this.state.photos); if (this.state.photos.length > 1) { // Add first photo at the end photosWithClones.push({...this.state.photos[0], isClone: true}); } const html = ` <div class="cover-carousel-wrapper" style="position: relative; height: 300px; overflow: hidden; border-radius: 8px; cursor: pointer; background-color: #f0f0f0;"> <div class="cover-carousel-slides" style="display: flex; transition: transform ${this.config.transitionDuration}ms ease;"> ${photosWithClones.map((photo, index) => { // Prioritize cropped variants let imageUrl; if (isMobile) { // For mobile, prefer medium_cropped, then medium imageUrl = photo.variants.medium_cropped?.url || photo.variants.medium?.url || photo.variants.large_cropped?.url || photo.variants.large?.url || photo.original_url; } else { // For desktop, prefer large_cropped or xlarge_cropped imageUrl = photo.variants.xlarge_cropped?.url || photo.variants.large_cropped?.url || photo.variants.xlarge?.url || photo.variants.large?.url || photo.variants.medium_cropped?.url || photo.variants.medium?.url || photo.original_url; } return ` <div class="cover-slide" data-index="${index}" style="min-width: 100%; height: 300px; position: relative;"> <img src="${imageUrl}" alt="${photo.name}" style="width: 100%; height: 100%; object-fit: cover;" loading="${index === 0 ? 'eager' : 'lazy'}"> </div> `; }).join('')} </div> ${this.state.photos.length > 1 ? ` <div class="cover-carousel-indicators" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2;"> ${this.state.photos.map((_, index) => ` <div class="carousel-indicator-container" data-index="${index}" style="position: relative; cursor: pointer;"> <div class="carousel-indicator ${index === 0 ? 'active' : ''}" data-index="${index}" aria-label="Go to slide ${index + 1}" style="width: 20px; height: 5px; border-radius: 3px; border: none; background: rgba(255,255,255,0.3); transition: all 0.3s; padding: 0; position: relative; overflow: hidden;"> <div class="carousel-progress-bar" style="position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,1); width: 0%; transition: width 0.1s linear;"></div> </div> </div> `).join('')} </div> <button class="carousel-control carousel-control-prev" aria-label="Previous photo" style="position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(0,0,0,0.5) !important; color: white !important; border: none !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 4px !important; cursor: pointer !important; opacity: 0; transition: opacity 0.3s; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important;"> <i class="fa fa-chevron-left"></i> </button> <button class="carousel-control carousel-control-next" aria-label="Next photo" style="position: absolute !important; right: 10px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(0,0,0,0.5) !important; color: white !important; border: none !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 4px !important; cursor: pointer !important; opacity: 0; transition: opacity 0.3s; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important;"> <i class="fa fa-chevron-right"></i> </button> ` : ''} </div> `; this.state.carouselElement.innerHTML = html; // If we have clones, start at index 1 (first real photo) if (this.state.photos.length > 1) { this.state.currentIndex = 0; const slides = this.state.carouselElement.querySelector('.cover-carousel-slides'); if (slides) { // Start at position 1 (first real photo after clone) slides.style.transition = 'none'; slides.style.transform = 'translateX(-100%)'; // Force reflow void slides.offsetHeight; slides.style.transition = `transform ${this.config.transitionDuration}ms ease`; } } // Initialize indicators and progress bars this.updateIndicators(); // Bind events and add styles this.bindEvents(); this.addStyles(); }, // Add necessary styles addStyles: function() { if (document.getElementById('cover-carousel-styles')) return; const style = document.createElement('style'); style.id = 'cover-carousel-styles'; style.textContent = ` .cover-carousel-wrapper:hover .carousel-control { opacity: 1 !important; } .carousel-control:hover { background: rgba(0,0,0,0.7) !important; } .carousel-indicator.active { background: rgba(255,255,255,0.3) !important; } .carousel-indicator.active .carousel-progress-bar { background: rgba(255,255,255,1) !important; } .carousel-indicator-container:hover .carousel-indicator { background: rgba(255,255,255,0.5) !important; } .cover-carousel-wrapper { margin-bottom: 20px; } .carousel-progress-bar { transition: width 0.1s linear !important; } `; document.head.appendChild(style); }, // Show placeholder when no photos showPlaceholder: function() { if (!this.state.carouselElement) return; // If not the owner and no photos, hide the entire cover photo container if (!this.isOwner) { const coverContainer = document.getElementById('profile-cover-photo-container'); if (coverContainer) { coverContainer.style.display = 'none'; } // Also hide the carousel element itself if (this.state.carouselElement) { this.state.carouselElement.style.display = 'none'; } return; } // Only show placeholder for profile owner const html = ` <div class="cover-carousel-placeholder" style="height: 300px; background-color: #e0e0e0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;"> <div style="text-align: center;"> <i class="fa fa-image fa-3x" style="color: #999;"></i> <p style="color: #666; margin-top: 10px;">You haven't added a cover photo yet</p> <button class="btn btn-primary btn-sm" onclick="CoverPhotoCarousel.openGalleryModal()"> <i class="fa fa-plus"></i> Add Cover Photo </button> </div> </div> `; this.state.carouselElement.innerHTML = html; }, // Start auto-rotation with single timer startAutoRotate: function() { if (this.state.photos.length <= 1) return; this.stopAutoRotate(); // Clear any existing interval // Reset progress bar to 0% first this.updateProgressBar(0); this.state.progressStartTime = Date.now(); this.state.intervalId = setInterval(() => { if (this.state.isPlaying && this.state.progressStartTime) { const elapsed = Date.now() - this.state.progressStartTime; const progress = Math.min((elapsed / this.config.autoRotateInterval) * 100, 100); // Update progress bar this.updateProgressBar(progress); // If we've reached 100%, transition to next slide if (progress >= 100) { this.nextSlide(); } } }, 16); // Update every 16ms (~60fps) for smooth animation }, // Stop auto-rotation stopAutoRotate: function() { if (this.state.intervalId) { clearInterval(this.state.intervalId); this.state.intervalId = null; } this.state.progressStartTime = null; }, // Update progress bar for current slide updateProgressBar: function(progress) { const currentIndicator = this.state.carouselElement.querySelector(`.carousel-indicator[data-index="${this.state.currentIndex}"]`); if (currentIndicator) { const progressBar = currentIndicator.querySelector('.carousel-progress-bar'); if (progressBar) { progressBar.style.width = progress + '%'; } } }, // Go to next slide nextSlide: function() { if (this.state.isTransitioning || this.state.photos.length <= 1) return; this.state.isTransitioning = true; this.state.currentIndex++; this.updateCarouselPosition(); // Handle infinite scroll if (this.state.currentIndex >= this.state.photos.length) { setTimeout(() => { const slides = this.state.carouselElement.querySelector('.cover-carousel-slides'); if (slides) { // Jump to first real photo slides.style.transition = 'none'; this.state.currentIndex = 0; slides.style.transform = 'translateX(-100%)'; // Force reflow void slides.offsetHeight; slides.style.transition = `transform ${this.config.transitionDuration}ms ease`; // Update indicators after the jump this.updateIndicators(); } this.state.isTransitioning = false; // Restart auto-rotation for the new slide this.startAutoRotate(); }, this.config.transitionDuration); } else { setTimeout(() => { this.state.isTransitioning = false; // Restart auto-rotation for the new slide this.startAutoRotate(); }, this.config.transitionDuration); } }, // Go to previous slide prevSlide: function() { if (this.state.isTransitioning || this.state.photos.length <= 1) return; this.state.isTransitioning = true; this.state.currentIndex--; this.updateCarouselPosition(); // Handle infinite scroll if (this.state.currentIndex < 0) { setTimeout(() => { const slides = this.state.carouselElement.querySelector('.cover-carousel-slides'); if (slides) { // Jump to last real photo slides.style.transition = 'none'; this.state.currentIndex = this.state.photos.length - 1; const offset = -100 * (this.state.currentIndex + 1); slides.style.transform = `translateX(${offset}%)`; // Force reflow void slides.offsetHeight; slides.style.transition = `transform ${this.config.transitionDuration}ms ease`; // Update indicators after the jump this.updateIndicators(); } this.state.isTransitioning = false; // Restart auto-rotation for the new slide this.startAutoRotate(); }, this.config.transitionDuration); } else { setTimeout(() => { this.state.isTransitioning = false; // Restart auto-rotation for the new slide this.startAutoRotate(); }, this.config.transitionDuration); } }, // Go to specific slide goToSlide: function(index) { if (this.state.isTransitioning) return; this.state.currentIndex = index; this.updateCarouselPosition(); this.updateIndicators(); this.startAutoRotate(); // Restart auto-rotation for the new slide }, // Update carousel position updateCarouselPosition: function() { const slides = this.state.carouselElement.querySelector('.cover-carousel-slides'); if (!slides) return; // Adjust offset for clones let offset; if (this.state.photos.length > 1) { // Account for the clone at the beginning offset = -100 * (this.state.currentIndex + 1); } else { offset = -100 * this.state.currentIndex; } slides.style.transform = `translateX(${offset}%)`; }, // Update indicators and progress bars updateIndicators: function() { const indicators = this.state.carouselElement.querySelectorAll('.carousel-indicator'); indicators.forEach((indicator, index) => { const isActive = index === this.state.currentIndex; indicator.classList.toggle('active', isActive); // Reset progress bar const progressBar = indicator.querySelector('.carousel-progress-bar'); if (progressBar) { progressBar.style.width = '0%'; } }); }, // Bind events bindEvents: function() { if (!this.state.carouselElement) { return; } // Remove any existing event listeners first if (this.state.clickHandler) { this.state.carouselElement.removeEventListener('click', this.state.clickHandler); } if (this.state.mouseenterHandler) { this.state.carouselElement.removeEventListener('mouseenter', this.state.mouseenterHandler); } if (this.state.mouseleaveHandler) { this.state.carouselElement.removeEventListener('mouseleave', this.state.mouseleaveHandler); } // Single click handler for all carousel clicks this.state.clickHandler = (e) => { // Handle control clicks first if (e.target.closest('.carousel-control-prev')) { e.stopPropagation(); e.preventDefault(); this.prevSlide(); // Reset auto-rotate timer this.startAutoRotate(); return; } else if (e.target.closest('.carousel-control-next')) { e.stopPropagation(); e.preventDefault(); this.nextSlide(); // Reset auto-rotate timer this.startAutoRotate(); return; } else if (e.target.classList.contains('carousel-indicator') || e.target.closest('.carousel-indicator-container')) { e.stopPropagation(); e.preventDefault(); const indicator = e.target.classList.contains('carousel-indicator') ? e.target : e.target.closest('.carousel-indicator-container').querySelector('.carousel-indicator'); const index = parseInt(indicator.dataset.index); this.goToSlide(index); // Reset auto-rotate timer this.startAutoRotate(); return; } // If we got here, it's a click on the carousel image - open modal this.openGalleryModal(); }; this.state.carouselElement.addEventListener('click', this.state.clickHandler); // Pause on hover if (this.config.pauseOnHover) { this.state.mouseenterHandler = () => { this.state.isPlaying = false; }; this.state.mouseleaveHandler = () => { this.state.isPlaying = true; // Resume by restarting the timer with the remaining time if (this.state.progressStartTime) { const elapsed = Date.now() - this.state.progressStartTime; const remaining = this.config.autoRotateInterval - elapsed; if (remaining > 0) { this.state.progressStartTime = Date.now() - elapsed; } } }; this.state.carouselElement.addEventListener('mouseenter', this.state.mouseenterHandler); this.state.carouselElement.addEventListener('mouseleave', this.state.mouseleaveHandler); } // Handle window resize let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { this.renderCarousel(); }, 250); }); }, // Open gallery modal openGalleryModal: function() { if (window.CoverPhotoGallery) { // Share carousel photos with the gallery modal if needed if (this.state.photos.length > 0 && window.CoverPhotoGallery.state.photos.length === 0) { window.CoverPhotoGallery.state.photos = [...this.state.photos]; } // Open modal if: // 1. Owner (can always open to add/manage photos) // 2. Any user when there are photos to view (1 or more) if (window.CoverPhotoGallery.isOwner || this.state.photos.length > 0) { // Set the current index in the gallery to match carousel window.CoverPhotoGallery.state.currentIndex = this.state.currentIndex; window.CoverPhotoGallery.openModal(); } } }, // Refresh carousel (called when photos are updated) refresh: function() { this.stopAutoRotate(); this.state.currentIndex = 0; this.loadCoverPhotos(); }, // Render photos (called when photos are updated from gallery) renderPhotos: function() { if (this.state.photos.length > 0) { this.renderCarousel(); if (this.state.photos.length > 1) { this.startAutoRotate(); } } else { this.renderPlaceholder(); } }, // Destroy carousel destroy: function() { this.stopAutoRotate(); if (this.state.carouselElement) { this.state.carouselElement.innerHTML = ''; } this.state.isInitialized = false; } }; // =================================================================== // SIMPLE INITIALIZATION - SINGLE SOURCE OF TRUTH // =================================================================== // Initialize carousel when data is available (function() { // Get isOwner from PHP - use $thisSelf which is the original value before preview mode const isOwner = false; // Simple function to try initialization function tryInitialize() { // Get required data from single source of truth const userSlug = window._phpVars?.profile_slug; const authToken = window._phpVars?.bearer_token; if (userSlug) { window.CoverPhotoCarousel.initialize(userSlug, authToken, isOwner); return true; } return false; } // Try immediate initialization if (!tryInitialize()) { // If data not available, wait for DOM ready and try again if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', tryInitialize); } else { // DOM already ready, try once more after short delay setTimeout(tryInitialize, 100); } } })(); </script> <style> .user-statistic { background:#2884c6; padding:15px 0 15px; color: #fff; margin-top: -15px; border-right:1px solid #fff; margin-bottom: 20px; } .user-statistic strong { font-weight: lighter; font-size: 16px; } .user-statistic i { margin-right: 5px; } .user-statistic.last-child { border:none; } .user-statistic a { color: #fff; text-decoration: underline; } .display-none { display: none; } /* Empty state styles */ .empty-state-message { /* text-align: center; padding: 30px; */ color: #6c757d; } .empty-state-message .btn { margin-top: 10px; } .empty-state-message p { margin-bottom: 0; } /* Unified Profile Card Styling System */ /* Base card styling */ .profile-card { margin-bottom: 20px; padding: 20px; background-color: #f9f9f9; border-radius: 8px; } /* Card header */ .profile-card-header { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } /* Card title */ .profile-card-title { color: #333333; font-size: 16px; font-weight: 500; margin: 0; } /* Card metadata (dates, company names, etc.) */ .profile-card-meta { color: #666666; font-size: 14px; margin-bottom: 8px; } /* Card description/content */ .profile-card-content { color: #333333; font-size: 14px; line-height: 1.5; } /* Status badges (convert to grayscale) */ .profile-badge { display: inline-block; padding: 4px 8px; font-size: 12px; border-radius: 4px; margin-left: 10px; } .profile-badge-primary { background-color: #e5e5e5; padding: 4px 8px; margin-left: 8px; border-radius: 100vw; color: #333333; font-size: 12px; } .profile-badge-secondary { background-color: #f5f5f5; color: #666666; font-size: 12px; text-transform: uppercase; } /* Icons (grayscale) */ .profile-card-icon { color: #666666; margin-right: 8px; } /* See more/less buttons */ .profile-see-more-btn { color: #333333; text-decoration: none; border: none; outline: none; box-shadow: none; background: none; padding: 0; font-size: 14px; cursor: pointer; } .profile-see-more-btn:hover { color: #000000; text-decoration: underline; } /* Empty state styling */ .profile-empty-state { text-align: center; padding: 30px; color: #666666; } /* Loading state styles */ .profile-loading-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; } .loading-spinner { width: 50px; height: 50px; border: 3px solid #f3f3f3; border-top: 3px solid #2884c6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { margin-top: 20px; color: #666; font-size: 16px; } /* Error state styles */ .profile-error-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; z-index: 1000; } .error-icon { font-size: 48px; margin-bottom: 20px; } .error-message { color: #666; font-size: 18px; margin-bottom: 20px; } .retry-button { background: #2884c6; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; } .retry-button:hover { background: #1f6ba0; } </style>   <div class="panel panel-large" id="profile-bio-section-panel"> <div class="panel-heading"> <h3 class="panel-title" id="profile-bio-section-title">About Richard</h3> </div> <div class="panel-body" id="profile-bio-section-body">  <div id="profile-bio-content-display"> <div class="loading-state text-center" style="padding: 20px;"> <i class="fa fa-spinner fa-spin"></i> Loading bio information... </div> </div>  <div class="row edit_bio" style="display: none;" id="profile-bio-edit-form"> <div class="col-sm-24">  <p> <strong>Company:</strong> <div class="form-group"> <input type="text" name="profile[company]" class="form-control input-sm" value="Richard Paul Skinner Productions"> </div> </p> <p> <strong>Title:</strong> <div class="form-group"> <input type="text" name="profile[company_title]" class="form-control input-sm" value=""> </div> </p> <p> <strong>Lives in:</strong> <div class="form-group"> <input type="hidden" name="profile[city]" class="form-control select2-city" data-placeholder="Select a location..." style="width: 100%" value="Bath, United Kingdom" data-options="{"Bath, United Kingdom":"Bath, United Kingdom"}"> </div> </p>  <p> <strong>Unique traits:</strong> <div class="form-group"> <textarea name="profile[unique_traits]" class="form-control input-sm autosize"></textarea> </div> </p> </div>    <div class="col-sm-24"> <a class="btn btn-default" href="javascript:void(0)" onclick="toggleBioEdit(false)">Cancel</a> <button type="button" class="legacy-profile-submit btn btn-success" onclick="saveProfileChanges(event)">Save changes</button> </div> </div> </div> </div> <script> // Make session ID available to JavaScript (from PHP) window._currentSessionId = ''; </script> <script> /** * Bio Management System - Staging Environment * JavaScript rendering with backend API integration */ // Bio data and rendering functions window.BioManager = { /** * Initialize bio content with PHP data, then enhance with JavaScript data */ init() { // Render initial content from PHP data this.renderInitialContent(); }, /** * Render initial bio content using PHP data */ renderInitialContent() { const phpVars = window._phpVars; if (!phpVars) { return; } // Transform PHP data to match our expected structure const bioData = { bio: '', // Never use legacy bio, always start empty until API loads unique_traits: phpVars.unique_traits || '', goals: { goal_statement: phpVars.goals_data?.goal_statement || '', ideal_ip: phpVars.goals_data?.ideal_ip || '' }, user_info: phpVars.user_info || {} }; this.renderBioContent(bioData); }, /** * Render bio content using JavaScript data (enhanced or initial) */ renderBioContent(bioData) { // Guard against undefined bioData if (!bioData) { bioData = {}; } const contentContainer = document.getElementById('profile-bio-content-display'); if (!contentContainer) { return; } // Get is_self from PHP vars const isSelf = window._phpVars && window._phpVars.is_self; // Extract bio information from data const bio = bioData.bio || ''; const uniqueTraits = bioData.unique_traits || ''; const goalsData = bioData.goals || {}; const userInfo = bioData.user_info || {}; let bioHTML = ''; // Main bio section if (isSelf || bio) { bioHTML += '<div class="bio-view-mode" style="margin-bottom: 20px; color: #333333;">'; if (bio) { // First escape HTML to prevent XSS let bioText = this.escapeHtml(bio); // Convert double newlines to paragraph breaks, single newlines to <br> bioText = bioText.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>'); // Wrap in paragraph tags bioHTML += '<p>' + bioText + '</p>'; } else { // Show "not listed" for both self and guests (no edit link) bioHTML += '<strong>Bio</strong><p><em>not listed</em></p>'; } bioHTML += '</div>'; } // Unique traits if (uniqueTraits) { bioHTML += ` <div class="bio-view-mode"> <p><strong>Unique traits:</strong> ${this.escapeHtml(uniqueTraits)}</p> </div> `; } // Goals & Interests content if (goalsData.goal_statement || goalsData.ideal_ip) { bioHTML += '<div class="bio-view-mode goals-section" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e9ecef;">'; if (goalsData.goal_statement) { bioHTML += ` <div class="goal-statement" style="margin-bottom: 20px;"> <h5 style="color: #333333; margin-bottom: 8px; font-size: 16px;">Career Goals</h5> <p style="margin-bottom: 0; color: #333333;">${this.escapeHtml(goalsData.goal_statement)}</p> </div> `; } if (goalsData.ideal_ip) { bioHTML += ` <div class="ideal-ip" style="margin-bottom: 10px;"> <h5 style="color: #333333; margin-bottom: 8px; font-size: 16px;">Ideal Intellectual Properties</h5> <p style="margin-bottom: 0; color: #333333;">${this.escapeHtml(goalsData.ideal_ip)}</p> </div> `; } bioHTML += '</div>'; } // Footer attributes section // Use the full profile data if available, otherwise use bioData const profileDataForFooter = bioData._fullProfileData || bioData; bioHTML += this.renderBioFooter(profileDataForFooter, isSelf); // Update content contentContainer.innerHTML = bioHTML; }, /** * Render bio footer with personal attributes */ renderBioFooter(profileData, isSelf) { // Get physical attributes from the new API structure const physicalAttrs = profileData.physical_attributes || {}; // Check if any attributes exist for guests if (!isSelf) { const hasAnyAttribute = physicalAttrs.gender || physicalAttrs.height_feet !== null || physicalAttrs.weight_lbs || physicalAttrs.body_type || physicalAttrs.hair_color || physicalAttrs.hair_length || physicalAttrs.eye_color || (physicalAttrs.ethnicities && physicalAttrs.ethnicities.length > 0); // Return empty string if guest and no attributes if (!hasAnyAttribute) { return ''; } } let footerHTML = '<div class="bio-view-mode panel-footer" style="color:#666 !important;"><div class="row small">'; // Helper function to render attribute const renderAttribute = (label, value, emptyAction = null) => { if (isSelf || value) { let displayValue = value; if (!value && isSelf && emptyAction) { displayValue = `<em><a href="javascript:void(0)" onclick="${emptyAction}">not listed</a></em>`; } else if (!value) { displayValue = '<em>not listed</em>'; } return ` <div class="col-md-3 col-sm-6 col-xs-8 col-attributes"> <strong>${label}:</strong><br> ${displayValue} </div> `; } return ''; }; // Helper to get display label from API value const getGenderLabel = (value) => { const labels = { 'male': 'Male', 'female': 'Female', 'non_binary': 'Non-binary' }; return labels[value] || value; }; const getBodyTypeLabel = (value) => { const labels = { 'athletic': 'Athletic', 'average': 'Average', 'heavyset': 'Heavyset', 'slim': 'Slim' }; return labels[value] || value; }; const getEyeColorLabel = (value) => { const labels = { 'black': 'Black', 'blue': 'Blue', 'brown': 'Brown', 'gray': 'Gray', 'green': 'Green', 'hazel': 'Hazel', 'mixed': 'Mixed' }; return labels[value] || value; }; const getHairColorLabel = (value) => { const labels = { 'black': 'Black', 'blonde': 'Blonde', 'brown': 'Brown', 'grey': 'Grey', 'other': 'Other', 'red': 'Red', 'salt_pepper': 'Salt/Pepper', 'silver': 'Silver', 'white': 'White' }; return labels[value] || value; }; const getHairLengthLabel = (value) => { const labels = { 'bald': 'Bald', 'chin_length': 'Chin Length', 'long': 'Long', 'medium': 'Medium', 'receding': 'Receding', 'short': 'Short', 'shoulder_length': 'Shoulder Length' }; return labels[value] || value; }; // Gender const genderDisplay = physicalAttrs.gender ? getGenderLabel(physicalAttrs.gender) : null; footerHTML += renderAttribute('Gender', genderDisplay, 'openPhysicalAttributesTab()'); // Height let heightDisplay = null; if (physicalAttrs.height_feet !== null && physicalAttrs.height_feet !== undefined) { heightDisplay = physicalAttrs.height_feet + "'"; if (physicalAttrs.height_inches) { heightDisplay += " " + physicalAttrs.height_inches + '"'; } } footerHTML += renderAttribute('Height', heightDisplay, 'openPhysicalAttributesTab()'); // Weight const weightDisplay = physicalAttrs.weight_lbs ? physicalAttrs.weight_lbs + ' lbs' : null; footerHTML += renderAttribute('Weight', weightDisplay, 'openPhysicalAttributesTab()'); // Body type const bodyTypeDisplay = physicalAttrs.body_type ? getBodyTypeLabel(physicalAttrs.body_type) : null; footerHTML += renderAttribute('Body type', bodyTypeDisplay, 'openPhysicalAttributesTab()'); // Hair Color const hairColorDisplay = physicalAttrs.hair_color ? getHairColorLabel(physicalAttrs.hair_color) : null; footerHTML += renderAttribute('Hair color', hairColorDisplay, 'openPhysicalAttributesTab()'); // Hair Length const hairLengthDisplay = physicalAttrs.hair_length ? getHairLengthLabel(physicalAttrs.hair_length) : null; footerHTML += renderAttribute('Hair length', hairLengthDisplay, 'openPhysicalAttributesTab()'); // Eyes const eyeColorDisplay = physicalAttrs.eye_color ? getEyeColorLabel(physicalAttrs.eye_color) : null; footerHTML += renderAttribute('Eyes', eyeColorDisplay, 'openPhysicalAttributesTab()'); // Ethnicity let ethnicityDisplay = null; if (physicalAttrs.ethnicities && physicalAttrs.ethnicities.length > 0) { ethnicityDisplay = physicalAttrs.ethnicities.map(e => e.name).join(', '); } footerHTML += renderAttribute('Ethnicity', ethnicityDisplay, 'openPhysicalAttributesTab()'); footerHTML += '</div></div>'; return footerHTML; }, /** * HTML escape function */ escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text ? text.toString().replace(/[&<>"']/g, function(m) { return map[m]; }) : ''; } }; /** * Update bio content function (called from modal after save) * Uses the new API data structure directly */ window.updateBioContent = function(profileData) { if (!profileData || !window.BioManager) return; // Transform the profile data to match BioManager's expected structure const bioData = { bio: profileData.bio || '', unique_traits: profileData.unique_traits || '', goals: { goal_statement: profileData.goal_statement || '', ideal_ip: profileData.ideal_ip_statement || '' }, user_info: profileData.user || {}, // Add the full profile data for physical attributes physical_attributes: profileData.physical_attributes || {} }; // Store the full profile data for renderBioFooter bioData._fullProfileData = profileData; // Re-render the bio content with updated data window.BioManager.renderBioContent(bioData); // Also update tagline if it exists const taglineElement = document.getElementById('profile-bio-tagline-display'); if (taglineElement && profileData.tagline !== undefined) { taglineElement.textContent = profileData.tagline || ''; } } // Track original form values and dirty state let originalFormValues = {}; let dirtyFields = new Set(); /** * Initialize form change tracking */ function initializeFormTracking() { const bioContainer = document.getElementById('profile-bio-edit-form'); if (!bioContainer) return; // Get current user ID from PHP vars const userId = window._phpVars && window._phpVars.user_info && window._phpVars.user_info.uid; if (!userId) { console.error('User ID not available for form initialization'); return; } // Load fresh profile data from API and populate form // Include version parameter if present in URL const urlParams = new URLSearchParams(window.location.search); const version = urlParams.get('version'); const profileGetUrl = '/sites/stage32.com/modules/s32/ajax/user/profile-get.php?uid=' + userId + (version ? '&version=' + version : ''); fetch(profileGetUrl) .then(response => response.json()) .then(data => { if (data.success) { // Populate form fields with fresh data const companyField = bioContainer.querySelector('input[name="profile[company]"]'); const titleField = bioContainer.querySelector('input[name="profile[company_title]"]'); const locationField = bioContainer.querySelector('input[name="profile[city]"]'); const traitsField = bioContainer.querySelector('textarea[name="profile[unique_traits]"]'); if (companyField) companyField.value = data.data.company || ''; if (titleField) titleField.value = data.data.company_title || ''; if (locationField) locationField.value = data.data.location || ''; if (traitsField) traitsField.value = data.data.unique_traits || ''; // Store as initial values for dirty tracking originalFormValues = { company: data.data.company || '', company_title: data.data.company_title || '', location: data.data.location || '', unique_traits: data.data.unique_traits || '' }; // Clear dirty fields dirtyFields.clear(); // Add change listeners to track what user modifies bioContainer.addEventListener('input', trackFieldChanges); bioContainer.addEventListener('change', trackFieldChanges); } else { console.error('Failed to load profile data:', data.error); // Show error to user if (window.showToast) { window.showToast('Error loading profile data: ' + (data.error || 'Unknown error'), 'error'); } else { alert('Error loading profile data: ' + (data.error || 'Unknown error')); } } }) .catch(error => { console.error('Error loading profile data:', error); // Show network error to user if (window.showToast) { window.showToast('Network error loading profile data', 'error'); } else { alert('Network error loading profile data'); } }); } /** * Track which fields have been changed by the user */ function trackFieldChanges(event) { const field = event.target; const fieldName = field.name; // Map form field names to API field names const fieldMapping = { 'profile[company]': 'company', 'profile[company_title]': 'company_title', 'profile[city]': 'location', 'profile[unique_traits]': 'unique_traits' }; const apiFieldName = fieldMapping[fieldName]; if (apiFieldName) { // Get current value const currentValue = field.value; const originalValue = originalFormValues[apiFieldName]; // Check if value actually changed from original const hasChanged = currentValue !== originalValue; console.log(`Field ${apiFieldName} tracking:`, { original: originalValue, current: currentValue, hasChanged: hasChanged }); if (hasChanged) { dirtyFields.add(apiFieldName); } else { dirtyFields.delete(apiFieldName); } } } /** * Save profile changes using new endpoint */ function saveProfileChanges(event) { if (event) { event.preventDefault(); } console.log('saveProfileChanges called'); // Always use the bio edit container for field queries since that's where our fields are const bioContainer = document.getElementById('profile-bio-edit-form'); console.log('Bio container:', bioContainer); if (!bioContainer) { console.error('Bio edit container not found'); alert('Error: Bio edit form not found'); return false; } console.log('Using bio container for field queries:', bioContainer); console.log('Dirty fields:', dirtyFields); // Don't send anything if no fields changed if (dirtyFields.size === 0) { // No changes made, just close edit mode toggleBioEdit(false); return false; } // Build payload with only dirty fields const sessionId = getSessionId(); console.log('Session ID retrieved:', sessionId); const profileData = { session_id: sessionId }; // Track if all dirty fields are being cleared (set to empty) const dirtyFieldValues = []; // Add only the fields that actually changed for (const fieldName of dirtyFields) { let fieldValue; switch(fieldName) { case 'company': const companyField = bioContainer.querySelector('input[name="profile[company]"]'); fieldValue = companyField ? companyField.value || '' : ''; profileData.company = fieldValue; console.log('Company field value:', fieldValue); break; case 'company_title': const titleField = bioContainer.querySelector('input[name="profile[company_title]"]'); fieldValue = titleField ? titleField.value || '' : ''; profileData.company_title = fieldValue; console.log('Title field value:', fieldValue); break; case 'location': const locationField = bioContainer.querySelector('input[name="profile[city]"]'); fieldValue = locationField ? locationField.value || '' : ''; profileData.location = fieldValue; console.log('Location field value:', fieldValue); break; case 'unique_traits': const traitsField = bioContainer.querySelector('textarea[name="profile[unique_traits]"]'); fieldValue = traitsField ? traitsField.value || '' : ''; profileData.unique_traits = fieldValue; console.log('Unique traits field value:', fieldValue); break; } dirtyFieldValues.push(fieldValue); } // Check if user is clearing ALL dirty fields const allDirtyFieldsEmpty = dirtyFieldValues.every(value => { if (Array.isArray(value)) { return value.length === 0; } return value === '' || value === null || value === undefined; }); // Warn user if they're about to clear all modified fields if (allDirtyFieldsEmpty && dirtyFields.size > 0) { const fieldNames = Array.from(dirtyFields).join(', '); const confirmMessage = `You are about to clear all values for: ${fieldNames}. This will remove this information from your profile. Are you sure you want to continue?`; if (!confirm(confirmMessage)) { return false; // User cancelled } } console.log('Final payload being sent:', profileData); // Show loading state const saveButton = document.querySelector('#profile-bio-edit-form button.legacy-profile-submit'); const originalText = saveButton.textContent; saveButton.textContent = 'Saving...'; saveButton.disabled = true; // Send request to new endpoint fetch('/sites/stage32.com/modules/s32/ajax/user/profile-update.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(profileData) }) .then(response => response.json()) .then(data => { if (data.success) { // Show success toast if (window.showToast) { window.showToast('Profile updated successfully', 'success'); } // Hide edit form toggleBioEdit(false); // Instead of reloading page, refresh the form with fresh data // This ensures we always have the latest values when user opens edit mode again console.log('Profile update successful, data will be refreshed on next edit'); } else { // Show error toast if (window.showToast) { window.showToast('Error: ' + (data.error || 'Failed to update profile'), 'error'); } else { alert('Error: ' + (data.error || 'Failed to update profile')); } } }) .catch(error => { console.error('Profile update error:', error); if (window.showToast) { window.showToast('Network error occurred', 'error'); } else { alert('Network error occurred'); } }) .finally(() => { // Restore button state saveButton.textContent = originalText; saveButton.disabled = false; }); return false; // Prevent default form submission } /** * Get session ID for API calls * This function will need to be implemented based on how sessions are managed */ function getSessionId() { // Use session ID provided by PHP (works around HttpOnly cookie restriction) if (window._currentSessionId) { console.log('Using PHP-provided session ID:', window._currentSessionId); return window._currentSessionId; } console.error('No session ID available from PHP'); return ''; } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', function() { if (window.BioManager) { window.BioManager.init(); } // Initialize form tracking and load fresh data initializeFormTracking(); }); </script>    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> <style> /* Life Experience card styles matching Featured Projects */ #life-experience-panel .profile-card { background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Searchable dropdown styles */ #life-experience-panel .searchable-dropdown-container { position: relative; } #life-experience-panel .searchable-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #dee2e6; border-radius: 4px; max-height: 300px; overflow-y: auto; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: none; } #life-experience-panel .searchable-dropdown .dropdown-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; } #life-experience-panel .searchable-dropdown .dropdown-item:hover { background-color: #f8f9fa; } #life-experience-panel .searchable-dropdown .dropdown-item:last-child { border-bottom: none; } #life-experience-panel .dropdown-item-title { font-weight: 500; color: #212529; margin-bottom: 2px; } #life-experience-panel .dropdown-item-description { font-size: 12px; color: #6c757d; line-height: 1.4; } #life-experience-panel .card-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef; } #life-experience-panel .card-actions button { border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; margin-right: 8px; } #life-experience-panel .edit-experience-btn { background: #6c757d; color: white; } #life-experience-panel .edit-experience-btn:hover { background: #5a6268; } #life-experience-panel .delete-experience-btn { background: #dc3545; color: white; } #life-experience-panel .delete-experience-btn:hover { background: #c82333; } #life-experience-panel .experience-edit-content { background: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px; } #life-experience-panel .experience-edit-content .form-actions { margin-top: 10px; } #life-experience-panel .experience-edit-content .btn { margin-right: 5px; } /* Sorting mode styles */ #life-experience-panel.sorting-mode .card-actions { display: none !important; } #life-experience-panel.sorting-mode .profile-card { cursor: grab; user-select: none; } #life-experience-panel.sorting-mode .profile-card:active { cursor: grabbing; } #life-experience-panel.sorting-mode .profile-card:hover { background: #f8f9fa; } .life-experience-ghost { opacity: 0.4; background: #f0f0f0 !important; } .life-experience-chosen { box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .life-experience-drag { opacity: 0; } .drag-handle { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #6c757d; font-size: 16px; display: none; } #life-experience-panel.sorting-mode .drag-handle { display: block; } #life-experience-panel.sorting-mode .profile-card { padding-left: 35px; } /* Edit Order button hover effect */ #edit-life-experience-order-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } </style> <div class="panel panel-large panel-tomasz" id="life-experience-panel"> <div class="panel-heading"> <div class="pull-right"> </div> <h3 class="panel-title" style="font-weight: bold;"> Life Experience </h3> </div> <div class="panel-body">   <div id="life-experience-content"> <div class="loading-state text-center" style="padding: 20px;"> <i class="fa fa-spinner fa-spin"></i> Loading life experiences... </div> </div> </div> </div> <script> /** * Life Experience Management System - Staging Environment * Self-contained component for displaying and managing life experiences */ /** * Life Experience API Class * Handles all API communication for life experiences */ class LifeExperienceAPI { constructor() { this.baseURL = 'https://backend.stage32.com/api/v2'; this.referenceDataCache = null; this.referenceDataCacheTime = null; this.cacheExpiryMinutes = 15; } /** * Get auth token from single source of truth */ getAuthToken() { const token = window._phpVars?.bearer_token; if (!token) { throw new Error('Authentication required'); } return token; } /** * Make authenticated API request * @param {string} endpoint - API endpoint * @param {Object} options - Fetch options * @returns {Promise<Response>} */ async makeAuthenticatedRequest(endpoint, options = {}) { const token = this.getAuthToken(); const response = await fetch(`${this.baseURL}${endpoint}`, { ...options, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, ...options.headers } }); // Handle token expiration if (response.status === 401) { throw new Error('Authentication token expired. Please refresh the page.'); } return response; } /** * Get reference data for life experiences (cached) * @returns {Promise<Object>} Reference data */ async getReferenceData() { // Check cache first if (this.referenceDataCache && this.referenceDataCacheTime) { const cacheAge = (Date.now() - this.referenceDataCacheTime) / 1000 / 60; // in minutes if (cacheAge < this.cacheExpiryMinutes) { return this.referenceDataCache; } } try { // Use authenticated request for reference data const response = await this.makeAuthenticatedRequest('/reference/life-experiences'); if (!response.ok) { throw new Error(`Failed to fetch reference data: ${response.status}`); } const result = await response.json(); // Cache the result this.referenceDataCache = result; this.referenceDataCacheTime = Date.now(); return result; } catch (error) { throw error; } } /** * Add new life experience * @param {string} userSlug - User slug * @param {Object} data - Life experience data * @returns {Promise<Object>} */ async addLifeExperience(userSlug, data) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/life-experiences`, { method: 'POST', body: JSON.stringify(data) }); if (response.status === 409) { const errorData = await response.json(); const error = new Error(errorData.message || 'This life experience is already associated with the user.'); error.isDuplicate = true; throw error; } if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to add life experience: ${response.status}`); } const result = await response.json(); return result; } /** * Update life experience * @param {number} lifeExperienceId - Life experience ID * @param {Object} data - Update data * @returns {Promise<Object>} */ async updateLifeExperience(lifeExperienceId, data) { const response = await this.makeAuthenticatedRequest(`/life-experiences/${lifeExperienceId}`, { method: 'PUT', body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to update life experience: ${response.status}`); } const result = await response.json(); return result; } /** * Delete life experience * @param {number} lifeExperienceId - Life experience ID * @returns {Promise<boolean>} */ async deleteLifeExperience(lifeExperienceId) { const response = await this.makeAuthenticatedRequest(`/life-experiences/${lifeExperienceId}`, { method: 'DELETE' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to delete life experience: ${response.status}`); } return true; } /** * Update sort order for life experiences * @param {string} userSlug - User slug * @param {Array<number>} lifeExperienceIds - Array of IDs in desired order * @returns {Promise<Object>} */ async updateSortOrder(userSlug, lifeExperienceIds) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/life-experiences/sort-order`, { method: 'PUT', body: JSON.stringify({ life_experience_ids: lifeExperienceIds }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to update sort order: ${response.status}`); } const result = await response.json(); return result; } } /** * Life Experience Manager * Manages UI and business logic for life experiences */ window.LifeExperienceManager = { api: new LifeExperienceAPI(), referenceData: null, isInitialized: false, isSortMode: false, sortable: null, originalOrder: [], originalContent: null, /** * Initialize the life experience management system */ async init() { if (this.isInitialized) { return; } // Only fetch reference data if user is self (for add/edit functionality) const isSelf = window._phpVars && window._phpVars.is_self; if (isSelf) { try { const refData = await this.api.getReferenceData(); this.referenceData = refData.data || []; } catch (error) { // Continue without reference data - display will still work this.referenceData = []; } // Always bind event handlers for self, even if reference data fails this.bindEvents(); } this.isInitialized = true; }, /** * Bind event handlers */ bindEvents() { // Edit Order button click handler const editOrderBtn = document.getElementById('edit-life-experience-order-btn'); if (editOrderBtn) { // Store the handler as a bound method so we can remove it later this.handleEditOrderClick = (e) => { e.preventDefault(); e.stopPropagation(); if (this.isSortMode) { this.cancelSort(); } else { this.startSortMode(); } }; editOrderBtn.addEventListener('click', this.handleEditOrderClick); } // Add button click handler const addBtn = document.getElementById('add-life-experience-btn'); if (addBtn) { addBtn.addEventListener('click', (e) => { e.preventDefault(); this.showAddForm(); }); } // Cancel button click handler const cancelBtn = document.getElementById('cancel-add-life-experience'); if (cancelBtn) { cancelBtn.addEventListener('click', (e) => { e.preventDefault(); this.hideAddForm(); }); } // Save button click handler const saveBtn = document.getElementById('save-life-experience-btn'); if (saveBtn) { saveBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); this.handleAddSubmit(); }); } // Setup searchable dropdown this.setupSearchableDropdown(); }, /** * Setup searchable dropdown for life experience selection */ setupSearchableDropdown() { const searchInput = document.getElementById('life-experience-search'); const dropdown = document.getElementById('life-experience-dropdown'); const hiddenInput = document.getElementById('life-experience-id-hidden'); if (!searchInput || !dropdown) return; // Function to show dropdown with all or filtered items const showDropdown = (searchTerm = '') => { if (!this.referenceData) return; // Sort alphabetically by name (no grouping by category) const sortedData = [...this.referenceData].sort((a, b) => a.name.localeCompare(b.name) ); let html = ''; let hasResults = false; sortedData.forEach(exp => { // Filter by search term in both name and description const nameMatch = exp.name.toLowerCase().includes(searchTerm.toLowerCase()); const descMatch = exp.description && exp.description.toLowerCase().includes(searchTerm.toLowerCase()); if (!searchTerm || nameMatch || descMatch) { hasResults = true; // Escape values for HTML attributes const escapedName = this.escapeHtml(exp.name); const escapedDesc = this.escapeHtml(exp.description || ''); html += ` <div class="dropdown-item" data-id="${exp.id}" data-name="${escapedName}"> <div class="dropdown-item-title">${escapedName}</div> ${exp.description ? `<div class="dropdown-item-description">${escapedDesc}</div>` : ''} </div> `; } }); if (!hasResults) { html = '<div class="dropdown-item" style="text-align: center; color: #6c757d;">No matching experiences found</div>'; } dropdown.innerHTML = html; dropdown.style.display = 'block'; // Add click handlers to items dropdown.querySelectorAll('.dropdown-item[data-id]').forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const id = item.dataset.id; const name = item.dataset.name; // Set the selected value searchInput.value = name; hiddenInput.value = id; // Hide dropdown dropdown.style.display = 'none'; // Clear any validation error const errorElement = document.querySelector('.field-error[data-field="life_experience_id"]'); if (errorElement) { errorElement.textContent = ''; } }); }); }; // Show all options on focus/click searchInput.addEventListener('focus', () => showDropdown()); searchInput.addEventListener('click', () => showDropdown()); // Filter on input searchInput.addEventListener('input', function() { hiddenInput.value = ''; // Clear selection when typing showDropdown(this.value); }); // Hide dropdown on blur (with delay for clicks) searchInput.addEventListener('blur', function() { setTimeout(() => { dropdown.style.display = 'none'; }, 200); }); // Prevent form submission on enter in search field searchInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); } }); }, /** * Escape HTML for safe innerHTML use */ escapeHtml(text) { if (text === null || text === undefined) return ''; const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return String(text).replace(/[&<>"']/g, m => map[m]); }, /** * Show add form */ showAddForm() { const form = document.getElementById('add-life-experience-form'); const btn = document.getElementById('add-life-experience-btn'); const editOrderBtn = document.getElementById('edit-life-experience-order-btn'); if (form && btn) { form.style.display = 'block'; btn.style.display = 'none'; // Hide Edit Sort Order button when adding if (editOrderBtn) { editOrderBtn.style.display = 'none'; } this.clearFormErrors(); // Focus on search input const searchInput = document.getElementById('life-experience-search'); if (searchInput) { searchInput.focus(); } } }, /** * Hide add form */ hideAddForm() { const form = document.getElementById('add-life-experience-form'); const btn = document.getElementById('add-life-experience-btn'); const editOrderBtn = document.getElementById('edit-life-experience-order-btn'); if (form && btn) { form.style.display = 'none'; btn.style.display = 'inline-block'; // Show Edit Sort Order button again when done adding if (editOrderBtn) { editOrderBtn.style.display = 'inline-block'; } // Reset form fields manually since form tag is being stripped const hiddenInput = document.getElementById('life-experience-id-hidden'); const searchInput = document.getElementById('life-experience-search'); const textareaElement = document.querySelector('textarea[name="description"]'); if (hiddenInput) hiddenInput.value = ''; if (searchInput) searchInput.value = ''; if (textareaElement) textareaElement.value = ''; this.clearFormErrors(); } }, /** * Clear form errors */ clearFormErrors() { const errors = document.querySelectorAll('#add-life-experience-form .field-error'); errors.forEach(error => { error.textContent = ''; }); }, /** * Handle form submission */ async handleAddSubmit() { // Get values directly from input elements since form tag is being stripped const hiddenInput = document.getElementById('life-experience-id-hidden'); const searchInput = document.getElementById('life-experience-search'); const textareaElement = document.querySelector('textarea[name="description"]'); if (!hiddenInput || !textareaElement) { return; } const data = { life_experience_id: parseInt(hiddenInput.value), description: textareaElement.value.trim() }; // Validate if (!data.life_experience_id) { this.showFieldError('life_experience_id', 'Please select a life experience type'); return; } // Remove empty description if (!data.description) { delete data.description; } try { // Show loading state const submitBtn = document.getElementById('save-life-experience-btn'); const originalText = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Saving...'; // Make API call const userSlug = this.getCurrentUserSlug(); const response = await this.api.addLifeExperience(userSlug, data); // Hide form this.hideAddForm(); // Show success message this.showSuccessMessage('Life experience added successfully!'); // Update display with new experience await this.refreshDisplay(response.data); } catch (error) { // Use toast notifications for API errors if (error.isDuplicate) { this.showErrorMessage(error.message || 'This life experience has already been added'); } else { this.showErrorMessage('Failed to add life experience. Please try again.'); } } finally { // Restore button state const submitBtn = document.getElementById('save-life-experience-btn'); if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fa fa-save"></i> Save Life Experience'; } } }, /** * Show field error */ showFieldError(field, message) { const errorElement = document.querySelector(`.field-error[data-field="${field}"]`); if (errorElement) { errorElement.textContent = message; } }, /** * Show success message */ showSuccessMessage(message) { // Use ToastNotification if available if (window.ToastNotification) { ToastNotification.success(message); } else { alert(message); } }, /** * Show error message */ showErrorMessage(message) { // Use ToastNotification if available if (window.ToastNotification) { ToastNotification.error(message); } else { alert('Error: ' + message); } }, /** * Refresh display with new experience */ async refreshDisplay(newExperience) { try { // Get current profile data const profileData = window._jsProfileData || {}; // Add new experience to the beginning of the list if (!profileData.life_experiences) { profileData.life_experiences = []; } // Map the API response to display format to match existing structure const displayExperience = { id: newExperience.id, title: newExperience.life_experience?.name || '', name: newExperience.life_experience?.name || '', description: newExperience.description || '', life_experience: { name: newExperience.life_experience?.name || '', category: newExperience.life_experience?.category || 'General' } }; // Add to beginning of array profileData.life_experiences.unshift(displayExperience); // Update display await updateLifeExperience(profileData); // Update global data window._jsProfileData = profileData; } catch (error) { throw error; } }, /** * Get current user slug from single source of truth */ getCurrentUserSlug() { return window._phpVars?.profile_slug; }, /** * Get existing life experiences from profile data */ getExistingLifeExperiences() { return window._jsProfileData?.life_experiences || []; }, /** * Start editing a life experience */ startEdit(experienceId) { // Cancel any other open edits first this.cancelAllEdits(experienceId); // Debug: Check what's in the existing life experiences const allExperiences = this.getExistingLifeExperiences(); // Find the card const card = document.querySelector(`.profile-card[data-experience-id="${experienceId}"]`); if (!card) { return; } // Store original value for cancel const textarea = card.querySelector('.edit-description'); const currentExperience = this.getExistingLifeExperiences().find(exp => exp.id === experienceId); if (textarea && currentExperience) { textarea.dataset.originalValue = currentExperience.description || ''; } // Hide display content, show edit content const displayContent = card.querySelector('.experience-display-content'); const editContent = card.querySelector('.experience-edit-content'); if (displayContent) displayContent.style.display = 'none'; if (editContent) { editContent.style.display = 'block'; // Focus on textarea if (textarea) { textarea.focus(); textarea.setSelectionRange(textarea.value.length, textarea.value.length); } } // Hide edit button during edit const editBtn = card.querySelector('.edit-experience-btn'); if (editBtn) editBtn.style.display = 'none'; // Track currently editing ID this.currentlyEditingId = experienceId; }, /** * Cancel all other open edits except the specified one */ cancelAllEdits(exceptId = null) { // Find all cards that might be in edit mode const allCards = document.querySelectorAll('#life-experience-panel .profile-card'); allCards.forEach(card => { const cardId = parseInt(card.dataset.experienceId); // Skip the card we're about to edit if (cardId === exceptId) return; // Check if this card is in edit mode (edit content is visible) const editContent = card.querySelector('.experience-edit-content'); if (editContent && editContent.style.display === 'block') { // Cancel this edit this.cancelEdit(cardId); } }); }, /** * Cancel editing */ cancelEdit(experienceId) { const card = document.querySelector(`.profile-card[data-experience-id="${experienceId}"]`); if (!card) return; // Restore original value const textarea = card.querySelector('.edit-description'); if (textarea && textarea.dataset.originalValue !== undefined) { textarea.value = textarea.dataset.originalValue; } // Show display content, hide edit content const displayContent = card.querySelector('.experience-display-content'); const editContent = card.querySelector('.experience-edit-content'); if (displayContent) displayContent.style.display = 'block'; if (editContent) editContent.style.display = 'none'; // Show edit button again const editBtn = card.querySelector('.edit-experience-btn'); if (editBtn) editBtn.style.display = 'inline-block'; }, /** * Save edited life experience */ async saveEdit(experienceId) { const card = document.querySelector(`.profile-card[data-experience-id="${experienceId}"]`); if (!card) return; const textarea = card.querySelector('.edit-description'); if (!textarea) return; const newDescription = textarea.value.trim(); // Prepare update data const updateData = { description: newDescription || null }; try { // Show loading state const saveBtn = card.querySelector('.btn-primary'); const originalText = saveBtn.innerHTML; saveBtn.disabled = true; saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Saving...'; // Make API call const response = await this.api.updateLifeExperience(experienceId, updateData); // Update local data const experiences = this.getExistingLifeExperiences(); const expIndex = experiences.findIndex(exp => exp.id === experienceId); if (expIndex !== -1) { experiences[expIndex].description = newDescription; } // Update display content const displayContent = card.querySelector('.experience-display-content > div'); if (displayContent) { if (newDescription) { displayContent.innerHTML = this.escapeHtml(newDescription); displayContent.style.color = '#495057'; displayContent.style.fontStyle = 'normal'; } else { displayContent.innerHTML = 'No description provided'; displayContent.style.color = '#6c757d'; displayContent.style.fontStyle = 'italic'; } } // Update the textarea value to reflect the saved value // This ensures that if the user edits again, they see the current value if (textarea) { textarea.value = newDescription; textarea.dataset.originalValue = newDescription; } // Exit edit mode this.cancelEdit(experienceId); // Show success message this.showSuccessMessage('Life experience updated successfully!'); } catch (error) { this.showErrorMessage('Failed to update life experience. Please try again.'); } finally { // Restore button state const saveBtn = card.querySelector('.btn-primary'); if (saveBtn) { saveBtn.disabled = false; saveBtn.innerHTML = '<i class="fa fa-save"></i> Save'; } } }, /** * Confirm delete of life experience */ confirmDelete(experienceId, experienceName) { // Use native confirm for simplicity (can be replaced with modal later) const confirmed = confirm(`Are you sure you want to delete "${experienceName}"?\n\nThis action cannot be undone.`); if (confirmed) { this.deleteExperience(experienceId); } }, /** * Delete life experience */ async deleteExperience(experienceId) { try { // Find the card and add loading state const card = document.querySelector(`.profile-card[data-experience-id="${experienceId}"]`); if (card) { // Disable all buttons in the card const buttons = card.querySelectorAll('button'); buttons.forEach(btn => btn.disabled = true); // Add opacity to show it's being deleted card.style.opacity = '0.5'; card.style.transition = 'opacity 0.3s ease'; } // Make API call await this.api.deleteLifeExperience(experienceId); // Remove from local data const experiences = this.getExistingLifeExperiences(); const index = experiences.findIndex(exp => exp.id === experienceId); if (index !== -1) { experiences.splice(index, 1); } // Animate removal if (card) { // Fade out card.style.transition = 'all 0.3s ease'; card.style.opacity = '0'; card.style.transform = 'scale(0.95)'; // Remove after animation setTimeout(() => { card.remove(); // Check if we need to update the "See more" button this.updateSeeMoreButton(); // If no experiences left, show empty state if (experiences.length === 0) { const contentContainer = document.getElementById('life-experience-content'); if (contentContainer) { contentContainer.innerHTML = ` <div class="empty-state-message"> <p class="text-muted"><em>You haven't added any life experiences yet</em></p> </div> `; } } }, 300); } // Show success message this.showSuccessMessage('Life experience deleted successfully'); } catch (error) { // Restore card state const card = document.querySelector(`.profile-card[data-experience-id="${experienceId}"]`); if (card) { card.style.opacity = '1'; const buttons = card.querySelectorAll('button'); buttons.forEach(btn => btn.disabled = false); } this.showErrorMessage('Failed to delete life experience. Please try again.'); } }, /** * Update "See more" button after deletion */ updateSeeMoreButton() { const hiddenSection = document.querySelector('#life-experience-panel .experience-hidden'); const seeMoreBtn = document.querySelector('#life-experience-panel .profile-see-more-btn'); if (!hiddenSection || !seeMoreBtn) return; // Count remaining hidden experiences const hiddenCards = hiddenSection.querySelectorAll('.profile-card'); const visibleCards = document.querySelectorAll('#life-experience-content .experience-list > .profile-card'); // If we have less than 3 visible and some hidden, move one from hidden to visible if (visibleCards.length < 3 && hiddenCards.length > 0) { const firstHidden = hiddenCards[0]; const visibleContainer = document.querySelector('#life-experience-content .experience-list'); // Move the card before the hidden section hiddenSection.parentNode.insertBefore(firstHidden, hiddenSection); } // Update or hide the "See more" button const remainingHidden = hiddenSection.querySelectorAll('.profile-card').length; if (remainingHidden === 0) { // Hide the button and hidden section seeMoreBtn.style.display = 'none'; hiddenSection.style.display = 'none'; } else { // Update the count seeMoreBtn.innerHTML = `See ${remainingHidden} more <i class="fa fa-chevron-down"></i>`; } }, /** * Start sort mode */ startSortMode() { this.isSortMode = true; // Store original order and structure const contentDiv = document.getElementById('life-experience-content'); const allCards = document.querySelectorAll('#life-experience-panel .profile-card'); this.originalOrder = Array.from(allCards).map(card => ({ id: parseInt(card.dataset.experienceId), element: card.cloneNode(true) })); // Save the original content structure for restoration this.originalContent = contentDiv.innerHTML; // Add sorting mode class to panel const panel = document.getElementById('life-experience-panel'); if (panel) { panel.classList.add('sorting-mode'); } // Update button const editBtn = document.getElementById('edit-life-experience-order-btn'); if (editBtn) { // Remove the original event listener first if (this.handleEditOrderClick) { editBtn.removeEventListener('click', this.handleEditOrderClick); } editBtn.innerHTML = '<i class="fa fa-times"></i> Cancel'; editBtn.classList.remove('btn-primary'); editBtn.classList.add('btn-secondary'); // Add new cancel handler this.handleCancelClick = (e) => { e.preventDefault(); e.stopPropagation(); this.cancelSort(); }; editBtn.addEventListener('click', this.handleCancelClick); // Add Save Order button const saveBtn = document.createElement('button'); saveBtn.id = 'save-life-experience-order-btn'; saveBtn.className = 'btn btn-sm btn-success'; saveBtn.style.cssText = 'margin-left: 8px; user-select: none; transition: all 0.2s ease;'; saveBtn.innerHTML = '<i class="fa fa-save"></i> Save Order'; saveBtn.onclick = () => this.saveSort(); editBtn.parentNode.insertBefore(saveBtn, editBtn.nextSibling); } // Hide add button const addBtn = document.getElementById('add-life-experience-btn'); if (addBtn) addBtn.style.display = 'none'; // Create a single edit container with all cards let editContainer = document.getElementById('life-experience-edit-container'); if (!editContainer) { editContainer = document.createElement('div'); editContainer.id = 'life-experience-edit-container'; editContainer.className = 'experience-list'; // Clone all cards into the edit container allCards.forEach(card => { editContainer.appendChild(card.cloneNode(true)); }); // Replace content with edit container contentDiv.innerHTML = ''; contentDiv.appendChild(editContainer); } // Initialize SortableJS on the edit container this.sortable = new Sortable(editContainer, { animation: 150, draggable: '.profile-card', // Remove handle restriction - allows dragging from anywhere on the card ghostClass: 'life-experience-ghost', chosenClass: 'life-experience-chosen', dragClass: 'life-experience-drag', forceFallback: true, // Force fallback to avoid browser drag events preventOnFilter: true, onStart: (evt) => { evt.preventDefault(); evt.stopPropagation(); }, onChange: (evt) => { evt.preventDefault(); evt.stopPropagation(); }, onEnd: (evt) => { evt.preventDefault(); evt.stopPropagation(); // Order is automatically updated in DOM by SortableJS return false; } }); }, /** * Cancel sort mode and restore original order */ cancelSort() { // Restore original content structure const contentDiv = document.getElementById('life-experience-content'); if (contentDiv && this.originalContent) { contentDiv.innerHTML = this.originalContent; } this.exitSortMode(); }, /** * Save sort order */ async saveSort() { // Get new order from the edit container const editContainer = document.getElementById('life-experience-edit-container'); const cards = editContainer ? editContainer.querySelectorAll('.profile-card') : document.querySelectorAll('#life-experience-panel .profile-card'); const newOrder = Array.from(cards).map(card => parseInt(card.dataset.experienceId)); try { // Show loading state const saveBtn = document.getElementById('save-life-experience-order-btn'); if (saveBtn) { saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Saving...'; saveBtn.disabled = true; } // Make API call const userSlug = this.getCurrentUserSlug(); const response = await this.api.updateSortOrder(userSlug, newOrder); // Update local data with new order const experiences = this.getExistingLifeExperiences(); const reorderedExperiences = []; newOrder.forEach(id => { const exp = experiences.find(e => e.id === id); if (exp) reorderedExperiences.push(exp); }); // Update global data if (window._jsProfileData) { window._jsProfileData.life_experiences = reorderedExperiences; } // Show success message this.showSuccessMessage('Life experience order saved successfully!'); // Exit sort mode this.exitSortMode(); // Refresh display to show new order with proper hide/show await updateLifeExperience(window._jsProfileData || {}); } catch (error) { this.showErrorMessage('Failed to save order. Please try again.'); // Restore button state const saveBtn = document.getElementById('save-life-experience-order-btn'); if (saveBtn) { saveBtn.innerHTML = '<i class="fa fa-save"></i> Save Order'; saveBtn.disabled = false; } } }, /** * Exit sort mode */ exitSortMode() { this.isSortMode = false; // Remove sorting mode class const panel = document.getElementById('life-experience-panel'); if (panel) { panel.classList.remove('sorting-mode'); } // Restore button const editBtn = document.getElementById('edit-life-experience-order-btn'); if (editBtn) { // Remove the cancel handler if (this.handleCancelClick) { editBtn.removeEventListener('click', this.handleCancelClick); } editBtn.innerHTML = '<i class="fa fa-sort"></i> Edit Sort'; editBtn.classList.remove('btn-secondary'); editBtn.classList.add('btn-primary'); // Re-add the original handler if (this.handleEditOrderClick) { editBtn.addEventListener('click', this.handleEditOrderClick); } } // Remove Save Order button const saveBtn = document.getElementById('save-life-experience-order-btn'); if (saveBtn) saveBtn.remove(); // Show add button const addBtn = document.getElementById('add-life-experience-btn'); if (addBtn) addBtn.style.display = 'inline-block'; // Destroy sortable if (this.sortable) { this.sortable.destroy(); this.sortable = null; } // Clear original order and content this.originalOrder = []; this.originalContent = null; } }; /** * Escape HTML to prevent XSS * @param {string} text - Text to escape * @returns {string} Escaped HTML */ function escapeHtmlLifeExp(text) { if (text === null || text === undefined) { return ''; } text = String(text); const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } /** * Capitalize first letter of each word * @param {string} text - Text to capitalize * @returns {string} Capitalized text */ function capitalizeWords(text) { if (!text) return ''; return text.toLowerCase().replace(/\b\w/g, char => char.toUpperCase()); } /** * Toggle life experience visibility (show more/less) */ function toggleExperience() { const hiddenSection = document.querySelector('#life-experience-panel .experience-hidden'); const button = document.querySelector('#life-experience-panel .profile-see-more-btn'); if (!hiddenSection || !button) { return; } const isCurrentlyHidden = hiddenSection.style.display === 'none' || !hiddenSection.style.display; if (isCurrentlyHidden) { // Show hidden experiences hiddenSection.style.display = 'block'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { // Hide overflow experiences hiddenSection.style.display = 'none'; const hiddenCount = hiddenSection.querySelectorAll('.profile-card').length; button.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } /** * Update life experience section with profile data * @param {Object} profileData - Profile data from API */ async function updateLifeExperience(profileData) { // Initialize the manager if needed (will fetch reference data for self) if (!window.LifeExperienceManager.isInitialized) { await window.LifeExperienceManager.init(); } // Find the content container (matches Work Experience pattern) const contentContainer = document.getElementById('life-experience-content'); if (!contentContainer) { return; } // Get is_self from PHP vars const isSelf = window._phpVars && window._phpVars.is_self; // If no life experiences if (!profileData.life_experiences || profileData.life_experiences.length === 0) { if (isSelf) { // Show empty state for own profile contentContainer.innerHTML = ` <div class="empty-state-message"> <p class="text-muted"><em>You haven't added any life experiences yet</em></p> </div> `; } else { // Hide entire panel for other users' profiles const panel = document.getElementById('life-experience-panel'); if (panel) panel.style.display = 'none'; } return; } // Icon mapping for categories (can be overridden by API data) const iconMap = { 'Educational': 'fa-graduation-cap', 'Professional': 'fa-briefcase', 'Personal': 'fa-user', 'Entertainment': 'fa-film', 'Specialized': 'fa-star', 'Coverfly': 'fa-file', 'General': 'fa-tag', // Lowercase fallbacks 'educational': 'fa-graduation-cap', 'professional': 'fa-briefcase', 'personal': 'fa-user', 'entertainment': 'fa-film', 'specialized': 'fa-star', 'coverfly': 'fa-file', 'general': 'fa-tag' }; // Create experience list HTML with pagination (show first 3, then expand for more) const displayCount = 3; const visibleExperiences = profileData.life_experiences.slice(0, displayCount); const overflowExperiences = profileData.life_experiences.slice(displayCount); const remainingCount = overflowExperiences.length; let experienceHTML = '<div class="experience-list">'; // Add initially visible experiences (first 3) visibleExperiences.forEach(exp => { const icon = iconMap[exp.life_experience.category?.toLowerCase()] || 'fa-tag'; experienceHTML += ` <div class="profile-card" data-experience-id="${exp.id}" style="position: relative;">  <div class="drag-handle"> <i class="fa fa-grip-vertical"></i> </div>  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;"> <div style="display: flex; align-items: center;"> <i class="fa ${icon}" style="margin-right: 8px; font-size: 16px; color: #495057;"></i> <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #212529;">${escapeHtmlLifeExp(exp.life_experience.name)}</h4> </div> <span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; user-select: none;"> ${escapeHtmlLifeExp(capitalizeWords(exp.life_experience.category))} </span> </div>  <div class="experience-content-wrapper"> <div class="experience-display-content"> ${exp.description ? `<div style="color: #495057; font-size: 14px; line-height: 1.5;">${escapeHtmlLifeExp(exp.description)}</div>` : '<div style="color: #6c757d; font-style: italic; font-size: 14px;">No description provided</div>'} </div> ${isSelf ? ` <div class="experience-edit-content" style="display: none;"> <div class="form-group" style="margin-top: 10px;"> <textarea class="form-control edit-description" rows="3" placeholder="Add details about this life experience...">${escapeHtmlLifeExp(exp.description || '')}</textarea> </div> <div class="form-actions"> <button class="btn btn-sm btn-primary" onclick="LifeExperienceManager.saveEdit(${exp.id})"> <i class="fa fa-save"></i> Save </button> <button class="btn btn-sm btn-default" onclick="LifeExperienceManager.cancelEdit(${exp.id})"> Cancel </button> </div> </div>` : ''} </div>  ${isSelf ? ` <div class="card-actions"> <button class="edit-experience-btn" onclick="LifeExperienceManager.startEdit(${exp.id})" title="Edit"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> <button class="delete-experience-btn" onclick="LifeExperienceManager.confirmDelete(${exp.id}, '${escapeHtmlLifeExp(exp.title || exp.name).replace(/'/g, "\\'")}')" title="Delete"> <i class="fa fa-trash" style="margin-right: 4px;"></i>Delete </button> </div>` : ''} </div> `; }); // Add overflow experiences (shown when user clicks "See more") if (remainingCount > 0) { experienceHTML += '<div class="experience-hidden" style="display: none;">'; overflowExperiences.forEach(exp => { const icon = iconMap[exp.life_experience.category?.toLowerCase()] || 'fa-tag'; experienceHTML += ` <div class="profile-card" data-experience-id="${exp.id}" style="position: relative;">  <div class="drag-handle"> <i class="fa fa-grip-vertical"></i> </div>  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;"> <div style="display: flex; align-items: center;"> <i class="fa ${icon}" style="margin-right: 8px; font-size: 16px; color: #495057;"></i> <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #212529;">${escapeHtmlLifeExp(exp.life_experience.name)}</h4> </div> <span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; user-select: none;"> ${escapeHtmlLifeExp(capitalizeWords(exp.life_experience.category))} </span> </div>  <div class="experience-content-wrapper"> <div class="experience-display-content"> ${exp.description ? `<div style="color: #495057; font-size: 14px; line-height: 1.5;">${escapeHtmlLifeExp(exp.description)}</div>` : '<div style="color: #6c757d; font-style: italic; font-size: 14px;">No description provided</div>'} </div> ${isSelf ? ` <div class="experience-edit-content" style="display: none;"> <div class="form-group" style="margin-top: 10px;"> <textarea class="form-control edit-description" rows="3" placeholder="Add details about this life experience...">${escapeHtmlLifeExp(exp.description || '')}</textarea> </div> <div class="form-actions"> <button class="btn btn-sm btn-primary" onclick="LifeExperienceManager.saveEdit(${exp.id})"> <i class="fa fa-save"></i> Save </button> <button class="btn btn-sm btn-default" onclick="LifeExperienceManager.cancelEdit(${exp.id})"> Cancel </button> </div> </div>` : ''} </div>  ${isSelf ? ` <div class="card-actions"> <button class="edit-experience-btn" onclick="LifeExperienceManager.startEdit(${exp.id})" title="Edit"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> <button class="delete-experience-btn" onclick="LifeExperienceManager.confirmDelete(${exp.id}, '${escapeHtmlLifeExp(exp.title || exp.name).replace(/'/g, "\\'")}')" title="Delete"> <i class="fa fa-trash" style="margin-right: 4px;"></i>Delete </button> </div>` : ''} </div> `; }); experienceHTML += '</div>'; // Add see more button experienceHTML += ` <div style="text-align: center; margin-top: 15px;"> <button class="profile-see-more-btn" onclick="toggleExperience()"> See ${remainingCount} more <i class="fa fa-chevron-down"></i> </button> </div> `; } experienceHTML += '</div>'; // Update the content container (form is outside this container) contentContainer.innerHTML = experienceHTML; // Make sure panel is visible when there's data const panel = document.getElementById('life-experience-panel'); if (panel) panel.style.display = 'block'; // Show Edit Order button if self and have multiple experiences if (isSelf && profileData.life_experiences.length > 1) { const editOrderBtn = document.getElementById('edit-life-experience-order-btn'); if (editOrderBtn) { editOrderBtn.style.display = 'inline-block'; } } } // Make updateLifeExperience globally accessible for about_staging.php window.updateLifeExperience = updateLifeExperience; // Initialize when DOM is ready (matches Work Experience pattern) document.addEventListener('DOMContentLoaded', function() { if (window.LifeExperienceManager) { LifeExperienceManager.init(); } }); </script>      <div class="panel-with-hovered-heading"> <div class="panel panel-large hidden-xxs"> <div class="panel-heading"> <h3 class="panel-title">Videos</h3> </div> <div class="panel-body"> <div class="row row-no-padding" style="position: relative;"> <a class="vert-more" href="/profile/103424/reel"> More </a> <div class="col-xs-8 col-md-6 "> <a href="/media/1432199701268016863"> <img src="/sites/stage32.com/modules/s32/utils/remote_image/remote_image2.php?src=https://i.ytimg.com/vi/zDB7kPI7nBQ/hqdefault.jpg&imagecache=video_embed_960" class="img-responsive" alt="TURNER - the Cockney Canaletto" style="height:122px;" /> </a> </div> <div class="col-xs-8 col-md-6 "> <a href="/media/1167026302004243395"> <img src="/sites/stage32.com/modules/s32/utils/remote_image/remote_image2.php?src=https://stagethirtytwovideo.s3.amazonaws.com/sites/stage32.com/files/media/1167026302004243395/thumbnails/1167026302004243395_0000.jpg&imagecache=video_embed_960" class="img-responsive" alt="Cezanne" style="height:122px;" /> </a> </div> <div class="col-xs-8 col-md-6 "> <a href="/media/1167013324441791319"> <img src="/sites/stage32.com/modules/s32/utils/remote_image/remote_image2.php?src=https://stagethirtytwovideo.s3.amazonaws.com/sites/stage32.com/files/media/1167013324441791319/thumbnails/1167013324441791319_0000.jpg&imagecache=video_embed_960" class="img-responsive" alt="Busker in Catania, Sicily" style="height:122px;" /> </a> </div> <div class="col-xs-8 col-md-6 hidden-sm hidden-xs"> <a href="/media/866872855399243993"> <img src="/sites/stage32.com/modules/s32/utils/remote_image/remote_image2.php?src=https://stagethirtytwovideo.s3.amazonaws.com/sites/stage32.com/files/media/866872855399243993/thumbnails/866872855399243993_0000.jpg&imagecache=video_embed_960" class="img-responsive" alt="Gustav Klimt" style="height:122px;" /> </a> </div> </div> </div> </div> </div>     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> <div class="panel panel-large panel-tomasz" id="achievements-panel"> <div class="panel-heading"> <div class="pull-right"> </div> <h3 class="panel-title" style="font-weight: bold;"> Achievements </h3> </div> <div class="panel-body">  <div id="achievements-content"> <div class="loading-state text-center" style="padding: 20px;"> <i class="fa fa-spinner fa-spin"></i> Loading achievements... </div> </div> </div> </div> <style> /* Achievement card styles for hide/unhide functionality */ .achievement-card { background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s ease; position: relative; } .achievement-hidden { background: #f6f6f6 !important; opacity: 0.75; } .achievement-hidden .profile-card-title, .achievement-hidden .profile-card-content { opacity: 0.8; } .achievement-card .profile-card-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .hidden-badge { display: inline-block; background: white; color: #323940; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid #dee2e6; margin-right: 8px; user-select: none; } .achievement-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e9ecef; } .btn-hide-achievement, .btn-unhide-achievement { border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; } .btn-hide-achievement { background: #dc3545; color: white; } .btn-hide-achievement:hover { background: #c82333; } .btn-unhide-achievement { background: #000000; color: white; } .btn-unhide-achievement:hover { background: #333333; } /* Edit mode styles (for future use) */ .edit-mode .achievement-card { cursor: move; padding-left: 40px; user-select: none; position: relative; } .drag-handle { display: none; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); cursor: move; color: #6c757d; z-index: 2; } .edit-mode .drag-handle { display: block !important; } .edit-mode .achievement-actions { display: none !important; } /* Sortable styles (for future use) */ .achievement-ghost { opacity: 0.4; background: #f0f0f0; } .achievement-chosen { box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .achievement-drag { opacity: 0; } #edit-achievement-order-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } </style> <script> /** * Achievements Management System - Staging Environment * Handles display and interaction for Coverfly achievements */ /** * Toggle achievements section visibility (for pagination) */ function toggleAchievements() { const hiddenSection = document.querySelector('.achievements-hidden'); const button = document.querySelector('#achievements-panel .profile-see-more-btn'); if (!hiddenSection || !button) { return; } const isCurrentlyHidden = hiddenSection.style.display === 'none' || !hiddenSection.style.display; if (isCurrentlyHidden) { // Show hidden achievements hiddenSection.style.display = 'flex'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { // Hide overflow achievements hiddenSection.style.display = 'none'; const hiddenCount = hiddenSection.querySelectorAll('.profile-card').length; button.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } /** * Update achievements display with profile data * @param {Object} profileData - Profile data from API */ function updateAchievements(profileData) { // Find the achievements content container const contentContainer = document.getElementById('achievements-content'); if (!contentContainer) { return; } // Get is_self from PHP vars const isSelf = window._phpVars && window._phpVars.is_self; // If no achievements if (!profileData.achievements || profileData.achievements.length === 0) { if (isSelf) { // Show empty state for own profile contentContainer.innerHTML = ` <div class="empty-state-message text-center" style="padding: 40px 20px;"> <i class="fa fa-trophy fa-3x text-muted" style="margin-bottom: 15px;"></i> <h4 class="text-muted">No Achievements Yet</h4> <p class="text-muted">Achievements from Coverfly and other platforms will appear here.</p> </div> `; // Keep panel visible for self const panel = document.getElementById('achievements-panel'); if (panel) panel.style.display = 'block'; } else { // Hide panel for other users' profiles when no achievements const panel = document.getElementById('achievements-panel'); if (panel) panel.style.display = 'none'; } return; } // For non-owner views, filter out hidden achievements let achievementsToDisplay = profileData.achievements; if (!isSelf) { achievementsToDisplay = profileData.achievements.filter(a => !a.is_hidden); } // ✅ Smart backend, dumb frontend: Use achievements in the order provided by backend // The backend already handles sorting by sort_order, featured status, etc. const sortedAchievements = achievementsToDisplay; // Create achievements list HTML const displayCount = 3; const visibleAchievements = sortedAchievements.slice(0, displayCount); const hiddenAchievements = sortedAchievements.slice(displayCount); const remainingCount = hiddenAchievements.length; let achievementsHTML = '<div class="achievements-container" style="display: flex; flex-direction: column;">'; // Helper function to render an achievement function renderAchievement(achievement) { let title = achievement.title || achievement.name || 'Achievement'; let description = achievement.description || ''; // Check for hidden status - backend might send either is_hidden (boolean) or hidden_at (timestamp) const isHidden = achievement.is_hidden || (achievement.hidden_at && achievement.hidden_at !== null); const achievementId = achievement.id || Math.random().toString(36).substr(2, 9); // Fallback ID // Check if year is already in the title to avoid duplication const yearPattern = /$\d{4}$/; const hasYearInTitle = yearPattern.test(title); // Add year to title if available and not already present if (achievement.year && !hasYearInTitle) { title += ` (${achievement.year})`; } // Format date if available let dateInfo = ''; if (achievement.date_earned) { try { const date = new Date(achievement.date_earned); dateInfo = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } catch (e) { // Ignore date parsing errors } } // Clean up description - remove "Category: " parts if present if (description.includes('|')) { // Split by | and filter out parts that contain "Category:" const parts = description.split('|') .map(part => part.trim()) .filter(part => !part.toLowerCase().includes('category:')); description = parts.join(' | '); } // Card styling for hidden achievements const cardClass = isHidden ? 'profile-card achievement-card achievement-hidden' : 'profile-card achievement-card'; // Action buttons for owner let actionButtons = ''; if (isSelf) { if (isHidden) { actionButtons = ` <div class="achievement-actions"> <span class="hidden-badge"> <i class="fa fa-eye-slash"></i> Hidden </span> <button class="btn-unhide-achievement" onclick="AchievementManager.handleUnhide('${achievementId}')"> <i class="fa fa-eye"></i> Unhide </button> </div> `; } else { actionButtons = ` <div class="achievement-actions"> <button class="btn-hide-achievement" onclick="AchievementManager.handleHide('${achievementId}')"> <i class="fa fa-eye-slash"></i> Hide </button> </div> `; } } // Drag handle for edit mode (hidden by default) const dragHandle = ` <div class="drag-handle"> <i class="fa fa-grip-vertical"></i> </div> `; return ` <div class="${cardClass}" data-achievement-id="${achievementId}"> ${dragHandle} <h4 class="profile-card-title"> ${escapeHtml(title)} ${dateInfo ? `<small class="text-muted" style="font-size: 12px; margin-left: 8px;">${dateInfo}</small>` : ''} </h4> ${description ? `<p class="profile-card-content" style="margin-bottom: 0;">${escapeHtml(description)}</p>` : ''} ${actionButtons} </div> `; } // Add visible achievements visibleAchievements.forEach(achievement => { achievementsHTML += renderAchievement(achievement); }); // Add hidden achievements if any if (remainingCount > 0) { achievementsHTML += '<div class="achievements-hidden" style="display: none; flex-direction: column;">'; hiddenAchievements.forEach(achievement => { achievementsHTML += renderAchievement(achievement); }); achievementsHTML += '</div>'; // Add see more button achievementsHTML += ` <div style="text-align: center; margin-top: 15px;"> <button class="profile-see-more-btn" onclick="toggleAchievements()" style="background: transparent; color: #323232; border: none; padding: 8px 16px; font-size: 14px; cursor: pointer; user-select: none; transition: all 0.2s ease; text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';"> See ${remainingCount} more <i class="fa fa-chevron-down"></i> </button> </div> `; } achievementsHTML += '</div>'; // Update the content container contentContainer.innerHTML = achievementsHTML; // Make sure panel is visible when there's data const panel = document.getElementById('achievements-panel'); if (panel) panel.style.display = 'block'; // Show edit order button if we have multiple achievements and user is owner if (isSelf && sortedAchievements.length > 1) { const editBtn = document.getElementById('edit-achievement-order-btn'); if (editBtn) { editBtn.style.display = 'inline-block'; } } } // HTML escape function function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text ? text.toString().replace(/[&<>"']/g, function(m) { return map[m]; }) : ''; } // API Service for Achievement operations class AchievementAPI { constructor() { this.baseURL = 'https://backend.stage32.com/api/v2'; } getAuthToken() { // Single source of truth: get token from _phpVars const token = window._phpVars?.bearer_token; if (!token) { throw new Error('Authentication required'); } return token; } async makeAuthenticatedRequest(endpoint, options = {}) { const token = this.getAuthToken(); const response = await fetch(`${this.baseURL}${endpoint}`, { ...options, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, ...options.headers } }); if (response.status === 401) { throw new Error('Authentication token expired. Please refresh the page.'); } return response; } async hideAchievement(userSlug, achievementId) { const response = await this.makeAuthenticatedRequest( `/users/${userSlug}/achievements/${achievementId}/hide`, { method: 'POST' } ); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to hide achievement: ${response.status}`); } const result = await response.json(); return result; } async unhideAchievement(userSlug, achievementId) { const response = await this.makeAuthenticatedRequest( `/users/${userSlug}/achievements/${achievementId}/unhide`, { method: 'POST' } ); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to unhide achievement: ${response.status}`); } const result = await response.json(); return result; } async updateSortOrder(userSlug, achievementIds) { const response = await this.makeAuthenticatedRequest( `/users/${userSlug}/achievements/sort-order`, { method: 'PUT', body: JSON.stringify({ achievement_ids: achievementIds }) } ); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to update sort order: ${response.status}`); } const result = await response.json(); return result; } } // Global achievement management instance window.AchievementManager = { api: new AchievementAPI(), isEditMode: false, originalOrder: [], sortable: null, localHiddenStates: {}, /** * Initialize the achievement management system */ init() { this.bindEvents(); // Show edit order button if we have achievements const achievements = document.querySelectorAll('.achievement-card'); if (achievements.length > 1) { const editBtn = document.getElementById('edit-achievement-order-btn'); if (editBtn) { editBtn.style.display = 'inline-block'; } } }, /** * Bind event handlers */ bindEvents() { // Edit order button (Phase 3) const editBtn = document.getElementById('edit-achievement-order-btn'); if (editBtn) { editBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); this.toggleEditMode(); }); } }, /** * Handle hide achievement - Phase 2 with API integration */ async handleHide(achievementId) { try { // Get the card element to show loading state const card = document.querySelector(`[data-achievement-id="${achievementId}"]`); const hideBtn = card?.querySelector('.btn-hide-achievement'); // Show loading state on button if (hideBtn) { hideBtn.disabled = true; hideBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Hiding...'; } // Make API call const userSlug = this.getCurrentUserSlug(); const result = await this.api.hideAchievement(userSlug, achievementId); // Track local state change (store as string to ensure consistency) this.localHiddenStates[String(achievementId)] = { is_hidden: true, hidden_at: result.hidden_at || new Date().toISOString() }; // Update UI with result this.updateAchievementDisplay(achievementId, { is_hidden: true }); this.showSuccessMessage('Achievement hidden from public view', 'Achievement Hidden'); // Update cached data if exists if (window._jsProfileData && window._jsProfileData.achievements) { const achievement = window._jsProfileData.achievements.find(a => a.id === achievementId); if (achievement) { achievement.is_hidden = true; achievement.hidden_at = result.hidden_at; } } } catch (error) { // Restore button state on error const card = document.querySelector(`[data-achievement-id="${achievementId}"]`); const hideBtn = card?.querySelector('.btn-hide-achievement'); if (hideBtn) { hideBtn.disabled = false; hideBtn.innerHTML = '<i class="fa fa-eye-slash"></i> Hide'; } this.showErrorMessage('Unable to hide achievement. Please try again.', 'Hide Failed'); } }, /** * Handle unhide achievement - Phase 2 with API integration */ async handleUnhide(achievementId) { try { // Get the card element to show loading state const card = document.querySelector(`[data-achievement-id="${achievementId}"]`); const unhideBtn = card?.querySelector('.btn-unhide-achievement'); // Show loading state on button if (unhideBtn) { unhideBtn.disabled = true; unhideBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Unhiding...'; } // Make API call const userSlug = this.getCurrentUserSlug(); const result = await this.api.unhideAchievement(userSlug, achievementId); // Track local state change (store as string to ensure consistency) this.localHiddenStates[String(achievementId)] = { is_hidden: false, hidden_at: null }; // Update UI with result this.updateAchievementDisplay(achievementId, { is_hidden: false }); this.showSuccessMessage('Achievement is now visible to the public', 'Achievement Restored'); // Update cached data if exists if (window._jsProfileData && window._jsProfileData.achievements) { const achievement = window._jsProfileData.achievements.find(a => a.id === achievementId); if (achievement) { achievement.is_hidden = false; achievement.hidden_at = null; } } } catch (error) { // Restore button state on error const card = document.querySelector(`[data-achievement-id="${achievementId}"]`); const unhideBtn = card?.querySelector('.btn-unhide-achievement'); if (unhideBtn) { unhideBtn.disabled = false; unhideBtn.innerHTML = '<i class="fa fa-eye"></i> Unhide'; } this.showErrorMessage('Unable to unhide achievement. Please try again.', 'Unhide Failed'); } }, /** * Update achievement display in the UI */ updateAchievementDisplay(achievementId, updates) { const card = document.querySelector(`[data-achievement-id="${achievementId}"]`); if (!card) return; if (updates.is_hidden) { // Add hidden class and update buttons card.classList.add('achievement-hidden'); // Update action buttons const actionsDiv = card.querySelector('.achievement-actions'); if (actionsDiv) { actionsDiv.innerHTML = ` <span class="hidden-badge"> <i class="fa fa-eye-slash"></i> Hidden </span> <button class="btn-unhide-achievement" onclick="AchievementManager.handleUnhide('${achievementId}')"> <i class="fa fa-eye"></i> Unhide </button> `; } } else { // Remove hidden class and update buttons card.classList.remove('achievement-hidden'); // Update action buttons const actionsDiv = card.querySelector('.achievement-actions'); if (actionsDiv) { actionsDiv.innerHTML = ` <button class="btn-hide-achievement" onclick="AchievementManager.handleHide('${achievementId}')"> <i class="fa fa-eye-slash"></i> Hide </button> `; } } }, /** * Toggle edit mode - Phase 3 implementation */ toggleEditMode() { if (this.isEditMode) { this.exitEditMode(); } else { this.enterEditMode(); } }, /** * Enter edit mode for reordering */ enterEditMode() { this.isEditMode = true; // Store original order for cancel functionality const achievements = document.querySelectorAll('.achievement-card'); this.originalOrder = Array.from(achievements).map(card => ({ id: card.dataset.achievementId, element: card.cloneNode(true) })); // Add edit mode class to panel const panel = document.getElementById('achievements-panel'); if (panel) { panel.classList.add('edit-mode'); } // Update button text and add Save Order button const editBtn = document.getElementById('edit-achievement-order-btn'); if (editBtn) { editBtn.innerHTML = '<i class="fa fa-times"></i> Cancel'; editBtn.classList.remove('btn-primary'); editBtn.classList.add('btn-secondary'); // Add Save Order button next to Cancel const saveBtn = document.createElement('button'); saveBtn.id = 'save-achievement-order-btn'; saveBtn.className = 'btn btn-sm btn-success'; saveBtn.style.cssText = 'margin-left: 8px; user-select: none; transition: all 0.2s ease;'; saveBtn.innerHTML = '<i class="fa fa-save"></i> Save Order'; saveBtn.onclick = (e) => { e.preventDefault(); e.stopPropagation(); this.saveOrder(); }; // Insert Save button after Cancel button editBtn.parentNode.insertBefore(saveBtn, editBtn.nextSibling); } // Show edit controls this.showEditControls(); // Initialize SortableJS this.initializeSortable(); // Hide see more/less button during edit const seeMoreBtn = document.querySelector('#achievements-panel .profile-see-more-btn'); if (seeMoreBtn) { seeMoreBtn.style.display = 'none'; } // Show all hidden achievements for reordering const hiddenSection = document.querySelector('.achievements-hidden'); if (hiddenSection) { hiddenSection.style.display = 'flex'; } }, /** * Exit edit mode */ exitEditMode() { this.isEditMode = false; // Remove edit mode class const panel = document.getElementById('achievements-panel'); if (panel) { panel.classList.remove('edit-mode'); } // Update button text and remove Save Order button const editBtn = document.getElementById('edit-achievement-order-btn'); if (editBtn) { editBtn.innerHTML = '<i class="fa fa-sort"></i> Edit Order'; editBtn.classList.remove('btn-secondary'); editBtn.classList.add('btn-primary'); } // Remove Save Order button const saveBtn = document.getElementById('save-achievement-order-btn'); if (saveBtn) { saveBtn.remove(); } // Hide edit controls this.hideEditControls(); // Destroy sortable instance if (this.sortable) { this.sortable.destroy(); this.sortable = null; } // Remove edit container and restore original structure const editContainer = document.getElementById('achievements-edit-container'); const originalContainer = document.querySelector('.achievements-container'); if (editContainer) { editContainer.remove(); } if (originalContainer) { originalContainer.style.display = 'flex'; } // Restore see more/less button state const hiddenSection = document.querySelector('.achievements-hidden'); const seeMoreBtn = document.querySelector('#achievements-panel .profile-see-more-btn'); if (hiddenSection && seeMoreBtn) { hiddenSection.style.display = 'none'; seeMoreBtn.style.display = 'block'; const hiddenCount = hiddenSection.querySelectorAll('.achievement-card').length; if (hiddenCount > 0) { seeMoreBtn.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } }, /** * Initialize SortableJS for drag-and-drop */ initializeSortable() { // First, we need to restructure the achievements to be in a single container const contentDiv = document.getElementById('achievements-content'); const allCards = contentDiv.querySelectorAll('.achievement-card'); // Create a single container for all achievements during edit let editContainer = document.getElementById('achievements-edit-container'); if (!editContainer) { editContainer = document.createElement('div'); editContainer.id = 'achievements-edit-container'; editContainer.style.cssText = 'display: flex; flex-direction: column;'; // Move all achievement cards to the edit container allCards.forEach(card => { editContainer.appendChild(card.cloneNode(true)); }); // Replace the content with edit container const originalContainer = contentDiv.querySelector('.achievements-container'); if (originalContainer) { originalContainer.style.display = 'none'; } contentDiv.insertBefore(editContainer, contentDiv.firstChild); } // Initialize SortableJS on the edit container this.sortable = new Sortable(editContainer, { animation: 150, // Remove handle restriction - make entire card draggable draggable: '.achievement-card', ghostClass: 'achievement-ghost', chosenClass: 'achievement-chosen', dragClass: 'achievement-drag', forceFallback: true, // Force fallback to avoid browser drag events preventOnFilter: true, onStart: (evt) => { evt.preventDefault(); evt.stopPropagation(); }, onChange: (evt) => { evt.preventDefault(); evt.stopPropagation(); }, onEnd: (evt) => { evt.preventDefault(); evt.stopPropagation(); // Order is automatically updated in DOM by SortableJS return false; } }); }, /** * Show edit mode controls */ showEditControls() { const controlsHTML = ` <div id="achievement-edit-controls" style="padding: 15px; background: #f8f9fa; border-top: 1px solid #dee2e6; margin-top: 15px;"> <p style="margin-bottom: 0; color: #6c757d;"> <i class="fa fa-info-circle"></i> Drag the entire achievement card to reorder </p> </div> `; const container = document.getElementById('achievements-content'); if (container && !document.getElementById('achievement-edit-controls')) { container.insertAdjacentHTML('beforeend', controlsHTML); } }, /** * Hide edit mode controls */ hideEditControls() { const controls = document.getElementById('achievement-edit-controls'); if (controls) { controls.remove(); } }, /** * Save the new order with API integration */ async saveOrder() { // Get current order of achievement IDs from the edit container only const editContainer = document.getElementById('achievements-edit-container'); const achievements = editContainer ? editContainer.querySelectorAll('.achievement-card') : document.querySelectorAll('.achievement-card'); const newOrder = Array.from(achievements).map(card => parseInt(card.dataset.achievementId) ); // Remove duplicates (just in case) const uniqueOrder = [...new Set(newOrder)]; try { // Show loading state on Save Order button const saveBtn = document.getElementById('save-achievement-order-btn'); if (saveBtn) { saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Saving...'; saveBtn.disabled = true; } const userSlug = this.getCurrentUserSlug(); const result = await this.api.updateSortOrder(userSlug, uniqueOrder); // Success handling this.showSuccessMessage(`Updated ${result.data.updated_count} achievements successfully`); // Update cached data with new order from backend BEFORE exiting edit mode if (window._jsProfileData?.achievements && result.data.achievements) { this.updateCachedAchievements(result.data.achievements); // Re-render achievements with new order from backend updateAchievements(window._jsProfileData); } this.exitEditMode(); } catch (error) { // Provide specific error messages based on error type let errorMessage = 'Unable to save order. Please try again.'; if (error.message.includes('401')) { errorMessage = 'Please refresh the page and try again.'; } else if (error.message.includes('403')) { errorMessage = 'You can only modify your own achievements.'; } else if (error.message.includes('404')) { errorMessage = 'User or achievements not found.'; } this.showErrorMessage(errorMessage); // Keep edit mode active for retry } finally { // Restore button state const saveBtn = document.getElementById('save-achievement-order-btn'); if (saveBtn) { saveBtn.innerHTML = '<i class="fa fa-save"></i> Save Order'; saveBtn.disabled = false; } } return false; // Prevent any default action }, /** * Cancel edit and restore original order */ cancelEdit() { // Restore original order if we have it if (this.originalOrder && this.originalOrder.length > 0) { const editContainer = document.getElementById('achievements-edit-container'); if (editContainer) { // Clear current achievements in edit container editContainer.innerHTML = ''; // Restore original elements this.originalOrder.forEach(item => { editContainer.appendChild(item.element); }); } } // Exit edit mode this.exitEditMode(); }, /** * Get current user slug */ getCurrentUserSlug() { // Single source of truth: get slug from _phpVars return window._phpVars?.profile_slug; }, /** * Update cached achievement data with new sort order values * @param {Array} updatedAchievements - Achievement data from API response (already in correct order) */ updateCachedAchievements(updatedAchievements) { if (!window._jsProfileData?.achievements) return; // Update cached achievement data with new sort_order values updatedAchievements.forEach(updated => { const cached = window._jsProfileData.achievements.find(a => a.id === updated.id); if (cached) { cached.sort_order = updated.sort_order; // Check if we have a local state change for this achievement const achievementIdStr = String(updated.id); if (this.localHiddenStates.hasOwnProperty(achievementIdStr)) { // Use the locally tracked state instead of backend state const localState = this.localHiddenStates[achievementIdStr]; cached.is_hidden = localState.is_hidden; cached.hidden_at = localState.hidden_at; } else { // No local changes, use backend state cached.is_hidden = updated.is_hidden; cached.hidden_at = updated.hidden_at; } } }); // ✅ Smart backend, dumb frontend: Reorder cached array to match backend response order // The backend response contains achievements in the correct display order const orderedAchievements = []; // First, add achievements in the order they appear in the backend response updatedAchievements.forEach(updated => { const cached = window._jsProfileData.achievements.find(a => a.id === updated.id); if (cached) { orderedAchievements.push(cached); } }); // Then add any achievements not in the response (shouldn't happen, but safety net) window._jsProfileData.achievements.forEach(cached => { if (!updatedAchievements.find(updated => updated.id === cached.id)) { orderedAchievements.push(cached); } }); // Replace the cached array with the properly ordered one window._jsProfileData.achievements = orderedAchievements; }, /** * Show success message */ showSuccessMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.success(message, 4000, title); } }, /** * Show error message */ showErrorMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.error(message, 6000, title); } }, /** * Show info message */ showInfoMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.info(message, 4000, title); } } }; // Initialize achievements display when data is loaded document.addEventListener('DOMContentLoaded', function() { // Initialize the manager if (window.AchievementManager) { window.AchievementManager.init(); } // Check if we have initial PHP data to display }); </script>   <script> function toggleAwards(event) { event.preventDefault(); const hiddenSection = document.querySelector('.awards-hidden'); const button = event.currentTarget; if (hiddenSection) { if (hiddenSection.style.display === 'none' || !hiddenSection.style.display) { hiddenSection.style.display = 'block'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { hiddenSection.style.display = 'none'; const count = hiddenSection.querySelectorAll('li').length; button.innerHTML = `See ${count} more <i class="fa fa-chevron-down"></i>`; } } } </script>   <div class="modal fade" id="deleteProjectModal" tabindex="-1" role="dialog" aria-labelledby="deleteProjectModalLabel"> <div class="modal-dialog" role="document" style="width: 400px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="deleteProjectModalLabel">Delete Project</h4> </div> <div class="modal-body"> <div class="alert alert-danger"> <i class="fa fa-exclamation-triangle"></i> <strong>Warning:</strong> This action cannot be undone. </div> <p>To confirm deletion, please type the project name below:</p> <div class="form-group"> <label for="confirmProjectName">Project Name:</label> <div style="color: #333; font-size: 14px; margin-bottom: 10px; user-select: all;" id="projectNameDisplay"></div> <input type="text" class="form-control" id="confirmProjectName" placeholder="Type project name to confirm"> <small class="help-block">Type the exact name</small> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled> <i class="fa fa-trash"></i> Delete Project </button> </div> </div> </div> </div>  <div class="evaluation-modal-backdrop" id="evaluationModalBackdrop" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998;" onclick="closeEvaluationModal(event)"> <div class="evaluation-modal" id="evaluationModal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 720px; max-height: 80vh; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 9999; display: flex; flex-direction: column;" onclick="event.stopPropagation()"> <div style="display: flex; height: 100%; max-height: 80vh;" class="modal-content-wrapper">  <div style="width: 35%; border-right: 1px solid #dee2e6; padding: 12px; display: flex; flex-direction: column;" class="left-column">  <div style="display: flex; gap: 10px; margin-bottom: 20px;" class="button-wrapper"> <button type="button" class="btn btn-default get-feedback-btn" onclick="window.open('https://www.stage32.com/scriptservices/pitch-sessions', '_blank'); return false;" style="flex: 1; background: #323232; color: white; border: none; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer;"> Get Pitch Feedback </button> </div>  <div style="flex: 1; overflow-y: auto;" id="evaluationsList">  </div> </div>  <div style="width: 65%; display: flex; flex-direction: column; overflow: hidden;" class="right-column">  <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #dee2e6;" id="evaluationHeader"> <h4 style="margin: 0; font-weight: 600;">Evaluation Details</h4> <button type="button" class="close" onclick="closeEvaluationModal()" style="font-size: 24px; background: none; border: none; cursor: pointer; padding: 0; margin: 0;"> <span aria-hidden="true">×</span> </button> </div>  <div style="flex: 1; padding: 12px; overflow-y: auto;" id="evaluationDetails">  </div> </div> </div> </div> </div>  <style> @media (max-width: 768px) { .evaluation-modal { max-height: 90vh; } .modal-content-wrapper { flex-direction: column; } .left-column { width: 100% !important; border-right: none !important; border-bottom: 1px solid #dee2e6; padding: 12px; overflow: visible !important; height: auto !important; } .button-wrapper { margin-bottom: 12px; flex-shrink: 0; } .right-column { width: 100% !important; flex: 1; } #evaluationsList { display: flex; flex-direction: row; overflow-x: auto; overflow-y: visible; gap: 10px; padding-bottom: 10px; align-items: stretch; min-height: fit-content; } .evaluation-card { min-width: 200px; max-width: 220px; flex-shrink: 0; margin-bottom: 0; height: auto; } } .evaluation-card { padding: 12px; margin-bottom: 10px; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .evaluation-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.12); } .evaluation-card.active { background: #f5f5f5; border: none; box-shadow: none; padding: 13px; } .evaluation-card.active .text-muted { color: #6c757d !important; } .evaluation-card.active .score-value { color: #28a745 !important; } /* Thin scrollbar styles */ #evaluationsList::-webkit-scrollbar { height: 4px; width: 4px; } #evaluationsList::-webkit-scrollbar-track { background: white; border-radius: 2px; } #evaluationsList::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 2px; } #evaluationsList::-webkit-scrollbar-thumb:hover { background: #b0b0b0; } /* Firefox */ #evaluationsList { scrollbar-width: thin; scrollbar-color: #d0d0d0 white; } /* Right column scrollbar */ #evaluationDetails::-webkit-scrollbar { width: 4px; } #evaluationDetails::-webkit-scrollbar-track { background: white; border-radius: 2px; } #evaluationDetails::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 2px; } #evaluationDetails::-webkit-scrollbar-thumb:hover { background: #b0b0b0; } #evaluationDetails { scrollbar-width: thin; scrollbar-color: #d0d0d0 white; } /* Pitch item layout override */ .pitch-item-layout { align-items: flex-start !important; } @media (max-width: 768px) { .pitch-item-layout { flex-direction: row !important; align-items: flex-start !important; } .pitch-item-layout > div { justify-content: flex-start !important; } /* Left-align dropdowns on mobile */ .stylized-dropdown-content-inline { position: absolute !important; left: 0 !important; right: auto !important; transform: none !important; width: 90vw !important; max-width: 90vw !important; } } </style>  <div class="panel panel-large panel-tomasz" id="featured-projects-panel"> <div class="panel-heading"> <h3 class="panel-title" style="font-weight: bold;"> Featured Projects </h3> </div> <div class="panel-body">   <div id="featured-projects-content"> <div class="text-center" style="padding: 40px 0;"> <i class="fa fa-spinner fa-spin fa-2x"></i> <p style="margin-top: 10px; color: #666;">Loading featured projects...</p> </div> </div> </div> </div> <style> /* Enhanced Tab Styles matching representations section */ #add-project-form .nav-tabs { border-bottom: 1px solid #dee2e6; margin-bottom: 20px; } #add-project-form .nav-tabs > li { margin-bottom: -1px; } #add-project-form .nav-tabs > li > a { border: 1px solid transparent; border-radius: 4px 4px 0 0; background: transparent; font-weight: 500; transition: all 0.2s ease; } #add-project-form .nav-tabs > li > a:hover { border-color: #e9ecef #e9ecef #dee2e6; background-color: #f8f9fa; } #add-project-form .nav-tabs > li.active > a, #add-project-form .nav-tabs > li.active > a:hover, #add-project-form .nav-tabs > li.active > a:focus { color: #495057; background-color: #fff; border: 1px solid #dee2e6; border-bottom-color: transparent; font-weight: 600; } /* Genre and Credit Tag Styles */ .genre-tag, .credit-tag { display: inline-block; padding: 6px 12px; margin: 4px; background-color:rgb(208, 208, 208); border: 1px solid rgb(201, 201, 201); border-radius: 20px; font-size: 14px; color: #0066cc; position: relative; user-select: none; } .genre-tag.primary { background-color:rgb(0, 0, 0); border-color:rgb(0, 0, 0); color: white; font-weight: 500; } .genre-tag .remove-btn, .credit-tag .remove-btn { margin-left: 8px; cursor: pointer; color: #dc3545; font-weight: bold; } .genre-tag .remove-btn:hover, .credit-tag .remove-btn:hover { color: #a02622; } /* Dropdown Item Styles */ .dropdown-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f1f1f1; transition: background-color 0.2s ease; } .dropdown-item:hover { background-color: #f8f9fa; } .dropdown-item:last-child { border-bottom: none; } /* Form Group Enhancements */ #add-project-form .form-group label { font-weight: 600; color: #495057; margin-bottom: 8px; } #add-project-form .form-control { border: 1px solid #ced4da; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } #add-project-form .form-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } /* Character counter styles */ #add-project-form .text-muted { font-size: 12px; margin-top: 4px; } /* Primary genre radio button styles */ .genre-radio { margin: 8px 0; padding: 10px; background: white; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .genre-radio:hover { background: #f8f9fa; border-color: #adb5bd; } .genre-radio input[type="radio"] { margin-right: 8px; } .genre-radio.selected { background: #e7f3ff; border-color: #0066cc; } /* ===== DRAFTS & EVALUATIONS DROPDOWN STYLES ===== */ /* Stylized dropdown trigger buttons */ .stylized-dropdown-trigger { background: #f8f9fa !important; border: 1px solid #dee2e6 !important; border-radius: 4px !important; padding: 8px 12px !important; width: 100% !important; text-align: left !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; font-weight: 500 !important; color: #495057 !important; } .stylized-dropdown-trigger:hover { background: #e9ecef !important; border-color: #adb5bd !important; } .stylized-dropdown-trigger:focus { outline: none !important; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; border-color: #80bdff !important; } /* Dropdown content containers */ .stylized-dropdown-content { margin-top: 8px !important; padding: 12px !important; background: #f8f9fa !important; border: 1px solid #dee2e6 !important; border-radius: 4px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } /* Draft and evaluation items */ .draft-item, .evaluation-item { padding: 12px !important; margin-bottom: 8px !important; background: white !important; border: 1px solid #dee2e6 !important; border-radius: 4px !important; transition: box-shadow 0.2s ease !important; } .draft-item:hover, .evaluation-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } .draft-item:last-child, .evaluation-item:last-child { margin-bottom: 0 !important; } /* Item info sections */ .draft-info, .evaluation-info { margin-bottom: 12px !important; } .draft-info h4, .evaluation-info h4 { margin: 0 0 8px 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #212529 !important; } .version-info, .evaluation-date { margin: 0 0 4px 0 !important; color: #6c757d !important; font-size: 14px !important; } .logline, .evaluation-notes { margin: 0 !important; color: #495057 !important; font-size: 14px !important; } .logline { font-style: italic !important; margin-bottom: 4px !important; } .page-count { margin: 0 !important; color: #6c757d !important; font-size: 14px !important; } /* Action button containers */ .draft-actions, .evaluation-actions { display: flex !important; gap: 8px !important; } .draft-actions .btn, .evaluation-actions .btn { padding: 4px 8px !important; font-size: 12px !important; transition: all 0.2s ease !important; } /* Section spacing */ .drafts-section, .evaluations-section { margin-bottom: 12px !important; } /* ===== INLINE DROPDOWN STYLES (FOR ACTION BAR) ===== */ /* Inline dropdown trigger buttons - smaller and more compact */ .stylized-dropdown-trigger-inline { background: #f8f9fa !important; border: none !important; border-radius: 4px !important; padding: 6px 12px !important; cursor: pointer !important; transition: background-color 0.2s ease !important; display: flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; font-weight: 500 !important; color: #495057 !important; white-space: nowrap !important; } .stylized-dropdown-trigger-inline:hover { background: #e9ecef !important; border: none !important; } .stylized-dropdown-trigger-inline:focus { outline: none !important; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; } /* Inline dropdown content containers - positioned absolutely */ .stylized-dropdown-content-inline { position: absolute !important; top: 100% !important; right: 0 !important; margin-top: 8px !important; padding: 12px !important; background: #f8f9fa !important; border: 1px solid #dee2e6 !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; z-index: 1000 !important; min-width: 300px !important; } /* Inline section containers */ .drafts-section-inline, .evaluations-section-inline { position: relative !important; } /* Responsive adjustments */ @media (max-width: 768px) { .draft-actions, .evaluation-actions { flex-direction: column !important; gap: 4px !important; } .draft-actions .btn, .evaluation-actions .btn { width: 100% !important; text-align: center !important; } /* Make action bar stack vertically on mobile */ .project-card div[style*="justify-content: space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } /* Inline dropdowns full width on mobile */ .stylized-dropdown-content-inline { right: 0 !important; left: 0 !important; min-width: auto !important; } /* Center align dropdown triggers on mobile */ .project-card div[style*="justify-content: space-between"] > div:last-child { justify-content: center !important; } } </style> <script> // Initialize global variables for project management window.projectReferenceData = null; window.selectedGenres = []; window.selectedCredits = []; window.currentEditMode = null; window.currentEditSlug = null; /** * Initialize the inline project form functionality */ function initializeProjectForm() { // Initialize global arrays if not already initialized if (!window.selectedGenres) { window.selectedGenres = []; } if (!window.selectedCredits) { window.selectedCredits = []; } // Bind event handlers bindProjectFormEvents(); // Load reference data loadProjectReferenceData(); } /** * Bind all event handlers for the project form */ function bindProjectFormEvents() { // Add project button const addBtn = document.getElementById('add-project-btn'); if (addBtn && !addBtn.hasAttribute('data-bound')) { addBtn.addEventListener('click', showAddProjectForm); addBtn.setAttribute('data-bound', 'true'); } // Cancel button const cancelBtn = document.getElementById('cancel-add-project'); if (cancelBtn && !cancelBtn.hasAttribute('data-bound')) { cancelBtn.addEventListener('click', hideAddProjectForm); cancelBtn.setAttribute('data-bound', 'true'); } // Save button - ensure it's only bound once (use unique ID for inline form) const saveBtn = document.getElementById('saveProjectBtnInline'); if (saveBtn && !saveBtn.hasAttribute('data-bound')) { saveBtn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); handleSaveProject(); }); saveBtn.setAttribute('data-bound', 'true'); } // Character counters setupCharacterCounters(); // Genre search setupGenreSearch(); // Credit search setupCreditSearch(); // Format sync between tabs setupFormatSync(); } /** * Show the add project form */ function showAddProjectForm() { const form = document.getElementById('add-project-form'); const btn = document.getElementById('add-project-btn'); if (form && btn) { form.style.display = 'block'; btn.style.display = 'none'; // Reset form resetProjectForm(); // Set mode window.currentEditMode = 'create'; window.currentEditSlug = null; // Focus on first field document.getElementById('projectTitleInline').focus(); // Scroll to form form.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } /** * Hide the add project form */ function hideAddProjectForm() { const form = document.getElementById('add-project-form'); const btn = document.getElementById('add-project-btn'); if (form && btn) { form.style.display = 'none'; btn.style.display = 'inline-block'; // Reset form resetProjectForm(); } } /** * Reset the project form */ function resetProjectForm() { // Reset form fields document.getElementById('projectDetailsForm').reset(); // Clear selections window.selectedGenres = []; window.selectedCredits = []; // Update displays updateSelectedGenresDisplay(); updateSelectedCreditsDisplay(); // Reset character counters const counters = ['title', 'logline', 'tagline', 'synopsis']; counters.forEach(field => { const counter = document.getElementById(field + 'CharCount'); if (counter) counter.textContent = '0'; }); // Reset to first tab $('.nav-tabs a[href="#project-details-inline"]').tab('show'); } /** * Setup character counters for text fields */ function setupCharacterCounters() { const fields = [ { id: 'projectTitleInline', counter: 'titleCharCount', max: 255 }, { id: 'projectLoglineInline', counter: 'loglineCharCount', max: 1000 }, { id: 'projectTaglineInline', counter: 'taglineCharCount', max: 255 }, { id: 'projectSynopsisInline', counter: 'synopsisCharCount', max: 5000 } ]; fields.forEach(field => { const input = document.getElementById(field.id); const counter = document.getElementById(field.counter); if (input && counter) { input.addEventListener('input', function() { const length = this.value.length; counter.textContent = length; // Add warning color if near limit if (length > field.max * 0.9) { counter.style.color = '#dc3545'; } else { counter.style.color = '#6c757d'; } }); } }); } /** * Setup genre search functionality */ function setupGenreSearch() { const searchInput = document.getElementById('genreSearchInline'); const dropdown = document.getElementById('genreDropdownInline'); if (!searchInput || !dropdown) return; // Function to show dropdown const showDropdown = () => { if (window.projectReferenceData && window.projectReferenceData.genres) { const searchTerm = searchInput.value || ''; showGenreDropdown(searchTerm); } }; // Show dropdown on focus - show all options immediately searchInput.addEventListener('focus', showDropdown); // Also show on click to ensure it works searchInput.addEventListener('click', showDropdown); // Filter on input searchInput.addEventListener('input', function() { const searchTerm = this.value; showGenreDropdown(searchTerm); // Filter based on input }); // Hide on blur (with delay for click) searchInput.addEventListener('blur', function() { setTimeout(() => { dropdown.style.display = 'none'; }, 200); }); } /** * Show genre dropdown */ function showGenreDropdown(searchTerm = '') { const dropdown = document.getElementById('genreDropdownInline'); const genres = window.projectReferenceData.genres; let html = ''; genres.forEach(genre => { // Skip already selected genres if (window.selectedGenres.find(g => g.id === genre.id)) return; // Filter by search term if provided if (!searchTerm || genre.name.toLowerCase().includes(searchTerm.toLowerCase())) { // Escape the name for JavaScript string const escapedName = genre.name.replace(/'/g, "\\'").replace(/"/g, '\\"'); html += ` <div class="dropdown-item" onclick="selectGenreInline(${genre.id}, '${escapedName}')" style="padding: 8px 12px; cursor: pointer; hover: background-color: #f8f9fa;"> ${escapeHtml(genre.name)} </div> `; } }); if (!html) { html = searchTerm ? '<div class="dropdown-item">No matching genres</div>' : '<div class="dropdown-item">No genres available</div>'; } dropdown.innerHTML = html; dropdown.style.display = 'block'; } /** * Filter genre dropdown */ function filterGenreDropdown(searchTerm) { // Just call showGenreDropdown with the search term showGenreDropdown(searchTerm); } /** * Select a genre */ function selectGenre(id, name) { // Add to selected genres window.selectedGenres.push({ id, name, is_primary: false }); // Update display updateSelectedGenresDisplay(); // Clear search document.getElementById('genreSearchInline').value = ''; document.getElementById('genreDropdownInline').style.display = 'none'; // Show primary genre selection only if we have 2 or more genres if (window.selectedGenres.length >= 2) { showPrimaryGenreSelection(); } else if (window.selectedGenres.length === 1) { // If only one genre, hide the primary selection and automatically set it as primary document.getElementById('primaryGenreSelectionInline').style.display = 'none'; window.selectedGenres[0].is_primary = true; } } // Make function globally accessible with unique name for inline form window.selectGenreInline = selectGenre; /** * Remove a genre */ function removeGenre(id) { window.selectedGenres = window.selectedGenres.filter(g => g.id !== id); updateSelectedGenresDisplay(); // Update primary genre selection if (window.selectedGenres.length === 0) { document.getElementById('primaryGenreSelectionInline').style.display = 'none'; } else if (window.selectedGenres.length === 1) { // If only one genre remains, hide primary selection and set it as primary document.getElementById('primaryGenreSelectionInline').style.display = 'none'; window.selectedGenres[0].is_primary = true; } else { // Show primary selection for 2 or more genres showPrimaryGenreSelection(); } } // Make function globally accessible with unique name for inline form window.removeGenreInline = removeGenre; /** * Update selected genres display */ function updateSelectedGenresDisplay() { const container = document.getElementById('selectedGenresInline'); if (window.selectedGenres.length === 0) { container.innerHTML = '<span class="text-muted">No genres selected</span>'; } else { let html = ''; window.selectedGenres.forEach(genre => { const isPrimary = genre.is_primary; html += ` <span class="genre-tag ${isPrimary ? 'primary' : ''}"> ${escapeHtml(genre.name)} ${isPrimary ? '<span style="margin-left: 5px;">(Primary)</span>' : ''} <span class="remove-btn" onclick="removeGenreInline(${genre.id})">×</span> </span> `; }); container.innerHTML = html; } } /** * Show primary genre selection */ function showPrimaryGenreSelection() { const container = document.getElementById('primaryGenreSelectionInline'); const options = document.getElementById('primaryGenreOptionsInline'); // Only show if we have 2 or more genres if (window.selectedGenres.length < 2) { container.style.display = 'none'; return; } let html = ''; window.selectedGenres.forEach((genre, index) => { const isChecked = genre.is_primary ? 'checked' : ''; html += ` <div class="genre-radio ${genre.is_primary ? 'selected' : ''}"> <label style="margin: 0; cursor: pointer; display: block;"> <input type="radio" name="primary_genre" value="${genre.id}" ${isChecked} onchange="setPrimaryGenre(${genre.id})"> ${escapeHtml(genre.name)} </label> </div> `; }); options.innerHTML = html; container.style.display = 'block'; } /** * Set primary genre */ function setPrimaryGenre(id) { window.selectedGenres.forEach(genre => { genre.is_primary = genre.id === id; }); updateSelectedGenresDisplay(); // Only show primary selection for 2+ genres if (window.selectedGenres.length >= 2) { showPrimaryGenreSelection(); } } /** * Setup credit search functionality */ function setupCreditSearch() { const searchInput = document.getElementById('creditSearchInline'); const dropdown = document.getElementById('creditDropdownInline'); if (!searchInput || !dropdown) return; // Function to show dropdown const showDropdown = () => { if (window.projectReferenceData && window.projectReferenceData.positions) { const searchTerm = searchInput.value || ''; showCreditDropdown(searchTerm); } }; // Show dropdown on focus - show all options immediately searchInput.addEventListener('focus', showDropdown); // Also show on click to ensure it works searchInput.addEventListener('click', showDropdown); // Filter on input searchInput.addEventListener('input', function() { const searchTerm = this.value; showCreditDropdown(searchTerm); // Filter based on input }); // Hide on blur (with delay for click) searchInput.addEventListener('blur', function() { setTimeout(() => { dropdown.style.display = 'none'; }, 200); }); } /** * Show credit dropdown */ function showCreditDropdown(searchTerm = '') { const dropdown = document.getElementById('creditDropdownInline'); const positions = window.projectReferenceData.positions; let html = ''; positions.forEach(position => { // Skip already selected positions if (window.selectedCredits.find(c => c.id === position.id)) return; // Filter by search term if provided if (!searchTerm || position.name.toLowerCase().includes(searchTerm.toLowerCase())) { // Escape the name for JavaScript string const escapedName = position.name.replace(/'/g, "\\'").replace(/"/g, '\\"'); html += ` <div class="dropdown-item" onclick="selectCreditInline(${position.id}, '${escapedName}')" style="padding: 8px 12px; cursor: pointer; hover: background-color: #f8f9fa;"> ${escapeHtml(position.name)} </div> `; } }); if (!html) { html = searchTerm ? '<div class="dropdown-item">No matching positions</div>' : '<div class="dropdown-item">No positions available</div>'; } dropdown.innerHTML = html; dropdown.style.display = 'block'; } /** * Filter credit dropdown */ function filterCreditDropdown(searchTerm) { // Just call showCreditDropdown with the search term showCreditDropdown(searchTerm); } /** * Select a credit */ function selectCredit(id, name) { // Add to selected credits window.selectedCredits.push({ id, name }); // Update display updateSelectedCreditsDisplay(); // Clear search document.getElementById('creditSearchInline').value = ''; document.getElementById('creditDropdownInline').style.display = 'none'; } // Make function globally accessible with unique name for inline form window.selectCreditInline = selectCredit; /** * Remove a credit */ function removeCredit(id) { window.selectedCredits = window.selectedCredits.filter(c => c.id !== id); updateSelectedCreditsDisplay(); } // Make function globally accessible with unique name for inline form window.removeCreditInline = removeCredit; /** * Update selected credits display */ function updateSelectedCreditsDisplay() { const container = document.getElementById('selectedCreditsInline'); if (window.selectedCredits.length === 0) { container.innerHTML = '<span class="text-muted">No credits selected</span>'; } else { let html = ''; window.selectedCredits.forEach(credit => { html += ` <span class="credit-tag"> ${escapeHtml(credit.name)} <span class="remove-btn" onclick="removeCreditInline(${credit.id})">×</span> </span> `; }); container.innerHTML = html; } } /** * Setup format sync between tabs */ function setupFormatSync() { // No longer needed since format is only in the Format tab // Keeping function for potential future use } /** * Load reference data from API */ async function loadProjectReferenceData() { try { // Get auth token from single source of truth const authToken = window._phpVars?.bearer_token; if (!authToken) { return; } const headers = { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` }; // Load all reference data in parallel const [statusesRes, stagesRes, formatsRes, genresRes, positionsRes] = await Promise.all([ fetch('https://backend.stage32.com/api/v2/reference/project-statuses', { headers }), fetch('https://backend.stage32.com/api/v2/reference/project-stages', { headers }), fetch('https://backend.stage32.com/api/v2/reference/formats', { headers }), fetch('https://backend.stage32.com/api/v2/reference/genres', { headers }), fetch('https://backend.stage32.com/api/v2/reference/project-positions', { headers }) ]); // Parse responses const [statuses, stages, formats, genres, positions] = await Promise.all([ statusesRes.json(), stagesRes.json(), formatsRes.json(), genresRes.json(), positionsRes.json() ]); // Store reference data window.projectReferenceData = { statuses: statuses.data || [], stages: stages.data || [], formats: formats.data || [], genres: genres.data || [], positions: positions.data || [] }; // Populate dropdowns populateProjectDropdowns(); } catch (error) { } } /** * Populate dropdown selects with reference data */ function populateProjectDropdowns() { const data = window.projectReferenceData; // Populate status dropdown const statusSelect = document.getElementById('projectStatusInline'); if (statusSelect && data.statuses) { statusSelect.innerHTML = '<option value="">Select Status</option>'; data.statuses.forEach(status => { statusSelect.innerHTML += `<option value="${status.value}">${escapeHtml(status.label)}</option>`; }); } // Populate stage dropdown const stageSelect = document.getElementById('projectStageInline'); if (stageSelect && data.stages) { stageSelect.innerHTML = '<option value="">Select Stage</option>'; data.stages.forEach(stage => { stageSelect.innerHTML += `<option value="${stage.value}">${escapeHtml(stage.label)}</option>`; }); } // Populate format dropdown (only in Format tab now) const formatSelect = document.getElementById('projectFormatTab'); if (formatSelect && data.formats) { formatSelect.innerHTML = '<option value="">Select Format</option>'; data.formats.forEach(format => { formatSelect.innerHTML += `<option value="${format.id}">${escapeHtml(format.name)}</option>`; }); } } // Flag to prevent multiple submissions let isSavingProject = false; /** * Handle save project */ async function handleSaveProject() { // Prevent multiple simultaneous submissions if (isSavingProject) { return; } // Validate form if (!validateProjectForm()) { return; } // Set flag to prevent duplicate submissions isSavingProject = true; // Gather form data const formData = gatherProjectFormData(); // Show loading state (use inline button ID) const saveBtn = document.getElementById('saveProjectBtnInline'); const originalText = saveBtn.innerHTML; saveBtn.disabled = true; saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Saving...'; try { // Get auth token from single source of truth const authToken = window._phpVars?.bearer_token; if (!authToken) { throw new Error('Authentication required'); } // Determine API endpoint and method const isEdit = window.currentEditMode === 'edit'; const url = isEdit ? `https://backend.stage32.com/api/v2/projects-edit/${window.currentEditSlug}` : 'https://backend.stage32.com/api/v2/projects-edit'; const method = isEdit ? 'PUT' : 'POST'; // Make API call const response = await fetch(url, { method: method, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(formData) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || 'Failed to save project'); } const result = await response.json(); // Show success message if (window.ToastNotification) { ToastNotification.success(isEdit ? 'Project updated successfully' : 'Project created successfully'); } // Hide form hideAddProjectForm(); // Add the new project to the display if (result.data) { // Add to global profile data if it exists - AT THE BEGINNING if (window._jsProfileData) { if (!window._jsProfileData.projects) { window._jsProfileData.projects = []; } window._jsProfileData.projects.unshift(result.data); // Add to beginning } // Update the display with the new project updateSingleProject(result.data); } else { // Fallback: refresh the entire list if no data in response refreshFeaturedProjects(); } } catch (error) { // Show error message ToastNotification.error(error.message || 'Failed to save project. Please try again.'); } finally { // Reset flag and restore button state isSavingProject = false; saveBtn.disabled = false; saveBtn.innerHTML = originalText; } } /** * Validate project form */ function validateProjectForm() { // Check required fields const title = document.getElementById('projectTitleInline').value.trim(); const status = document.getElementById('projectStatusInline').value; const stage = document.getElementById('projectStageInline').value; if (!title) { ToastNotification.error('Please enter a project title'); // Switch to details tab $('.nav-tabs a[href="#project-details-inline"]').tab('show'); document.getElementById('projectTitleInline').focus(); return false; } if (!status) { ToastNotification.error('Please select a project status'); $('.nav-tabs a[href="#project-details-inline"]').tab('show'); document.getElementById('projectStatusInline').focus(); return false; } if (!stage) { ToastNotification.error('Please select a project stage'); $('.nav-tabs a[href="#project-details-inline"]').tab('show'); document.getElementById('projectStageInline').focus(); return false; } // Check for primary genre if genres are selected if (window.selectedGenres.length > 0) { const hasPrimary = window.selectedGenres.some(g => g.is_primary); if (!hasPrimary) { ToastNotification.error('Please select a primary genre'); $('.nav-tabs a[href="#project-genres-inline"]').tab('show'); return false; } } return true; } /** * Gather form data */ function gatherProjectFormData() { // Get user slug from single source of truth const userSlug = window._phpVars?.profile_slug || ''; // Find the primary genre const primaryGenre = window.selectedGenres.find(g => g.is_primary); const data = { title: document.getElementById('projectTitleInline').value.trim(), logline: document.getElementById('projectLoglineInline').value.trim() || undefined, tagline: document.getElementById('projectTaglineInline').value.trim() || undefined, synopsis: document.getElementById('projectSynopsisInline').value.trim() || undefined, status: document.getElementById('projectStatusInline').value, stage: document.getElementById('projectStageInline').value, format_id: document.getElementById('projectFormatTab').value || undefined, page_count: parseInt(document.getElementById('projectPageCountInline').value) || undefined, runtime_minutes: parseInt(document.getElementById('projectRuntimeInline').value) || undefined, budget: parseFloat(document.getElementById('projectBudgetInline').value) || undefined }; // Add genres as array of IDs if any selected if (window.selectedGenres.length > 0) { data.genres = window.selectedGenres.map(g => g.id); // Set primary genre ID if (window.selectedGenres.length === 1) { // If only one genre, it's automatically the primary data.primary_genre_id = window.selectedGenres[0].id; } else if (primaryGenre) { // If multiple genres, use the selected primary data.primary_genre_id = primaryGenre.id; } } // Add credits with user_slug for each if (window.selectedCredits.length > 0) { data.credits = window.selectedCredits.map(c => ({ project_position_id: c.id, user_slug: userSlug, is_owner: true })); } // Remove undefined values Object.keys(data).forEach(key => { if (data[key] === undefined) { delete data[key]; } }); return data; } // Keep existing functions from original file... // (Include all the existing functions like normalizeProjectData, renderProject, updateFeaturedProjects, etc.) /** * Normalize project data from API to ensure consistent structure * @param {Object} project - Raw project data from API * @returns {Object} Normalized project data */ function normalizeProjectData(project) { // Ensure formats have the nested structure if (project.formats && project.formats.length > 0) { project.formats = project.formats.map(format => { // If format doesn't have nested format property, it's from the update API if (!format.format && format.format_id) { // We need to get the format details - for now, we'll need to look it up // from reference data or make a simplified version return { ...format, format: { id: format.format_id, name: getFormatName(format.format_id) // Helper function to get format name } }; } return format; }); } // Ensure genres have the nested structure if (project.genres && project.genres.length > 0) { project.genres = project.genres.map(genre => { // If genre doesn't have nested genre property, it's from the update API if (!genre.genre && genre.genre_id) { return { ...genre, genre: { id: genre.genre_id, name: getGenreName(genre.genre_id) // Helper function to get genre name } }; } return genre; }); } // Ensure credits have position details if (project.credits && project.credits.length > 0) { project.credits = project.credits.map(credit => { // If position doesn't exist but project_position_id does if (!credit.position && credit.project_position_id) { return { ...credit, position: { id: credit.project_position_id, name: getPositionName(credit.project_position_id) // Helper function to get position name } }; } return credit; }); } return project; } // Helper functions to get names from IDs (using window reference data if available) function getFormatName(formatId) { // Try to get from modal's reference data if available if (window.projectReferenceData && window.projectReferenceData.formats) { const format = window.projectReferenceData.formats.find(f => f.id === formatId); if (format) return format.name; } // Default fallback names based on common format IDs const formatMap = { 1: 'Feature Film', 10: 'Short Film', 15: 'TV Series', 20: 'Web Series' }; return formatMap[formatId] || 'Project'; } function getGenreName(genreId) { // Try to get from modal's reference data if available if (window.projectReferenceData && window.projectReferenceData.genres) { const genre = window.projectReferenceData.genres.find(g => g.id === genreId); if (genre) return genre.name; } // Default to generic name return 'Genre'; } function getPositionName(positionId) { // Try to get from modal's reference data if available if (window.projectReferenceData && window.projectReferenceData.positions) { const position = window.projectReferenceData.positions.find(p => p.id === positionId); if (position) return position.name; } // Default fallback names based on common position IDs const positionMap = { 1: 'Writer', 37: 'Director', 2: 'Producer', 3: 'Actor' }; return positionMap[positionId] || 'Contributor'; } /** * Helper function to render a single project card * @param {Object} project - Project data from API * @returns {string} HTML string for the project card */ function renderProject(project) { // Normalize the project data first project = normalizeProjectData(project); // Get is_self from PHP vars (whether viewing own profile) const isSelf = window._phpVars && window._phpVars.is_self; // Get current user's credits for this project (can have multiple roles) const currentUserSlug = window._phpVars?.profile_slug || null; const userCredits = project.credits?.filter(c => c.user_slug === currentUserSlug) || []; const isOwner = userCredits.some(credit => credit.is_owner); // Map status and stage - can be either strings or objects with value/label let status = 'In Development'; if (project.status) { if (typeof project.status === 'string') { status = project.status; } else if (project.status.label) { status = project.status.label; } } let stage = null; if (project.stage) { if (typeof project.stage === 'string') { stage = project.stage; } else if (project.stage.label) { stage = project.stage.label; } } // Convert snake_case to Title Case for display const formatStatus = (str) => str ? str.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()) : ''; status = formatStatus(status); stage = formatStatus(stage); // Get project type from formats let projectType = 'Project'; if (project.formats && project.formats.length > 0) { const format = project.formats[0].format || project.formats[0]; projectType = format.name || 'Project'; } // Extract year from accolades if available let projectYear = null; if (project.accolades && project.accolades.length > 0) { // Find the most recent year from accolades projectYear = project.accolades .map(acc => acc.year) .filter(year => year) .sort((a, b) => b - a)[0]; } let projectHTML = ` <div class="project-card" data-project-slug="${project.slug}" style="background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;"> <h3 class="project-card-title" style="font-size: 18px; font-weight: 600; margin: 0; color: #212529;">${escapeHtml(project.title || 'Untitled Project')}</h3> <div style="display: flex; align-items: center; gap: 8px;"> <span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; user-select: none;"> ${escapeHtml(status)} </span> ${stage ? `<span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; user-select: none;"> ${escapeHtml(stage)} </span>` : ''} </div> </div>  <div style="display: flex; align-items: center; margin-bottom: 12px; color: #495057;"> <i class="fa fa-film" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 16px; font-weight: 500;">${escapeHtml(projectType)}</span> ${projectYear ? `<span style="margin-left: 8px; color: #6c757d;">• ${escapeHtml(projectYear)}</span>` : ''} </div> `; // Add genres if available if (project.genres && project.genres.length > 0) { projectHTML += '<div style="display: flex; align-items: center; margin-bottom: 8px; color: #6c757d;">'; projectHTML += '<i class="fa fa-tags" style="margin-right: 8px; font-size: 14px;"></i>'; projectHTML += '<div style="display: flex; flex-wrap: wrap; gap: 4px;">'; // Sort genres so primary is first const sortedGenres = [...project.genres].sort((a, b) => { if (a.is_primary) return -1; if (b.is_primary) return 1; return 0; }); sortedGenres.forEach(genreWrapper => { // Handle nested genre structure const genreName = genreWrapper.genre ? genreWrapper.genre.name : (genreWrapper.name || genreWrapper); const isPrimary = genreWrapper.is_primary || false; // Primary genre gets special styling const genreStyle = isPrimary ? 'background:rgb(0, 0, 0); color: white; padding: 2px 8px; border-radius: 100px; font-size: 12px; user-select: none;' : 'background: #f8f9fa; color: #495057; padding: 2px 8px; border-radius: 100px; font-size: 12px;'; projectHTML += ` <span class="genre-tag" style="${genreStyle}"> ${escapeHtml(genreName)} </span> `; }); projectHTML += '</div></div>'; } // Add featured accolade if available if (project.accolades && project.accolades.featured) { const featuredAccolade = project.accolades.featured; const additionalCount = project.accolades.additional_count || 0; const allAccolades = project.accolades.all || []; const isRecent = featuredAccolade.is_recent || false; // Conditional styling based on is_recent const badgeStyles = isRecent ? ` color: #664f01; padding: 4px 12px; background: radial-gradient( ellipse farthest-corner at right bottom, rgba(254, 219, 55, 0.4) 0%, rgba(253, 185, 49, 0.4) 8%, rgba(196, 156, 72, 0.4) 30%, rgba(217, 173, 73, 0.4) 40%, rgba(255, 210, 144, 0.4) 80% ), radial-gradient( ellipse farthest-corner at left top, rgba(255, 236, 196, 0.4) 0%, rgba(255, 255, 172, 0.4) 8%, rgba(209, 180, 100, 0.4) 25%, rgba(239, 193, 90, 0.4) 62.5%, rgba(236, 202, 125, 0.4) 100% ); ` : ` color: #495057; `; const starColor = isRecent ? '#664f01' : '#957c02'; const spanColor = isRecent ? '#664f01' : '#495057'; const hasMultipleAccolades = additionalCount > 0; projectHTML += ` <div class="${hasMultipleAccolades ? 'accolade-badge' : ''}" ${hasMultipleAccolades ? `data-project-id="${project.id}"` : ''} style=" margin-bottom: 12px; display: flex; align-items: center; gap: 4px; line-height: 1.5; width: fit-content; border-radius: 2px; margin-block: 1rem; font-weight: 500; font-size: 13px; ${hasMultipleAccolades ? 'cursor: pointer;' : ''} ${badgeStyles} "> <i class="fa fa-star" style="margin-right: 2px; font-size: 12px; margin-bottom: 1px; color: ${starColor};"></i> ${escapeHtml(featuredAccolade.title)}${additionalCount > 0 ? ` <span style=" font-weight: 400; font-size: 10px; color: ${spanColor}; margin-left: 8px; ">+${additionalCount} more</span>` : ''} </div> ${hasMultipleAccolades ? ` <div class="accolades-modal" id="accolades-modal-${project.id}" style=" display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 10000; width: 90%; max-width: 600px; max-height: 80vh; overflow: hidden; "> <div style=" padding: 10px 20px; border-bottom: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; background: #323232; color: white; "> <h4 style="margin: 0; font-size: 18px; font-weight: 600;"> All Accolades (${allAccolades.length}) </h4> <button class="close-accolades-modal" data-project-id="${project.id}" style=" background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; " onmouseover="this.style.color='#6c757d'" onmouseout="this.style.color='#ffffff'"> × </button> </div> <div style=" padding: 16px; max-height: calc(80vh - 80px); overflow-y: auto; "> <ul style=" list-style: none; padding: 0; margin: 0; "> ${allAccolades.map(accolade => ` <li style=" padding: 10px 12px; border-bottom: 1px solid #f1f3f5; font-size: 13px; color: #495057; line-height: 1.5; "> ${escapeHtml(accolade.title)} </li> `).join('')} </ul> </div> </div>  <div class="accolades-modal-backdrop" id="accolades-backdrop-${project.id}" style=" display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; "></div>` : ''} `; } // Add description - prefer logline over synopsis if (project.logline || project.synopsis) { projectHTML += ` <div style="margin-bottom: 12px; color: #495057; line-height: 1.5;"> ${escapeHtml(project.logline || project.synopsis)} </div> `; } // Add role information - show all roles/credits if (userCredits.length > 0) { projectHTML += ` <div style="display: flex; align-items: center; margin-bottom: 12px; color: #6c757d;"> <i class="fa fa-user" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 14px;"> `; // Join all positions with comma const positions = userCredits.map(credit => { const position = credit.position || {}; return escapeHtml(position.title || position.name || 'Contributor'); }); projectHTML += positions.join(', '); projectHTML += ` </span> </div> `; } // Add action buttons section with separator line let hasActionButtons = (isSelf && isOwner) || project.pdf_url || project.video_url || project.trailer_url; let hasProjectMedia = isSelf && isOwner && ((project.drafts && project.drafts.length > 0) || (project.pitches && project.pitches.length > 0)); if (hasActionButtons || hasProjectMedia) { projectHTML += ` <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef;"> <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;"> <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"> `; // Add CRUD buttons for self (project owner) - LEFT SIDE if (isSelf && isOwner) { projectHTML += ` <button style="background: #6c757d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="openProjectModal('edit', '${project.slug}')" title="Edit project" onmouseover="this.style.background='#5a6268';" onmouseout="this.style.background='#6c757d';"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> <button style="background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="deleteProject('${project.slug}')" title="Delete project" onmouseover="this.style.background='#c82333';" onmouseout="this.style.background='#dc3545';"> <i class="fa fa-trash" style="margin-right: 4px;"></i>Delete </button> `; } // Add action buttons if available - LEFT SIDE if (project.pdf_url) { projectHTML += ` <a href="${escapeHtml(project.pdf_url)}" style="background:rgb(0, 0, 0); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; text-decoration: none; display: inline-block; user-select: none;" onmouseover="this.style.background='#138496';" onmouseout="this.style.background='#000000';"> <i class="fa fa-download" style="margin-right: 4px;"></i>Download Script </a> `; } if (project.video_url || project.trailer_url) { const videoUrl = project.video_url || project.trailer_url; projectHTML += ` <a href="${escapeHtml(videoUrl)}" target="_blank" style="background:rgb(0, 0, 0); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; text-decoration: none; display: inline-block; user-select: none;" onmouseover="this.style.background='#138496';" onmouseout="this.style.background='#000000';"> <i class="fa fa-play" style="margin-right: 4px;"></i>View Project </a> `; } projectHTML += ` </div> `; // Add drafts and pitches dropdowns for own projects only - RIGHT SIDE const hasPitches = project.pitches && project.pitches.length > 0; const hasDrafts = project.drafts && project.drafts.length > 0; const hasAnyMedia = hasDrafts || hasPitches; if (isSelf && isOwner && hasAnyMedia) { projectHTML += ` <div class="project-media-buttons" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start !important;"> ${renderDraftsAndPitchesInline(project)} </div> `; } projectHTML += ` </div> </div> `; } projectHTML += ` </div> `; return projectHTML; } /** * Render drafts and pitches dropdowns for a project (inline version for action bar) * @param {Object} project - Project data * @returns {string} HTML for drafts and pitches sections */ function renderDraftsAndPitchesInline(project) { let html = ''; // Drafts Button (only if drafts exist) - No changes needed if (project.drafts && project.drafts.length > 0) { html += ` <div class="drafts-section-inline" style="position: relative;"> <button class="stylized-dropdown-trigger-inline" id="projdraft-trigger-${project.slug}" onclick="toggleStylizedDropdown('projdraft-trigger-${project.slug}', 'projdraft-content-${project.slug}')" style="background: #f8f9fa; border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #495057;" onmouseover="this.style.background='#e9ecef';" onmouseout="this.style.background='#f8f9fa';"> <i class="fa fa-file-text" style="color: #6c757d;"></i> <span>Drafts (${project.drafts.length})</span> <i class="fa fa-chevron-down"></i> </button> <div class="stylized-dropdown-content-inline" id="projdraft-content-${project.slug}" style="display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; padding: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000; width: 550px; max-width: 90vw; max-height: 400px; overflow-y: auto;"> ${project.drafts.map(draft => renderDraftItem(draft, project.slug)).join('')} </div> </div> `; } // Pitches Button (only if pitches exist) - NEW if (project.pitches && project.pitches.length > 0) { html += ` <div class="pitches-section-inline" style="position: relative;"> <button class="stylized-dropdown-trigger-inline" id="projpitch-trigger-${project.slug}" onclick="toggleStylizedDropdown('projpitch-trigger-${project.slug}', 'projpitch-content-${project.slug}')" style="background: #f8f9fa; border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #495057;" onmouseover="this.style.background='#e9ecef';" onmouseout="this.style.background='#f8f9fa';"> <i class="fa fa-file-powerpoint-o" style="color: #6c757d;"></i> <span>Pitches (${project.pitches.length})</span> <i class="fa fa-chevron-down"></i> </button> <div class="stylized-dropdown-content-inline" id="projpitch-content-${project.slug}" style="display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; padding: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000; width: 550px; max-width: 90vw; max-height: 400px; overflow-y: auto;"> ${project.pitches.map(pitch => renderPitchItem(pitch, project.slug)).join('')} </div> </div> `; } return html; } /** * Render drafts and evaluations dropdowns for a project (deprecated - kept for compatibility) * @param {Object} project - Project data * @returns {string} HTML for drafts and evaluations sections */ function renderDraftsAndEvaluations(project) { let html = ''; // Drafts Section (only if drafts exist) if (project.drafts && project.drafts.length > 0) { html += ` <div class="drafts-section" style="margin-bottom: 12px;"> <button class="stylized-dropdown-trigger" id="projdraft-trigger-${project.slug}" onclick="toggleStylizedDropdown('projdraft-trigger-${project.slug}', 'projdraft-content-${project.slug}')" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 12px; width: 100%; text-align: left; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center;" onmouseover="this.style.background='#e9ecef';" onmouseout="this.style.background='#f8f9fa';"> <span><i class="fa fa-file-text" style="margin-right: 8px; color: #6c757d;"></i>Drafts (${project.drafts.length})</span> <i class="fa fa-chevron-down"></i> </button> <div class="stylized-dropdown-content" id="projdraft-content-${project.slug}" style="display: none; margin-top: 8px; padding: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;"> ${project.drafts.map(draft => renderDraftItem(draft, project.slug)).join('')} </div> </div> `; } // Evaluations Section (only if evaluations exist) if (project.evaluations && project.evaluations.length > 0) { html += ` <div class="evaluations-section" style="margin-bottom: 12px;"> <button class="stylized-dropdown-trigger" id="projeval-trigger-${project.slug}" onclick="toggleStylizedDropdown('projeval-trigger-${project.slug}', 'projeval-content-${project.slug}')" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 12px; width: 100%; text-align: left; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center;" onmouseover="this.style.background='#e9ecef';" onmouseout="this.style.background='#f8f9fa';"> <span><i class="fa fa-star" style="margin-right: 8px; color: #6c757d;"></i>Evaluations (${project.evaluations.length})</span> <i class="fa fa-chevron-down"></i> </button> <div class="stylized-dropdown-content" id="projeval-content-${project.slug}" style="display: none; margin-top: 8px; padding: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;"> ${project.evaluations.map(evaluation => renderEvaluationItem(evaluation, project.slug)).join('')} </div> </div> `; } return html; } /** * Render a single draft item - matching pitches layout * @param {Object} draft - Draft data * @param {string} projectSlug - Project slug * @returns {string} HTML for draft item */ function renderDraftItem(draft, projectSlug) { const draftTitle = draft.title || 'Untitled Draft'; const versionNumber = draft.version_number || 1; const displayTitle = `${draftTitle} v${versionNumber}`; const evaluationCount = draft.evaluations ? draft.evaluations.length : 0; const uploadDate = formatPitchDate(draft.created_at); // Build the draft item HTML with new layout matching pitches let html = ` <div class="draft-item" data-draft-id="${draft.id}" style="padding: 12px; margin-bottom: 8px; background: white; border: 1px solid #dee2e6; border-radius: 4px;"> <div class="draft-info draft-item-layout" style="display: flex; justify-content: space-between; align-items: flex-start !important; flex-wrap: wrap; gap: 12px;"> <div style="flex: 1; min-width: 200px;"> <p class="upload-date" style="margin: 0 0 4px 0; color: #6c757d; font-size: 12px;">${uploadDate}</p> <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: #212529;"> ${escapeHtml(displayTitle)} </h4> ${draft.page_count ? `<p style="margin: 4px 0 0 0; color: #6c757d; font-size: 12px;">${draft.page_count} pages</p>` : ''} </div> <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;"> `; // Add evaluations button if there are evaluations if (evaluationCount > 0) { const evaluationText = evaluationCount === 1 ? 'Evaluation' : 'Evaluations'; html += ` <button class="btn btn-secondary btn-sm" onclick="openDraftEvaluationModal('${draft.id}', '${escapeHtml(displayTitle)}')" style="padding: 4px 8px; font-size: 12px; background: #f8f9fa; color: #323232; border: 1px solid #dee2e6;" onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'"> <strong>${evaluationCount}</strong> ${evaluationText} </button> `; } // Add PDF button if available if (draft.pdf_url) { html += ` <button class="btn btn-secondary btn-sm draft-pdf-btn" onclick="downloadDraftPdf('${draft.pdf_url}')" style="padding: 4px 8px; font-size: 12px; background: #f8f9fa; color: #323232; border: 1px solid #dee2e6;" onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'"> <i class="fa fa-download"></i> PDF </button> `; } // Close button group div html += ` </div> </div> </div> `; // Store evaluations data for modal access if (evaluationCount > 0 && typeof window !== 'undefined') { if (!window.draftEvaluationsData) { window.draftEvaluationsData = {}; } window.draftEvaluationsData[draft.id] = draft.evaluations; } return html; } /** * Render a single evaluation item * @param {Object} evaluation - Evaluation data * @param {string} projectSlug - Project slug * @returns {string} HTML for evaluation item */ function renderEvaluationItem(evaluation, projectSlug) { const evaluationDate = evaluation.completed_at ? new Date(evaluation.completed_at).toLocaleDateString() : 'No date'; return ` <div class="evaluation-item" data-evaluation-id="${evaluation.id}" style="padding: 12px; margin-bottom: 8px; background: white; border: 1px solid #dee2e6; border-radius: 4px;"> <div class="evaluation-info" style="margin-bottom: 12px;"> <p class="evaluation-date" style="margin: 0 0 8px 0; color: #6c757d; font-size: 14px;"><strong>Date:</strong> ${evaluationDate}</p> <h4 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #212529;">${escapeHtml(evaluation.user_title || 'No title')}</h4> <p class="evaluation-notes" style="margin: 0; color: #495057; font-size: 14px;"> ${evaluation.user_notes ? escapeHtml(evaluation.user_notes) : '<em style="color: #6c757d;">No notes</em>'} </p> </div> <div class="evaluation-actions" style="display: flex; gap: 8px;"> <button class="btn btn-primary btn-sm" onclick="downloadEvaluationPdf('${evaluation.pdf_url}')" ${!evaluation.pdf_url ? 'disabled' : ''} style="padding: 4px 8px; font-size: 12px;"> <i class="fa fa-download"></i> Download PDF </button> <button class="btn btn-secondary btn-sm" onclick="editEvaluation('${projectSlug}', '${evaluation.id}')" style="padding: 4px 8px; font-size: 12px;"> <i class="fa fa-edit"></i> Edit </button> </div> </div> `; } /** * Render a single pitch deck item * @param {Object} pitchDeck - Pitch deck media data * @param {string} projectSlug - Project slug * @returns {string} HTML for pitch deck item */ // renderPitchDeckItem function removed - replaced by renderPitchItem /** * Format date to human-readable format * @param {string} dateString - Date string to format * @returns {string} Formatted date */ function formatPitchDate(dateString) { if (!dateString) return 'No date'; const date = new Date(dateString); const now = new Date(); const diffTime = Math.abs(now - date); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); if (diffDays === 0) { return 'Today'; } else if (diffDays === 1) { return '1 day ago'; } else if (diffDays <= 7) { return `${diffDays} days ago`; } else { const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const month = months[date.getMonth()]; const day = String(date.getDate()).padStart(2, '0'); const year = date.getFullYear(); return `${month} ${day}, ${year}`; } } /** * Render a pitch item with nested evaluations * @param {Object} pitch - Pitch data with nested evaluations * @param {string} projectSlug - Project slug * @returns {string} HTML for pitch item */ function renderPitchItem(pitch, projectSlug) { const uploadDate = formatPitchDate(pitch.created_at); const pitchTitle = pitch.title || 'Untitled Pitch'; const versionNumber = pitch.version_number || 1; const displayTitle = versionNumber > 1 ? `${pitchTitle} v${versionNumber}` : pitchTitle; const evaluationCount = pitch.evaluations ? pitch.evaluations.length : 0; // Build the pitch item HTML with new layout let html = ` <div class="pitch-item" data-pitch-id="${pitch.id}" style="padding: 12px; margin-bottom: 8px; background: white; border: 1px solid #dee2e6; border-radius: 4px;"> <div class="pitch-info pitch-item-layout" style="display: flex; justify-content: space-between; align-items: flex-start !important; flex-wrap: wrap; gap: 12px;"> <div style="flex: 1; min-width: 200px;"> <p class="upload-date" style="margin: 0 0 4px 0; color: #6c757d; font-size: 12px;">${uploadDate}</p> <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: #212529;"> ${escapeHtml(displayTitle)} </h4> </div> <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;"> `; // Add evaluations button if there are evaluations if (evaluationCount > 0) { const evaluationText = evaluationCount === 1 ? 'Evaluation' : 'Evaluations'; html += ` <button class="btn btn-secondary btn-sm" onclick="openEvaluationModal('${pitch.id}', '${escapeHtml(displayTitle)}')" style="padding: 4px 8px; font-size: 12px; background: #f8f9fa; color: #323232; border: 1px solid #dee2e6;" onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'"> <strong>${evaluationCount}</strong> ${evaluationText} </button> `; } // Add PDF button if available if (pitch.pdf_url) { html += ` <button class="btn btn-secondary btn-sm pitch-pdf-btn" onclick="downloadPitchPdf('${pitch.pdf_url}')" style="padding: 4px 8px; font-size: 12px; background: #f8f9fa; color: #323232; border: 1px solid #dee2e6;" onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'"> <i class="fa fa-download"></i> PDF </button> `; } // Close button group div html += ` </div> </div> </div> `; // Store evaluations data for modal access if (evaluationCount > 0 && typeof window !== 'undefined') { if (!window.pitchEvaluationsData) { window.pitchEvaluationsData = {}; } window.pitchEvaluationsData[pitch.id] = pitch.evaluations; } return html; } /** * Render nested evaluations within a pitch * @param {Array} evaluations - Array of evaluation objects * @param {string} pitchId - Pitch ID * @returns {string} HTML for nested evaluations */ function renderNestedEvaluations(evaluations, pitchId) { if (!evaluations || evaluations.length === 0) { return '<p style="color: #6c757d; font-style: italic;">No evaluations available</p>'; } let html = ''; evaluations.forEach((evaluation, index) => { const evaluationDate = evaluation.completed_at ? new Date(evaluation.completed_at).toLocaleDateString() : 'No date'; const overallScore = evaluation.overall_score || 0; const hasScores = evaluation.scores && evaluation.scores.length > 0; html += ` <div class="nested-evaluation" style="padding: 10px; margin-bottom: 8px; background: white; border: 1px solid #dee2e6; border-radius: 4px;"> <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;"> <div> <h6 style="margin: 0; font-size: 14px; font-weight: 600; color: #212529;"> Evaluation ${index + 1} </h6> <span style="font-size: 12px; color: #6c757d;">${evaluationDate}</span> </div> ${overallScore ? ` <div style="text-align: right;"> <div style="font-size: 18px; font-weight: bold; color: #28a745;"> ${overallScore.toFixed(1)} </div> <div style="font-size: 11px; color: #6c757d;">Overall Score</div> </div> ` : ''} </div> `; // Add scores if available - Always visible, no collapsing if (hasScores) { html += ` <div style="margin-top: 12px;"> <h6 style="margin: 0 0 8px 0; font-size: 13px; font-weight: 600; color: #495057;"> Detailed Scores (${evaluation.scores.length}) </h6> <div style="margin-top: 8px;"> ${renderScoreDisplay(evaluation.scores)} </div> </div> `; } // Add answers/feedback if available with full text and question if (evaluation.answers && evaluation.answers.length > 0) { evaluation.answers.forEach(answer => { if (answer.answer_text) { const questionText = answer.question ? answer.question.question_text : 'Feedback'; html += ` <div style="margin-top: 12px; padding: 10px; background: #f8f9fa; border-radius: 4px;"> <h6 style="margin: 0 0 6px 0; font-size: 12px; font-weight: 600; color: #6c757d;"> ${escapeHtml(questionText)} </h6> <p style="margin: 0; font-size: 12px; color: #495057; line-height: 1.5;"> ${escapeHtml(answer.answer_text)} </p> </div> `; } }); } // Add PDF download if available if (evaluation.pdf_url) { html += ` <div style="margin-top: 8px;"> <button class="btn btn-secondary btn-sm" onclick="downloadEvaluationPdf('${evaluation.pdf_url}')" style="padding: 2px 8px; font-size: 11px;"> <i class="fa fa-download"></i> Download Report </button> </div> `; } html += ` </div> `; }); return html; } /** * Render score display for an evaluation * @param {Array} scores - Array of score objects * @returns {string} HTML for score display */ function renderScoreDisplay(scores) { if (!scores || scores.length === 0) { return '<p style="color: #6c757d; font-style: italic; font-size: 12px;">No scores available</p>'; } let html = '<div style="display: grid; gap: 6px;">'; scores.forEach(score => { // Use category name from scoreCategory object, fallback to category ID const categoryName = score.scoreCategory && score.scoreCategory.category_name ? score.scoreCategory.category_name : `Category ${score.evaluation_type_score_category_id || 'Unknown'}`; const categoryDescription = score.scoreCategory && score.scoreCategory.category_description ? score.scoreCategory.category_description : ''; const scoreValue = parseFloat(score.score) || 0; const scoreDisplay = score.score_display || `${scoreValue.toFixed(1)}/10`; const letterGrade = score.letter_grade || ''; const percentage = score.score_percentage || (scoreValue * 10); // Color based on score value let barColor = '#dc3545'; // Red for low scores if (percentage >= 70) barColor = '#28a745'; // Green for high scores else if (percentage >= 50) barColor = '#ffc107'; // Yellow for medium scores html += ` <div class="score-category" style="padding: 8px; background: #f8f9fa; border-radius: 4px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;"> <div style="flex: 1;"> <span style="font-size: 14px; color: #495057; font-weight: 600;"> ${escapeHtml(categoryName)} </span> ${categoryDescription ? ` <span style="display: block; font-size: 13px; color: #6c757d; margin-top: 2px;"> ${escapeHtml(categoryDescription)} </span> ` : ''} </div> <div style="display: flex; align-items: center; gap: 8px; margin-left: 12px;"> <span style="font-size: 13px; font-weight: bold; color: #212529;"> ${scoreDisplay} </span> ${letterGrade ? ` <span class="grade-badge" style="padding: 2px 6px; background: ${barColor}; color: white; border-radius: 3px; font-size: 10px; font-weight: bold;"> ${letterGrade} </span> ` : ''} </div> </div> <div style="height: 4px; background: #dee2e6; border-radius: 2px; overflow: hidden;"> <div style="height: 100%; width: ${percentage}%; background: ${barColor}; transition: width 0.3s ease;"></div> </div> </div> `; }); html += '</div>'; return html; } /** * Open evaluation modal * @param {string} pitchId - Pitch ID * @param {string} pitchTitle - Pitch title for display */ function openEvaluationModal(pitchId, pitchTitle) { const evaluations = window.pitchEvaluationsData && window.pitchEvaluationsData[pitchId]; if (!evaluations || evaluations.length === 0) { return; } // Update the button text to "Get Pitch Feedback" for pitches const feedbackBtn = document.querySelector('.get-feedback-btn'); if (feedbackBtn) { feedbackBtn.textContent = 'Get Pitch Feedback'; feedbackBtn.onclick = function() { window.open('https://www.stage32.com/scriptservices/pitch-sessions', '_blank'); return false; }; } // Show modal const backdrop = document.getElementById('evaluationModalBackdrop'); backdrop.style.display = 'block'; // Populate evaluations list const evaluationsList = document.getElementById('evaluationsList'); evaluationsList.innerHTML = ''; evaluations.forEach((evaluation, index) => { const evalDate = formatPitchDate(evaluation.completed_at); const overallScore = evaluation.overall_score || 0; const card = document.createElement('div'); card.className = 'evaluation-card' + (index === 0 ? ' active' : ''); card.onclick = () => selectEvaluation(pitchId, index); card.innerHTML = ` <div style="display: flex; justify-content: space-between; align-items: center;"> <div> <div style="font-size: 12px; color: #6c757d;" class="text-muted">${evalDate}</div> <div style="font-size: 13px; font-weight: 500; margin-top: 4px;">Evaluation ${index + 1}</div> </div> ${overallScore ? ` <div style="text-align: right;"> <div class="score-value" style="font-size: 20px; font-weight: bold; color: #28a745;"> ${overallScore.toFixed(1)} </div> <div style="font-size: 10px; color: #6c757d;" class="text-muted">Overall Score</div> </div> ` : ''} </div> `; evaluationsList.appendChild(card); }); // Show first evaluation details selectEvaluation(pitchId, 0); } /** * Select and display evaluation details * @param {string} pitchId - Pitch ID * @param {number} index - Evaluation index */ function selectEvaluation(pitchId, index) { const evaluations = window.pitchEvaluationsData && window.pitchEvaluationsData[pitchId]; if (!evaluations || !evaluations[index]) { return; } // Update active state on cards const cards = document.querySelectorAll('.evaluation-card'); cards.forEach((card, i) => { if (i === index) { card.classList.add('active'); } else { card.classList.remove('active'); } }); const evaluation = evaluations[index]; const evaluationDetails = document.getElementById('evaluationDetails'); // Update header const header = document.getElementById('evaluationHeader'); if (header) { header.querySelector('h4').textContent = `Evaluation ${index + 1} Details`; } // Build details HTML let detailsHTML = ''; // Add scores if available if (evaluation.scores && evaluation.scores.length > 0) { detailsHTML += ` <div style="margin-bottom: 24px;"> <h5 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #495057;"> Detailed Scores </h5> ${renderScoreDisplay(evaluation.scores)} </div> `; } // Add answers/feedback if available if (evaluation.answers && evaluation.answers.length > 0) { evaluation.answers.forEach(answer => { if (answer.answer_text) { const questionText = answer.question ? answer.question.question_text : 'Feedback'; detailsHTML += ` <div style="margin-top: 20px; padding: 16px; background: #f8f9fa; border-radius: 6px;"> <h6 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #6c757d;"> ${escapeHtml(questionText)} </h6> <p style="margin: 0; font-size: 14px; color: #495057; line-height: 1.6;"> ${escapeHtml(answer.answer_text)} </p> </div> `; } }); } // Add PDF download if available if (evaluation.pdf_url) { detailsHTML += ` <div style="margin-top: 20px;"> <button class="btn btn-secondary btn-sm" onclick="downloadEvaluationPdf('${evaluation.pdf_url}')" style="padding: 6px 12px;"> <i class="fa fa-download"></i> Download Full Report </button> </div> `; } evaluationDetails.innerHTML = detailsHTML; } /** * Close evaluation modal */ function closeEvaluationModal(event) { if (event) { event.stopPropagation(); } const backdrop = document.getElementById('evaluationModalBackdrop'); backdrop.style.display = 'none'; } /** * Open draft evaluation modal * @param {string} draftId - Draft ID * @param {string} draftTitle - Draft title for display */ function openDraftEvaluationModal(draftId, draftTitle) { const evaluations = window.draftEvaluationsData && window.draftEvaluationsData[draftId]; if (!evaluations || evaluations.length === 0) { return; } // Update the button text to "Get Coverage" for drafts const feedbackBtn = document.querySelector('.get-feedback-btn'); if (feedbackBtn) { feedbackBtn.textContent = 'Get Coverage'; feedbackBtn.onclick = function() { window.open('https://www.stage32.com/scriptservices/coverage', '_blank'); return false; }; } // Show modal const backdrop = document.getElementById('evaluationModalBackdrop'); backdrop.style.display = 'block'; // Populate evaluations list const evaluationsList = document.getElementById('evaluationsList'); evaluationsList.innerHTML = ''; evaluations.forEach((evaluation, index) => { const evalDate = formatPitchDate(evaluation.completed_at); const card = document.createElement('div'); card.className = 'evaluation-card' + (index === 0 ? ' active' : ''); card.onclick = () => selectDraftEvaluation(draftId, index); card.innerHTML = ` <div style="display: flex; justify-content: space-between; align-items: center;"> <div> <div style="font-size: 12px; color: #6c757d;" class="text-muted">${evalDate}</div> <div style="font-size: 13px; font-weight: 500; margin-top: 4px;">Coverage ${index + 1}</div> </div> </div> `; evaluationsList.appendChild(card); }); // Show first evaluation details selectDraftEvaluation(draftId, 0); } /** * Select and display draft evaluation details * @param {string} draftId - Draft ID * @param {number} index - Evaluation index */ function selectDraftEvaluation(draftId, index) { const evaluations = window.draftEvaluationsData && window.draftEvaluationsData[draftId]; if (!evaluations || !evaluations[index]) { return; } // Update active state on cards const cards = document.querySelectorAll('.evaluation-card'); cards.forEach((card, i) => { if (i === index) { card.classList.add('active'); } else { card.classList.remove('active'); } }); const evaluation = evaluations[index]; const evaluationDetails = document.getElementById('evaluationDetails'); // Update header const header = document.getElementById('evaluationHeader'); if (header) { header.querySelector('h4').textContent = `Coverage ${index + 1} Details`; } // Build details HTML for draft evaluations (PDFs only, no scores) let detailsHTML = ''; // Add PDF download as main action if (evaluation.pdf_url) { detailsHTML += ` <div style="text-align: center; padding: 40px 20px;"> <i class="fa fa-file-pdf-o" style="font-size: 64px; color: #dc3545; margin-bottom: 20px;"></i> <h5 style="margin-bottom: 20px;">Coverage Report Available</h5> <p style="color: #6c757d; margin-bottom: 30px;">Download the full coverage report for detailed feedback and analysis.</p> <button class="btn btn-primary btn-lg" onclick="downloadEvaluationPdf('${evaluation.pdf_url}')" style="padding: 12px 30px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.5;"> <i class="fa fa-download"></i> <span>Download Coverage Report</span> </button> </div> `; } else { detailsHTML += ` <div style="text-align: center; padding: 40px 20px;"> <i class="fa fa-exclamation-circle" style="font-size: 48px; color: #ffc107; margin-bottom: 20px;"></i> <h5>Coverage Report Not Available</h5> <p style="color: #6c757d;">The coverage report for this evaluation is not yet available.</p> </div> `; } evaluationDetails.innerHTML = detailsHTML; } // toggleEvaluationScores function removed - scores are always visible /** * Download pitch PDF (opens in new tab) * @param {string} pdfUrl - PDF URL */ function downloadPitchPdf(pdfUrl) { if (pdfUrl && pdfUrl !== 'null' && pdfUrl !== 'undefined') { window.open(pdfUrl, '_blank'); } else { if (window.ToastNotification) { ToastNotification.error('PDF not available for this pitch'); } } } // Simple helper functions function formatFileSize(bytes) { if (!bytes) return ''; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; } // downloadPitchDeck function removed - replaced by downloadPitchPdf /** * Edit pitch functionality (placeholder) * @param {string} projectSlug - Project slug * @param {string} pitchId - Pitch ID */ function editPitch(projectSlug, pitchId) { // Find the pitch item container const pitchItem = document.querySelector(`[data-pitch-deck-id="${pitchId}"]`); if (!pitchItem) { return; } // Show info toast - same pattern as drafts and evaluations if (window.ToastNotification) { ToastNotification.info('Pitch editing functionality coming soon'); } else { ToastNotification.info('Pitch editing functionality coming soon'); } } /** * Update featured projects section with JavaScript data * @param {Object} profileData - Profile data from API */ function updateFeaturedProjects(profileData) { // Find the featured projects content container const contentContainer = document.getElementById('featured-projects-content'); if (!contentContainer) { return; } // Get is_self from PHP vars and current user slug const isSelf = window._phpVars && window._phpVars.is_self; const currentUserSlug = window._phpVars?.profile_slug || null; // If no projects if (!profileData.projects || profileData.projects.length === 0) { if (isSelf) { // Show empty state for own profile with add button contentContainer.innerHTML = ` <div class="empty-state-message text-center" style="padding: 40px 20px;"> <i class="fa fa-film fa-3x text-muted" style="margin-bottom: 15px;"></i> <h4 class="text-muted">No Featured Projects Yet</h4> <p class="text-muted">Add your creative projects to showcase your work and achievements.</p> <button type="button" class="btn btn-primary" onclick="showAddProjectForm()" style="user-select: none; transition: all 0.2s ease;"> <i class="fa fa-plus"></i> Add Your First Project </button> </div> `; } else { // Hide panel for other users' profiles document.getElementById('featured-projects-panel').style.display = 'none'; } return; } // Filter projects to only show those where current user has credits (if viewing own profile) // Or all projects if viewing someone else's profile let userProjects = profileData.projects; if (!isSelf && currentUserSlug) { // If viewing someone else's profile, only show projects where they have credits const profileUserSlug = profileData.user?.slug; if (profileUserSlug) { userProjects = profileData.projects.filter(project => project.credits && project.credits.some(credit => credit.user_slug === profileUserSlug) ); } } // Split projects into visible and hidden const displayCount = 3; const visibleProjects = userProjects.slice(0, displayCount); const hiddenProjects = userProjects.slice(displayCount); const remainingCount = hiddenProjects.length; // Create projects list HTML let projectsHTML = '<div class="featured-projects">'; // Add visible projects visibleProjects.forEach(project => { projectsHTML += renderProject(project); }); // Add hidden projects section if there are more than 3 if (hiddenProjects.length > 0) { projectsHTML += '<div class="featured-projects-hidden" style="display: none;">'; hiddenProjects.forEach(project => { projectsHTML += renderProject(project); }); projectsHTML += '</div>'; // Add see more button projectsHTML += ` <div style="text-align: center; margin-top: 15px;"> <button class="profile-see-more-btn" onclick="toggleFeaturedProjects()"> See ${remainingCount} more <i class="fa fa-chevron-down"></i> </button> </div> `; } projectsHTML += '</div>'; // Update the content container contentContainer.innerHTML = projectsHTML; // Make sure panel is visible when there's data document.getElementById('featured-projects-panel').style.display = 'block'; } // Toggle featured projects visibility function toggleFeaturedProjects() { const hiddenSection = document.querySelector('#featured-projects-panel .featured-projects-hidden'); const button = event.target; if (hiddenSection) { if (hiddenSection.style.display === 'none') { hiddenSection.style.display = 'block'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { hiddenSection.style.display = 'none'; const count = hiddenSection.querySelectorAll('.project-card').length; button.innerHTML = `See ${count} more <i class="fa fa-chevron-down"></i>`; } } } // Refresh featured projects list (called after saving/deleting) function refreshFeaturedProjects() { // Check if we have the profile data if (window._jsProfileData) { // Call the update function with current data updateFeaturedProjects(window._jsProfileData); } else { // Fallback: reload the page if no profile data available location.reload(); } } /** * Update or add a single project card without refreshing the entire list * @param {Object} projectData - Project data from API response */ function updateSingleProject(projectData) { const projectSlug = projectData.slug; const contentContainer = document.getElementById('featured-projects-content'); if (!contentContainer) { return; } // Check for existing card const existingCard = document.querySelector(`[data-project-slug="${projectSlug}"]`); if (existingCard) { // Replace existing card const newCardHTML = renderProject(projectData); const tempDiv = document.createElement('div'); tempDiv.innerHTML = newCardHTML; const newCard = tempDiv.firstElementChild; // Replace the existing card with the new one existingCard.parentNode.replaceChild(newCard, existingCard); } else { // Add new card - INSERT AT THE TOP OF THE LIST // Check if we have an empty state const emptyState = contentContainer.querySelector('.empty-state-message'); if (emptyState) { // Replace empty state with new projects container contentContainer.innerHTML = '<div class="featured-projects"></div>'; } // Get or create the projects container let projectsContainer = contentContainer.querySelector('.featured-projects'); if (!projectsContainer) { projectsContainer = document.createElement('div'); projectsContainer.className = 'featured-projects'; contentContainer.appendChild(projectsContainer); } // Create the new card const newCardHTML = renderProject(projectData); const tempDiv = document.createElement('div'); tempDiv.innerHTML = newCardHTML; const newCard = tempDiv.firstElementChild; // Count all existing cards const allCards = projectsContainer.querySelectorAll('.project-card'); const visibleCards = Array.from(allCards).filter(card => !card.closest('.featured-projects-hidden')); const hiddenSection = projectsContainer.querySelector('#featured-projects-panel .featured-projects-hidden'); // Always add new project at the top (first position) if (visibleCards.length > 0) { // Insert before the first visible card projectsContainer.insertBefore(newCard, visibleCards[0]); // Check if we now have more than 3 visible cards if (visibleCards.length >= 3) { // Move the last visible card to hidden section const lastVisibleCard = visibleCards[visibleCards.length - 1]; if (hiddenSection) { // Add to the beginning of hidden section hiddenSection.insertBefore(lastVisibleCard, hiddenSection.firstChild); // Update see more button count const seeMoreBtn = projectsContainer.querySelector('#featured-projects-panel .profile-see-more-btn'); if (seeMoreBtn && hiddenSection.style.display === 'none') { const hiddenCount = hiddenSection.querySelectorAll('.project-card').length; seeMoreBtn.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } else { // Create hidden section for the overflow card const newHiddenSection = document.createElement('div'); newHiddenSection.className = 'featured-projects-hidden'; newHiddenSection.style.display = 'none'; newHiddenSection.appendChild(lastVisibleCard); // Find or create see more button container let seeMoreBtnContainer = projectsContainer.querySelector('#featured-projects-panel .profile-see-more-btn')?.parentElement; if (!seeMoreBtnContainer) { seeMoreBtnContainer = document.createElement('div'); seeMoreBtnContainer.style.cssText = 'text-align: center; margin-top: 15px;'; seeMoreBtnContainer.innerHTML = ` <button class="profile-see-more-btn" onclick="toggleFeaturedProjects()"> See 1 more <i class="fa fa-chevron-down"></i> </button> `; projectsContainer.appendChild(seeMoreBtnContainer); } // Insert hidden section before see more button projectsContainer.insertBefore(newHiddenSection, seeMoreBtnContainer); } } } else { // No existing cards, just add the new card if (hiddenSection) { // Insert before hidden section projectsContainer.insertBefore(newCard, hiddenSection); } else { // Find see more button if exists const seeMoreBtnContainer = projectsContainer.querySelector('#featured-projects-panel .profile-see-more-btn')?.parentElement; if (seeMoreBtnContainer) { // Insert before see more button projectsContainer.insertBefore(newCard, seeMoreBtnContainer); } else { // Just append to the container (first card) projectsContainer.appendChild(newCard); } } } } } // Edit project function - opens the modal for editing function editProject(projectSlug) { // Call the openProjectModal function if it exists (from the modal file) if (typeof openProjectModal === 'function') { openProjectModal('edit', projectSlug); } } // Store project data for deletion let projectToDelete = null; // Delete project functionality - shows confirmation modal function deleteProject(projectSlug) { // Find the project data const projectCard = document.querySelector(`[data-project-slug="${projectSlug}"]`); if (!projectCard) { return; } // Get project title from the card const projectTitle = projectCard.querySelector('.project-card-title')?.textContent || 'Unknown Project'; // Store project data for deletion projectToDelete = { slug: projectSlug, title: projectTitle.trim() }; // Update modal with project info document.getElementById('projectNameDisplay').textContent = projectToDelete.title; // Clear the input field const confirmInput = document.getElementById('confirmProjectName'); confirmInput.value = ''; // Disable the delete button document.getElementById('confirmDeleteBtn').disabled = true; // Show the modal $('#deleteProjectModal').modal('show'); } // Setup delete confirmation modal events document.addEventListener('DOMContentLoaded', function() { // Initialize the inline form initializeProjectForm(); // Input validation for project name confirmation const confirmInput = document.getElementById('confirmProjectName'); const confirmBtn = document.getElementById('confirmDeleteBtn'); if (confirmInput && confirmBtn) { confirmInput.addEventListener('input', function() { const inputValue = this.value.trim(); const projectName = projectToDelete?.title || ''; // Enable delete button only if names match exactly confirmBtn.disabled = inputValue !== projectName; }); // Handle delete confirmation confirmBtn.addEventListener('click', async function() { if (!projectToDelete) return; // Disable button and show loading state confirmBtn.disabled = true; confirmBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Deleting...'; try { await executeProjectDelete(projectToDelete.slug); // Hide modal on success $('#deleteProjectModal').modal('hide'); } catch (error) { // Re-enable button on error confirmBtn.disabled = false; confirmBtn.innerHTML = '<i class="fa fa-trash"></i> Delete Project'; } }); // Clear state when modal is hidden $('#deleteProjectModal').on('hidden.bs.modal', function() { projectToDelete = null; confirmInput.value = ''; confirmBtn.disabled = true; confirmBtn.innerHTML = '<i class="fa fa-trash"></i> Delete Project'; }); } // Accolades modal event handlers // Use event delegation for dynamically created accolade badges document.addEventListener('click', function(e) { // Handle accolade badge clicks const accoladeBadge = e.target.closest('.accolade-badge'); if (accoladeBadge) { const projectId = accoladeBadge.dataset.projectId; const modal = document.getElementById(`accolades-modal-${projectId}`); const backdrop = document.getElementById(`accolades-backdrop-${projectId}`); if (modal && backdrop) { modal.style.display = 'block'; backdrop.style.display = 'block'; // Disable background scrolling document.body.style.overflow = 'hidden'; } return; } // Handle close button clicks const closeBtn = e.target.closest('.close-accolades-modal'); if (closeBtn) { const projectId = closeBtn.dataset.projectId; const modal = document.getElementById(`accolades-modal-${projectId}`); const backdrop = document.getElementById(`accolades-backdrop-${projectId}`); if (modal && backdrop) { modal.style.display = 'none'; backdrop.style.display = 'none'; // Re-enable background scrolling document.body.style.overflow = ''; } return; } // Handle backdrop clicks if (e.target.classList.contains('accolades-modal-backdrop')) { const backdropId = e.target.id; const projectId = backdropId.replace('accolades-backdrop-', ''); const modal = document.getElementById(`accolades-modal-${projectId}`); if (modal) { modal.style.display = 'none'; e.target.style.display = 'none'; // Re-enable background scrolling document.body.style.overflow = ''; } return; } }); }); // Execute the actual project deletion async function executeProjectDelete(projectSlug) { try { // Show loading state on the project card const projectCard = document.querySelector(`[data-project-slug="${projectSlug}"]`); if (projectCard) { projectCard.style.opacity = '0.5'; projectCard.style.pointerEvents = 'none'; } // Get auth token from single source of truth const authToken = window._phpVars?.bearer_token; if (!authToken) { throw new Error('Authentication required'); } // Call delete API const response = await fetch(`https://backend.stage32.com/api/v2/projects-edit/${projectSlug}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` } }); if (!response.ok) { if (response.status === 403) { throw new Error('You do not have permission to delete this project'); } else if (response.status === 404) { throw new Error('Project not found'); } const errorData = await response.json(); throw new Error(errorData.message || 'Failed to delete project'); } const result = await response.json(); // Show success message if (window.ToastNotification) { ToastNotification.success('Project deleted successfully'); } // Remove project from the profile data if (window._jsProfileData && window._jsProfileData.projects) { window._jsProfileData.projects = window._jsProfileData.projects.filter( project => project.slug !== projectSlug ); } // Refresh the display refreshFeaturedProjects(); } catch (error) { // Show error message ToastNotification.error(error.message || 'Failed to delete project. Please try again.'); // Restore project card state if it exists const projectCard = document.querySelector(`[data-project-slug="${projectSlug}"]`); if (projectCard) { projectCard.style.opacity = '1'; projectCard.style.pointerEvents = 'auto'; } throw error; // Re-throw to handle in caller } } // ===== DRAFTS & EVALUATIONS DROPDOWN FUNCTIONALITY ===== /** * Toggle stylized dropdown visibility * @param {string} triggerId - ID of the trigger button * @param {string} contentId - ID of the content container */ function toggleStylizedDropdown(triggerId, contentId) { const content = document.getElementById(contentId); const trigger = document.getElementById(triggerId); if (!content || !trigger) { return; } const chevron = trigger.querySelector('.fa-chevron-down, .fa-chevron-up'); const isCurrentlyOpen = content.style.display === 'block'; // Close all other open dropdowns first // Find all dropdown content elements (both inline and regular) const allDropdowns = document.querySelectorAll('[id^="projdraft-content-"], [id^="projeval-content-"], [id^="projpitch-content-"]'); const allTriggers = document.querySelectorAll('[id^="projdraft-trigger-"], [id^="projeval-trigger-"], [id^="projpitch-trigger-"]'); // Close all dropdowns allDropdowns.forEach(dropdown => { if (dropdown.id !== contentId) { dropdown.style.display = 'none'; } }); // Reset all chevrons allTriggers.forEach(triggerBtn => { if (triggerBtn.id !== triggerId) { const otherChevron = triggerBtn.querySelector('.fa-chevron-up'); if (otherChevron) { otherChevron.className = 'fa fa-chevron-down'; } } }); // Toggle the clicked dropdown if (!isCurrentlyOpen) { // Show dropdown content.style.display = 'block'; if (chevron) { chevron.className = 'fa fa-chevron-up'; } } else { // Hide dropdown content.style.display = 'none'; if (chevron) { chevron.className = 'fa fa-chevron-down'; } } } /** * Close all dropdowns - helper function */ function closeAllDropdowns() { const allDropdowns = document.querySelectorAll('[id^="projdraft-content-"], [id^="projeval-content-"], [id^="projpitch-content-"]'); const allTriggers = document.querySelectorAll('[id^="projdraft-trigger-"], [id^="projeval-trigger-"], [id^="projpitch-trigger-"]'); allDropdowns.forEach(dropdown => { dropdown.style.display = 'none'; }); allTriggers.forEach(trigger => { const chevron = trigger.querySelector('.fa-chevron-up'); if (chevron) { chevron.className = 'fa fa-chevron-down'; } }); } // Add global click listener to close dropdowns when clicking outside document.addEventListener('click', function(event) { // Check if the click was on a dropdown trigger button const clickedTrigger = event.target.closest('[id^="projdraft-trigger-"], [id^="projeval-trigger-"], [id^="projpitch-trigger-"]'); // If click was not on a trigger button, check if it was inside dropdown content if (!clickedTrigger) { const clickedContent = event.target.closest('[id^="projdraft-content-"], [id^="projeval-content-"], [id^="projpitch-content-"]'); // If click was outside both trigger and content, close all dropdowns if (!clickedContent) { closeAllDropdowns(); } } }); /** * Download draft PDF (opens in new tab) * @param {string} pdfUrl - PDF URL */ function downloadDraftPdf(pdfUrl) { if (pdfUrl && pdfUrl !== 'null' && pdfUrl !== 'undefined') { window.open(pdfUrl, '_blank'); } else { if (window.ToastNotification) { ToastNotification.error('PDF not available for this draft'); } } } /** * Download evaluation PDF (opens in new tab) * @param {string} pdfUrl - PDF URL */ function downloadEvaluationPdf(pdfUrl) { if (pdfUrl && pdfUrl !== 'null' && pdfUrl !== 'undefined') { window.open(pdfUrl, '_blank'); } else { if (window.ToastNotification) { ToastNotification.error('PDF not available for this evaluation'); } } } /** * Edit draft inline - show edit form * @param {string} projectSlug - Project slug * @param {string} draftId - Draft ID */ function editDraft(projectSlug, draftId) { // Find the draft item container const draftItem = document.querySelector(`[data-draft-id="${draftId}"]`); if (!draftItem) { return; } if (window.ToastNotification) { ToastNotification.info('Draft editing functionality coming soon'); } } /** * Edit evaluation inline - show edit form * @param {string} projectSlug - Project slug * @param {string} evaluationId - Evaluation ID */ function editEvaluation(projectSlug, evaluationId) { // Find the evaluation item container const evaluationItem = document.querySelector(`[data-evaluation-id="${evaluationId}"]`); if (!evaluationItem) { return; } if (window.ToastNotification) { ToastNotification.info('Evaluation editing functionality coming soon'); } } // HTML escape function function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text ? text.toString().replace(/[&<>"']/g, function(m) { return map[m]; }) : ''; } </script>   <div class="panel panel-large panel-tomasz" id="work-experience-panel"> <div class="panel-heading"> <div class="pull-right"> </div> <h3 class="panel-title" style="font-weight: bold;"> Work Experience </h3> </div> <div class="panel-body">   <div id="work-experience-content"> <div class="loading-state text-center" style="padding: 20px;"> <i class="fa fa-spinner fa-spin"></i> Loading work experience... </div> </div> </div> </div>  <script> /** * Work Experience Management System - Enhanced Staging Environment * Full CRUD functionality with new backend API integration * Based on successful representations implementation */ // API Service for Work Experience CRUD operations class WorkExperienceAPI { constructor() { this.baseURL = 'https://backend.stage32.com/api/v2'; } /** * Get auth token from single source of truth */ getAuthToken() { const token = window._phpVars?.bearer_token; if (!token) { throw new Error('Authentication required'); } return token; } async makeAuthenticatedRequest(endpoint, options = {}) { const token = this.getAuthToken(); const response = await fetch(`${this.baseURL}${endpoint}`, { ...options, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, ...options.headers } }); // Handle token expiration - user needs to refresh page if (response.status === 401) { throw new Error('Authentication token expired. Please refresh the page.'); } return response; } async getWorkExperiences(userSlug) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/work-experiences`); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to get work experiences: ${response.status}`); } const result = await response.json(); return result; } async createWorkExperience(userSlug, data) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/work-experiences`, { method: 'POST', body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); // Return error data for form validation const error = new Error(`Failed to create work experience: ${response.status}`); error.response = errorData; throw error; } const result = await response.json(); return result; } async updateWorkExperience(userSlug, workExperienceId, data) { // Use shallow route (only route available) const response = await this.makeAuthenticatedRequest(`/work-experiences/${workExperienceId}`, { method: 'PATCH', body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); // Return error data for form validation const error = new Error(`Failed to update work experience: ${response.status}`); error.response = errorData; throw error; } const result = await response.json(); return result; } async hideWorkExperience(userSlug, workExperienceId, hideReason, feedback) { // Use shallow route (only route available) const response = await this.makeAuthenticatedRequest(`/work-experiences/${workExperienceId}/hide`, { method: 'POST', body: JSON.stringify({ hide_reason: hideReason, feedback: feedback }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to hide work experience: ${response.status}`); } const result = await response.json(); return result; } async unhideWorkExperience(userSlug, workExperienceId) { // Use shallow route (only route available) const response = await this.makeAuthenticatedRequest(`/work-experiences/${workExperienceId}/unhide`, { method: 'POST' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to unhide work experience: ${response.status}`); } const result = await response.json(); return result; } async deleteWorkExperience(userSlug, workExperienceId) { // Use shallow route (only route available) const response = await this.makeAuthenticatedRequest(`/work-experiences/${workExperienceId}`, { method: 'DELETE' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to delete work experience: ${response.status}`); } return true; } } // Global work experience management instance window.WorkExperienceManager = { api: new WorkExperienceAPI(), currentEditId: null, currentHideId: null, /** * Initialize the work experience management system */ init() { this.bindEvents(); }, /** * Bind event handlers */ bindEvents() { // Add work experience button const addBtn = document.getElementById('add-work-experience-btn'); if (addBtn) { addBtn.addEventListener('click', () => this.showAddForm()); } // Cancel add button const cancelBtn = document.getElementById('cancel-add-work-experience'); if (cancelBtn) { cancelBtn.addEventListener('click', () => this.hideAddForm()); } // Add form submit const addForm = document.getElementById('work-experience-form'); if (addForm) { addForm.addEventListener('submit', (e) => this.handleAddSubmit(e)); } // Edit form submit const editSaveBtn = document.getElementById('save-edit-work-experience'); if (editSaveBtn) { editSaveBtn.addEventListener('click', () => this.handleEditSubmit()); } // Hide confirmation const hideConfirmBtn = document.getElementById('confirm-hide-work-experience'); if (hideConfirmBtn) { hideConfirmBtn.addEventListener('click', () => this.handleHideSubmit()); } }, /** * Show add work experience form */ showAddForm() { const form = document.getElementById('add-work-experience-form'); const btn = document.getElementById('add-work-experience-btn'); if (form && btn) { form.style.display = 'block'; btn.style.display = 'none'; this.clearFormErrors('work-experience-form'); // Focus on first field const firstField = form.querySelector('input[name="job_title"]'); if (firstField) firstField.focus(); } }, /** * Hide add work experience form */ hideAddForm() { const form = document.getElementById('add-work-experience-form'); const btn = document.getElementById('add-work-experience-btn'); const formElement = document.getElementById('work-experience-form'); if (form && btn) { form.style.display = 'none'; btn.style.display = 'inline-block'; if (formElement) { formElement.reset(); this.clearFormErrors('work-experience-form'); } } }, /** * Handle add form submission */ async handleAddSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData.entries()); // Set empty end_date to null for backend if (!data.end_date) { data.end_date = null; } // Convert checkbox to boolean data.is_featured = !!data.is_featured; try { this.showButtonLoading('work-experience-form', 'button[type="submit"]'); this.clearFormErrors('work-experience-form'); const userSlug = this.getCurrentUserSlug(); const createResponse = await this.api.createWorkExperience(userSlug, data); this.hideAddForm(); this.showSuccessMessage('Your new work experience has been added successfully!', 'Work Experience Added'); // 🔄 SMART REFRESH: Use the created work experience data from API response // Add the new item to current list and refresh display without additional API call if (createResponse && createResponse.data) { // Get current work experiences and add the new one const currentData = window._jsProfileData?.workExperiences || []; const updatedData = [createResponse.data, ...currentData]; // Add new item at beginning // Update display with new data updateWorkExperiences({ workExperiences: updatedData }); // Update global cache if (window._jsProfileData) { window._jsProfileData.workExperiences = updatedData; } } else { // Fallback to full refresh if no response data await this.refreshWorkExperiences(); } } catch (error) { this.handleFormErrors('work-experience-form', error); this.showErrorMessage('Unable to add the work experience. Please check your information and try again.', 'Add Failed'); } finally { this.hideButtonLoading('work-experience-form', 'button[type="submit"]', '<i class="fa fa-save"></i> Save Work Experience'); } }, /** * Show edit modal for work experience */ showEditModal(workExperience) { this.currentEditId = workExperience.id; // Populate form fields document.getElementById('workexp-edit-id').value = workExperience.id; document.getElementById('workexp-edit-job-title').value = workExperience.display_job_title || ''; document.getElementById('workexp-edit-company').value = workExperience.company?.name || ''; document.getElementById('workexp-edit-start-date').value = workExperience.start_date || ''; document.getElementById('workexp-edit-end-date').value = workExperience.end_date || ''; document.getElementById('workexp-edit-location').value = workExperience.location || ''; document.getElementById('workexp-edit-description').value = workExperience.description || ''; document.getElementById('workexp-edit-featured').checked = !!workExperience.is_featured; this.clearFormErrors('edit-work-experience-form'); $('#edit-work-experience-modal').modal('show'); }, /** * Handle edit form submission */ async handleEditSubmit() { const form = document.getElementById('edit-work-experience-form'); const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); // Set empty end_date to null for backend if (!data.end_date) { data.end_date = null; } // Convert checkbox to boolean data.is_featured = !!data.is_featured; delete data.work_experience_id; // Don't send ID in update data try { this.showButtonLoading('edit-work-experience-modal', '#save-edit-work-experience'); this.clearFormErrors('edit-work-experience-form'); const userSlug = this.getCurrentUserSlug(); const updatedExp = await this.api.updateWorkExperience(userSlug, this.currentEditId, data); $('#edit-work-experience-modal').modal('hide'); this.showSuccessMessage('Your changes have been saved successfully!', 'Work Experience Updated'); // 🎯 SURGICAL UPDATE: Update only the changed item (preserves state) await this.updateSingleWorkExperience(this.currentEditId, updatedExp.data || data); } catch (error) { this.handleFormErrors('edit-work-experience-form', error); this.showErrorMessage('Unable to save your changes. Please check your information and try again.', 'Update Failed'); } finally { this.hideButtonLoading('edit-work-experience-modal', '#save-edit-work-experience', '<i class="fa fa-save"></i> Save Changes'); } }, /** * Show hide modal for work experience */ showHideModal(workExperienceId) { this.currentHideId = workExperienceId; // Clear form document.getElementById('workexp-hide-reason-select').value = ''; document.getElementById('workexp-hide-feedback-textarea').value = ''; $('#hide-work-experience-modal').modal('show'); }, /** * Handle hide form submission */ async handleHideSubmit() { const hideReason = document.getElementById('workexp-hide-reason-select').value; const feedback = document.getElementById('workexp-hide-feedback-textarea').value; try { this.showButtonLoading('hide-work-experience-modal', '#confirm-hide-work-experience'); const userSlug = this.getCurrentUserSlug(); const hiddenExp = await this.api.hideWorkExperience(userSlug, this.currentHideId, hideReason, feedback); $('#hide-work-experience-modal').modal('hide'); this.showSuccessMessage('The work experience is now hidden from public view.', 'Work Experience Hidden'); // 🎯 SURGICAL UPDATE: Update only the hidden item (preserves state) // Use the full response data from API, which includes all updated fields if (hiddenExp.data) { await this.updateSingleWorkExperience(this.currentHideId, hiddenExp.data); } else { // Fallback: just set the hidden flag await this.updateSingleWorkExperience(this.currentHideId, { is_hidden: true }); } } catch (error) { this.showErrorMessage('Unable to hide the work experience. Please try again in a moment.', 'Hide Failed'); } finally { this.hideButtonLoading('hide-work-experience-modal', '#confirm-hide-work-experience', '<i class="fa fa-eye-slash"></i> Hide Work Experience'); } }, /** * Unhide a work experience */ async unhideWorkExperience(workExperienceId) { if (!confirm('Are you sure you want to unhide this work experience?')) { return; } try { const userSlug = this.getCurrentUserSlug(); const unhiddenExp = await this.api.unhideWorkExperience(userSlug, workExperienceId); this.showSuccessMessage('The work experience is now visible to the public again.', 'Work Experience Restored'); // 🎯 SURGICAL UPDATE: Update only the unhidden item (preserves state) // Use the full response data from API, which includes all updated fields if (unhiddenExp.data) { await this.updateSingleWorkExperience(workExperienceId, unhiddenExp.data); } else { // Fallback: just clear the hidden flag await this.updateSingleWorkExperience(workExperienceId, { is_hidden: false }); } } catch (error) { this.showErrorMessage('Unable to restore the work experience. Please try again in a moment.', 'Restore Failed'); } }, /** * Refresh work experiences display (full reload - use only for ADD operations) */ async refreshWorkExperiences() { const userSlug = this.getCurrentUserSlug(); if (!userSlug) { return; } try { const result = await this.api.getWorkExperiences(userSlug); // Use the existing updateWorkExperiences function to render updateWorkExperiences({ workExperiences: result.data }); } catch (error) { this.showErrorMessage('Unable to load your work experiences. Please refresh the page and try again.', 'Loading Failed'); } }, /** * Update a single work experience in the current display (surgical update) */ async updateSingleWorkExperience(workExperienceId, updatedData) { // DEFENSIVE: Check if updatedData is valid if (!updatedData || typeof updatedData !== 'object') { return; } // Get current work experiences from the display const currentData = window._jsProfileData?.workExperiences || []; // DEFENSIVE: Check if currentData is valid if (currentData.length === 0) { await this.refreshWorkExperiences(); return; } // Find and update the specific work experience let foundItem = false; const updatedWorkExperiences = currentData.map(exp => { if (exp.id === workExperienceId) { foundItem = true; return { ...exp, ...updatedData }; } return exp; }); // DEFENSIVE: Check if we found the item to update if (!foundItem) { return; } // Update the display with modified data (preserves state) updateWorkExperiences({ workExperiences: updatedWorkExperiences }); // Update the global data cache if (window._jsProfileData) { window._jsProfileData.workExperiences = updatedWorkExperiences; } }, /** * Remove a work experience from the current display (for delete operations) */ async removeSingleWorkExperience(workExperienceId) { // Get current work experiences from the display const currentData = window._jsProfileData?.workExperiences || []; // Filter out the deleted work experience const filteredWorkExperiences = currentData.filter(exp => exp.id !== workExperienceId); // Update the display updateWorkExperiences({ workExperiences: filteredWorkExperiences }); // Update the global data cache if (window._jsProfileData) { window._jsProfileData.workExperiences = filteredWorkExperiences; } }, /** * Get current user slug from single source of truth */ getCurrentUserSlug() { return window._phpVars?.profile_slug; }, /** * Utility functions for UI feedback using professional toast notifications */ showSuccessMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.success(message, 4000, title); } }, showErrorMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.error(message, 6000, title); // Longer for errors } }, showInfoMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.info(message, 4000, title); } }, showWarningMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.warning(message, 5000, title); } }, showButtonLoading(containerId, buttonSelector) { const container = document.getElementById(containerId); const button = container?.querySelector(buttonSelector); if (button) { button.disabled = true; button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Loading...'; } }, hideButtonLoading(containerId, buttonSelector, originalText) { const container = document.getElementById(containerId); const button = container?.querySelector(buttonSelector); if (button) { button.disabled = false; button.innerHTML = originalText; } }, clearFormErrors(formId) { const form = document.getElementById(formId); if (form) { const errorElements = form.querySelectorAll('.field-error'); errorElements.forEach(el => el.textContent = ''); } }, handleFormErrors(formId, error) { // Handle Laravel validation errors if (error.response && error.response.errors) { const errors = error.response.errors; const form = document.getElementById(formId); Object.keys(errors).forEach(field => { const errorElement = form?.querySelector(`[data-field="${field}"]`); if (errorElement) { errorElement.textContent = errors[field][0]; } }); } } }; /** * Determine if a work experience is current based on dates */ function isWorkExperienceCurrentFromDates(workExperience) { if (!workExperience.end_date) { return true; // No end date means ongoing } const endDate = new Date(workExperience.end_date); const today = new Date(); today.setHours(0, 0, 0, 0); // Reset time for accurate date comparison return endDate >= today; // Current if end date is today or in the future } /** * Calculate duration between start and end dates */ function calculateWorkExperienceDuration(workExperience) { if (!workExperience.start_date) return ''; const startDate = new Date(workExperience.start_date); const endDate = workExperience.end_date ? new Date(workExperience.end_date) : new Date(); const diffTime = Math.abs(endDate - startDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); let duration = ''; if (diffDays < 30) { duration = `${diffDays} day${diffDays !== 1 ? 's' : ''}`; } else if (diffDays < 365) { const months = Math.round(diffDays / 30); duration = `${months} month${months !== 1 ? 's' : ''}`; } else { const years = Math.floor(diffDays / 365); const remainingMonths = Math.round((diffDays % 365) / 30); duration = `${years} year${years !== 1 ? 's' : ''}`; if (remainingMonths > 0) { duration += `, ${remainingMonths} month${remainingMonths !== 1 ? 's' : ''}`; } } // Add "so far" for current positions if (!workExperience.end_date) { duration += '+'; } return duration; } /** * Format date for display */ function formatDisplayDate(dateString) { if (!dateString) return ''; try { const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } catch (error) { return dateString; } } /** * Enhanced updateWorkExperiences function with CRUD functionality * Based on successful representations implementation */ function updateWorkExperiences(profileData) { // Find the work experience content container const contentContainer = document.getElementById('work-experience-content'); if (!contentContainer) { return; } // Get is_self from PHP vars const isSelf = window._phpVars && window._phpVars.is_self; // If no work experiences if (!profileData.workExperiences || profileData.workExperiences.length === 0) { if (isSelf) { // Show empty state for own profile with add prompt contentContainer.innerHTML = ` <div class="empty-state-message text-center" style="padding: 40px 20px;"> <i class="fa fa-briefcase fa-3x text-muted" style="margin-bottom: 15px;"></i> <h4 class="text-muted">No Work Experience Yet</h4> <p class="text-muted">Add your professional work experience to showcase your career journey.</p> <button class="btn btn-primary" onclick="WorkExperienceManager.showAddForm()" style="user-select: none; transition: all 0.2s ease;"> <i class="fa fa-plus"></i> Add Your First Work Experience </button> </div> `; } else { // Hide panel for other users' profiles const panel = document.getElementById('work-experience-panel'); if (panel) panel.style.display = 'none'; } return; } // 🧠 SMART BACKEND PRINCIPLE: Use backend data as-is (no sorting, no filtering) // Backend handles all sorting, filtering, and privacy logic // Preserve current "see more" expanded state before DOM update (only if this is an update, not initial load) const existingContent = contentContainer.innerHTML; const isInitialLoad = !existingContent || existingContent.trim() === ''; const wasExpanded = !isInitialLoad && document.querySelector('#work-experience-panel .work-experience-hidden')?.style.display === 'block'; // Use backend order directly (no frontend sorting) const allExps = profileData.workExperiences; // Backend-provided order // Apply pagination to ALL work experiences (mixed public/hidden inline) const displayCount = 3; // Show first 3 work experiences const visibleExps = allExps.slice(0, displayCount); const overflowExps = allExps.slice(displayCount); const remainingCount = overflowExps.length; let expsHTML = '<div class="work-experience-list">'; // Helper function to render a work experience with action buttons function renderWorkExperience(exp, isInHiddenSection = false) { // Get job title let jobTitle = exp.display_job_title || ''; if (!jobTitle && exp.job_title) { if (typeof exp.job_title === 'string') { jobTitle = exp.job_title; } else if (exp.job_title.name) { jobTitle = exp.job_title.name; } } // Get company name let companyName = ''; if (exp.company) { if (typeof exp.company === 'string') { companyName = exp.company; } else if (exp.company.name) { companyName = exp.company.name; } } // Determine status from dates const isCurrent = isWorkExperienceCurrentFromDates(exp); const isHidden = exp.is_hidden; const status = isCurrent ? 'current' : 'former'; const isFeatured = exp.is_featured; // Status badge and hidden indicator let statusBadge = ''; let featuredBadge = ''; let hiddenBadge = ''; if (isHidden && isSelf) { // Enhanced hidden badge with better visibility hiddenBadge = `<span class="hidden-exp-badge" data-toggle="tooltip" data-placement="top" title="This is only visible to you. The public will not see this." style="background: white; color: #323940; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid #dee2e6; cursor: help; user-select: none; transition: all 0.2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.borderColor='#adb5bd';" onmouseout="this.style.background='white'; this.style.borderColor='#dee2e6';"> <i class="fa fa-eye-slash" style="margin-right: 4px;"></i>Hidden </span>`; } else if (!isCurrent) { // Former status badge statusBadge = `<span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 8px; user-select: none;"> former </span>`; } if (isFeatured) { // Featured badge featuredBadge = `<span style="background: #323232; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 8px; user-select: none;"> <i class="fa fa-star" style="margin-right: 4px;"></i>featured </span>`; } // Format dates with enhanced display const startDateStr = exp.start_date ? formatDisplayDate(exp.start_date) : ''; const endDateStr = isCurrent ? 'Present' : (exp.end_date ? formatDisplayDate(exp.end_date) : ''); // Calculate duration const duration = calculateWorkExperienceDuration(exp); // Clean action buttons for owner let actionButtons = ''; if (isSelf) { if (isHidden) { actionButtons = ` <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef;"> <button style="background: #000000; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; margin-right: 8px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="WorkExperienceManager.unhideWorkExperience(${exp.id})" title="Unhide work experience" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#000000';"> <i class="fa fa-eye" style="margin-right: 4px;"></i>Unhide </button> <button style="background: #6c757d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="WorkExperienceManager.showEditModal(${JSON.stringify(exp).replace(/"/g, '"')})" title="Edit work experience" onmouseover="this.style.background='#5a6268';" onmouseout="this.style.background='#6c757d';"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> </div> `; } else { actionButtons = ` <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef;"> <button style="background: #6c757d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; margin-right: 8px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="WorkExperienceManager.showEditModal(${JSON.stringify(exp).replace(/"/g, '"')})" title="Edit work experience" onmouseover="this.style.background='#5a6268';" onmouseout="this.style.background='#6c757d';"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> <button style="background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="WorkExperienceManager.showHideModal(${exp.id})" title="Hide work experience" onmouseover="this.style.background='#c82333';" onmouseout="this.style.background='#dc3545';"> <i class="fa fa-eye-slash" style="margin-right: 4px;"></i>Hide </button> </div> `; } } // Enhanced card styling with special styling for hidden work experiences const cardBackground = isHidden && isSelf ? '#f6f6f6' : 'white'; const cardOpacity = isHidden && isSelf ? '0.75' : '1'; return ` <div class="work-experience-card" style="background: ${cardBackground}; opacity: ${cardOpacity}; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;"> <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;"> <h3 style="font-size: 18px; font-weight: 600; margin: 0; color: #212529;">${escapeHtml(jobTitle)}</h3> ${statusBadge} ${featuredBadge} </div> <div> ${hiddenBadge} </div> </div>  ${companyName ? ` <div style="display: flex; align-items: center; margin-bottom: 12px; color: #495057;"> <i class="fa fa-building" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 16px; font-weight: 500;">${escapeHtml(companyName)}</span> </div> ` : ''}  ${exp.location ? ` <div style="display: flex; align-items: center; margin-bottom: 8px; color: #6c757d;"> <i class="fa fa-map-marker" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 14px;">${escapeHtml(exp.location)}</span> </div> ` : ''}  ${startDateStr ? ` <div style="display: flex; align-items: center; margin-bottom: 12px; color: #6c757d;"> <i class="fa fa-calendar" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 14px;"> ${startDateStr} - ${endDateStr}${duration ? ` (${duration})` : ''} </span> </div> ` : ''}  ${exp.description ? ` <div style="margin-bottom: 12px; color: #495057; line-height: 1.5;"> ${escapeHtml(exp.description).replace(/\n/g, '<br>')} </div> ` : ''}  ${actionButtons} </div> `; } // 🎨 DUMB FRONTEND: Render ALL work experiences inline (mixed public/hidden with conditional styling) // No separate sections - backend-provided order with appropriate styling // Render visible work experiences (first 3, mixed public/hidden) visibleExps.forEach(exp => { expsHTML += renderWorkExperience(exp); }); // Add overflow work experiences section (collapsible) - mixed public/hidden if (overflowExps.length > 0) { expsHTML += '<div class="work-experience-hidden" style="display: none;">'; overflowExps.forEach(exp => { expsHTML += renderWorkExperience(exp, true); }); expsHTML += '</div>'; // Add see more button expsHTML += ` <div style="text-align: center; margin-top: 15px;"> <button class="profile-see-more-btn" onclick="toggleWorkExperience()" style="background: transparent; color: #323232; border: none; padding: 8px 16px; font-size: 14px; cursor: pointer; user-select: none; transition: all 0.2s ease; text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';"> See ${remainingCount} more <i class="fa fa-chevron-down"></i> </button> </div> `; } expsHTML += '</div>'; // Update the content container contentContainer.innerHTML = expsHTML; // 🔄 STATE PRESERVATION: Restore "see more" expanded state if it was previously expanded if (wasExpanded && overflowExps.length > 0) { const hiddenSection = document.querySelector('#work-experience-panel .work-experience-hidden'); if (hiddenSection) { hiddenSection.style.display = 'block'; // Update button text to "See less" const button = document.querySelector('#work-experience-panel .profile-see-more-btn'); if (button) { button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } } } // Initialize tooltips for hidden badges if (typeof $ !== 'undefined' && $.fn.tooltip) { $('[data-toggle="tooltip"]').tooltip(); } // Make sure panel is visible when there's data const panel = document.getElementById('work-experience-panel'); if (panel) panel.style.display = 'block'; // Update the global data cache (like representations do in their surgical updates) if (window._jsProfileData) { window._jsProfileData.workExperiences = allExps; } } // Toggle overflow work experience visibility (for pagination) function toggleWorkExperience() { const hiddenSection = document.querySelector('#work-experience-panel .work-experience-hidden'); const button = document.querySelector('#work-experience-panel .profile-see-more-btn'); if (!hiddenSection || !button) { return; } const isCurrentlyHidden = hiddenSection.style.display === 'none' || !hiddenSection.style.display; if (isCurrentlyHidden) { // Show hidden work experiences hiddenSection.style.display = 'block'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { // Hide overflow work experiences hiddenSection.style.display = 'none'; const hiddenCount = hiddenSection.querySelectorAll('.work-experience-card').length; button.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } // HTML escape function function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text ? text.toString().replace(/[&<>"']/g, function(m) { return map[m]; }) : ''; } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', function() { if (window.WorkExperienceManager) { WorkExperienceManager.init(); } }); </script>   <div class="panel panel-large panel-tomasz" id="representations-panel"> <div class="panel-heading"> <div class="pull-right"> </div> <h3 class="panel-title" style="font-weight: bold;"> Representation </h3> </div> <div class="panel-body">   <div id="representations-content"> <div class="loading-state text-center" style="padding: 20px;"> <i class="fa fa-spinner fa-spin"></i> Loading representations... </div> </div> </div> </div>  <script> /** * Representation Management System - Staging Environment * Full CRUD functionality with new backend API integration */ // API Service for Representation CRUD operations class RepresentationAPI { constructor() { this.baseURL = 'https://backend.stage32.com/api/v2'; } /** * Get auth token from single source of truth */ getAuthToken() { const token = window._phpVars?.bearer_token; if (!token) { throw new Error('Authentication required'); } return token; } async makeAuthenticatedRequest(endpoint, options = {}) { const token = this.getAuthToken(); const response = await fetch(`${this.baseURL}${endpoint}`, { ...options, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, ...options.headers } }); // Handle token expiration - user needs to refresh page if (response.status === 401) { throw new Error('Authentication token expired. Please refresh the page.'); } return response; } async getRepresentations(userSlug) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/representations`); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to get representations: ${response.status}`); } const result = await response.json(); return result; } async createRepresentation(userSlug, data) { const response = await this.makeAuthenticatedRequest(`/users/${userSlug}/representations`, { method: 'POST', body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); // Return error data for form validation const error = new Error(`Failed to create representation: ${response.status}`); error.response = errorData; throw error; } const result = await response.json(); return result; } async updateRepresentation(representationId, data) { // Use shallow route for updates (per troubleshooting guide) const response = await this.makeAuthenticatedRequest(`/representations/${representationId}`, { method: 'PATCH', body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); // Return error data for form validation const error = new Error(`Failed to update representation: ${response.status}`); error.response = errorData; throw error; } const result = await response.json(); return result; } async hideRepresentation(representationId, hideReason, feedback) { // Use shallow route for hide (per troubleshooting guide) const response = await this.makeAuthenticatedRequest(`/representations/${representationId}/hide`, { method: 'POST', body: JSON.stringify({ hide_reason: hideReason, feedback: feedback }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to hide representation: ${response.status}`); } const result = await response.json(); return result; } async unhideRepresentation(representationId) { // Use shallow route for unhide (per troubleshooting guide) const response = await this.makeAuthenticatedRequest(`/representations/${representationId}/unhide`, { method: 'POST' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to unhide representation: ${response.status}`); } const result = await response.json(); return result; } async deleteRepresentation(representationId) { // Use shallow route for delete (per troubleshooting guide) const response = await this.makeAuthenticatedRequest(`/representations/${representationId}`, { method: 'DELETE' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`Failed to delete representation: ${response.status}`); } return true; } } // Global representation management instance window.RepresentationManager = { api: new RepresentationAPI(), currentEditId: null, currentHideId: null, /** * Initialize the representation management system */ init() { this.bindEvents(); }, /** * Bind event handlers */ bindEvents() { // Add representation button const addBtn = document.getElementById('add-representation-btn'); if (addBtn) { addBtn.addEventListener('click', () => this.showAddForm()); } // Cancel add button const cancelBtn = document.getElementById('cancel-add-representation'); if (cancelBtn) { cancelBtn.addEventListener('click', () => this.hideAddForm()); } // Add form submit const addForm = document.getElementById('representation-form'); if (addForm) { addForm.addEventListener('submit', (e) => this.handleAddSubmit(e)); } // Edit form submit const editSaveBtn = document.getElementById('save-edit-representation'); if (editSaveBtn) { editSaveBtn.addEventListener('click', () => this.handleEditSubmit()); } // Hide confirmation const hideConfirmBtn = document.getElementById('confirm-hide-representation'); if (hideConfirmBtn) { hideConfirmBtn.addEventListener('click', () => this.handleHideSubmit()); } }, /** * Show add representation form */ showAddForm() { const form = document.getElementById('add-representation-form'); const btn = document.getElementById('add-representation-btn'); if (form && btn) { form.style.display = 'block'; btn.style.display = 'none'; this.clearFormErrors('representation-form'); // Focus on first field const firstField = form.querySelector('input[name="representative_name"]'); if (firstField) firstField.focus(); } }, /** * Hide add representation form */ hideAddForm() { const form = document.getElementById('add-representation-form'); const btn = document.getElementById('add-representation-btn'); const formElement = document.getElementById('representation-form'); if (form && btn) { form.style.display = 'none'; btn.style.display = 'inline-block'; if (formElement) { formElement.reset(); this.clearFormErrors('representation-form'); } } }, /** * Handle add form submission */ async handleAddSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData.entries()); // Remove empty end_date if (!data.end_date) { delete data.end_date; } try { this.showButtonLoading('representation-form', 'button[type="submit"]'); this.clearFormErrors('representation-form'); const userSlug = this.getCurrentUserSlug(); await this.api.createRepresentation(userSlug, data); this.hideAddForm(); this.showSuccessMessage('Your new representation has been added successfully!', 'Representation Added'); // 🔄 FULL REFRESH: For ADD operations, we need full refresh because // backend determines where the new item belongs in the sorted list await this.refreshRepresentations(); } catch (error) { this.handleFormErrors('representation-form', error); this.showErrorMessage('Unable to add the representation. Please check your information and try again.', 'Add Failed'); } finally { this.hideButtonLoading('representation-form', 'button[type="submit"]', '<i class="fa fa-save"></i> Save Representation'); } }, /** * Show edit modal for representation */ showEditModal(representation) { this.currentEditId = representation.id; // Populate form fields document.getElementById('rep-edit-id').value = representation.id; document.getElementById('rep-edit-representative-name').value = representation.representative_display_name || ''; document.getElementById('rep-edit-company-name').value = representation.company?.name || ''; document.getElementById('rep-edit-type').value = representation.representation_type?.value || ''; document.getElementById('rep-edit-start-date').value = representation.start_date || ''; document.getElementById('rep-edit-end-date').value = representation.end_date || ''; this.clearFormErrors('edit-representation-form'); $('#edit-representation-modal').modal('show'); }, /** * Handle edit form submission */ async handleEditSubmit() { const form = document.getElementById('edit-representation-form'); const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); // Remove empty end_date if (!data.end_date) { delete data.end_date; } delete data.representation_id; // Don't send ID in update data try { this.showButtonLoading('edit-representation-modal', '#save-edit-representation'); this.clearFormErrors('edit-representation-form'); const updatedRep = await this.api.updateRepresentation(this.currentEditId, data); $('#edit-representation-modal').modal('hide'); this.showSuccessMessage('Your changes have been saved successfully!', 'Representation Updated'); // 🎯 SURGICAL UPDATE: Update only the changed item (preserves state) await this.updateSingleRepresentation(this.currentEditId, updatedRep.data || data); } catch (error) { this.handleFormErrors('edit-representation-form', error); this.showErrorMessage('Unable to save your changes. Please check your information and try again.', 'Update Failed'); } finally { this.hideButtonLoading('edit-representation-modal', '#save-edit-representation', '<i class="fa fa-save"></i> Save Changes'); } }, /** * Show hide modal for representation */ showHideModal(representationId) { this.currentHideId = representationId; // Clear form document.getElementById('hide-reason-select').value = ''; document.getElementById('hide-feedback-textarea').value = ''; $('#hide-representation-modal').modal('show'); }, /** * Handle hide form submission */ async handleHideSubmit() { const hideReason = document.getElementById('hide-reason-select').value; const feedback = document.getElementById('hide-feedback-textarea').value; try { this.showButtonLoading('hide-representation-modal', '#confirm-hide-representation'); const hiddenRep = await this.api.hideRepresentation(this.currentHideId, hideReason, feedback); $('#hide-representation-modal').modal('hide'); this.showSuccessMessage('The representation is now hidden from public view.', 'Representation Hidden'); // 🎯 SURGICAL UPDATE: Update only the hidden item (preserves state) await this.updateSingleRepresentation(this.currentHideId, { is_hidden: true, ...(hiddenRep.data || {}) }); } catch (error) { this.showErrorMessage('Unable to hide the representation. Please try again in a moment.', 'Hide Failed'); } finally { this.hideButtonLoading('hide-representation-modal', '#confirm-hide-representation', '<i class="fa fa-eye-slash"></i> Hide Representation'); } }, /** * Unhide a representation */ async unhideRepresentation(representationId) { if (!confirm('Are you sure you want to unhide this representation?')) { return; } try { const unhiddenRep = await this.api.unhideRepresentation(representationId); this.showSuccessMessage('The representation is now visible to the public again.', 'Representation Restored'); // 🎯 SURGICAL UPDATE: Update only the unhidden item (preserves state) await this.updateSingleRepresentation(representationId, { is_hidden: false, ...(unhiddenRep.data || {}) }); } catch (error) { this.showErrorMessage('Unable to restore the representation. Please try again in a moment.', 'Restore Failed'); } }, /** * Refresh representations display (full reload - use only for ADD operations) */ async refreshRepresentations() { const userSlug = this.getCurrentUserSlug(); if (!userSlug) { return; } try { const result = await this.api.getRepresentations(userSlug); // Use the existing updateRepresentations function to render updateRepresentations({ representations: result.data }); } catch (error) { this.showErrorMessage('Unable to load your representations. Please refresh the page and try again.', 'Loading Failed'); } }, /** * Update a single representation in the current display (surgical update) */ async updateSingleRepresentation(representationId, updatedData) { // Get current representations from the display const currentData = window._jsProfileData?.representations || []; // Find and update the specific representation const updatedRepresentations = currentData.map(rep => { if (rep.id === representationId) { // Merge existing data with updates return { ...rep, ...updatedData }; } return rep; }); // Update the display with modified data (preserves state) updateRepresentations({ representations: updatedRepresentations }); // Update the global data cache if (window._jsProfileData) { window._jsProfileData.representations = updatedRepresentations; } }, /** * Remove a representation from the current display (for delete operations) */ async removeSingleRepresentation(representationId) { // Get current representations from the display const currentData = window._jsProfileData?.representations || []; // Filter out the deleted representation const filteredRepresentations = currentData.filter(rep => rep.id !== representationId); // Update the display updateRepresentations({ representations: filteredRepresentations }); // Update the global data cache if (window._jsProfileData) { window._jsProfileData.representations = filteredRepresentations; } }, /** * Get current user slug from single source of truth */ getCurrentUserSlug() { return window._phpVars?.profile_slug; }, /** * Utility functions for UI feedback using professional toast notifications */ showSuccessMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.success(message, 4000, title); } }, showErrorMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.error(message, 6000, title); // Longer for errors } }, showInfoMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.info(message, 4000, title); } }, showWarningMessage(message, title = null) { if (typeof ToastNotification !== 'undefined') { ToastNotification.warning(message, 5000, title); } }, showButtonLoading(containerId, buttonSelector) { const container = document.getElementById(containerId); const button = container?.querySelector(buttonSelector); if (button) { button.disabled = true; button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Loading...'; } }, hideButtonLoading(containerId, buttonSelector, originalText) { const container = document.getElementById(containerId); const button = container?.querySelector(buttonSelector); if (button) { button.disabled = false; button.innerHTML = originalText; } }, clearFormErrors(formId) { const form = document.getElementById(formId); if (form) { const errorElements = form.querySelectorAll('.field-error'); errorElements.forEach(el => el.textContent = ''); } }, handleFormErrors(formId, error) { // Handle Laravel validation errors if (error.response && error.response.errors) { const errors = error.response.errors; const form = document.getElementById(formId); Object.keys(errors).forEach(field => { const errorElement = form?.querySelector(`[data-field="${field}"]`); if (errorElement) { errorElement.textContent = errors[field][0]; } }); } } }; /** * Determine if a representation is current based on dates */ function isRepresentationCurrentFromDates(representation) { if (!representation.end_date) { return true; // No end date means ongoing } const endDate = new Date(representation.end_date); const today = new Date(); today.setHours(0, 0, 0, 0); // Reset time for accurate date comparison return endDate >= today; // Current if end date is today or in the future } /** * Calculate duration between start and end dates */ function calculateRepresentationDuration(representation) { if (!representation.start_date) return ''; const startDate = new Date(representation.start_date); const endDate = representation.end_date ? new Date(representation.end_date) : new Date(); const diffTime = Math.abs(endDate - startDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); let duration = ''; if (diffDays < 30) { duration = `${diffDays} day${diffDays !== 1 ? 's' : ''}`; } else if (diffDays < 365) { const months = Math.round(diffDays / 30); duration = `${months} month${months !== 1 ? 's' : ''}`; } else { const years = Math.floor(diffDays / 365); const remainingMonths = Math.round((diffDays % 365) / 30); duration = `${years} year${years !== 1 ? 's' : ''}`; if (remainingMonths > 0) { duration += `, ${remainingMonths} month${remainingMonths !== 1 ? 's' : ''}`; } } // Add "so far" for current representations if (!representation.end_date) { duration += '+'; } return duration; } /** * Format date for display */ function formatDisplayDate(dateString) { if (!dateString) return ''; try { const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } catch (error) { return dateString; } } /** * Enhanced updateRepresentations function with CRUD functionality * Moved from about_staging.php and enhanced with action buttons */ function updateRepresentations(profileData) { // Find the representations content container const contentContainer = document.getElementById('representations-content'); if (!contentContainer) { return; } // Get is_self from PHP vars const isSelf = window._phpVars && window._phpVars.is_self; // If no representations if (!profileData.representations || profileData.representations.length === 0) { if (isSelf) { // Show empty state for own profile with add prompt contentContainer.innerHTML = ` <div class="empty-state-message text-center" style="padding: 40px 20px;"> <i class="fa fa-users fa-3x text-muted" style="margin-bottom: 15px;"></i> <h4 class="text-muted">No Representations Yet</h4> <p class="text-muted">Add your professional representation to showcase your industry connections.</p> <button class="btn btn-primary" onclick="RepresentationManager.showAddForm()" style="user-select: none; transition: all 0.2s ease;"> <i class="fa fa-plus"></i> Add Your First Representation </button> </div> `; } else { // Hide panel for other users' profiles const panel = document.getElementById('representations-panel'); if (panel) panel.style.display = 'none'; } return; } // 🧠 SMART BACKEND PRINCIPLE: Use backend data as-is (no sorting, no filtering) // Backend handles all sorting, filtering, and privacy logic // Preserve current "see more" expanded state before DOM update (only if this is an update, not initial load) const existingContent = contentContainer.innerHTML; const isInitialLoad = !existingContent || existingContent.trim() === ''; const wasExpanded = !isInitialLoad && document.querySelector('#representations-panel .representation-hidden')?.style.display === 'block'; // Use backend order directly (no frontend sorting) const allReps = profileData.representations; // Backend-provided order // Apply pagination to ALL representations (mixed public/hidden inline) const displayCount = 3; // Show first 3 representations const visibleReps = allReps.slice(0, displayCount); const overflowReps = allReps.slice(displayCount); const remainingCount = overflowReps.length; let repsHTML = '<div class="representation-list">'; // Helper function to render a representation with action buttons function renderRepresentation(rep, isInHiddenSection = false) { // Get representative name let repName = rep.representative_display_name || ''; if (!repName && rep.representative_user) { if (typeof rep.representative_user === 'string') { repName = rep.representative_user; } else if (rep.representative_user.name) { repName = rep.representative_user.name; } else if (rep.representative_user.first_name || rep.representative_user.last_name) { repName = [rep.representative_user.first_name, rep.representative_user.last_name] .filter(Boolean).join(' '); } } // Get company name let companyName = ''; if (rep.company) { if (typeof rep.company === 'string') { companyName = rep.company; } else if (rep.company.name) { companyName = rep.company.name; } } // Get representation type let repType = ''; if (rep.representation_type) { if (typeof rep.representation_type === 'string') { repType = rep.representation_type; } else if (rep.representation_type.label) { repType = rep.representation_type.label; } else if (rep.representation_type.value) { repType = rep.representation_type.value; } else if (rep.representation_type.name) { repType = rep.representation_type.name; } } // Determine status from dates (ignore is_current/is_active flags) const isCurrent = isRepresentationCurrentFromDates(rep); const isHidden = rep.is_hidden; const status = isCurrent ? 'current' : 'former'; // Status badge and hidden indicator let statusBadge = ''; let hiddenBadge = ''; if (isHidden && isSelf) { // Enhanced hidden badge with better visibility hiddenBadge = `<span class="hidden-rep-badge" data-toggle="tooltip" data-placement="top" title="This is only visible to you. The public will not see this." style="background: white; color: #323940; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid #dee2e6; cursor: help; user-select: none; transition: all 0.2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.borderColor='#adb5bd';" onmouseout="this.style.background='white'; this.style.borderColor='#dee2e6';"> <i class="fa fa-eye-slash" style="margin-right: 4px;"></i>Hidden </span>`; } else if (!isCurrent) { // Former status badge statusBadge = `<span style="background: #e7e7e7; color: #646464; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 8px; user-select: none;"> former </span>`; } // Format dates with enhanced display const startDateStr = rep.start_date ? formatDisplayDate(rep.start_date) : ''; const endDateStr = isCurrent ? 'Present' : (rep.end_date ? formatDisplayDate(rep.end_date) : ''); // Calculate duration const duration = calculateRepresentationDuration(rep); // Clean action buttons for owner let actionButtons = ''; if (isSelf) { if (isHidden) { actionButtons = ` <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef;"> <button style="background: #000000; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; margin-right: 8px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="RepresentationManager.unhideRepresentation(${rep.id})" title="Unhide representation" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#000000';"> <i class="fa fa-eye" style="margin-right: 4px;"></i>Unhide </button> <button style="background: #6c757d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="RepresentationManager.showEditModal(${JSON.stringify(rep).replace(/"/g, '"')})" title="Edit representation" onmouseover="this.style.background='#5a6268';" onmouseout="this.style.background='#6c757d';"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> </div> `; } else { actionButtons = ` <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e9ecef;"> <button style="background: #6c757d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; margin-right: 8px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="RepresentationManager.showEditModal(${JSON.stringify(rep).replace(/"/g, '"')})" title="Edit representation" onmouseover="this.style.background='#5a6268';" onmouseout="this.style.background='#6c757d';"> <i class="fa fa-edit" style="margin-right: 4px;"></i>Edit </button> <button style="background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease;" onclick="RepresentationManager.showHideModal(${rep.id})" title="Hide representation" onmouseover="this.style.background='#c82333';" onmouseout="this.style.background='#dc3545';"> <i class="fa fa-eye-slash" style="margin-right: 4px;"></i>Hide </button> </div> `; } } // Enhanced card styling with special styling for hidden representations const cardBackground = isHidden && isSelf ? '#f6f6f6' : 'white'; const cardOpacity = isHidden && isSelf ? '0.75' : '1'; return ` <div class="representation-card" style="background: ${cardBackground}; opacity: ${cardOpacity}; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;"> <div style="display: flex; align-items: center; gap: 4px;"> <h3 style="font-size: 18px; font-weight: 600; margin: 0; color: #212529;">${escapeHtml(repName)}</h3> ${statusBadge} </div> <div> ${hiddenBadge} </div> </div>  ${repType ? ` <div style="font-size: 16px; color: #495057; margin-bottom: 12px; font-weight: 500;"> ${escapeHtml(repType.charAt(0).toUpperCase() + repType.slice(1))} </div> ` : ''}  ${companyName ? ` <div style="display: flex; align-items: center; margin-bottom: 8px; color: #6c757d;"> <i class="fa fa-building" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 14px;">${escapeHtml(companyName)}</span> </div> ` : ''}  ${startDateStr ? ` <div style="display: flex; align-items: center; margin-bottom: 12px; color: #6c757d;"> <i class="fa fa-calendar" style="margin-right: 8px; font-size: 14px;"></i> <span style="font-size: 14px;"> ${startDateStr} - ${endDateStr}${duration ? ` (${duration})` : ''} </span> </div> ` : ''}  ${actionButtons} </div> `; } // 🎨 DUMB FRONTEND: Render ALL representations inline (mixed public/hidden with conditional styling) // No separate sections - backend-provided order with appropriate styling // Render visible representations (first 2, mixed public/hidden) visibleReps.forEach(rep => { repsHTML += renderRepresentation(rep); }); // Add overflow representations section (collapsible) - mixed public/hidden if (overflowReps.length > 0) { repsHTML += '<div class="representation-hidden" style="display: none;">'; overflowReps.forEach(rep => { repsHTML += renderRepresentation(rep, true); }); repsHTML += '</div>'; // Add see more button repsHTML += ` <div style="text-align: center; margin-top: 15px;"> <button class="profile-see-more-btn" onclick="toggleRepresentation()" style="background: transparent; color: #323232; border: none; padding: 8px 16px; font-size: 14px; cursor: pointer; user-select: none; transition: all 0.2s ease; text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';"> See ${remainingCount} more <i class="fa fa-chevron-down"></i> </button> </div> `; } repsHTML += '</div>'; // Update the content container contentContainer.innerHTML = repsHTML; // 🔄 STATE PRESERVATION: Restore "see more" expanded state if it was previously expanded if (wasExpanded && overflowReps.length > 0) { const hiddenSection = document.querySelector('#representations-panel .representation-hidden'); if (hiddenSection) { hiddenSection.style.display = 'block'; // Update button text to "See less" const button = document.querySelector('#representations-panel .profile-see-more-btn'); if (button) { button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } } } // Initialize tooltips for hidden badges if (typeof $ !== 'undefined' && $.fn.tooltip) { $('[data-toggle="tooltip"]').tooltip(); } // Make sure panel is visible when there's data const panel = document.getElementById('representations-panel'); if (panel) panel.style.display = 'block'; } // Toggle overflow representation visibility (for pagination) function toggleRepresentation() { const hiddenSection = document.querySelector('#representations-panel .representation-hidden'); const button = document.querySelector('#representations-panel .profile-see-more-btn'); if (!hiddenSection || !button) { return; } const isCurrentlyHidden = hiddenSection.style.display === 'none' || !hiddenSection.style.display; if (isCurrentlyHidden) { // Show hidden representations hiddenSection.style.display = 'block'; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { // Hide overflow representations hiddenSection.style.display = 'none'; const hiddenCount = hiddenSection.querySelectorAll('.representation-card').length; // Count representation cards button.innerHTML = `See ${hiddenCount} more <i class="fa fa-chevron-down"></i>`; } } // HTML escape function function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text ? text.toString().replace(/[&<>"']/g, function(m) { return map[m]; }) : ''; } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', function() { if (window.RepresentationManager) { RepresentationManager.init(); } }); </script>      <div class="panel panel-large" id="panel-loglines"> <div class="panel-heading"> <h3 class="panel-title">Loglines</h3> </div> <div class="panel-body"> <ul class="timeline credits"> <li id="logline_4204" class=""> <a href="/profile/103424/Screenplay/Fake-2"><img src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/square_300_crop/sites/stage32.com/themes/two/images/visuals/defaults/logline.jpg" alt="FAKE" title="FAKE" width="300" height="300" class="img-thumbnail img-logline pull-left"/></a> <p> <a href="/profile/103424/Screenplay/Fake-2" target="_blank"><strong>FAKE</strong></a> <small style="display:block; font-weight: bold; margin-bottom: 5px;"> Drama <span class="bull">&diam;</span> Romance </small> <small class="dotdotdot">When an charismatic conman becomes infatuated with a brilliant young painter, he sets out to bankrupt the sinister dealer who is exploiting her talents. </small> </p> </li> <li id="logline_4205" class=""> <a href="/profile/103424/Screenplay/Lovesick-2"><img src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/square_300_crop/sites/stage32.com/themes/two/images/visuals/defaults/logline.jpg" alt="LOVESICK" title="LOVESICK" width="300" height="300" class="img-thumbnail img-logline pull-left"/></a> <p> <a href="/profile/103424/Screenplay/Lovesick-2" target="_blank"><strong>LOVESICK</strong></a> <small style="display:block; font-weight: bold; margin-bottom: 5px;"> Drama </small> <small class="dotdotdot">A TV journalist goes to Greece to uncover the secrets of a famous writer's life and becomes victim to the sexual manipulations of a mother and daughter. </small> </p> </li> <li id="logline_7090" class=""> <a href="/profile/103424/Screenplay/Lady-lazarus-2"><img src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/square_300_crop/sites/stage32.com/themes/two/images/visuals/defaults/logline.jpg" alt="LADY LAZARUS" title="LADY LAZARUS" width="300" height="300" class="img-thumbnail img-logline pull-left"/></a> <p> <a href="/profile/103424/Screenplay/Lady-lazarus-2" target="_blank"><strong>LADY LAZARUS</strong></a> <small style="display:block; font-weight: bold; margin-bottom: 5px;"> Drama </small> <small class="dotdotdot">Witty Dorothy Parker succeeds in the male-dominated literary world but then battles to survive the excesses of men and booze. Comedy drama biopic.</small> </p> </li> </ul> </div> </div>    </div>  <div class="col-sm-8 col-md-6 side-panel">   <div class="panel panel-large"> <div class="panel-heading"><h3 class="panel-title">Share This<span class="hidden-sm hidden-md"> Stage 32</span> Profile</h3></div> <div class="panel-body"> <ul class="rrssb-buttons clearfix">  <li class="rrssb-facebook"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://new-cdn-origin.stage32.com/profile/103424/about" class="clicky_log_outbound" target="_blank" title="Share on Facebook" data-link="https://new-cdn-origin.stage32.com/profile/103424/about" data-picture="http://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/head_shot_500/headshots/776cdd2afe39a793309085ca218c2fde_1762603750_l.jpg" data-name="Richard Paul Skinner" data-caption="<p>Richard Paul Skinner Productions</p> | Screenwriter, Playwright, Videographer and Author" data-description="Check out the Stage 32 profile of Richard Paul Skinner: Screenwriter, playwright and videographer in Bath, United Kingdom" data-redirect_uri="https://new-cdn-origin.stage32.com/profile/103424/about"> <span class="rrssb-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> <path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/> </svg> </span> <span class="rrssb-text">facebook</span> </a> </li>  <li class="rrssb-twitter"> <a href="https://twitter.com/intent/tweet?via=Stage32&text=Check%20out%20the%20Stage%2032%20profile%20of%20Richard%20Paul%20Skinner%3A%20Screenwriter%2C%20playwright%20and%20videographer%20in%20Bath%2C%20United%20Kingdom%20%23Stage32&url=https%3A%2F%2Fnew-cdn-origin.stage32.com%2Fprofile%2F103424%2Fabout" class="clicky_log_outbound" title="Tweet this" data-url="https://new-cdn-origin.stage32.com/profile/103424/about" target="_blank"> <span class="rrssb-icon">    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"> <path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path> </svg> </span> <span class="rrssb-text">X</span> </a> </li>  <li class="rrssb-linkedin"> <a href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fnew-cdn-origin.stage32.com%2Fprofile%2F103424%2Fabout&title=Richard+Paul+Skinner&summary=Check+out+the+Stage+32+profile+of+Richard+Paul+Skinner%3A+Screenwriter%2C+playwright+and+videographer+in+Bath%2C+United+Kingdom&source=Stage+32" class="clicky_log_outbound" title="Share on LinkedIn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=580,width=530');return false;"> <span class="rrssb-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> <path d="M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803 c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048 h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501 c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546 C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z"/> </svg> </span> <span class="rrssb-text">linkedin</span> </a> </li> </ul> </div> </div> <div id="sidebar-network-panel"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Richard's network </h3> </div> <div class="panel-body"> <div class="row member-info clearfix user-block network-suggestion "> <a class="col-xs-4 col-sm-5 col-lg-4 no-underline test-11" href="https://new-cdn-origin.stage32.com/profile/75209/about"> <img class="media-object img-circle img-responsive" src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/head_shot_200/headshots/0555daffc69e6e23a709f195eeeee110_1349271286_l.jpg" alt="Nick Gear"> </a> <div class="col-xs-20 col-sm-19 col-lg-20"> <div class="panel-actions"> </div> <div class="content-user-info"> <span class="user-name"> <a href="/profile/75209/about" class="un">Nick Gear</a> </span> <div class="user-about"> <div>Cinematographer, director and editor</div> <div class="location"><span class="all-icons-location"></span>Bristol, United Kingdom</div> </div> </div> </div> <div class="panel-btns row"> <div class="col-xs-12"> <a href="/relationship/75209/request/friend?destination=home" class="network-request network-request-small" title="Add Nick Gear to your network" data-delay="500" data-uid="75209" data-size="small" data-action="request"> <button class="btn btn-danger btn-sm"> CONNECT </button> </a> </div>   <div class="col-xs-12"> </div> </div> </div> <div class="row member-info clearfix user-block network-suggestion "> <a class="col-xs-4 col-sm-5 col-lg-4 no-underline test-11" href="https://new-cdn-origin.stage32.com/stevegarratt"> <img class="media-object img-circle img-responsive" src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/head_shot_200/headshots/502b6ee2fd631ba09f00773af9589ab8_1517489082_l.jpg" alt="Steve Garratt"> </a> <div class="col-xs-20 col-sm-19 col-lg-20"> <div class="panel-actions"> </div> <div class="content-user-info"> <span class="user-name"> <a href="/stevegarratt" class="un">Steve Garratt</a> </span> <div class="user-about"> <div>Screenwriter, director and director of development</div> <div class="location"><span class="all-icons-location"></span>Bristol, United Kingdom</div> </div> </div> </div> <div class="panel-btns row"> <div class="col-xs-12"> <a href="/relationship/74990/request/friend?destination=home" class="network-request network-request-small" title="Add Steve Garratt to your network" data-delay="500" data-uid="74990" data-size="small" data-action="request"> <button class="btn btn-danger btn-sm"> CONNECT </button> </a> </div>   <div class="col-xs-12"> </div> </div> </div> <div class="row member-info clearfix user-block network-suggestion "> <a class="col-xs-4 col-sm-5 col-lg-4 no-underline test-11" href="https://new-cdn-origin.stage32.com/profile/563783/about"> <img class="media-object img-circle img-responsive" src="https://new-cdn-origin.stage32.com/sites/stage32.com/files/imagecache/head_shot_200/headshots/192c946eaf7689bfd5c0399dfec6600f_1762570696_l.jpg" alt="Mark Forrest"> </a> <div class="col-xs-20 col-sm-19 col-lg-20"> <div class="panel-actions"> </div> <div class="content-user-info"> <span class="user-name"> <a href="/profile/563783/about" class="un">Mark Forrest</a> </span> <div class="user-about"> <div>Screenwriter</div> <div class="location"><span class="all-icons-location"></span>Bath, United Kingdom</div> </div> </div> </div> <div class="panel-btns row"> <div class="col-xs-12"> <a href="/relationship/563783/request/friend?destination=home" class="network-request network-request-small" title="Add Mark Forrest to your network" data-delay="500" data-uid="563783" data-size="small" data-action="request"> <button class="btn btn-danger btn-sm"> CONNECT </button> </a> </div>   <div class="col-xs-12"> </div> </div> </div> <div class="panel-view-all "> <a href="/network/103424"> View all (246) <i class="far fa-angle-right"></i> </a> </div> </div> </div> </div> </div> </div> <script> // Standardized toggle function to prevent inconsistencies function toggleSection(sectionClass, displayType) { displayType = displayType || 'block'; // Default to 'block' if not specified var hiddenSection = document.querySelector('.' + sectionClass + '-hidden'); var button = event.target; // Handle cases where event.target might be a child element (like icon) if (!button.onclick && button.parentNode.onclick) { button = button.parentNode; } // Store original count on first use if (!button.getAttribute('data-original-count')) { var buttonText = button.innerHTML; var match = buttonText.match(/See (\d+) more/); var count = match ? match[1] : '1'; button.setAttribute('data-original-count', count); } var originalCount = button.getAttribute('data-original-count'); // Check if section is currently hidden var isHidden = hiddenSection.style.display === 'none' || !hiddenSection.style.display; if (isHidden) { hiddenSection.style.display = displayType; button.innerHTML = 'See less <i class="fa fa-chevron-up"></i>'; } else { hiddenSection.style.display = 'none'; button.innerHTML = 'See ' + originalCount + ' more <i class="fa fa-chevron-down"></i>'; } } // toggleExperience function moved to _life_experience_staging.php partial // The function is now self-contained within the Life Experience component // toggleRepresentation function moved to _representations_staging.php partial // The function is now self-contained within the Representations component // Work experience toggle function removed - now handled by enhanced _work_experience_staging.php // function toggleWorkExperience() { // toggleSection('work-experience', 'block'); // } function toggleEndorsements() { toggleSection('endorsements', 'block'); } // toggleAwards function moved to _awards_staging.php partial // toggleAchievements function moved to _achievements_staging.php partial </script> <style> .see-more-btn:focus, .see-more-btn:active, .see-more-btn:hover { outline: none !important; box-shadow: none !important; border: none !important; } button[onclick*="toggle"]:focus, button[onclick*="toggle"]:active, button[onclick*="toggle"]:hover { outline: none !important; box-shadow: none !important; border: none !important; } </style>  <script> /** * Image Cropper Component - Shared utility for profile and cover photo cropping * A vanilla JavaScript image cropping utility * Features: Drag to move, resize handles, aspect ratio constraints, crop data extraction */ (function(window) { 'use strict'; window.ImageCropper = { // Instance properties image: null, wrapper: null, cropBox: null, overlay: null, options: {}, // State isInitialized: false, isDragging: false, isResizing: false, startX: 0, startY: 0, startLeft: 0, startTop: 0, startWidth: 0, startHeight: 0, resizeHandle: null, /** * Initialize the cropper * @param {HTMLImageElement} imageElement - The image to crop * @param {Object} options - Configuration options */ init: function(imageElement, options) { if (this.isInitialized) { this.destroy(); } this.image = imageElement; this.options = Object.assign({ aspectRatio: null, minWidth: 100, minHeight: 100, initialCropBoxData: null, onCrop: null }, options); this.setupCropper(); this.isInitialized = true; return this; }, /** * Set up the cropping interface */ setupCropper: function() { // Create wrapper this.wrapper = document.createElement('div'); this.wrapper.className = 'cropper-wrapper'; this.wrapper.style.cssText = 'position: relative; display: inline-block; user-select: none; overflow: hidden; z-index: 1;'; // Insert wrapper before image and move image inside this.image.parentNode.insertBefore(this.wrapper, this.image); this.wrapper.appendChild(this.image); // Make image non-draggable this.image.draggable = false; this.image.style.userSelect = 'none'; // Create crop box this.createCropBox(); // Create overlay this.createOverlay(); // Bind events this.bindCropperEvents(); // Set initial crop box position this.initializeCropBox(); // Update overlay this.updateOverlay(); }, /** * Create the crop box element */ createCropBox: function() { this.cropBox = document.createElement('div'); this.cropBox.className = 'crop-box'; this.cropBox.style.cssText = ` position: absolute; border: 2px solid #39f; background: rgba(255,255,255,0.3); cursor: move; box-sizing: border-box; `; // Add resize handles const handles = ['nw', 'ne', 'sw', 'se', 'n', 'e', 's', 'w']; handles.forEach(position => { const handle = document.createElement('div'); handle.className = `crop-handle crop-handle-${position}`; handle.dataset.position = position; // Base styles for all handles handle.style.cssText = ` position: absolute; background: #39f; border: 1px solid #fff; box-sizing: border-box; `; // Position-specific styles if (position.length === 2) { // Corner handles handle.style.width = '10px'; handle.style.height = '10px'; handle.style.cursor = `${position}-resize`; if (position.includes('n')) handle.style.top = '-5px'; if (position.includes('s')) handle.style.bottom = '-5px'; if (position.includes('w')) handle.style.left = '-5px'; if (position.includes('e')) handle.style.right = '-5px'; } else { // Edge handles if (position === 'n' || position === 's') { handle.style.width = '20px'; handle.style.height = '6px'; handle.style.left = '50%'; handle.style.transform = 'translateX(-50%)'; handle.style.cursor = `${position}-resize`; if (position === 'n') handle.style.top = '-3px'; if (position === 's') handle.style.bottom = '-3px'; } else { handle.style.width = '6px'; handle.style.height = '20px'; handle.style.top = '50%'; handle.style.transform = 'translateY(-50%)'; handle.style.cursor = `${position}-resize`; if (position === 'w') handle.style.left = '-3px'; if (position === 'e') handle.style.right = '-3px'; } } this.cropBox.appendChild(handle); }); // Add dashed lines this.addCropperLines(); this.wrapper.appendChild(this.cropBox); }, /** * Add dashed lines to crop box for better visibility */ addCropperLines: function() { // Horizontal lines for (let i = 1; i <= 2; i++) { const line = document.createElement('div'); line.className = 'crop-line-h'; line.style.cssText = ` position: absolute; left: 0; right: 0; top: ${i * 33.33}%; height: 1px; border-top: 1px dashed rgba(255,255,255,0.7); pointer-events: none; `; this.cropBox.appendChild(line); } // Vertical lines for (let i = 1; i <= 2; i++) { const line = document.createElement('div'); line.className = 'crop-line-v'; line.style.cssText = ` position: absolute; top: 0; bottom: 0; left: ${i * 33.33}%; width: 1px; border-left: 1px dashed rgba(255,255,255,0.7); pointer-events: none; `; this.cropBox.appendChild(line); } }, /** * Create overlay element */ createOverlay: function() { this.overlay = document.createElement('div'); this.overlay.className = 'crop-overlay'; this.overlay.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); pointer-events: none; z-index: 1; `; this.wrapper.appendChild(this.overlay); }, /** * Initialize crop box position and size */ initializeCropBox: function() { const imageWidth = this.image.offsetWidth; const imageHeight = this.image.offsetHeight; let width, height, left, top; if (this.options.initialCropBoxData) { // Use provided initial data width = this.options.initialCropBoxData.width; height = this.options.initialCropBoxData.height; left = this.options.initialCropBoxData.left; top = this.options.initialCropBoxData.top; } else { // Initialize at maximum possible size while maintaining aspect ratio if (this.options.aspectRatio) { // Calculate based on aspect ratio const imageAspectRatio = imageWidth / imageHeight; if (this.options.aspectRatio > imageAspectRatio) { // Crop box is wider than image ratio - fit to width width = imageWidth; height = width / this.options.aspectRatio; } else { // Crop box is taller than image ratio - fit to height height = imageHeight; width = height * this.options.aspectRatio; } } else { // No aspect ratio - use full image size width = imageWidth; height = imageHeight; } // Center the crop box left = (imageWidth - width) / 2; top = (imageHeight - height) / 2; } this.cropBox.style.width = width + 'px'; this.cropBox.style.height = height + 'px'; this.cropBox.style.left = left + 'px'; this.cropBox.style.top = top + 'px'; }, /** * Bind cropper events */ bindCropperEvents: function() { // Crop box events this.cropBox.addEventListener('mousedown', this.handleMouseDown.bind(this)); // Document events document.addEventListener('mousemove', this.handleMouseMove.bind(this)); document.addEventListener('mouseup', this.handleMouseUp.bind(this)); // Prevent image selection this.wrapper.addEventListener('selectstart', function(e) { e.preventDefault(); }); }, /** * Handle mouse down event */ handleMouseDown: function(e) { e.preventDefault(); if (e.target.classList.contains('crop-handle')) { this.isResizing = true; this.resizeHandle = e.target.dataset.position; } else if (e.target === this.cropBox || e.target.parentNode === this.cropBox) { this.isDragging = true; } this.startX = e.clientX; this.startY = e.clientY; this.startLeft = this.cropBox.offsetLeft; this.startTop = this.cropBox.offsetTop; this.startWidth = this.cropBox.offsetWidth; this.startHeight = this.cropBox.offsetHeight; // Add active class this.cropBox.classList.add('cropping'); }, /** * Handle mouse move event */ handleMouseMove: function(e) { if (!this.isDragging && !this.isResizing) return; e.preventDefault(); const deltaX = e.clientX - this.startX; const deltaY = e.clientY - this.startY; if (this.isDragging) { this.moveCropBox(deltaX, deltaY); } else if (this.isResizing) { this.resizeCropBox(deltaX, deltaY); } this.updateOverlay(); // Call onCrop callback if provided if (this.options.onCrop) { this.options.onCrop(this.getCropData()); } }, /** * Handle mouse up event */ handleMouseUp: function(e) { if (this.isDragging || this.isResizing) { e.preventDefault(); this.isDragging = false; this.isResizing = false; this.resizeHandle = null; // Remove active class this.cropBox.classList.remove('cropping'); } }, /** * Move the crop box */ moveCropBox: function(deltaX, deltaY) { const imageWidth = this.image.offsetWidth; const imageHeight = this.image.offsetHeight; const boxWidth = this.startWidth; const boxHeight = this.startHeight; let newLeft = this.startLeft + deltaX; let newTop = this.startTop + deltaY; // Constrain to image bounds newLeft = Math.max(0, Math.min(newLeft, imageWidth - boxWidth)); newTop = Math.max(0, Math.min(newTop, imageHeight - boxHeight)); this.cropBox.style.left = newLeft + 'px'; this.cropBox.style.top = newTop + 'px'; }, /** * Resize the crop box */ resizeCropBox: function(deltaX, deltaY) { const handle = this.resizeHandle; const imageWidth = this.image.offsetWidth; const imageHeight = this.image.offsetHeight; let newWidth = this.startWidth; let newHeight = this.startHeight; let newLeft = this.startLeft; let newTop = this.startTop; // Calculate new dimensions based on handle position if (handle.includes('e')) { newWidth = this.startWidth + deltaX; } if (handle.includes('w')) { newWidth = this.startWidth - deltaX; newLeft = this.startLeft + deltaX; } if (handle.includes('s')) { newHeight = this.startHeight + deltaY; } if (handle.includes('n')) { newHeight = this.startHeight - deltaY; newTop = this.startTop + deltaY; } // Apply aspect ratio constraint if (this.options.aspectRatio) { if (handle === 'e' || handle === 'w') { newHeight = newWidth / this.options.aspectRatio; } else if (handle === 'n' || handle === 's') { newWidth = newHeight * this.options.aspectRatio; } else { // Corner handles - maintain aspect ratio based on larger change const widthChange = Math.abs(newWidth - this.startWidth); const heightChange = Math.abs(newHeight - this.startHeight); if (widthChange > heightChange) { newHeight = newWidth / this.options.aspectRatio; } else { newWidth = newHeight * this.options.aspectRatio; } } } // Apply minimum size constraints newWidth = Math.max(this.options.minWidth, newWidth); newHeight = Math.max(this.options.minHeight, newHeight); // Ensure crop box stays within image bounds if (newLeft < 0) { newWidth += newLeft; newLeft = 0; } if (newTop < 0) { newHeight += newTop; newTop = 0; } if (newLeft + newWidth > imageWidth) { newWidth = imageWidth - newLeft; } if (newTop + newHeight > imageHeight) { newHeight = imageHeight - newTop; } // Apply aspect ratio again after boundary constraints if (this.options.aspectRatio) { const currentRatio = newWidth / newHeight; if (Math.abs(currentRatio - this.options.aspectRatio) > 0.01) { if (handle.includes('n') || handle.includes('s')) { newWidth = newHeight * this.options.aspectRatio; // Ensure width doesn't exceed image bounds if (newLeft + newWidth > imageWidth) { newWidth = imageWidth - newLeft; newHeight = newWidth / this.options.aspectRatio; } } else { newHeight = newWidth / this.options.aspectRatio; // Ensure height doesn't exceed image bounds if (newTop + newHeight > imageHeight) { newHeight = imageHeight - newTop; newWidth = newHeight * this.options.aspectRatio; } } } } // Update crop box this.cropBox.style.left = newLeft + 'px'; this.cropBox.style.top = newTop + 'px'; this.cropBox.style.width = newWidth + 'px'; this.cropBox.style.height = newHeight + 'px'; }, /** * Update overlay to show darkened area outside crop box */ updateOverlay: function() { const cropRect = { left: this.cropBox.offsetLeft, top: this.cropBox.offsetTop, width: this.cropBox.offsetWidth, height: this.cropBox.offsetHeight }; // Use box-shadow instead of clip-path for better browser support this.cropBox.style.boxShadow = ` 0 0 0 9999px rgba(0, 0, 0, 0.5) `; }, /** * Get crop data relative to the natural image size */ getCropData: function() { const scaleX = this.image.naturalWidth / this.image.offsetWidth; const scaleY = this.image.naturalHeight / this.image.offsetHeight; return { x: Math.round(this.cropBox.offsetLeft * scaleX), y: Math.round(this.cropBox.offsetTop * scaleY), width: Math.round(this.cropBox.offsetWidth * scaleX), height: Math.round(this.cropBox.offsetHeight * scaleY), scaleX: scaleX, scaleY: scaleY }; }, /** * Get cropped canvas */ getCroppedCanvas: function(options) { const cropData = this.getCropData(); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); options = options || {}; // Set canvas size if (options.width && options.height) { canvas.width = options.width; canvas.height = options.height; } else if (options.width) { canvas.width = options.width; canvas.height = (cropData.height / cropData.width) * options.width; } else if (options.height) { canvas.height = options.height; canvas.width = (cropData.width / cropData.height) * options.height; } else { canvas.width = cropData.width; canvas.height = cropData.height; } // Draw cropped image ctx.drawImage( this.image, cropData.x, cropData.y, cropData.width, cropData.height, 0, 0, canvas.width, canvas.height ); return canvas; }, /** * Convert canvas to blob */ getCroppedBlob: function(options, callback) { const canvas = this.getCroppedCanvas(options); canvas.toBlob(callback, options.type || 'image/jpeg', options.quality || 0.9); }, /** * Set aspect ratio */ setAspectRatio: function(aspectRatio) { this.options.aspectRatio = aspectRatio; if (aspectRatio && this.cropBox) { // Adjust current crop box to match new aspect ratio const currentWidth = this.cropBox.offsetWidth; const newHeight = currentWidth / aspectRatio; this.cropBox.style.height = newHeight + 'px'; this.updateOverlay(); } }, /** * Reset the crop box to initial position */ reset: function() { this.initializeCropBox(); this.updateOverlay(); }, /** * Destroy the cropper */ destroy: function() { if (!this.isInitialized) return; // Remove event listeners if (this.cropBox) { this.cropBox.removeEventListener('mousedown', this.handleMouseDown); } document.removeEventListener('mousemove', this.handleMouseMove); document.removeEventListener('mouseup', this.handleMouseUp); // Remove elements if (this.wrapper && this.wrapper.parentNode) { this.wrapper.parentNode.insertBefore(this.image, this.wrapper); this.wrapper.parentNode.removeChild(this.wrapper); } // Reset properties this.image = null; this.wrapper = null; this.cropBox = null; this.overlay = null; this.isInitialized = false; } }; })(window); /** * Gallery Interface Component - Shared utility for photo gallery functionality * Provides common gallery features: navigation, thumbnails, selection, etc. * Can be extended by specific gallery implementations */ window.GalleryInterface = { /** * Create a thumbnail element * @param {Object} photo - Photo data object * @param {Number} index - Photo index in array * @param {Boolean} isActive - Whether this is the currently selected photo * @param {Boolean} isDefault - Whether this is the default photo * @param {String} prefix - CSS prefix for this gallery type * @param {Object} dimensions - Width and height for thumbnail * @returns {jQuery} Thumbnail element */ createThumbnail: function(photo, index, isActive, isDefault, prefix, dimensions) { dimensions = dimensions || { width: 80, height: 80 }; const thumbnail = $('<div>') .addClass(`${prefix}-thumbnail`) .addClass(isActive ? 'active' : '') .attr('data-index', index) .css({ 'position': 'relative', 'cursor': 'pointer', 'border': isActive ? '3px solid #2884c6' : '3px solid transparent', 'border-radius': '8px', 'overflow': 'hidden', 'width': dimensions.width + 'px', 'height': dimensions.height + 'px', 'flex-shrink': '0', 'transition': 'all 0.2s ease' }); // Determine thumbnail URL based on available variants let thumbnailUrl = ''; if (photo.variants) { thumbnailUrl = photo.variants.thumbnail_cropped?.url || photo.variants.thumbnail?.url || photo.variants.small_cropped?.url || photo.variants.small?.url || ''; } const img = $('<img>') .attr('src', thumbnailUrl) .attr('alt', photo.name || 'Photo') .css({ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }); thumbnail.append(img); // Add default indicator if applicable if (isDefault) { const defaultBadge = $('<span>') .css({ 'position': 'absolute', 'top': '5px', 'right': '5px', 'background': '#28a745', 'color': 'white', 'padding': '2px 6px', 'border-radius': '3px', 'font-size': '10px', 'font-weight': 'bold' }) .text('DEFAULT'); thumbnail.append(defaultBadge); } return thumbnail; }, /** * Update navigation button states * @param {String} prevButtonId - Previous button element ID * @param {String} nextButtonId - Next button element ID * @param {Number} currentIndex - Current photo index * @param {Number} totalPhotos - Total number of photos */ updateNavigationState: function(prevButtonId, nextButtonId, currentIndex, totalPhotos) { $(`#${prevButtonId}`).prop('disabled', currentIndex === 0); $(`#${nextButtonId}`).prop('disabled', currentIndex === totalPhotos - 1); }, /** * Get the best image URL for display * @param {Object} photo - Photo data object * @param {String} preferredSize - Preferred size (large, medium, etc.) * @returns {String} Image URL */ getBestImageUrl: function(photo, preferredSize) { if (!photo || !photo.variants) return ''; const variants = photo.variants; // Priority order based on preferred size if (preferredSize === 'large') { return variants.large?.url || variants.large_cropped?.url || variants.original?.url || variants.medium?.url || variants.medium_cropped?.url || ''; } else if (preferredSize === 'medium') { return variants.medium?.url || variants.medium_cropped?.url || variants.large?.url || variants.large_cropped?.url || variants.original?.url || ''; } else { // Default fallback return variants.original?.url || variants.large?.url || variants.large_cropped?.url || variants.medium?.url || variants.medium_cropped?.url || ''; } }, /** * Handle keyboard navigation * @param {Event} e - Keyboard event * @param {Function} navigatePrev - Previous navigation function * @param {Function} navigateNext - Next navigation function */ handleKeyboardNavigation: function(e, navigatePrev, navigateNext) { if (e.key === 'ArrowLeft') { navigatePrev(); } else if (e.key === 'ArrowRight') { navigateNext(); } else if (e.key === 'Escape') { $('.modal.show').modal('hide'); } }, /** * Create loading state HTML * @returns {String} Loading state HTML */ createLoadingState: function() { return ` <div style="text-align: center; padding: 40px;"> <i class="fa fa-spinner fa-spin fa-3x"></i> <p style="margin-top: 20px;">Loading...</p> </div> `; }, /** * Create empty state HTML * @param {String} message - Empty state message * @param {String} icon - Font Awesome icon class * @param {Boolean} showAddButton - Whether to show add button * @param {String} addButtonId - Add button element ID * @returns {String} Empty state HTML */ createEmptyState: function(message, icon, showAddButton, addButtonId) { let html = ` <div style="text-align: center; padding: 40px;"> <i class="fa ${icon} fa-3x text-muted"></i> <p style="margin-top: 20px;" class="text-muted">${message}</p> `; if (showAddButton && addButtonId) { html += ` <button type="button" class="btn btn-primary" onclick="document.getElementById('${addButtonId}').click()"> <i class="fa fa-plus"></i> Add Your First Photo </button> `; } html += `</div>`; return html; }, /** * Validate image file * @param {File} file - File to validate * @param {Array} allowedFormats - Allowed file extensions * @param {Number} maxSizeMB - Maximum file size in MB * @returns {Object} Validation result with isValid and error message */ validateImageFile: function(file, allowedFormats, maxSizeMB) { // Check file type const extension = file.name.split('.').pop().toLowerCase(); if (!allowedFormats.includes(extension)) { return { isValid: false, error: `Please select a valid image file. Allowed formats: ${allowedFormats.join(', ')}` }; } // Check file size const sizeMB = file.size / (1024 * 1024); if (sizeMB > maxSizeMB) { return { isValid: false, error: `File size exceeds ${maxSizeMB}MB limit` }; } return { isValid: true }; }, /** * Read file as data URL * @param {File} file - File to read * @param {Function} callback - Callback function with result */ readFileAsDataURL: function(file, callback) { const reader = new FileReader(); reader.onload = function(e) { callback(e.target.result); }; reader.onerror = function() { callback(null, 'Failed to read file'); }; reader.readAsDataURL(file); }, /** * Show notification message * @param {String} message - Message to show * @param {String} type - Message type (success, error, info) */ showNotification: function(message, type) { // For now, use alert. Can be replaced with better notification system if (type === 'error') { alert('Error: ' + message); } else { alert(message); } }, /** * Animate element * @param {jQuery} element - Element to animate * @param {String} animation - Animation type */ animateElement: function(element, animation) { if (animation === 'fadeIn') { element.hide().fadeIn(300); } else if (animation === 'slideIn') { element.hide().slideDown(300); } } }; </script>    <div id="toast-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: none;">  </div> <style> /* Toast Notification Styles */ .toast-notification { min-width: 350px; max-width: 450px; margin-top: 10px; padding: 8px; background: #2d2d2d; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(100%); transition: all 0.3s ease; pointer-events: auto; display: flex; align-items: stretch; overflow: hidden; } .toast-notification.show { opacity: 1; transform: translateY(0); display: flex !important; /* Override any Bootstrap .show styles */ gap: 16px; align-items: center; } .toast-notification.hiding { opacity: 0; transform: translateY(100%); } /* Toast types - dark theme */ .toast-notification.success { background: #232C21; } .toast-notification.error { background: #341715; } .toast-notification.info { background: #11273B; } .toast-notification.warning { background: #2A2718; } /* Toast icon container */ .toast-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: white; border-radius: 4px; } .toast-notification.success .toast-icon { background: #2FD159; } .toast-notification.error .toast-icon { background: #D43236; } .toast-notification.info .toast-icon { background: #0790FB; } .toast-notification.warning .toast-icon { background: #FEA00C; } /* Toast content */ .toast-content { flex: 1; display: flex; align-items: center; color: #ffffff; } .toast-title { font-weight: 600; margin-bottom: 4px; color: #ffffff; } .toast-message { font-size: 14px; line-height: 1.4; color: #ffffff; margin: 0; } /* Close button */ .toast-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; flex-shrink: 0; padding: 0 8px; margin: 0; color: #ffffff; display: flex; align-items: flex-start; } .toast-close:hover { opacity: 1; } /* Progress bar */ .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 0 0 8px 8px; transition: width linear; } /* Ensure dark theme in modals */ .modal .toast-notification { background: rgba(45, 45, 45, 0.95); } /* Mobile responsive */ @media (max-width: 768px) { #toast-container { left: 10px; right: 10px; bottom: 10px; } .toast-notification { min-width: auto; max-width: 100%; } } </style> <script> // Toast Notification System window.ToastNotification = { // Configuration config: { defaultDuration: 5000, // 5 seconds animationDuration: 300, maxToasts: 3 // Maximum number of toasts to show at once }, // Initialize the toast system init: function() { // Ensure container exists if (!document.getElementById('toast-container')) { const container = document.createElement('div'); container.id = 'toast-container'; container.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: none;'; document.body.appendChild(container); } }, /** * Show a toast notification * @param {string} message - The message to display * @param {string} type - Type of toast: 'success', 'error', 'info', 'warning' (default: 'info') * @param {number} duration - Duration in milliseconds (default: 5000) * @param {string} title - Optional title for the toast */ show: function(message, type = 'info', duration = null, title = null) { this.init(); const container = document.getElementById('toast-container'); const toastId = 'toast-' + Date.now(); duration = duration !== null ? duration : this.config.defaultDuration; // Create toast element const toast = document.createElement('div'); toast.id = toastId; toast.className = `toast-notification ${type}`; toast.style.position = 'relative'; // Icons for different types const icons = { success: '<i class="fa fa-check"></i>', error: '<i class="fa fa-ban"></i>', info: '<i class="fa fa-info"></i>', warning: '<i class="fa fa-exclamation-triangle"></i>' }; // Build toast HTML toast.innerHTML = ` <div class="toast-icon">${icons[type] || icons.info}</div> <div class="toast-content"> <div> ${title ? `<div class="toast-title">${this.escapeHtml(title)}</div>` : ''} <div class="toast-message">${this.escapeHtml(message)}</div> </div> </div> <button class="toast-close" onclick="ToastNotification.dismiss('${toastId}')">×</button> ${duration > 0 ? `<div class="toast-progress" style="width: 100%; transition: width ${duration}ms linear;"></div>` : ''} `; // Remove oldest toast if we're at the limit const existingToasts = container.querySelectorAll('.toast-notification'); if (existingToasts.length >= this.config.maxToasts) { this.dismiss(existingToasts[0].id); } // Add to container (prepend so newer toasts appear at bottom) container.insertBefore(toast, container.firstChild); // Trigger animation setTimeout(() => { toast.classList.add('show'); }, 10); // Auto-dismiss if duration is set if (duration > 0) { // Start progress bar animation setTimeout(() => { const progressBar = toast.querySelector('.toast-progress'); if (progressBar) { progressBar.style.width = '0%'; } }, 100); // Set auto-dismiss timer toast.dismissTimer = setTimeout(() => { this.dismiss(toastId); }, duration); } return toastId; }, /** * Dismiss a specific toast * @param {string} toastId - The ID of the toast to dismiss */ dismiss: function(toastId) { const toast = document.getElementById(toastId); if (!toast) return; // Clear auto-dismiss timer if exists if (toast.dismissTimer) { clearTimeout(toast.dismissTimer); } // Add hiding class toast.classList.add('hiding'); toast.classList.remove('show'); // Remove after animation setTimeout(() => { if (toast.parentNode) { toast.parentNode.removeChild(toast); } }, this.config.animationDuration); }, /** * Show a success toast */ success: function(message, duration = null, title = null) { return this.show(message, 'success', duration, title); }, /** * Show an error toast */ error: function(message, duration = null, title = null) { return this.show(message, 'error', duration, title); }, /** * Show an info toast */ info: function(message, duration = null, title = null) { return this.show(message, 'info', duration, title); }, /** * Show a warning toast */ warning: function(message, duration = null, title = null) { return this.show(message, 'warning', duration, title); }, /** * Clear all toasts */ clearAll: function() { const container = document.getElementById('toast-container'); if (!container) return; const toasts = container.querySelectorAll('.toast-notification'); toasts.forEach(toast => { this.dismiss(toast.id); }); }, /** * Escape HTML to prevent XSS */ escapeHtml: function(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } }; // Initialize on DOM ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { ToastNotification.init(); }); } else { ToastNotification.init(); } </script>  <div class="modal fade" id="profile-photo-gallery-modal" tabindex="-1" role="dialog" aria-labelledby="profilePhotoGalleryModalLabel"> <div class="modal-dialog modal-fullscreen" role="document"> <div class="modal-content" style="background-color: rgba(0, 0, 0, 1); height: 100vh;">  <div style="position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 1060; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;">  <img src="https://www.stage32.com/sites/stage32.com/themes/two/images/stage32_logo.svg" alt="Stage32" style="height: 30px; width: auto;">  <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 1; color: white; font-size: 24px; font-weight: 300; text-shadow: none; background: none; border: none; transition: opacity 0.3s ease; padding: 0; line-height: 1;"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" style="padding: 0; height: 100vh; overflow: hidden;">  <div id="profile-photo-gallery-container" style="display: flex; height: 100vh;">  <div class="gallery-left-column" style="width: 75%; padding: 50px 20px 40px 20px; display: flex; flex-direction: column; align-items: center;">  <div class="gallery-main-image-wrapper" style="position: relative; width: 100%; max-height: 100vh; margin-bottom: 20px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; width: 100%; height: 100%; background-color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center;"> <img id="profile-gallery-main-image" src="" alt="Profile Photo" style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: none;">  <button type="button" class="gallery-nav-prev" id="profile-gallery-prev" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: white; border: none; padding: 15px 20px; border-radius: 4px; cursor: pointer; z-index: 10; font-size: 18px;"> <i class="fa fa-chevron-left"></i> </button> <button type="button" class="gallery-nav-next" id="profile-gallery-next" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: white; border: none; padding: 15px 20px; border-radius: 4px; cursor: pointer; z-index: 10; font-size: 18px;"> <i class="fa fa-chevron-right"></i> </button> </div> </div>  <div class="gallery-thumbnails-wrapper" style="flex-shrink: 0; max-width: 100%;"> <div id="profile-gallery-thumbnails" class="gallery-thumbnails" style="display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 10px 10px 20px 10px; justify-content: flex-start;">  </div> </div>  </div>  <div class="gallery-right-column" style="width: 25%; background-color: rgba(255,255,255,0.05); border-left: 1px solid rgba(255,255,255,0.2); padding: 50px 30px 40px 30px; overflow-y: auto;">  <div id="profile-caption-container" style="display: none;">  <div id="profile-caption-view-mode" style="position: relative;"> <div id="profile-caption-display" style="background-color: rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.6; max-height: 300px; overflow-y: auto;">  </div> </div>  <div id="profile-caption-edit-mode" style="display: none;"> <textarea id="profile-caption-textarea" style="width: 100%; min-height: 150px; max-height: 300px; padding: 15px; font-size: 14px; line-height: 1.6; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.5); color: white; border-radius: 8px; resize: vertical;" maxlength="500" placeholder="Add a caption to your photo..."></textarea> <div style="margin-top: 10px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"> <span id="profile-caption-char-count" style="font-size: 12px; color: rgba(255,255,255,0.6);">0/500</span> </div> <div style="display: flex; gap: 10px;"> <button type="button" id="profile-caption-cancel-btn" style="flex: 1; background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 8px 16px; font-size: 14px;"> Cancel </button> <button type="button" id="profile-caption-save-btn" style="flex: 1; background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 8px 16px; font-size: 14px;"> Save </button> </div> </div> </div> </div>  <div style="margin-top: 40px;">  </div> </div>  <input type="file" id="profile-photo-upload-input" accept="image/jpeg,image/jpg,image/png,image/webp" style="display: none;" onchange="ProfilePhotoGallery.handleFileSelect(event)"> </div>  <div id="profile-photo-cropping-container" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); z-index: 1050;"> <div style="width: 75%; margin: 0 auto; padding: 40px; height: 100vh; display: flex; flex-direction: column; justify-content: center;"> <div class="cropping-instructions" style="margin-bottom: 20px; text-align: center;"> <h3 style="color: white; margin-bottom: 10px;">Crop Your Profile Photo</h3> <p style="color: rgba(255,255,255,0.7);">Drag and resize the box to crop your profile photo. Profile photos should be square (1:1 ratio) for best display.</p> </div> <div class="cropping-image-wrapper" style="text-align: center; margin-bottom: 30px;"> <img id="profile-cropping-image" src="" alt="Image to crop" style="max-width: 100%; max-height: 60vh; display: inline-block;"> </div> <div class="cropping-actions" style="display: flex; justify-content: center; gap: 16px;"> <button type="button" id="profile-crop-cancel" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Cancel </button> <button type="button" id="profile-crop-apply" style="background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Next </button> </div> </div> </div>  <div id="profile-photo-caption-input-container" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); z-index: 1050;"> <div style="width: 75%; margin: 0 auto; padding: 40px; height: 100vh; display: flex; flex-direction: column; justify-content: center;"> <div class="caption-input-instructions" style="margin-bottom: 20px; text-align: center;"> <h3 style="color: white; margin-bottom: 10px;">Add a Caption (Optional)</h3> <p style="color: rgba(255,255,255,0.7);">Add a caption to describe your profile photo</p> </div> <div style="max-width: 600px; margin: 0 auto; width: 100%;"> <textarea id="profile-upload-caption-textarea" style="width: 100%; min-height: 150px; max-height: 300px; padding: 15px; font-size: 14px; line-height: 1.6; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.5); color: white; border-radius: 8px; resize: vertical;" maxlength="500" placeholder="Enter a caption for your photo..."></textarea> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;"> <span id="profile-upload-caption-char-count" style="font-size: 12px; color: rgba(255,255,255,0.6);">0/500</span> </div> </div> <div class="caption-input-actions" style="display: flex; justify-content: center; gap: 16px; margin-top: 30px;"> <button type="button" id="profile-caption-input-back" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Back </button> <button type="button" id="profile-caption-input-skip" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Skip </button> <button type="button" id="profile-caption-input-save" style="background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Upload </button> </div> </div> </div>  <div id="profile-gallery-loading" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,1); z-index: 1040;"> <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column;"> <i class="fa fa-spinner fa-spin fa-3x" style="color: white;"></i> <p style="margin-top: 20px; color: rgba(255,255,255,0.7); font-size: 18px;">Loading...</p> </div> </div>  <div id="profile-gallery-empty" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,1); z-index: 1040;"> <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column;"> <i class="fa fa-camera fa-3x" style="color: rgba(255,255,255,0.5);"></i> <p style="margin-top: 20px; color: rgba(255,255,255,0.5); font-size: 18px;">No profile photos available</p> </div> </div> </div> </div> </div> </div>  <div class="modal fade" id="profile-delete-confirmation-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content" style="background-color: #323232; max-width: 400px; border-radius: 16px; margin: auto;"> <div style="border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px; display: flex; justify-content: space-between; align-items: center;"> <h5 class="modal-title" style="color: white; margin: 0;"> <i class="fa fa-exclamation-triangle" style="color: #ffc107;"></i> Confirm Photo Deletion </h5> <button type="button" class="close" data-dismiss="modal" style="color: white; opacity: 1; font-size: 24px; background: none; border: none; padding: 0;"> <span>×</span> </button> </div> <div class="modal-body" style="color: rgba(255,255,255,0.9);"> <p id="profile-delete-confirmation-message"> Are you sure you want to delete this photo? This action cannot be undone. </p> <div id="profile-delete-warning-message" style="display: none; margin-top: 15px; padding: 10px; background: rgba(255,193,7,0.1); border-left: 3px solid #ffc107;"> <strong>Warning:</strong> This is your current profile photo. A new default will be selected automatically. </div> </div> <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);"> <button type="button" class="btn btn-secondary" data-dismiss="modal" style="color: #323232;"> Cancel </button> <button type="button" id="profile-confirm-delete-btn" class="btn btn-danger"> Delete Photo </button> </div> </div> </div> </div>  <script> (function() { 'use strict'; // Profile Photo Gallery Manager window.ProfilePhotoGallery = { // Configuration config: { apiBaseUrl: 'https://backend.stage32.com/api/v2', collectionType: 'profile', aspectRatio: 1.0, // 1:1 for profile photos maxFileSizeMB: 10, allowedFormats: ['jpg', 'jpeg', 'png', 'webp'] }, // Event types events: { CAPTION_EDIT_START: 'caption:edit:start', CAPTION_EDIT_CANCEL: 'caption:edit:cancel', CAPTION_SAVED: 'caption:saved', CAPTION_DRAFT_CREATED: 'caption:draft:created', CAPTION_DRAFT_RESTORED: 'caption:draft:restored', CAPTION_VALIDATED: 'caption:validated', PHOTO_CHANGED: 'photo:changed', GALLERY_CLOSED: 'gallery:closed' }, // State management state: { photos: [], currentIndex: 0, currentDefaultId: null, isLoading: false, cropperInstance: null, selectedFile: null, editingCaption: false, originalCaption: '', uploadCaption: '', cropData: null, captionHistory: {}, // Track caption history for undo functionality pendingDeletion: null // Track photo pending deletion }, // Initialize the gallery init: function() { this.isOwner = false; // Get data from single source of truth this.userSlug = window._phpVars?.profile_slug; this.authToken = window._phpVars?.bearer_token; this.bindEvents(); // Load photos if we have the user slug if (this.userSlug) { this.loadPhotosFromAPI(); } else { this.showEmptyState(); } }, // Bind events bindEvents: function() { // Set up modal cleanup on hide $('#profile-photo-gallery-modal').on('hide.bs.modal hidden.bs.modal', (e) => { // Always reset file input when modal closes $('#profile-photo-upload-input').val(''); // Check if we're in cropping mode if (this.state.cropperInstance) { this.destroyCropper(); this.state.selectedFile = null; this.renderGallery(); } }); // Modal open trigger is now handled in about_staging.php initialization // This prevents duplicate event handlers // Gallery navigation $('#profile-gallery-prev').on('click', () => this.navigatePrev()); $('#profile-gallery-next').on('click', () => this.navigateNext()); // Thumbnail clicks $(document).on('click', '.profile-gallery-thumbnail', function() { const index = $(this).data('index'); ProfilePhotoGallery.selectPhoto(index); }); // Owner-only event handlers if (this.isOwner) { // Set as default button $('#profile-set-as-default').on('click', () => this.setAsDefault()); // Delete photo button $('#profile-delete-photo').on('click', () => this.deleteCurrentPhoto()); // Delete confirmation button $('#profile-confirm-delete-btn').on('click', () => this.executeDelete()); // File input change is now handled inline in the HTML // Cropping actions $('#profile-crop-cancel').on('click', () => this.cancelCropping()); $('#profile-crop-apply').on('click', () => this.proceedToCaption()); // Caption input actions $('#profile-caption-input-back').on('click', () => this.backToCropping()); $('#profile-caption-input-skip').on('click', () => this.skipCaption()); $('#profile-caption-input-save').on('click', () => this.applyCropWithCaption()); // Character count for upload caption $('#profile-upload-caption-textarea').on('input', function() { const length = $(this).val().length; $('#profile-upload-caption-char-count').text(`${length}/500`); }); // Caption editing $('#profile-caption-edit-btn').on('click', () => this.startEditingCaption()); $('#profile-caption-save-btn').on('click', () => this.saveCaption()); $('#profile-caption-cancel-btn').on('click', () => this.cancelEditingCaption()); // Character count and auto-save draft $('#profile-caption-textarea').on('input', function() { const length = $(this).val().length; $('#profile-caption-char-count').text(`${length}/500`); }); // Show edit button on hover (only in view mode) $('#profile-caption-view-mode').on('mouseenter', function() { if (!ProfilePhotoGallery.state.editingCaption) { $('#profile-caption-edit-btn').fadeIn(200); } }).on('mouseleave', function() { $('#profile-caption-edit-btn').fadeOut(200); }); } // Keyboard navigation and shortcuts $('#profile-photo-gallery-modal').on('keydown', (e) => { // Navigation if (e.key === 'ArrowLeft' && !this.state.editingCaption) { e.preventDefault(); this.navigatePrev(); } if (e.key === 'ArrowRight' && !this.state.editingCaption) { e.preventDefault(); this.navigateNext(); } // Caption editing shortcuts (owner only) if (this.isOwner) { // Ctrl/Cmd + E to edit caption if ((e.ctrlKey || e.metaKey) && e.key === 'e' && !this.state.editingCaption) { e.preventDefault(); this.startEditingCaption(); } // Escape to cancel editing if (e.key === 'Escape' && this.state.editingCaption) { e.preventDefault(); this.cancelEditingCaption(); } // Ctrl/Cmd + Enter to save caption if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && this.state.editingCaption) { e.preventDefault(); this.saveCaption(); } } }); }, // Load photos from API loadPhotosFromAPI: async function() { if (!this.userSlug) { this.state.photos = []; this.renderGallery(); return; } this.showLoadingState(); try { const url = `${this.config.apiBaseUrl}/users/${this.userSlug}/media?collection_name=profile`; const response = await fetch(url, { method: 'GET', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` } }); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Process the API response this.state.photos = result.data || []; // Log current profile photo info const currentPhotoId = window._jsProfileData?.current_profile_photo_id; // Find the current default photo if (this.state.photos.length > 0) { // First check if any photo has is_default flag from API const defaultFromAPI = this.state.photos.find(p => p.is_default === true); if (defaultFromAPI) { this.state.currentDefaultId = defaultFromAPI.id; } else if (currentPhotoId) { const defaultPhoto = this.state.photos.find(p => p.id === currentPhotoId); if (defaultPhoto) { this.state.currentDefaultId = defaultPhoto.id; // Mark it in our local state this.state.photos.forEach(p => p.is_default = p.id === currentPhotoId); } } else { // Mark first photo as default if none is set this.state.photos[0].is_default = true; this.state.currentDefaultId = this.state.photos[0].id; } } this.renderGallery(); } catch (error) { // Show empty state on error this.state.photos = []; this.renderGallery(); } }, // Open the modal openModal: function() { // Only allow opening if there are photos or if it's the owner if (this.state.photos.length === 0 && !this.isOwner) { return; } this.renderGallery(); $('#profile-photo-gallery-modal').modal('show'); }, // Render the gallery renderGallery: function() { if (this.state.photos.length === 0) { this.showEmptyState(); return; } this.hideAllStates(); $('#profile-photo-gallery-container').show(); // Render main image this.updateMainImage(); // Render thumbnails this.renderThumbnails(); // Update navigation state this.updateNavigationState(); // Update default button state (only for owner) if (this.isOwner) { this.updateDefaultButtonState(); this.updateDeleteButtonState(); } }, // Render thumbnails renderThumbnails: function() { const container = $('#profile-gallery-thumbnails'); container.empty(); // Add the "Add Photo" button as first thumbnail for owners if (this.isOwner) { const addPhotoThumbnail = $('<div>') .addClass('profile-add-photo-thumbnail') .css({ 'position': 'relative', 'cursor': 'pointer', 'border': '1px dashed rgba(255,255,255,0.5)', 'border-radius': '4px', 'width': '40px', 'height': '40px', 'flex-shrink': '0', 'background-color': 'rgba(255,255,255,0.1)', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center', 'transition': 'all 0.2s ease' }) .html('<i class="fa fa-plus" style="color: white; font-size: 16px;"></i>') .on('click', () => this.triggerFileUpload()) .on('mouseenter', function() { $(this).css({ 'background-color': 'rgba(255,255,255,0.2)', 'border-color': 'rgba(255,255,255,0.8)' }); }) .on('mouseleave', function() { $(this).css({ 'background-color': 'rgba(255,255,255,0.1)', 'border-color': 'rgba(255,255,255,0.5)' }); }); container.append(addPhotoThumbnail); } this.state.photos.forEach((photo, index) => { const isActive = index === this.state.currentIndex; const isDefault = photo.id === this.state.currentDefaultId; const thumbnail = $('<div>') .addClass('profile-gallery-thumbnail') .addClass(isActive ? 'active' : '') .attr('data-index', index) .css({ 'position': 'relative', 'cursor': 'pointer', 'border': '2px solid transparent', 'outline': isActive ? 'white solid 1px' : 'none', 'border-radius': '4px', 'width': '40px', 'height': '40px', 'flex-shrink': '0' }); const img = $('<img>') .attr('src', photo.variants.thumbnail?.url || photo.variants.small?.url || photo.original_url) .attr('alt', photo.name) .css({ 'width': '100%', 'height': '100%', 'object-fit': 'cover', 'border-radius': '4px' }); thumbnail.append(img); // Add default indicator (only for profile owner) if (isDefault && this.isOwner) { const defaultBadge = $('<span>') .css({ 'position': 'absolute', 'bottom': '-12px', 'left': '50%', 'transform': 'translateX(-50%)', 'background': 'white', 'color': 'rgb(50, 50, 50)', 'padding': '1px 4px', 'border-radius': '4px', 'font-size': '8px', 'font-weight': 'bold', 'white-space': 'nowrap', 'display': 'none' // Hide default badge in profile photo gallery }) .text('Default'); thumbnail.append(defaultBadge); } container.append(thumbnail); }); }, // Update main image updateMainImage: function() { const currentPhoto = this.state.photos[this.state.currentIndex]; if (currentPhoto) { const imageUrl = currentPhoto.variants.large?.url || currentPhoto.variants.medium?.url || currentPhoto.variants.original?.url || currentPhoto.original_url; $('#profile-gallery-main-image').attr('src', imageUrl).show(); // Update caption this.updateCaption(currentPhoto); } else { $('#profile-gallery-main-image').hide(); } }, // Update caption display updateCaption: function(photo) { const captionContainer = $('#profile-caption-container'); const captionDisplay = $('#profile-caption-display'); const editBtn = $('#profile-caption-edit-btn'); const captionToDisplay = photo.caption; if (captionToDisplay && captionToDisplay.trim()) { // Use sanitization method const sanitizedCaption = this.sanitizeCaption(captionToDisplay); captionDisplay.html(sanitizedCaption); // Keep the dark theme styling captionDisplay.css('border-left', 'none'); // Update edit button text if (this.isOwner) { editBtn.html('<i class="fa fa-pencil"></i> Edit'); } captionContainer.show(); } else if (this.isOwner) { // Show empty state with "Add Caption" for owners captionDisplay.html('<span style="font-style: italic; color: rgba(255,255,255,0.5);">No caption yet</span>'); // Update edit button to say "Add Caption" editBtn.html('<i class="fa fa-plus"></i> Add Caption'); captionContainer.show(); } else { // Hide for non-owners when no caption captionContainer.hide(); } }, // Navigate to previous photo (with wrap around) navigatePrev: function() { if (this.state.photos.length === 0) return; if (this.state.currentIndex > 0) { this.selectPhoto(this.state.currentIndex - 1); } else { // Wrap around to last photo this.selectPhoto(this.state.photos.length - 1); } }, // Navigate to next photo (with wrap around) navigateNext: function() { if (this.state.photos.length === 0) return; if (this.state.currentIndex < this.state.photos.length - 1) { this.selectPhoto(this.state.currentIndex + 1); } else { // Wrap around to first photo this.selectPhoto(0); } }, // Select a specific photo selectPhoto: function(index) { const previousIndex = this.state.currentIndex; const previousPhoto = this.state.photos[previousIndex]; // Cancel any active caption editing if (this.state.editingCaption) { this.cancelEditingCaption(); } this.state.currentIndex = index; const currentPhoto = this.state.photos[index]; this.updateMainImage(); this.updateThumbnailSelection(); this.updateNavigationState(); if (this.isOwner) { this.updateDefaultButtonState(); } // Trigger photo changed event if (currentPhoto && previousIndex !== index) { this.triggerEvent(this.events.PHOTO_CHANGED, { previousPhotoId: previousPhoto ? previousPhoto.id : null, currentPhotoId: currentPhoto.id, currentIndex: index, previousIndex: previousIndex, hasCaption: !!currentPhoto.caption, hasCaption: !!currentPhoto.caption }); } }, // Update thumbnail selection updateThumbnailSelection: function() { $('.profile-gallery-thumbnail').removeClass('active').css({ 'border': '2px solid transparent', 'outline': 'none' }); $(`.profile-gallery-thumbnail[data-index="${this.state.currentIndex}"]`) .addClass('active') .css({ 'border': '2px solid transparent', 'outline': 'white solid 1px' }); }, // Update navigation state (always enabled with wrap-around) updateNavigationState: function() { // Enable both buttons if we have photos (wrap-around navigation) const hasPhotos = this.state.photos.length > 0; $('#profile-gallery-prev').prop('disabled', !hasPhotos); $('#profile-gallery-next').prop('disabled', !hasPhotos); }, // Update default button state (owner only) updateDefaultButtonState: function() { // Always show the "Set as Default" button for all photos // This resolves data architecture issues with default photo tracking $('#profile-set-as-default').show(); }, // Update delete button visibility (owner only) updateDeleteButtonState: function() { const hasPhotos = this.state.photos.length > 0; $('#profile-delete-photo').toggle(hasPhotos); }, // Set current photo as default (owner only) setAsDefault: async function() { if (!this.isOwner) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; // Show loading state on button const $btn = $('#profile-set-as-default'); const originalText = $btn.text(); $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Setting...'); try { const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/current-photo/profile`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` }, body: JSON.stringify({ media_id: currentPhoto.id }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Update local state this.state.photos.forEach(p => p.is_default = false); currentPhoto.is_default = true; this.state.currentDefaultId = currentPhoto.id; // Update UI this.renderThumbnails(); this.updateDefaultButtonState(); // Update the main profile photo if visible const $mainProfileImg = $('#profile-headshot, .img-thumbnail'); if ($mainProfileImg.length && currentPhoto.variants) { // Prioritize cropped variants const newSrc = currentPhoto.variants.medium_cropped?.url || currentPhoto.variants.large_cropped?.url || currentPhoto.variants.small_cropped?.url || currentPhoto.variants.medium?.url || currentPhoto.variants.small?.url || currentPhoto.original_url; $mainProfileImg.attr('src', newSrc); } // Show success message this.showSuccessMessage('Profile photo updated successfully'); } catch (error) { this.showSuccessMessage('Failed to update profile photo. Please try again.'); } finally { // Restore button state $btn.prop('disabled', false).text(originalText); } }, // Delete current photo (owner only) deleteCurrentPhoto: function() { if (!this.isOwner) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; const isDefault = currentPhoto.id === this.state.currentDefaultId; // Store deletion info this.state.pendingDeletion = { photoId: currentPhoto.id, mediaId: currentPhoto.id, isDefault: isDefault }; // Update confirmation message const message = isDefault ? "Are you sure you want to delete this photo? Since this is your current default photo, a new one will be selected automatically." : "Are you sure you want to delete this photo? This action cannot be undone."; $('#profile-delete-confirmation-message').text(message); $('#profile-delete-warning-message').toggle(isDefault); // Show confirmation modal $('#profile-delete-confirmation-modal').modal('show'); }, // Execute delete action executeDelete: async function() { if (!this.isOwner || !this.state.pendingDeletion) return; const { mediaId, photoId, isDefault } = this.state.pendingDeletion; // Show loading state on button const $btn = $('#profile-confirm-delete-btn'); const originalText = $btn.html(); $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Deleting...'); try { const response = await fetch( `${this.config.apiBaseUrl}/users/${this.userSlug}/media/${mediaId}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${this.authToken}`, 'Accept': 'application/json' } } ); if (response.status === 204) { // Success - close modal $('#profile-delete-confirmation-modal').modal('hide'); // Remove photo from state const deletedIndex = this.state.photos.findIndex(p => p.id === photoId); if (deletedIndex === -1) return; this.state.photos.splice(deletedIndex, 1); // Handle empty state if (this.state.photos.length === 0) { // Clear the main image before showing empty state $('#profile-gallery-main-image').attr('src', '').hide(); this.showEmptyState(); // Update main profile to show placeholder $('#profile-headshot, .img-thumbnail').attr('src', 'https://stage32.sfo2.cdn.digitaloceanspaces.com/ui/assets/Profile%20Default%20-%20640x640.webp'); ToastNotification.success('Photo deleted successfully'); return; } // If deleted photo was default, set new default if (isDefault && this.state.photos.length > 0) { const newDefault = this.state.photos[0]; this.state.currentDefaultId = newDefault.id; // Mark it in our local state this.state.photos.forEach(p => p.is_default = p.id === newDefault.id); // Auto-set as default via API this.setAsDefaultById(newDefault.id, true); } // Adjust current index if needed if (this.state.currentIndex >= this.state.photos.length) { this.state.currentIndex = this.state.photos.length - 1; } else if (deletedIndex < this.state.currentIndex) { this.state.currentIndex--; } // Re-render gallery this.renderGallery(); // Show success toast ToastNotification.success('Photo deleted successfully'); } else if (response.status === 403) { ToastNotification.error('You do not have permission to delete this photo'); } else if (response.status === 404) { ToastNotification.error('Photo not found or already deleted'); } else { ToastNotification.error('Failed to delete photo. Please try again.'); } } catch (error) { ToastNotification.error('Network error. Please check your connection and try again.'); } finally { // Restore button state $btn.prop('disabled', false).html(originalText); this.state.pendingDeletion = null; } }, // Helper method to set a specific photo as default (for auto-selection after deletion) setAsDefaultById: async function(photoId, silent = false) { if (!this.isOwner) return; try { const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/current-photo/profile`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` }, body: JSON.stringify({ media_id: photoId }) }); if (response.ok) { // Update the main profile photo if visible const photo = this.state.photos.find(p => p.id === photoId); if (photo) { const $mainProfileImg = $('#profile-headshot, .img-thumbnail'); if ($mainProfileImg.length) { const newSrc = photo.variants.medium_cropped?.url || photo.variants.large_cropped?.url || photo.variants.medium?.url || photo.original_url; $mainProfileImg.attr('src', newSrc); } } if (!silent) { ToastNotification.info('New default photo set automatically'); } } } catch (error) { } }, // Trigger file upload (owner only) triggerFileUpload: function() { if (!this.isOwner) return; document.getElementById('profile-photo-upload-input').click(); }, // Handle file selection (owner only) handleFileSelect: function(event) { if (!this.isOwner) return; const file = event.target.files[0]; if (!file) { return; } // Validate file if (!this.validateFile(file)) { return; } this.state.selectedFile = file; this.showCroppingInterface(file); }, // Validate file validateFile: function(file) { // Check file type const extension = file.name.split('.').pop().toLowerCase(); if (!this.config.allowedFormats.includes(extension)) { ToastNotification.error(`Please select a valid image file. Allowed formats: ${this.config.allowedFormats.join(', ')}`); return false; } // Check file size const sizeMB = file.size / (1024 * 1024); if (sizeMB > this.config.maxFileSizeMB) { ToastNotification.error(`File size exceeds ${this.config.maxFileSizeMB}MB limit`); return false; } return true; }, // Show cropping interface (owner only) showCroppingInterface: function(file) { if (!this.isOwner) return; const reader = new FileReader(); reader.onload = (e) => { this.hideAllStates(); $('#profile-photo-cropping-container').show(); const $img = $('#profile-cropping-image'); $img.attr('src', e.target.result); // Initialize cropper after image loads and is visible $img.off('load').on('load', () => { // Small delay to ensure DOM is ready setTimeout(() => { this.initializeCropper(); }, 100); }); // If image is already loaded (from cache), trigger load event if ($img[0].complete && $img[0].naturalHeight !== 0) { $img.trigger('load'); } }; reader.readAsDataURL(file); }, // Initialize cropper initializeCropper: function() { const image = document.getElementById('profile-cropping-image'); if (window.ImageCropper) { this.state.cropperInstance = ImageCropper.init(image, { aspectRatio: this.config.aspectRatio, // 1:1 for profile photos minWidth: 100, minHeight: 100 }); } }, // Cancel cropping cancelCropping: function() { this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#profile-photo-upload-input').val(''); $('#profile-upload-caption-textarea').val(''); this.renderGallery(); }, // Proceed to caption input after cropping proceedToCaption: function() { if (!this.isOwner) return; // Store crop data for later use if (this.state.cropperInstance && window.ImageCropper) { this.state.cropData = ImageCropper.getCropData(); } // Hide cropping, show caption input $('#profile-photo-cropping-container').hide(); $('#profile-photo-caption-input-container').show(); // Reset caption input $('#profile-upload-caption-textarea').val(''); $('#profile-upload-caption-char-count').text('0/500'); // Focus caption textarea $('#profile-upload-caption-textarea').focus(); }, // Go back to cropping from caption input backToCropping: function() { $('#profile-photo-caption-input-container').hide(); $('#profile-photo-cropping-container').show(); }, // Skip caption and upload skipCaption: function() { this.state.uploadCaption = ''; this.applyCropWithCaption(); }, // Apply crop with caption applyCropWithCaption: function() { if (!this.isOwner) return; // Get caption from textarea this.state.uploadCaption = $('#profile-upload-caption-textarea').val().trim(); // Proceed with upload this.applyCrop(); }, // Apply crop (owner only) applyCrop: async function() { if (!this.isOwner) return; // Show loading state this.showLoadingState(); // Show info toast about upload if (window.ToastNotification) { ToastNotification.info('Uploading your profile photo. This may take a moment...'); } try { // Create form data for upload const formData = new FormData(); // Check if we have a cropper instance and can get cropped image if (this.state.cropperInstance && window.ImageCropper) { // Get the cropped image as a blob using stored crop data const getCroppedBlob = () => { return new Promise((resolve, reject) => { try { // Use the stored crop data - we saved it in proceedToCaption const cropData = this.state.cropData; if (!cropData) { reject(new Error('No crop data stored')); return; } // Create a new image element to ensure it's loaded const img = new Image(); img.onload = function() { try { // Create canvas and draw the cropped area const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set output dimensions canvas.width = 500; canvas.height = 500; // Fill with white background ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw the cropped portion of the image ctx.drawImage( img, cropData.x || 0, cropData.y || 0, cropData.width || img.width, cropData.height || img.height, 0, 0, canvas.width, canvas.height ); // Convert canvas to blob canvas.toBlob((blob) => { if (blob) { resolve(blob); } else { reject(new Error('Failed to convert canvas to blob')); } }, 'image/jpeg', 0.9); } catch (drawError) { reject(drawError); } }; img.onerror = function() { reject(new Error('Failed to load image')); }; // Load the original file const reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; }; reader.readAsDataURL(this.state.selectedFile); } catch (err) { reject(err); } }); }; let croppedBlob; try { croppedBlob = await getCroppedBlob(); } catch (blobError) { // Fall back to single file upload formData.append('file', this.state.selectedFile); formData.append('collection_name', 'profile'); formData.append('name', 'Profile Photo'); if (this.state.uploadCaption) { formData.append('caption', this.state.uploadCaption); } // Ensure loading state is visible this.showLoadingState(); // Continue with upload - skip the rest of the dual-variant code const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media`, { method: 'POST', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` }, body: formData }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Process result and continue with the rest of the function const newPhoto = result.data; newPhoto.is_default = this.state.photos.length === 0; this.state.photos.push(newPhoto); if (newPhoto.is_default) { this.state.currentDefaultId = newPhoto.id; if (this.state.photos.length === 1) { this.setAsDefault(); } } // Clean up and finish this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#profile-photo-upload-input').val(''); $('#profile-upload-caption-textarea').val(''); this.state.currentIndex = this.state.photos.length - 1; // Update profile image if exists if (window.ProfileImage) { window.ProfileImage.src = newPhoto.variants.medium?.url || newPhoto.variants.small?.url || newPhoto.original_url; } // Show success and then render gallery with small delay this.showSuccessMessage('Profile photo uploaded successfully'); setTimeout(() => { this.renderGallery(); }, 500); return; } // Use dual-variant upload formData.append('file_uncropped', this.state.selectedFile); formData.append('file_cropped', croppedBlob, 'profile-cropped.jpg'); formData.append('collection_name', 'profile'); formData.append('name', 'Profile Photo'); } else { // Fallback to single file upload if no cropper formData.append('file', this.state.selectedFile); formData.append('collection_name', 'profile'); formData.append('name', 'Profile Photo'); } // Add caption if provided if (this.state.uploadCaption) { formData.append('caption', this.state.uploadCaption); } // Ensure loading state is still visible before upload this.showLoadingState(); // Upload the photo const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media`, { method: 'POST', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` }, body: formData }); if (!response.ok) { // Try to get error details from response let errorMessage = `HTTP error! status: ${response.status}`; try { const errorData = await response.json(); if (errorData.message) { errorMessage = errorData.message; } else if (errorData.errors) { // Laravel validation errors format const errors = Object.values(errorData.errors).flat(); errorMessage = errors.join(', '); } } catch (e) { // Response might not be JSON const errorText = await response.text(); } throw new Error(errorMessage); } const result = await response.json(); // Add the new photo to our state const newPhoto = result.data; newPhoto.is_default = this.state.photos.length === 0; this.state.photos.push(newPhoto); if (newPhoto.is_default) { this.state.currentDefaultId = newPhoto.id; // If this is the first photo, also set it as the current profile photo if (this.state.photos.length === 1) { this.setAsDefault(); } } // Clean up this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#profile-photo-upload-input').val(''); $('#profile-upload-caption-textarea').val(''); // Select the new photo this.state.currentIndex = this.state.photos.length - 1; // Update profile image if this is the default photo if (newPhoto.is_default && window.ProfileImage) { window.ProfileImage.src = newPhoto.variants.medium?.url || newPhoto.variants.small?.url || newPhoto.original_url; } // Show success message then render gallery with small delay this.showSuccessMessage('Profile photo uploaded successfully'); setTimeout(() => { this.renderGallery(); }, 500); } catch (error) { this.showSuccessMessage('Failed to upload photo. Please try again.'); this.renderGallery(); } }, // Destroy cropper destroyCropper: function() { if (this.state.cropperInstance && window.ImageCropper) { ImageCropper.destroy(); this.state.cropperInstance = null; } }, // Show success message showSuccessMessage: function(message) { // Use toast notification for non-intrusive feedback if (message.toLowerCase().includes('failed') || message.toLowerCase().includes('error')) { ToastNotification.error(message); } else { ToastNotification.success(message); } }, // Start editing caption startEditingCaption: function() { if (!this.isOwner || this.state.editingCaption) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; this.state.editingCaption = true; const captionToEdit = currentPhoto.caption || ''; this.state.originalCaption = currentPhoto.caption || ''; // Set textarea value and update character count $('#profile-caption-textarea').val(captionToEdit); $('#profile-caption-char-count').text(`${captionToEdit.length}/500`); // Switch to edit mode $('#profile-caption-view-mode').hide(); $('#profile-caption-edit-mode').show(); // Focus textarea and move cursor to end const textarea = $('#profile-caption-textarea')[0]; textarea.focus(); textarea.setSelectionRange(textarea.value.length, textarea.value.length); // Trigger edit start event this.triggerEvent(this.events.CAPTION_EDIT_START, { photoId: currentPhoto.id, currentCaption: captionToEdit, hasCaption: !!currentPhoto.caption }); }, // Save caption saveCaption: async function() { if (!this.isOwner || !this.state.editingCaption) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; const newCaption = $('#profile-caption-textarea').val(); const validatedCaption = this.validateCaption(newCaption); // Show saving state const $saveBtn = $('#profile-caption-save-btn'); const originalText = $saveBtn.text(); $saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...'); try { const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media/${currentPhoto.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${this.authToken}` }, body: JSON.stringify({ caption: validatedCaption }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Save to state with history if (this.saveCaptionToState(currentPhoto.id, validatedCaption)) { // Remove draft indicator $('#draft-indicator').remove(); // Update display this.state.editingCaption = false; $('#profile-caption-edit-mode').hide(); $('#profile-caption-view-mode').show(); // Update caption display this.updateCaption(currentPhoto); // Trigger caption saved event this.triggerEvent(this.events.CAPTION_SAVED, { photoId: currentPhoto.id, newCaption: validatedCaption, previousCaption: this.state.originalCaption, captionLength: validatedCaption.length }); this.showSuccessMessage('Caption saved successfully'); } } catch (error) { this.showSuccessMessage('Failed to save caption. Please try again.'); } finally { // Restore button state $saveBtn.prop('disabled', false).text(originalText); } }, // Cancel editing caption cancelEditingCaption: function() { if (!this.state.editingCaption) return; const currentPhoto = this.state.photos[this.state.currentIndex]; this.state.editingCaption = false; // Restore original caption $('#profile-caption-textarea').val(this.state.originalCaption); // Remove draft indicator $('#draft-indicator').remove(); // Switch back to view mode $('#profile-caption-edit-mode').hide(); $('#profile-caption-view-mode').show(); // Trigger cancel event if (currentPhoto) { this.triggerEvent(this.events.CAPTION_EDIT_CANCEL, { photoId: currentPhoto.id, cancelled: true }); } }, // Helper methods for state management hideAllStates: function() { $('#profile-photo-gallery-container').hide(); $('#profile-photo-cropping-container').hide(); $('#profile-photo-caption-input-container').hide(); $('#profile-gallery-loading').hide(); $('#profile-gallery-empty').hide(); }, showEmptyState: function() { this.hideAllStates(); $('#profile-gallery-empty').show(); }, showLoadingState: function() { this.hideAllStates(); $('#profile-gallery-loading').show(); }, // Event handling triggerEvent: function(eventType, data) { const event = new CustomEvent(eventType, { detail: { gallery: 'profile', timestamp: new Date().toISOString(), ...data } }); // Dispatch on the modal element $('#profile-photo-gallery-modal')[0].dispatchEvent(event); }, // Subscribe to events on: function(eventType, callback) { $('#profile-photo-gallery-modal')[0].addEventListener(eventType, callback); }, // Unsubscribe from events off: function(eventType, callback) { $('#profile-photo-gallery-modal')[0].removeEventListener(eventType, callback); }, // Caption validation and sanitization validateCaption: function(caption) { if (!caption || typeof caption !== 'string') { return ''; } // Trim whitespace caption = caption.trim(); // Check length if (caption.length > 500) { caption = caption.substring(0, 500); } return caption; }, // Sanitize caption for display (prevent XSS) sanitizeCaption: function(caption) { // jQuery's text() method handles HTML escaping return $('<div>').text(caption).html(); }, // Save caption to state with history saveCaptionToState: function(photoId, caption) { const photo = this.state.photos.find(p => p.id === photoId); if (!photo) return false; // Store previous caption in history if (!this.state.captionHistory[photoId]) { this.state.captionHistory[photoId] = []; } this.state.captionHistory[photoId].push(photo.caption || ''); // Update caption photo.caption = this.validateCaption(caption); return true; }, // Restore caption from history restoreCaptionFromHistory: function(photoId) { const history = this.state.captionHistory[photoId]; if (!history || history.length === 0) return null; const photo = this.state.photos.find(p => p.id === photoId); if (!photo) return null; // Pop the last caption from history const previousCaption = history.pop(); photo.caption = previousCaption; return previousCaption; } }; // Initialize when document is ready $(document).ready(function() { ProfilePhotoGallery.init(); }); })(); </script> <style> /* Profile Photo Gallery Styles - Dark Theme */ #profile-photo-gallery-modal .modal-fullscreen { min-width: 100vw; min-height: 100vh; margin: 0; max-width: 100%; } #profile-photo-gallery-modal .modal-content { min-height: 100vh; border: 0; border-radius: 0; } .profile-gallery-thumbnail { transition: all 0.2s ease; } .profile-gallery-thumbnail:hover { transform: scale(1.2); } .profile-gallery-thumbnail.active { transform: scale(1.1); } /* Delete button styling */ .gallery-delete-photo-btn:hover { background-color: #c82333 !important; /* Darker red on hover */ } .gallery-delete-photo-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Close button hover effect */ #profile-photo-gallery-modal .close:hover { opacity: 0.7; } /* Navigation button hover effects */ .gallery-nav-prev:hover, .gallery-nav-next:hover { background: rgba(0,0,0,0.9) !important; } /* Dark theme scrollbar */ .gallery-thumbnails { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .gallery-thumbnails::-webkit-scrollbar { height: 6px; } .gallery-thumbnails::-webkit-scrollbar-track { background: transparent; } .gallery-thumbnails::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } .gallery-thumbnails::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } /* Override Bootstrap modal backdrop */ .modal-backdrop.show { opacity: 0; } .gallery-thumbnail:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .gallery-thumbnail.active { transform: scale(1.05); } /* Caption scrollbar styling */ #profile-caption-display { scrollbar-width: thin; scrollbar-color: #ccc #f9f9f9; } #profile-caption-display::-webkit-scrollbar { width: 6px; } #profile-caption-display::-webkit-scrollbar-track { background: #f9f9f9; } #profile-caption-display::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } #profile-caption-display::-webkit-scrollbar-thumb:hover { background: #999; } /* Responsive styles for mobile */ @media (max-width: 768px) { /* Stack columns vertically on mobile */ #profile-photo-gallery-container { flex-direction: column !important; height: 100vh !important; } /* Make both columns full width */ #profile-photo-gallery-container .gallery-left-column, #profile-photo-gallery-container .gallery-right-column { width: 100% !important; } /* Adjust left column for mobile */ #profile-photo-gallery-container .gallery-left-column { padding: 60px 20px 20px 20px !important; flex: 0 0 auto !important; /* Size based on content */ display: flex !important; flex-direction: column !important; position: relative !important; min-height: 60vh !important; /* At least 60% height */ } /* Adjust right column for mobile - fill remaining space */ #profile-photo-gallery-container .gallery-right-column { padding: 20px !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.2) !important; flex: 1 1 auto !important; /* Fill remaining space */ min-height: 0 !important; /* Allow shrinking */ overflow-y: auto !important; /* Enable vertical scrolling */ overflow-x: hidden !important; } /* Adjust main image wrapper for mobile */ #profile-photo-gallery-container .gallery-main-image-wrapper { height: 40vh !important; /* Fixed height */ max-height: 40vh !important; margin-bottom: 10px !important; flex: 0 0 auto !important; overflow: hidden !important; position: relative !important; } /* Ensure image fits within wrapper */ #profile-gallery-main-image { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; max-width: 100% !important; max-height: 100% !important; } /* Smaller navigation buttons on mobile */ .gallery-nav-prev, .gallery-nav-next { padding: 10px 15px !important; font-size: 16px !important; } /* Adjust thumbnail size on mobile */ .profile-gallery-thumbnail { width: 35px !important; height: 35px !important; } /* Adjust gallery actions for mobile */ .gallery-actions { padding-top: 10px !important; flex: 0 0 auto !important; } /* Adjust thumbnails wrapper for mobile */ .gallery-thumbnails-wrapper { flex: 0 0 auto !important; overflow: hidden !important; } /* Adjust modal header for mobile */ #profile-photo-gallery-modal .modal-content > div:first-child { height: 40px !important; padding: 5px 15px !important; } /* Smaller logo on mobile */ #profile-photo-gallery-modal .modal-content img[alt="Stage32"] { height: 24px !important; } } /* Desktop styles - ensure right column has minimum width */ @media (min-width: 769px) { #profile-photo-gallery-container .gallery-right-column { min-width: 275px !important; } /* Adjust left column width when right column needs more space */ #profile-photo-gallery-container { display: flex !important; } #profile-photo-gallery-container .gallery-left-column { flex: 1 1 auto !important; width: calc(100% - 275px) !important; min-width: 0 !important; /* Allow column to shrink */ overflow: hidden !important; } #profile-photo-gallery-container .gallery-right-column { flex: 0 0 275px !important; width: 275px !important; } /* Ensure main image scales down properly */ #profile-photo-gallery-container .gallery-main-image-wrapper { width: 100% !important; overflow: hidden !important; } } /* Ensure scrollability for caption area */ .gallery-right-column { overflow-y: auto !important; overflow-x: hidden !important; } /* Dark theme scrollbar for right column */ .gallery-right-column { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.05); } .gallery-right-column::-webkit-scrollbar { width: 6px; } .gallery-right-column::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } .gallery-right-column::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } .gallery-right-column::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } </style>   <div id="toast-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: none;">  </div> <style> /* Toast Notification Styles */ .toast-notification { min-width: 350px; max-width: 450px; margin-top: 10px; padding: 8px; background: #2d2d2d; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(100%); transition: all 0.3s ease; pointer-events: auto; display: flex; align-items: stretch; overflow: hidden; } .toast-notification.show { opacity: 1; transform: translateY(0); display: flex !important; /* Override any Bootstrap .show styles */ gap: 16px; align-items: center; } .toast-notification.hiding { opacity: 0; transform: translateY(100%); } /* Toast types - dark theme */ .toast-notification.success { background: #232C21; } .toast-notification.error { background: #341715; } .toast-notification.info { background: #11273B; } .toast-notification.warning { background: #2A2718; } /* Toast icon container */ .toast-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: white; border-radius: 4px; } .toast-notification.success .toast-icon { background: #2FD159; } .toast-notification.error .toast-icon { background: #D43236; } .toast-notification.info .toast-icon { background: #0790FB; } .toast-notification.warning .toast-icon { background: #FEA00C; } /* Toast content */ .toast-content { flex: 1; display: flex; align-items: center; color: #ffffff; } .toast-title { font-weight: 600; margin-bottom: 4px; color: #ffffff; } .toast-message { font-size: 14px; line-height: 1.4; color: #ffffff; margin: 0; } /* Close button */ .toast-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; flex-shrink: 0; padding: 0 8px; margin: 0; color: #ffffff; display: flex; align-items: flex-start; } .toast-close:hover { opacity: 1; } /* Progress bar */ .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 0 0 8px 8px; transition: width linear; } /* Ensure dark theme in modals */ .modal .toast-notification { background: rgba(45, 45, 45, 0.95); } /* Mobile responsive */ @media (max-width: 768px) { #toast-container { left: 10px; right: 10px; bottom: 10px; } .toast-notification { min-width: auto; max-width: 100%; } } </style> <script> // Toast Notification System window.ToastNotification = { // Configuration config: { defaultDuration: 5000, // 5 seconds animationDuration: 300, maxToasts: 3 // Maximum number of toasts to show at once }, // Initialize the toast system init: function() { // Ensure container exists if (!document.getElementById('toast-container')) { const container = document.createElement('div'); container.id = 'toast-container'; container.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: none;'; document.body.appendChild(container); } }, /** * Show a toast notification * @param {string} message - The message to display * @param {string} type - Type of toast: 'success', 'error', 'info', 'warning' (default: 'info') * @param {number} duration - Duration in milliseconds (default: 5000) * @param {string} title - Optional title for the toast */ show: function(message, type = 'info', duration = null, title = null) { this.init(); const container = document.getElementById('toast-container'); const toastId = 'toast-' + Date.now(); duration = duration !== null ? duration : this.config.defaultDuration; // Create toast element const toast = document.createElement('div'); toast.id = toastId; toast.className = `toast-notification ${type}`; toast.style.position = 'relative'; // Icons for different types const icons = { success: '<i class="fa fa-check"></i>', error: '<i class="fa fa-ban"></i>', info: '<i class="fa fa-info"></i>', warning: '<i class="fa fa-exclamation-triangle"></i>' }; // Build toast HTML toast.innerHTML = ` <div class="toast-icon">${icons[type] || icons.info}</div> <div class="toast-content"> <div> ${title ? `<div class="toast-title">${this.escapeHtml(title)}</div>` : ''} <div class="toast-message">${this.escapeHtml(message)}</div> </div> </div> <button class="toast-close" onclick="ToastNotification.dismiss('${toastId}')">×</button> ${duration > 0 ? `<div class="toast-progress" style="width: 100%; transition: width ${duration}ms linear;"></div>` : ''} `; // Remove oldest toast if we're at the limit const existingToasts = container.querySelectorAll('.toast-notification'); if (existingToasts.length >= this.config.maxToasts) { this.dismiss(existingToasts[0].id); } // Add to container (prepend so newer toasts appear at bottom) container.insertBefore(toast, container.firstChild); // Trigger animation setTimeout(() => { toast.classList.add('show'); }, 10); // Auto-dismiss if duration is set if (duration > 0) { // Start progress bar animation setTimeout(() => { const progressBar = toast.querySelector('.toast-progress'); if (progressBar) { progressBar.style.width = '0%'; } }, 100); // Set auto-dismiss timer toast.dismissTimer = setTimeout(() => { this.dismiss(toastId); }, duration); } return toastId; }, /** * Dismiss a specific toast * @param {string} toastId - The ID of the toast to dismiss */ dismiss: function(toastId) { const toast = document.getElementById(toastId); if (!toast) return; // Clear auto-dismiss timer if exists if (toast.dismissTimer) { clearTimeout(toast.dismissTimer); } // Add hiding class toast.classList.add('hiding'); toast.classList.remove('show'); // Remove after animation setTimeout(() => { if (toast.parentNode) { toast.parentNode.removeChild(toast); } }, this.config.animationDuration); }, /** * Show a success toast */ success: function(message, duration = null, title = null) { return this.show(message, 'success', duration, title); }, /** * Show an error toast */ error: function(message, duration = null, title = null) { return this.show(message, 'error', duration, title); }, /** * Show an info toast */ info: function(message, duration = null, title = null) { return this.show(message, 'info', duration, title); }, /** * Show a warning toast */ warning: function(message, duration = null, title = null) { return this.show(message, 'warning', duration, title); }, /** * Clear all toasts */ clearAll: function() { const container = document.getElementById('toast-container'); if (!container) return; const toasts = container.querySelectorAll('.toast-notification'); toasts.forEach(toast => { this.dismiss(toast.id); }); }, /** * Escape HTML to prevent XSS */ escapeHtml: function(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } }; // Initialize on DOM ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { ToastNotification.init(); }); } else { ToastNotification.init(); } </script>  <div class="modal fade" id="cover-photo-gallery-modal" tabindex="-1" role="dialog" aria-labelledby="coverPhotoGalleryModalLabel"> <div class="modal-dialog modal-fullscreen" role="document"> <div class="modal-content" style="background-color: rgba(0, 0, 0, 1); height: 100vh;">  <div style="position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 1060; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;">  <img src="https://www.stage32.com/sites/stage32.com/themes/two/images/stage32_logo.svg" alt="Stage32" style="height: 30px; width: auto;">  <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 1; color: white; font-size: 24px; font-weight: 300; text-shadow: none; background: none; border: none; transition: opacity 0.3s ease; padding: 0; line-height: 1;"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" style="padding: 0; height: 100vh; overflow: hidden;">  <div id="cover-photo-gallery-container" style="display: flex; height: 100vh;">  <div class="gallery-left-column" style="width: 75%; padding: 50px 20px 40px 20px; display: flex; flex-direction: column; align-items: center;">  <div class="gallery-main-image-wrapper" style="position: relative; width: 100%; max-height: 100vh; margin-bottom: 20px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; width: 100%; height: 100%; background-color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center;"> <img id="cover-gallery-main-image" src="" alt="Cover Photo" style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: none;">  <button type="button" class="gallery-nav-prev" id="cover-gallery-prev" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: white; border: none; padding: 15px 20px; border-radius: 4px; cursor: pointer; z-index: 10; font-size: 18px;"> <i class="fa fa-chevron-left"></i> </button> <button type="button" class="gallery-nav-next" id="cover-gallery-next" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: white; border: none; padding: 15px 20px; border-radius: 4px; cursor: pointer; z-index: 10; font-size: 18px;"> <i class="fa fa-chevron-right"></i> </button> </div> </div>  <div class="gallery-thumbnails-wrapper" style="flex-shrink: 0; max-width: 100%;"> <div id="cover-gallery-thumbnails" class="gallery-thumbnails" style="display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 10px 10px 20px 10px; justify-content: flex-start;">  </div> </div>  </div>  <div class="gallery-right-column" style="width: 25%; background-color: rgba(255,255,255,0.05); border-left: 1px solid rgba(255,255,255,0.2); padding: 50px 30px 40px 30px; overflow-y: auto;">  <div id="cover-caption-container" style="display: none;">  <div id="cover-caption-view-mode" style="position: relative;"> <div id="cover-caption-display" style="background-color: rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.6; max-height: 300px; overflow-y: auto;">  </div> </div>  <div id="cover-caption-edit-mode" style="display: none;"> <textarea id="cover-caption-textarea" style="width: 100%; min-height: 150px; max-height: 300px; padding: 15px; font-size: 14px; line-height: 1.6; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.5); color: white; border-radius: 8px; resize: vertical;" maxlength="500" placeholder="Add a caption to your photo..."></textarea> <div style="margin-top: 10px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"> <span id="cover-caption-char-count" style="font-size: 12px; color: rgba(255,255,255,0.6);">0/500</span> </div> <div style="display: flex; gap: 10px;"> <button type="button" id="cover-caption-cancel-btn" style="flex: 1; background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 8px 16px; font-size: 14px;"> Cancel </button> <button type="button" id="cover-caption-save-btn" style="flex: 1; background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 8px 16px; font-size: 14px;"> Save </button> </div> </div> </div> </div>  <div style="margin-top: 40px;">  </div> </div>  <input type="file" id="cover-photo-upload-input" accept="image/jpeg,image/jpg,image/png,image/webp" style="display: none;" onchange="CoverPhotoGallery.handleFileSelect(event)"> </div>  <div id="cover-photo-cropping-container" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); z-index: 1050;"> <div style="width: 75%; margin: 0 auto; padding: 40px; height: 100vh; display: flex; flex-direction: column; justify-content: center;"> <div class="cropping-instructions" style="margin-bottom: 20px; text-align: center;"> <h3 style="color: white; margin-bottom: 10px;">Crop Your Cover Photo</h3> <p style="color: rgba(255,255,255,0.7);">Drag and resize the box to crop your cover photo. Cover photos should have a 3.4:1 aspect ratio for best display.</p> </div> <div class="cropping-image-wrapper" style="text-align: center; margin-bottom: 30px;"> <img id="cover-cropping-image" src="" alt="Image to crop" style="max-width: 100%; max-height: 60vh; display: inline-block;"> </div> <div class="cropping-actions" style="display: flex; justify-content: center; gap: 16px;"> <button type="button" id="cover-crop-cancel" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Cancel </button> <button type="button" id="cover-crop-apply" style="background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Next </button> </div> </div> </div>  <div id="cover-photo-caption-input-container" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); z-index: 1050;"> <div style="width: 50%; margin: 0 auto; padding: 40px; height: 100vh; display: flex; flex-direction: column; justify-content: center;"> <div class="caption-input-instructions" style="margin-bottom: 30px; text-align: center;"> <h3 style="color: white; margin-bottom: 10px;">Add a Caption (Optional)</h3> <p style="color: rgba(255,255,255,0.7);">Add a caption to describe your cover photo</p> </div> <div style="max-width: 600px; margin: 0 auto; width: 100%;"> <textarea id="cover-upload-caption-textarea" style="width: 100%; min-height: 150px; max-height: 300px; padding: 15px; font-size: 16px; line-height: 1.6; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.5); color: white; border-radius: 8px; resize: vertical;" maxlength="500" placeholder="Enter a caption for your photo..."></textarea> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;"> <span id="cover-upload-caption-char-count" style="font-size: 14px; color: rgba(255,255,255,0.6);">0/500</span> </div> </div> <div class="caption-input-actions" style="display: flex; justify-content: center; gap: 16px; margin-top: 30px;"> <button type="button" id="cover-caption-input-back" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Back </button> <button type="button" id="cover-caption-input-skip" style="background-color: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Skip </button> <button type="button" id="cover-caption-input-save" style="background-color: rgba(255,255,255,0.9); border: none; color: #323232; border-radius: 4px; padding: 10px 30px; font-size: 16px;"> Upload </button> </div> </div> </div>  <div id="cover-gallery-loading" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,1); z-index: 1040;"> <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column;"> <i class="fa fa-spinner fa-spin fa-3x" style="color: white;"></i> <p style="margin-top: 20px; color: rgba(255,255,255,0.7); font-size: 18px;">Loading...</p> </div> </div>  <div id="cover-gallery-empty" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,1); z-index: 1040;"> <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column;"> <i class="fa fa-image fa-3x" style="color: rgba(255,255,255,0.5);"></i> <p style="margin-top: 20px; color: rgba(255,255,255,0.5); font-size: 18px;">No cover photos available</p> </div> </div> </div> </div> </div> </div>  <div class="modal fade" id="cover-delete-confirmation-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content" style="background-color: #323232; max-width: 400px; border-radius: 16px; margin: auto;"> <div style="border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px; display: flex; justify-content: space-between; align-items: center;"> <h5 class="modal-title" style="color: white; margin: 0;"> <i class="fa fa-exclamation-triangle" style="color: #ffc107;"></i> Confirm Photo Deletion </h5> <button type="button" class="close" data-dismiss="modal" style="color: white; opacity: 1; font-size: 24px; background: none; border: none; padding: 0;"> <span>×</span> </button> </div> <div class="modal-body" style="color: rgba(255,255,255,0.9);"> <p id="cover-delete-confirmation-message"> Are you sure you want to delete this photo? This action cannot be undone. </p> </div> <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);"> <button type="button" class="btn btn-secondary" data-dismiss="modal" style="color: #323232;"> Cancel </button> <button type="button" id="cover-confirm-delete-btn" class="btn btn-danger"> Delete Photo </button> </div> </div> </div> </div>  <script> (function() { 'use strict'; // Cover Photo Gallery Manager window.CoverPhotoGallery = { // Configuration config: { apiBaseUrl: 'https://backend.stage32.com/api/v2', collectionType: 'cover', aspectRatio: 3.4, // 3.4:1 for cover photos maxFileSizeMB: 10, allowedFormats: ['jpg', 'jpeg', 'png', 'webp'] }, // Event types events: { CAPTION_EDIT_START: 'caption:edit:start', CAPTION_EDIT_CANCEL: 'caption:edit:cancel', CAPTION_SAVED: 'caption:saved', CAPTION_DRAFT_CREATED: 'caption:draft:created', CAPTION_DRAFT_RESTORED: 'caption:draft:restored', CAPTION_VALIDATED: 'caption:validated', PHOTO_CHANGED: 'photo:changed', GALLERY_CLOSED: 'gallery:closed' }, // State management state: { photos: [], currentIndex: 0, currentDefaultId: null, isLoading: false, cropperInstance: null, selectedFile: null, editingCaption: false, originalCaption: '', uploadCaption: '', cropData: null, captionHistory: {}, // Track caption history for undo functionality pendingDeletion: null, // Track photo pending deletion photosLoaded: false, // Track if photos have been loaded from API dependenciesReady: false // Track if dependencies are ready }, // Initialize the gallery init: function() { this.isOwner = false; // Get user slug and auth token from single source of truth this.userSlug = window._phpVars?.profile_slug; this.authToken = window._phpVars?.bearer_token; this.state.dependenciesReady = true; this.bindEvents(); }, // Bind events bindEvents: function() { // Set up modal cleanup on hide $('#cover-photo-gallery-modal').on('hide.bs.modal hidden.bs.modal', (e) => { // Always reset file input when modal closes $('#cover-photo-upload-input').val(''); // Check if we're in cropping mode if (this.state.cropperInstance) { this.destroyCropper(); this.state.selectedFile = null; this.renderGallery(); } }); // Modal open trigger - will be triggered from carousel click // Gallery navigation $('#cover-gallery-prev').on('click', () => this.navigatePrev()); $('#cover-gallery-next').on('click', () => this.navigateNext()); // Thumbnail clicks $(document).on('click', '.cover-gallery-thumbnail', function() { const index = $(this).data('index'); CoverPhotoGallery.selectPhoto(index); }); // Owner-only event handlers if (this.isOwner) { // Set as default button (hidden for cover photos) $('#cover-set-as-default').on('click', () => this.setAsDefault()); // Delete photo button $('#cover-delete-photo').on('click', () => this.deleteCurrentPhoto()); // Delete confirmation button $('#cover-confirm-delete-btn').on('click', () => this.executeDelete()); // File input change is now handled inline in the HTML // Cropping actions $('#cover-crop-cancel').on('click', () => this.cancelCropping()); $('#cover-crop-apply').on('click', () => this.proceedToCaption()); // Caption input actions $('#cover-caption-input-back').on('click', () => this.backToCropping()); $('#cover-caption-input-skip').on('click', () => this.skipCaption()); $('#cover-caption-input-save').on('click', () => this.applyCropWithCaption()); // Character count for upload caption $('#cover-upload-caption-textarea').on('input', function() { const length = $(this).val().length; $('#cover-upload-caption-char-count').text(`${length}/500`); }); // Caption editing $('#cover-caption-edit-btn').on('click', () => this.startEditingCaption()); $('#cover-caption-save-btn').on('click', () => this.saveCaption()); $('#cover-caption-cancel-btn').on('click', () => this.cancelEditingCaption()); // Character count and auto-save draft $('#cover-caption-textarea').on('input', function() { const length = $(this).val().length; $('#cover-caption-char-count').text(`${length}/500`); }); // Show edit button on hover (only in view mode) $('#cover-caption-view-mode').on('mouseenter', function() { if (!CoverPhotoGallery.state.editingCaption) { $('#cover-caption-edit-btn').fadeIn(200); } }).on('mouseleave', function() { $('#cover-caption-edit-btn').fadeOut(200); }); } // Keyboard navigation and shortcuts $('#cover-photo-gallery-modal').on('keydown', (e) => { // Navigation if (e.key === 'ArrowLeft' && !this.state.editingCaption) { e.preventDefault(); this.navigatePrev(); } if (e.key === 'ArrowRight' && !this.state.editingCaption) { e.preventDefault(); this.navigateNext(); } // Caption editing shortcuts (owner only) if (this.isOwner) { // Ctrl/Cmd + E to edit caption if ((e.ctrlKey || e.metaKey) && e.key === 'e' && !this.state.editingCaption) { e.preventDefault(); this.startEditingCaption(); } // Escape to cancel editing if (e.key === 'Escape' && this.state.editingCaption) { e.preventDefault(); this.cancelEditingCaption(); } // Ctrl/Cmd + Enter to save caption if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && this.state.editingCaption) { e.preventDefault(); this.saveCaption(); } } }); }, // Load photos from API loadPhotosFromAPI: async function() { if (!this.userSlug) { this.state.photos = []; this.renderGallery(); return; } this.showLoadingState(); try { const url = `${this.config.apiBaseUrl}/users/${this.userSlug}/media?collection_name=cover`; const headers = { 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } const response = await fetch(url, { method: 'GET', headers: headers }); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Process the API response this.state.photos = result.data || []; // Log current cover photo info const currentPhotoId = window._jsCurrentCoverPhotoId || window._jsProfileData?.current_cover_photo_id || window.BACKEND_TEST_DATA?.current_cover_photo_id; // Find the current default photo if (this.state.photos.length > 0) { // First check if any photo has is_default flag from API const defaultFromAPI = this.state.photos.find(p => p.is_default === true); if (defaultFromAPI) { // if the default photo is found, set the current default id to the id of the default photo this.state.currentDefaultId = defaultFromAPI.id; } else if (currentPhotoId) { const defaultPhoto = this.state.photos.find(p => p.id === currentPhotoId); if (defaultPhoto) { // if the current photo id is found, set the current default id to the id of the current photo this.state.currentDefaultId = defaultPhoto.id; // Mark it in our local state this.state.photos.forEach(p => p.is_default = p.id === currentPhotoId); } } else { // Mark first photo as default if none is set (cover photos don't have is_default in API) this.state.photos[0].is_default = true; this.state.currentDefaultId = this.state.photos[0].id; } } this.renderGallery(); } catch (error) { // Show empty state on error this.state.photos = []; this.renderGallery(); } }, // Open the modal openModal: function() { // Step 1: Use carousel photos for immediate display if available let hasInitialPhotos = false; if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.state && window.CoverPhotoCarousel.state.photos && window.CoverPhotoCarousel.state.photos.length > 0) { this.state.photos = [...window.CoverPhotoCarousel.state.photos]; hasInitialPhotos = true; // Get dependencies from carousel if not already set if (!this.userSlug && window.CoverPhotoCarousel.apiEndpoint) { // Extract user slug from carousel's API endpoint const match = window.CoverPhotoCarousel.apiEndpoint.match(/users\/([^\/]+)\/media/); if (match) { this.userSlug = match[1]; } } if (!this.authToken && window.CoverPhotoCarousel.authToken) { this.authToken = window.CoverPhotoCarousel.authToken; } } // Step 2: Verify we have user slug for API call if (!this.userSlug) { ToastNotification.error('Unable to load photos. Please refresh the page.', 6000); return; } // Step 3: Show modal with initial photos (if any) or show loading if (hasInitialPhotos) { this.renderGallery(); try { const $modal = $('#cover-photo-gallery-modal'); $modal.modal('show'); } catch (error) { return; } } else if (this.isOwner) { // Show modal for owner even without photos (they can add) this.showEmptyState(); try { const $modal = $('#cover-photo-gallery-modal'); $modal.modal('show'); } catch (error) { return; } } else { // Show loading state for non-owners while we fetch this.showLoadingState(); try { const $modal = $('#cover-photo-gallery-modal'); $modal.modal('show'); } catch (error) { return; } } // Step 4: Always make fresh API call to get latest data (async) const previousPhotoCount = this.state.photos.length; const previousPhotoIds = this.state.photos.map(p => p.id).join(','); // Make the API call asynchronously this.loadPhotosFromAPI().then(() => { // Check if photos changed after API call completes const newPhotoIds = this.state.photos.map(p => p.id).join(','); const photosChanged = previousPhotoIds !== newPhotoIds || previousPhotoCount !== this.state.photos.length; if (photosChanged) { this.renderGallery(); } else { // Still render if we were showing loading/empty state if (!hasInitialPhotos) { this.renderGallery(); } } }).catch(error => { // If we had no initial photos and API failed, show empty state if (!hasInitialPhotos) { this.showEmptyState(); } }); }, // Render the gallery renderGallery: function() { if (this.state.photos.length === 0) { this.showEmptyState(); return; } this.hideAllStates(); $('#cover-photo-gallery-container').show(); // Render main image this.updateMainImage(); // Render thumbnails this.renderThumbnails(); // Update navigation state this.updateNavigationState(); // Update default button state (only for owner) if (this.isOwner) { this.updateDefaultButtonState(); this.updateDeleteButtonState(); } }, // Render thumbnails renderThumbnails: function() { const container = $('#cover-gallery-thumbnails'); container.empty(); // Add the "Add Photo" button as first thumbnail for owners if (this.isOwner) { const addPhotoThumbnail = $('<div>') .addClass('cover-add-photo-thumbnail') .css({ 'position': 'relative', 'cursor': 'pointer', 'border': '1px dashed rgba(255,255,255,0.5)', 'border-radius': '4px', 'width': '40px', 'height': '40px', 'flex-shrink': '0', 'background-color': 'rgba(255,255,255,0.1)', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center', 'transition': 'all 0.2s ease' }) .html('<i class="fa fa-plus" style="color: white; font-size: 16px;"></i>') .on('click', () => this.triggerFileUpload()) .on('mouseenter', function() { $(this).css({ 'background-color': 'rgba(255,255,255,0.2)', 'border-color': 'rgba(255,255,255,0.8)' }); }) .on('mouseleave', function() { $(this).css({ 'background-color': 'rgba(255,255,255,0.1)', 'border-color': 'rgba(255,255,255,0.5)' }); }); container.append(addPhotoThumbnail); } this.state.photos.forEach((photo, index) => { const isActive = index === this.state.currentIndex; const isDefault = photo.id === this.state.currentDefaultId; const thumbnail = $('<div>') .addClass('cover-gallery-thumbnail') .addClass(isActive ? 'active' : '') .attr('data-index', index) .css({ 'position': 'relative', 'cursor': 'pointer', 'border': '2px solid transparent', 'outline': isActive ? 'white solid 1px' : 'none', 'border-radius': '4px', 'width': '40px', 'height': '40px', 'flex-shrink': '0' }); const img = $('<img>') .attr('src', photo.variants.thumbnail?.url || photo.variants.small?.url || photo.original_url) .attr('alt', photo.name) .css({ 'width': '100%', 'height': '100%', 'object-fit': 'cover', 'border-radius': '4px' }); thumbnail.append(img); // Add default indicator (only for profile owner) if (isDefault && this.isOwner) { const defaultBadge = $('<span>') .css({ 'position': 'absolute', 'bottom': '-12px', 'left': '50%', 'transform': 'translateX(-50%)', 'background': 'white', 'color': 'rgb(50, 50, 50)', 'padding': '1px 4px', 'border-radius': '4px', 'font-size': '8px', 'font-weight': 'bold', 'white-space': 'nowrap', 'display': 'none' // Hide default badge in cover photo gallery }) .text('Default'); thumbnail.append(defaultBadge); } container.append(thumbnail); }); }, // Update main image updateMainImage: function() { const currentPhoto = this.state.photos[this.state.currentIndex]; if (currentPhoto) { const bestUrl = currentPhoto.variants.large?.url || currentPhoto.variants.medium?.url || currentPhoto.variants.original?.url || currentPhoto.original_url; $('#cover-gallery-main-image').attr('src', bestUrl).show(); // Update caption this.updateCaption(currentPhoto); } }, // Update caption display updateCaption: function(photo) { const captionContainer = $('#cover-caption-container'); const captionDisplay = $('#cover-caption-display'); const editBtn = $('#cover-caption-edit-btn'); const captionToDisplay = photo.caption; if (captionToDisplay && captionToDisplay.trim()) { // Use sanitization method const sanitizedCaption = this.sanitizeCaption(captionToDisplay); captionDisplay.html(sanitizedCaption); captionDisplay.css({ 'background-color': 'rgba(255,255,255,0.1)', 'color': 'rgba(255,255,255,0.9)' }); captionDisplay.css('border-left', 'none'); // Update edit button text if (this.isOwner) { editBtn.html('<i class="fa fa-pencil"></i> Edit'); } captionContainer.show(); } else if (this.isOwner) { // Show empty state with "Add Caption" for owners captionDisplay.html('<span style="font-style: italic; color: rgba(255,255,255,0.5);">No caption yet</span>'); captionDisplay.css({ 'background-color': 'rgba(255,255,255,0.05)', 'border': 'none', 'border-left': 'none' }); // Update edit button to say "Add Caption" editBtn.html('<i class="fa fa-plus"></i> Add Caption'); captionContainer.show(); } else { // Hide for non-owners when no caption captionContainer.hide(); } }, // Navigate to previous photo (with wrap around) navigatePrev: function() { if (this.state.photos.length === 0) return; if (this.state.currentIndex > 0) { this.selectPhoto(this.state.currentIndex - 1); } else { // Wrap around to last photo this.selectPhoto(this.state.photos.length - 1); } }, // Navigate to next photo (with wrap around) navigateNext: function() { if (this.state.photos.length === 0) return; if (this.state.currentIndex < this.state.photos.length - 1) { this.selectPhoto(this.state.currentIndex + 1); } else { // Wrap around to first photo this.selectPhoto(0); } }, // Select a specific photo selectPhoto: function(index) { // Cancel any active caption editing if (this.state.editingCaption) { this.cancelEditingCaption(); } this.state.currentIndex = index; this.updateMainImage(); this.updateThumbnailSelection(); this.updateNavigationState(); if (this.isOwner) { this.updateDefaultButtonState(); } }, // Update thumbnail selection updateThumbnailSelection: function() { $('.cover-gallery-thumbnail').removeClass('active').css({ 'border': '2px solid transparent', 'outline': 'none' }); $(`.cover-gallery-thumbnail[data-index="${this.state.currentIndex}"]`) .addClass('active') .css({ 'border': '2px solid transparent', 'outline': 'white solid 1px' }); }, // Update navigation state (always enabled with wrap-around) updateNavigationState: function() { // Enable both buttons if we have photos (wrap-around navigation) const hasPhotos = this.state.photos.length > 0; $('#cover-gallery-prev').prop('disabled', !hasPhotos); $('#cover-gallery-next').prop('disabled', !hasPhotos); }, // Update default button state (owner only) updateDefaultButtonState: function() { // Default button functionality commented out for cover photo gallery /* const currentPhoto = this.state.photos[this.state.currentIndex]; if (currentPhoto && currentPhoto.id !== this.state.currentDefaultId) { $('#cover-set-as-default').show(); } else { $('#cover-set-as-default').hide(); } */ $('#cover-set-as-default').hide(); // Always hide in cover photo gallery }, // Update delete button visibility (owner only) updateDeleteButtonState: function() { const hasPhotos = this.state.photos.length > 0; $('#cover-delete-photo').toggle(hasPhotos); }, // Set current photo as default (owner only) setAsDefault: async function() { if (!this.isOwner) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; // Show loading state on button const $btn = $('#cover-set-as-default'); const originalText = $btn.text(); $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Setting...'); try { const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/current-photo/cover`, { method: 'PATCH', headers: headers, body: JSON.stringify({ media_id: currentPhoto.id }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Update local state this.state.photos.forEach(p => p.is_default = false); currentPhoto.is_default = true; this.state.currentDefaultId = currentPhoto.id; // Update UI this.renderThumbnails(); this.updateDefaultButtonState(); // Update carousel if it exists - reload from API to stay in sync if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.loadPhotos) { window.CoverPhotoCarousel.loadPhotos(); } // Show success message this.showSuccessMessage('Cover photo updated successfully'); } catch (error) { this.showSuccessMessage('Failed to update cover photo. Please try again.'); } finally { // Restore button state $btn.prop('disabled', false).text(originalText); } }, // Delete current photo (owner only) deleteCurrentPhoto: function() { if (!this.isOwner) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; // Store deletion info this.state.pendingDeletion = { photoId: currentPhoto.id, mediaId: currentPhoto.id }; // Update confirmation message $('#cover-delete-confirmation-message').text( "Are you sure you want to delete this photo? This action cannot be undone." ); // Show confirmation modal $('#cover-delete-confirmation-modal').modal('show'); }, // Execute delete action executeDelete: async function() { if (!this.isOwner || !this.state.pendingDeletion) return; const { mediaId, photoId } = this.state.pendingDeletion; // Show loading state on button const $btn = $('#cover-confirm-delete-btn'); const originalText = $btn.html(); $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Deleting...'); try { const headers = { 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } const response = await fetch( `${this.config.apiBaseUrl}/users/${this.userSlug}/media/${mediaId}`, { method: 'DELETE', headers: headers } ); if (response.status === 204) { // Success - close modal $('#cover-delete-confirmation-modal').modal('hide'); // Remove photo from state const deletedIndex = this.state.photos.findIndex(p => p.id === photoId); if (deletedIndex === -1) return; this.state.photos.splice(deletedIndex, 1); // Handle empty state if (this.state.photos.length === 0) { this.showEmptyState(); // Update carousel on main page - reload from API to stay in sync if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.loadPhotos) { window.CoverPhotoCarousel.loadPhotos(); } ToastNotification.success('Photo deleted successfully'); return; } // Adjust current index if needed if (this.state.currentIndex >= this.state.photos.length) { this.state.currentIndex = this.state.photos.length - 1; } else if (deletedIndex < this.state.currentIndex) { this.state.currentIndex--; } // Update carousel on main page - reload from API to stay in sync if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.loadPhotos) { window.CoverPhotoCarousel.loadPhotos(); } // Re-render gallery this.renderGallery(); // Show success toast ToastNotification.success('Photo deleted successfully'); } else if (response.status === 403) { ToastNotification.error('You do not have permission to delete this photo'); } else if (response.status === 404) { ToastNotification.error('Photo not found or already deleted'); } else { ToastNotification.error('Failed to delete photo. Please try again.'); } } catch (error) { ToastNotification.error('Network error. Please check your connection and try again.'); } finally { // Restore button state $btn.prop('disabled', false).html(originalText); this.state.pendingDeletion = null; } }, // Trigger file upload (owner only) triggerFileUpload: function() { if (!this.isOwner) return; document.getElementById('cover-photo-upload-input').click(); }, // Handle file selection (owner only) handleFileSelect: function(event) { if (!this.isOwner) return; const file = event.target.files[0]; if (!file) { return; } // Validate file if (!this.validateFile(file)) { return; } this.state.selectedFile = file; this.showCroppingInterface(file); }, // Validate file validateFile: function(file) { // Check file type const extension = file.name.split('.').pop().toLowerCase(); if (!this.config.allowedFormats.includes(extension)) { ToastNotification.error(`Please select a valid image file. Allowed formats: ${this.config.allowedFormats.join(', ')}`); return false; } // Check file size const sizeMB = file.size / (1024 * 1024); if (sizeMB > this.config.maxFileSizeMB) { ToastNotification.error(`File size exceeds ${this.config.maxFileSizeMB}MB limit`); return false; } return true; }, // Show cropping interface (owner only) showCroppingInterface: function(file) { if (!this.isOwner) return; const reader = new FileReader(); reader.onload = (e) => { this.hideAllStates(); $('#cover-photo-cropping-container').show(); const $img = $('#cover-cropping-image'); $img.attr('src', e.target.result); // Initialize cropper after image loads and is visible $img.off('load').on('load', () => { // Small delay to ensure DOM is ready setTimeout(() => { this.initializeCropper(); }, 100); }); // If image is already loaded (from cache), trigger load event if ($img[0].complete && $img[0].naturalHeight !== 0) { $img.trigger('load'); } }; reader.readAsDataURL(file); }, // Initialize cropper initializeCropper: function() { const image = document.getElementById('cover-cropping-image'); if (!image) { return; } if (window.ImageCropper) { // Destroy any existing instance first if (this.state.cropperInstance) { this.destroyCropper(); } this.state.cropperInstance = ImageCropper.init(image, { aspectRatio: this.config.aspectRatio, // 3.4:1 for cover photos minWidth: 340, minHeight: 100, onCrop: (data) => { // Optional: Update UI with crop preview } }); } }, // Cancel cropping cancelCropping: function() { this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#cover-photo-upload-input').val(''); $('#cover-upload-caption-textarea').val(''); this.renderGallery(); }, // Proceed to caption input after cropping proceedToCaption: function() { if (!this.isOwner) return; // Store crop data for later use if (this.state.cropperInstance && window.ImageCropper) { this.state.cropData = ImageCropper.getCropData(); } // Hide cropping, show caption input $('#cover-photo-cropping-container').hide(); $('#cover-photo-caption-input-container').show(); // Reset caption input $('#cover-upload-caption-textarea').val(''); $('#cover-upload-caption-char-count').text('0/500'); // Focus caption textarea $('#cover-upload-caption-textarea').focus(); }, // Go back to cropping from caption input backToCropping: function() { $('#cover-photo-caption-input-container').hide(); $('#cover-photo-cropping-container').show(); }, // Skip caption and upload skipCaption: function() { this.state.uploadCaption = ''; this.applyCropWithCaption(); }, // Apply crop with caption applyCropWithCaption: function() { if (!this.isOwner) return; // Get caption from textarea this.state.uploadCaption = $('#cover-upload-caption-textarea').val().trim(); // Proceed with upload this.applyCrop(); }, // Apply crop (owner only) applyCrop: async function() { if (!this.isOwner) return; // Show loading state this.showLoadingState(); // Show info toast about upload if (window.ToastNotification) { ToastNotification.info('Uploading your cover photo. This may take a moment...'); } try { // Create form data for upload const formData = new FormData(); // Check if we have a cropper instance and can get cropped image if (this.state.cropperInstance && window.ImageCropper) { // Get the cropped image as a blob using stored crop data const getCroppedBlob = () => { return new Promise((resolve, reject) => { try { // Use the stored crop data - we saved it in proceedToCaption const cropData = this.state.cropData; if (!cropData) { reject(new Error('No crop data stored')); return; } // Create a new image element to ensure it's loaded const img = new Image(); img.onload = function() { try { // Create canvas and draw the cropped area const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set output dimensions canvas.width = 1700; canvas.height = 500; // Fill with white background ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw the cropped portion of the image ctx.drawImage( img, cropData.x || 0, cropData.y || 0, cropData.width || img.width, cropData.height || img.height, 0, 0, canvas.width, canvas.height ); // Convert canvas to blob canvas.toBlob((blob) => { if (blob) { resolve(blob); } else { reject(new Error('Failed to convert canvas to blob')); } }, 'image/jpeg', 0.9); } catch (drawError) { reject(drawError); } }; img.onerror = function() { reject(new Error('Failed to load image')); }; // Load the original file const reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; }; reader.readAsDataURL(this.state.selectedFile); } catch (err) { reject(err); } }); }; let croppedBlob; try { croppedBlob = await getCroppedBlob(); } catch (blobError) { // Fall back to single file upload formData.append('file', this.state.selectedFile); formData.append('collection_name', 'cover'); formData.append('name', 'Cover Photo'); if (this.state.uploadCaption) { formData.append('caption', this.state.uploadCaption); } // Continue with upload using single file const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media`, { method: 'POST', headers: (() => { const headers = { 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } return headers; })(), body: formData }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Process result and return early const newPhoto = result.data; newPhoto.is_default = this.state.photos.length === 0; this.state.photos.push(newPhoto); if (newPhoto.is_default) { this.state.currentDefaultId = newPhoto.id; } // Clean up and return this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#cover-photo-upload-input').val(''); $('#cover-upload-caption-textarea').val(''); this.state.currentIndex = this.state.photos.length - 1; this.renderGallery(); if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.loadPhotos) { window.CoverPhotoCarousel.loadPhotos(); } this.showSuccessMessage('Cover photo uploaded successfully'); return; } // Use dual-variant upload formData.append('file_uncropped', this.state.selectedFile); formData.append('file_cropped', croppedBlob, 'cover-cropped.jpg'); formData.append('collection_name', 'cover'); formData.append('name', 'Cover Photo'); const cropData = this.state.cropData; } else { // Fallback to single file upload if no cropper formData.append('file', this.state.selectedFile); formData.append('collection_name', 'cover'); formData.append('name', 'Cover Photo'); } // Add caption if provided if (this.state.uploadCaption) { formData.append('caption', this.state.uploadCaption); } // Upload the photo const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media`, { method: 'POST', headers: (() => { const headers = { 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } return headers; })(), body: formData }); if (!response.ok) { // Try to get error details from response let errorMessage = `HTTP error! status: ${response.status}`; try { const errorData = await response.json(); if (errorData.message) { errorMessage = errorData.message; } else if (errorData.errors) { // Laravel validation errors format const errors = Object.values(errorData.errors).flat(); errorMessage = errors.join(', '); } } catch (e) { // Response might not be JSON const errorText = await response.text(); } throw new Error(errorMessage); } const result = await response.json(); // Add the new photo to our state const newPhoto = result.data; newPhoto.is_default = this.state.photos.length === 0; this.state.photos.push(newPhoto); if (newPhoto.is_default) { this.state.currentDefaultId = newPhoto.id; } // Mark photos as loaded since we've modified the collection this.state.photosLoaded = true; // Clean up this.destroyCropper(); this.state.selectedFile = null; this.state.uploadCaption = ''; this.state.cropData = null; $('#cover-photo-upload-input').val(''); $('#cover-upload-caption-textarea').val(''); // Select the new photo this.state.currentIndex = this.state.photos.length - 1; this.renderGallery(); // Update carousel if it exists - reload from API to stay in sync if (window.CoverPhotoCarousel && window.CoverPhotoCarousel.loadPhotos) { window.CoverPhotoCarousel.loadPhotos(); } this.showSuccessMessage('Cover photo uploaded successfully'); } catch (error) { this.showSuccessMessage('Failed to upload cover photo. Please try again.'); this.renderGallery(); } }, // Destroy cropper destroyCropper: function() { if (this.state.cropperInstance && window.ImageCropper) { ImageCropper.destroy(); this.state.cropperInstance = null; } }, // Show success message showSuccessMessage: function(message) { // Use toast notification for non-intrusive feedback if (message.toLowerCase().includes('failed') || message.toLowerCase().includes('error')) { ToastNotification.error(message); } else { ToastNotification.success(message); } }, // Helper methods for state management hideAllStates: function() { $('#cover-photo-gallery-container').hide(); $('#cover-photo-cropping-container').hide(); $('#cover-photo-caption-input-container').hide(); $('#cover-gallery-loading').hide(); $('#cover-gallery-empty').hide(); }, showEmptyState: function() { this.hideAllStates(); $('#cover-gallery-empty').show(); }, showLoadingState: function() { this.hideAllStates(); $('#cover-gallery-loading').show(); }, // Start editing caption startEditingCaption: function() { if (!this.isOwner || this.state.editingCaption) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; this.state.editingCaption = true; const captionToEdit = currentPhoto.caption || ''; this.state.originalCaption = currentPhoto.caption || ''; // Set textarea value and update character count $('#cover-caption-textarea').val(captionToEdit); $('#cover-caption-char-count').text(`${captionToEdit.length}/500`); // Switch to edit mode $('#cover-caption-view-mode').hide(); $('#cover-caption-edit-mode').show(); // Focus textarea and move cursor to end const textarea = $('#cover-caption-textarea')[0]; textarea.focus(); textarea.setSelectionRange(textarea.value.length, textarea.value.length); }, // Save caption saveCaption: async function() { if (!this.isOwner || !this.state.editingCaption) return; const currentPhoto = this.state.photos[this.state.currentIndex]; if (!currentPhoto) return; const newCaption = $('#cover-caption-textarea').val(); const validatedCaption = this.validateCaption(newCaption); // Show saving state const $saveBtn = $('#cover-caption-save-btn'); const originalText = $saveBtn.text(); $saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...'); try { const response = await fetch(`${this.config.apiBaseUrl}/users/${this.userSlug}/media/${currentPhoto.id}`, { method: 'PATCH', headers: (() => { const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json' }; if (this.authToken) { headers['Authorization'] = `Bearer ${this.authToken}`; } return headers; })(), body: JSON.stringify({ caption: validatedCaption }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); // Save to state with history if (this.saveCaptionToState(currentPhoto.id, validatedCaption)) { // Remove draft indicator $('#draft-indicator').remove(); // Update display this.state.editingCaption = false; $('#cover-caption-edit-mode').hide(); $('#cover-caption-view-mode').show(); // Update caption display this.updateCaption(currentPhoto); this.showSuccessMessage('Caption saved successfully'); } } catch (error) { this.showSuccessMessage('Failed to save caption. Please try again.'); } finally { // Restore button state $saveBtn.prop('disabled', false).text(originalText); } }, // Cancel editing caption cancelEditingCaption: function() { if (!this.state.editingCaption) return; this.state.editingCaption = false; // Restore original caption $('#cover-caption-textarea').val(this.state.originalCaption); // Remove draft indicator $('#draft-indicator').remove(); // Switch back to view mode $('#cover-caption-edit-mode').hide(); $('#cover-caption-view-mode').show(); }, // Caption validation and sanitization validateCaption: function(caption) { if (!caption || typeof caption !== 'string') { return ''; } // Trim whitespace caption = caption.trim(); // Check length if (caption.length > 500) { caption = caption.substring(0, 500); } return caption; }, // Sanitize caption for display (prevent XSS) sanitizeCaption: function(caption) { // jQuery's text() method handles HTML escaping return $('<div>').text(caption).html(); }, // Save caption to state with history saveCaptionToState: function(photoId, caption) { const photo = this.state.photos.find(p => p.id === photoId); if (!photo) return false; // Store previous caption in history if (!this.state.captionHistory[photoId]) { this.state.captionHistory[photoId] = []; } this.state.captionHistory[photoId].push(photo.caption || ''); // Update caption photo.caption = this.validateCaption(caption); return true; }, // Event handling triggerEvent: function(eventType, data) { const event = new CustomEvent(eventType, { detail: { gallery: 'cover', timestamp: new Date().toISOString(), ...data } }); // Dispatch on the modal element $('#cover-photo-gallery-modal')[0].dispatchEvent(event); }, // Subscribe to events on: function(eventType, callback) { $('#cover-photo-gallery-modal')[0].addEventListener(eventType, callback); }, // Unsubscribe from events off: function(eventType, callback) { $('#cover-photo-gallery-modal')[0].removeEventListener(eventType, callback); } }; // Initialize when document is ready $(document).ready(function() { CoverPhotoGallery.init(); }); })(); </script> <style> /* Cover Photo Gallery Styles */ .modal-fullscreen { width: 100vw; max-width: 100%; margin: 0; } .modal-fullscreen .modal-content { min-height: 100vh; border: 0; border-radius: 0; } .cover-gallery-thumbnail { transition: all 0.2s ease; } .cover-gallery-thumbnail:hover { transform: scale(1.2); } .cover-gallery-thumbnail.active { transform: scale(1.1); } /* Delete button styling */ .gallery-delete-photo-btn:hover { background-color: #c82333 !important; /* Darker red on hover */ } .gallery-delete-photo-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Close button hover effect */ .modal-content .close:hover { transform: scale(1.1); } /* Navigation button hover effects */ .gallery-nav-prev:hover, .gallery-nav-next:hover { background: rgba(0,0,0,0.9) !important; } /* Button hover effects */ #cover-set-as-default:hover, #cover-add-new-photo:hover, #cover-caption-edit-btn:hover, #cover-caption-save-btn:hover, #cover-crop-apply:hover, #cover-caption-input-save:hover { opacity: 0.85; transform: translateY(-1px); } #cover-caption-cancel-btn:hover, #cover-crop-cancel:hover, #cover-caption-input-back:hover, #cover-caption-input-skip:hover { background: rgba(255,255,255,0.3) !important; } /* Caption scrollbar styling for dark theme */ #cover-caption-display { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.1); } #cover-caption-display::-webkit-scrollbar { width: 6px; } #cover-caption-display::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); } #cover-caption-display::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } #cover-caption-display::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } /* Gallery thumbnails scrollbar */ .gallery-thumbnails { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .gallery-thumbnails::-webkit-scrollbar { height: 6px; } .gallery-thumbnails::-webkit-scrollbar-track { background: transparent; } .gallery-thumbnails::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } .gallery-thumbnails::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } /* Override Bootstrap modal backdrop */ .modal-backdrop.show { opacity: 0; } /* Close button hover effect */ #cover-photo-gallery-modal .close:hover { opacity: 0.7; } /* Responsive styles for mobile */ @media (max-width: 768px) { /* Stack columns vertically on mobile */ #cover-photo-gallery-container { flex-direction: column !important; height: 100vh !important; } /* Make both columns full width */ #cover-photo-gallery-container .gallery-left-column, #cover-photo-gallery-container .gallery-right-column { width: 100% !important; } /* Adjust left column for mobile */ #cover-photo-gallery-container .gallery-left-column { padding: 60px 20px 20px 20px !important; flex: 0 0 auto !important; /* Size based on content */ display: flex !important; flex-direction: column !important; position: relative !important; min-height: 60vh !important; /* At least 60% height */ } /* Adjust right column for mobile - fill remaining space */ #cover-photo-gallery-container .gallery-right-column { padding: 20px !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.2) !important; flex: 1 1 auto !important; /* Fill remaining space */ min-height: 0 !important; /* Allow shrinking */ overflow-y: auto !important; /* Enable vertical scrolling */ overflow-x: hidden !important; } /* Adjust main image wrapper for mobile */ #cover-photo-gallery-container .gallery-main-image-wrapper { height: 40vh !important; /* Fixed height */ max-height: 40vh !important; margin-bottom: 10px !important; flex: 0 0 auto !important; overflow: hidden !important; position: relative !important; } /* Ensure image fits within wrapper */ #cover-gallery-main-image { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; max-width: 100% !important; max-height: 100% !important; } /* Smaller navigation buttons on mobile */ .gallery-nav-prev, .gallery-nav-next { padding: 10px 15px !important; font-size: 16px !important; } /* Adjust thumbnail size on mobile */ .cover-gallery-thumbnail { width: 35px !important; height: 35px !important; } /* Adjust gallery actions for mobile */ .gallery-actions { padding-top: 10px !important; flex: 0 0 auto !important; } /* Adjust thumbnails wrapper for mobile */ .gallery-thumbnails-wrapper { flex: 0 0 auto !important; overflow: hidden !important; } /* Adjust modal header for mobile */ #cover-photo-gallery-modal .modal-content > div:first-child { height: 40px !important; padding: 5px 15px !important; } /* Smaller logo on mobile */ #cover-photo-gallery-modal .modal-content img[alt="Stage32"] { height: 24px !important; } } /* Desktop styles - ensure right column has minimum width */ @media (min-width: 769px) { #cover-photo-gallery-container .gallery-right-column { min-width: 275px !important; } /* Adjust left column width when right column needs more space */ #cover-photo-gallery-container { display: flex !important; } #cover-photo-gallery-container .gallery-left-column { flex: 1 1 auto !important; width: calc(100% - 275px) !important; min-width: 0 !important; /* Allow column to shrink */ overflow: hidden !important; } #cover-photo-gallery-container .gallery-right-column { flex: 0 0 275px !important; width: 275px !important; } /* Ensure main image scales down properly */ #cover-photo-gallery-container .gallery-main-image-wrapper { width: 100% !important; overflow: hidden !important; } } /* Ensure scrollability for caption area */ .gallery-right-column { overflow-y: auto !important; overflow-x: hidden !important; } /* Dark theme scrollbar for right column */ .gallery-right-column { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.05); } .gallery-right-column::-webkit-scrollbar { width: 6px; } .gallery-right-column::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } .gallery-right-column::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } .gallery-right-column::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } </style>  <div class="modal fade" id="projectEditModal" tabindex="-1" role="dialog" aria-labelledby="projectEditModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content">  <div id="projectModalLoading" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); z-index: 1000; display: flex; align-items: center; justify-content: center;"> <div style="text-align: center;"> <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;"> <span class="sr-only">Loading...</span> </div> <p style="margin-top: 10px;">Loading...</p> </div> </div> <div style="background: #323232; color: white; border-bottom: 2px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px;"> <h5 id="projectEditModalLabel" style="color: white; font-weight: 600; margin: 0;">Add Project</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white; opacity: 0.8; font-size: 1.5rem; line-height: 1; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer;"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  <div id="projectModalError" class="alert alert-danger" style="display: none;"> <strong>Error:</strong> <span id="projectModalErrorMessage"></span> </div>  <ul class="nav nav-tabs" role="tablist" style="border-bottom: 1px solid #dee2e6; margin-bottom: 20px;"> <li role="presentation" class="active"> <a href="#project-details" aria-controls="project-details" role="tab" data-toggle="tab" style="padding: 10px 15px; color: #333; text-decoration: none;"> <i class="fa fa-info-circle"></i> Details </a> </li> <li role="presentation"> <a href="#project-genres" aria-controls="project-genres" role="tab" data-toggle="tab" style="padding: 10px 15px; color: #333; text-decoration: none;"> <i class="fa fa-tags"></i> Genres </a> </li> <li role="presentation"> <a href="#project-format" aria-controls="project-format" role="tab" data-toggle="tab" style="padding: 10px 15px; color: #333; text-decoration: none;"> <i class="fa fa-film"></i> Format </a> </li> <li role="presentation"> <a href="#project-credits" aria-controls="project-credits" role="tab" data-toggle="tab" style="padding: 10px 15px; color: #333; text-decoration: none;"> <i class="fa fa-users"></i> Credits </a> </li> </ul> <div class="clearfix"></div>  <div class="tab-content" style="padding-top: 20px;">  <div class="tab-pane fade in active" id="project-details" role="tabpanel"> <form id="projectDetailsForm"> <input type="hidden" id="projectSlug" name="projectSlug" value=""> <div class="form-group"> <label for="projectTitle">Title <span style="color: red;">*</span></label> <input type="text" class="form-control" id="projectTitle" name="title" maxlength="255" required> <small class="form-text text-muted"> <span id="titleCharCount">0</span> / 255 characters </small> </div> <div class="form-group"> <label for="projectLogline">Logline</label> <textarea class="form-control" id="projectLogline" name="logline" rows="3" maxlength="1000"></textarea> <small class="form-text text-muted"> <span id="loglineCharCount">0</span> / 1000 characters </small> </div> <div class="form-group"> <label for="projectTagline">Tagline</label> <input type="text" class="form-control" id="projectTagline" name="tagline" maxlength="255"> <small class="form-text text-muted"> <span id="taglineCharCount">0</span> / 255 characters </small> </div> <div class="form-group"> <label for="projectSynopsis">Synopsis</label> <textarea class="form-control" id="projectSynopsis" name="synopsis" rows="5" maxlength="5000"></textarea> <small class="form-text text-muted"> <span id="synopsisCharCount">0</span> / 5000 characters </small> </div> <div style="display: flex; gap: 15px; margin-bottom: 15px;"> <div style="flex: 1;"> <div class="form-group"> <label for="projectStatus">Status <span style="color: red;">*</span></label> <select class="form-control" id="projectStatus" name="status" required> <option value="">Select Status</option> </select> </div> </div> <div style="flex: 1;"> <div class="form-group"> <label for="projectStage">Stage <span style="color: red;">*</span></label> <select class="form-control" id="projectStage" name="stage" required> <option value="">Select Stage</option> </select> </div> </div> </div> <div style="display: flex; gap: 15px;"> <div style="width: 30%;"> <div class="form-group"> <label for="projectPageCount">Page Count</label> <input type="number" class="form-control" id="projectPageCount" name="page_count" min="1" max="9999" placeholder="e.g., 120"> </div> </div> <div style="width: 30%;"> <div class="form-group"> <label for="projectRuntime">Runtime (minutes)</label> <input type="number" class="form-control" id="projectRuntime" name="runtime_minutes" min="1" max="99999" placeholder="e.g., 90"> </div> </div> <div style="width: 30%;"> <div class="form-group"> <label for="projectBudget">Budget ($)</label> <input type="number" class="form-control" id="projectBudget" name="budget" min="0" max="999999999.99" step="0.01" placeholder="e.g., 1000000"> </div> </div> </div>  <div id="loglineHistory" style="display: none;"> <hr> <h6>Previous Loglines</h6> <small class="text-muted">Click to restore a previous version (up to 3 most recent)</small> <div id="loglineHistoryList" style="margin-top: 10px;">  </div> </div> </form> </div>  <div class="tab-pane fade" id="project-genres" role="tabpanel"> <div class="form-group"> <label>Select Genres</label> <div id="genreSearchContainer" style="position: relative;"> <input type="text" class="form-control" id="genreSearch" placeholder="Search genres..."> <div id="genreDropdown" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ddd; border-top: none; display: none; z-index: 1000;">  </div> </div> <div id="selectedGenres" style="margin-top: 10px;">  </div> <div id="primaryGenreSelection" style="margin-top: 15px; display: none;"> <label>Select Primary Genre <span style="color: red;">*</span></label> <div id="primaryGenreOptions">  </div> </div> </div> </div>  <div class="tab-pane fade" id="project-format" role="tabpanel"> <div class="form-group"> <label for="projectFormat">Project Format</label> <select class="form-control" id="projectFormat" name="format_id"> <option value="">Select Format</option> </select> </div> </div>  <div class="tab-pane fade" id="project-credits" role="tabpanel"> <div id="creditRequiredWarning" style="display: none; background: #fff9e6; border: 1px solid #ffcc00; border-radius: 4px; padding: 10px 15px; margin-bottom: 15px;"> <i class="fa fa-exclamation-triangle" style="color: #ff9900;"></i> <strong>Note:</strong> You must maintain at least one credit on projects you've worked on. </div> <div class="form-group"> <label>Select Your Credits</label> <div id="creditSearchContainer" style="position: relative;"> <input type="text" class="form-control" id="creditSearch" placeholder="Search credits..."> <div id="creditDropdown" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ddd; border-top: none; display: none; z-index: 1000;">  </div> </div> <small class="text-muted" style="display: block; margin-top: 5px;">You can only manage your own credit on this project.</small> <div id="selectedCredits" style="margin-top: 10px;">  </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="saveProjectBtn">Save Project</button> </div> </div> </div> </div> <style> /* Modal Styles */ #projectEditModal .modal-dialog { max-width: 800px; } /* Enhanced Tab Styles matching inline form */ #projectEditModal .nav-tabs { border-bottom: 1px solid #dee2e6; margin-bottom: 20px; } #projectEditModal .nav-tabs > li { margin-bottom: -1px; } #projectEditModal .nav-tabs > li > a { border: 1px solid transparent; border-radius: 4px 4px 0 0; background: transparent; font-weight: 500; transition: all 0.2s ease; padding: 10px 15px; color: #333; text-decoration: none; } #projectEditModal .nav-tabs > li > a:hover { border-color: #e9ecef #e9ecef #dee2e6; background-color: #f8f9fa; } #projectEditModal .nav-tabs > li.active > a, #projectEditModal .nav-tabs > li.active > a:hover, #projectEditModal .nav-tabs > li.active > a:focus { color: #495057; background-color: #fff; border: 1px solid #dee2e6; border-bottom-color: transparent; font-weight: 600; } /* Bootstrap 3 tab styling */ #projectEditModal .nav-tabs { border-bottom: 1px solid #ddd; } #projectEditModal .nav-tabs > li { float: left; margin-bottom: -1px; } #projectEditModal .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #333; } #projectEditModal .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; background-color: #eee; } #projectEditModal .nav-tabs > li.active > a, #projectEditModal .nav-tabs > li.active > a:hover, #projectEditModal .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } /* Character Counter Styles */ .form-text { font-size: 12px; color: #6c757d; } /* Genre Selection Styles */ .genre-tag { display: inline-block; padding: 4px 8px; margin: 2px; background-color: #e9ecef; border-radius: 4px; font-size: 14px; } .genre-tag .remove-genre { margin-left: 5px; cursor: pointer; color: #dc3545; } /* Credit List Styles */ .credit-item { padding: 10px; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .credit-item.owner { background-color: #f8f9fa; } .credit-item .badge { margin-left: 10px; } /* Loading Overlay */ .spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border 0.75s linear infinite; } @keyframes spinner-border { to { transform: rotate(360deg); } } /* Dropdown Styles */ .dropdown-item { padding: 8px 12px; cursor: pointer; } .dropdown-item:hover { background-color: #f8f9fa; } /* Error Alert */ .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } /* Logline History Styles */ .logline-history-item { padding: 12px; margin-bottom: 8px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .logline-history-item:hover { background-color: #e9ecef; border-color: #adb5bd; } .logline-history-item .logline-text { margin-bottom: 4px; color: #495057; } .logline-history-item .logline-date { font-size: 12px; color: #6c757d; } .logline-history-item .restore-btn { float: right; font-size: 12px; padding: 4px 8px; } /* Validation Styles */ .form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: #dc3545; } </style> <script> // Project Edit Modal JavaScript (function() { 'use strict'; // API configuration const API_BASE_URL = 'https://backend.stage32.com/api/v2'; // Helper function to get auth token async function getAuthToken() { // Wait for auth token to be available if (window.BACKEND_AUTH_TOKEN) { return window.BACKEND_AUTH_TOKEN; } // Try to wait for auth token return new Promise((resolve) => { let checkCount = 0; const checkInterval = setInterval(() => { checkCount++; if (window.BACKEND_AUTH_TOKEN) { clearInterval(checkInterval); resolve(window.BACKEND_AUTH_TOKEN); } else if (checkCount > 20) { // 2 seconds timeout clearInterval(checkInterval); resolve(null); } }, 100); }); } // Load all reference data from API async function loadAllReferenceData() { console.log('Loading reference data from API...'); const authToken = await getAuthToken(); if (!authToken) { console.error('No auth token available for API calls'); return { statuses: [], stages: [], formats: [], genres: [], positions: [] }; } const headers = { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` }; try { // Load all reference data in parallel const [statusesRes, stagesRes, formatsRes, genresRes, positionsRes] = await Promise.all([ fetch(`${API_BASE_URL}/reference/project-statuses`, { headers }), fetch(`${API_BASE_URL}/reference/project-stages`, { headers }), fetch(`${API_BASE_URL}/reference/formats`, { headers }), fetch(`${API_BASE_URL}/reference/genres`, { headers }), fetch(`${API_BASE_URL}/reference/project-positions`, { headers }) ]); // Check if all responses are ok const responses = [statusesRes, stagesRes, formatsRes, genresRes, positionsRes]; const failedResponses = responses.filter(res => !res.ok); if (failedResponses.length > 0) { console.error('Some reference data endpoints failed:', failedResponses.map(r => r.status)); throw new Error('Failed to load some reference data'); } // Parse all responses const [statuses, stages, formats, genres, positions] = await Promise.all([ statusesRes.json(), stagesRes.json(), formatsRes.json(), genresRes.json(), positionsRes.json() ]); console.log('Reference data loaded successfully:', { statuses: statuses.data?.length || 0, stages: stages.data?.length || 0, formats: formats.data?.length || 0, genres: genres.data?.length || 0, positions: positions.data?.length || 0 }); return { statuses: statuses.data || [], stages: stages.data || [], formats: formats.data || [], genres: genres.data || [], positions: positions.data || [] }; } catch (error) { console.error('Error loading reference data:', error); throw error; // Re-throw to let caller handle the error } } // Project CRUD API functions async function createProject(data) { console.log('Creating project with data:', data); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects-edit`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json(); // Log detailed errors for debugging if (errorData.errors) { console.error('Project creation failed with errors:', errorData.errors); } throw new Error(errorData.message || 'Failed to create project'); } return await response.json(); } async function updateProject(slug, data) { console.log('Updating project', slug, 'with data:', data); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects-edit/${slug}`, { method: 'PUT', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(data) }); if (!response.ok) { const errorData = await response.json(); // Log detailed errors for debugging if (errorData.errors) { console.error('Project update failed with errors:', errorData.errors); } throw new Error(errorData.message || 'Failed to update project'); } return await response.json(); } async function getProject(slug) { console.log('Fetching project', slug); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects-edit/${slug}`, { method: 'GET', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` } }); if (!response.ok) { const errorData = await response.json(); // Log detailed errors for debugging if (errorData.errors) { console.error('Project fetch failed with errors:', errorData.errors); } throw new Error(errorData.message || 'Failed to load project'); } return await response.json(); } async function getProjectCredits(slug) { console.log('Fetching project credits', slug); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects/${slug}/credits`, { method: 'GET', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` } }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || 'Failed to load credits'); } return await response.json(); } async function addProjectCredit(projectSlug, userId, positionId) { console.log('Adding project credit', projectSlug, userId, positionId); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects/${projectSlug}/credits`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ user_id: userId, project_position_id: positionId }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || 'Failed to add credit'); } return await response.json(); } async function removeProjectCredit(projectSlug, creditId) { console.log('Removing project credit', projectSlug, creditId); const authToken = await getAuthToken(); if (!authToken) { throw new Error('Authentication required'); } const response = await fetch(`${API_BASE_URL}/projects/${projectSlug}/credits/${creditId}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${authToken}` } }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || 'Failed to remove credit'); } return response.ok; } // State management let referenceData = { statuses: [], stages: [], formats: [], genres: [], positions: [] }; let selectedGenres = []; let selectedCredits = []; let currentProjectSlug = null; let isEditMode = false; // Track original values for change detection let originalData = {}; let originalFormatId = null; let originalGenreIds = []; let originalPrimaryGenreId = null; let originalCreditIds = []; // Load reference data async function loadReferenceData() { try { showModalLoading(true); // Use centralized API service referenceData = await loadAllReferenceData(); // Make reference data globally available for rendering window.projectModalReferenceData = referenceData; populateDropdowns(); } catch (error) { console.error('Failed to load reference data:', error); showError('Failed to load reference data. Please refresh and try again.'); } finally { showModalLoading(false); } } // Populate dropdowns function populateDropdowns() { // Status dropdown const statusSelect = document.getElementById('projectStatus'); if (statusSelect) { statusSelect.innerHTML = '<option value="">Select Status</option>'; referenceData.statuses.forEach(status => { statusSelect.innerHTML += `<option value="${status.value}">${status.label}</option>`; }); } // Stage dropdown const stageSelect = document.getElementById('projectStage'); if (stageSelect) { stageSelect.innerHTML = '<option value="">Select Stage</option>'; referenceData.stages.forEach(stage => { stageSelect.innerHTML += `<option value="${stage.value}">${stage.label}</option>`; }); } // Format dropdown const formatSelect = document.getElementById('projectFormat'); if (formatSelect) { formatSelect.innerHTML = '<option value="">Select Format</option>'; referenceData.formats.forEach(format => { formatSelect.innerHTML += `<option value="${format.id}">${format.name}</option>`; }); } // Position dropdown for user's own credit const userPositionSelect = document.getElementById('userCreditPosition'); if (userPositionSelect) { userPositionSelect.innerHTML = '<option value="">Select Your Position</option>'; referenceData.positions.forEach(position => { userPositionSelect.innerHTML += `<option value="${position.id}">${position.name}</option>`; }); } } // Character counter functionality function setupCharacterCounters() { const fields = [ { id: 'projectTitle', counterId: 'titleCharCount', max: 255 }, { id: 'projectLogline', counterId: 'loglineCharCount', max: 1000 }, { id: 'projectTagline', counterId: 'taglineCharCount', max: 255 }, { id: 'projectSynopsis', counterId: 'synopsisCharCount', max: 5000 } ]; fields.forEach(field => { const input = document.getElementById(field.id); const counter = document.getElementById(field.counterId); input.addEventListener('input', function() { const length = this.value.length; counter.textContent = length; if (length > field.max * 0.9) { counter.style.color = '#dc3545'; } else { counter.style.color = '#6c757d'; } // Clear any previous validation error for this field this.classList.remove('is-invalid'); }); }); } // Setup real-time validation function setupRealTimeValidation() { // Status and Stage validation - clear error when value selected const statusSelect = document.getElementById('projectStatus'); const stageSelect = document.getElementById('projectStage'); statusSelect.addEventListener('change', function() { if (this.value) { this.classList.remove('is-invalid'); clearFieldError(this); } }); stageSelect.addEventListener('change', function() { if (this.value) { this.classList.remove('is-invalid'); clearFieldError(this); } }); // Budget format validation const budgetInput = document.getElementById('projectBudget'); budgetInput.addEventListener('blur', function() { const value = this.value; if (value && (isNaN(value) || parseFloat(value) < 0)) { this.classList.add('is-invalid'); showFieldError(this, 'Please enter a valid positive number'); } else { this.classList.remove('is-invalid'); clearFieldError(this); } }); // Page count validation const pageCountInput = document.getElementById('projectPageCount'); pageCountInput.addEventListener('blur', function() { const value = parseInt(this.value); if (this.value && (isNaN(value) || value < 1 || value > 9999)) { this.classList.add('is-invalid'); showFieldError(this, 'Page count must be between 1 and 9999'); } else { this.classList.remove('is-invalid'); clearFieldError(this); } }); // Runtime validation const runtimeInput = document.getElementById('projectRuntime'); runtimeInput.addEventListener('blur', function() { const value = parseInt(this.value); if (this.value && (isNaN(value) || value < 1 || value > 99999)) { this.classList.add('is-invalid'); showFieldError(this, 'Runtime must be between 1 and 99999 minutes'); } else { this.classList.remove('is-invalid'); clearFieldError(this); } }); } // Show field-specific error function showFieldError(field, message) { // Remove any existing error clearFieldError(field); // Create error element const errorDiv = document.createElement('div'); errorDiv.className = 'invalid-feedback'; errorDiv.textContent = message; errorDiv.style.display = 'block'; // Insert after the field field.parentNode.insertBefore(errorDiv, field.nextSibling); } // Clear field-specific error function clearFieldError(field) { const existingError = field.parentNode.querySelector('.invalid-feedback'); if (existingError) { existingError.remove(); } } // Genre search functionality function setupGenreSearch() { const searchInput = document.getElementById('genreSearch'); const dropdown = document.getElementById('genreDropdown'); searchInput.addEventListener('focus', function() { showGenreDropdown(); }); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); filterGenres(searchTerm); }); // Click outside to close document.addEventListener('click', function(e) { if (!e.target.closest('#genreSearchContainer')) { dropdown.style.display = 'none'; } }); } function showGenreDropdown() { const dropdown = document.getElementById('genreDropdown'); dropdown.innerHTML = ''; const availableGenres = referenceData.genres.filter(genre => !selectedGenres.some(selected => selected.id === genre.id) ); availableGenres.forEach(genre => { const item = document.createElement('div'); item.className = 'dropdown-item'; item.textContent = genre.name; item.onclick = () => selectGenre(genre); dropdown.appendChild(item); }); dropdown.style.display = 'block'; } function filterGenres(searchTerm) { const dropdown = document.getElementById('genreDropdown'); const items = dropdown.querySelectorAll('.dropdown-item'); items.forEach(item => { if (item.textContent.toLowerCase().includes(searchTerm)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } function selectGenre(genre) { selectedGenres.push(genre); updateSelectedGenresDisplay(); document.getElementById('genreSearch').value = ''; document.getElementById('genreDropdown').style.display = 'none'; if (selectedGenres.length >= 2) { showPrimaryGenreSelection(); } } window.removeGenre = function(genreId) { selectedGenres = selectedGenres.filter(g => g.id !== genreId); updateSelectedGenresDisplay(); if (selectedGenres.length < 2) { document.getElementById('primaryGenreSelection').style.display = 'none'; } else { showPrimaryGenreSelection(); } } function updateSelectedGenresDisplay() { const container = document.getElementById('selectedGenres'); container.innerHTML = selectedGenres.map(genre => ` <span class="genre-tag"> ${genre.name} <span class="remove-genre" onclick="removeGenre(${genre.id})">×</span> </span> `).join(''); } function showPrimaryGenreSelection() { const container = document.getElementById('primaryGenreSelection'); const optionsContainer = document.getElementById('primaryGenreOptions'); // Get currently selected primary genre before rebuilding const currentPrimary = document.querySelector('input[name="primaryGenre"]:checked')?.value; optionsContainer.innerHTML = selectedGenres.map(genre => ` <div class="form-check"> <input class="form-check-input" type="radio" name="primaryGenre" id="primary_${genre.id}" value="${genre.id}"> <label class="form-check-label" for="primary_${genre.id}"> ${genre.name} </label> </div> `).join(''); // Restore previous selection if it still exists in the list if (currentPrimary && selectedGenres.some(g => g.id == currentPrimary)) { const radio = document.getElementById(`primary_${currentPrimary}`); if (radio) { radio.checked = true; } } container.style.display = 'block'; } // Credits search functionality function setupCreditSearch() { const searchInput = document.getElementById('creditSearch'); const dropdown = document.getElementById('creditDropdown'); searchInput.addEventListener('focus', function() { showCreditDropdown(); }); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); filterCredits(searchTerm); }); // Click outside to close document.addEventListener('click', function(e) { if (!e.target.closest('#creditSearchContainer')) { dropdown.style.display = 'none'; } }); } function showCreditDropdown() { const dropdown = document.getElementById('creditDropdown'); dropdown.innerHTML = ''; const availableCredits = referenceData.positions.filter(position => !selectedCredits.some(selected => selected.id === position.id) ); availableCredits.forEach(position => { const item = document.createElement('div'); item.className = 'dropdown-item'; item.textContent = position.name; item.onclick = () => selectCredit(position); dropdown.appendChild(item); }); dropdown.style.display = 'block'; } function filterCredits(searchTerm) { const dropdown = document.getElementById('creditDropdown'); const items = dropdown.querySelectorAll('.dropdown-item'); items.forEach(item => { if (item.textContent.toLowerCase().includes(searchTerm)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } function selectCredit(credit) { selectedCredits.push(credit); updateSelectedCreditsDisplay(); document.getElementById('creditSearch').value = ''; document.getElementById('creditDropdown').style.display = 'none'; // Check credit requirement when adding checkCreditRequirement(); } window.removeCredit = function(creditId) { selectedCredits = selectedCredits.filter(c => c.id !== creditId); updateSelectedCreditsDisplay(); // Show warning if editing and all credits removed checkCreditRequirement(); } function checkCreditRequirement() { const warningElement = document.getElementById('creditRequiredWarning'); if (warningElement) { // Show warning only when editing, had original credits, and now have none if (isEditMode && originalCreditIds && originalCreditIds.length > 0 && selectedCredits.length === 0) { warningElement.style.display = 'block'; } else { warningElement.style.display = 'none'; } } } function updateSelectedCreditsDisplay() { const container = document.getElementById('selectedCredits'); container.innerHTML = selectedCredits.map(credit => ` <span class="genre-tag"> ${credit.name} <span class="remove-genre" onclick="removeCredit(${credit.id})">×</span> </span> `).join(''); } // Save functionality async function saveProject() { try { showModalLoading(true); clearError(); const formData = getFormData(); if (!validateForm(formData)) { showModalLoading(false); return; } let project; if (isEditMode && currentProjectSlug) { // Build update payload with only changed fields const updateData = {}; // Check basic fields for changes Object.keys(originalData).forEach(key => { const formValue = formData[key] || ''; const originalValue = originalData[key] || ''; // Convert to string for comparison if (String(formValue) !== String(originalValue)) { updateData[key] = formData[key]; } }); // Check format changes const currentFormatId = formData.format_id ? parseInt(formData.format_id) : null; if (currentFormatId !== originalFormatId) { updateData.format_id = currentFormatId; } // Check genre changes const currentGenreIds = selectedGenres.map(g => g.id).sort(); const genresChanged = JSON.stringify(currentGenreIds) !== JSON.stringify(originalGenreIds); // Check primary genre change let currentPrimaryId = null; if (currentGenreIds.length >= 2) { const primaryId = document.querySelector('input[name="primaryGenre"]:checked')?.value; if (primaryId) { currentPrimaryId = parseInt(primaryId); } } else if (currentGenreIds.length === 1) { currentPrimaryId = currentGenreIds[0]; } const primaryChanged = currentPrimaryId !== originalPrimaryGenreId; // Update if genres or primary changed if (genresChanged || primaryChanged) { updateData.genres = currentGenreIds; if (currentPrimaryId !== null) { updateData.primary_genre_id = currentPrimaryId; } } // Check credits changes const currentCreditIds = selectedCredits.map(c => c.id).sort(); const creditsChanged = JSON.stringify(currentCreditIds) !== JSON.stringify(originalCreditIds); if (creditsChanged) { // Get current user slug const currentUserSlug = window._jsProfileData?.user?.slug || null; if (currentUserSlug) { // Credits format: [{user_slug: "johnsmith123", project_position_id: 2}] // Backend validates that all credits belong to authenticated user updateData.credits = selectedCredits.map(credit => ({ user_slug: currentUserSlug, project_position_id: credit.id })); } } // Only make API call if something changed if (Object.keys(updateData).length > 0) { project = await updateProject(currentProjectSlug, updateData); } else { // Nothing changed, just close modal $('#projectEditModal').modal('hide'); return; } } else { // Create new project with all data in one call const createData = { ...formData }; // Add format if selected if (formData.format_id) { createData.format_id = parseInt(formData.format_id); } // Add genres if selected if (selectedGenres.length > 0) { createData.genres = selectedGenres.map(g => g.id); // Set primary genre if (selectedGenres.length >= 2) { const primaryId = document.querySelector('input[name="primaryGenre"]:checked')?.value; if (primaryId) { createData.primary_genre_id = parseInt(primaryId); } } else if (selectedGenres.length === 1) { createData.primary_genre_id = selectedGenres[0].id; } } // Add credits if selected if (selectedCredits.length > 0) { // Get current user slug const currentUserSlug = window._jsProfileData?.user?.slug || null; if (currentUserSlug) { // Credits format: [{user_slug: "johnsmith123", project_position_id: 2}] // Backend validates that all credits belong to authenticated user createData.credits = selectedCredits.map(credit => ({ user_slug: currentUserSlug, project_position_id: credit.id })); } } project = await createProject(createData); // Use slug for future API calls currentProjectSlug = project.data.slug; } // Show success message if (window.ToastNotification) { ToastNotification.success('Project saved successfully!'); } // Close modal and update the single project card $('#projectEditModal').modal('hide'); // Update the single project card with the returned data if (project && project.data && typeof updateSingleProject === 'function') { updateSingleProject(project.data); } else if (typeof refreshFeaturedProjects === 'function') { // Fallback to refresh all if updateSingleProject is not available refreshFeaturedProjects(); } } catch (error) { console.error('Save error:', error); showError(error.message || 'Failed to save project. Please try again.'); } finally { showModalLoading(false); } } // Form data collection function getFormData() { return { title: document.getElementById('projectTitle').value.trim(), logline: document.getElementById('projectLogline').value.trim(), tagline: document.getElementById('projectTagline').value.trim(), synopsis: document.getElementById('projectSynopsis').value.trim(), status: document.getElementById('projectStatus').value, stage: document.getElementById('projectStage').value, page_count: document.getElementById('projectPageCount').value ? parseInt(document.getElementById('projectPageCount').value) : null, runtime_minutes: document.getElementById('projectRuntime').value ? parseInt(document.getElementById('projectRuntime').value) : null, budget: document.getElementById('projectBudget').value ? parseFloat(document.getElementById('projectBudget').value) : null, format_id: document.getElementById('projectFormat').value ? parseInt(document.getElementById('projectFormat').value) : null }; } // Form validation function validateForm(data) { // Clear previous errors clearError(); document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid')); let isValid = true; // Title validation if (!data.title) { const titleInput = document.getElementById('projectTitle'); titleInput.classList.add('is-invalid'); showFieldError(titleInput, 'Project title is required'); isValid = false; } // Status validation if (!data.status) { const statusSelect = document.getElementById('projectStatus'); statusSelect.classList.add('is-invalid'); showFieldError(statusSelect, 'Project status is required'); isValid = false; } // Stage validation if (!data.stage) { const stageSelect = document.getElementById('projectStage'); stageSelect.classList.add('is-invalid'); showFieldError(stageSelect, 'Project stage is required'); isValid = false; } // Budget validation if (data.budget !== null && data.budget < 0) { const budgetInput = document.getElementById('projectBudget'); budgetInput.classList.add('is-invalid'); showFieldError(budgetInput, 'Budget must be a positive number'); isValid = false; } // Page count validation if (data.page_count !== null && (data.page_count < 1 || data.page_count > 9999)) { const pageInput = document.getElementById('projectPageCount'); pageInput.classList.add('is-invalid'); showFieldError(pageInput, 'Page count must be between 1 and 9999'); isValid = false; } // Runtime validation if (data.runtime_minutes !== null && (data.runtime_minutes < 1 || data.runtime_minutes > 99999)) { const runtimeInput = document.getElementById('projectRuntime'); runtimeInput.classList.add('is-invalid'); showFieldError(runtimeInput, 'Runtime must be between 1 and 99999 minutes'); isValid = false; } // Genre validation if (selectedGenres.length >= 2) { const primarySelected = document.querySelector('input[name="primaryGenre"]:checked'); if (!primarySelected) { showError('When selecting multiple genres, you must choose a primary genre'); isValid = false; } } // Credit validation - only when editing an existing project if (isEditMode && originalCreditIds && originalCreditIds.length > 0) { // User had credits originally, make sure they keep at least one if (selectedCredits.length === 0) { showError('You must maintain at least one credit on projects you are involved with. You cannot remove all your credits from an existing project.'); isValid = false; // Also highlight the credits section const creditTab = document.querySelector('a[href="#project-credits"]'); if (creditTab) { creditTab.click(); // Switch to credits tab to show the issue } } } if (!isValid) { // Scroll to first invalid field or error message const firstInvalid = document.querySelector('.is-invalid'); const errorAlert = document.getElementById('projectModalError'); if (errorAlert && errorAlert.style.display !== 'none') { errorAlert.scrollIntoView({ behavior: 'smooth', block: 'center' }); } else if (firstInvalid) { firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' }); firstInvalid.focus(); } } return isValid; } // UI Helper functions function showModalLoading(show) { document.getElementById('projectModalLoading').style.display = show ? 'flex' : 'none'; } function showError(message) { document.getElementById('projectModalError').style.display = 'block'; document.getElementById('projectModalErrorMessage').textContent = message; } function clearError() { document.getElementById('projectModalError').style.display = 'none'; } // Modal initialization function initProjectModal() { setupCharacterCounters(); setupGenreSearch(); setupCreditSearch(); setupRealTimeValidation(); // Save button handler document.getElementById('saveProjectBtn').addEventListener('click', saveProject); // Load reference data when modal opens $('#projectEditModal').on('show.bs.modal', async function (e) { // Clear any existing errors when modal opens clearError(); if (referenceData.statuses.length === 0) { await loadReferenceData(); } // Fix for Bootstrap 3 - ensure active tab content is shown setTimeout(function() { $('.nav-tabs a[href="#project-details"]').tab('show'); }, 50); }); // Reset form when modal closes $('#projectEditModal').on('hidden.bs.modal', function (e) { resetForm(); }); } // Reset form function resetForm() { document.getElementById('projectDetailsForm').reset(); selectedGenres = []; selectedCredits = []; currentProjectSlug = null; isEditMode = false; // Reset original values originalData = {}; originalFormatId = null; originalGenreIds = []; originalPrimaryGenreId = null; // Explicitly clear format dropdown const formatSelect = document.getElementById('projectFormat'); if (formatSelect) { formatSelect.value = ''; } // Explicitly clear status and stage dropdowns const statusSelect = document.getElementById('projectStatus'); if (statusSelect) { statusSelect.value = ''; } const stageSelect = document.getElementById('projectStage'); if (stageSelect) { stageSelect.value = ''; } updateSelectedGenresDisplay(); updateSelectedCreditsDisplay(); document.getElementById('primaryGenreSelection').style.display = 'none'; clearError(); // Clear validation states from all form fields document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid')); document.querySelectorAll('.invalid-feedback').forEach(el => el.remove()); // Hide credit warning const creditWarning = document.getElementById('creditRequiredWarning'); if (creditWarning) { creditWarning.style.display = 'none'; } // Clear genre search input document.getElementById('genreSearch').value = ''; document.getElementById('genreDropdown').style.display = 'none'; // Reset character counters document.querySelectorAll('[id$="CharCount"]').forEach(counter => { counter.textContent = '0'; counter.style.color = '#6c757d'; }); // Update modal title document.getElementById('projectEditModalLabel').textContent = 'Add Project'; // Hide logline history document.getElementById('loglineHistory').style.display = 'none'; document.getElementById('loglineHistoryList').innerHTML = ''; } // Public API for opening modal window.openProjectModal = async function(mode = 'create', projectSlug = null) { isEditMode = mode === 'edit'; currentProjectSlug = projectSlug; // Ensure reference data is loaded first if (referenceData.statuses.length === 0) { await loadReferenceData(); } if (isEditMode && projectSlug) { document.getElementById('projectEditModalLabel').textContent = 'Edit Project'; // Load project data after modal is shown and reference data is ready $('#projectEditModal').one('shown.bs.modal', function() { loadProjectData(projectSlug); }); } else { document.getElementById('projectEditModalLabel').textContent = 'Add Project'; } $('#projectEditModal').modal('show'); }; // Load project data for editing async function loadProjectData(projectSlug) { try { showModalLoading(true); const data = await getProject(projectSlug); const project = data.data; // Populate form fields document.getElementById('projectSlug').value = project.slug; document.getElementById('projectTitle').value = project.title || ''; document.getElementById('projectLogline').value = project.logline || ''; document.getElementById('projectTagline').value = project.tagline || ''; document.getElementById('projectSynopsis').value = project.synopsis || ''; // Set status dropdown (status is an object with value/label) if (project.status && project.status.value) { document.getElementById('projectStatus').value = project.status.value; } // Set stage dropdown (stage is an object with value/label) if (project.stage && project.stage.value) { document.getElementById('projectStage').value = project.stage.value; } document.getElementById('projectPageCount').value = project.page_count || ''; document.getElementById('projectRuntime').value = project.runtime_minutes || ''; document.getElementById('projectBudget').value = project.budget || ''; // Update character counts ['Title', 'Logline', 'Tagline', 'Synopsis'].forEach(field => { const input = document.getElementById('project' + field); const counter = document.getElementById(field.toLowerCase() + 'CharCount'); counter.textContent = input.value.length; }); // Load format if (project.formats && project.formats.length > 0) { document.getElementById('projectFormat').value = project.formats[0].format_id; } else { // Clear format if project has no format document.getElementById('projectFormat').value = ''; } // Load genres if (project.genres && project.genres.length > 0) { // Map genre IDs to full genre objects from reference data selectedGenres = project.genres.map(g => { const genreRef = referenceData.genres.find(ref => ref.id === g.genre_id); return genreRef ? { id: genreRef.id, name: genreRef.name } : null; }).filter(g => g !== null); updateSelectedGenresDisplay(); if (selectedGenres.length >= 2) { showPrimaryGenreSelection(); // Set primary genre const primaryGenreData = project.genres.find(g => g.is_primary); if (primaryGenreData) { // Use setTimeout to ensure radio buttons are rendered first setTimeout(() => { const radio = document.getElementById(`primary_${primaryGenreData.genre_id}`); if (radio) { radio.checked = true; } }, 100); } } } // Store original values for change detection originalData = { title: project.title || '', logline: project.logline || '', tagline: project.tagline || '', synopsis: project.synopsis || '', status: project.status || '', stage: project.stage || '', page_count: project.page_count || '', runtime_minutes: project.runtime_minutes || '', budget: project.budget || '' }; // Store original format originalFormatId = project.formats && project.formats.length > 0 ? project.formats[0].format_id : null; // Store original genres (using genre_id from the project data) originalGenreIds = project.genres ? project.genres.map(g => g.genre_id).sort() : []; originalPrimaryGenreId = project.genres?.find(g => g.is_primary)?.genre_id || null; // Load credits (if any exist for current user) if (project.credits && project.credits.length > 0) { console.log('Project credits from API:', project.credits); console.log('Reference positions available:', referenceData.positions); // Get current user slug const currentUserSlug = window._jsProfileData?.user?.slug || null; console.log('Current user slug:', currentUserSlug); if (currentUserSlug) { // Find user's credits by slug const userCredits = project.credits.filter(c => c.user_slug === currentUserSlug); console.log('Filtered user credits:', userCredits); // Map to selected credits format selectedCredits = userCredits.map(credit => { const position = referenceData.positions.find(p => p.id === credit.project_position_id); console.log(`Mapping credit position ${credit.project_position_id} to:`, position); return position ? { id: position.id, name: position.name } : null; }).filter(c => c !== null); console.log('Selected credits after mapping:', selectedCredits); updateSelectedCreditsDisplay(); // Store original credit IDs for change detection originalCreditIds = selectedCredits.map(c => c.id).sort(); // Check credit requirement when loading checkCreditRequirement(); } else { console.warn('No current user slug found - cannot load credits'); } } else { console.log('No credits found in project data'); } // Load logline history if available if (project.archive_data && project.archive_data.previous_loglines) { loadLoglineHistory(project.archive_data.previous_loglines); } } catch (error) { console.error('Failed to load project:', error); showError('Failed to load project data'); } finally { showModalLoading(false); } } // Load project credits async function loadProjectCredits(projectSlug) { try { const data = await getProjectCredits(projectSlug); const credits = data.data || []; projectCredits = credits; const creditsList = document.getElementById('creditsList'); const userCreditSection = document.getElementById('userCreditSection'); // Get backend user ID (not legacy user ID) const currentUserId = window._jsProfileUserId || null; // Find user's own credit const userCredit = credits.find(credit => credit.user_id == currentUserId); // Show user credit section if they have a credit if (userCredit) { userCreditSection.style.display = 'block'; document.getElementById('userCreditPosition').value = userCredit.position_id; // Show warning for unofficial credits if (userCredit.data_source !== 'stage32') { document.getElementById('userCreditWarning').style.display = 'block'; } } else { // User doesn't have a credit yet, show the add option userCreditSection.style.display = 'block'; } // Display all credits (read-only) if (credits.length > 0) { creditsList.innerHTML = credits.map(credit => ` <div class="credit-item ${credit.user_id == currentUserId ? 'owner' : ''}"> <div> <strong>${credit.user_name || 'Unknown User'}</strong> ${credit.position_name ? ` - ${credit.position_name}` : ''} ${credit.user_id == currentUserId ? '<span class="badge badge-primary">You</span>' : ''} </div> ${credit.user_id == currentUserId ? ` <button type="button" class="btn btn-sm btn-danger" onclick="removeUserCredit('${projectSlug}', ${credit.id})"> Remove </button> ` : ''} </div> `).join(''); } else { creditsList.innerHTML = '<p class="text-muted">No team members yet.</p>'; } } catch (error) { console.error('Failed to load credits:', error); document.getElementById('creditsList').innerHTML = '<p class="text-danger">Failed to load project team.</p>'; } } // Update user's credit window.updateUserCredit = async function() { const positionId = document.getElementById('userCreditPosition').value; if (!positionId) { if (window.ToastNotification) { ToastNotification.error('Please select a position'); } return; } try { showModalLoading(true); // Get backend user ID (not legacy user ID) const userId = window._jsProfileUserId || null; await addProjectCredit(currentProjectSlug, userId, parseInt(positionId)); if (window.ToastNotification) { ToastNotification.success('Your role has been updated'); } // Reload credits await loadProjectCredits(currentProjectSlug); } catch (error) { console.error('Failed to update credit:', error); if (window.ToastNotification) { ToastNotification.error('Failed to update your role'); } } finally { showModalLoading(false); } }; // Remove user's credit window.removeUserCredit = async function(projectSlug, creditId) { if (!confirm('Are you sure you want to remove yourself from this project? You may not be able to add yourself back.')) { return; } try { showModalLoading(true); await removeProjectCredit(projectSlug, creditId); if (window.ToastNotification) { ToastNotification.success('You have been removed from the project'); } // Reload credits await loadProjectCredits(projectSlug); } catch (error) { console.error('Failed to remove credit:', error); if (window.ToastNotification) { ToastNotification.error('Failed to remove your credit'); } } finally { showModalLoading(false); } }; // Setup credit management function setupCreditManagement() { const updateBtn = document.getElementById('updateUserCreditBtn'); if (updateBtn) { updateBtn.addEventListener('click', updateUserCredit); } } // Load logline history function loadLoglineHistory(previousLoglines) { const historyContainer = document.getElementById('loglineHistory'); const historyList = document.getElementById('loglineHistoryList'); if (!previousLoglines || previousLoglines.length === 0) { return; } // Show the history section historyContainer.style.display = 'block'; // Format and display each logline historyList.innerHTML = previousLoglines.map((logline, index) => { const date = new Date(logline.updated_at); const formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); return ` <div class="logline-history-item" onclick="restoreLogline('${escapeQuotes(logline.value)}')"> <button type="button" class="btn btn-sm btn-outline-primary restore-btn"> Restore </button> <div class="logline-text">${escapeHtml(logline.value)}</div> <div class="logline-date">Updated: ${formattedDate}</div> </div> `; }).join(''); } // Restore a logline from history window.restoreLogline = function(loglineValue) { const loglineTextarea = document.getElementById('projectLogline'); loglineTextarea.value = loglineValue; // Update character counter const counter = document.getElementById('loglineCharCount'); counter.textContent = loglineValue.length; // Show success message if (window.ToastNotification) { ToastNotification.success('Previous logline restored'); } // Scroll to logline field loglineTextarea.scrollIntoView({ behavior: 'smooth', block: 'center' }); loglineTextarea.focus(); }; // Helper function to escape quotes for onclick attribute function escapeQuotes(str) { return str.replace(/'/g, "\\'").replace(/"/g, '"'); } // Helper function to escape HTML function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } // Initialize on DOM ready document.addEventListener('DOMContentLoaded', function() { initProjectModal(); }); })(); </script> <script> // Newsletter modal detection and auto-trigger $(document).ready(function() { // Check URL parameter for modal=newsletter const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('modal') === 'newsletter') { // Show the newsletter modal automatically $('#newsletter-modal').modal('show'); } }); </script> <script> // Loading state management const LoadingManager = { show() { document.getElementById('profileLoadingState').style.display = 'flex'; document.getElementById('profileErrorState').style.display = 'none'; }, hide() { document.getElementById('profileLoadingState').style.display = 'none'; }, showError(message = 'Unable to load profile data') { document.getElementById('profileLoadingState').style.display = 'none'; document.getElementById('profileErrorState').style.display = 'block'; document.querySelector('.error-message').textContent = message; } }; // Retry function async function retryProfileLoad() { const phpVars = window._phpVars; // Store PHP vars globally if (phpVars && phpVars.profile_slug) { await loadProfileWithStates(phpVars.profile_slug); } } // Modified profile loading with loading states async function loadProfileWithStates(profileSlug, skipErrorDisplay = false) { try { // Show loading state LoadingManager.show(); // Load profile data with Bearer token from phpVars const profileData = await ProfileAPI.loadProfileApiData(profileSlug, window._phpVars.bearer_token); if (!profileData) { throw new Error('Failed to load profile data'); } // Hide loading state on success LoadingManager.hide(); // Store data globally for use window._jsProfileData = profileData; // Trigger profile rendering (to be implemented in Step 7) if (typeof renderProfileSections === 'function') { renderProfileSections(profileData); } return profileData; } catch (error) { // Only show error if we don't have PHP data to fall back on if (!skipErrorDisplay) { LoadingManager.showError('Unable to load profile. Please try again.'); } else { // Hide loading state without showing error LoadingManager.hide(); } return null; } } // Wait for DOM to be ready document.addEventListener('DOMContentLoaded', async function() { // PHP vars are now set up in _data_setup.php (included early) const phpVars = window._phpVars; // Check if we have a profile slug if (!phpVars.profile_slug) { return; } const jsProfileData = await loadProfileWithStates(phpVars.profile_slug, true); if (!jsProfileData) { // No data available at all LoadingManager.showError('Unable to load profile. Please try again.'); return; } }); /** * Render profile sections with JavaScript data * @param {Object} profileData - Transformed profile data from API */ function renderProfileSections(profileData) { updateProfileHeader(profileData); updateLifeExperience(profileData); updateFeaturedProjects(profileData); // Update work experience (handled by enhanced _work_experience_staging.php) if (typeof updateWorkExperiences === 'function') { // Map the data to the expected format (work_experiences -> workExperiences) const workExperienceData = { ...profileData, workExperiences: profileData.work_experiences || [] }; updateWorkExperiences(workExperienceData); } // Update achievements // Update achievements if function exists (from partial) if (typeof updateAchievements === 'function') { updateAchievements(profileData); } // Update bio content if (typeof updateBioContent === 'function') { updateBioContent(profileData); } updateRepresentations(profileData); } /** * Update profile header with JavaScript data * @param {Object} profileData - Profile data from API */ function updateProfileHeader(profileData) { // Handle profile banner/cover image using the ID const bannerContainer = document.getElementById('profile-cover-photo-container'); const bannerColumn = bannerContainer ? bannerContainer.closest('.col-sm-24') : null; if (profileData.images && profileData.images.cover_image_url) { // Show the banner column if it was hidden if (bannerColumn) { bannerColumn.style.display = 'block'; } } else { // No cover image - show the column anyway for the carousel placeholder if (bannerColumn) { bannerColumn.style.display = 'block'; } } // Update profile image/headshot using the correct ID selector const profileImg = document.getElementById('profile-headshot'); if (profileImg) { if (profileData.profile_image_url) { profileImg.src = profileData.profile_image_url; } else { // API has no profile image - use default instead of placeholder profileImg.src = 'https://stage32.sfo2.cdn.digitaloceanspaces.com/ui/assets/Profile%20Default%20-%20640x640.webp'; } } // Update name const nameElement = document.getElementById('profile-name'); if (nameElement && profileData.user) { // Build full name including middle name if present const firstName = profileData.user.first_name || ''; const middleName = profileData.user.middle_name || ''; const lastName = profileData.user.last_name || ''; let fullName; if (middleName) { fullName = `${firstName} ${middleName} ${lastName}`.trim(); } else { fullName = `${firstName} ${lastName}`.trim(); } if (fullName) { nameElement.textContent = fullName; } } // Update tagline if (profileData.tagline) { // Look for existing tagline element by ID let taglineElement = document.getElementById('profile-tagline'); if (!taglineElement) { // Create tagline element if it doesn't exist const badgesDiv = document.querySelector('.panel-heading div[style*="flex"]'); if (badgesDiv) { taglineElement = document.createElement('h3'); taglineElement.id = 'profile-tagline'; taglineElement.style.marginTop = '10px'; taglineElement.style.marginBottom = '15px'; badgesDiv.parentNode.insertBefore(taglineElement, badgesDiv.nextSibling); } } if (taglineElement) { taglineElement.textContent = profileData.tagline; taglineElement.style.display = 'block'; } } // Update "About {name}" in bio panel (keep first name only) const aboutTitle = document.getElementById('bio-panel-title'); if (aboutTitle && profileData.user && profileData.user.first_name) { aboutTitle.textContent = `About ${profileData.user.first_name}`; } } /** * Escape HTML to prevent XSS * @param {string} text - Text to escape * @returns {string} Escaped HTML */ function escapeHtml(text) { // Convert to string if not already if (text === null || text === undefined) { return ''; } // Convert to string text = String(text); const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } // Initialize Media Gallery System document.addEventListener('DOMContentLoaded', function() { // Add click handler to profile photo const profileImage = document.querySelector('.img-thumbnail'); if (profileImage && window.ProfilePhotoGallery) { // Remove any existing click handlers from edit mode const editWrapper = profileImage.closest('.edit_bio'); // Only add click handler if not in edit mode if (!editWrapper || editWrapper.style.display === 'none') { profileImage.style.cursor = 'pointer'; profileImage.title = 'View profile photos'; profileImage.addEventListener('click', function(e) { // Prevent default action and propagation e.preventDefault(); e.stopPropagation(); // Check if we're in edit mode const editBio = this.closest('.edit_bio'); if (!editBio || editBio.style.display === 'none') { // Check if we can open the gallery if (ProfilePhotoGallery.state.photos.length > 0 || ProfilePhotoGallery.isOwner) { ProfilePhotoGallery.openModal(); } } }); } } // Add click handler to cover photo banner const coverBanner = document.getElementById('profile-cover-photo-container'); if (coverBanner && window.CoverPhotoGallery) { coverBanner.style.cursor = 'pointer'; coverBanner.title = 'View cover photos'; coverBanner.addEventListener('click', function(e) { // Don't open if clicking on carousel controls (if any exist) if (e.target.closest('.carousel-control-prev') || e.target.closest('.carousel-control-next') || e.target.closest('.carousel-indicator')) { return; } if (window.CoverPhotoGallery) { if (window.CoverPhotoGallery.state.photos.length > 0 || window.CoverPhotoGallery.isOwner) { window.CoverPhotoGallery.openModal(); } } }); } // Monitor for edit mode changes const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { const editBio = document.querySelector('.edit_bio'); const profileImg = document.querySelector('.img-thumbnail'); if (editBio && profileImg) { if (editBio.style.display === 'none') { // Not in edit mode - enable gallery click profileImg.style.cursor = 'pointer'; profileImg.title = 'View profile photos'; } else { // In edit mode - disable gallery click profileImg.style.cursor = 'default'; profileImg.title = ''; } } } }); }); // Observe changes to edit_bio element const editBioElement = document.querySelector('.edit_bio'); if (editBioElement) { observer.observe(editBioElement, { attributes: true }); } }); // Utility function to check if in edit mode function isInEditMode() { const editBio = document.querySelector('.edit_bio'); return editBio && editBio.style.display !== 'none'; } // Export for use in other components window.profileUtils = { isInEditMode: isInEditMode }; </script> </div> </div> </div>  <div id="cometchat" class="fake_cometchat"> <div id="cometchat_base" style="left: auto; right: 235px;"> <span id="cometchat_userstab" class="cometchat_tab"> <img src="/sites/stage32.com/themes/two/images/favicon/favicon_live.png" alt="register for stage 32" style="height: 16px; float: left; margin-right:6px;" /> <span id="cometchat_userstab_text">Register / Log In</span> </span> </div> </div>  <div class="register-footer"> <div class="container"> <form action="/welcome/signup" method="get"> <div class="row"> <div class="col-md-6 col-sm-24"> <img src="/sites/stage32.com/themes/two/images/visuals/not-a-member2.png" class="img-responsive" alt="Register for FREE Stage 32 Membership" style="padding-top:6px; padding-bottom:12px;" /> </div> <div class="col-md-8 col-sm-10"> <div class="form-group"> <label class="sr-only">Email address</label> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></div> <input required name="email" type="email" id="input-email" placeholder="Email address" autocapitalize="none" autocomplete="off" autocorrect="off" class="form-control required" value=""> </div> </div> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-success btn-block btn-lg"> <span class="hidden-sm">Register</span> <span class="hidden-xs hidden-md hidden-lg">Join</span> <i class="far fa-arrow-right hidden-sm hidden-md" style="margin-left: 4px"></i> </button> </div> </div> </form> <hr class="visible-xs"> <div class="text-center"> <a href="/welcome/login">Members sign in here</a> </div> </div> </div> <footer id="footer" class="footer-in page-footer small clear-fix"> <div class="top-footer"> <div class="container"> <div class="row"> <div class="col-sm-7 col-md-12"> <img src="/sites/stage32.com/themes/two/images/footer_logo.png" alt="Stage 32 Logo" /> <p class="hidden-xs hidden-sm"> “Stage 32 is A Global Powerhouse<br> Combining Entertainment And Tech” <em>— Forbes</em> </p> </div>  <div class="col-sm-6 col-md-4"> <ul class="list-unstyled footer-links"> <li><a href="/team" title="The Stage 32 Team">The Stage 32 Team</a></li> <li><a href="/content/our-mission" title="The Stage 32 Mission">Mission Statement</a></li> <li><a href="/news" title="Stage 32 in the News">Stage 32 Press</a></li> <li><a href="/advertise" title="Stage 32 Advertising">Advertise on Stage 32</a></li> <li><a href="/education/become-a-teacher" title="Teach with Stage 32">Teach with Stage 32</a></li> </ul> </div>  <div class="col-sm-5 col-md-4"> <ul class="list-unstyled footer-links"> <li><a href="/help" title="Stage 32 Help Items">Need Help?</a></li> <li><a href="/terms" title="Stage 32 Website Terms of Use">Terms of Use</a></li> <li><a href="/terms/copyright" title="Stage 32 Copyright Infringement Claim Policy">DMCA Notice</a></li> <li><a href="/privacy" title="Stage 32 Privacy Policy">Privacy Policy</a></li> <li><a href="/contact" title="Contact Stage 32">Contact Us</a></li> <li><a href="http://crowdsourcingforfilmmakers.com/" title="Crowdsourcing for Filmmakers"><img style="max-height: 22px; margin-top: -2px !important;" src="https://www.stage32.com/sites/stage32.com/themes/two/images/transparent.png" alt="Crowdsourcing for Filmmakers"/></a></li> </ul> </div> <div class="col-sm-6 col-md-4"> <ul class="list-unstyled footer-links">  <li><a href="/app" title="Stage 32 Mobile App for iPhone and Android">Stage 32 Mobile App</a></li> <li><span class="text-danger">NEW</span> <a href="https://stage-32.myshopify.com/" target="_blank">Stage 32 Store</a></li> </ul> </div> </div> </div> </div> <div class="sub-footer"> <div class="container"> <div class="row"> <div class="col-sm-16"><p style="margin-top:20px;">©2011 - 2025 Stage 32 </p><p style="margin-bottom: 15px;"><a href="/invite" style="color: #bebebe">Invite Your Creative Friends to Stage 32</a></p></div> <div class="col-sm-8 pull-right-sm text-right-sm" id="footer-social-icon-row"> <a href="https://www.facebook.com/Stage32" target="_blank" rel="nofollow" title="Stage 32 on Facebook" style="margin-right: 12px;"> <svg id="footer-social-icon-bb" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.657 167.657" xmlSpace="preserve" width="26px" height="26px" > <path d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626v-23.42h20.222V60.978c0-20.037,12.238-30.956,30.115-30.956c8.562,0,15.92,0.638,18.056,0.919v20.944l-12.399,0.006c-9.72,0-11.594,4.618-11.594,11.397v14.947h23.193l-3.025,23.42H94.026v65.653c41.476-5.048,73.631-40.312,73.631-83.154C167.657,37.881,130.125,0.349,83.829,0.349z"></path> </svg> </a> <a href="https://twitter.com/Stage32" target="_blank" rel="nofollow" title="Stage 32 on Twitter" style="margin-right: 12px;"> <svg id="footer-social-icon-bb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" xmlSpace="preserve" width="26px" height="26px" > <path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path> </svg> </a> <a href="https://www.linkedin.com/company/stage-32" target="_blank" rel="nofollow" title="Stage 32 on Linkedin" style="margin-right: 14px;"> <svg id="footer-social-icon-bb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382 382" width="26px" height="26px" > <path d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z"></path> </svg> </a> <a href="https://www.youtube.com/user/stage32com" target="_blank" rel="nofollow" title="Stage 32 on Youtube" style="margin-right: 14px;"> <svg id="footer-social-icon-bb" viewBox="-21 -117 682.66672 682" xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" > <path d="m626.8125 64.035156c-7.375-27.417968-28.992188-49.03125-56.40625-56.414062-50.082031-13.703125-250.414062-13.703125-250.414062-13.703125s-200.324219 0-250.40625 13.183593c-26.886719 7.375-49.03125 29.519532-56.40625 56.933594-13.179688 50.078125-13.179688 153.933594-13.179688 153.933594s0 104.378906 13.179688 153.933594c7.382812 27.414062 28.992187 49.027344 56.410156 56.410156 50.605468 13.707031 250.410156 13.707031 250.410156 13.707031s200.324219 0 250.40625-13.183593c27.417969-7.378907 49.03125-28.992188 56.414062-56.40625 13.175782-50.082032 13.175782-153.933594 13.175782-153.933594s.527344-104.382813-13.183594-154.460938zm-370.601562 249.878906v-191.890624l166.585937 95.945312zm0 0"></path> </svg> </a> <a href="https://instagram.com/stage32" target="_blank" rel="nofollow" title="Stage 32 on Instagram"> <svg id="footer-social-icon-bb" viewBox="0 0 511 511.9" xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" > <path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path> <path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path> <path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path> </svg> </a> </div> </div> </div> </div> </footer> </div> <noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=TLerk1acBb00Ox" style="display:none" height="1" width="1" alt=""></noscript>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1028780420467690'); fbq('track', 'PageView'); </script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1028780420467690&ev=PageView&noscript=1"/> </noscript>  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script> <script>window.jQuery.ui || document.write('<script src="/sites/stage32.com/modules/s32/vendor/jquery-ui/jquery-ui.min.js"><\/script>')</script>  <script type="text/javascript" src="/misc/drupal.js?f"></script> <script type="text/javascript" src="/sites/all/modules/video/js/video.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/track.js?f"></script> <script type="text/javascript" src="/misc/jquery.form.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/stage32.utils.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/bootstrap/js/bootstrap.min.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/autosize/jquery.autosize.min.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jquery-cookie/jquery.cookie.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jquery-hoverIntent/jquery.hoverIntent.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jquery-validation-1.12.0/dist/jquery.validate.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jquery-validation-1.12.0/dist/additional-methods.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jquery.watermark-3.1.4/jquery.watermark.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/jquery.textcomplete.min.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/select2/select2.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/theia-sticky-sidebar/js/theia-sticky-sidebar.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/typeahead/dist/typeahead.bundle.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/imagesloaded/imagesloaded.pkgd.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/masonry/masonry.pkgd.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/vendor/jGrowl/jquery.jgrowl.min.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/plugins.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/main.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/override.js?f"></script> <script type="text/javascript" src="/sites/stage32.com/themes/two/js/mmenu.js?f"></script> <script type="text/javascript">if (typeof Drupal !== "undefined" && Drupal.settings) { <![CDATA[//><!]]> }</script> <script type="text/javascript"> <![CDATA[//><!]]> </script>  <script> var _comscore = _comscore || []; _comscore.push({ c1: "2", c2: "19363277" }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); </script> <noscript> <img src="https://sb.scorecardresearch.com/p?c1=2&c2=19363277&cv=2.0&cj=1"> </noscript> <script>window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/jquery.ihavecookies.min.js"></script>  <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script type="text/javascript" defer="defer" src="/sites/stage32.com/modules/s32/vendor/isotope/jquery.isotope.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/panels.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/stage32.select2.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/vendor/select2-sortable/select2.sortable.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/profile.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/bxslider.min.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/imdb.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/tablednd.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/jquery.dotdotdot.min.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/vendor/fancyBox/source/jquery.fancybox.pack.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/fancybox.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/jquery.jscrollpane.min.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/jquery.mousewheel.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/bootstrap-maxlength.min.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/bootstrap-maxlength-defaults.js?f"></script> <script type="text/javascript" defer="defer" src="/sites/stage32.com/themes/two/js/rrssb.min.js?f"></script>  <script src="//cdn.optimizely.com/js/2663520547.js" pagespeed_no_defer=""></script>  <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"ecfac4e12e","applicationID":"646099287","transactionName":"NQdRNxFVWENSU0dYXgxNcgAXXVleHG9AAgM9D1YNFmtGQlxWWl1UPQNRDBZA","queueTime":0,"applicationTime":540,"atts":"GUBSQVlPS00=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>