chore: code formatting

alenaksu/poc/more-responsive-carousel-dots
Alessandro 2024-10-04 15:40:21 +00:00 zatwierdzone przez GitHub
rodzic 1eff2f888f
commit 33f3f2f892
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
2 zmienionych plików z 35 dodań i 30 usunięć

Wyświetl plik

@ -507,11 +507,11 @@ export default class SlCarousel extends ShoelaceElement {
id="scroll-container"
part="scroll-container"
class="${classMap({
carousel__slides: true,
'carousel__slides--horizontal': this.orientation === 'horizontal',
'carousel__slides--vertical': this.orientation === 'vertical',
'carousel__slides--dragging': this.dragging
})}"
carousel__slides: true,
'carousel__slides--horizontal': this.orientation === 'horizontal',
'carousel__slides--vertical': this.orientation === 'vertical',
'carousel__slides--dragging': this.dragging
})}"
style="--slides-per-page: ${this.slidesPerPage};"
aria-busy="${scrolling ? 'true' : 'false'}"
aria-atomic="true"
@ -525,15 +525,15 @@ export default class SlCarousel extends ShoelaceElement {
</div>
${this.navigation
? html`
? html`
<div part="navigation" class="carousel__navigation">
<button
part="navigation-button navigation-button--previous"
class="${classMap({
'carousel__navigation-button': true,
'carousel__navigation-button--previous': true,
'carousel__navigation-button--disabled': !prevEnabled
})}"
'carousel__navigation-button': true,
'carousel__navigation-button--previous': true,
'carousel__navigation-button--disabled': !prevEnabled
})}"
aria-label="${this.localize.term('previousSlide')}"
aria-controls="scroll-container"
aria-disabled="${prevEnabled ? 'false' : 'true'}"
@ -547,10 +547,10 @@ export default class SlCarousel extends ShoelaceElement {
<button
part="navigation-button navigation-button--next"
class=${classMap({
'carousel__navigation-button': true,
'carousel__navigation-button--next': true,
'carousel__navigation-button--disabled': !nextEnabled
})}
'carousel__navigation-button': true,
'carousel__navigation-button--next': true,
'carousel__navigation-button--disabled': !nextEnabled
})}
aria-label="${this.localize.term('nextSlide')}"
aria-controls="scroll-container"
aria-disabled="${nextEnabled ? 'false' : 'true'}"
@ -562,21 +562,27 @@ export default class SlCarousel extends ShoelaceElement {
</button>
</div>
`
: ''}
: ''}
${this.pagination
? html`
<div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container" style="${styleMap({
'--pages': pagesCount
})}">
? html`
<div
part="pagination"
role="tablist"
class="carousel__pagination"
aria-controls="scroll-container"
style="${styleMap({
'--pages': pagesCount
})}"
>
${map(range(pagesCount), index => {
const isActive = index === currentPage;
return html`
const isActive = index === currentPage;
return html`
<button
part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
class="carousel__pagination-item"
style="${styleMap({
'--index': index
})}"
'--index': index
})}"
role="tab"
aria-selected="${isActive ? 'true' : 'false'}"
aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
@ -585,10 +591,10 @@ export default class SlCarousel extends ShoelaceElement {
@keydown=${this.handleKeyDown}
></button>
`;
})}
})}
</div>
`
: ''}
: ''}
</div>
`;
}

Wyświetl plik

@ -152,11 +152,10 @@ export default css`
@supports (animation-timeline: view()) {
.carousel__pagination-item {
animation: pagination-item-active linear;
animation-timeline: --carousel;
animation-range:
calc(var(--index) * calc(100% / var(--pages)))
calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
animation: pagination-item-active linear;
animation-timeline: --carousel;
animation-range: calc(var(--index) * calc(100% / var(--pages)))
calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
}
}