ColonialColonel/smoke-signals-spreadsheets

1// Main Tab Switching Functionality2document.addEventListener('DOMContentLoaded', function() {3    // Initialize Feather Icons4    if (typeof feather !== 'undefined') {5        feather.replace();6    }7 8    // Initialize all tab functionality9    initializeTabs();10});11// Main Tab Switching Functionality12function initializeTabs() {13    // Primary Tabs14    const paymentsTab = document.getElementById('payments-tab');15    const monkeyMediaTab = document.getElementById('monkey-media-tab');16    const paymentsContent = document.getElementById('payments-content');17    const monkeyMediaContent = document.getElementById('monkey-media-content');18 19    // Payments Sub-tabs20    const creditCardSubtab = document.getElementById('credit-card-subtab');21    const otherPaymentsSubtab = document.getElementById('other-payments-subtab');22    const mmOfflineSubtab = document.getElementById('mm-offline-subtab');23    const creditCardContent = document.getElementById('credit-card-content');24    const otherPaymentsContent = document.getElementById('other-payments-content');25    const mmOfflineContent = document.getElementById('mm-offline-content');26 27    // Monkey Media Sub-tabs28    const productPlanningSubtab = document.getElementById('product-planning-subtab');29    const preEventSubtab = document.getElementById('pre-event-subtab');30    const postEventSubtab = document.getElementById('post-event-subtab');31    const productPlanningContent = document.getElementById('product-planning-content');32    const preEventContent = document.getElementById('pre-event-content');33    const postEventContent = document.getElementById('post-event-content');34 35    // Primary Tab Switching36    function switchToPayments() {37        paymentsTab.classList.add('border-jnn-red', 'text-jnn-red', 'bg-red-50');38        paymentsTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-jnn-charcoal');39        monkeyMediaTab.classList.remove('border-jnn-red', 'text-jnn-red', 'bg-red-50');40        monkeyMediaTab.classList.add('border-transparent', 'text-gray-500', 'hover:text-jnn-charcoal');41        42        paymentsContent.classList.remove('hidden');43        monkeyMediaContent.classList.add('hidden');44    }45 46    function switchToMonkeyMedia() {47        monkeyMediaTab.classList.add('border-jnn-red', 'text-jnn-red', 'bg-red-50');48        monkeyMediaTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-jnn-charcoal');49        paymentsTab.classList.remove('border-jnn-red', 'text-jnn-red', 'bg-red-50');50        paymentsTab.classList.add('border-transparent', 'text-gray-500', 'hover:text-jnn-charcoal');51        52        monkeyMediaContent.classList.remove('hidden');53        paymentsContent.classList.add('hidden');54    }55 56    // Payments Sub-tab Switching57    function switchToCreditCard() {58        creditCardSubtab.classList.add('bg-jnn-red', 'text-white');59        creditCardSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');60        otherPaymentsSubtab.classList.remove('bg-jnn-red', 'text-white');61        otherPaymentsSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');62        mmOfflineSubtab.classList.remove('bg-jnn-red', 'text-white');63        mmOfflineSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');64        65        creditCardContent.classList.remove('hidden');66        otherPaymentsContent.classList.add('hidden');67        mmOfflineContent.classList.add('hidden');68    }69 70    function switchToOtherPayments() {71        otherPaymentsSubtab.classList.add('bg-jnn-red', 'text-white');72        otherPaymentsSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');73        creditCardSubtab.classList.remove('bg-jnn-red', 'text-white');74        creditCardSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');75        mmOfflineSubtab.classList.remove('bg-jnn-red', 'text-white');76        mmOfflineSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');77        78        otherPaymentsContent.classList.remove('hidden');79        creditCardContent.classList.add('hidden');80        mmOfflineContent.classList.add('hidden');81    }82 83    function switchToMMOffline() {84        mmOfflineSubtab.classList.add('bg-jnn-red', 'text-white');85        mmOfflineSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');86        creditCardSubtab.classList.remove('bg-jnn-red', 'text-white');87        creditCardSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');88        otherPaymentsSubtab.classList.remove('bg-jnn-red', 'text-white');89        otherPaymentsSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');90        91        mmOfflineContent.classList.remove('hidden');92        creditCardContent.classList.add('hidden');93        otherPaymentsContent.classList.add('hidden');94    }95 96    // Monkey Media Sub-tab Switching97    function switchToProductPlanning() {98        productPlanningSubtab.classList.add('bg-jnn-red', 'text-white');99        productPlanningSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');100        preEventSubtab.classList.remove('bg-jnn-red', 'text-white');101        preEventSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');102        postEventSubtab.classList.remove('bg-jnn-red', 'text-white');103        postEventSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');104        105        productPlanningContent.classList.remove('hidden');106        preEventContent.classList.add('hidden');107        postEventContent.classList.add('hidden');108    }109 110    function switchToPreEvent() {111        preEventSubtab.classList.add('bg-jnn-red', 'text-white');112        preEventSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');113        productPlanningSubtab.classList.remove('bg-jnn-red', 'text-white');114        productPlanningSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');115        postEventSubtab.classList.remove('bg-jnn-red', 'text-white');116        postEventSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');117        118        preEventContent.classList.remove('hidden');119        productPlanningContent.classList.add('hidden');120        postEventContent.classList.add('hidden');121    }122 123    function switchToPostEvent() {124        postEventSubtab.classList.add('bg-jnn-red', 'text-white');125        postEventSubtab.classList.remove('bg-gray-300', 'text-jnn-charcoal');126        productPlanningSubtab.classList.remove('bg-jnn-red', 'text-white');127        productPlanningSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');128        preEventSubtab.classList.remove('bg-jnn-red', 'text-white');129        preEventSubtab.classList.add('bg-gray-300', 'text-jnn-charcoal');130        131        postEventContent.classList.remove('hidden');132        productPlanningContent.classList.add('hidden');133        preEventContent.classList.add('hidden');134    }135 136    // Event Listeners for Primary Tabs137    paymentsTab.addEventListener('click', switchToPayments);138    monkeyMediaTab.addEventListener('click', switchToMonkeyMedia);139 140    // Event Listeners for Payments Sub-tabs141    creditCardSubtab.addEventListener('click', switchToCreditCard);142    otherPaymentsSubtab.addEventListener('click', switchToOtherPayments);143    mmOfflineSubtab.addEventListener('click', switchToMMOffline);144 145    // Event Listeners for Monkey Media Sub-tabs146    productPlanningSubtab.addEventListener('click', switchToProductPlanning);147    preEventSubtab.addEventListener('click', switchToPreEvent);148    postEventSubtab.addEventListener('click', switchToPostEvent);149 150    // Make navigation sticky on scroll151    window.addEventListener('scroll', function() {152        const nav = document.querySelector('main-navigation');153        if (window.scrollY > 100) {154            nav.style.position = 'fixed';155            nav.style.top = '0';156            nav.style.width = '100%';157            nav.style.zIndex = '50';158        } else {159            nav.style.position = 'relative';160        }161    });162 163    // Initialize with Payments tab active164    switchToPayments();165    switchToCreditCard();166    switchToProductPlanning();167 168    // Re-initialize Feather Icons when content changes169    function refreshFeatherIcons() {170        if (typeof feather !== 'undefined') {171            feather.replace();172        }173    }174 175    // Observe DOM changes to refresh icons176    const observer = new MutationObserver(function(mutations) {177        mutations.forEach(function(mutation) {178            if (mutation.type === 'childList') {179                refreshFeatherIcons();180            }181        });182    }183 184    observer.observe(document.body, {185        childList: true,186        subtree: true187    });188}189