{ "id": "ahv-template-photo-collections-desktop", "file": "AHV Template Photo Collections Desktop.dc.html", "sourceSha256": "bff74ec58b00f7b3f5945ee30426cf6d5a808bb5506e31758ead6401eb3c178b", "variant": "desktop", "template": "\n\n\n\n\n\n\n\n\n\n
\nZum Hauptinhalt springen\n\n
\n\n
\n \n

Kairali — The Ayurvedic Healing Village · Seit 1908

\n
\n

{{ h1 }}

\n
\n

{{ intro }}

\n

{{ tally }}

\n
\n
\n \n
\n\n
\n \n
{{ heroCaption }}
\n
\n\n \n
\n
\n

{{ ch.title }}

\n

{{ ch.tally }}

\n
\n

{{ ch.intro }}

\n
    \n \n
  • \n
    \n \n
    {{ p.caption }}
    \n
    \n
    • \n     \n
  • \n
\n \n
\n
\n {{ ch.videoEl }}\n
{{ ch.videoCaption }}
\n
\n
\n

Video

\n

{{ ch.videoTitle }}

\n

{{ ch.videoDesc }}

\n Auf YouTube ansehen (öffnet einen neuen Tab)\n
\n
\n \n \n

◆{{ ch.linkLabel }}→

\n \n
\n \n\n
\n
\n
    \n
  • ◆NABH-zertifiziertes Krankenhaus
    • \n
  • ◆118+ Jahre Tradition
    • \n
  • ◆Individuell abgestimmte Programme
    • \n
  • ◆Gewinner des World Luxury Award
    • \n
\n

Sie sind unsicher, welches Programm passt?

\n

Beschreiben Sie Ihr Anliegen in eigenen Worten – das Patientenbetreuungsteam oder ein Ayurveda-Arzt weist Ihnen den Weg zum passenden Programm.

\n
\n Kostenlose ärztliche Konsultation WhatsApp-Patientenbetreuung Jetzt anfragen\n
\n
\n
\n
\n\n\n\n
\n
\n

{{ dlgLabel }}

\n

{{ counter }}

\n
\n \n
\n \n
\n {{ expandedEl }}\n
\n

{{ curCaption }}

\n
\n \n \n
\n\n
\n", "logic": "\nclass Component extends DCLogic {\n state = { i: null, playing: {}, zoom: false };\n componentDidMount() {\n document.documentElement.lang = 'de'; this.syncHead();\n this._onPop = () => { if (this.state.i != null) this.close(); };\n window.addEventListener('popstate', this._onPop);\n const d = this.dialog();\n if (d) { this._onDlgClose = () => { if (this.state.i != null) this.closed(); }; d.addEventListener('close', this._onDlgClose); }\n }\n componentDidUpdate() { this.syncHead(); }\n componentWillUnmount() {\n document.body.style.overflow = '';\n if (this._photoObserver) this._photoObserver.disconnect();\n window.removeEventListener('popstate', this._onPop);\n const d = this.dialog(); if (d && this._onDlgClose) d.removeEventListener('close', this._onDlgClose);\n }\n dialog() { return document.getElementById('gallery-dialog'); }\n\n route() {\n const D = window.AHV_PHOTO_COLLECTIONS;\n if (!D) return null;\n const want = this.props.route || '/property-gallery/';\n return D.routes.find(r => r.path === want) || D.routes[0];\n }\n syncHead() {\n const R = this.route(); if (!R || this._head === R.path) return;\n this._head = R.path;\n void (R.head.title); /* title governed by the route manifest */\n const set = (sel, attr, val) => { const el = document.head.querySelector(sel); if (el) el.setAttribute(attr, val); };\n set('meta[name=\"description\"]', 'content', R.head.description);\n set('link[rel=\"canonical\"]', 'href', R.head.canonical);\n set('meta[name=\"robots\"]', 'content', R.head.robots);\n }\n /* The lightbox sequence: hero first, then every chapter's tiles in page order. */\n flat() {\n const R = this.route(); if (!R) return [];\n if (this._flatFor === R) return this._flat;\n const out = [];\n if (R.hero) out.push(Object.assign({}, R.hero, { chapter: R.h1, k: 1, n: 1 }));\n R.chapters.forEach(ch => ch.images.forEach((p, k) => out.push(Object.assign({}, p, { chapter: ch.title, k: k + 1, n: ch.images.length }))));\n this._flatFor = R; this._flat = out;\n return out;\n }\n open(i) {\n this._from = i;\n this.setState({ i, zoom: false });\n const d = this.dialog();\n if (d && !d.open) { try { d.showModal(); } catch (e) { d.setAttribute('open', ''); } }\n document.body.style.overflow = 'hidden';\n setTimeout(() => { const c = document.getElementById('gallery-close'); if (c) c.focus(); }, 30);\n }\n close() {\n const d = this.dialog();\n if (d && d.open) d.close(); else this.closed();\n }\n closed() {\n const from = this._from;\n this.setState({ i: null, zoom: false });\n document.body.style.overflow = '';\n setTimeout(() => { const b = document.querySelector('button[data-gallery-index=\"' + from + '\"]'); if (b) b.focus(); }, 30);\n }\n go(d) {\n if (this.state.i == null) return;\n const n = this.flat().length; if (!n) return;\n this.setState(s => ({ i: (s.i + d + n) % n, zoom: false }));\n }\n goTo(i) { if (this.state.i == null) return; this.setState({ i, zoom: false }); }\n play(id) { this.setState(s => ({ playing: Object.assign({}, s.playing, { [id]: true }) })); }\n\n // AHV viewer pan repair 20260929\n panStart(e) {\n if (!this.state.zoom || e.pointerType !== 'mouse' || e.button !== 0) return;\n e.preventDefault();\n const el = e.currentTarget;\n this._pan = { x: e.clientX, y: e.clientY, left: el.scrollLeft, top: el.scrollTop };\n el.setPointerCapture(e.pointerId);\n }\n panMove(e) {\n if (!this._pan) return;\n e.currentTarget.scrollLeft = this._pan.left + this._pan.x - e.clientX;\n e.currentTarget.scrollTop = this._pan.top + this._pan.y - e.clientY;\n }\n panEnd() { this._pan = null; }\n renderVals() {\n const R = this.route();\n const guard = () => {}; /* preview-only nav guard neutralised for the published site */\n if (!R) return { guard, chapters: [], chapterLinks: [], crumbs: [] };\n const A = 'https://ayurvedichealingvillage.com';\n const MOBILE = false;\n const rowH = this.props.rowHeight ?? 250;\n const eager = MOBILE ? 2 : 3;\n const sizes = MOBILE ? '100vw' : '(min-width:1240px) 400px, 33vw';\n const crumbs = R.crumbs.slice(0, -1).map(c => ({ label: c.label, url: A + c.path }));\n const flat = this.flat();\n const open = this.state.i != null;\n const cur = open ? flat[this.state.i] : null;\n const total = flat.length;\n const videos = R.chapters.filter(ch => ch.video).length;\n\n const loadPhoto = (el) => {\n if (!el || el.getAttribute('src')) return;\n const set = el.getAttribute('data-ahv-photo-srcset');\n if (set) el.setAttribute('srcset', set);\n el.setAttribute('src', el.getAttribute('data-ahv-photo-src'));\n };\n if (!this._photoObserver && typeof IntersectionObserver !== 'undefined') {\n this._photoObserver = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) { loadPhoto(entry.target); this._photoObserver.unobserve(entry.target); }\n });\n }, {rootMargin: '600px 0px'});\n }\n const img = (p, opts) => React.createElement('img', Object.assign({\n loading: 'lazy', decoding: 'async',\n 'data-ahv-photo-src': p.src,\n 'data-ahv-photo-srcset': p.src768 ? (p.src768 + ' 768w, ' + p.src + ' 1600w') : '',\n sizes: p.src768 ? sizes : undefined,\n alt: p.alt || '', width: p.width, height: p.height,\n ref: el => { if (!el) return; if (this._photoObserver) this._photoObserver.observe(el); else loadPhoto(el); },\n style: { width: '100%', height: 'auto', aspectRatio: p.width + '/' + p.height, display: 'block' }\n }, opts));\n\n let idx = 0;\n const chapters = R.chapters.map((ch, ci) => {\n const V = ch.video;\n const playing = !!(V && this.state.playing[V.youtubeId]);\n let videoEl = null;\n if (V) {\n videoEl = playing\n ? React.createElement('iframe', {\n 'data-gallery-iframe': '1',\n src: 'https://www.youtube-nocookie.com/embed/' + V.youtubeId + '?autoplay=1&rel=0&modestbranding=1',\n title: V.title, width: 1280, height: 720, allowFullScreen: true,\n allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',\n referrerPolicy: 'strict-origin-when-cross-origin' })\n : React.createElement('button', {\n type: 'button', 'data-gallery-facade': '1', 'data-cta': 'gallery-video-play',\n 'aria-label': 'Abspielen: ' + V.title, onClick: () => this.play(V.youtubeId) },\n React.createElement('img', { src: V.poster.src, alt: 'Vorschaubild des Films: ' + V.title, width: V.poster.width, height: V.poster.height, loading: 'lazy', decoding: 'async' }),\n React.createElement('span', { 'aria-hidden': 'true' }, '\\u25B6'));\n }\n return {\n id: ch.id, hid: ch.id + '-h', title: ch.title, intro: ch.intro,\n tally: ch.images.length + (ch.images.length === 1 ? ' Foto' : ' photographs'),\n images: ch.images.map((p, k) => {\n idx += 1;\n const i = idx;\n const ar = p.width / p.height;\n return {\n i, name: p.caption, caption: p.caption,\n ordinal: (k + 1) + ' von ' + ch.images.length,\n grow: Math.round(ar * 100), basis: Math.round(ar * rowH),\n imgEl: img(p, { loading: (ci === 0 && k < eager) ? 'eager' : 'lazy' }),\n open: () => this.open(i)\n };\n }),\n hasVideo: !!V,\n videoTitle: V ? V.title : '', videoDesc: V ? V.description : '',\n videoCaption: V ? V.caption : '', videoWatch: V ? ('https://www.youtube.com/watch?v=' + V.youtubeId) : '',\n videoEl,\n hasLink: !!ch.linkTo, linkHref: ch.linkTo ? (A + ch.linkTo) : '', linkLabel: ch.linkLabel || ''\n };\n });\n\n return {\n guard, crumbs, crumbLast: R.crumbs[R.crumbs.length - 1].label,\n h1: R.h1, intro: R.intro.text,\n tally: (total - 1) + ' Fotos · ' + R.chapters.length + ' Kapitel' + (videos ? ' · ' + videos + (videos === 1 ? ' Video' : ' Videos') : ''),\n chapterLinks: R.chapters.map(ch => ({ href: '#' + ch.id, label: ch.title })),\n heroEl: R.hero ? img(R.hero, { loading: 'eager', fetchpriority: 'high', sizes: '100vw' }) : null,\n heroName: R.hero ? R.hero.caption : '', heroCaption: R.hero ? R.hero.caption : '',\n heroOpen: () => this.open(0),\n chapters,\n dlgOpen: open,\n dlgLabel: cur ? cur.chapter : R.h1,\n counter: cur ? (cur.k + ' von ' + cur.n) : '',\n curCaption: cur && cur.caption ? cur.caption : '',\n curCapDisplay: cur && cur.caption ? 'block' : 'none',\n expandedEl: cur ? React.createElement('img', { src: cur.src, alt: cur.alt || '', width: cur.width, height: cur.height, decoding: 'async',\n style: this.state.zoom ? { display: 'block', flexShrink: 0, margin: '0 auto', width: cur.width + 'px', height: 'auto', maxWidth: 'none', background: '#000' } : { display: 'block', flexShrink: 0, margin: 'auto', width: 'auto', height: 'auto', maxWidth: 'min(1280px,100%)', maxHeight: MOBILE ? 'calc(100vh - 230px)' : 'calc(100vh - 220px)', objectFit: 'contain', borderRadius: '4px', background: '#000' } }) : null,\n zoomLabel: this.state.zoom ? 'An Bildschirm anpassen' : 'Originalgröße', zoomPressed: this.state.zoom ? 'true' : 'false', toggleZoom: () => this.setState(s => ({ zoom: !s.zoom })),\n panStart: (e) => this.panStart(e), panMove: (e) => this.panMove(e), panEnd: () => this.panEnd(), close: () => this.close(), prev: () => this.go(-1), next: () => this.go(1),\n dlgClosed: () => { if (this.state.i != null) this.closed(); },\n swipeStart: (e) => { if (this.state.zoom) { this.panStart(e); return; } this._sx = e.clientX; this._sy = e.clientY; },\n swipeEnd: (e) => {\n if (this.state.zoom) { this.panEnd(); this._sx = null; return; }\n if (this._sx == null) return;\n const dx = e.clientX - this._sx, dy = e.clientY - this._sy; this._sx = null;\n if (Math.abs(dx) >= 40 && Math.abs(dx) > Math.abs(dy)) this.go(dx < 0 ? 1 : -1);\n },\n dlgKey: (e) => {\n if (e.key === 'Escape') { e.preventDefault(); this.close(); return; }\n if (this.state.zoom && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Startseite', 'End'].includes(e.key)) return;\n if (e.key === 'ArrowLeft') { e.preventDefault(); this.go(-1); return; }\n if (e.key === 'ArrowRight') { e.preventDefault(); this.go(1); return; }\n if (e.key === 'Home') { e.preventDefault(); this.goTo(0); return; }\n if (e.key === 'End') { e.preventDefault(); this.goTo(total - 1); return; }\n }\n };\n }\n}\n", "props": "{\"route\":{\"editor\":\"enum\",\"default\":\"/property-gallery/\",\"options\":[\"/property-gallery/\",\"/photo-gallery/\",\"/product-gallery/\",\"/villas-gallery/\",\"/treatments-gallery/\",\"/yoga-gallery/\",\"/retreats-gallery/\",\"/sight-seeing-gallery/\"],\"tsType\":\"string\",\"section\":\"Template test\"},\"rowHeight\":{\"editor\":\"range\",\"default\":250,\"min\":170,\"max\":320,\"step\":10,\"unit\":\"px\",\"tsType\":\"number\",\"section\":\"Collection\"}}", "scripts": [ "/ahv/l10n/de/assets/photo-collections-data.js" ], "locale": "de" }