// --- Shared events data --------------------------------------------------- // The daily job writes ONLY blocks/nevente-events (id 1613). Board pages read // it here at render time, so adding a page never means updating the cron. const BLOCK_ID = 1613; const ORIGIN = String((data.board && data.board.origin) || 'https://nevente.com').replace(/\/+$/, ''); try { const _res = await api.fetch(`${ORIGIN}/api/pages/id/${BLOCK_ID}`); if (_res && _res.ok) { const _row = await _res.json(); const _d = (_row && _row.data) || {}; if (Array.isArray(_d.events) && _d.events.length) { data.events = _d.events; if (_d.board) data.board = _d.board; if (_d.countries) data.countries = _d.countries; if (_d.resellers) data.resellers = _d.resellers; } } } catch (_e) { // keep whatever this page already has } // -------------------------------------------------------------------------- // Board: filter data.events by ?country= &city= &month= &category= &reseller= // Raw data.events is never mutated; output goes to data.view (idempotent on re-run). const MONTHS = ['Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor', 'Nëntor', 'Dhjetor']; const MONTHS_SHORT = ['Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer', 'Kor', 'Gus', 'Sht', 'Tet', 'Nën', 'Dhj']; const WEEKDAYS = ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']; const FACETS = ['day', 'country', 'city', 'month', 'category', 'reseller']; // DAY-STRIP-VIEW // Changing a parent facet drops these child params (a city only makes sense inside its country). // ACTIVITY-FILTER: bookable tourist activities (escape games, audio tours) are // not events. The board lists events. const ACTIVITY = /audio tour|guided tour|walking tour|city tour|food tour|wine tasting|pub crawl|escape game|scavenger|city trail|sightsee|boat tour|kayak|cruise|paraglid|day trip|hop[- ]on|photoshoot|photo shoot/i; const isActivity = (ev) => ev.tourist === true || ACTIVITY.test(String(ev.title || '')); const DEPENDENTS = { country: ['city'] }; const board = data.board || {}; const labels = board.labels || {}; const lang = api.getQueryParam('lang'); const checkoutPath = board.checkoutPath || '/bileta'; const resellers = data.resellers || {}; const countries = data.countries || {}; const rawEvents = Array.isArray(data.events) ? data.events : []; const slugify = (s) => String(s || '') .toLowerCase() .normalize('NFD') .replace(/[\u0300-\u036f]/g, '') .replace(/[^a-z0-9]+/g, '-') .replace(/^-+|-+$/g, ''); const pad = (n) => String(n).padStart(2, '0'); const now = new Date(); const thisYear = now.getFullYear(); const today = `${thisYear}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`; // EDITORIAL-BUCKETS: how soon an event is decides where it is shown. const _iso = (dt) => `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}`; const tomorrow = _iso(new Date(now.getTime() + 86400000)); const _dow = (now.getDay() + 6) % 7; // 0 = Monday const _weekStart = new Date(now.getTime() - _dow * 86400000); const THIS_WEEK_END = _iso(new Date(_weekStart.getTime() + 6 * 86400000)); const NEXT_WEEK_END = _iso(new Date(_weekStart.getTime() + 13 * 86400000)); const selected = {}; for (const k of FACETS) { const v = api.getQueryParam(k); if (v) selected[k] = k === 'country' ? v.toUpperCase() : v.toLowerCase(); } const explicitAll = api.getQueryParam('all'); // "Pastro" sets this: show everything const noParams = FACETS.every((k) => !selected[k]); // DEFAULT-COUNTRY: a fresh visit lands on Albania. Any filter, or ?all=1, overrides it. if (noParams && !explicitAll) selected.country = 'AL'; function enrich(ev) { const [y, m, d] = String(ev.date || '').split('-').map(Number); const resellerKey = String(ev.reseller || '').toLowerCase(); const reseller = resellers[resellerKey] || { name: ev.reseller || '', platform: 'external' }; const resellerName = reseller.name || resellerKey; const mc = ev.tickets || {}; const storeId = String(mc.storeId || reseller.storeId || ''); const eventId = String(mc.eventId || ''); const countryCode = String(ev.countryCode || '').toUpperCase(); const countryName = countries[countryCode] || countryCode; const ownSlug = String(ev.slug || ev.pageSlug || '').replace(/^\/+/, ''); const ownPage = ownSlug ? '/' + (ownSlug.indexOf('events/') === 0 ? ownSlug : 'events/' + ownSlug) : ''; let kind = 'soon'; let ctaHref = ''; let ctaLabel = ''; if (ev.status === 'soldout') { kind = 'soldout'; ctaLabel = labels.soldOut || 'Sold out'; } else if (false) { /* nevente does not sell tickets and does not point at ticket resellers: every event stays informational and links only to its own nevente page. */ } else if (ev.status === 'free') { kind = 'free'; ctaLabel = labels.free || 'Falas'; } if (!ctaLabel && ownPage) { ctaHref = ownPage; ctaLabel = labels.show || 'Shih'; } const external = kind === 'external'; // a page of its own under events/ if the harvester built one (SEO: the board // links internally, the ticket link stays a button on that page) const weekday = y && m && d ? WEEKDAYS[new Date(Date.UTC(y, m - 1, d)).getUTCDay()] : ''; const monthName = m ? MONTHS[m - 1] : ''; // Which "when" slot this event belongs to. Today and tomorrow are named, because // "Sot" is what a reader is actually looking for; later dates keep the weekday. const dateStr = String(ev.date || ''); let bucket = '', bucketLabel = '', bucketShort = '', dateTag = '', badgeTop = '', badgeBottom = ''; const soon = dateStr === today || dateStr === tomorrow; if (dateStr === today) { bucket = 'sot'; } else if (dateStr === tomorrow) { bucket = 'neser'; } else if (dateStr && dateStr <= THIS_WEEK_END) { bucket = 'kjo-jave'; } else if (dateStr && dateStr <= NEXT_WEEK_END) { bucket = 'java-tjeter'; } else if (y && m) { bucket = `${y}-${pad(m)}`; } if (bucket === 'sot') bucketLabel = labels.today || 'Sot'; else if (bucket === 'neser') bucketLabel = labels.tomorrow || 'Nesër'; else if (bucket === 'kjo-jave') bucketLabel = labels.thisWeek || 'Këtë javë'; else if (bucket === 'java-tjeter') bucketLabel = labels.nextWeek || 'Javën tjetër'; else bucketLabel = m ? `${monthName} ${y}` : ''; bucketShort = (bucket === 'java-tjeter') ? (labels.nextWeekShort || 'Java tjetër') : (soon || bucket.startsWith('kjo') ? bucketLabel : (m ? MONTHS_SHORT[m - 1] : bucketLabel)); dateTag = soon ? bucketLabel : [weekday, d && m ? `${d} ${MONTHS_SHORT[m - 1]}` : ''].filter(Boolean).join(' · '); badgeTop = soon ? bucketLabel : (d ? String(d) : ''); badgeBottom = soon ? (d && m ? `${d} ${MONTHS_SHORT[m - 1]}` : '') : (m ? MONTHS_SHORT[m - 1] : ''); return { ...ev, countryCode, countryName, day: d ? String(d) : '', weekday, monthShort: m ? MONTHS_SHORT[m - 1] : '', whenLine: [dateTag, ev.times && ev.times.length ? ev.times.join(' & ') : ev.time].filter(Boolean).join(' · '), badgeTop, badgeBottom, soon: soon ? 'true' : '', whereLine: [ev.venue, ev.city].filter(Boolean).join(' · '), resellerName, platform: 'external', kind, isPast: !!ev.date && ev.date < today, ctaHref, ctaLabel, ref: szRef(ev), at: ev.date ? (String(ev.date) + 'T' + String(ev.time || '00:00')) : '', cardHref: ownPage || ctaHref || `#ev-${slugify(ev.id || ev.title)}`, dataDay: dateStr, cardTarget: external ? '_blank' : '_self', cardRel: external ? 'noopener noreferrer' : '', anchor: `ev-${slugify(ev.id || ev.title)}`, groupKey: bucket, groupLabel: bucketLabel, groupShort: bucketShort, keys: { day: dateStr, country: countryCode, city: slugify(ev.city), month: y && m ? `${y}-${pad(m)}` : '', category: slugify(ev.category), reseller: resellerKey, }, names: { day: bucketLabel, country: countryName, city: ev.city || '', month: m ? (y === thisYear ? monthName : `${monthName} ${y}`) : '', category: ev.category || '', reseller: resellerName, }, }; } const pool = rawEvents .filter((ev) => ev && ev.title && ev.date && ev.published !== false && !isActivity(ev)) .map(enrich) .filter((ev) => board.showPast || !ev.isPast) .sort((a, b) => `${a.date} ${a.time || ''}`.localeCompare(`${b.date} ${b.time || ''}`)); const matches = (ev, except) => FACETS.every((k) => k === except || !selected[k] || ev.keys[k] === selected[k]); function hrefWith(facet, value) { const next = { ...selected }; if (value) next[facet] = value; else delete next[facet]; if (next[facet] !== selected[facet]) { for (const dep of DEPENDENTS[facet] || []) delete next[dep]; } const qs = new URLSearchParams(); for (const k of FACETS) if (next[k]) qs.set(k, next[k]); if (lang) qs.set('lang', lang); return `?${qs.toString()}#events`; } const facetLabels = board.facets || {}; const allFilters = FACETS .filter((k) => facetLabels[k] !== false) .map((k) => { const counts = new Map(); for (const ev of pool) { if (!matches(ev, k) || !ev.keys[k]) continue; const hit = counts.get(ev.keys[k]) || { value: ev.keys[k], label: ev.names[k], count: 0 }; hit.count += 1; counts.set(ev.keys[k], hit); } const opts = [...counts.values()].sort((a, b) => k === 'month' ? a.value.localeCompare(b.value) : a.label.localeCompare(b.label)); return { key: k, label: facetLabels[k] || k, options: [ { label: labels.all || 'Të gjitha', count: '', href: hrefWith(k, ''), active: String(!selected[k]) }, ...opts.map((o) => ({ label: o.label, count: String(o.count), href: hrefWith(k, o.value), active: String(selected[k] === o.value), })), ], }; }); const filters = allFilters.filter((g) => g.options.length > 2 || selected[g.key]); const visible = pool.filter((ev) => matches(ev, null)); // The next event takes the editorial slot. Bookable tourist activities (escape // games, audio tours) must never be the face of the board, so they are skipped // even when they are the soonest thing on the calendar. // SLIDER-VIEW: the slider carries what is on TODAY (falling back to the next event). const focusDay = selected.day || today; // the slider follows the picked day const dayEvents = visible.filter((ev) => ev.date === focusDay && !isActivity(ev)); // SLIDER: today's events first, then topped up with the soonest upcoming ones, so // a narrow filter (one country, one day) still yields a carousel rather than a // single stranded card. const sliderPool = (() => { // DELIBERATELY filter-independent: the hero is the shop window, so it reads the whole // published feed and keeps showing the soonest events whatever the visitor filters below. const HORIZON = 14; // days: never surface an event further out than this const within = (ev) => { const t = Date.parse(ev.dateIso || ev.date || ''); return isNaN(t) ? true : t <= Date.now() + HORIZON * 86400000; }; // FILTER-AWARE: the hero reads what the visitor's filters leave behind (with no filter that is // the whole published feed), so picking a country or a day carries into the shop window too. const cand = visible .filter((ev) => !isActivity(ev) && within(ev)) .slice() .sort((a, b) => String(a.dateIso || a.date).localeCompare(String(b.dateIso || b.date))); const byType = new Map(); for (const ev of cand) { const k = ev.category || 'Tjeter'; if (!byType.has(k)) byType.set(k, []); byType.get(k).push(ev); } const types = [...byType.keys()]; const out = []; // Tile 0 is pinned to the soonest event: the collage always opens on what is next. const lead = cand[0]; if (lead) out.push(lead); // The rest take one type each (a different type per tile, the whole ring shifting once a day) // and every tile then walks its OWN list on its OWN interval — 1h, 2h, 3h, 4h, 6h — so the // mosaic renews one piece at a time and never lurches as a block. Inside an interval a tile is // frozen, so a refresh shows exactly what was there a moment ago. const PERIODS = [0, 3600000, 2 * 3600000, 3 * 3600000, 4 * 3600000, 6 * 3600000]; const leadType = lead ? (lead.category || 'Tjeter') : null; const ring = types.filter((t) => t !== leadType); const dayTurn = Math.floor(Date.now() / 86400000); for (let i = 1; i < 6 && out.length < 6 && ring.length; i++) { const beat = Math.floor(Date.now() / PERIODS[i]); // this tile's own interval const arr = byType.get(ring[(dayTurn + i) % ring.length]); if (!arr || !arr.length) continue; out.push(arr[beat % arr.length]); } for (const ev of cand) { if (out.length >= 6) break; if (out.indexOf(ev) === -1) out.push(ev); } return out; })(); const heroEv = sliderPool[0] || null; const listPool = visible.filter((ev) => sliderPool.indexOf(ev) === -1); const bucketCount = new Map(); for (const ev of visible) bucketCount.set(ev.groupKey, (bucketCount.get(ev.groupKey) || 0) + 1); const groups = []; for (const ev of listPool) { let g = groups[groups.length - 1]; if (!g || g.key !== ev.groupKey) { g = { key: ev.groupKey, label: ev.groupLabel, short: ev.groupShort, events: [] }; groups.push(g); } g.events.push(ev); } const countText = (n) => (n === 1 ? labels.countOne || '{n} event' : labels.countMany || '{n} evente').replace('{n}', String(n)); for (const g of groups) g.count = countText(g.events.length); // anchor: the first day a group covers — the day strip matches chips on it for (const g of groups) g.anchor = (g.events.map((e) => e.keys && e.keys.day).filter(Boolean).sort()[0]) || (/^\d{4}-\d{2}$/.test(g.key) ? g.key + '-01' : ''); // Day dividers: one before each day's events inside a group, so a multi-day // bucket reads as days and the strip has per-day anchors to sync to. for (const g of groups) { const perDay = {}; for (const e of g.events) { const k = e.keys && e.keys.day; if (k) perDay[k] = (perDay[k] || 0) + 1; } const items = []; let lastDay = ''; for (const e of g.events) { const dk = e.keys && e.keys.day; if (dk && dk !== lastDay) { lastDay = dk; const dt = new Date(dk + 'T12:00:00'); items.push({ kind: 'day', anchor: 'd-' + dk, dataDay: dk, groupKey: g.key, groupLabel: g.label, title: `${WEEKDAYS[dt.getDay()]} ${Number(String(dk).slice(8))}`, whenLine: countText(perDay[dk] || 1), cardHref: '', cardTarget: '_self', cardRel: '', whereLine: '', tag: '', image: '', }); } items.push(e); } g.events = items; } // HEADLINE: the heading names what you filtered to, not a generic slogan. const _pick = visible[0]; const headline = (() => { if (!_pick) return board.title || 'Eventet në Ballkan'; if (selected.city) return `Eventet në ${_pick.names.city}`; if (selected.country) return `Eventet në ${_pick.names.country}`; if (selected.month) return `Eventet në ${_pick.names.month}`; if (selected.day) return _pick.date === today ? (labels.today || 'Sot') : _pick.date === tomorrow ? (labels.tomorrow || 'Nesër') : `Eventet më ${_pick.day} ${_pick.monthShort}`; if (selected.category) return `${_pick.names.category}, kudo në Ballkan`; if (selected.reseller) return `Biletat nga ${_pick.resellerName}`; return board.title || 'Eventet në Ballkan'; })(); const hasFilters = Object.keys(selected).length > 0; const activeNames = FACETS .filter((k) => selected[k]) .map((k) => { const hit = pool.find((ev) => ev.keys[k] === selected[k]); return hit ? hit.names[k] : selected[k]; }); // —— Day strip: the next two weeks, one tap per day —— // counts ignore the day filter itself, so picking a day does not zero the others const dayCounts = new Map(); for (const ev of pool) if (ev.date && matches(ev, 'day')) dayCounts.set(ev.date, (dayCounts.get(ev.date) || 0) + 1); const dayStrip = []; // One chip per day that actually has events (not the next N calendar days), so the // strip covers the whole board and every day divider has a chip to select. for (const key of [...dayCounts.keys()].sort()) { const dt = new Date(key + 'T12:00:00'); const dow = dt.getDay(); // 0 = Sunday, 6 = Saturday dayStrip.push({ label: key === today ? (labels.today || 'Sot') : key === tomorrow ? (labels.tomorrow || 'Nesër') : `${WEEKDAYS[dow]} ${dt.getDate()}`, count: String(dayCounts.get(key) || 0), href: hrefWith('day', key), active: String(selected.day === key), weekend: (dow === 0 || dow === 6) ? 'true' : '', }); } const hero = heroEv ? { title: heroEv.title, whenLine: heroEv.whenLine, whereLine: heroEv.whereLine, image: heroEv.image || board.ogImage || '', ctaLabel: heroEv.ctaLabel, cardHref: heroEv.cardHref, cardTarget: heroEv.cardTarget, cardRel: heroEv.cardRel, anchor: heroEv.anchor, tag: [heroEv.category, heroEv.countryCode].filter(Boolean).join(' · '), soon: heroEv.soon, } : { title: '', whenLine: '', whereLine: '', image: '', ctaLabel: '', tag: '', soon: '', cardHref: '#events', cardTarget: '_self', cardRel: '', anchor: '', }; data.view = { headline, hero, heroes: sliderPool.map((h) => ({ title: h.title, whenLine: h.whenLine, whereLine: h.whereLine, image: h.image || board.ogImage || '', ctaLabel: h.ctaLabel, cardHref: h.cardHref, cardTarget: h.cardTarget, cardRel: h.cardRel, anchor: h.anchor, tag: [h.category, h.countryCode].filter(Boolean).join(' · '), soon: h.soon, })), groups, filters, monthRail: dayStrip, result: { count: String(visible.length), countLabel: countText(visible.length), summary: activeNames.join(' · '), hasFilters: String(hasFilters), filterLabel: hasFilters ? activeNames.slice(0, 2).join(' · ') + (activeNames.length > 2 ? ` +${activeNames.length - 2}` : '') : labels.filter || 'Filtro', clearHref: lang ? `?lang=${encodeURIComponent(lang)}&all=1#events` : '?all=1#events', clearLabel: labels.clear || 'Pastro', empty: visible.length ? '' : labels.empty || 'Asnjë event për këto filtra.', hasResults: String(visible.length > 0), }, }; /**/ /* SOCIALIZE-CLIENT: the site's one door to the socialize API (socialize.nevente.com). ONE file, TWO surfaces. `editorial_board.py::_socialize_client` splices it into the board's page logic between the socialize-client marker comments (the block is rebuilt from this file on every run, so editing here is what ships); the event pages carry the same text as their whole `logic`, written by build_event_pages.py. The mode is chosen at runtime, not build time: - BOARD : one target per card, `.nvb-card[data-ref]`. - PAGE : the event's own page, keyed by `data.uid` (`@`), control placed in the action row next to the CTA buttons. THE RULE THIS IS BUILT AROUND — socialize is the SOCIAL layer, not an event directory: 1. It must NEVER expose a list of events. The feed is scraped from third parties; publishing it back through this API would hand out the whole harvested set and advertise that we hold it. So this client does NOT call /api/v1/events, does not page it, does not index it, and does not match rows against a socialize list. (The API closed that endpoint to anonymous callers in 0.4.0 — 401 — and this client never asked for it anyway.) 2. When socialize is asked about an event it answers with the SOCIAL FACTS ONLY — how many people are interested, whether the viewer is one of them — keyed by an identifier we already hold. No title, date, venue, price, source or provenance comes back, so nothing on the page, in a response or in a log discloses that we know about that event, or how. 3. THE KEY IS OPAQUE. We address an event by `ref`, a hash of its source id and date (szRef, below) — never the uid itself. The uid is the source's own identifier (an Eventbrite ticket number, say); the ref travels to socialize in request paths and sits in our served HTML, so sending it raw would disclose where we scraped the event and let anyone holding it look the source up. HOW THE SESSION WORKS — this is what makes "I'm going" possible at all. The API accepts its `socialize_session` cookie as well as a Bearer token; the cookie is SameSite=Lax; and socialize.nevente.com shares this site's registrable domain, so a request from this page is SAME-SITE and the cookie is sent (Safari's ITP treats it as first-party for the same reason). That is why every request below sets `credentials:'include'` and why the API's CORS answers with the exact origin plus Allow-Credentials. The magic link lands on the API itself (there is no return URL in the contract), so the flow is: click -> sign in by email -> open the link (the cookie is set there) -> come back. The ref of the interrupted click is remembered as `pending` so it completes by itself on return. Page logic runs as `AsyncFunction('data','api','window')` TWICE — server-side for the render, then in the browser. `api.fetch` is the only fetch in both (SSR binds globalThis.fetch, the browser window.fetch); `window` is an SSR SHIM with only `location`, so `document` and `localStorage` are probed with `typeof`. THE SSR RUN NEVER FETCHES FACTS: they are per-event, so a board of 74 cards would be ~74 requests per phone view (155+ desktop) and would stall the render. The server asks only /info; the browser fills counts in lazily, per target, as it comes near the viewport. The API base can be overridden with `data.board.socializeApi`, and the copy with `data.board.socializeText` — set them on the shared block `blocks/nevente-events`' data, because the board's block fetch assigns `data.board` wholesale. */ const SZ_BASE = String((data.board && data.board.socializeApi) || 'https://socialize.nevente.com').replace(/\/+$/, ''); const SZ_API = SZ_BASE + '/api/v1'; const SZ_SESSION_KEY = 'socialize_session'; // a Bearer token, if one was ever stored const SZ_PENDING_KEY = 'socialize_pending'; // ref waiting for a sign-in to complete the click const SZ_FAV_KEY = 'socialize_has_favs'; // '1'/'0': does this viewer have favorites? asked once const SZ_TIMEOUT_MS = 4000; // SSR must not hang the render on a slow API const SZ_IS_DOM = (typeof document !== 'undefined'); /* Copy, overridable from the block data so wording changes need no code change — the board has `board.labels`, but an event page has no board at all. */ const SZ_TXT = Object.assign({ going: 'Do të vij', goingOn: 'Po vij', interested: 'të interesuar', interestedOne: 'i interesuar', signTitle: 'Do të shënosh pjesëmarrjen?', signLead: 'Të dërgojmë një link identifikimi. Pa fjalëkalim.', signEmail: 'Email-i yt', signSend: 'Dërgo linkun', signClose: 'Mbyll', signSent: 'Hap linkun në email: ai të identifikon (hapet faqja e socialize). Pastaj kthehu këtu ' + 'dhe pjesëmarrja shënohet vetë.', signErr: 'Nuk u dërgua. Provo përsëri.', retry: 'Provo përsëri', }, (data.board && data.board.socializeText) || {}); const szDiag = { ok: false, where: SZ_IS_DOM ? 'dom' : 'ssr', version: '', features: '', reason: '', refs: 0, // targets carrying a ref, counted server-side from the page's own data sample: '', // one ref, so the key's shape is verifiable in the served HTML }; /* szRef(ev) — the opaque key for one event: 12 hex chars of it, then `@date`. Pure and deterministic, so the server render, the browser, the board and the event page all compute the same key for the same event, and so does tomorrow's run: nothing to store, nothing to sync. Two 32-bit FNV-1a passes with different offsets give 64 bits, trimmed to 48 — collisions across a few hundred events are not a practical concern. */ function szRef(ev) { const src = String((ev && (ev.uid || ev.id)) || ''); const date = String((ev && ev.date) || ''); if (!src) return ''; let h1 = 0x811c9dc5, h2 = 0x9e3779b1; for (let i = 0; i < src.length; i++) { const c = src.charCodeAt(i); h1 = Math.imul(h1 ^ c, 0x01000193); h2 = Math.imul(h2 ^ (c + i), 0x85ebca6b); } h1 >>>= 0; h2 >>>= 0; const hex = h1.toString(16).padStart(8, '0') + h2.toString(16).padStart(8, '0'); return hex.slice(0, 12) + '@' + date; } function szStore(key, value) { try { if (typeof localStorage === 'undefined') return ''; if (value === undefined) return localStorage.getItem(key) || ''; if (value) localStorage.setItem(key, value); else localStorage.removeItem(key); } catch (e) { /* private mode */ } return ''; } const szToken = () => szStore(SZ_SESSION_KEY); const szRemember = (token) => szStore(SZ_SESSION_KEY, token); /* The click that did not finish is remembered WITH the little the API needs to link the event on that first click (a bare click on an unknown reference is a 404 — see szLinkPayload). Stored as JSON; a bare ref from an earlier version is still understood. */ const szPendingSet = (obj) => szStore(SZ_PENDING_KEY, JSON.stringify(obj)); function szPendingGet() { const raw = szStore(SZ_PENDING_KEY); if (!raw) return null; try { const parsed = JSON.parse(raw); if (parsed && parsed.ref) return parsed; } catch (e) { /* a bare ref, from an older run */ } return { ref: raw, link: null }; } /* The API parses `starts_at` as RFC3339, which REQUIRES an offset; the feed stores a naive local date+time. Ask the browser's own tz database for the offset that applies on that date rather than hard-coding DST rules (a wrong hour in their digest email is a real bug). */ function szOffset(naive) { try { const at = new Date(String(naive) + 'Z'); // read the wall clock as if UTC const parts = new Intl.DateTimeFormat('en-US', { timeZone: 'Europe/Tirane', timeZoneName: 'longOffset' }).formatToParts(at); const tz = parts.find((p) => p.type === 'timeZoneName'); const m = tz && String(tz.value).match(/GMT([+-]\d{2}:\d{2})/); if (m) return m[1]; } catch (e) { /* no Intl timeZone support: fall through */ } return '+01:00'; // CET; the winter offset } function szRfc3339(startsAt) { let s = String(startsAt || '').trim(); if (!s) return ''; if (/Z$|[+-]\d{2}:\d{2}$/.test(s)) return s; // already absolute if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(s)) s += ':00'; return s + szOffset(s); } /* What the social layer needs to meet an event for the first time: a title and a start. This is the FIRST-CLICK path — socialize creates the row from it, which is why a bare click is a 404 and why the board sends it on every POST (the API ignores it once the reference is known). */ function szLinkPayload(t) { let title = '', at = '', url = ''; if (t && t.card) { const te = t.card.querySelector('.nvb-card-title'); title = (te && te.textContent || '').trim(); at = t.card.getAttribute('data-at') || ''; const href = t.card.getAttribute('href') || ''; if (href.charAt(0) === '/') url = szOrigin() + href; else if (/^https?:/.test(href)) url = href; } else { const ev = (data && data.event) || {}; title = String(ev.name || '').trim(); at = ev.dateIso && ev.time ? (ev.dateIso + 'T' + ev.time) : ''; url = String((data && data.url) || (window.location && window.location.href) || ''); } const starts = szRfc3339(at); if (!title || !starts) return null; // nothing to link with: send a bare click const out = { title: title.slice(0, 300), starts_at: starts, timezone: 'Europe/Tirane' }; if (url) out.url = String(url); return out; } function szOrigin() { try { return String((window.location && window.location.origin) || '').replace(/\/+$/, ''); } catch (e) { return ''; } } /* The transport: session in (the cookie, plus a Bearer token if one is stored), JSON out, the API's error envelope unwrapped to a code. `credentials:'include'` is what carries the cookie. */ async function szRequest(method, path, body) { const url = SZ_API + path; const headers = { Accept: 'application/json' }; const tok = szToken(); if (tok) headers.Authorization = 'Bearer ' + tok; const init = { method: method || 'GET', headers: headers, credentials: 'include' }; if (body !== undefined) { headers['Content-Type'] = 'application/json'; init.body = JSON.stringify(body); } let ctrl = null; let timer = null; if (typeof AbortController !== 'undefined') { ctrl = new AbortController(); init.signal = ctrl.signal; timer = setTimeout(function () { ctrl.abort(); }, SZ_TIMEOUT_MS); } try { let res; if (api && typeof api.fetch === 'function') res = await api.fetch(url, init); else if (typeof fetch === 'function') res = await fetch(url, init); else throw new Error('no_fetch'); const raw = await res.text(); let json = null; try { json = raw ? JSON.parse(raw) : null; } catch (e) { json = null; } if (!res.ok) { const code = (json && json.error && json.error.code) || ('http_' + res.status); const err = new Error(code); err.status = res.status; err.body = json; throw err; } return json; } finally { if (timer) clearTimeout(timer); } } /* Reachability: /info carries the version and the feature flags and nothing about any event. The SSR run's only request. */ try { const info = await szRequest('GET', '/info'); szDiag.version = String((info && info.version) || ''); const f = (info && info.features) || {}; const on = []; for (const k of Object.keys(f)) { if (f[k]) on.push(k); } szDiag.features = on.join(','); szDiag.ok = true; } catch (e) { szDiag.ok = false; const st = e && e.status ? ('http' + e.status + ':') : ''; szDiag.reason = st + String((e && e.message) || e).slice(0, 60); } /* How many keys the render carries, and what one looks like — read off the page's OWN data, so it is a server-side fact about the render, not a claim about the API, and the cheapest way for curl to check the key's shape without a browser. */ (function () { const groups = (data.view && data.view.groups) || []; for (const g of groups) { const evs = (g && g.events) || []; for (const ev of evs) { const r = ev && ev.ref; if (!r) continue; szDiag.refs += 1; if (!szDiag.sample) szDiag.sample = String(r).slice(0, 40); } } if (!szDiag.refs && data.uid) { // event page: identity lives on the data root const bits = String(data.uid).split('@'); const r = szRef({ uid: data.sourceUid || bits[0], date: bits[1] }); if (r) { szDiag.refs = 1; szDiag.sample = r; } } })(); /* Bound by the invisible .nvb-sz-probe node on the board: the surface a crawler and curl both see. Written by the SERVER run ONLY — letting the browser re-run overwrite it would risk turning a reliable server-side fact into a browser-side error string in the DOM; the browser's own result lives on window.__socialize (where: 'dom'). A probe is public output, so it says nothing about events beyond how many keys the render carries. */ if (!SZ_IS_DOM) { data.socialize = { probe: 'sz:' + szDiag.where + ':' + (szDiag.ok ? 'ok' : 'err') + ' v' + (szDiag.version || '?') + (szDiag.refs ? ' refs:' + szDiag.refs + ' ' + szDiag.sample : ' refs:0') + (szDiag.ok ? '' : ' ' + szDiag.reason), ok: szDiag.ok, }; } window.__socialize = szDiag; /* ---------------------------------------------------------------- the browser layer */ /* Everything below runs in the browser only, and is the only place facts are fetched. */ const szSeen = {}; // ref -> facts, so a re-render does not refetch let szBooted = false; let szObs = null; function szStyle() { if (document.getElementById('nvb-sz-style')) return; const el = document.createElement('style'); el.id = 'nvb-sz-style'; el.textContent = [ '.nvb-card{position:relative}', '.nvb-sz-count{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;', 'border-radius:999px;font-size:.72rem;font-weight:700;line-height:1.5;', 'background:rgba(18,18,18,.06);color:#3d3d3d;white-space:nowrap}', '.nvb-card .nvb-sz-count{align-self:flex-start}', '.nvb-sz-count[hidden]{display:none}', '.nvb-sz-go{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:0;', 'border-radius:999px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:800;', 'background:#121212;color:#fff}', '.nvb-card .nvb-sz-go{position:absolute;right:10px;bottom:10px;z-index:3;padding:5px 11px;', 'font-size:.72rem}', '.nvb-sz-go[aria-pressed="true"]{background:#0a7d3f}', '.nvb-sz-go[disabled]{opacity:.55;cursor:default}', /* no margin-top: the mount sits INSIDE the action row now, and the 12px that separated it from the row above pushed the control down out of line with the buttons beside it. */ '.nvb-sz-page{display:flex;align-items:center;gap:10px;flex-wrap:wrap}', /* the sign-in sheet is fixed, so it can never nest inside a card's */ '.nvb-sz-veil{position:fixed;inset:0;z-index:9999;background:rgba(12,12,12,.45);', 'display:flex;align-items:center;justify-content:center;padding:18px}', '.nvb-sz-sheet{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:20px;', 'box-shadow:0 18px 50px rgba(0,0,0,.28);color:#121212}', '.nvb-sz-sheet h3{margin:0 0 6px;font-size:1.05rem}', '.nvb-sz-sheet p{margin:0 0 14px;font-size:.85rem;color:#5a5a5a;line-height:1.45}', '.nvb-sz-sheet input{width:100%;box-sizing:border-box;padding:11px 13px;font:inherit;', 'border:1px solid #d6d6d6;border-radius:10px;margin-bottom:10px}', '.nvb-sz-sheet .nvb-sz-row{display:flex;gap:8px}', '.nvb-sz-sheet button{flex:1;padding:11px 14px;border:0;border-radius:10px;font:inherit;', 'font-weight:800;cursor:pointer;background:#121212;color:#fff}', '.nvb-sz-sheet button.nvb-sz-ghost{background:#eee;color:#121212;flex:0 0 auto}', '.nvb-sz-sheet button[disabled]{opacity:.55;cursor:default}', ].join(''); document.head.appendChild(el); } /* One request about one event. A 404 is the documented answer for a reference nobody has linked yet and is NOT a failure: render nothing and stay quiet — never fall back to fetching the event itself (that is the disclosure we are avoiding). */ async function szFacts(ref) { if (!ref) return null; if (Object.prototype.hasOwnProperty.call(szSeen, ref)) return szSeen[ref]; let out = null; try { const r = await szRequest('GET', '/social/' + encodeURIComponent(ref)); if (r && typeof r === 'object') { out = { count: Number(r.interested_count) || 0, mine: !!r.viewer_interested }; } } catch (e) { out = null; } szSeen[ref] = out; return out; } /* The sign-in sheet, opened from the button when the API answers 401 (no session cookie yet). Its job is only the email: closing it leaves the click un-performed. */ function szSheet(pending) { if (!SZ_IS_DOM || document.querySelector('.nvb-sz-veil')) return; const want = pending || {}; const veil = document.createElement('div'); veil.className = 'nvb-sz-veil'; const sheet = document.createElement('div'); sheet.className = 'nvb-sz-sheet'; veil.appendChild(sheet); veil.addEventListener('click', function (e) { if (e.target === veil) veil.remove(); }); const h = document.createElement('h3'); h.textContent = SZ_TXT.signTitle; const lead = document.createElement('p'); lead.textContent = SZ_TXT.signLead; const input = document.createElement('input'); input.type = 'email'; input.placeholder = SZ_TXT.signEmail; input.autocomplete = 'email'; const row = document.createElement('div'); row.className = 'nvb-sz-row'; const send = document.createElement('button'); send.type = 'button'; send.textContent = SZ_TXT.signSend; const close = document.createElement('button'); close.type = 'button'; close.className = 'nvb-sz-ghost'; close.textContent = SZ_TXT.signClose; row.appendChild(send); row.appendChild(close); const note = document.createElement('p'); note.style.display = 'none'; sheet.appendChild(h); sheet.appendChild(lead); sheet.appendChild(input); sheet.appendChild(row); sheet.appendChild(note); close.addEventListener('click', function () { veil.remove(); }); send.addEventListener('click', async function () { const email = String(input.value || '').trim(); if (!email) { input.focus(); return; } send.disabled = true; try { await szRequest('POST', '/auth/email/start', { email: email }); /* Remember the interrupted click — with the link payload, so it can be completed from any page later, not only from the one that was open. */ if (want.ref) szPendingSet(want); lead.style.display = 'none'; input.style.display = 'none'; row.style.display = 'none'; note.style.display = 'block'; note.textContent = SZ_TXT.signSent; } catch (e) { note.style.display = 'block'; note.textContent = SZ_TXT.signErr; send.disabled = false; } }); document.body.appendChild(veil); input.focus(); } /* A "target" is one thing to show social facts for: a board card, or the event page itself. */ function szTargets() { const out = []; const cards = document.querySelectorAll('.nvb-card[data-ref]'); for (let i = 0; i < cards.length; i++) { const ref = cards[i].getAttribute('data-ref') || ''; /* The day-divider rows carry the same class and the bound attributes, with nothing in them — a target with no ref could only render a button that cannot act. Skip it. */ if (!ref) continue; out.push({ host: cards[i], card: cards[i], ref: ref }); } if (out.length) return out; /* Event page: the identity is in the page data, and the control goes where the page marks a home for it (`data-sz-mount`); the action-row lookup below is only the fallback for a page built before that marker existed. */ const bits = String(data.uid || '').split('@'); const ref = szRef({ uid: data.sourceUid || bits[0], date: bits[1] }); if (!ref) return out; let mount = document.querySelector('[data-sz-mount]'); if (!mount) { const shell = document.querySelector('main section.nv-shell, section.nv-shell'); if (!shell) return out; const divs = shell.querySelectorAll('div'); for (let i = 0; i < divs.length; i++) { if (divs[i].querySelector(':scope > a.nv-btn')) { mount = divs[i]; break; } } } if (!mount) return out; let host = mount.querySelector('.nvb-sz-page'); if (!host) { host = document.createElement('div'); host.className = 'nvb-sz-page'; mount.appendChild(host); } out.push({ host: host, card: null, ref: ref }); return out; } function szCountEl(t) { let el = t.host.querySelector('.nvb-sz-count'); if (el) return el; el = document.createElement('span'); el.className = 'nvb-sz-count'; el.hidden = true; /* The foot is the row the category already sits in, so the count lands on that line and shares it with the "I'm going" button instead of floating mid-card. */ const body = (t.card && (t.card.querySelector('.nvb-card-foot') || t.card.querySelector('.nvb-card-body'))) || t.host; body.appendChild(el); return el; } function szGoEl(t) { /* On a card the control goes INSIDE the card: the card is `` and its parent is the section's whole list (9 cards share it), so appending to the parent would stack every button in one corner and `:scope > button` would find the wrong one. Nested in the anchor it is — the handler stops the navigation, and the card is position:relative so the absolute placement anchors to the card. On an event page it goes in the action row. */ let el = t.host.querySelector('.nvb-sz-go'); if (el) return el; el = document.createElement('button'); el.type = 'button'; el.className = 'nvb-sz-go'; el.textContent = SZ_TXT.going; el.setAttribute('aria-pressed', 'false'); el.addEventListener('click', async function (ev) { ev.preventDefault(); ev.stopPropagation(); if (el.disabled || !t.ref) return; el.disabled = true; try { const was = el.getAttribute('aria-pressed') === 'true'; const path = '/social/' + encodeURIComponent(t.ref) + '/interest'; /* Marking interest on an event nobody has linked yet IS the link: without the payload the API answers 404 and the click is lost. Clearing interest never carries it. */ const link = was ? null : szLinkPayload(t); const r = was ? await szRequest('DELETE', path) : await szRequest('POST', path, link ? { event: link } : undefined); szTook(t, r, was); } catch (e) { if (e && e.status === 401) { /* No session yet: ask for the email. The remembered click means it completes by itself after the link has been opened (szCompletePending on the next load / tab return). */ szSheet({ ref: t.ref, link: szLinkPayload(t) }); } else { el.textContent = SZ_TXT.retry; } } finally { el.disabled = false; } }); /* On a card that has a foot, the button belongs IN that row — with the category and the count — rather than absolutely positioned over whatever the foot holds. */ const mount = (t.card && t.card.querySelector('.nvb-card-foot')) || t.host; mount.appendChild(el); return el; } /* POST/DELETE interest answers with the new facts — render those, do not refetch. */ function szTook(t, r, was) { const mine = r && typeof r.viewer_interested !== 'undefined' ? !!r.viewer_interested : !was; const count = r && typeof r.interested_count !== 'undefined' && r.interested_count !== null ? Number(r.interested_count) || 0 : (was ? 0 : 1); szSeen[t.ref] = { count: count, mine: mine }; szPaint(t, szSeen[t.ref]); /* A successful mark is proof this viewer has at least one favorite, so the navbar heart must stop hiding NOW. Without this, a visitor who marks their FIRST event in a tab whose cached answer was "nothing to show" sees no heart, and reasonably concludes the favorites feature is broken. */ if (mine) szFavHint(); } function szPaint(t, facts) { const el = szCountEl(t); const go = szGoEl(t); if (go) { go.setAttribute('aria-pressed', facts && facts.mine ? 'true' : 'false'); go.textContent = facts && facts.mine ? SZ_TXT.goingOn : SZ_TXT.going; } const n = facts ? facts.count : 0; /* Nothing social has happened yet: say nothing. A "0" on every card is noise, and the API's own guidance is to hide the counter rather than treat 404 as a failure. */ if (!n) { el.hidden = true; el.textContent = ''; el.removeAttribute('aria-label'); el.title = ''; return; } el.hidden = false; /* A numeral with an icon, not a sentence: "how many" is the entire message, and "1 i interesuar" repeated what the number already said. The sentence survives as the accessible name (and as the hover title), so a screen reader and a long-press still get it in full. */ const words = n + ' ' + (n === 1 ? SZ_TXT.interestedOne : SZ_TXT.interested); el.textContent = String(n); el.setAttribute('aria-label', words); el.title = words; } async function szFill(t) { szPaint(t, await szFacts(t.ref)); } /* Observed element -> its target. The event page observes a host it created, which carries no data-ref, so fall back to matching on the target list. */ function szFillHost(host) { const ref = (host.getAttribute && host.getAttribute('data-ref')) || ''; if (ref) { const isCard = !!(host.classList && host.classList.contains('nvb-card')); szFill({ host: host, card: isCard ? host : null, ref: ref }); return; } const ts = szTargets(); for (let i = 0; i < ts.length; i++) { if (ts[i].host === host) { szFill(ts[i]); return; } } } function szScan() { szStyle(); const ts = szTargets(); for (let i = 0; i < ts.length; i++) { const t = ts[i]; if (t.host.dataset && t.host.dataset.sz != null) continue; if (t.host.dataset) t.host.dataset.sz = '1'; szGoEl(t); // shown now; acts on 401 by asking to sign in if (szObs) szObs.observe(t.host); else szFill(t); } } /* A click interrupted by sign-in: the ref was remembered, so once the session cookie exists (after opening the emailed link) the next page load finishes the job. The POST is idempotent. */ async function szCompletePending() { const p = szPendingGet(); if (!p || !p.ref) return; try { const r = await szRequest('POST', '/social/' + encodeURIComponent(p.ref) + '/interest', p.link ? { event: p.link } : undefined); szSeen[p.ref] = { count: r && r.interested_count !== undefined ? Number(r.interested_count) || 0 : 1, mine: r && typeof r.viewer_interested !== 'undefined' ? !!r.viewer_interested : true, }; szStore(SZ_PENDING_KEY, ''); // done: never replay it const ts = szTargets(); for (let i = 0; i < ts.length; i++) { if (ts[i].ref === p.ref) szPaint(ts[i], szSeen[p.ref]); } } catch (e) { /* 404: the reference is unknown and there is nothing to link it with — drop it instead of retrying for ever. 401: simply not signed in yet, so keep it for the next visit. */ if (e && e.status === 404) szStore(SZ_PENDING_KEY, ''); } } function szBoot() { if (!SZ_IS_DOM || szBooted) return; szBooted = true; szStyle(); if (typeof IntersectionObserver !== 'undefined') { szObs = new IntersectionObserver(function (entries) { for (let i = 0; i < entries.length; i++) { const e = entries[i]; if (!e.isIntersecting) continue; szObs.unobserve(e.target); szFillHost(e.target); } }, { rootMargin: '400px 0px' }); // start before it is on screen: no visible pop-in } szScan(); szCompletePending(); szWatchReturn(); /* A board re-renders when a filter or a day chip is clicked, replacing the card nodes. Watch for that instead of assuming the first render is the only one. */ if (typeof MutationObserver !== 'undefined' && document.body) { let timer = null; new MutationObserver(function () { if (timer) clearTimeout(timer); timer = setTimeout(szScan, 120); }).observe(document.body, { childList: true, subtree: true }); } } /* The magic link lands on the API (its verify URL), so the visitor leaves the site and comes back in the SAME tab. The session cookie is already set by then — this just notices the return, so the interrupted click completes without a reload: open the link, switch back, the button flips by itself. (A `return_to` on the API's verify URL would avoid the JSON stop-over entirely; until it exists, this is the whole of what can be done from this side.) */ function szWatchReturn() { const settle = function () { if (document.visibilityState && document.visibilityState !== 'visible') return; if (szStore(SZ_PENDING_KEY)) szCompletePending(); }; document.addEventListener('visibilitychange', settle); window.addEventListener('focus', settle); window.addEventListener('pageshow', settle); } /* The favorites heart in the navbar, hidden by default (it ships with an inline display:none). The session cookie is HttpOnly, so there is no way to ask "is this viewer signed in?" without asking the API — and that is a request, so it is made ONCE per tab and remembered, because the board is a page you move around in and every navigation is a fresh document. Anonymous callers get a 401 and are simply left with a hidden heart: nothing to show, nothing to remember. */ function szFavHint() { /* Show the heart and remember it for the rest of the tab: called when the API confirms this viewer has something marked, either from the boot check or from a mark that just succeeded. */ try { sessionStorage.setItem(SZ_FAV_KEY, '1'); } catch (e) { /* private mode */ } const el = document.querySelector('.nv-fav-heart'); if (el) el.style.display = 'inline-flex'; } function szHeart() { const el = document.querySelector('.nv-fav-heart'); if (!el) return; let known = ''; try { known = sessionStorage.getItem(SZ_FAV_KEY) || ''; } catch (e) { /* private mode */ } if (known === '1') { szFavHint(); return; } /* A "no" is deliberately NOT remembered. Caching it hid the heart from the very person who had just marked something, in the tab they were already in — the answer to "do I have favorites?" changes the moment they use the button that creates favorites. Only the positive answer is worth keeping, so a page load with no session costs one small request and no lies. */ szRequest('GET', '/me/interests?limit=1&include_past=true').then(function (r) { const n = (r && Array.isArray(r.events)) ? r.events.length : 0; if (n) szFavHint(); }).catch(function () { /* no session: leave it hidden */ }); } if (SZ_IS_DOM) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', szBoot); else szBoot(); szHeart(); } window.Socialize = { base: SZ_BASE, diag: szDiag, ref: szRef, token: szToken, remember: szRemember, pending: szPendingSet, pendingGet: szPendingGet, link: szLinkPayload, rfc3339: szRfc3339, request: szRequest, facts: szFacts, targets: szTargets, /* Marking interest ("I'm going") for one ref. Needs the session cookie: szSheet obtains it (open the emailed link, come back) and szCompletePending finishes a remembered click. Callable directly as well, once a session exists. */ interest: function (ref, on) { const path = '/social/' + encodeURIComponent(String(ref || '')) + '/interest'; return szRequest(on ? 'POST' : 'DELETE', path); }, /* Email sign-in. The API always answers 202, whether or not the address has an account. */ signIn: function (email) { return szRequest('POST', '/auth/email/start', { email: String(email || '') }); }, verify: async function (token) { const r = await szRequest('GET', '/auth/email/verify?token=' + encodeURIComponent(String(token || ''))); if (r && r.session_token) szRemember(r.session_token); return r; }, me: function () { return szRequest('GET', '/me'); }, signOut: async function () { try { await szRequest('POST', '/auth/logout'); } catch (e) { /* already gone */ } szRemember(''); }, }; /**/ /* HERO-ROTATE: the collage renews one tile at a time for whoever is looking at it — each tile on its own cadence, all well inside the hour. Client-side only: the server-rendered six stay the base state, it pauses in a hidden tab, and it stands down under prefers-reduced-motion. Candidates come from view.groups (the payload the board already ships): in the browser the page's api.fetch is a server-side helper, so data.events is empty there. Each group's events include the day-divider rows (kind 'day'), which are not tiles and must be skipped. */ (function () { var diag = { ok: false, reason: '', swaps: 0 }; window.__nvHeroRotate = diag; var row = document.querySelector('.nvb-hero-row'); if (!row) { diag.reason = 'no-row'; return; } if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { diag.reason = 'reduced-motion'; return; } var evs = []; ((data.view && data.view.groups) || []).forEach(function (g) { (g.events || []).forEach(function (e) { if (e && e.kind !== 'day' && e.title && e.image) evs.push(e); }); }); diag.candidates = evs.length; if (evs.length < 9) { diag.reason = 'few-events:' + evs.length; return; } var when = function (e) { return String(e.dataDay || e.dateIso || ''); }; var typeOf = function (e) { return String(e.category || '').trim() || 'Tjeter'; }; var byType = {}; evs.forEach(function (e) { var k = typeOf(e) || 'Tjeter'; (byType[k] = byType[k] || []).push(e); }); Object.keys(byType).forEach(function (k) { byType[k].sort(function (a, b) { return when(a).localeCompare(when(b)); }); }); var soonest = evs.slice().sort(function (a, b) { return when(a).localeCompare(when(b)); }).slice(0, 4); var SECONDS = [120, 20, 35, 50, 70, 100]; // per tile, every one different diag.ok = true; diag.reason = 'running'; diag.intervals = SECONDS.slice(); diag.types = Object.keys(byType).length; var nextAt = {}; var cursor = 0; var tilesNow = function () { return Array.prototype.filter.call(row.children, function (el) { return el.classList && el.classList.contains('nvb-hero'); }); }; var text = function (el, sel) { var n = el.querySelector(sel); return n ? String(n.textContent) : ''; }; var titlesOnScreen = function () { return tilesNow().map(function (el) { return text(el, '.nvb-hero-title'); }); }; var paint = function (el, ev) { var img = el.querySelector('.nvb-hero-media img'); var body = el.querySelector('.nvb-hero-body'); var apply = function () { if (img) { img.src = ev.image; img.alt = ev.title || ''; img.style.opacity = '1'; } var set = function (sel, val) { var n = el.querySelector(sel); if (n) n.textContent = val || ''; }; set('.nvb-hero-when', ev.whenLine); set('.nvb-hero-title', ev.title); set('.nvb-hero-where', ev.whereLine); set('.nvb-hero-tag', [ev.category, ev.countryCode].filter(Boolean).join(' \u00b7 ')); if (ev.cardHref) el.setAttribute('href', ev.cardHref); if (ev.cardTarget) el.setAttribute('target', ev.cardTarget); if (ev.cardRel) el.setAttribute('rel', ev.cardRel); if (ev.anchor) el.setAttribute('id', ev.anchor); if (body) body.style.opacity = '1'; }; if (body) body.style.opacity = '0'; if (img) { img.style.opacity = '0'; setTimeout(apply, 240); } else apply(); }; var tick = function () { if (document.hidden) return; var tiles = tilesNow(); if (!tiles.length) return; var now = Date.now(); var onScreen = titlesOnScreen(); tiles.forEach(function (el, i) { var due = nextAt[i] || (nextAt[i] = now + (SECONDS[i] || 60) * 1000); if (now < due) return; nextAt[i] = now + (SECONDS[i] || 60) * 1000; // stay inside the tile's own type; when that type has nothing left to rotate to, step to // the next type in the ring rather than falling back to any event on the board var t = text(el, '.nvb-hero-tag').split('\u00b7')[0].trim(); var ring = Object.keys(byType); var taken = tiles.map(function (x) { return text(x, '.nvb-hero-tag').split('\u00b7')[0].trim(); }); var list = byType[t]; if (!list || list.length < 2) { // step to a type this tile can actually rotate in, preferring one no other tile is // already showing — otherwise every thin type collapses into the biggest one var start = ring.indexOf(t); for (var pass = 0; pass < 2 && (!list || list.length < 2); pass++) { for (var step = 1; step <= ring.length; step++) { var k = ring[(start + step + ring.length) % ring.length]; if (!byType[k] || byType[k].length < 2) continue; if (pass === 0 && taken.indexOf(k) !== -1) continue; list = byType[k]; break; } } } if (i === 0) list = soonest; if (!list || !list.length) list = evs; // RANDOM, not a walk: take a random event from this tile's list, skipping anything a tile // is already showing (and what this tile shows now), so the collage shuffles for each // visitor instead of marching through the same order every time. var shown = tiles.map(function (x) { return text(x, '.nvb-hero-title'); }); var pickable = list.filter(function (c) { return shown.indexOf(c.title) === -1 && c.title !== text(el, '.nvb-hero-title'); }); if (!pickable.length) pickable = list; var cand = pickable[Math.floor(Math.random() * pickable.length)]; if (cand) { paint(el, cand); diag.swaps++; } }); }; setInterval(tick, 1000); setTimeout(tick, 1200); })(); /* MENU-FILTERS (desktop): the facet groups — country, city, month, type, tickets — belong behind the nav's menu toggle, not in a bar under it. Drawn from the payload the page already ships (data.view.filters): every option is a plain link with its count, so there is no apply step. The toggle itself is the shared nav block's; it is hidden below 768px, where the board's own sub-nav carries the filters. */ (function () { if (typeof document === 'undefined') return; var groups = (data.view && data.view.filters) || []; if (!groups.length) return; function boot() { var nav = document.querySelector('header.nv-nav'); if (!nav || nav.querySelector('.nv-menu-panel__grid')) return; var grid = document.createElement('div'); grid.className = 'nv-menu-panel__grid'; groups.forEach(function (g) { var opts = (g && g.options) || []; if (opts.length < 2) return; var col = document.createElement('div'); var title = document.createElement('p'); title.className = 'nv-menu-facets__title'; title.textContent = g.label || g.key || ''; col.appendChild(title); var list = document.createElement('div'); list.className = 'nv-menu-facets__list'; opts.forEach(function (o) { var a = document.createElement('a'); a.className = 'nv-menu-facet' + (String(o.active) === 'true' ? ' is-on' : ''); a.href = o.href || '#events'; var span = document.createElement('span'); span.textContent = o.label || ''; a.appendChild(span); if (o.count) { var b = document.createElement('b'); b.textContent = o.count; a.appendChild(b); } list.appendChild(a); }); col.appendChild(list); grid.appendChild(col); }); if (!grid.childNodes.length) return; var panel = nav.querySelector('.nv-menu-panel'); if (!panel) { panel = document.createElement('div'); panel.className = 'nv-menu-panel'; nav.appendChild(panel); } panel.insertBefore(grid, panel.firstChild); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); else boot(); })();

Elena Bonelli - "The Voice of Rome"