release: WRNexusJS 0.6.0
This commit is contained in:
@@ -1,53 +1,56 @@
|
||||
// Interactive, hydration-safe content carousel.
|
||||
component Carousel {
|
||||
outputs {
|
||||
initialize(payload: { index: number; count: number })
|
||||
change(payload: { index: number; previousIndex: number; item: string | number | boolean | null | object; reason: string | boolean })
|
||||
previous(payload: { index: number; previousIndex: number; item: string | number | boolean | null | object })
|
||||
next(payload: { index: number; previousIndex: number; item: string | number | boolean | null | object })
|
||||
play(payload: { index: number; interval: number })
|
||||
pause(payload: { index: number })
|
||||
reachStart(payload: { index: number })
|
||||
reachEnd(payload: { index: number })
|
||||
dragStart(payload: { index: number; x: null })
|
||||
dragEnd(payload: { index: number; distance: number })
|
||||
}
|
||||
|
||||
props {
|
||||
@event initialize = function
|
||||
@event change = function
|
||||
@event previous = function
|
||||
@event next = function
|
||||
@event play = function
|
||||
@event pause = function
|
||||
@event reachStart = function
|
||||
@event reachEnd = function
|
||||
@event dragStart = function
|
||||
@event dragEnd = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = ""
|
||||
description = ""
|
||||
items = []
|
||||
activeIndex = 0
|
||||
slidesPerView = 1
|
||||
gap = "0.75rem"
|
||||
showPagination = false
|
||||
isAutoPlay = false
|
||||
autoplayInterval = 4000
|
||||
isInfiniteLoop = false
|
||||
isRTL = false
|
||||
isCentered = false
|
||||
isDraggable = false
|
||||
isAutoHeight = false
|
||||
isSnap = false
|
||||
showCounter = false
|
||||
thumbnails = "none"
|
||||
ariaLabel = "Content carousel"
|
||||
variant = "default"
|
||||
class = ""
|
||||
size: string = "default"
|
||||
color: string = "primary"
|
||||
title: string = ""
|
||||
description: string = ""
|
||||
items: unknown[] = []
|
||||
activeIndex: number = 0
|
||||
slidesPerView: number = 1
|
||||
gap: string = "0.75rem"
|
||||
showPagination: boolean = false
|
||||
isAutoPlay: boolean = false
|
||||
autoplayInterval: number = 4000
|
||||
isInfiniteLoop: boolean = false
|
||||
isRTL: boolean = false
|
||||
isCentered: boolean = false
|
||||
isDraggable: boolean = false
|
||||
isAutoHeight: boolean = false
|
||||
isSnap: boolean = false
|
||||
showCounter: boolean = false
|
||||
thumbnails: string = "none"
|
||||
ariaLabel: string = "Content carousel"
|
||||
variant: string = "default"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
state currentIndex = activeIndex
|
||||
state playing = false
|
||||
state playing: boolean = false
|
||||
state dragOrigin = null
|
||||
state dragOffset = 0
|
||||
state dragOffset: number = 0
|
||||
state autoplayTimer = null
|
||||
state carouselRoot = null
|
||||
|
||||
functions {
|
||||
function slideCount() {
|
||||
shared function slideCount() {
|
||||
return items.length
|
||||
}
|
||||
|
||||
function maximumIndex(count, visible) {
|
||||
shared function maximumIndex(count, visible) {
|
||||
count = slideCount()
|
||||
visible = Math.max(1, Number(slidesPerView) || 1)
|
||||
if (isCentered || isSnap) {
|
||||
@@ -56,7 +59,7 @@ component Carousel {
|
||||
return Math.max(0, count - visible)
|
||||
}
|
||||
|
||||
function normalizedIndex(index, maximum) {
|
||||
shared function normalizedIndex(index, maximum) {
|
||||
maximum = maximumIndex()
|
||||
if (slideCount() === 0) {
|
||||
return 0
|
||||
@@ -72,7 +75,7 @@ component Carousel {
|
||||
return Math.max(0, Math.min(index, maximum))
|
||||
}
|
||||
|
||||
function rememberRoot(sourceEvent, root) {
|
||||
client function rememberRoot(sourceEvent, root) {
|
||||
if (!sourceEvent || !sourceEvent.currentTarget) {
|
||||
return
|
||||
}
|
||||
@@ -82,7 +85,7 @@ component Carousel {
|
||||
}
|
||||
}
|
||||
|
||||
function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) {
|
||||
client function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) {
|
||||
rememberRoot(sourceEvent)
|
||||
root = carouselRoot
|
||||
if (!root) {
|
||||
@@ -111,7 +114,7 @@ component Carousel {
|
||||
}
|
||||
}
|
||||
|
||||
function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) {
|
||||
client function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) {
|
||||
if (!isSnap) {
|
||||
return
|
||||
}
|
||||
@@ -133,7 +136,7 @@ component Carousel {
|
||||
if (closestIndex !== currentIndex) {
|
||||
previousIndex = currentIndex
|
||||
currentIndex = closestIndex
|
||||
$emit("change", {
|
||||
output.change({
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex],
|
||||
@@ -152,7 +155,7 @@ component Carousel {
|
||||
}
|
||||
}
|
||||
|
||||
function selectSlide(index, reason, sourceEvent, previousIndex) {
|
||||
client function selectSlide(index, reason, sourceEvent, previousIndex) {
|
||||
if (slideCount() === 0) {
|
||||
return
|
||||
}
|
||||
@@ -162,41 +165,41 @@ component Carousel {
|
||||
if (previousIndex === currentIndex && reason !== "initialize") {
|
||||
return
|
||||
}
|
||||
$emit("change", {
|
||||
output.change({
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex],
|
||||
reason: reason || "select"
|
||||
})
|
||||
if (currentIndex === 0) {
|
||||
$emit("reachStart", { index: currentIndex })
|
||||
output.reachStart({ index: currentIndex })
|
||||
}
|
||||
if (currentIndex === maximumIndex()) {
|
||||
$emit("reachEnd", { index: currentIndex })
|
||||
output.reachEnd({ index: currentIndex })
|
||||
}
|
||||
}
|
||||
|
||||
function previousSlide(sourceEvent, previousIndex) {
|
||||
client function previousSlide(sourceEvent, previousIndex) {
|
||||
previousIndex = currentIndex
|
||||
selectSlide(currentIndex - 1, "previous", sourceEvent)
|
||||
$emit("previous", {
|
||||
output.previous({
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex]
|
||||
})
|
||||
}
|
||||
|
||||
function nextSlide(sourceEvent, previousIndex) {
|
||||
client function nextSlide(sourceEvent, previousIndex) {
|
||||
previousIndex = currentIndex
|
||||
selectSlide(currentIndex + 1, "next", sourceEvent)
|
||||
$emit("next", {
|
||||
output.next({
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex]
|
||||
})
|
||||
}
|
||||
|
||||
function handleKeydown(sourceEvent) {
|
||||
client function handleKeydown(sourceEvent) {
|
||||
if (sourceEvent.key === "ArrowLeft") {
|
||||
sourceEvent.preventDefault()
|
||||
if (isRTL) {
|
||||
@@ -223,7 +226,7 @@ component Carousel {
|
||||
}
|
||||
}
|
||||
|
||||
function beginDrag(sourceEvent) {
|
||||
client function beginDrag(sourceEvent) {
|
||||
if (!isDraggable || isSnap) {
|
||||
return
|
||||
}
|
||||
@@ -231,10 +234,10 @@ component Carousel {
|
||||
dragOrigin = sourceEvent.clientX
|
||||
dragOffset = 0
|
||||
sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId)
|
||||
$emit("dragStart", { index: currentIndex, x: dragOrigin })
|
||||
output.dragStart({ index: currentIndex, x: dragOrigin })
|
||||
}
|
||||
|
||||
function moveDrag(sourceEvent) {
|
||||
client function moveDrag(sourceEvent) {
|
||||
if (!isDraggable || isSnap || dragOrigin === null) {
|
||||
return
|
||||
}
|
||||
@@ -242,12 +245,12 @@ component Carousel {
|
||||
dragOffset = sourceEvent.clientX - dragOrigin
|
||||
}
|
||||
|
||||
function cancelDrag() {
|
||||
shared function cancelDrag() {
|
||||
dragOrigin = null
|
||||
dragOffset = 0
|
||||
}
|
||||
|
||||
function endDrag(sourceEvent, distance) {
|
||||
client function endDrag(sourceEvent, distance) {
|
||||
if (!isDraggable || isSnap || dragOrigin === null) {
|
||||
return
|
||||
}
|
||||
@@ -262,13 +265,13 @@ component Carousel {
|
||||
previousSlide(sourceEvent)
|
||||
}
|
||||
}
|
||||
$emit("dragEnd", {
|
||||
output.dragEnd({
|
||||
index: currentIndex,
|
||||
distance: distance
|
||||
})
|
||||
}
|
||||
|
||||
function advanceAutoplay() {
|
||||
shared function advanceAutoplay() {
|
||||
if (currentIndex >= maximumIndex()) {
|
||||
selectSlide(0, "autoplay")
|
||||
} else {
|
||||
@@ -276,22 +279,22 @@ component Carousel {
|
||||
}
|
||||
}
|
||||
|
||||
function startAutoplay() {
|
||||
client function startAutoplay() {
|
||||
if (!isAutoPlay || playing || slideCount() < 2) {
|
||||
return
|
||||
}
|
||||
playing = true
|
||||
autoplayTimer = setInterval(advanceAutoplay, Math.max(1000, Number(autoplayInterval)))
|
||||
$emit("play", { index: currentIndex, interval: autoplayInterval })
|
||||
output.play({ index: currentIndex, interval: autoplayInterval })
|
||||
}
|
||||
|
||||
function pauseAutoplay() {
|
||||
client function pauseAutoplay() {
|
||||
if (autoplayTimer) {
|
||||
clearInterval(autoplayTimer)
|
||||
}
|
||||
autoplayTimer = null
|
||||
if (playing) {
|
||||
$emit("pause", { index: currentIndex })
|
||||
output.pause({ index: currentIndex })
|
||||
}
|
||||
playing = false
|
||||
}
|
||||
@@ -300,7 +303,7 @@ component Carousel {
|
||||
|
||||
lifecycle {
|
||||
mount {
|
||||
$emit("initialize", { index: currentIndex, count: slideCount() })
|
||||
output.initialize({ index: currentIndex, count: slideCount() })
|
||||
startAutoplay()
|
||||
}
|
||||
unmount {
|
||||
|
||||
Reference in New Issue
Block a user