/* ========================================================= DASHBOARD — RANDOM SERIES COVER SELECTION ========================================================= */ (function () { function randomizeCover() { const coverElements = Array.from( document.querySelectorAll('.random-series-cover') ); if (coverElements.length !== 10) { setTimeout(randomizeCover, 500); return; } const displayElement = document.querySelector('.random-series-display'); if (!displayElement) { setTimeout(randomizeCover, 500); return; } const displayImage = displayElement.querySelector('img'); if (!displayImage) { setTimeout(randomizeCover, 500); return; } const images = coverElements .map(function (element) { return element.querySelector('img'); }) .filter(function (image) { return image && image.src && image.complete && image.naturalWidth > 0; }); if (!images.length) { setTimeout(randomizeCover, 500); return; } const randomImage = images[Math.floor(Math.random() * images.length)]; displayImage.src = randomImage.currentSrc || randomImage.src; coverElements.forEach(function (element) { if (element !== displayElement) { element.style.visibility = 'hidden'; element.style.pointerEvents = 'none'; } }); displayElement.classList.add('random-cover-ready'); } // Run when Dashboard is initially loaded. setTimeout(randomizeCover, 2000); // Also watch for Baserow internal navigation. let lastCoverCount = 0; setInterval(function () { const currentCovers = document.querySelectorAll('.random-series-cover').length; if (currentCovers !== lastCoverCount) { lastCoverCount = currentCovers; if (currentCovers === 10) { setTimeout(randomizeCover, 1000); } } }, 500); })(); /* ========================================================= DASHBOARD — VISIBILITY SAFETY ========================================================= */ setTimeout(function () { document.body.classList.add('random-dashboard-ready'); }, 8000); /* ========================================================= DASHBOARD — RANDOM SERIES COVER SELECTION ========================================================= */ (function () { function randomizeCover() { const coverElements = Array.from( document.querySelectorAll('.random-series-cover') ); if (coverElements.length !== 10) { setTimeout(randomizeCover, 500); return; } const displayElement = document.querySelector('.random-series-display'); if (!displayElement) { setTimeout(randomizeCover, 500); return; } const displayImage = displayElement.querySelector('img'); if (!displayImage) { setTimeout(randomizeCover, 500); return; } const images = coverElements .map(function (element) { return element.querySelector('img'); }) .filter(function (image) { return image && image.src && image.complete && image.naturalWidth > 0; }); if (!images.length) { setTimeout(randomizeCover, 500); return; } const randomImage = images[Math.floor(Math.random() * images.length)]; displayImage.src = randomImage.currentSrc || randomImage.src; coverElements.forEach(function (element) { if (element !== displayElement) { element.style.visibility = 'hidden'; element.style.pointerEvents = 'none'; } }); displayElement.classList.add('random-cover-ready'); } // Run when Dashboard is initially loaded. setTimeout(randomizeCover, 2000); // Also watch for Baserow internal navigation. let lastCoverCount = 0; setInterval(function () { const currentCovers = document.querySelectorAll('.random-series-cover').length; if (currentCovers !== lastCoverCount) { lastCoverCount = currentCovers; if (currentCovers === 10) { setTimeout(randomizeCover, 1000); } } }, 500); })(); /* ========================================================= BROWSE COLLECTION — COVER LIGHTBOX ========================================================= */ (function () { if (window.coverLightboxInitialized) return; window.coverLightboxInitialized = true; // Create lightbox const lightbox = document.createElement('div'); lightbox.id = 'cover-lightbox'; lightbox.innerHTML = ` `; document.body.appendChild(lightbox); const backdrop = lightbox.querySelector('.cover-lightbox-backdrop'); const image = lightbox.querySelector('.cover-lightbox-image'); const counter = lightbox.querySelector('.cover-lightbox-counter'); const prevButton = lightbox.querySelector('.cover-lightbox-prev'); const nextButton = lightbox.querySelector('.cover-lightbox-next'); let covers = []; let currentIndex = 0; function showCover(index) { if (!covers.length) return; currentIndex = (index + covers.length) % covers.length; image.src = covers[currentIndex]; counter.textContent = `${currentIndex + 1} / ${covers.length}`; // Hide navigation when there is only one cover. if (covers.length <= 1) { prevButton.style.display = 'none'; nextButton.style.display = 'none'; counter.style.display = 'none'; } else { prevButton.style.display = 'flex'; nextButton.style.display = 'flex'; counter.style.display = 'block'; } } function openLightbox(clickedImage) { // Find the table row containing the clicked image. const row = clickedImage.closest('tr'); if (!row) return; // The Cover Art cell is the second table cell (index 1). const coverCell = row.querySelectorAll('td')[1]; if (!coverCell) return; // Get every cover image from this Series. covers = Array.from( coverCell.querySelectorAll('img') ) .map(img => img.currentSrc || img.src) .filter(src => src); // Remove duplicates. covers = [...new Set(covers)]; if (!covers.length) return; // Start on the image that was clicked. currentIndex = covers.indexOf( clickedImage.currentSrc || clickedImage.src ); if (currentIndex < 0) { currentIndex = 0; } showCover(currentIndex); lightbox.classList.add('open'); } function closeLightbox() { lightbox.classList.remove('open'); image.src = ''; covers = []; } // Click a cover image. document.addEventListener('click', function (event) { const clickedImage = event.target.closest( '.collection-table img' ); if (!clickedImage) return; event.preventDefault(); event.stopPropagation(); openLightbox(clickedImage); }); // Previous cover. prevButton.addEventListener( 'click', function (event) { event.stopPropagation(); showCover(currentIndex - 1); } ); // Next cover. nextButton.addEventListener( 'click', function (event) { event.stopPropagation(); showCover(currentIndex + 1); } ); // Close when clicking outside the image. backdrop.addEventListener( 'click', function (event) { if ( event.target.closest('img') || event.target.closest('button') ) { return; } closeLightbox(); } ); // Keyboard controls. document.addEventListener( 'keydown', function (event) { if (!lightbox.classList.contains('open')) { return; } if (event.key === 'Escape') { closeLightbox(); } if (event.key === 'ArrowLeft') { showCover(currentIndex - 1); } if (event.key === 'ArrowRight') { showCover(currentIndex + 1); } } ); })(); /* ========================================================= SERIES DETAILS — COVER CAROUSEL & LIGHTBOX ========================================================= */ (function () { let covers = []; let currentIndex = 0; let carouselOpen = false; /* * --------------------------------------------------------- * SERIES TRACKING * --------------------------------------------------------- */ let lastSeriesID = null; let resettingForNewSeries = false; /* * --------------------------------------------------------- * PAGE DETECTION * --------------------------------------------------------- */ function isSeriesDetailsPage() { return window.location.pathname.includes( '/series-details' ); } /* * --------------------------------------------------------- * GET CURRENT SERIES ID * --------------------------------------------------------- */ function getCurrentSeriesID() { const url = new URL(window.location.href); return url.searchParams.get( 'seriesID' ); } /* * --------------------------------------------------------- * REMOVE EXISTING LIGHTBOX * --------------------------------------------------------- */ const existingLightbox = document.getElementById( 'series-detail-lightbox' ); if (existingLightbox) { existingLightbox.remove(); } /* * --------------------------------------------------------- * CREATE LIGHTBOX * --------------------------------------------------------- */ const lightbox = document.createElement('div'); lightbox.id = 'series-detail-lightbox'; lightbox.innerHTML = ` `; document.body.appendChild(lightbox); /* * --------------------------------------------------------- * LIGHTBOX ELEMENTS * --------------------------------------------------------- */ const backdrop = lightbox.querySelector( '.series-detail-lightbox-backdrop' ); const currentImage = lightbox.querySelector( '.series-detail-carousel-current' ); const previousImage = lightbox.querySelector( '.series-detail-carousel-prev' ); const nextImage = lightbox.querySelector( '.series-detail-carousel-next' ); const previousButton = lightbox.querySelector( '.series-detail-carousel-arrow-prev' ); const nextButton = lightbox.querySelector( '.series-detail-carousel-arrow-next' ); const counter = lightbox.querySelector( '.series-detail-carousel-counter' ); /* * --------------------------------------------------------- * VALID COVER URL * --------------------------------------------------------- */ function isValidCoverURL(url) { if (!url) { return false; } /* * Ignore Baserow's fallback page URL. */ if ( url.includes( '/builder/545491/preview/series-details' ) ) { return false; } /* * Only accept actual Baserow file URLs. */ if ( !url.includes( 'baserow-backend' ) ) { return false; } return true; } /* * --------------------------------------------------------- * COLLECT COVERS * --------------------------------------------------------- * * Covers are collected only for the current Series. * * The array is cleared whenever the seriesID changes. * --------------------------------------------------------- */ function collectCovers() { if ( !isSeriesDetailsPage() || resettingForNewSeries ) { return; } const sourceElements = Array.from( document.querySelectorAll( '.series-detail-cover' ) ); sourceElements.forEach( function (element) { const image = element.querySelector('img'); if (!image) { return; } const url = image.currentSrc || image.src; if ( !isValidCoverURL(url) ) { return; } /* * Add only genuinely new covers * for the CURRENT series. */ if ( !covers.includes(url) ) { covers.push(url); console.log( 'Series Details: discovered cover', covers.length, url ); } } ); return covers; } /* * --------------------------------------------------------- * RESET CAROUSEL FOR NEW SERIES * --------------------------------------------------------- */ function resetForNewSeries(seriesID) { console.log( 'Series Details: switching to series', seriesID ); /* * Prevent observers from immediately * collecting the old Series covers. */ resettingForNewSeries = true; /* * Clear ALL previous carousel state. */ covers = []; currentIndex = 0; carouselOpen = false; /* * Close the lightbox if it was open. */ lightbox.classList.remove( 'open' ); /* * Clear the lightbox images. */ currentImage.src = ''; previousImage.src = ''; nextImage.src = ''; counter.textContent = ''; /* * Hide navigation until the new Series * covers have finished rendering. */ previousImage.style.display = 'none'; nextImage.style.display = 'none'; previousButton.style.display = 'none'; nextButton.style.display = 'none'; counter.style.display = 'none'; /* * Give Application Builder time to replace * the Series Details source images. */ setTimeout( function () { if ( !isSeriesDetailsPage() ) { resettingForNewSeries = false; return; } const currentID = getCurrentSeriesID(); /* * Make sure we are still looking * at the same Series. */ if ( currentID !== seriesID ) { return; } resettingForNewSeries = false; collectCovers(); currentIndex = 0; updateMainImage(); console.log( 'Series Details: reset complete for series', seriesID, 'with', covers.length, 'covers' ); }, 750 ); } /* * --------------------------------------------------------- * CHECK FOR SERIES CHANGE * --------------------------------------------------------- */ function checkForSeriesChange() { if ( !isSeriesDetailsPage() ) { /* * We are outside Series Details. * Forget the previous Series so that the * next visit starts completely fresh. */ if ( lastSeriesID !== null ) { lastSeriesID = null; covers = []; currentIndex = 0; resettingForNewSeries = false; } return; } const currentID = getCurrentSeriesID(); if ( currentID !== lastSeriesID ) { lastSeriesID = currentID; if (currentID !== null) { resetForNewSeries( currentID ); } } } /* * --------------------------------------------------------- * GET MAIN DISPLAY IMAGE * --------------------------------------------------------- */ function getMainImage() { const element = document.querySelector( '.series-detail-carousel-display' ); if (!element) { return null; } return element.querySelector( 'img' ); } /* * --------------------------------------------------------- * UPDATE MAIN DISPLAY IMAGE * --------------------------------------------------------- */ function updateMainImage() { if ( resettingForNewSeries ) { return; } const image = getMainImage(); if (!image) { return; } if (!covers.length) { return; } const desiredURL = covers[currentIndex]; if (!desiredURL) { return; } if ( image.src !== desiredURL ) { image.src = desiredURL; } } /* * --------------------------------------------------------- * SHOW COVER * --------------------------------------------------------- */ function showCover(index) { if ( resettingForNewSeries ) { return; } collectCovers(); if (!covers.length) { return; } currentIndex = ( index + covers.length ) % covers.length; const total = covers.length; const previousIndex = ( currentIndex - 1 + total ) % total; const nextIndex = ( currentIndex + 1 ) % total; /* * Current lightbox image */ currentImage.src = covers[currentIndex]; /* * Previous side image */ previousImage.src = covers[previousIndex]; /* * Next side image */ nextImage.src = covers[nextIndex]; /* * Counter */ counter.textContent = `${currentIndex + 1} / ${total}`; /* * Main page image */ updateMainImage(); /* * Navigation visibility */ if ( total <= 1 ) { previousImage.style.display = 'none'; nextImage.style.display = 'none'; previousButton.style.display = 'none'; nextButton.style.display = 'none'; counter.style.display = 'none'; } else { previousImage.style.display = 'block'; nextImage.style.display = 'block'; previousButton.style.display = 'flex'; nextButton.style.display = 'flex'; counter.style.display = 'block'; } } /* * --------------------------------------------------------- * EXPOSE SHOW COVER * --------------------------------------------------------- */ window.seriesDetailShowCover = showCover; /* * --------------------------------------------------------- * OPEN LIGHTBOX * --------------------------------------------------------- */ function openLightbox() { if ( resettingForNewSeries ) { return; } collectCovers(); if (!covers.length) { return; } /* * Determine which cover is currently * displayed in the standalone image. */ const mainImage = getMainImage(); const currentURL = mainImage ? ( mainImage.currentSrc || mainImage.src ) : ''; const matchingIndex = covers.indexOf( currentURL ); if ( matchingIndex >= 0 ) { currentIndex = matchingIndex; } else if ( currentIndex >= covers.length ) { currentIndex = 0; } showCover( currentIndex ); carouselOpen = true; lightbox.classList.add( 'open' ); } /* * --------------------------------------------------------- * CLOSE LIGHTBOX * --------------------------------------------------------- */ function closeLightbox() { carouselOpen = false; lightbox.classList.remove( 'open' ); currentImage.src = ''; previousImage.src = ''; nextImage.src = ''; } /* * --------------------------------------------------------- * MAIN COVER CLICK * --------------------------------------------------------- */ document.addEventListener( 'click', function (event) { const clickedImage = event.target.closest( '.series-detail-carousel-display img' ); if (!clickedImage) { return; } event.preventDefault(); event.stopPropagation(); openLightbox(); } ); /* * --------------------------------------------------------- * PREVIOUS SIDE IMAGE * --------------------------------------------------------- */ previousImage.addEventListener( 'click', function (event) { event.preventDefault(); event.stopPropagation(); showCover( currentIndex - 1 ); } ); /* * --------------------------------------------------------- * NEXT SIDE IMAGE * --------------------------------------------------------- */ nextImage.addEventListener( 'click', function (event) { event.preventDefault(); event.stopPropagation(); showCover( currentIndex + 1 ); } ); /* * --------------------------------------------------------- * PREVIOUS ARROW * --------------------------------------------------------- */ previousButton.addEventListener( 'click', function (event) { event.preventDefault(); event.stopPropagation(); showCover( currentIndex - 1 ); } ); /* * --------------------------------------------------------- * NEXT ARROW * --------------------------------------------------------- */ nextButton.addEventListener( 'click', function (event) { event.preventDefault(); event.stopPropagation(); showCover( currentIndex + 1 ); } ); /* * --------------------------------------------------------- * BACKGROUND CLOSE * --------------------------------------------------------- */ backdrop.addEventListener( 'click', function (event) { if ( event.target.closest('img') || event.target.closest('button') ) { return; } closeLightbox(); } ); /* * --------------------------------------------------------- * KEYBOARD CONTROLS * --------------------------------------------------------- */ document.addEventListener( 'keydown', function (event) { if (!carouselOpen) { return; } if ( event.key === 'Escape' ) { event.preventDefault(); closeLightbox(); return; } if ( event.key === 'ArrowLeft' ) { event.preventDefault(); showCover( currentIndex - 1 ); return; } if ( event.key === 'ArrowRight' ) { event.preventDefault(); showCover( currentIndex + 1 ); return; } } ); /* * --------------------------------------------------------- * WATCH FOR BASEROW RE-RENDERING * --------------------------------------------------------- */ const observer = new MutationObserver( function () { checkForSeriesChange(); if ( !isSeriesDetailsPage() || resettingForNewSeries ) { return; } collectCovers(); if ( covers.length && !carouselOpen ) { updateMainImage(); } } ); observer.observe( document.body, { subtree: true, childList: true, attributes: true, attributeFilter: [ 'src' ] } ); /* * --------------------------------------------------------- * CONTINUOUS STATE CHECK * --------------------------------------------------------- */ setInterval( function () { checkForSeriesChange(); if ( isSeriesDetailsPage() && !resettingForNewSeries ) { collectCovers(); if ( covers.length && !carouselOpen ) { updateMainImage(); } } }, 250 ); /* * --------------------------------------------------------- * WINDOW RESIZE * --------------------------------------------------------- */ window.addEventListener( 'resize', function () { if ( isSeriesDetailsPage() ) { updateMainImage(); } } ); /* * --------------------------------------------------------- * INITIALIZE * --------------------------------------------------------- */ setTimeout( function () { checkForSeriesChange(); }, 250 ); setTimeout( function () { if ( isSeriesDetailsPage() && !resettingForNewSeries ) { collectCovers(); currentIndex = 0; updateMainImage(); console.log( 'Series Details carousel initialized with', covers.length, 'covers' ); } }, 1500 ); })(); /* ========================================================= SERIES DETAILS — SIDE PREVIEWS ========================================================= */ (function () { /* * --------------------------------------------------------- * PAGE DETECTION * --------------------------------------------------------- */ function isSeriesDetailsPage() { return window.location.pathname.includes( '/series-details' ); } /* * --------------------------------------------------------- * REMOVE PAGE PREVIEWS * * This is important because Baserow can navigate between * Application Builder pages without reloading the page. * --------------------------------------------------------- */ function removePagePreviews() { const previous = document.querySelector( '.series-detail-page-preview-prev' ); const next = document.querySelector( '.series-detail-page-preview-next' ); if (previous) { previous.remove(); } if (next) { next.remove(); } } /* * --------------------------------------------------------- * STATE * --------------------------------------------------------- */ let observedMainImage = null; let mainImageObserver = null; let lastPathname = window.location.pathname; /* * --------------------------------------------------------- * UPDATE PAGE PREVIEWS * --------------------------------------------------------- */ function updatePagePreviews() { /* * Never create previews outside Series Details. */ if (!isSeriesDetailsPage()) { removePagePreviews(); return; } const sourceImages = Array.from( document.querySelectorAll( '.series-detail-cover img' ) ); const covers = sourceImages .map(function (img) { return ( img.currentSrc || img.src ); }) .filter(function (src) { return ( src && src.includes('baserow-backend') ); }); const mainImage = document.querySelector( '.series-detail-carousel-display img' ); if (!mainImage || !covers.length) { return; } const current = mainImage.currentSrc || mainImage.src; const currentIndex = covers.indexOf(current); if (currentIndex < 0) { return; } const previousIndex = ( currentIndex - 1 + covers.length ) % covers.length; const nextIndex = ( currentIndex + 1 ) % covers.length; let previous = document.querySelector( '.series-detail-page-preview-prev' ); let next = document.querySelector( '.series-detail-page-preview-next' ); /* * --------------------------------------------------------- * CREATE LEFT PREVIEW * --------------------------------------------------------- */ if (!previous) { previous = document.createElement('img'); previous.className = 'series-detail-page-preview ' + 'series-detail-page-preview-prev'; previous.alt = 'Previous cover'; document.body.appendChild( previous ); } /* * --------------------------------------------------------- * CREATE RIGHT PREVIEW * --------------------------------------------------------- */ if (!next) { next = document.createElement('img'); next.className = 'series-detail-page-preview ' + 'series-detail-page-preview-next'; next.alt = 'Next cover'; document.body.appendChild( next ); } /* * --------------------------------------------------------- * UPDATE PREVIEW IMAGES * --------------------------------------------------------- */ const previousURL = covers[previousIndex]; const nextURL = covers[nextIndex]; if ( previous.src !== previousURL ) { previous.src = previousURL; } if ( next.src !== nextURL ) { next.src = nextURL; } /* * --------------------------------------------------------- * POSITION PREVIEWS * --------------------------------------------------------- */ const rect = mainImage.getBoundingClientRect(); const previewWidth = 150; const previewGap = 30; previous.style.left = Math.max( 20, rect.left - previewWidth - previewGap ) + 'px'; previous.style.top = ( rect.top + rect.height / 2 ) + 'px'; next.style.left = ( rect.right + previewGap ) + 'px'; next.style.top = ( rect.top + rect.height / 2 ) + 'px'; /* * --------------------------------------------------------- * SHOW / HIDE * --------------------------------------------------------- */ if ( covers.length <= 1 ) { previous.style.display = 'none'; next.style.display = 'none'; return; } previous.style.display = 'block'; next.style.display = 'block'; /* * --------------------------------------------------------- * LEFT PREVIEW CLICK * --------------------------------------------------------- */ previous.onclick = function (event) { event.preventDefault(); event.stopPropagation(); if ( typeof window.seriesDetailShowCover === 'function' ) { window.seriesDetailShowCover( previousIndex ); } }; /* * --------------------------------------------------------- * RIGHT PREVIEW CLICK * --------------------------------------------------------- */ next.onclick = function (event) { event.preventDefault(); event.stopPropagation(); if ( typeof window.seriesDetailShowCover === 'function' ) { window.seriesDetailShowCover( nextIndex ); } }; } /* * --------------------------------------------------------- * WATCH MAIN IMAGE * --------------------------------------------------------- */ function watchMainImage() { /* * Don't watch anything outside Series Details. */ if (!isSeriesDetailsPage()) { if (mainImageObserver) { mainImageObserver.disconnect(); mainImageObserver = null; } observedMainImage = null; return; } const mainImage = document.querySelector( '.series-detail-carousel-display img' ); if (!mainImage) { return; } /* * Already watching this exact image. */ if ( observedMainImage === mainImage ) { return; } /* * Stop watching the old image. */ if (mainImageObserver) { mainImageObserver.disconnect(); } observedMainImage = mainImage; /* * Watch for the carousel changing src. */ mainImageObserver = new MutationObserver( function () { if ( isSeriesDetailsPage() ) { updatePagePreviews(); } } ); mainImageObserver.observe( mainImage, { attributes: true, attributeFilter: [ 'src' ] } ); updatePagePreviews(); } /* * --------------------------------------------------------- * WATCH FOR BASEROW DOM CHANGES * --------------------------------------------------------- */ const pageObserver = new MutationObserver( function () { if ( !isSeriesDetailsPage() ) { removePagePreviews(); watchMainImage(); return; } watchMainImage(); updatePagePreviews(); } ); pageObserver.observe( document.body, { subtree: true, childList: true } ); /* * --------------------------------------------------------- * DETECT APPLICATION BUILDER NAVIGATION * * This catches navigation where the browser URL changes * without a full page reload. * --------------------------------------------------------- */ setInterval( function () { const currentPathname = window.location.pathname; if ( currentPathname !== lastPathname ) { lastPathname = currentPathname; /* * We left Series Details. */ if ( !currentPathname.includes( '/series-details' ) ) { removePagePreviews(); if (mainImageObserver) { mainImageObserver.disconnect(); mainImageObserver = null; } observedMainImage = null; return; } /* * We entered Series Details. */ watchMainImage(); updatePagePreviews(); } }, 250 ); /* * --------------------------------------------------------- * FALLBACK UPDATE * --------------------------------------------------------- */ setInterval( function () { if ( isSeriesDetailsPage() ) { watchMainImage(); updatePagePreviews(); } else { removePagePreviews(); } }, 500 ); /* * --------------------------------------------------------- * WINDOW RESIZE * --------------------------------------------------------- */ window.addEventListener( 'resize', function () { if ( isSeriesDetailsPage() ) { updatePagePreviews(); } } ); /* * --------------------------------------------------------- * INITIALIZE * --------------------------------------------------------- */ setTimeout( function () { if ( isSeriesDetailsPage() ) { watchMainImage(); updatePagePreviews(); } else { removePagePreviews(); } }, 1000 ); })(); /* ========================================================= SERIES DETAILS — DOWNLOAD STATUS COLOR ========================================================= */ (function () { function updateDownloadStatus() { const element = document.querySelector('.download-status'); if (!element) return; const text = element.textContent.trim().toLowerCase(); element.classList.remove( 'status-complete', 'status-partial', 'status-not-downloaded' ); if (text.includes('complete')) { element.classList.add( 'status-complete' ); } else if (text.includes('partial')) { element.classList.add( 'status-partial' ); } else if ( text.includes('not downloaded') ) { element.classList.add( 'status-not-downloaded' ); } } updateDownloadStatus(); setInterval( updateDownloadStatus, 500 ); })(); /* ========================================================= SERIES DETAILS — PHYSICAL AVAILABILITY COLOR ========================================================= */ (function () { function updatePhysicalAvailability() { const element = document.querySelector('.physical-availability'); if (!element) return; const text = element.textContent.trim().toLowerCase(); element.classList.remove( 'status-available', 'status-no-physical', 'status-discontinued', 'status-unknown', 'status-other' ); if (text.includes('available')) { element.classList.add('status-available'); } else if (text.includes('no physical')) { element.classList.add('status-no-physical'); } else if (text.includes('discontinued')) { element.classList.add('status-discontinued'); } else if (text.includes('unknown') || text.includes('unsure')) { element.classList.add('status-unknown'); } else if (text.includes('other')) { element.classList.add('status-other'); } } updatePhysicalAvailability(); setInterval( updatePhysicalAvailability, 500 ); })(); /* ========================================================= SERIES DETAILS — ON ORDER ENTRY CHIPS ========================================================= */ (function () { function formatOnOrder() { const element = document.querySelector('.on-order'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; /* * If the chips are already present, * nothing needs to be done. */ if ( textElement.querySelector('.entry-chip') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const entries = originalText .substring(colonIndex + 1) .split(',') .map(function (entry) { return entry.trim(); }) .filter(function (entry) { return entry !== ''; }); if (!entries.length) return; textElement.innerHTML = '' + label + ' ' + entries.map(function (entry) { return ( '' + entry + '' ); }).join(' '); } /* * Baserow can re-render dynamic elements, * so keep checking for the finished element. */ setInterval( formatOnOrder, 300 ); })(); /* ========================================================= SERIES DETAILS — PHYSICAL OWNED ENTRY CHIPS ========================================================= */ (function () { function formatPhysicalOwned() { const element = document.querySelector('.physical-owned'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.entry-chip') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const entries = originalText .substring(colonIndex + 1) .split(',') .map(function (entry) { return entry.trim(); }) .filter(function (entry) { return entry !== ''; }); if (!entries.length) return; textElement.innerHTML = '' + label + ' ' + entries.map(function (entry) { return ( '' + entry + '' ); }).join(' '); } setInterval( formatPhysicalOwned, 300 ); })(); /* ========================================================= SERIES DETAILS — PHYSICAL WANTED ENTRY CHIPS ========================================================= */ (function () { function formatPhysicalWanted() { const element = document.querySelector('.physical-wanted'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.entry-chip') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const entries = originalText .substring(colonIndex + 1) .split(',') .map(function (entry) { return entry.trim(); }) .filter(function (entry) { return entry !== ''; }); if (!entries.length) return; textElement.innerHTML = '' + label + ' ' + entries.map(function (entry) { return ( '' + entry + '' ); }).join(' '); } setInterval( formatPhysicalWanted, 300 ); })(); /* ========================================================= SERIES DETAILS — MTL ENTRY CHIPS ========================================================= */ (function () { function formatMTL() { const element = document.querySelector('.mtl-entries'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.entry-chip') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const entries = originalText .substring(colonIndex + 1) .split(',') .map(function (entry) { return entry.trim(); }) .filter(function (entry) { return entry !== ''; }); if (!entries.length) return; textElement.innerHTML = '' + label + ' ' + entries.map(function (entry) { return ( '' + entry + '' ); }).join(' '); } setInterval( formatMTL, 300 ); })(); /* ========================================================= SERIES DETAILS — PHYSICAL FORMAT COLORING ========================================================= */ (function () { function formatPhysicalFormat() { const element = document.querySelector('.physical-format'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.format-value') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const value = originalText .substring(colonIndex + 1) .trim(); if (!value) return; let valueClass = ''; if ( value === 'Doujinshi' ) { valueClass = 'format-doujinshi'; } else if ( value === 'Tankōbon' ) { valueClass = 'format-tankobon'; } else if ( value === 'Doujinshi/Tankōbon' ) { valueClass = 'format-both'; } textElement.innerHTML = '' + label + ' ' + '' + value + ''; } setInterval( formatPhysicalFormat, 300 ); })(); /* ========================================================= SERIES DETAILS — PHYSICAL LANGUAGE COLORING ========================================================= */ (function () { function formatPhysicalLanguage() { const element = document.querySelector('.physical-language'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.language-value') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const values = originalText .substring(colonIndex + 1) .split(',') .map(function (value) { return value.trim(); }) .filter(function (value) { return value !== ''; }); if (!values.length) return; const formattedValues = values.map(function (value) { const lower = value.toLowerCase(); let valueClass = 'language-value'; if (lower === 'japanese') { valueClass += ' language-japanese'; } else if (lower === 'j18') { valueClass += ' language-j18'; } else if (lower === 'fakku') { valueClass += ' language-fakku'; } else if (lower === 'irodori') { valueClass += ' language-irodori'; } return ( '' + value + '' ); }); textElement.innerHTML = '' + label + ' ' + formattedValues.join(', '); } setInterval( formatPhysicalLanguage, 300 ); })(); /* ========================================================= SERIES DETAILS — ORDER SOURCE COLORING ========================================================= */ (function () { function formatOrderSource() { const element = document.querySelector('.order-source'); if (!element) return; const textElement = element.querySelector('.ab-text'); if (!textElement) return; if ( textElement.querySelector('.order-source-value') ) { return; } const originalText = textElement.textContent.trim(); const colonIndex = originalText.indexOf(':'); if (colonIndex < 0) return; const label = originalText.substring( 0, colonIndex + 1 ); const value = originalText .substring(colonIndex + 1) .trim(); if (!value) return; let valueClass = 'order-source-value'; const normalizedValue = value.toLowerCase(); if ( normalizedValue === 'zenmarket' ) { valueClass += ' source-zenmarket'; } else if ( normalizedValue === 'fakku' ) { valueClass += ' source-fakku'; } else if ( normalizedValue === 'j18' ) { valueClass += ' source-j18'; } else if ( normalizedValue === 'irodori' ) { valueClass += ' source-irodori'; } textElement.innerHTML = '' + label + ' ' + '' + value + ''; } setInterval( formatOrderSource, 300 ); })(); /* ========================================================= BROWSE COLLECTION — TABLE STATUS COLORING ========================================================= */ (function () { function colorCollectionFields() { const table = document.querySelector( '.collection-table' ); if (!table) { return; } /* * Find the table headers. */ const headers = Array.from( table.querySelectorAll( 'th' ) ); if (!headers.length) { return; } /* * Build a map of column names to indexes. */ const columnIndexes = {}; headers.forEach( function (header, index) { const name = header.textContent .trim() .toLowerCase(); columnIndexes[name] = index; } ); /* * Find the actual rows. */ const rows = Array.from( table.querySelectorAll( 'tr' ) ); rows.forEach( function (row) { const cells = Array.from( row.querySelectorAll( 'td' ) ); if (!cells.length) { return; } /* * ------------------------------------------------- * DOWNLOAD STATUS * ------------------------------------------------- */ applyColor( cells, columnIndexes, 'download status', [ 'browse-status-complete', 'browse-status-partial', 'browse-status-not-downloaded' ], function (text, element) { if ( text === 'complete' ) { element.classList.add( 'browse-status-complete' ); } else if ( text === 'partial' ) { element.classList.add( 'browse-status-partial' ); } else if ( text === 'not downloaded' ) { element.classList.add( 'browse-status-not-downloaded' ); } } ); /* * ------------------------------------------------- * MTL ENTRIES * ------------------------------------------------- */ applyColor( cells, columnIndexes, 'mtl entries', [ 'browse-mtl' ], function (text, element) { if (text) { element.classList.add( 'browse-mtl' ); } } ); /* * ------------------------------------------------- * PHYSICAL OWNED ENTRIES * ------------------------------------------------- */ applyColor( cells, columnIndexes, 'physical owned entries', [ 'browse-physical-owned' ], function (text, element) { if (text) { element.classList.add( 'browse-physical-owned' ); } } ); /* * ------------------------------------------------- * PHYSICAL WANTED ENTRIES * ------------------------------------------------- */ applyColor( cells, columnIndexes, 'physical wanted entries', [ 'browse-physical-wanted' ], function (text, element) { if (text) { element.classList.add( 'browse-physical-wanted' ); } } ); /* * ------------------------------------------------- * ON ORDER ENTRIES * ------------------------------------------------- */ applyColor( cells, columnIndexes, 'on order entries', [ 'browse-on-order' ], function (text, element) { if (text) { element.classList.add( 'browse-on-order' ); } } ); } ); } /* * --------------------------------------------------------- * APPLY COLOR TO A SPECIFIC COLUMN * --------------------------------------------------------- */ function applyColor( cells, columnIndexes, columnName, classes, colorFunction ) { const index = columnIndexes[columnName]; if ( index === undefined ) { return; } const cell = cells[index]; if (!cell) { return; } /* * Remove old classes. */ classes.forEach( function (className) { cell.classList.remove( className ); } ); /* * Find the deepest element containing * the actual displayed value. */ let target = findValueElement(cell); if (!target) { target = cell; } const text = target.textContent .trim() .toLowerCase(); colorFunction( text, target ); } /* * --------------------------------------------------------- * FIND VALUE ELEMENT * --------------------------------------------------------- * * Baserow's Application Builder table does not necessarily * use a normal HTML table structure for its contents. * * Find the deepest element containing the displayed value. * --------------------------------------------------------- */ function findValueElement(cell) { const elements = Array.from( cell.querySelectorAll('*') ); /* * Start with the deepest elements. */ elements.reverse(); for ( let i = 0; i < elements.length; i++ ) { const element = elements[i]; if ( element.children.length === 0 && element.textContent.trim() ) { return element; } } return null; } /* * --------------------------------------------------------- * INITIAL LOAD * --------------------------------------------------------- */ setTimeout( colorCollectionFields, 1000 ); /* * --------------------------------------------------------- * KEEP SYNCHRONIZED * --------------------------------------------------------- */ setInterval( colorCollectionFields, 500 ); })(); /* ========================================================= SERIES DETAILS — DOWNLOAD PROGRESS BAR ========================================================= */ (function () { function updateEntryCompletion() { const element = document.querySelector( '.entry-completion' ); if (!element) { return; } /* * Find the hidden Download Progress source. * * Example: * Download Progress: 3 / 5 */ const source = document.querySelector( '.download-progress-source' ); if (!source) { return; } const sourceText = source.textContent.trim(); const match = sourceText.match( /(\d+)\s*\/\s*(\d+)/ ); if (!match) { return; } const downloaded = parseInt( match[1], 10 ); const total = parseInt( match[2], 10 ); if ( isNaN(downloaded) || isNaN(total) || total <= 0 ) { return; } /* * Calculate percentage. */ const percentage = Math.min( 100, Math.max( 0, (downloaded / total) * 100 ) ); /* * Determine status color. */ let statusClass = 'not-downloaded'; if ( downloaded >= total ) { statusClass = 'complete'; } else if ( downloaded > 0 ) { statusClass = 'partial'; } /* * Don't rebuild the element unnecessarily. */ const existingPercentage = element.dataset.progressPercentage; const existingDownloaded = element.dataset.downloaded; const existingTotal = element.dataset.total; if ( existingPercentage === String(percentage) && existingDownloaded === String(downloaded) && existingTotal === String(total) ) { return; } /* * Store current values. */ element.dataset.progressPercentage = String(percentage); element.dataset.downloaded = String(downloaded); element.dataset.total = String(total); /* * Build the progress display. */ element.innerHTML = `

DOWNLOAD PROGRESS

${downloaded} / ${total} entries ${Math.round(percentage)}%

`; } /* * --------------------------------------------------------- * INITIAL LOAD * --------------------------------------------------------- */ setTimeout( updateEntryCompletion, 1000 ); /* * --------------------------------------------------------- * KEEP SYNCHRONIZED * --------------------------------------------------------- */ setInterval( updateEntryCompletion, 500 ); })(); /* ========================================================= AUTHOR DETAILS — DIGITAL STATUS COLORING ========================================================= */ (function () { function isAuthorDetailsPage() { return window.location.pathname.includes('/author-details'); } function updateAuthorDigitalStatus() { if (!isAuthorDetailsPage()) { return; } const textElements = Array.from( document.querySelectorAll('.ab-text') ); textElements.forEach(function (element) { const text = element.textContent .trim() .toLowerCase(); if ( text !== 'digital: complete' && text !== 'digital: partial' && text !== 'digital: not downloaded' ) { return; } element.classList.remove( 'author-digital-status', 'status-complete', 'status-partial', 'status-not-downloaded' ); element.classList.add( 'author-digital-status' ); if ( text === 'digital: complete' ) { element.classList.add( 'status-complete' ); } else if ( text === 'digital: partial' ) { element.classList.add( 'status-partial' ); } else if ( text === 'digital: not downloaded' ) { element.classList.add( 'status-not-downloaded' ); } }); } setTimeout( updateAuthorDigitalStatus, 1000 ); setInterval( updateAuthorDigitalStatus, 500 ); })(); /* ========================================================= AUTHOR DETAILS — SINGLE COVER LIGHTBOX ========================================================= */ (function () { /* * ===================================================== * AUTHOR DETAILS ONLY * ===================================================== */ function isAuthorDetailsPage() { return window.location.pathname.includes( '/author-details' ); } if (!isAuthorDetailsPage()) { return; } if (window.authorSeriesSingleCoverLightboxInitialized) { return; } window.authorSeriesSingleCoverLightboxInitialized = true; /* * ===================================================== * CREATE LIGHTBOX * ===================================================== */ const lightbox = document.createElement('div'); lightbox.id = 'author-series-cover-lightbox'; lightbox.innerHTML = ` `; document.body.appendChild(lightbox); const backdrop = lightbox.querySelector( '.author-series-cover-lightbox-backdrop' ); const previewImage = lightbox.querySelector( '.author-series-cover-lightbox-image' ); /* * ===================================================== * OPEN COVER * ===================================================== */ function openCover(coverElement) { /* * Find the actual image inside * the Baserow Image element. */ const image = coverElement.querySelector('img'); if (!image) { return; } const src = image.currentSrc || image.src; if (!src) { return; } previewImage.src = src; previewImage.alt = image.alt || ''; lightbox.classList.add('open'); } /* * ===================================================== * CLOSE COVER * ===================================================== */ function closeCover() { lightbox.classList.remove('open'); previewImage.src = ''; } /* * ===================================================== * COVER CLICK * ===================================================== */ document.addEventListener( 'click', function (event) { if (!isAuthorDetailsPage()) { return; } /* * Target the Baserow Image element * using its CSS class. */ const coverElement = event.target.closest( '.author-series-cover' ); if (!coverElement) { return; } /* * Don't react to anything inside * the lightbox itself. */ if ( coverElement.closest( '#author-series-cover-lightbox' ) ) { return; } event.preventDefault(); event.stopPropagation(); openCover(coverElement); }, true ); /* * ===================================================== * CLICK BACKDROP TO CLOSE * ===================================================== */ backdrop.addEventListener( 'click', function (event) { if ( event.target.closest('img') || event.target.closest('button') ) { return; } closeCover(); } ); /* * ===================================================== * ESCAPE TO CLOSE * ===================================================== */ document.addEventListener( 'keydown', function (event) { if ( !lightbox.classList.contains( 'open' ) ) { return; } if ( event.key === 'Escape' ) { closeCover(); } } ); })(); /* ========================================================= SERIES DETAILS — FAVORITE BUTTON STATE & HOVER TEXT ========================================================= */ (function () { function isSeriesDetailsPage() { return window.location.pathname.includes('/series-details'); } function updateFavoriteButton() { if (!isSeriesDetailsPage()) { return; } const container = document.querySelector('.favorite-button'); const source = document.querySelector('.favorite-state-source'); if (!container || !source) { return; } const button = container.querySelector('button'); if (!button) { return; } const textElement = button.querySelector('span'); if (!textElement) { return; } const value = source.textContent .trim() .toLowerCase(); const isFavorite = value === 'true'; container.classList.toggle( 'favorite-active', isFavorite ); /* * Only change the normal button text here. * Hover is handled separately below. */ if ( !button.matches(':hover') ) { textElement.textContent = isFavorite ? 'Favorited' : 'Favorite'; } } function updateHoverText() { if (!isSeriesDetailsPage()) { return; } const container = document.querySelector('.favorite-button'); if (!container) { return; } const button = container.querySelector('button'); if (!button) { return; } const textElement = button.querySelector('span'); if (!textElement) { return; } if ( container.classList.contains('favorite-active') && button.matches(':hover') ) { textElement.textContent = 'Unfavorite'; } else { const source = document.querySelector( '.favorite-state-source' ); if (!source) { return; } const value = source.textContent .trim() .toLowerCase(); textElement.textContent = value === 'true' ? 'Favorited' : 'Favorite'; } } /* * Detect mouse entering/leaving the button. */ document.addEventListener( 'mouseover', function (event) { const button = event.target.closest( '.favorite-button button' ); if (!button) { return; } updateHoverText(); } ); document.addEventListener( 'mouseout', function (event) { const button = event.target.closest( '.favorite-button button' ); if (!button) { return; } setTimeout( updateHoverText, 10 ); } ); setTimeout( updateFavoriteButton, 1000 ); setInterval( updateFavoriteButton, 250 ); })(); /* ========================================================= DASHBOARD — RECENTLY DOWNLOADED STATUS COLORING ========================================================= */ (function () { function updateRecentlyUpdatedDigitalStatus() { const elements = Array.from( document.querySelectorAll( '.recently-updated-digital-status' ) ); elements.forEach(function (element) { const textElement = element.querySelector('.ab-text'); if (!textElement) { return; } const text = textElement.textContent .trim() .toLowerCase(); element.classList.remove( 'status-complete', 'status-partial', 'status-not-downloaded' ); if ( text.includes('digital: complete') ) { element.classList.add( 'status-complete' ); } else if ( text.includes('digital: partial') ) { element.classList.add( 'status-partial' ); } else if ( text.includes('digital: not downloaded') ) { element.classList.add( 'status-not-downloaded' ); } }); } setTimeout( updateRecentlyUpdatedDigitalStatus, 1000 ); setInterval( updateRecentlyUpdatedDigitalStatus, 500 ); })(); /* ========================================================= DASHBOARD — RECENTLY DOWNLOADED PROGRESS COLORING ========================================================= */ (function () { function updateRecentlyDownloadedProgress() { const elements = Array.from( document.querySelectorAll( '.recently-downloaded-progress' ) ); elements.forEach(function (element) { const textElement = element.querySelector('.ab-text'); if (!textElement) { return; } const text = textElement.textContent.trim(); const match = text.match(/(\d+)\s*\/\s*(\d+)/); if (!match) { return; } const downloaded = parseInt(match[1], 10); const total = parseInt(match[2], 10); if ( isNaN(downloaded) || isNaN(total) ) { return; } element.classList.remove( 'status-complete', 'status-partial', 'status-not-downloaded' ); if ( total > 0 && downloaded >= total ) { element.classList.add( 'status-complete' ); } else if ( downloaded > 0 ) { element.classList.add( 'status-partial' ); } else { element.classList.add( 'status-not-downloaded' ); } }); } setTimeout( updateRecentlyDownloadedProgress, 1000 ); setInterval( updateRecentlyDownloadedProgress, 500 ); })();