diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/index.js b/qdrant-landing/themes/qdrant-2024/assets/js/index.js index b70068be1..2e402c13c 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/js/index.js +++ b/qdrant-landing/themes/qdrant-2024/assets/js/index.js @@ -157,96 +157,6 @@ document.addEventListener('DOMContentLoaded', function () { el.addEventListener('click', toggleAccordion); }); - // Pricing features tabs (Managed / On-Premise) - function expandFeaturesTableSections(wrapper) { - if (!wrapper || wrapper.classList.contains('qdrant-pricing-features__table-wrapper--hidden')) return; - wrapper.querySelectorAll('.pricing-table__table-section').forEach((section) => { - const rows = section.querySelector('.pricing-table__table-section-rows'); - if (!rows) return; - section.classList.remove('qdrant-pricing-features__table-section--collapsed'); - rows.style.maxHeight = rows.scrollHeight + 'px'; - }); - } - - const featuresTabs = document.querySelectorAll('.qdrant-pricing-features__tab'); - const featuresTableWrappers = document.querySelectorAll('[data-features-tab]'); - featuresTabs.forEach((tab) => { - tab.addEventListener('click', () => { - featuresTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tab--active')); - tab.classList.add('qdrant-pricing-features__tab--active'); - const targetTab = tab.dataset.tab; - featuresTableWrappers.forEach((wrapper) => { - wrapper.classList.toggle( - 'qdrant-pricing-features__table-wrapper--hidden', - wrapper.dataset.featuresTab !== targetTab - ); - }); - // Expand sections in the newly visible table (they get maxHeight:0 when hidden) - const visibleWrapper = document.querySelector(`[data-features-tab="${targetTab}"]`); - requestAnimationFrame(() => { - expandFeaturesTableSections(visibleWrapper); - }); - }); - }); - - // Pricing features mobile tier tabs - function updateMobileTierColumns(activeTier) { - const allTierCols = document.querySelectorAll('[data-tier-col]'); - allTierCols.forEach((col) => { - col.classList.remove('pricing-table__table-cell--mobile-active'); - }); - const activeCols = document.querySelectorAll(`[data-tier-col="${activeTier}"]`); - activeCols.forEach((col) => { - col.classList.add('pricing-table__table-cell--mobile-active'); - }); - } - - const tierTabs = document.querySelectorAll('.pricing-table__tier-tab'); - if (tierTabs.length) { - updateMobileTierColumns(tierTabs[0].dataset.tier); - tierTabs.forEach((tab) => { - tab.addEventListener('click', () => { - tierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active')); - tab.classList.add('pricing-table__tier-tab--active'); - updateMobileTierColumns(tab.dataset.tier); - }); - }); - } - - // Pricing features section collapse/expand - document.querySelectorAll('.pricing-table__table-section').forEach((section) => { - const header = section.querySelector('.pricing-table__table-section-header'); - const rows = section.querySelector('.qdrant-pricing-features__table-section-rows'); - if (!header || !rows) return; - - // Only set maxHeight for visible sections (hidden table has scrollHeight 0) - const wrapper = section.closest('[data-features-tab]'); - if (!wrapper?.classList.contains('qdrant-pricing-features__table-wrapper--hidden')) { - rows.style.maxHeight = rows.scrollHeight + 'px'; - } - - header.addEventListener('click', () => { - const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed'); - - if (isCollapsed) { - rows.style.maxHeight = rows.scrollHeight + 'px'; - section.classList.remove('pricing-table__table-section--collapsed'); - } else { - rows.style.maxHeight = rows.scrollHeight + 'px'; - requestAnimationFrame(() => { - rows.style.maxHeight = '0px'; - section.classList.add('pricing-table__table-section--collapsed'); - }); - } - }); - - rows.addEventListener('transitionend', () => { - if (!section.classList.contains('pricing-table__table-section--collapsed')) { - rows.style.maxHeight = 'none'; - } - }); - }); - // Pricing doors tabs const pricingDoorsTabs = document.querySelectorAll('.qdrant-pricing-doors-b__tab'); const pricingDoorsContainers = document.querySelectorAll('[data-doors-tab]'); @@ -261,60 +171,6 @@ document.addEventListener('DOMContentLoaded', function () { }); }); - // Pricing comparison mobile tier tabs - function updateComparisonMobileTierColumns(activeTier) { - const allTierCols = document.querySelectorAll('.qdrant-pricing-comparison [data-tier-col]'); - allTierCols.forEach((col) => { - col.classList.remove('pricing-table__table-cell--mobile-active'); - }); - const activeCols = document.querySelectorAll(`.qdrant-pricing-comparison [data-tier-col="${activeTier}"]`); - activeCols.forEach((col) => { - col.classList.add('pricing-table__table-cell--mobile-active'); - }); - } - - const comparisonTierTabs = document.querySelectorAll('.qdrant-pricing-comparison .pricing-table__tier-tab'); - if (comparisonTierTabs.length) { - updateComparisonMobileTierColumns(comparisonTierTabs[0].dataset.tier); - comparisonTierTabs.forEach((tab) => { - tab.addEventListener('click', () => { - comparisonTierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active')); - tab.classList.add('pricing-table__tier-tab--active'); - updateComparisonMobileTierColumns(tab.dataset.tier); - }); - }); - } - - // Pricing comparison section collapse/expand - document.querySelectorAll('.qdrant-pricing-comparison .pricing-table__table-section').forEach((section) => { - const header = section.querySelector('.pricing-table__table-section-header'); - const rows = section.querySelector('.pricing-table__table-section-rows'); - if (!header || !rows) return; - - rows.style.maxHeight = rows.scrollHeight + 'px'; - - header.addEventListener('click', () => { - const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed'); - - if (isCollapsed) { - rows.style.maxHeight = rows.scrollHeight + 'px'; - section.classList.remove('pricing-table__table-section--collapsed'); - } else { - rows.style.maxHeight = rows.scrollHeight + 'px'; - requestAnimationFrame(() => { - rows.style.maxHeight = '0px'; - section.classList.add('pricing-table__table-section--collapsed'); - }); - } - }); - - rows.addEventListener('transitionend', () => { - if (!section.classList.contains('pricing-table__table-section--collapsed')) { - rows.style.maxHeight = 'none'; - } - }); - }); - // scroll to anchors: let offset = DOCS_HEADER_OFFSET; diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/pricing-table.js b/qdrant-landing/themes/qdrant-2024/assets/js/pricing-table.js new file mode 100644 index 000000000..a46192d17 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/js/pricing-table.js @@ -0,0 +1,85 @@ +document.addEventListener('DOMContentLoaded', function () { + // Pricing features tabs (Managed / On-Premise) + function expandPricingTableSections(table) { + if (!table) return; + table.querySelectorAll('.pricing-table__table-section').forEach((section) => { + const rows = section.querySelector('.pricing-table__table-section-rows'); + if (!rows) return; + section.classList.remove('pricing-table__table-section--collapsed'); + rows.style.maxHeight = rows.scrollHeight + 'px'; + }); + } + + const featuresTabs = document.querySelectorAll('.qdrant-pricing-features__tab'); + const featuresTableWrappers = document.querySelectorAll('[data-features-tab]'); + featuresTabs.forEach((tab) => { + tab.addEventListener('click', () => { + featuresTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tab--active')); + tab.classList.add('qdrant-pricing-features__tab--active'); + const targetTab = tab.dataset.tab; + featuresTableWrappers.forEach((wrapper) => { + wrapper.classList.toggle( + 'qdrant-pricing-features__table-wrapper--hidden', + wrapper.dataset.featuresTab !== targetTab + ); + }); + const visibleWrapper = document.querySelector(`[data-features-tab="${targetTab}"]`); + const visibleTable = visibleWrapper?.querySelector('.pricing-table'); + requestAnimationFrame(() => expandPricingTableSections(visibleTable)); + }); + }); + + // Universal pricing table: mobile tier tabs + section collapse/expand + document.querySelectorAll('.pricing-table').forEach((table) => { + const tierTabs = table.querySelectorAll('.pricing-table__tier-tab'); + if (tierTabs.length) { + const updateMobileTierColumns = (activeTier) => { + table.querySelectorAll('[data-tier-col]').forEach((col) => { + col.classList.remove('pricing-table__table-cell--mobile-active'); + }); + table.querySelectorAll(`[data-tier-col="${activeTier}"]`).forEach((col) => { + col.classList.add('pricing-table__table-cell--mobile-active'); + }); + }; + updateMobileTierColumns(tierTabs[0].dataset.tier); + tierTabs.forEach((tab) => { + tab.addEventListener('click', () => { + tierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active')); + tab.classList.add('pricing-table__tier-tab--active'); + updateMobileTierColumns(tab.dataset.tier); + }); + }); + } + + const isInHiddenWrapper = table.closest('[data-features-tab]')?.classList.contains('qdrant-pricing-features__table-wrapper--hidden'); + table.querySelectorAll('.pricing-table__table-section').forEach((section) => { + const header = section.querySelector('.pricing-table__table-section-header'); + const rows = section.querySelector('.pricing-table__table-section-rows'); + if (!header || !rows) return; + + if (!isInHiddenWrapper) { + rows.style.maxHeight = rows.scrollHeight + 'px'; + } + + header.addEventListener('click', () => { + const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed'); + if (isCollapsed) { + rows.style.maxHeight = rows.scrollHeight + 'px'; + section.classList.remove('pricing-table__table-section--collapsed'); + } else { + rows.style.maxHeight = rows.scrollHeight + 'px'; + requestAnimationFrame(() => { + rows.style.maxHeight = '0px'; + section.classList.add('pricing-table__table-section--collapsed'); + }); + } + }); + + rows.addEventListener('transitionend', () => { + if (!section.classList.contains('pricing-table__table-section--collapsed')) { + rows.style.maxHeight = 'none'; + } + }); + }); + }); +}); diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/js.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/js.html index b888a783b..8d0925c43 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/js.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/js.html @@ -49,6 +49,11 @@ {{ $indexJs := resources.Get "/js/index.js" | js.Build | minify | resources.Fingerprint "sha512" }} +{{ if eq .Section "pricing" }} + {{ $pricingTableJs := resources.Get "/js/pricing-table.js" | js.Build | minify | resources.Fingerprint "sha512" }} + +{{ end }} + {{ if .IsHome }} {{ $homeAnimationsJs := resources.Get "/js/home-animations.js" | js.Build | minify | resources.Fingerprint "sha512" }}