click(e, 'uvod')} aria-label="Říčany srdcem">
);
}
function PriorityCard({ p, onOpen }) {
return (
);
}
function PriorityDrawer({ priority, onClose }) {
const drawerRef = useRef(null);
const backdropRef = useRef(null);
useEffect(() => {
if (!priority) return;
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', onKey);
document.body.style.overflow = '';
};
}, [priority, onClose]);
// Zavření swipem doprava. Panel drží prst, po puštění se buď dozavře
// (CSS tranzice ho dotáhne za okraj), nebo pruží zpátky.
useDragToDismiss(drawerRef, {
active: !!priority,
axis: 'x',
canDrag: (dir) => dir > 0, // doleva panel netáhneme, tam už žádný není
paint: (dx) => {
const el = drawerRef.current, bd = backdropRef.current;
el.style.transition = 'none';
el.style.transform = `translateX(${Math.max(0, dx)}px)`;
if (bd) {
// Podklad má vlastní .3s tranzici — po dobu gesta musí pryč, jinak by
// ztmavení kulhalo za prstem.
bd.style.transition = 'none';
const t = Math.min(1, Math.max(0, dx) / (el.offsetWidth || 1));
bd.style.background = `rgba(20, 34, 53, ${(0.45 * (1 - t)).toFixed(3)})`;
}
},
release: (dx, speed) => {
const el = drawerRef.current;
const width = el.offsetWidth || 1;
releaseToCss(el, backdropRef.current);
// Zavře se po třetině šířky, nebo po rychlém švihnutí i z kratší dráhy.
if (dx > width * 0.33 || speed > 0.5) onClose();
}
});
// Panel je v DOM i zavřený a sdílí se mezi otevřeními — nesmí si nést
// posun z minulého gesta.
useEffect(() => {
if (priority) return;
const el = drawerRef.current, bd = backdropRef.current;
if (el) { el.style.transition = ''; el.style.transform = ''; }
if (bd) { bd.style.transition = ''; bd.style.background = ''; }
}, [priority]);
return (
);
}
function Priorities({ onOpen }) {
return (
);
}
function MemberModal({ member, onClose, onNavigate, hasPrev, hasNext }) {
const modalRef = useRef(null);
const backdropRef = useRef(null);
const exitTimer = useRef(null);
const enterFrom = useRef(0); // odkud má přijet nově vybraný medailonek
// Aktuální obsluha kláves; přes ref, aby se listener nepřevěšoval s každým
// renderem (a `slideTo` níž se stihlo definovat).
const keys = useRef(null);
useEffect(() => {
if (!member) return;
const onKey = (e) => {
const n = keys.current;
if (e.key === 'Escape') n.onClose();
// Totéž co swipe do stran, jen z klávesnice (na desktopu myš swipe nemá).
if (e.key === 'ArrowRight' && n.hasNext) n.slideTo(1);
if (e.key === 'ArrowLeft' && n.hasPrev) n.slideTo(-1);
};
document.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', onKey);
document.body.style.overflow = '';
clearTimeout(exitTimer.current);
};
}, [member]);
// Zavření tažením — na obou koncích scrollu. Medailonek se roluje, takže
// gesto nesmí soupeřit se scrollem: nahoře zabírá tah dolů, dole tah nahoru
// (krátký text scroll nemá, tam fungují oba směry). Využívá se tím přesně
// ten „přetah", který by jinak jen gumově odskočil.
useDragToDismiss(modalRef, {
active: !!member,
axis: 'y',
canDrag: (dir) => {
const el = modalRef.current;
if (!el) return false;
const atTop = el.scrollTop <= 0;
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
return dir > 0 ? atTop : atBottom;
},
paint: (dy) => {
const el = modalRef.current, bd = backdropRef.current;
el.style.transition = 'none';
el.style.transform = `translateY(${dy}px)`;
if (bd) {
bd.style.transition = 'none';
const t = Math.min(1, Math.abs(dy) / 260);
bd.style.background = `rgba(20, 34, 53, ${(0.55 * (1 - t)).toFixed(3)})`;
}
},
release: (dy, speed) => {
const el = modalRef.current, bd = backdropRef.current;
// Modal nemá odchozí CSS stav (po zavření mizí z DOM), takže si cestu
// za okraj musí odanimovat sám a zavřít se až potom.
if (Math.abs(dy) > 110 || speed > 0.5) {
const out = dy > 0 ? window.innerHeight : -window.innerHeight;
el.style.transition = 'transform .2s ease-out';
el.style.transform = `translateY(${out}px)`;
if (bd) {
bd.style.transition = 'background .2s ease-out';
bd.style.background = 'rgba(20, 34, 53, 0)';
}
exitTimer.current = setTimeout(onClose, 200);
return;
}
releaseToCss(el, bd);
}
});
// Listování mezi kandidáty tažením do stran. Vodorovně se v modalu nic
// neroluje, takže gesto nemá s čím soupeřit a nepotřebuje podmínku na konec
// scrollu jako svislé zavírání. Tažení doleva odsouvá kartu pryč a přivádí
// dalšího v pořadí, doprava předchozího.
const stepFor = (dx) => (dx < 0 ? 1 : -1);
const canGo = (dx) => (stepFor(dx) > 0 ? hasNext : hasPrev);
// Přepnutí kandidáta: karta odjede ven, prohodí se obsah a přijede z druhé
// strany. Sdílí to swipe, šipky v liště i klávesnice, ať to vypadá stejně.
const slideTo = (step) => {
const el = modalRef.current;
if (!el) return;
const out = (el.offsetWidth + 40) * (step > 0 ? -1 : 1); // další odjíždí doleva
el.style.transition = 'transform .18s ease-in';
el.style.transform = `translateX(${out}px)`;
enterFrom.current = -out;
clearTimeout(exitTimer.current);
exitTimer.current = setTimeout(() => onNavigate(step), 180);
};
keys.current = { slideTo, onClose, hasPrev, hasNext };
useDragToDismiss(modalRef, {
active: !!member,
axis: 'x',
canDrag: () => true,
paint: (dx) => {
const el = modalRef.current;
// Na konci seznamu klade tažení odpor, ať je poznat, že dál už se nejde.
const shift = canGo(dx) ? dx : dx * 0.25;
el.style.transition = 'none';
el.style.transform = `translateX(${shift}px)`;
},
release: (dx, speed) => {
if (canGo(dx) && (Math.abs(dx) > 80 || speed > 0.5)) {
slideTo(stepFor(dx));
return;
}
releaseToCss(modalRef.current, null);
}
});
// Přepnutí kandidáta nechává stejný DOM prvek, takže se o dvě věci musíme
// postarat sami: nový medailonek začíná odshora a přijede z boku.
useLayoutEffect(() => {
const el = modalRef.current;
if (!el || !member) return;
el.scrollTop = 0;
const from = enterFrom.current;
enterFrom.current = 0;
if (!from) return;
el.style.transition = 'none';
el.style.transform = `translateX(${from}px)`;
void el.offsetWidth;
el.style.transition = 'transform .22s ease-out';
el.style.transform = 'translateX(0)';
const t = setTimeout(() => { el.style.transition = ''; el.style.transform = ''; }, 240);
return () => clearTimeout(t);
}, [member]);
if (!member) return null;
const num = member.n != null ? String(member.n).padStart(2, '0') : '01';
const bio = (member.bio || '').trim();
// Medailonky chodí různě dlouhé — podle počtu slov se modal rozšíří (CSS).
const words = bio ? bio.split(/\s+/).length : 0;
const size = words > 130 ? ' is-xlong' : words > 70 ? ' is-long' : '';
// Odstavce lze v data.js oddělit prázdným řádkem.
const paragraphs = bio ? bio.split(/\n\s*\n/) : [];
return (
);
}
function TeamCardLeader({ leader, onOpen }) {
const photo = leader.photoTeam || leader.photo;
return (
);
}
function TeamCard({ m, onOpen }) {
return (
);
}
function TeamRow({ m, onOpen }) {
// Klikací (s modalem) je řádek, jakmile má kandidát fotku nebo medailonek —
// v praxi top10, tj. č. 8–10. Ostatní řádky zůstávají statické.
const hasDetail = hasMemberDetail(m);
const content = (
<>
{String(m.n).padStart(2, '0')}
{m.name}
{m.role}
{hasDetail && (
)}
);
if (!hasDetail) {
return
);
}
function Contact() {
return (
);
}
function Footer() {
return (
);
}
// Pořadí, ve kterém jde v modalu listovat: lídryně, karty 2–7 a ti z dalších
// kandidátů, kdo mají medailonek (č. 8–10). U lídryně se stejně jako v kartě
// použije `photoTeam`, ať v modalu nevyskočí jiná fotka než po kliku.
const MODAL_MEMBERS = [
{ ...D.leader, photo: D.leader.photoTeam || D.leader.photo },
...D.top6,
...D.rest.filter(hasMemberDetail)
];
function App() {
const [member, setMember] = useState(null);
const [priority, setPriority] = useState(null);
const openPriority = (p) => { track('Priorita: ' + p.title, { n: p.n, title: p.title }); setPriority(p); };
const openMember = (m) => { track('Kandidát otevřen', { name: m.name }); setMember(m); };
const index = member ? MODAL_MEMBERS.findIndex(m => m.id === member.id) : -1;
const goToMember = (step) => { // +1 další v pořadí, -1 předchozí
const next = MODAL_MEMBERS[index + step];
if (next) openMember(next);
};
return (
<>
setMember(null)}
onNavigate={goToMember}
hasPrev={index > 0}
hasNext={index >= 0 && index < MODAL_MEMBERS.length - 1}
/>
setPriority(null)} />
);
}
const root = document.getElementById('app');
ReactDOM.createRoot(root).render(
{/* Ikony sociálních sítí (FB/IG) jsou dočasně pryč — reálné URL zatím
nemáme a odkaz na „#" nikam nevede. Až profily vzniknou, vrátí se
sem
);
}
function Hero() {
return (
s odkazy; CSS `.nav-social`
v index.html i Plausible eventy `Social: …` na to čekají
připravené (viz README, sekce Plány do budoucna). */}
{/* `.hero-text` je na desktopu normální sloupec, na mobilu se z něj přes
`display: contents` stane průhledný obal — hlavička a tělo se pak
řadí jako samostatné buňky gridu a fotka se vejde mezi ně (CSS). */}
Říčany
Komunální volby · 9.–10. října 2026
Říčany
srdcem
{D.leader.intro}
{D.leader.name}
{D.leader.role}
Naše priority
S čím do toho jdeme
Konkrétní věci, na kterých se shodneme a za které ručíme. Klikněte na kteroukoliv prioritu pro detail.
{D.priorities.map(p => (
onOpen(p)} />
))}
e.stopPropagation()}>
)}
{member.photo ? (
) : (
{(hasPrev || hasNext) && (
// Lišta drží u spodní hrany i u dlouhého medailonku — jinak by se
// o listování dozvěděl jen ten, kdo dočte až na konec.
{num}
{member.name}
{member.role || ''}
{paragraphs.length
? paragraphs.map((p, i) => {p}
) :Medailonek zatím připravujeme, brzy ho tu najdete.
}{content}
;
}
return (
);
}
function Team({ onOpen }) {
return (
Náš tým
Naši kandidáti
Sousedé, lidé z místních škol, spolků a firem. Lidé, které potkáváte v Říčanech každý den.
{D.top6.map(m => (
onOpen(m)} />
))}
Další kandidáti
{D.rest.map(m => (
onOpen(m)} />
))}
Kontakt
Chcete se nás na cokoli zeptat?
Neváhejte nás kontaktovat na track('Kontakt e-mail')}>info@ricanysrdcem.cz.