krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-03 18:08:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

tables js refactoring

Browse Source
This commit is contained in:
trean
2026-03-11 23:33:56 +01:00
parent a08a0ac8b1
commit 949bd1b227
3 changed files with 90 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant-2024/assets/js/index.js
-144
View File
@@ -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;
qdrant-landing/themes/qdrant-2024/assets/js/pricing-table.js
+85
View File
@@ -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';
}
});
});
});
});
qdrant-landing/themes/qdrant-2024/layouts/partials/js.html
+5
View File
@@ -49,6 +49,11 @@
{{ $indexJs := resources.Get "/js/index.js" | js.Build | minify | resources.Fingerprint "sha512" }}
<script src="{{ $indexJs.RelPermalink }}"></script>
{{ if eq .Section "pricing" }}
{{ $pricingTableJs := resources.Get "/js/pricing-table.js" | js.Build | minify | resources.Fingerprint "sha512" }}
<script src="{{ $pricingTableJs.RelPermalink }}"></script>
{{ end }}
{{ if .IsHome }}
{{ $homeAnimationsJs := resources.Get "/js/home-animations.js" | js.Build | minify | resources.Fingerprint "sha512" }}
<script src="{{ $homeAnimationsJs.RelPermalink }}"></script>