HIsheR
69 lines
3.3 KiB
TypeScript
69 lines
3.3 KiB
TypeScript
import { effect, h, signal } from '@ui-arch/frame';
|
||
import type { CarouselProps } from './types.js';
|
||
|
||
/*** 轮播：items 横排 + translateX 位移；指示点 / 左右箭头 / ←→ 键切换，autoplay 毫秒自动前进且悬停暂停 ***/
|
||
export function carousel(props: CarouselProps): HTMLElement {
|
||
// —— 状态集中声明 ——
|
||
const total = props.items.length;
|
||
const index = props.index ?? signal(0); // 未传外部信号时用内部信号，行为一致
|
||
const wrap = (i: number) => (total ? ((i % total) + total) % total : 0); // 环形取模，负数也回绕
|
||
const dots: HTMLButtonElement[] = []; // 指示点，顺序即下标
|
||
const track = h('div', { class: 'ua-carousel-track' }) as HTMLElement; // 幻灯片轨道，靠 transform 位移
|
||
const dotsBar = h('div', { class: 'ua-carousel-dots' }) as HTMLElement;
|
||
|
||
/*** 跳到指定下标（自动环形），并回传 onChange ***/
|
||
const go = (i: number) => {
|
||
if (!total) return; // 卫语句：无内容不动作
|
||
index(wrap(i));
|
||
props.onChange?.(index());
|
||
};
|
||
|
||
props.items.forEach((item, i) => {
|
||
track.append(h('div', { class: 'ua-carousel-slide', role: 'group', 'aria-roledescription': '幻灯片', 'aria-label': `第 ${i + 1} 张，共 ${total} 张` }, item));
|
||
const dot = h('button', { type: 'button', class: 'ua-carousel-dot', 'aria-label': `跳到第 ${i + 1} 张`, onClick: () => go(i) }) as HTMLButtonElement;
|
||
dots.push(dot);
|
||
dotsBar.append(dot);
|
||
});
|
||
|
||
/*** 生成左右箭头 ***/
|
||
const arrow = (dir: 1 | -1, label: string) =>
|
||
h('button', { type: 'button', class: `ua-carousel-arrow ua-carousel-${dir === 1 ? 'next' : 'prev'}`, 'aria-label': label, onClick: () => go(index() + dir) }, dir === 1 ? '›' : '‹');
|
||
|
||
const root = h(
|
||
'div',
|
||
{ class: 'ua-carousel', tabindex: '0', role: 'region', 'aria-roledescription': '轮播', 'aria-label': props.label ?? '轮播' },
|
||
track,
|
||
arrow(-1, '上一张'),
|
||
arrow(1, '下一张'),
|
||
dotsBar,
|
||
) as HTMLElement;
|
||
if (props.height) root.style.height = `${props.height}px`; // 固定高度由调用方指定，缺省随内容
|
||
|
||
effect(() => {
|
||
const i = wrap(index());
|
||
track.style.transform = `translateX(${-i * 100}%)`; // 整屏位移，配合 CSS transition 出滑动效果
|
||
dots.forEach((dot, k) => {
|
||
dot.classList.toggle('ua-carousel-dot-active', k === i);
|
||
dot.setAttribute('aria-current', String(k === i)); // 读屏标注当前张
|
||
});
|
||
});
|
||
|
||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; // 卫语句：只接管方向键
|
||
e.preventDefault();
|
||
e.stopPropagation(); // 不冒泡：避免外层 tabs/menu 同时响应
|
||
go(index() + (e.key === 'ArrowRight' ? 1 : -1));
|
||
});
|
||
|
||
if (props.autoplay && total > 1) {
|
||
let hover = false; // 悬停中
|
||
let focused = false; // 焦点在轮播内（键盘用户没有 hover，必须单独计）
|
||
root.addEventListener('pointerenter', () => { hover = true; });
|
||
root.addEventListener('pointerleave', () => { hover = false; });
|
||
root.addEventListener('focusin', () => { focused = true; });
|
||
root.addEventListener('focusout', () => { focused = false; });
|
||
window.setInterval(() => { if (!hover && !focused) go(index() + 1); }, props.autoplay); // 两者都不在才前进
|
||
}
|
||
return root;
|
||
}
|