SPIRITA STUDIO - Dynamic Navigation

SPIRITA STUDIO

// Wait for the DOM to be fully loaded document.addEventListener('DOMContentLoaded', function() { // Debug mode - log messages to console to help troubleshoot const debug = true; function log(msg) { if (debug && console) console.log(msg); } log("DOM loaded, initializing navigation..."); // Main DOM elements const header = document.getElementById('dynamic-header'); const breadcrumbs = document.getElementById('breadcrumbs'); // Function to get all parent links of a given link function getParentLinks(link) { log("Finding parent links for: " + link.textContent); const parents = []; let parentLi = link.closest('li'); while (parentLi) { const parentUl = parentLi.parentElement; // If this is a submenu, find the parent menu item if (parentUl && parentUl.classList.contains('submenu')) { const grandparentLi = parentUl.closest('li'); if (grandparentLi) { const parentLink = grandparentLi.querySelector(':scope > a'); if (parentLink) { parents.unshift(parentLink); // Add to front of array log("Found parent: " + parentLink.textContent); } } } // Move up to next potential parent parentLi = parentUl ? parentUl.closest('li') : null; } return parents; } // Update the UI based on the current navigation state function updateUI(currentLink) { if (!currentLink) { log("No current link found, using default/home state"); // Default state (home) header.textContent = "SPIRITA STUDIO"; header.style.fontSize = "75px"; breadcrumbs.innerHTML = ""; return; } log("Updating UI for: " + currentLink.textContent); // Update header text based on current page const pageName = currentLink.textContent.trim(); if (pageName.toUpperCase() === "HOME") { header.textContent = "SPIRITA STUDIO"; } else { header.textContent = pageName.toUpperCase(); } // Adjust header font size header.style.fontSize = pageName.toUpperCase() === "HOME" ? "75px" : "55px"; // Build breadcrumbs const parentLinks = getParentLinks(currentLink); let breadcrumbsHTML = ""; // Only add breadcrumbs if we're not on home page if (pageName.toUpperCase() !== "HOME") { // Always start with home breadcrumbsHTML = 'HOME'; // Add parent links parentLinks.forEach(link => { breadcrumbsHTML += '›'; breadcrumbsHTML += `${link.textContent}`; }); // Add current page breadcrumbsHTML += '›'; breadcrumbsHTML += `${pageName}`; } breadcrumbs.innerHTML = breadcrumbsHTML; log("Breadcrumbs updated: " + breadcrumbsHTML); } // Set active classes for current link and its parent chain function setActiveClasses(currentLink) { if (!currentLink) return; log("Setting active classes for: " + currentLink.textContent); // Clear all active classes first document.querySelectorAll('.navbar a.active').forEach(a => a.classList.remove('active')); document.querySelectorAll('.navbar li.active').forEach(li => li.classList.remove('active')); // Set active class on current link currentLink.classList.add('active'); // Set active class on current link's li const currentLi = currentLink.closest('li'); if (currentLi) currentLi.classList.add('active'); // Get all parent links and set them active too const parentLinks = getParentLinks(currentLink); parentLinks.forEach(link => { link.classList.add('active'); const parentLi = link.closest('li'); if (parentLi) parentLi.classList.add('active'); }); } // Main navigation handler function handleNavigation() { // Get current hash or default to home let hash = window.location.hash || '#home'; log("Current hash: " + hash); // Find matching link let currentLink = document.querySelector(`.navbar a[href="${hash}"]`); if (currentLink) { log("Found matching link: " + currentLink.textContent); // Set active classes setActiveClasses(currentLink); // Update UI elements updateUI(currentLink); } else { log("No matching link found for hash: " + hash); // Default state updateUI(null); } } // Add click handlers to all nav links document.querySelectorAll('.navbar a').forEach(link => { link.addEventListener('click', function(e) { log("Link clicked: " + this.textContent); // Allow the default behavior to update the URL hash // but also directly update UI for immediate feedback setActiveClasses(this); updateUI(this); }); }); // Handle hash changes window.addEventListener('hashchange', function() { log("Hash changed to: " + window.location.hash); handleNavigation(); }); // Initialize on page load handleNavigation(); log("Navigation initialized"); });

// Wait for Carrd to fully load window.addEventListener('load', function() { // Store original title to use for home page const originalTitle = "SPIRITA STUDIO"; // Map page IDs to their titles and parent relationships const pageMap = { 'home': { title: originalTitle, parents: [] }, 'projects': { title: 'PROJECTS', parents: [] }, 'comics': { title: 'COMICS', parents: ['projects'] }, 'series': { title: 'SERIES', parents: ['projects', 'comics'] }, 'graphic-novels': { title: 'GRAPHIC NOVELS', parents: ['projects', 'comics'] }, 'webcomics': { title: 'WEBCOMICS', parents: ['projects', 'comics'] }, 'comics-merch': { title: 'MERCH', parents: ['projects', 'comics'] }, 'animation': { title: 'ANIMATION', parents: ['projects'] }, 'tv-shows': { title: 'TV SHOWS', parents: ['projects', 'animation'] }, 'short-films': { title: 'SHORTS', parents: ['projects', 'animation'] }, 'behind-scenes': { title: 'BTS', parents: ['projects', 'animation'] }, 'studio-work': { title: 'STUDIO', parents: ['projects', 'animation'] }, 'movies': { title: 'MOVIES', parents: ['projects'] }, 'feature-films': { title: 'FEATURES', parents: ['projects', 'movies'] }, 'trailers': { title: 'TRAILERS', parents: ['projects', 'movies'] }, 'upcoming': { title: 'UPCOMING', parents: ['projects', 'movies'] }, 'bluray': { title: 'BLU-RAY', parents: ['projects', 'movies'] }, 'about': { title: 'ABOUT US', parents: [] }, 'history': { title: 'HISTORY', parents: ['about'] }, 'mission': { title: 'MISSION', parents: ['about'] }, 'team': { title: 'TEAM', parents: ['about'] }, 'news': { title: 'NEWS', parents: [] }, 'press': { title: 'PRESS', parents: ['news'] }, 'events': { title: 'EVENTS', parents: ['news'] }, 'blog': { title: 'BLOG', parents: ['news'] }, 'shop': { title: 'SHOP', parents: [] }, 'comics-shop': { title: 'COMICS', parents: ['shop'] }, 'animation-shop': { title: 'ANIMATION', parents: ['shop'] }, 'movies-shop': { title: 'MOVIES', parents: ['shop'] }, 'merch': { title: 'MERCH', parents: ['shop'] }, 'contact': { title: 'CONTACT', parents: [] }, 'business': { title: 'BUSINESS', parents: ['contact'] }, 'press-media': { title: 'PRESS', parents: ['contact'] }, 'newsletter': { title: 'NEWSLETTER', parents: ['contact'] } }; // Find all navigation links in Carrd const navLinks = document.querySelectorAll('a[href^="#"]'); // Function to update the page function updatePage() { // Get current hash without the # let currentPage = window.location.hash.substring(1) || 'home'; // If we don't have info for this page in our map, use default if (!pageMap[currentPage]) { currentPage = 'home'; } // Update page title const titleElement = document.querySelector('header h1'); if (titleElement) { if (currentPage === 'home') { titleElement.textContent = originalTitle; titleElement.style.fontSize = '75px'; } else { titleElement.textContent = pageMap[currentPage].title; titleElement.style.fontSize = '55px'; } } // Build breadcrumbs const breadcrumbsContainer = document.getElementById('custom-breadcrumbs'); if (breadcrumbsContainer) { // Clear existing breadcrumbs let breadcrumbsHTML = ''; if (currentPage !== 'home') { // Add home link breadcrumbsHTML += 'HOME'; // Add parent pages const parents = pageMap[currentPage].parents || []; parents.forEach(parent => { if (pageMap[parent]) { breadcrumbsHTML += '›'; breadcrumbsHTML += `${pageMap[parent].title}`; } }); // Add current page breadcrumbsHTML += '›'; breadcrumbsHTML += `${pageMap[currentPage].title}`; } breadcrumbsContainer.innerHTML = breadcrumbsHTML; } // Update active links navLinks.forEach(link => { // Remove active class from all links link.classList.remove('nav-active'); // Check if this link matches current page or is a parent const linkPage = link.getAttribute('href').substring(1); if (linkPage === currentPage) { link.classList.add('nav-active'); } else if (pageMap[currentPage] && pageMap[currentPage].parents && pageMap[currentPage].parents.includes(linkPage)) { link.classList.add('nav-active'); } }); } // Listen for hash changes window.addEventListener('hashchange', updatePage); // Initial page setup updatePage(); });

That's The Spirit

SPIRITA

STUDIO

Comics - Movies - Animation

◉ABOUT◉

That's The Spirit

PROJECTS

Pellentesque habitant morbi tristique senectus. Lorem sed mollis aliquam ut neque aliquam vestibulum morbi. Sapien nec sagittis aliquam bibendum tempus consequat.

Details ➡️

That's The Spirit

COMICS

At imperdiet dui amet nulla sed viverra tellus habitasse. Lectus urna duis convallis fimus interdum velit laoreet netus fames sed aurora mauris.

Details ➡️

That's The Spirit

SERIES

Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus. Ut civitas integer vitae justo eget magna fermentum iaculis.

Details ➡️

That's The Spirit

GRAPHIC NOVELS

Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus.

Details ➡️

That's The Spirit

WEBCOMICS

Orci fusce ante quis massa nisi viverra. Duis hendrerit fermentum semper lacinia sit eget donec porta dictum vis lorem vis aenean blandit nulla pretium.

Sed aliquam ➡️

COMICBOOK MERCH

Snag a comic to fuel the underground revolution.
Every purchase empowers indie visionaries with crafting tomorrow's classics.

Miss the Indiegogo Campaign? No problem. Get a backorder here.

standard

$40

ORIGINAL COVER

The original comic book created by Crux Riajuu.

ORDER

VARIANT A

$50

TYPE A VARIANT COVER

Variant cover art created by artist Black Cat Magi.

ORDER

VARIANT B

$50

TYPE B VARIANT COVER

Variant cover art created by Crux Riajuu.

ORDER

That's The Spirit

ANIMATION

Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus.

Details ➡️

That's The Spirit

T.V. SHOWS

Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus. Ut civitas integer vitae justo eget magna fermentum iaculis.

Details ➡️

That's The Spirit

SHORT FILMS

Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus.

Details ➡️

That's The Spirit

BEHIND THE SCENES

Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus. Ut civitas integer vitae justo eget magna fermentum iaculis.

Details ➡️

That's The Spirit

STUDIO WORK

Orci fusce ante quis massa nisi viverra. Duis hendrerit fermentum semper lacinia sit eget donec porta dictum vis lorem vis aenean blandit nulla pretium.

Sed aliquam ➡️

That's The Spirit

MOVIES

Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus. Ut civitas integer vitae justo eget magna fermentum iaculis.

Details ➡️

That's The Spirit

FEATURE FILMS

Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus.

Details ➡️

That's The Spirit

BEHIND THE SCENES

Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus. Ut civitas integer vitae justo eget magna fermentum iaculis.

Details ➡️

That's The Spirit

SHORT FILMS

Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus.

Details ➡️

MOVIE MERCH

Buying merch helps indie filmmakers and animators flip the bird to hollywood.
The next cult classic will be because of you.

Miss the Indiegogo Campaign? No problem. Get a backorder here.

Rexis

$40

BLURAY

The original comic book created by Crux Riajuu.

ORDER

T.S.D.

$50

BLURAY

Variant cover art created by artist Black Cat Magi.

ORDER

T.L.B.:B.K.O.D.

$50

BLURAY

Variant cover art created by Crux Riajuu.

ORDER

That's The Spirit

STUDIO WORK

Orci fusce ante quis massa nisi viverra. Duis hendrerit fermentum semper lacinia sit eget donec porta dictum vis lorem vis aenean blandit nulla pretium.

Sed aliquam ➡️

Thanks

Augue metus sem porta mollis fringilla aenean. Luctus sit accumsan id commodo in nulla erat vivamus ullamcorper nunc fermentum viverra pulvinar vel dis vis.

Continue

SPIRITA

STUDIO

PROJECTS

COMICS

SERIES

GRAPHIC NOVELS

WEBCOMICS

COMICBOOK MERCH

Snag a comic to fuel the underground revolution. Every purchase empowers indie visionaries with crafting tomorrow's classics.

standard

$40

VARIANT A

$50

VARIANT B

$50

ANIMATION

T.V. SHOWS

SHORT FILMS

BEHIND THE SCENES

STUDIO WORK

MOVIES

FEATURE FILMS

BEHIND THE SCENES

SHORT FILMS

MOVIE MERCH

Buying merch helps indie filmmakers and animators flip the bird to hollywood. The next cult classic will be because of you.

Rexis

$40

T.S.D.

$50

T.L.B.:B.K.O.D.

$50

STUDIO WORK

NEWSLETTER

Thanks

Snag a comic to fuel the underground revolution.
Every purchase empowers indie visionaries with crafting tomorrow's classics.

Buying merch helps indie filmmakers and animators flip the bird to hollywood.
The next cult classic will be because of you.