Minor updates
This commit is contained in:
Vadim
27
src/components/Carousel/Carousel.stories.js
Normal file
27
src/components/Carousel/Carousel.stories.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import CarouselView from './CarouselView.svelte';
|
||||
import CarouselViewCustomDots from './CarouselViewCustomDots.svelte';
|
||||
import CarouselViewCustomArrows from './CarouselViewCustomArrows.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Carousel',
|
||||
component: CarouselView
|
||||
};
|
||||
|
||||
const Template = ({ ...args }) => ({
|
||||
Component: CarouselView,
|
||||
props: args
|
||||
});
|
||||
export const Primary = Template.bind({});
|
||||
|
||||
const TemplateCustomDots = ({ ...args }) => ({
|
||||
Component: CarouselViewCustomDots,
|
||||
props: args
|
||||
});
|
||||
export const WithCustomDots = TemplateCustomDots.bind({});
|
||||
|
||||
const TemplateCustomArrows = ({ ...args }) => ({
|
||||
Component: CarouselViewCustomArrows,
|
||||
props: args
|
||||
});
|
||||
export const WithCustomArrows = TemplateCustomArrows.bind({});
|
||||
|
||||
264
src/components/Carousel/Carousel.svelte
Normal file
264
src/components/Carousel/Carousel.svelte
Normal file
@@ -0,0 +1,264 @@
|
||||
<script>
|
||||
import { onDestroy, onMount, tick } from 'svelte'
|
||||
import { store } from '../../store'
|
||||
import Dots from '../Dots/Dots.svelte'
|
||||
import Arrow from '../Arrow/Arrow.svelte'
|
||||
import { NEXT, PREV } from '../../direction'
|
||||
import { swipeable } from '../../utils/swipeable'
|
||||
import {
|
||||
addResizeEventListener,
|
||||
removeResizeEventListener
|
||||
} from '../../utils/event'
|
||||
|
||||
const directionFnDescription = {
|
||||
[NEXT]: showNextPage,
|
||||
[PREV]: showPrevPage
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable Next/Prev arrows
|
||||
*/
|
||||
export let arrows = true
|
||||
|
||||
/**
|
||||
* Infinite looping
|
||||
*/
|
||||
export let infinite = true
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
*/
|
||||
export let speed = 500
|
||||
let _speed = speed
|
||||
|
||||
/**
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
/**
|
||||
* Auto play change interval
|
||||
*/
|
||||
export let autoplaySpeed = 3000
|
||||
|
||||
/**
|
||||
* Auto play change direction ('next', 'prev')
|
||||
*/
|
||||
export let autoplayDirection = NEXT
|
||||
|
||||
/**
|
||||
* Current page indicator dots
|
||||
*/
|
||||
export let dots = true
|
||||
|
||||
let currentPageIndex = 0
|
||||
$: originalCurrentPageIndex = currentPageIndex - Number(infinite);
|
||||
let pagesCount = 0
|
||||
$: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 0) // without clones
|
||||
let pageWidth = 0
|
||||
let offset = 0
|
||||
let pageWindowElement
|
||||
let pagesElement
|
||||
|
||||
const unsubscribe = store.subscribe(value => {
|
||||
currentPageIndex = value.currentPageIndex
|
||||
})
|
||||
|
||||
function applyPageSizes() {
|
||||
const children = pagesElement.children
|
||||
pageWidth = pageWindowElement.clientWidth
|
||||
|
||||
pagesCount = children.length
|
||||
|
||||
for (let pageIndex=0; pageIndex<pagesCount; pageIndex++) {
|
||||
children[pageIndex].style.minWidth = `${pageWidth}px`
|
||||
children[pageIndex].style.maxWidth = `${pageWidth}px`
|
||||
}
|
||||
|
||||
store.init(initialPageIndex + Number(infinite))
|
||||
offsetPage(false)
|
||||
}
|
||||
|
||||
function applyAutoplay() {
|
||||
let interval
|
||||
if (autoplay) {
|
||||
interval = setInterval(() => {
|
||||
directionFnDescription[autoplayDirection]()
|
||||
}, autoplaySpeed)
|
||||
}
|
||||
return {
|
||||
teardownAutoplay: () => {
|
||||
interval && clearInterval(interval)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addClones() {
|
||||
const first = pagesElement.firstChild
|
||||
const last = pagesElement.children[pagesElement.children.length - 1]
|
||||
pagesElement.prepend(last.cloneNode(true))
|
||||
pagesElement.append(first.cloneNode(true))
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await tick()
|
||||
if (pagesElement && pageWindowElement) {
|
||||
infinite && addClones()
|
||||
applyPageSizes()
|
||||
}
|
||||
|
||||
const { teardownAutoplay } = applyAutoplay()
|
||||
|
||||
addResizeEventListener(applyPageSizes)
|
||||
return () => {
|
||||
removeResizeEventListener(applyPageSizes)
|
||||
teardownAutoplay()
|
||||
}
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe()
|
||||
})
|
||||
|
||||
function handlePageChange(event) {
|
||||
showPage(event.detail + Number(infinite), { offsetDelay: 0, animated: true })
|
||||
}
|
||||
|
||||
function offsetPage(animated) {
|
||||
_speed = animated ? speed : 0
|
||||
offset = -currentPageIndex * pageWidth
|
||||
if (infinite) {
|
||||
if (currentPageIndex === 0) {
|
||||
showPage(pagesCount - 2, { offsetDelay: speed, animated: false })
|
||||
} else if (currentPageIndex === pagesCount - 1) {
|
||||
showPage(1, { offsetDelay: speed, animated: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showPage(pageIndex, { offsetDelay, animated }) {
|
||||
store.moveToPage({ pageIndex, pagesCount })
|
||||
setTimeout(() => {
|
||||
offsetPage(animated)
|
||||
}, offsetDelay)
|
||||
}
|
||||
function showPrevPage() {
|
||||
store.prev({ infinite, pagesCount })
|
||||
offsetPage(true)
|
||||
}
|
||||
function showNextPage() {
|
||||
store.next({ infinite, pagesCount })
|
||||
offsetPage(true)
|
||||
}
|
||||
|
||||
// gestures
|
||||
function handleSwipeStart() {
|
||||
_speed = 0
|
||||
}
|
||||
function handleThreshold(event) {
|
||||
directionFnDescription[event.detail.direction]()
|
||||
}
|
||||
function handleSwipeMove(event) {
|
||||
offset += event.detail.dx
|
||||
}
|
||||
function handleSwipeEnd() {
|
||||
showPage(currentPageIndex, { offsetDelay: 0, animated: true })
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="carousel-container">
|
||||
{#if arrows}
|
||||
<slot name="prev" {showPrevPage}>
|
||||
<div class="arrow-container">
|
||||
<Arrow
|
||||
direction="prev"
|
||||
disabled={!infinite && originalCurrentPageIndex === 0}
|
||||
on:click={showPrevPage}
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
{/if}
|
||||
<div
|
||||
class="content-container"
|
||||
bind:this={pageWindowElement}
|
||||
>
|
||||
<div
|
||||
use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
|
||||
on:start={handleSwipeStart}
|
||||
on:move={handleSwipeMove}
|
||||
on:end={handleSwipeEnd}
|
||||
on:threshold={handleThreshold}
|
||||
style="
|
||||
transform: translateX({offset}px);
|
||||
transition-duration: {_speed}ms;
|
||||
"
|
||||
bind:this={pagesElement}
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
{#if arrows}
|
||||
<slot name="next" {showNextPage}>
|
||||
<div class="arrow-container">
|
||||
<Arrow
|
||||
direction="next"
|
||||
disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
|
||||
on:click={showNextPage}
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
{/if}
|
||||
</div>
|
||||
{#if dots}
|
||||
<slot
|
||||
name="dots"
|
||||
currentPageIndex={originalCurrentPageIndex}
|
||||
pagesCount={originalPagesCount}
|
||||
showPage={pageIndex => showPage(pageIndex, { offsetDelay: 0, animated: true })}
|
||||
>
|
||||
<Dots
|
||||
pagesCount={originalPagesCount}
|
||||
currentPageIndex={originalCurrentPageIndex}
|
||||
on:pageChange={handlePageChange}
|
||||
></Dots>
|
||||
</slot>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.carousel-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.content-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content-container > div {
|
||||
width: 100%;
|
||||
display: flex; /* to put child elements in one row */
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-property: transform;
|
||||
}
|
||||
.arrow-container {
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
98
src/components/Carousel/CarouselView.svelte
Normal file
98
src/components/Carousel/CarouselView.svelte
Normal file
@@ -0,0 +1,98 @@
|
||||
<script>
|
||||
import Carousel from './Carousel.svelte'
|
||||
import { NEXT } from '../../direction'
|
||||
|
||||
/**
|
||||
* Enable Next/Previos arrows
|
||||
*/
|
||||
export let arrows = true;
|
||||
|
||||
/**
|
||||
* Infinite looping
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
*/
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
/**
|
||||
* Auto play change interval
|
||||
*/
|
||||
export let autoplaySpeed = 3000
|
||||
|
||||
/**
|
||||
* Auto play change direction ('next', 'prev')
|
||||
*/
|
||||
export let autoplayDirection = NEXT
|
||||
|
||||
/**
|
||||
* Current page indicator dots
|
||||
*/
|
||||
export let dots = true
|
||||
|
||||
const colors = [
|
||||
{ color: '#e5f9f0', text: '0' },
|
||||
{ color: '#ccf3e2', text: '1' },
|
||||
{ color: '#b2edd3', text: '2' },
|
||||
{ color: '#99e7c5', text: '3' },
|
||||
{ color: '#7fe1b7', text: '4' },
|
||||
{ color: '#66dba8', text: '5' },
|
||||
{ color: '#4cd59a', text: '6' },
|
||||
{ color: '#32cf8b', text: '7' },
|
||||
{ color: '#19c97d', text: '8' },
|
||||
{ color: '#00c36f', text: '9' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="main-container">
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
{autoplaySpeed}
|
||||
{autoplayDirection}
|
||||
{dots}
|
||||
>
|
||||
{#each colors as { color, text } (color)}
|
||||
<div
|
||||
class="color-container"
|
||||
style="background-color: {color};"
|
||||
>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.color-container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
.color-container > p {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
124
src/components/Carousel/CarouselViewCustomArrows.svelte
Normal file
124
src/components/Carousel/CarouselViewCustomArrows.svelte
Normal file
@@ -0,0 +1,124 @@
|
||||
<script>
|
||||
import Carousel from './Carousel.svelte'
|
||||
import { NEXT } from '../../direction'
|
||||
|
||||
/**
|
||||
* Enable Next/Previos arrows
|
||||
*/
|
||||
export let arrows = true;
|
||||
|
||||
/**
|
||||
* Infinite looping
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
*/
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
/**
|
||||
* Auto play change interval
|
||||
*/
|
||||
export let autoplaySpeed = 3000
|
||||
|
||||
/**
|
||||
* Auto play change direction ('next', 'prev')
|
||||
*/
|
||||
export let autoplayDirection = NEXT
|
||||
|
||||
/**
|
||||
* Current page indicator dots
|
||||
*/
|
||||
export let dots = true
|
||||
|
||||
const colors = [
|
||||
'#e5f9f0',
|
||||
'#ccf3e2',
|
||||
'#b2edd3',
|
||||
'#99e7c5',
|
||||
'#7fe1b7',
|
||||
'#66dba8',
|
||||
'#4cd59a',
|
||||
'#32cf8b',
|
||||
'#19c97d',
|
||||
'#00c36f'
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="main-container">
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
{autoplaySpeed}
|
||||
{autoplayDirection}
|
||||
{dots}
|
||||
let:showPrevPage
|
||||
let:showNextPage
|
||||
>
|
||||
{#each colors as color (color)}
|
||||
<div
|
||||
class="color-container"
|
||||
style="background-color: {color};"
|
||||
>
|
||||
<p>{color}</p>
|
||||
</div>
|
||||
{/each}
|
||||
<div slot="prev" class="arrow-container">
|
||||
<div class="arrow" on:click={showPrevPage}>
|
||||
<span><<<</span>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="next" class="arrow-container">
|
||||
<div class="arrow" on:click={showNextPage}>
|
||||
<span>>>></span>
|
||||
</div>
|
||||
</div>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.color-container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.color-container > p {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.arrow {
|
||||
background-color: darkgray;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
134
src/components/Carousel/CarouselViewCustomDots.svelte
Normal file
134
src/components/Carousel/CarouselViewCustomDots.svelte
Normal file
@@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import Carousel from './Carousel.svelte'
|
||||
import { NEXT } from '../../direction'
|
||||
|
||||
/**
|
||||
* Enable Next/Previos arrows
|
||||
*/
|
||||
export let arrows = true;
|
||||
|
||||
/**
|
||||
* Infinite looping
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
*/
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
/**
|
||||
* Auto play change interval
|
||||
*/
|
||||
export let autoplaySpeed = 3000
|
||||
|
||||
/**
|
||||
* Auto play change direction ('next', 'prev')
|
||||
*/
|
||||
export let autoplayDirection = NEXT
|
||||
|
||||
/**
|
||||
* Current page indicator dots
|
||||
*/
|
||||
export let dots = true
|
||||
|
||||
function onPageChange(event, showPage) {
|
||||
showPage(event.target.value)
|
||||
}
|
||||
|
||||
const colors = [
|
||||
'#e5f9f0',
|
||||
'#ccf3e2',
|
||||
'#b2edd3',
|
||||
'#99e7c5',
|
||||
'#7fe1b7',
|
||||
'#66dba8',
|
||||
'#4cd59a',
|
||||
'#32cf8b',
|
||||
'#19c97d',
|
||||
'#00c36f'
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="main-container">
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
{autoplaySpeed}
|
||||
{autoplayDirection}
|
||||
{dots}
|
||||
let:currentPageIndex
|
||||
let:pagesCount
|
||||
let:showPage
|
||||
>
|
||||
{#each colors as color (color)}
|
||||
<div
|
||||
class="color-container"
|
||||
style="background-color: {color};"
|
||||
>
|
||||
<p>{color}</p>
|
||||
</div>
|
||||
{/each}
|
||||
<div slot="dots">
|
||||
<div class="select-container">
|
||||
<select
|
||||
value={currentPageIndex}
|
||||
on:change="{(event) => onPageChange(event, showPage)}"
|
||||
on:blur="{(event) => onPageChange(event, showPage)}"
|
||||
>
|
||||
{#each Array(pagesCount) as _, pageIndex (pageIndex)}
|
||||
<option value={pageIndex} class:active={currentPageIndex === pageIndex}>
|
||||
{pageIndex}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.color-container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.color-container > p {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
}
|
||||
.active {
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.select-container > select {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-style: italic;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user