135 lines
7.7 KiB
Plaintext
135 lines
7.7 KiB
Plaintext
component Marquee {
|
|
outputs {
|
|
// Fired when the reader pauses the scroll, by hover, focus or the button.
|
|
pause(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
resume(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Marquee"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
class: string = ""
|
|
}
|
|
|
|
state paused: boolean = false
|
|
|
|
view {
|
|
<section
|
|
data-ui-component="Marquee"
|
|
aria-label='{title}'
|
|
class='wrn-marquee {class}'
|
|
data-wrn-owner="Marquee" data-wrn-part="root" data-wrn-component="Marquee" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<div class="wrn-marquee__layout" data-wrn-owner="Marquee" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if title}
|
|
<div class="wrn-marquee__title" data-wrn-owner="Marquee" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="icon-[lucide--megaphone] wrn-marquee__icon" aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
<span>{title}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<div
|
|
class="wrn-marquee__window"
|
|
@mouseenter='paused = true; output.pause({})'
|
|
@mouseleave='paused = false; output.resume({})'
|
|
@focusin='paused = true'
|
|
@focusout='paused = false'
|
|
data-wrn-owner="Marquee" data-wrn-part="window" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<div
|
|
class="wrn-marquee__track"
|
|
class:wrn-marquee-paused='paused'
|
|
data-wrn-owner="Marquee" data-wrn-part="track" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#each items as item}
|
|
<a
|
|
href='{item.href || "#"}'
|
|
class="wrn-marquee__item"
|
|
data-wrn-owner="Marquee" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span
|
|
class="wrn-marquee__dot"
|
|
data-color='{item.color || "primary"}'
|
|
aria-hidden="true"
|
|
data-wrn-owner="Marquee" data-wrn-part="dot" data-wrn-axis-size="{size}" data-wrn-axis-color='{item.color || "primary"}' data-wrn-axis-variant="{variant}"></span>
|
|
<span>{item.label || item.title}</span>
|
|
{#if item.meta}
|
|
<span class="wrn-marquee__meta" data-wrn-owner="Marquee" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.meta}</span>
|
|
{/if}
|
|
</a>
|
|
{:empty}
|
|
<p class="wrn-marquee__empty" data-wrn-owner="Marquee" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description || "No announcements available."}</p>
|
|
{/each}
|
|
|
|
{#if items.length > 0}
|
|
{#each items as item}
|
|
<a
|
|
href='{item.href || "#"}'
|
|
aria-hidden="true"
|
|
tabindex="-1"
|
|
class="wrn-marquee__item"
|
|
data-wrn-owner="Marquee" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="wrn-marquee__dot" aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="dot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
<span>{item.label || item.title}</span>
|
|
</a>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label='{paused ? "Resume announcements" : "Pause announcements"}'
|
|
class="wrn-marquee__toggle"
|
|
@click='paused = !paused; paused ? output.pause({}) : output.resume({})'
|
|
data-wrn-owner="Marquee" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="icon-[lucide--pause] wrn-marquee__icon" data-show='!paused' aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
<span class="icon-[lucide--play] wrn-marquee__icon" data-show='paused' aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</section>
|
|
}
|
|
|
|
style {
|
|
.wrn-marquee { overflow: hidden; border-block: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface-raised); }
|
|
.wrn-marquee__layout { display: flex; align-items: stretch; }
|
|
.wrn-marquee__title { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-right: 1px solid var(--wrn-color-border); color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 700; }
|
|
.wrn-marquee__window { position: relative; min-width: 0; flex: 1; overflow: hidden; }
|
|
.wrn-marquee__track {
|
|
display: flex; width: max-content; min-width: 100%; align-items: center;
|
|
animation: wrn-marquee 32s linear infinite;
|
|
}
|
|
.wrn-marquee-paused { animation-play-state: paused; }
|
|
.wrn-marquee__item { display: flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 500; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
|
|
.wrn-marquee__item:hover { color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
|
|
.wrn-marquee__item:focus-visible, .wrn-marquee__toggle:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -2px; }
|
|
.wrn-marquee__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--wrn-color-primary); }
|
|
.wrn-marquee__dot[data-color="danger"] { background: var(--wrn-color-danger); }
|
|
.wrn-marquee__dot[data-color="warning"] { background: var(--wrn-color-warning); }
|
|
.wrn-marquee__dot[data-color="success"] { background: var(--wrn-color-success); }
|
|
.wrn-marquee__meta { color: var(--wrn-color-text-muted); font-size: 0.75rem; }
|
|
.wrn-marquee__empty { padding: 0.75rem 1.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
|
|
.wrn-marquee__toggle { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: 1rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: var(--wrn-color-text-muted); background: transparent; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
|
|
.wrn-marquee__toggle:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
|
|
.wrn-marquee__icon { width: 1rem; height: 1rem; }
|
|
@media (min-width: 40rem) { .wrn-marquee__title { padding-inline: 1.25rem; } }
|
|
|
|
.wrn-marquee-paused {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes wrn-marquee {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wrn-marquee__track {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
}
|