, but not every browser also moves keyboard focus there — and the next Tab would start from the top of the page again. Focus is moved explicitly, so the next Tab lands in the content. Its own block, so a page with no menu still gets it; bound once. */ (function () { if (window.__yionSkipRuntime) return; window.__yionSkipRuntime = 1; document.addEventListener('click', function (e) { var link = e.target && e.target.closest ? e.target.closest('[data-yion-skip]') : null; if (!link) return; var target = document.getElementById((link.getAttribute('href') || '').slice(1)); if (!target) return; e.preventDefault(); if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1'); try { target.focus({ preventScroll: true }); } catch (_e) { target.focus(); } if (target.scrollIntoView) target.scrollIntoView({ block: 'start' }); }); })(); (function () { var buttons = Array.prototype.slice.call(document.querySelectorAll('[data-yion-menu]')); var btn = buttons[0]; var panel = document.getElementById('yion-mobile-nav'); if (!btn || !panel) return; function markButtons(on) { buttons.forEach(function (candidate) { candidate.setAttribute('aria-expanded', on ? 'true' : 'false'); candidate.setAttribute('aria-label', on ? 'Close menu' : (candidate.getAttribute('data-yion-menu-label') || 'Open menu')); }); } function open(trigger) { if (trigger) btn = trigger; panel.hidden = false; // Read a layout property to force a reflow, so the transition has a start // value. A single rAF is not enough when display flips in the same frame. void panel.offsetHeight; requestAnimationFrame(function () { panel.setAttribute('data-open', ''); }); markButtons(true); } function close() { panel.removeAttribute('data-open'); markButtons(false); setTimeout(function () { if (btn.getAttribute('aria-expanded') === 'false') panel.hidden = true; }, 380); } function isOpen() { return btn.getAttribute('aria-expanded') === 'true'; } buttons.forEach(function (candidate) { candidate.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); isOpen() ? close() : open(candidate); }); }); panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(); }); document.addEventListener('click', function (e) { if (!isOpen()) return; if (panel.contains(e.target) || btn.contains(e.target)) return; // A click inside another modal opened FROM this menu (the basket, from its // Basket row) belongs to that modal. Closing the menu underneath would leave // the basket nothing to hand focus back to when it closes. if (e.target.closest && e.target.closest('[role="dialog"][aria-modal="true"]')) return; close(); }); /* Escape belongs to the modal on top. With the basket open from the menu's Basket row, both this listener and the basket's hear the same key: without this guard one press closed BOTH, and focus landed on the menu button instead of the Basket row the visitor came from. The basket closes; the menu stays, with its trap back in charge; a second Escape closes the menu. */ document.addEventListener('keydown', function (e) { if (e.key !== 'Escape' || !isOpen()) return; var above = e.target && e.target.closest ? e.target.closest('[role="dialog"][aria-modal="true"]') : null; if (above && above !== panel) return; close(); btn.focus(); }); addEventListener('resize', function () { if (innerWidth >= 768 && isOpen()) close(); }); /* ---- overlay menus: scrim, close controls, body lock ---- */ var scrim = document.querySelector('.yion-mscrim'); var overlay = panel.className.indexOf('yion-mnav-dropdown') === -1 && panel.className.indexOf('yion-mnav-') !== -1; function announce(name, trigger) { try { panel.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: { trigger: trigger || null } })); } catch (_e) {} } document.querySelectorAll('[data-yion-menu-close]').forEach(function (b) { b.addEventListener('click', function (e) { e.preventDefault(); close(); }); }); /* * An overlay menu is a modal: focus moves in, stays in and returns to the * control that opened it. That is the ONE dialog runtime's job * (interaction.ts); this only announces the menu opening and closing. It used * to trap Tab itself, over a list that counted hidden controls — so a hidden * "last" control let Tab walk out into the page behind the scrim. * * A dropdown menu is not modal. It only hands focus back to the menu button * when focus would otherwise be left inside a panel that is disappearing. */ var baseOpen = open, baseClose = close; open = function (trigger) { baseOpen(trigger); if (scrim) { scrim.hidden = false; requestAnimationFrame(function () { scrim.setAttribute('data-open', ''); }); } if (overlay) { // A menu that covers the page must stop the page behind it scrolling, // or the reader loses their place the moment they close it. document.documentElement.style.overflow = 'hidden'; announce('yion:modal-open', trigger || btn); } }; close = function () { var inside = panel.contains(document.activeElement); baseClose(); if (scrim) { scrim.removeAttribute('data-open'); setTimeout(function () { scrim.hidden = true; }, 300); } document.documentElement.style.overflow = ''; if (overlay) announce('yion:modal-close'); else if (inside && btn.focus) btn.focus(); }; /* ---- the header as the page moves ---- */ (function () { var header = document.querySelector('.yion-nav'); if (!header) return; var mode = header.getAttribute('data-yion-sticky') || 'always'; var last = 0; addEventListener('scroll', function () { var y = window.scrollY; if (y > 8) header.setAttribute('data-scrolled', ''); else header.removeAttribute('data-scrolled'); if (mode === 'scroll') { // Hide going down, reveal coming up: the reader gets the whole screen // while reading and the menu back the moment they look for it. if (y > last && y > 180) header.setAttribute('data-hidden', ''); else header.removeAttribute('data-hidden'); } if (mode === 'top' && y > 4) header.setAttribute('data-hidden', ''); else if (mode === 'top') header.removeAttribute('data-hidden'); last = y; }, { passive: true }); })(); /* ---- mobile accordion: sub-menus inside the drawer ---- */ panel.querySelectorAll('.yion-accbtn').forEach(function (b) { b.addEventListener('click', function (e) { e.preventDefault(); var wrap = b.parentElement; var body = wrap.querySelector('.yion-accpanel'); var on = b.getAttribute('aria-expanded') === 'true'; b.setAttribute('aria-expanded', on ? 'false' : 'true'); wrap.toggleAttribute('data-open', !on); if (on) { setTimeout(function(){ if (b.getAttribute('aria-expanded')==='false') body.hidden = true; }, 300); } else { body.hidden = false; } }); }); })(); /* ---- desktop dropdowns and mega panels ---- */ (function () { var items = document.querySelectorAll('.yion-navitem'); if (!items.length) return; var openItem = null; function shut(it) { if (!it) return; it.removeAttribute('data-open'); var t = it.querySelector('.yion-navtrigger'); if (t) t.setAttribute('aria-expanded', 'false'); var p = it.querySelector('.yion-mega,.yion-drop'); if (p) setTimeout(function () { if (!it.hasAttribute('data-open')) p.hidden = true; }, 220); if (openItem === it) openItem = null; } function show(it) { if (openItem && openItem !== it) shut(openItem); var p = it.querySelector('.yion-mega,.yion-drop'); if (p) p.hidden = false; requestAnimationFrame(function () { it.setAttribute('data-open', ''); }); var t = it.querySelector('.yion-navtrigger'); if (t) t.setAttribute('aria-expanded', 'true'); openItem = it; } /* The links inside an item's panel, in reading order. */ function linksOf(it) { var p = it.querySelector('.yion-mega,.yion-drop'); return p ? Array.prototype.slice.call(p.querySelectorAll('a[href],button:not([disabled])')) : []; } items.forEach(function (it) { var timer; it.addEventListener('mouseenter', function () { clearTimeout(timer); show(it); }); it.addEventListener('mouseleave', function () { timer = setTimeout(function () { shut(it); }, 140); }); var t = it.querySelector('.yion-navtrigger'); if (t) t.addEventListener('click', function (e) { e.preventDefault(); it.hasAttribute('data-open') ? shut(it) : show(it); }); /* * The keyboard reaches a menu's links without Tabbing past every one: Down * opens the menu on its first link, Up on its last, and inside the panel * Up/Down/Home/End move between links (WAI-ARIA disclosure navigation). * Enter and Space still toggle it, as a button does. */ if (t) t.addEventListener('keydown', function (e) { if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; e.preventDefault(); show(it); var links = linksOf(it); var target = e.key === 'ArrowDown' ? links[0] : links[links.length - 1]; if (target) target.focus(); }); it.addEventListener('keydown', function (e) { if (e.target === t || ['ArrowDown', 'ArrowUp', 'Home', 'End'].indexOf(e.key) === -1) return; var links = linksOf(it); var at = links.indexOf(e.target); if (at === -1) return; e.preventDefault(); var to = e.key === 'Home' ? 0 : e.key === 'End' ? links.length - 1 : (at + (e.key === 'ArrowUp' ? -1 : 1) + links.length) % links.length; links[to].focus(); }); it.addEventListener('focusout', function (e) { if (!it.contains(e.relatedTarget)) shut(it); }); }); /* Escape closes the open menu and, when focus was on one of its links, puts it back on the menu's button — not on a link that is about to be hidden. */ document.addEventListener('keydown', function (e) { if (e.key !== 'Escape' || !openItem) return; var it = openItem, t = it.querySelector('.yion-navtrigger'); var inside = it.contains(document.activeElement) && document.activeElement !== t; shut(it); if (inside && t) t.focus(); }); })(); /* ---- desktop information drawer ---- */ (function () { var openBtn = document.querySelector('[data-yion-info-open]'); var panel = document.querySelector('.yion-info-panel'); var scrim = document.querySelector('.yion-info-scrim'); if (!openBtn || !panel || !scrim) return; /* Modal, like the basket drawer: moving focus in, keeping it in and handing it back belong to the one dialog runtime (interaction.ts). This panel used to move focus in and back but never keep it in, so Tab walked out behind the scrim. */ function announce(name, trigger) { try { panel.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: { trigger: trigger || null } })); } catch (_e) {} } function openPanel() { panel.hidden = false; scrim.hidden = false; requestAnimationFrame(function () { panel.setAttribute('data-open',''); scrim.setAttribute('data-open',''); }); document.documentElement.style.overflow = 'hidden'; announce('yion:modal-open', openBtn); } function closePanel() { panel.removeAttribute('data-open'); scrim.removeAttribute('data-open'); document.documentElement.style.overflow = ''; setTimeout(function(){ if (!panel.hasAttribute('data-open')) { panel.hidden = true; scrim.hidden = true; } }, 320); announce('yion:modal-close'); } openBtn.addEventListener('click', openPanel); document.querySelectorAll('[data-yion-info-close]').forEach(function (el) { el.addEventListener('click', closePanel); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && panel.hasAttribute('data-open')) closePanel(); }); })(); /* ---- header search ---- */ (function () { var w = document.querySelector('.yion-search'); if (!w) return; var b = w.querySelector('.yion-searchbtn'); var f = w.querySelector('.yion-searchfield'); b.addEventListener('click', function (e) { e.preventDefault(); var on = w.hasAttribute('data-open'); w.toggleAttribute('data-open', !on); if (!on) setTimeout(function () { f.focus(); }, 180); }); document.addEventListener('click', function (e) { if (!w.contains(e.target)) w.removeAttribute('data-open'); }); })(); (function () { var forms = document.querySelectorAll('form[data-yion-form]'); if (!forms.length) return; // Booking time-slot chips write into a hidden field so the choice is submitted. document.querySelectorAll('[data-yion-slot]').forEach(function (b) { b.addEventListener('click', function () { var form = b.closest('form'); if (!form) return; var hidden = form.querySelector('input[name="slot"]'); if (hidden) hidden.value = b.textContent.trim(); form.querySelectorAll('[data-yion-slot]').forEach(function (o) { o.removeAttribute('data-selected'); }); b.setAttribute('data-selected', ''); }); }); forms.forEach(function (form) { var status = form.querySelector('[data-yion-status]'); var btn = form.querySelector('button[type="submit"], button:not([type])'); function say(msg, ok) { if (!status) return; status.hidden = false; status.textContent = msg; status.style.color = ok ? 'var(--yion-accent)' : '#d33'; } form.addEventListener('submit', function (e) { e.preventDefault(); var data = {}; new FormData(form).forEach(function (v, k) { data[k] = v; }); data.site = form.getAttribute('data-yion-site') || ''; data.form = form.getAttribute('data-yion-form') || 'contact'; var endpoint = form.getAttribute('data-yion-endpoint'); var email = form.getAttribute('data-yion-email'); if (!endpoint) { if (email) { var body = Object.keys(data) .filter(function (k) { return k !== 'site' && k !== 'form'; }) .map(function (k) { return k + ': ' + data[k]; }).join('\n'); window.location.href = 'mailto:' + email + '?subject=' + encodeURIComponent('Website enquiry') + '&body=' + encodeURIComponent(body); say('Opening your email app…', true); } else { say('This form is not connected yet.', false); } return; } // aria-busy is the `loading` visitor state (BXP-STATES-2). if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); btn.dataset.label = btn.textContent; btn.textContent = 'Sending…'; } say('Sending…', true); fetch(endpoint, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(data) }) .then(function (r) { if (!r.ok) throw new Error('failed'); return r.json(); }) .then(function () { form.reset(); say(form.getAttribute('data-yion-thanks') || 'Thanks — we will be in touch.', true); }) .catch(function () { say('Could not send. Please try again or email us.', false); }) .finally(function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); btn.textContent = btn.dataset.label || 'Send'; } }); }); }); })(); /* * Studio page forms (BXP-STYLE-6B). * * A form element posts to the business's ONE public lead capture, naming the * website the page was served for and the form's own id. The server looks the * form up in the PUBLISHED document and validates the answers against it; the * checks here are the same rules, run first so a visitor is told at once. * * "Sent" is shown only when the capture answered { accepted: true }. Any other * answer — a refusal, a server error, no network — is said plainly and the * visitor's answers stay in the form. Outside the published site (the editor, * a preview, an exported file) nothing is posted and the page says why. */ (function () { var forms = document.querySelectorAll('form[data-yion-capture]'); if (!forms.length) return; var host = document.querySelector('[data-yion-site-key]'); var siteKey = host ? host.getAttribute('data-yion-site-key') || '' : ''; // The same linear check the server runs (packages/types yionIsEmailAddress): // never the backtracking pattern, which a long crafted value can stall. function isEmail(value) { if (!value || value.length > 500 || /\s/.test(value)) return false; var at = value.indexOf('@'); if (at < 1 || at !== value.lastIndexOf('@')) return false; var domain = value.slice(at + 1); var dot = domain.indexOf('.', 1); return dot > 0 && dot < domain.length - 1; } function isPhone(value) { if (!/^[+(\d][\d\s().+-]*$/.test(value)) return false; var digits = value.replace(/\D/g, '').length; return digits >= 7 && digits <= 15; } function typeOf(control) { return control.getAttribute('data-yion-field-type') || 'text'; } function valueOf(control) { var type = typeOf(control); // A file field answers with the files that uploaded (MEDIA-UPLOAD part 2). if (type === 'file') { var n = fileTokens(control).length; return n ? String(n) : ''; } if (type === 'checkbox') return control.checked ? 'yes' : ''; // A colour box is never blank to the browser — it reads black until picked. // With no owner default, an unpicked colour is an unanswered question. if (type === 'color' && control.hasAttribute('data-yion-colour-empty') && !control.hasAttribute('data-yion-colour-picked')) return ''; // A calculated answer is what it shows; the server recomputes it anyway. if (type === 'output') return String(control.textContent || '').trim(); // Several picks from one dropdown: checked here as one answer, sent as a list. if (control.multiple) return picks(control).join('; '); // A radio group answers with whichever of its radios is checked. if (type === 'radio') { var group = control.form ? control.form.querySelectorAll('input[type="radio"]') : []; for (var r = 0; r < group.length; r++) { if (group[r].name === control.name && group[r].checked) return group[r].value; } return ''; } return String(control.value || '').trim(); } function picks(control) { var out = []; for (var o = 0; o < control.options.length; o++) { if (control.options[o].selected && control.options[o].value) out.push(control.options[o].value); } return out; } // BXP-FORMS-2 — the message for a way this answer failed, exactly as the // renderer baked it from yionFieldMessages (the server's own words). function said(control, kind, fallback) { return control.getAttribute('data-yion-msg-' + kind) || fallback; } // The owner's label exactly as the server names it. Read from the control, not // from the visible label's text, which also carries the required mark — the // first version said '"Your name *" is required.' while the server said // '"Your name" is required.' (caught by the Chromium proof). function labelOf(control) { return control.getAttribute('data-yion-field-label') || 'This answer'; } /* * MEDIA-UPLOAD part 2 — a visitor's FILES. Each chosen file is uploaded on its * own to the business's quarantine and the page keeps only the token the * server hands back; the enquiry carries those tokens, never the bytes. The * checks below (size, type, how many) are the renderer's baked copies of the * server's own words — a courtesy: the server reads the bytes and is the judge. * A refused file is never sent, and its message stays on the page. */ var FILE_BASE = siteKey ? '/api/v1/public/sites/' + encodeURIComponent(siteKey) : ''; function filesOf(control) { return control.__yionFiles || (control.__yionFiles = []); } function fileTokens(control) { return filesOf(control).filter(function (f) { return f.token && (f.state === 'pending' || f.state === 'ready'); }) .map(function (f) { return f.token; }); } function fileTypeOk(set, file) { var t = String(file.type || '').toLowerCase(); var n = String(file.name || '').toLowerCase(); var photo = /^image\/(jpeg|png|webp|heic|heif)$/.test(t) || /\.(heic|heif)$/.test(n) || (!t && /\.(jpe?g|png|webp)$/.test(n)); var pdf = t === 'application/pdf' || (!t && /\.pdf$/.test(n)); return set === 'pdf' ? pdf : set === 'photos-pdf' ? photo || pdf : photo; } var FILE_WORDS = { uploading: 'Uploading…', pending: 'Checking for viruses…', ready: 'Ready' }; function drawFiles(control) { var list = document.getElementById(control.id + '-files'); if (!list) return; while (list.firstChild) list.removeChild(list.firstChild); filesOf(control).forEach(function (f) { var li = document.createElement('li'); li.setAttribute('data-yion-file-state', f.state); li.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;gap:8px'; var name = document.createElement('span'); name.textContent = f.name; name.style.cssText = 'font-weight:600;overflow-wrap:anywhere'; var state = document.createElement('span'); state.setAttribute('data-yion-file-words', ''); state.textContent = f.state === 'refused' ? f.message : FILE_WORDS[f.state] || ''; state.style.color = f.state === 'refused' ? '#b42318' : 'var(--yion-muted)'; var remove = document.createElement('button'); remove.type = 'button'; remove.setAttribute('data-yion-file-remove', ''); remove.setAttribute('aria-label', 'Remove ' + f.name); remove.textContent = 'Remove'; remove.style.cssText = 'border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit'; remove.addEventListener('click', function () { f.removed = true; control.__yionFiles = filesOf(control).filter(function (x) { return x !== f; }); drawFiles(control); control.dispatchEvent(new CustomEvent('yion-files', { bubbles: true })); }); li.appendChild(name); li.appendChild(state); li.appendChild(remove); list.appendChild(li); }); } function readFileAnswer(response) { return response.json() .catch(function () { return null; }) .then(function (body) { return { ok: response.ok, status: response.status, body: body || {} }; }); } function settleFile(control, f, result) { var body = result.body; if (result.status === 429) { f.state = 'refused'; f.message = 'Too many files at once. Please wait a few minutes and try again.'; return; } if (!result.ok || typeof body.token !== 'string') { f.state = 'refused'; f.message = typeof body.message === 'string' && body.message ? body.message : 'That file could not be uploaded. Please try again.'; return; } f.token = body.token; if (typeof body.message === 'string' && body.message) { f.state = 'refused'; f.message = body.message; f.token = ''; return; } if (body.scanStatus === 'clean') f.state = 'ready'; else if (body.scanStatus === 'pending') f.state = 'pending'; else { f.state = 'refused'; f.token = ''; f.message = 'That file could not be accepted.'; } } // While the virus check runs the file is held in quarantine on the server, so // the form may be sent; the page only keeps the visitor informed. function pollFile(control, f, started) { if (f.removed || f.state !== 'pending' || Date.now() - started > 90000) return; setTimeout(function () { if (f.removed || f.state !== 'pending') return; // relative-api-allowed: an anonymous visitor on the business's published site, same-origin through the Next rewrite. fetch(FILE_BASE + '/files/' + encodeURIComponent(f.token), { credentials: 'omit' }) .then(readFileAnswer) .then(function (result) { if (result.ok) settleFile(control, f, result); }) .catch(function () {}) .then(function () { drawFiles(control); pollFile(control, f, started); }); }, 2000); } function problem(control) { var type = typeOf(control); var value = valueOf(control); var label = labelOf(control); if (control.required && !value) { return type === 'checkbox' ? 'Please tick "' + label + '".' : '"' + label + '" is required.'; } if (value && type === 'email' && !isEmail(value)) return '"' + label + '" must be a valid email address.'; if (value && type === 'phone' && !isPhone(value)) return '"' + label + '" must be a valid phone number.'; // The browser's own verdict on what it could not even read: "12abc" in a // number box reaches here as an empty value with badInput set. var v = control.validity || {}; if (v.badInput) return said(control, 'type', '"' + label + '" is not valid.'); if (!value) return ''; var shortest = Number(control.getAttribute('minlength') || 0); var longest = Number(control.getAttribute('maxlength') || 0); if (shortest && value.length < shortest) return said(control, 'minlength', '"' + label + '" is too short.'); if (longest && value.length > longest) return said(control, 'maxlength', '"' + label + '" is too long.'); if (v.patternMismatch) return said(control, 'format', '"' + label + '" is not in the right format.'); if (v.typeMismatch || (type === 'url' && value.slice(0, 7).toLowerCase() !== 'http://' && value.slice(0, 8).toLowerCase() !== 'https://')) return said(control, 'type', '"' + label + '" is not valid.'); if (v.rangeUnderflow) return said(control, 'min', '"' + label + '" is too small.'); if (v.rangeOverflow) return said(control, 'max', '"' + label + '" is too large.'); if (v.stepMismatch) return said(control, 'step', '"' + label + '" is between the allowed steps.'); return ''; } // A relative date bound ("today", "today+90") is resolved on the visitor's // own calendar here, because a min baked into cached HTML would go stale. function isoDay(offset) { var d = new Date(); d.setDate(d.getDate() + offset); var mm = String(d.getMonth() + 1); var dd = String(d.getDate()); return d.getFullYear() + '-' + (mm.length < 2 ? '0' + mm : mm) + '-' + (dd.length < 2 ? '0' + dd : dd); } document.querySelectorAll('[data-yion-min],[data-yion-max]').forEach(function (control) { ['min', 'max'].forEach(function (side) { var bound = control.getAttribute('data-yion-' + side); if (!bound || bound.indexOf('today') !== 0) return; var day = isoDay(Number(bound.slice(5) || 0)); control.setAttribute(side, control.type === 'datetime-local' ? day + (side === 'min' ? 'T00:00' : 'T23:59') : day); }); }); // A range says its current value out loud, in the beside it. document.querySelectorAll('[data-yion-range-output]').forEach(function (output) { var range = document.getElementById(output.getAttribute('for')); if (!range) return; var show = function () { output.textContent = range.value; }; show(); range.addEventListener('input', show); if (range.form) range.form.addEventListener('reset', function () { setTimeout(show, 0); }); }); forms.forEach(function (form) { // The editor canvas selects elements; it never submits one. if (form.hasAttribute('data-yion-form-editing')) return; form.noValidate = true; var status = form.querySelector('[data-yion-status]'); var submit = form.querySelector('[data-yion-submit]'); var honeypot = form.querySelector('[data-yion-honeypot]'); var busy = false; // The page ships this button disabled: until this runtime is listening, a // click or Enter would post the answers to the page itself and lose them. // It is enabled only now that the submission is handled here. // A button the owner marked unavailable stays unavailable (BXP-STATES-2). if (submit && !submit.hasAttribute('data-yion-disabled')) { submit.disabled = false; submit.removeAttribute('aria-disabled'); submit.removeAttribute('data-yion-awaiting-runtime'); } form.setAttribute('data-yion-capture-ready', ''); function say(message, state) { form.setAttribute('data-yion-capture-state', state); if (!status) return; status.hidden = false; status.textContent = message; status.style.color = state === 'sent' ? 'var(--yion-accent-text,var(--yion-accent))' : state === 'sending' || state === 'preview' || state === 'waiting' ? 'var(--yion-muted)' : '#b42318'; } function mark(control, message) { var error = document.getElementById(control.id + '-error'); if (message) control.setAttribute('aria-invalid', 'true'); else control.removeAttribute('aria-invalid'); if (error) { error.hidden = !message; error.textContent = message; } } function recheck(event) { var control = event.target; if (control && control.hasAttribute && control.hasAttribute('data-yion-field-control') && control.getAttribute('aria-invalid')) mark(control, problem(control)); } form.addEventListener('input', recheck); form.addEventListener('change', recheck); // Only a real pick answers a colour question (see valueOf). function picked(event) { var control = event.target; if (control && control.type === 'color' && control.hasAttribute('data-yion-colour-empty')) control.setAttribute('data-yion-colour-picked', ''); } form.addEventListener('input', picked, true); form.addEventListener('change', picked, true); form.addEventListener('reset', function () { form.querySelectorAll('[data-yion-colour-picked]').forEach(function (control) { control.removeAttribute('data-yion-colour-picked'); }); }); // BXP-FORMS-2 — calculated answers and the form's own progress, kept live. // The same arithmetic as yionEvaluateFieldFormula; the server's is the one recorded. function numberOf(name) { var control = form.querySelector('[data-yion-field-control][name="' + name + '"]'); var raw = control ? String(control.value || '').trim() : ''; return raw === '' ? NaN : Number(raw); } function recalc() { form.querySelectorAll('output[data-yion-formula]').forEach(function (output) { var f; try { f = JSON.parse(output.getAttribute('data-yion-formula') || 'null'); } catch (e) { f = null; } if (!f || !f.fields || !f.fields.length) return; var total = f.op === 'sum' ? 0 : 1; for (var k = 0; k < f.fields.length; k++) { var n = numberOf(f.fields[k]); if (!isFinite(n)) { output.textContent = ''; return; } total = f.op === 'sum' ? total + n : total * n; } total = total * (typeof f.factor === 'number' ? f.factor : 1); output.textContent = f.money ? '£' + total.toFixed(2) : String(Math.round(total * 1e6) / 1e6); }); form.querySelectorAll('progress[data-yion-form-progress]').forEach(function (bar) { var controls = form.querySelectorAll('[data-yion-field-control]'); var counted = []; for (var c = 0; c < controls.length; c++) { var t = typeOf(controls[c]); if (t === 'hidden' || t === 'output' || controls[c].readOnly) continue; counted.push(controls[c]); } var required = counted.filter(function (x) { return x.required; }); var pool = required.length ? required : counted; var done = pool.filter(function (x) { return valueOf(x) !== ''; }).length; bar.max = pool.length || 1; bar.value = done; var words = bar.parentNode && bar.parentNode.querySelector('[data-yion-form-progress-words]'); if (words) words.textContent = done + ' of ' + pool.length + (required.length ? ' required answers given' : ' answers given'); }); } form.addEventListener('input', recalc); form.addEventListener('change', recalc); form.addEventListener('reset', function () { setTimeout(recalc, 0); }); recalc(); // MEDIA-UPLOAD part 2 — upload each chosen file as soon as it is picked. var uploading = 0; var held = false; function uploadFile(control, file) { var f = { name: String(file.name || 'file'), state: 'uploading', token: '', message: '' }; var files = filesOf(control); var most = Number(control.getAttribute('data-yion-file-max') || 1); var mb = Number(control.getAttribute('data-yion-file-mb') || 10); var live = files.filter(function (x) { return x.state !== 'refused'; }).length; files.push(f); if (live >= most) { f.state = 'refused'; f.message = said(control, 'filecount', 'Too many files.'); return; } if (file.size > mb * 1024 * 1024) { f.state = 'refused'; f.message = said(control, 'filesize', 'That file is too big.'); return; } if (!file.size) { f.state = 'refused'; f.message = said(control, 'fileempty', 'That file is empty.'); return; } if (!fileTypeOk(control.getAttribute('data-yion-file-accept') || 'photos', file)) { f.state = 'refused'; f.message = said(control, 'filetype', 'That type of file is not accepted.'); return; } if (!FILE_BASE) { f.state = 'refused'; f.message = 'This is a preview. Files are sent from your published site.'; return; } var body = new FormData(); body.append('field', control.name); body.append('_hp', honeypot ? honeypot.value : ''); body.append('file', file); uploading++; // relative-api-allowed: an anonymous visitor on the business's published site, same-origin through the Next rewrite; credentials omitted — the upload uses no identity. fetch(FILE_BASE + '/forms/' + encodeURIComponent(form.getAttribute('data-yion-form-id') || '') + '/files', { method: 'POST', credentials: 'omit', body: body }) .then(readFileAnswer) .then(function (result) { if (!f.removed) settleFile(control, f, result); }) .catch(function () { f.state = 'refused'; f.message = 'That file could not be uploaded. Check your connection and try again.'; }) .then(function () { uploading--; drawFiles(control); if (f.state === 'pending') pollFile(control, f, Date.now()); control.dispatchEvent(new CustomEvent('yion-files', { bubbles: true })); if (!uploading && held) { held = false; attempt(); } }); } // A file list changed (uploaded, refused, removed): re-check the field and // the form's progress. Not a 'change' event, which would re-read the input. form.addEventListener('yion-files', function (event) { var control = event.target; if (control.getAttribute('aria-invalid')) mark(control, problem(control)); recalc(); }); form.querySelectorAll('input[type="file"][data-yion-field-control]').forEach(function (control) { control.addEventListener('change', function () { var chosen = control.files ? Array.prototype.slice.call(control.files) : []; if (!chosen.length) return; chosen.forEach(function (file) { uploadFile(control, file); }); // The input is emptied so the same file can be chosen again after a Remove; // what the form sends is the tokens, never the input's own files. try { control.value = ''; } catch (e) {} mark(control, ''); drawFiles(control); }); }); form.addEventListener('reset', function () { form.querySelectorAll('input[type="file"][data-yion-field-control]').forEach(function (control) { filesOf(control).forEach(function (f) { f.removed = true; }); control.__yionFiles = []; drawFiles(control); }); }); form.addEventListener('submit', function (event) { event.preventDefault(); attempt(); }); function attempt() { if (busy) return; // A file still uploading holds the send until it finishes; nothing is lost // and the visitor is told why the button is waiting. if (uploading) { held = true; if (submit) { submit.disabled = true; submit.setAttribute('aria-busy', 'true'); } say('Waiting for your files to finish uploading…', 'waiting'); return; } if (submit && !submit.hasAttribute('data-yion-disabled')) { submit.disabled = false; submit.removeAttribute('aria-busy'); } var controls = form.querySelectorAll('[data-yion-field-control]'); var answers = {}; var first = null; for (var i = 0; i < controls.length; i++) { var control = controls[i]; var message = problem(control); mark(control, message); if (message && !first) first = control; answers[control.name] = typeOf(control) === 'file' ? fileTokens(control) : control.multiple ? picks(control) : valueOf(control); } if (first) { say('Please check the highlighted answers.', 'invalid'); first.focus(); return; } if (!siteKey) { say('This is a preview. Answers are sent from your published site.', 'preview'); return; } busy = true; if (submit) { submit.disabled = true; submit.setAttribute('aria-busy', 'true'); } say('Sending…', 'sending'); // relative-api-allowed: this runtime runs for an anonymous visitor on the business's own published site, where /api/v1 is same-origin through the Next rewrite; credentials are omitted because the capture uses no identity. fetch('/api/v1/public/sites/' + encodeURIComponent(siteKey) + '/leads', { method: 'POST', credentials: 'omit', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ formId: form.getAttribute('data-yion-form-id'), pagePath: location.pathname, answers: answers, _hp: honeypot ? honeypot.value : '' }) }) .then(function (response) { return response.json() .catch(function () { return null; }) .then(function (body) { return { ok: response.ok, status: response.status, body: body }; }); }) .then(function (result) { if (result.ok && result.body && result.body.accepted === true) { form.reset(); say(form.getAttribute('data-yion-success') || 'Thank you. Your message has been received.', 'sent'); return; } var body = result.body || {}; var reason = result.status === 400 && typeof body.message === 'string' ? body.message : ''; if (reason && typeof body.field === 'string') { var named = form.querySelector('[data-yion-field-control][name="' + body.field.replace(/[^\w]/g, '') + '"]'); if (named) { mark(named, reason); named.focus(); } } say(reason || 'Your message could not be sent. Please try again.', 'failed'); }) .catch(function () { say('Your message could not be sent. Check your connection and try again.', 'failed'); }) .then(function () { busy = false; if (submit) { submit.disabled = false; submit.removeAttribute('aria-busy'); } }); } }); })(); (function () { function records(payload) { if (Array.isArray(payload)) return payload; if (payload && Array.isArray(payload.items)) return payload.items; if (payload && payload.data && Array.isArray(payload.data.items)) return payload.data.items; if (payload && Array.isArray(payload.data)) return payload.data; return []; } function destination(record, action) { if (!record) return ''; var actionFields = { 'programme-enrolment': ['applyUrl', 'enrolUrl', 'actionUrl'], 'service-booking': ['bookingUrl', 'bookUrl', 'actionUrl'], 'product-purchase': ['checkoutUrl', 'purchaseUrl', 'actionUrl'] }; var fields = (actionFields[action] || []).concat(['href', 'url', 'path']); for (var i = 0; i < fields.length; i += 1) { if (typeof record[fields[i]] === 'string' && record[fields[i]]) return record[fields[i]]; } return ''; } function unavailable(el) { el.dispatchEvent(new CustomEvent('yion:cta-unavailable', { bubbles: true })); window.alert('This action is connected, but no destination is available yet.'); } // A non-navigation action renders as role="button" with no href, so the // keyboard reaches it through tabindex and this makes Enter and Space press it. document.addEventListener('keydown', function (event) { if (event.key !== 'Enter' && event.key !== ' ') return; var el = event.target && event.target.closest ? event.target.closest('[data-yion-action][role="button"]') : null; if (!el || el.hasAttribute('href')) return; event.preventDefault(); el.click(); }); document.addEventListener('click', function (event) { var el = event.target && event.target.closest ? event.target.closest('[data-yion-action]') : null; if (!el) return; var action = el.getAttribute('data-yion-action') || 'navigate'; if (action === 'navigate') return; /* Operating an interaction host on this page is not a DESTINATION, so it has no source to resolve and belongs to YION_HOST_RUNTIME. Falling through here told the visitor "no destination is available yet" — in an alert — over a control that works. */ if (["open","close","toggle"].indexOf(action) > -1) return; event.preventDefault(); if (action === 'submit-form' || action === 'newsletter') { var selector = el.getAttribute('data-yion-action-target'); var form = (selector && document.querySelector(selector)) || el.closest('form'); if (!form && action === 'newsletter') { form = document.querySelector('form[data-yion-form="newsletter"], form input[type="email"]')?.closest('form'); } if (!form) { unavailable(el); return; } if (action === 'newsletter' && !form.getAttribute('data-yion-endpoint')) { form.setAttribute('data-yion-endpoint', '/api/v1/marketing/audiences/public/subscribe'); } if (form.requestSubmit) form.requestSubmit(); else form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); return; } var source = el.getAttribute('data-yion-action-source'); if (!source) { unavailable(el); return; } var target = el.getAttribute('data-yion-action-target'); var original = el.textContent; el.setAttribute('aria-busy', 'true'); el.style.pointerEvents = 'none'; // relative-api-allowed: this runtime is injected into the PUBLISHED site and runs for an anonymous visitor on the business's own domain, where /api/v1 is same-origin through the Next rewrite; an absolute base would need CORS for every customer domain. fetch('/api/v1/' + source.replace(/^\/+|\/+$/g, '')) .then(function (response) { if (!response.ok) throw new Error('failed'); return response.json(); }) .then(function (payload) { var items = records(payload); var record = target ? items.find(function (item) { return [item.id, item.slug, item.key].some(function (value) { return String(value || '') === target; }); }) : items[0]; var url = destination(record, action); if (url) window.location.assign(url); else unavailable(el); }) .catch(function () { unavailable(el); }) .finally(function () { el.removeAttribute('aria-busy'); el.style.pointerEvents = ''; if (original != null && !el.textContent) el.textContent = original; }); }); })(); (function () { document.querySelectorAll('[data-yion-countdown]').forEach(function (el) { // Three parts is HH:MM:SS, four is DD:HH:MM:SS — a sale that runs for days // cannot be stated in hours, and "72:00:00" is not something anyone reads. var parts = (el.getAttribute('data-yion-countdown') || '08:00:00').split(':').map(Number); if (parts.length < 4) parts.unshift(0); var total = (parts[0] || 0) * 86400 + (parts[1] || 0) * 3600 + (parts[2] || 0) * 60 + (parts[3] || 0); var out = { day: el.querySelector('[data-unit="day"]'), hrs: el.querySelector('[data-unit="hrs"]'), min: el.querySelector('[data-unit="min"]'), sec: el.querySelector('[data-unit="sec"]') }; function pad(n) { return String(n).padStart(2, '0'); } function tick() { if (total < 0) total = 0; // With no day slot on the page the days fold back into the hours, so a // three-slot clock still shows the whole remaining time. var days = Math.floor(total / 86400); var rest = total - days * 86400; if (out.day) out.day.textContent = pad(days); if (out.hrs) out.hrs.textContent = pad(Math.floor(rest / 3600) + (out.day ? 0 : days * 24)); if (out.min) out.min.textContent = pad(Math.floor((rest % 3600) / 60)); if (out.sec) out.sec.textContent = pad(rest % 60); if (total > 0) total--; } tick(); setInterval(tick, 1000); }); })(); (function () { var els = [].slice.call(document.querySelectorAll('[data-yion-count]')); if (!els.length) return; var reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches; function run(el) { var raw = el.textContent.trim(); var m = /^([^0-9]*)([0-9]+(?:[.,][0-9]+)?)(.*)$/.exec(raw); if (!m || reduce) return; var pre = m[1], target = parseFloat(m[2].replace(',', '.')), post = m[3]; var decimals = (m[2].split(/[.,]/)[1] || '').length; var dur = 1400, t0 = 0; function step(t) { if (!t0) t0 = t; var k = Math.min(1, (t - t0) / dur); var eased = 1 - Math.pow(1 - k, 3); el.textContent = pre + (target * eased).toFixed(decimals) + post; if (k < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (!e.isIntersecting) return; io.unobserve(e.target); run(e.target); }); }, { threshold: 0.4 }); els.forEach(function (el) { io.observe(el); }); })(); (function () { var buttons = [].slice.call(document.querySelectorAll('[data-yion-audio]')); if (!buttons.length) return; function mark(btn, playing) { var glyph = btn.querySelector('[data-icon]'); if (glyph) glyph.innerHTML = playing ? '❚❚' : '▶'; } buttons.forEach(function (btn) { var el = btn.parentNode.querySelector('audio'); if (!el) return; btn.addEventListener('click', function () { if (el.paused) { document.querySelectorAll('audio').forEach(function (o) { if (o !== el) o.pause(); }); el.play().catch(function () {}); } else { el.pause(); } }); el.addEventListener('play', function () { mark(btn, true); }); el.addEventListener('pause', function () { mark(btn, false); }); el.addEventListener('ended', function () { mark(btn, false); }); }); })(); (function () { var root = document.querySelector('[data-yion-site]') || document.documentElement; var NS = 'yion:' + (root.getAttribute('data-yion-site') || 'site') + ':'; var business = root.getAttribute('data-yion-business') || ''; var apiBase = (root.getAttribute('data-yion-commerce-api') || '/api/v1').replace(/\/$/, ''); var money = root.getAttribute('data-yion-currency') || ''; function storageKey(k) { return k === 'cart' && business ? 'yion-cart:' + business : NS + k; } function currencyCode() { return money === '€' ? 'EUR' : money === '$' ? 'USD' : 'GBP'; } function slugFromHref(href) { var match = String(href || '').match(/\/shop\/([^/?#]+)/); return match ? decodeURIComponent(match[1]) : ''; } function fromStored(k, x) { if (k !== 'cart' || !x || !x.productId) return x; return { id: x.productId, title: x.name || '', price: money + num(x.price).toFixed(2), image: x.imageUrl || '', href: x.slug ? '/shop/' + encodeURIComponent(x.slug) : '', qty: Math.max(1, parseInt(x.quantity, 10) || 1), variantId: x.variantId || '' }; } function toStored(k, x) { if (k !== 'cart' || !business) return x; return { productId: x.id, variantId: x.variantId || undefined, name: x.title || '', price: num(x.price), currency: currencyCode(), quantity: Math.max(1, parseInt(x.qty, 10) || 1), imageUrl: x.image || null, slug: slugFromHref(x.href) || undefined }; } function read(k) { try { var key = storageKey(k); var raw = localStorage.getItem(key); var legacy = false; /* Carry a pre-bridge draft basket forward once instead of losing it. */ if (!raw && k === 'cart' && business) { raw = localStorage.getItem(NS + k); legacy = !!raw; } var v = JSON.parse(raw || '[]'); if (!Array.isArray(v)) return []; if (legacy) { localStorage.setItem(key, JSON.stringify(v.map(function (x) { return toStored(k, x); }))); localStorage.removeItem(NS + k); } return v.map(function (x) { return fromStored(k, x); }); } catch (e) { return []; } } function write(k, v) { try { localStorage.setItem(storageKey(k), JSON.stringify(v.map(function (x) { return toStored(k, x); }))); if (k === 'cart' && business) localStorage.removeItem(NS + k); } catch (e) {} if (k === 'cart' && business) window.dispatchEvent(new CustomEvent('yion:cart-changed')); paint(k); if (k === 'cart') markCartButtons(); if (k === 'wish') markSaved(); } function num(s) { var m = String(s == null ? '' : s).replace(/[^0-9.,]/g, '').replace(/,/g, ''); var n = parseFloat(m); return isFinite(n) ? n : 0; } function fmt(n) { return money + n.toFixed(2); } /* ---------------- mutation ---------------- */ function add(store, item) { var list = read(store); var found = null; var requested = store === 'cart' ? Math.max(1, parseInt(item.qty, 10) || 1) : 1; for (var i = 0; i < list.length; i++) if (list[i].id === item.id) found = list[i]; if (found) { if (store === 'cart') found.qty = (found.qty || 1) + requested; } else { item.qty = requested; list.push(item); } write(store, list); return !found; } function drop(store, id) { write(store, read(store).filter(function (x) { return x.id !== id; })); } function bump(store, id, by) { var list = read(store); for (var i = 0; i < list.length; i++) { if (list[i].id === id) { list[i].qty = Math.max(0, (list[i].qty || 1) + by); if (!list[i].qty) { list.splice(i, 1); } break; } } write(store, list); } function has(store, id) { return read(store).some(function (x) { return x.id === id; }); } function requestedQuantity(button) { var id = button.getAttribute('data-id') || button.getAttribute('data-title') || ''; var requested = 1; document.querySelectorAll('[data-yion-quantity-for]').forEach(function (input) { if (input.getAttribute('data-yion-quantity-for') !== id) return; requested = Math.max(1, parseInt(input.value, 10) || 1); }); return requested; } function itemFrom(button) { return { id: button.getAttribute('data-id') || button.getAttribute('data-title'), title: button.getAttribute('data-title') || '', price: button.getAttribute('data-price') || '', image: button.getAttribute('data-img') || '', href: button.getAttribute('data-href') || '', qty: requestedQuantity(button) }; } function announceAdded(item, button) { var status = document.querySelector('[data-yion-shop-status]'); if (!status) { status = document.createElement('div'); status.className = 'yion-shop-status'; status.setAttribute('data-yion-shop-status', ''); status.setAttribute('role', 'status'); status.setAttribute('aria-live', 'polite'); document.body.appendChild(status); } var destination = button.getAttribute('data-yion-store-label') || 'basket'; status.textContent = (item.title || 'Item') + ' added to ' + destination + '.'; status.setAttribute('data-open', ''); clearTimeout(status._yionTimer); status._yionTimer = setTimeout(function () { status.removeAttribute('data-open'); }, 2400); } function checkout() { if (!business) return; var email = document.querySelector('[data-yion-checkout-email]'); var postcode = document.querySelector('[data-yion-checkout-postcode]'); var discount = document.querySelector('[data-yion-checkout-discount]'); var button = document.querySelector('[data-yion-checkout]'); var error = document.querySelector('[data-yion-checkout-error]'); function fail(message) { if (!error) return; error.textContent = message; error.hidden = false; } if (!email || !String(email.value || '').trim()) { fail('Please enter your email so we can send your receipt.'); if (email) email.focus(); return; } if (error) error.hidden = true; if (button) { button.disabled = true; button.setAttribute('aria-busy', 'true'); button.textContent = 'Starting checkout…'; } fetch(apiBase + '/public/shop/' + encodeURIComponent(business) + '/checkout', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ customerEmail: String(email.value).trim(), items: read('cart').map(function (x) { return { productId: x.id, variantId: x.variantId || undefined, quantity: Math.max(1, parseInt(x.qty, 10) || 1) }; }), discountCode: discount && String(discount.value || '').trim() || undefined, shippingPostcode: postcode && String(postcode.value || '').trim() || undefined }) }).then(function (response) { return response.json().catch(function () { return {}; }).then(function (data) { if (!response.ok) throw new Error(Array.isArray(data.message) ? data.message.join(', ') : data.message || 'We could not start checkout. Please try again.'); if (!data.checkoutUrl) throw new Error('Checkout is not available right now. Please try again shortly.'); window.location.href = data.checkoutUrl; }); }).catch(function (cause) { fail(cause && cause.message ? cause.message : 'We could not reach the shop. Please check your connection and try again.'); if (button) { button.disabled = false; button.removeAttribute('aria-busy'); button.textContent = 'Checkout'; } }); } /* ---------------- painting ---------------- */ function paint(store) { var list = read(store); var count = list.reduce(function (n, x) { return n + (store === 'cart' ? (x.qty || 1) : 1); }, 0); var total = list.reduce(function (n, x) { return n + num(x.price) * (x.qty || 1); }, 0); document.querySelectorAll('[data-yion-badge="' + store + '"]').forEach(function (el) { el.textContent = String(count); el.hidden = false; }); document.querySelectorAll('[data-yion-total="' + store + '"]').forEach(function (el) { el.textContent = fmt(total); }); document.querySelectorAll('[data-yion-list="' + store + '"]').forEach(function (box) { var empty = box.parentNode.querySelector('[data-yion-empty="' + store + '"]'); var panel = box.closest ? box.closest('[data-yion-panel]') : null; var foot = panel ? panel.querySelector('[data-yion-foot="' + store + '"]') : null; if (empty) empty.hidden = list.length > 0; if (foot) foot.hidden = list.length === 0; box.innerHTML = ''; list.forEach(function (x) { var row = document.createElement('div'); row.className = 'yion-drow'; var img = x.image ? '

' : ''; var qty = store === 'cart' ? '' + '' + '' + (x.qty || 1) + '' + '' + '' : ''; row.innerHTML = img + '' + (x.href ? '' + x.title + '' : '' + x.title + '') + '' + (x.price || '') + '' + qty + '' + ''; row.setAttribute('data-id', x.id); box.appendChild(row); }); }); } /* ---------------- panels ---------------- */ /* * The drawers are modal, so where keyboard focus goes is not decided here. * Each panel announces that it opened (naming the control that opened it) or * closed, and the ONE dialog runtime moves focus in, keeps it in and gives it * back — the same behaviour as every other modal on the page. This runtime * used to move none of it: the basket slid in over a scrim while focus stayed * on the page behind. */ function announce(panel, name, trigger) { try { panel.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: { trigger: trigger || null } })); } catch (_e) {} } function openPanel(name, trigger) { var target = null; document.querySelectorAll('[data-yion-panel]').forEach(function (p) { if (p.getAttribute('data-yion-panel') === name) { target = p; return; } p.removeAttribute('data-open'); setTimeout(function () { if (!p.hasAttribute('data-open')) p.hidden = true; }, 260); announce(p, 'yion:modal-close'); }); if (target) { var opened = target; opened.hidden = false; requestAnimationFrame(function () { opened.setAttribute('data-open', ''); }); announce(opened, 'yion:modal-open', trigger); } var scrim = document.querySelector('[data-yion-scrim]'); if (scrim) { scrim.hidden = false; requestAnimationFrame(function () { scrim.setAttribute('data-open', ''); }); } root.style.overflow = 'hidden'; } function closePanels() { document.querySelectorAll('[data-yion-panel]').forEach(function (p) { p.removeAttribute('data-open'); setTimeout(function () { if (!p.hasAttribute('data-open')) p.hidden = true; }, 260); announce(p, 'yion:modal-close'); }); var scrim = document.querySelector('[data-yion-scrim]'); if (scrim) { scrim.removeAttribute('data-open'); setTimeout(function () { if (!scrim.hasAttribute('data-open')) scrim.hidden = true; }, 260); } root.style.overflow = ''; } /* ---------------- wiring ---------------- */ function showHostedCheckout() { document.querySelectorAll('[data-yion-commerce-checkout]').forEach(function (el) { el.hidden = !business; }); } /* * Bind once, repaint always. * * The Studio re-injects the document on every edit, and a second copy of this * runtime on the same page would attach a second click handler — so one press * of "add" would add twice, then three times. The flag on the root element * makes re-running the script a repaint rather than a rebind. */ if (root.hasAttribute('data-yion-shop-on')) { showHostedCheckout(); paint('cart'); paint('wish'); markCartButtons(); markSaved(); return; } root.setAttribute('data-yion-shop-on', ''); showHostedCheckout(); document.addEventListener('click', function (e) { var t = e.target; var quantityButton = t.closest ? t.closest('[data-yion-quantity-bump]') : null; if (quantityButton) { e.preventDefault(); var key = quantityButton.getAttribute('data-yion-quantity-key') || ''; var by = parseInt(quantityButton.getAttribute('data-yion-quantity-bump'), 10) || 0; document.querySelectorAll('[data-yion-quantity-for]').forEach(function (input) { if (input.getAttribute('data-yion-quantity-for') !== key) return; input.value = String(Math.max(1, (parseInt(input.value, 10) || 1) + by)); }); return; } var buyNow = t.closest ? t.closest('[data-yion-buy-now]') : null; if (buyNow) { e.preventDefault(); var bought = itemFrom(buyNow); add('cart', bought); var destination = buyNow.getAttribute('data-yion-destination') || ''; if (destination && destination !== '#') { window.location.assign(destination); return; } openPanel('cart', buyNow); return; } var open = t.closest ? t.closest('[data-yion-open]') : null; if (open) { e.preventDefault(); openPanel(open.getAttribute('data-yion-open'), open); return; } var checkoutButton = t.closest ? t.closest('[data-yion-checkout]') : null; if (checkoutButton) { e.preventDefault(); checkout(); return; } if (t.closest && (t.closest('[data-yion-close]') || t.closest('[data-yion-scrim]'))) { closePanels(); return; } var addBtn = t.closest ? t.closest('[data-yion-add]') : null; if (addBtn) { e.preventDefault(); var store = addBtn.getAttribute('data-yion-add'); var item = itemFrom(addBtn); if (store === 'cart' && has('cart', item.id)) { openPanel('cart', addBtn); return; } if (store === 'wish' && has('wish', item.id)) { drop('wish', item.id); return; } add(store, item); if (store === 'cart') { announceAdded(item, addBtn); return; } openPanel(store, addBtn); return; } var row = t.closest ? t.closest('.yion-drow') : null; if (row) { var box = row.parentNode; var store2 = box.getAttribute('data-yion-list'); if (t.closest('[data-yion-remove]')) { drop(store2, row.getAttribute('data-id')); return; } var b = t.closest('[data-yion-bump]'); if (b) { bump(store2, row.getAttribute('data-id'), parseInt(b.getAttribute('data-yion-bump'), 10)); return; } } var pop = t.closest ? t.closest('[data-yion-pop]') : null; document.querySelectorAll('[data-yion-popmenu]').forEach(function (m) { var mine = pop && m.getAttribute('data-yion-popmenu') === pop.getAttribute('data-yion-pop'); if (mine) { m.hidden = !m.hidden ? true : false; } else if (!m.contains(t)) { m.hidden = true; } }); if (pop) e.preventDefault(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closePanels(); document.querySelectorAll('[data-yion-popmenu]').forEach(function (m) { m.hidden = true; }); } }); /* Mark anything already saved, so the heart is filled on a return visit. */ function markSaved() { // eslint-disable-line no-inner-declarations document.querySelectorAll('[data-yion-add="wish"]').forEach(function (b) { var id = b.getAttribute('data-id') || b.getAttribute('data-title'); var on = has('wish', id); if (on) b.setAttribute('data-on', ''); else b.removeAttribute('data-on'); b.setAttribute('aria-pressed', on ? 'true' : 'false'); }); } function markCartButtons() { // eslint-disable-line no-inner-declarations document.querySelectorAll('[data-yion-add="cart"]').forEach(function (b) { var id = b.getAttribute('data-id') || b.getAttribute('data-title'); var on = has('cart', id); var label = b.getAttribute(on ? 'data-yion-view-label' : 'data-yion-add-label') || (on ? 'View basket' : 'Add to basket'); if (on) b.setAttribute('data-on', ''); else b.removeAttribute('data-on'); if (b.textContent.trim() !== label) b.textContent = label; b.setAttribute('aria-label', label); }); } paint('cart'); paint('wish'); markCartButtons(); markSaved(); var observer = new MutationObserver(function (mutations) { if (typeof document === 'undefined') return; /* Ignore the rows, totals, badges and labels this runtime just painted. Observing those derived surfaces makes two mounted views repaint one another forever; only a real canvas/document morph needs restoration. */ var derived = '[data-yion-panel],[data-yion-badge],[data-yion-total],[data-yion-add],[data-yion-shop-status]'; var structural = mutations.some(function (mutation) { var target = mutation.target && mutation.target.nodeType === 1 ? mutation.target : mutation.target.parentElement; return !target || !target.closest || !target.closest(derived); }); if (!structural) return; /* * Studio morphs a fresh Yion root into this document without reloading the * visitor runtime. Repainting only the button state left a persisted basket * saying "View basket" beside a zero badge and an empty drawer. Disconnect * while restoring every derived surface so our own row/text mutations do * not recursively trigger another paint. */ observer.disconnect(); showHostedCheckout(); paint('cart'); paint('wish'); markCartButtons(); markSaved(); observer.observe(document.body, { childList: true, subtree: true }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); (function () { var reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced || typeof IntersectionObserver === 'undefined') { document.documentElement.classList.add('yion-no-motion'); return; } document.documentElement.classList.add('yion-motion'); /* Mirrors yionStaggerDelay in core/fx/motion.ts. Kept identical by a spec. */ function staggerDelay(step, max, order, index, count) { var last = Math.max(0, count - 1); var position = order === 'reverse' ? last - index : order === 'centre' ? Math.abs(index - last / 2) : order === 'edges' ? last / 2 - Math.abs(index - last / 2) : index; return Math.max(0, Math.min(Math.round(position * step), max)); } function applyStagger(group) { // The authored step has its own attribute; `data-yion-stagger` is the bare // marker the blocks stamp on an item grid, and both sit on the same tag. var step = parseFloat(group.getAttribute('data-yion-stagger-step')); if (!isFinite(step)) step = parseFloat(group.getAttribute('data-yion-stagger')); if (!isFinite(step) || step < 0) step = 70; var max = parseFloat(group.getAttribute('data-yion-stagger-max')); // The default cap is a COUNT of children, not a duration: 560 belonged to // the old fixed 70ms step and truncated any authored one. if (!isFinite(max) || max < 0) max = step * 8; var order = group.getAttribute('data-yion-stagger-order') || 'forward'; var kids = group.children; for (var i = 0; i < kids.length; i++) kids[i].style.setProperty('--yion-enter-delay', staggerDelay(step, max, order, i, kids.length) + 'ms'); } function reveal(el) { // The element may BE the staggered group, or hold one (a section revealing // the card grid inside it). Both, so a group works wherever it is marked. var MARKED = '[data-yion-stagger],[data-yion-stagger-step]'; if (el.matches && el.matches(MARKED)) applyStagger(el); var groups = el.querySelectorAll ? el.querySelectorAll(MARKED) : []; Array.prototype.forEach.call(groups, applyStagger); el.classList.add('yion-in'); } /* * One observer per THRESHOLD, made on demand. A single shared threshold could * not serve an element that asks to arrive only when it is nearly all on * screen — and rebuilding one observer per element would cost a callback per * element on every scroll. */ var observers = {}; function observerFor(threshold) { var key = String(threshold); if (observers[key]) return observers[key]; observers[key] = new IntersectionObserver(function (entries) { entries.forEach(function (e) { var el = e.target; var repeat = el.hasAttribute('data-yion-reveal-repeat'); if (e.isIntersecting) { reveal(el); if (!repeat) observers[key].unobserve(el); } else if (repeat) { el.classList.remove('yion-in'); } }); }, { rootMargin: '0px 0px -12% 0px', threshold: threshold }); return observers[key]; } var scrolled = []; function observe() { document.querySelectorAll('.yion-reveal:not(.yion-in),[data-yion-anim]:not(.yion-in),[data-yion-reveal-repeat]').forEach(function (el) { var asked = parseFloat(el.getAttribute('data-yion-reveal-at')); observerFor(isFinite(asked) ? Math.max(0, Math.min(1, asked)) : 0.08).observe(el); }); scrolled = [].slice.call(document.querySelectorAll('[data-yion-parallax],[data-yion-scroll]')); if (scrolled.length) paint(); } // The Studio canvas patches a long-lived document. Expose the observer so // every accepted patch can register its newly inserted elements before the // next paint instead of leaving them at opacity:0 until another mutation. window.__yionObserve = observe; /* * Scroll-linked motion. Progress is 0 where the element's middle is on the * middle of the screen and about ±1 at the edges, so every effect reads the * same number and a design can combine them. */ function paint() { var vh = innerHeight; scrolled.forEach(function (el) { var r = el.getBoundingClientRect(); if (r.bottom < 0 || r.top > vh) return; var p = (r.top + r.height / 2 - vh / 2) / vh; var effect = el.getAttribute('data-yion-scroll') || 'parallax'; var amount = parseFloat(el.getAttribute('data-yion-scroll-amount')); if (!isFinite(amount)) amount = parseFloat(el.getAttribute('data-yion-parallax')); if (!isFinite(amount)) amount = 12; el.style.setProperty('--yion-scroll-progress', p.toFixed(4)); if (effect === 'parallax') { var axis = el.getAttribute('data-yion-scroll-axis') === 'x' ? '--yion-scroll-x' : '--yion-scroll-y'; el.style.setProperty(axis, (-p * amount).toFixed(2) + '%'); } }); } var ticking = false; addEventListener('scroll', function () { if (ticking || !scrolled.length) return; ticking = true; requestAnimationFrame(function () { paint(); ticking = false; }); }, { passive: true }); observe(); // Re-observe after edits re-render the document. if (typeof MutationObserver !== 'undefined') new MutationObserver(observe).observe(document.body, { childList: true, subtree: true }); })(); (function () { function setup(root) { if (root.__yion) return; root.__yion = 1; var track = root.querySelector('.yion-track'); var dots = root.querySelector('.yion-dots'); var prev = root.querySelector('[data-yion-slide="prev"]'); var next = root.querySelector('[data-yion-slide="next"]'); var toggle = root.querySelector('[data-yion-slider-toggle]'); var slides = [].slice.call(root.querySelectorAll('.yion-slide')); if (!track || !slides.length) return; var loop = root.getAttribute('data-loop') === '1'; var delay = parseInt(root.getAttribute('data-autoplay') || '0', 10); var fade = root.getAttribute('data-transition') === 'fade-staged'; var current = 0; function step() { var a = slides[0].getBoundingClientRect(); var b = slides[1] ? slides[1].getBoundingClientRect() : null; return b ? (b.left - a.left) : a.width; } function index() { return fade ? current : Math.round(track.scrollLeft / step()); } function maxIndex() { return fade ? slides.length - 1 : Math.max(0, Math.round((track.scrollWidth - track.clientWidth) / step())); } function go(i) { var max = maxIndex(); if (i < 0) i = loop ? max : 0; if (i > max) i = loop ? 0 : max; if (fade) { current = i; slides.forEach(function (slide, slideIndex) { slide.classList.toggle('yion-slide-active', slideIndex === current); slide.setAttribute('aria-hidden', slideIndex === current ? 'false' : 'true'); }); sync(); } else { track.scrollTo({ left: i * step(), behavior: 'smooth' }); } } if (prev) prev.addEventListener('click', function () { go(index() - 1); }); if (next) next.addEventListener('click', function () { go(index() + 1); }); // Dots reflect *pages*, not raw slide count, so a 3-per-view rail shows 2 dots not 6. function pages() { return maxIndex() + 1; } function buildDots() { if (!dots) return; dots.innerHTML = ''; var n = pages(); if (!(n >= 2)) { dots.removeAttribute('role'); dots.removeAttribute('aria-label'); return; } dots.setAttribute('role', 'group'); dots.setAttribute('aria-label', 'Choose a slide'); for (var i = 0; i < n; i++) { (function (i) { var b = document.createElement('button'); b.type = 'button'; b.setAttribute('aria-label', 'Go to slide ' + (i + 1)); b.addEventListener('click', function () { go(i); }); dots.appendChild(b); })(i); } sync(); } /* One dot is a Tab stop — the current one — and the arrow keys move between them, the way a row of tabs works. Ten dots are not ten Tab presses. */ function sync() { var i = index(); if (dots) { var reachable = false; [].forEach.call(dots.children, function (d, k) { d.setAttribute('aria-current', k === i ? 'true' : 'false'); d.tabIndex = k === i ? 0 : -1; if (k === i) reachable = true; }); if (!reachable && dots.children[0]) dots.children[0].tabIndex = 0; } if (!loop) { if (prev) prev.disabled = i <= 0; if (next) next.disabled = i >= maxIndex(); } } if (dots) dots.addEventListener('keydown', function (e) { var list = [].slice.call(dots.children); var from = list.indexOf(e.target); if (from < 0) return; var to = e.key === 'ArrowRight' ? from + 1 : e.key === 'ArrowLeft' ? from - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? list.length - 1 : null; if (to === null) return; e.preventDefault(); to = (to + list.length) % list.length; go(to); list[from].tabIndex = -1; list[to].tabIndex = 0; list[to].focus(); }); if (!fade) track.addEventListener('scroll', function () { clearTimeout(root.__st); root.__st = setTimeout(sync, 90); }, { passive: true }); /* drag to scroll — desktop parity with native touch */ var down = false, sx = 0, sl = 0, moved = false; track.addEventListener('mousedown', function (e) { if (fade) return; down = true; moved = false; sx = e.pageX; sl = track.scrollLeft; track.classList.add('yion-dragging'); }); addEventListener('mousemove', function (e) { if (!down) return; var d = e.pageX - sx; if (Math.abs(d) > 4) moved = true; track.scrollLeft = sl - d; }); addEventListener('mouseup', function () { if (!down) return; down = false; track.classList.remove('yion-dragging'); if (moved) go(index()); }); // Suppress the click that follows a drag, so dragging a card never navigates. track.addEventListener('click', function (e) { if (moved) { e.preventDefault(); e.stopPropagation(); } }, true); /* * Autoplay. * * A visitor who has asked their device for less motion never gets it * started for them: the slider begins PAUSED, and the control offers to * play. The control stops it for good; hover, focus inside the slider and * being off-screen only hold it. Focus on the control itself does not hold * it, or pressing "play" from the keyboard would visibly do nothing. */ if (delay > 0) { var timer = null, userPaused = false, held = false; var visible = typeof IntersectionObserver === 'undefined'; var motion = null; try { motion = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null; } catch (_e) { motion = null; } if (motion && motion.matches) userPaused = true; var stop = function () { if (timer) { clearInterval(timer); timer = null; } }; var start = function () { stop(); if (userPaused || held || !visible) return; timer = setInterval(function () { go(index() + 1); }, delay); }; var paint = function () { track.setAttribute('aria-live', userPaused ? 'polite' : 'off'); if (!toggle) return; toggle.hidden = false; toggle.setAttribute('data-state', userPaused ? 'paused' : 'playing'); toggle.setAttribute('aria-label', userPaused ? 'Play slideshow' : 'Pause slideshow'); }; if (toggle) toggle.addEventListener('click', function (e) { e.preventDefault(); userPaused = !userPaused; paint(); start(); }); if (motion) { var onMotion = function (event) { if (event.matches) { userPaused = true; stop(); paint(); } }; if (motion.addEventListener) motion.addEventListener('change', onMotion); else if (motion.addListener) motion.addListener(onMotion); } root.addEventListener('mouseenter', function () { held = true; stop(); }); root.addEventListener('mouseleave', function () { held = false; start(); }); root.addEventListener('focusin', function (e) { held = e.target !== toggle; if (held) stop(); else start(); }); root.addEventListener('focusout', function (e) { if (!root.contains(e.relatedTarget)) { held = false; start(); } }); if (!visible) new IntersectionObserver(function (es) { es.forEach(function (e) { visible = e.isIntersecting; visible ? start() : stop(); }); }, { threshold: 0.25 }).observe(root); paint(); start(); } addEventListener('resize', function () { clearTimeout(root.__rt); root.__rt = setTimeout(buildDots, 180); }); buildDots(); if (fade) go(0); } /* A page being torn down (a closed window, a detached frame) can still deliver one queued mutation; its document is gone by then, and a scan must not throw into the console of the page that replaced it. */ function scan() { var d = window.document; if (d) d.querySelectorAll('[data-yion-slider]').forEach(setup); } scan(); new MutationObserver(scan).observe(document.body, { childList: true, subtree: true }); })(); (function(){ var ROOT='[data-yion-filter]'; function setHidden(node,hidden){ node.hidden=hidden; node.setAttribute('aria-hidden',hidden?'true':'false'); var saved=node.getAttribute('data-yion-saved-display'); if(hidden){ if(saved===null)node.setAttribute('data-yion-saved-display',node.style.getPropertyValue('display')+'|'+node.style.getPropertyPriority('display')); node.style.setProperty('display','none','important'); }else if(saved!==null){ node.removeAttribute('data-yion-saved-display'); var parts=saved.split('|'); if(parts[0])node.style.setProperty('display',parts[0],parts[1]||''); else node.style.removeProperty('display'); } } function owned(root,selector){ return Array.prototype.filter.call(root.querySelectorAll(selector),function(node){ return node.closest(ROOT)===root; }); } function select(root,button,moveFocus){ if(!root||!button)return; var value=button.getAttribute('data-yion-tab')||'*'; var buttons=owned(root,'[data-yion-tab]'); var tiles=owned(root,'[data-yion-tile]'); buttons.forEach(function(candidate){ var active=candidate===button; candidate.setAttribute('data-on',active?'1':'0'); candidate.setAttribute('aria-pressed',active?'true':'false'); }); tiles.forEach(function(tile){ var visible=value==='*'||tile.getAttribute('data-yion-tile')===value; setHidden(tile,!visible); }); root.setAttribute('data-yion-filter-value',value); if(moveFocus&&button.focus)button.focus(); try{root.dispatchEvent(new CustomEvent('yion:filter',{bubbles:true,detail:{value:value}}));}catch(_e){} } function setup(root){ if(!root||root.getAttribute('data-yion-filter-ready')==='1')return; root.setAttribute('data-yion-filter-ready','1'); var buttons=owned(root,'[data-yion-tab]'); if(!buttons.length)return; var active=buttons.find(function(button){return button.getAttribute('data-on')==='1';})||buttons[0]; select(root,active,false); } function scan(scope){ if(scope&&scope.matches&&scope.matches(ROOT))setup(scope); if(scope&&scope.querySelectorAll)scope.querySelectorAll(ROOT).forEach(setup); } document.addEventListener('click',function(event){ var button=event.target&&event.target.closest?event.target.closest('[data-yion-tab]'):null; if(!button)return; var root=button.closest(ROOT); if(!root)return; event.preventDefault(); select(root,button,false); }); document.addEventListener('keydown',function(event){ var button=event.target&&event.target.closest?event.target.closest('[data-yion-tab]'):null; if(!button||!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'].includes(event.key))return; var root=button.closest(ROOT); if(!root)return; var buttons=owned(root,'[data-yion-tab]'); var at=buttons.indexOf(button),next=at; if(event.key==='Home')next=0; else if(event.key==='End')next=buttons.length-1; else next=(at+(event.key==='ArrowLeft'||event.key==='ArrowUp'?-1:1)+buttons.length)%buttons.length; event.preventDefault(); select(root,buttons[next],true); }); function boot(){ scan(document); if(typeof MutationObserver!=='undefined')new MutationObserver(function(records){ records.forEach(function(record){record.addedNodes.forEach(function(node){if(node.nodeType===1)scan(node);});}); }).observe(document.documentElement,{childList:true,subtree:true}); } if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',boot,{once:true});else boot(); })(); (function(){ var ROOT='[data-yion-tabs]'; function setHidden(node,hidden){ node.hidden=hidden; node.setAttribute('aria-hidden',hidden?'true':'false'); var saved=node.getAttribute('data-yion-saved-display'); if(hidden){ if(saved===null)node.setAttribute('data-yion-saved-display',node.style.getPropertyValue('display')+'|'+node.style.getPropertyPriority('display')); node.style.setProperty('display','none','important'); }else if(saved!==null){ node.removeAttribute('data-yion-saved-display'); var parts=saved.split('|'); if(parts[0])node.style.setProperty('display',parts[0],parts[1]||''); else node.style.removeProperty('display'); } } function owned(root,selector){ return Array.prototype.filter.call(root.querySelectorAll(selector),function(node){ return node.closest(ROOT)===root; }); } function activate(root,tab,moveFocus){ if(!root||!tab)return; var value=tab.getAttribute('data-yion-tab-index'); var tabs=owned(root,'[role="tab"][data-yion-tab-index]'); var panels=owned(root,'[role="tabpanel"][data-yion-tab-panel]'); tabs.forEach(function(candidate){ var active=candidate===tab; candidate.setAttribute('aria-selected',active?'true':'false'); candidate.setAttribute('tabindex',active?'0':'-1'); }); panels.forEach(function(panel){ var active=panel.getAttribute('data-yion-tab-panel')===value; setHidden(panel,!active); }); root.setAttribute('data-yion-tab-active',value||'0'); if(moveFocus&&tab.focus)tab.focus(); try{root.dispatchEvent(new CustomEvent('yion:tab',{bubbles:true,detail:{index:Number(value||0)}}));}catch(_e){} } function setup(root){ if(!root||root.getAttribute('data-yion-tabs-ready')==='1')return; root.setAttribute('data-yion-tabs-ready','1'); var tabs=owned(root,'[role="tab"][data-yion-tab-index]'); if(!tabs.length)return; var active=tabs.find(function(tab){return tab.getAttribute('aria-selected')==='true';})||tabs[0]; activate(root,active,false); } function scan(scope){ if(scope&&scope.matches&&scope.matches(ROOT))setup(scope); if(scope&&scope.querySelectorAll)scope.querySelectorAll(ROOT).forEach(setup); } document.addEventListener('click',function(event){ var tab=event.target&&event.target.closest?event.target.closest('[role="tab"][data-yion-tab-index]'):null; if(!tab)return; var root=tab.closest(ROOT);if(!root)return; event.preventDefault();activate(root,tab,false); }); document.addEventListener('keydown',function(event){ var tab=event.target&&event.target.closest?event.target.closest('[role="tab"][data-yion-tab-index]'):null; if(!tab||!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'].includes(event.key))return; var root=tab.closest(ROOT);if(!root)return; var tabs=owned(root,'[role="tab"][data-yion-tab-index]'); var at=tabs.indexOf(tab),next=at; if(event.key==='Home')next=0; else if(event.key==='End')next=tabs.length-1; else next=(at+(event.key==='ArrowLeft'||event.key==='ArrowUp'?-1:1)+tabs.length)%tabs.length; event.preventDefault();activate(root,tabs[next],true); }); function boot(){ scan(document); if(typeof MutationObserver!=='undefined')new MutationObserver(function(records){ records.forEach(function(record){record.addedNodes.forEach(function(node){if(node.nodeType===1)scan(node);});}); }).observe(document.documentElement,{childList:true,subtree:true}); } if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',boot,{once:true});else boot(); })(); (function(){ if(window.__yionDialogRuntime)return; window.__yionDialogRuntime=1; var stack=[],previousOverflow=''; var FOCUSABLE='a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),iframe,summary,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'; function focusables(root){ var measured=document.documentElement.getClientRects().length>0; return Array.prototype.filter.call(root.querySelectorAll(FOCUSABLE),function(node){ return !node.closest('[hidden],[inert]')&&(!measured||node.getClientRects().length>0); }); } function focus(node){ if(!node||!node.focus)return; try{node.focus({preventScroll:true});}catch(_e){node.focus();} } function at(el){for(var i=stack.length-1;i>=0;i--){if(stack[i].el===el)return i;}return -1;} function top(){return stack.length?stack[stack.length-1]:null;} function focusInto(el){ var first=focusables(el)[0]; if(!first){if(!el.hasAttribute('tabindex'))el.setAttribute('tabindex','-1');first=el;} focus(first); } /* Open: remember who opened it, put it on top, move focus inside. Re-opening what is already open keeps its ORIGINAL trigger — pressing "View basket" while the basket is open must not make that button the place focus returns. */ function enter(el,trigger,native,content,always){ var index=at(el); var entry=index>-1?stack.splice(index,1)[0]:{el:el,trigger:trigger||document.activeElement,native:!!native,content:!!content}; stack.push(entry); if(always||!el.contains(document.activeElement))focusInto(el); } /* Close: give focus back to the trigger — but only if focus is still ours to move. When a menu closes because the visitor clicked inside the basket above it, focus already lives in the basket and must stay there. A trigger can itself sit inside a modal that has just closed (the Basket row of a menu that closed along with the basket). Focus then follows the chain back to whatever opened THAT modal, rather than landing on a control that is about to be hidden. */ var closed=[]; function reachable(back){ for(var hops=0;back&&hops<8;hops++){ var owner=null; for(var i=closed.length-1;i>=0;i--){ if(at(closed[i].el)<0&&closed[i].el!==back&&closed[i].el.contains(back)){owner=closed[i];break;} } if(!owner)return back; back=owner.trigger; } return back; } function leave(el){ var index=at(el);if(index<0)return; var entry=stack.splice(index,1)[0]; closed.push(entry);if(closed.length>16)closed.shift(); var active=document.activeElement; if(active&&active!==document.body&&!el.contains(active))return; var below=top(),back=reachable(entry.trigger); if(back&&back.focus&&document.documentElement.contains(back)&&(!below||below.el.contains(back)))focus(back); else if(below)focusInto(below.el); } function restore(dialog){ if(at(dialog)<0)return; document.documentElement.style.overflow=previousOverflow; leave(dialog); } function close(dialog){ if(!dialog)return; if(typeof dialog.close==='function'&&dialog.hasAttribute('open'))dialog.close(); else{dialog.removeAttribute('open');dialog.removeAttribute('aria-modal');} restore(dialog); } function prepare(dialog){ if(dialog.getAttribute('data-yion-dialog-ready')==='1')return; dialog.setAttribute('data-yion-dialog-ready','1'); dialog.addEventListener('click',function(event){ if(event.target===dialog||event.target.closest('[data-yion-dialog-close]')){event.preventDefault();close(dialog);} }); dialog.addEventListener('close',function(){restore(dialog);}); dialog.addEventListener('cancel',function(){setTimeout(function(){restore(dialog);},0);}); } function open(trigger){ var id=trigger.getAttribute('data-yion-dialog-open'); var dialog=id&&Array.prototype.find.call(document.querySelectorAll('[data-yion-dialog]'),function(candidate){return candidate.getAttribute('data-yion-dialog')===id;}); if(!dialog)return; prepare(dialog); if(at(dialog)<0){ previousOverflow=document.documentElement.style.overflow; document.documentElement.style.overflow='hidden'; } var native=typeof dialog.showModal==='function'; if(native){if(!dialog.hasAttribute('open'))dialog.showModal();} else{dialog.setAttribute('open','');dialog.setAttribute('aria-modal','true');} enter(dialog,trigger,native,true,true); try{dialog.dispatchEvent(new CustomEvent('yion:dialog',{bubbles:true,detail:{open:true,id:id}}));}catch(_e){} } document.addEventListener('click',function(event){ var trigger=event.target&&event.target.closest?event.target.closest('[data-yion-dialog-open]'):null; if(!trigger)return;event.preventDefault();open(trigger); }); document.addEventListener('yion:modal-open',function(event){ var panel=event.target; if(!panel||panel.nodeType!==1)return; enter(panel,event.detail&&event.detail.trigger,false,false,false); }); document.addEventListener('yion:modal-close',function(event){ var panel=event.target; if(!panel||panel.nodeType!==1)return; leave(panel); }); document.addEventListener('keydown',function(event){ var entry=top(); if(!entry)return; if(event.key==='Escape'&&entry.content&&!entry.native){event.preventDefault();close(entry.el);return;} /* A native modal

Tell us what the venue needs to achieve.

Bring the venue to life.