}, }, window.PFS_SYNC_CONFIG || {}); // 3-letter prefixes cover both nominative (Март) and genitive (Марта) forms const MONTH_INDEX = { 'янв': 0, 'фев': 1, 'мар': 2, 'апр': 3, 'май': 4, 'мая': 4, 'июн': 5, 'июл': 6, 'авг': 7, 'сен': 8, 'окт': 9, 'ноя': 10, 'дек': 11, }; function isPast(record) { const dayNum = parseInt(record['Число'], 10); const monthRaw = (record['Месяц'] || '').trim().toLowerCase(); if (!dayNum || !monthRaw) return false; const monthNum = MONTH_INDEX[monthRaw.slice(0, 3)]; if (monthNum === undefined) return false; const now = new Date(); const year = now.getFullYear(); // Parse last (latest) time slot from "19:00" or "18:00 / 21:00" etc. let hour = 23, minute = 59; const timeRaw = record['Варианты времени'] || ''; const slots = timeRaw.match(/\d{1,2}:\d{2}/g); if (slots && slots.length) { const [h, m] = slots[slots.length - 1].split(':'); hour = parseInt(h, 10); minute = parseInt(m, 10); } // Check last year, current year, and next year — pick the candidate // closest to now. This resolves year ambiguity: a January concert viewed // in December is 1 month away as next year vs. 11 months back as this year, // so it stays. A concert from yesterday is closest as this year and gets filtered. const candidates = [-1, 0, 1].map(offset => new Date(year + offset, monthNum, dayNum, hour, minute, 0) ); const closest = candidates.reduce((best, d) => Math.abs(d - now) < Math.abs(best - now) ? d : best ); return closest < now; } function populateCard(card, record) { for (const [cls, field] of Object.entries(CONFIG.mapping.text || {})) { const elem = card.querySelector('.' + cls); if (!elem || !record[field]) continue; const atom = elem.querySelector('.tn-atom__button-text') || elem.querySelector('.tn-atom'); if (atom) atom.textContent = field === 'Цена' ? 'Купить билет от ' + record[field] + ' ₽' : record[field]; } for (const [cls, field] of Object.entries(CONFIG.mapping.image || {})) { if (!record[field]) continue; const elem = card.querySelector('.' + cls); if (!elem) continue; const img = elem.querySelector('img'); if (img) { img.src = record[field]; img.setAttribute('data-original', record[field]); } else { const t = elem.querySelector('.tn-atom') || elem; t.style.backgroundImage = 'url(' + record[field] + ')'; } } for (const [cls, field] of Object.entries(CONFIG.mapping.link || {})) { if (!record[field]) continue; const root = card.querySelector('.' + cls); if (!root) continue; const link = (root.tagName === 'A' ? root : null) || root.querySelector('a.tn-atom') || root.querySelector('a'); if (link) link.href = cls.includes('btn') ? record[field] + '#buy' : record[field]; } } // Tilda's own stylesheet forces `.t396__artboard { height: 0px !important }` // for this block (it expects to manage record heights itself via its internal // recalculation, which only knows about the ORIGINAL template card — not our // clones). Our window.dispatchEvent(new Event('resize')) below actually // triggers that Tilda recalculation, which re-zeroes every clone's height. // Fix: after Tilda's pass runs, measure each card's real content height // (furthest descendant bottom edge) and force it back via an inline // !important — which beats a stylesheet !important rule of equal specificity. function fixCardHeights(container) { container.querySelectorAll('.t396__artboard').forEach(card => { if (card.style.display === 'none') return; // skip the hidden template let maxBottom = 0; card.querySelectorAll('*').forEach(el => { const bottom = el.offsetTop + el.offsetHeight; if (bottom > maxBottom) maxBottom = bottom; }); if (maxBottom > 0) card.style.setProperty('height', maxBottom + 'px', 'important'); }); } function injectContainerStyles(blockId) { const styleId = 'pfs-responsive-' + blockId; if (document.getElementById(styleId)) return; const style = document.createElement('style'); style.id = styleId; // Only override height so N cards can stack — Tilda's own CSS handles all // artboard widths, positions, and scale transforms. style.textContent = ` #${blockId} .t396 { height: auto !important; overflow: hidden !important; } #${blockId} .t396__artboard { margin-bottom: 16px; } `; document.head.appendChild(style); } function init() { const records = window.PFS_STATIC_DATA; if (!records || !records.length) { console.warn('[PfS] PFS_STATIC_DATA не найден или пустой'); return; } const block = document.getElementById(CONFIG.blockId); if (!block) return; const artboard = block.querySelector('.t396__artboard'); if (!artboard) return; // Keep only the first artboard as the card template block.querySelectorAll('.t396__artboard').forEach((el, i) => { if (i > 0) el.remove(); }); injectContainerStyles(CONFIG.blockId); const upcoming = records.filter(r => !isPast(r)); console.log(`[PfS] Отфильтровано ${records.length - upcoming.length} прошедших концертов`); const fragment = document.createDocumentFragment(); upcoming.forEach(record => { const card = artboard.cloneNode(true); card.style.display = ''; populateCard(card, record); fragment.appendChild(card); }); artboard.style.display = 'none'; artboard.parentNode.appendChild(fragment); // Tell Tilda to re-apply its scale transform to all artboards now that // clones are in the DOM. This also re-zeroes every card's height (see // fixCardHeights above) — so we correct that right after, on the next frame. window.dispatchEvent(new Event('resize')); requestAnimationFrame(() => fixCardHeights(block)); // Required content height per card changes with breakpoint (Tilda scales // internal padding/gaps via --zoom), so recompute on real window resizes too. let resizeTimer = null; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => fixCardHeights(block), 200); }); console.log(`[PfS] Отрендерено ${upcoming.length} карточек`); } // We need Tilda's scale/positioning JS to run before we clone the artboard. // window.load guarantees this but can be slow (waits for Vimeo/images). // So we run on window.load OR after 500ms from DOMContentLoaded — whichever // comes first. 500ms is enough for Tilda to finish its own init on any device. let initiated = false; function runInit() { if (initiated) return; initiated = true; init(); } window.addEventListener('load', runInit); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => setTimeout(runInit, 500)); } else { setTimeout(runInit, 500); } })();