public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename vars, code cleanup

Browse Source
This commit is contained in:
Vadim
2021-01-22 19:55:24 +03:00
parent 0470ce313c
commit 905c00cd94
12 changed files with 66 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -26,7 +26,6 @@
"svelte-loader": "^2.13.6"
},
"dependencies": {
"sirv-cli": "^1.0.0",
"uuid": "^8.3.2"
"sirv-cli": "^1.0.0"
}
}

20
src/ImageCarousel/ImageCarousel.svelte
View File

@@ -1,8 +1,7 @@
<script>
// TODO: rename image carousel to just carousel
// TODO: seems CarouselChild component can be removed
// TODO: subscribe on mount and unsubscribe on destroy to
// $store.currentItemIndex to avoid multiple subscriptions
// $store.currentPageIndex to avoid multiple subscriptions
import { onMount } from 'svelte'
import { store } from '../store'
import {
@@ -33,7 +32,7 @@
/**
* Page to start on
*/
export let initialPage = 1
export let initialPageIndex = 1
/**
* Transition speed (ms)
@@ -61,14 +60,14 @@
export let dots = true
let pagesCount = 0
let contentContainerWidth = 0
let pageWidth = 0
let offset
let contentContainerElement
let innerContentContainerElement
function applySlideSizes() {
const children = innerContentContainerElement.children
contentContainerWidth = contentContainerElement.clientWidth
pageWidth = contentContainerElement.clientWidth
const slidesCount = children.length
pagesCount = getPagesCount({ slidesCount, slidesToShow })
@@ -77,11 +76,10 @@
for (let slideIndex=0; slideIndex<children.length; slideIndex++) {
const pageIndex = getPageIndex({ slideIndex, slidesToShow })
const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount })
const slideSizePx = getSlideSize({ isNotCompletePage, contentContainerWidth, slidesToShow, slidesToShowTail })
const slideSizePx = getSlideSize({ isNotCompletePage, pageWidth, slidesToShow, slidesToShowTail })
children[slideIndex].style.minWidth = `${slideSizePx}px`
children[slideIndex].style.maxWidth = `${slideSizePx}px`
}
showPage(initialPage)
}
function applyAutoplay() {
@@ -103,7 +101,7 @@
}
onMount(() => {
store.reset() // to init after hot reload
store.init(initialPageIndex)
applySlideSizes()
const { teardownAutoplay } = applyAutoplay()
@@ -120,7 +118,7 @@
}
function applyOffset() {
offset = -$store.currentItemIndex * contentContainerWidth
offset = -$store.currentPageIndex * pageWidth
}
function showPage(pageIndex) {
@@ -171,13 +169,13 @@
{#if dots}
<slot
name="dots"
currentPage={$store.currentItemIndex}
currentPageIndex={$store.currentPageIndex}
{pagesCount}
{showPage}
>
<Dots
{pagesCount}
currentPageIndex={$store.currentItemIndex}
currentPageIndex={$store.currentPageIndex}
on:pageChange={handlePageChange}
></Dots>
</slot>

4
src/ImageCarousel/ImageCarouselView.svelte
View File

@@ -19,7 +19,7 @@
/**
* Page to start on
*/
export let initialPage = 1
export let initialPageIndex = 1
/**
* Transition speed (ms)
@@ -65,7 +65,7 @@
{arrows}
{infinite}
{slidesToShow}
{initialPage}
{initialPageIndex}
{speed}
{autoplay}
{autoplaySpeed}

8
src/ImageCarousel/ImageCarouselViewCustomArrows.svelte
View File

@@ -19,7 +19,7 @@
/**
* Page to start on
*/
export let initialPage = 1
export let initialPageIndex = 1
/**
* Transition speed (ms)
@@ -46,10 +46,6 @@
*/
export let dots = true
function onPageChange(event, showPage) {
showPage(event.target.value)
}
const colors = [
'#e5f9f0',
'#ccf3e2',
@@ -69,7 +65,7 @@
{arrows}
{infinite}
{slidesToShow}
{initialPage}
{initialPageIndex}
{speed}
{autoplay}
{autoplaySpeed}

10
src/ImageCarousel/ImageCarouselViewCustomDots.svelte
View File

@@ -19,7 +19,7 @@
/**
* Page to start on
*/
export let initialPage = 1
export let initialPageIndex = 1
/**
* Transition speed (ms)
@@ -69,13 +69,13 @@
{arrows}
{infinite}
{slidesToShow}
{initialPage}
{initialPageIndex}
{speed}
{autoplay}
{autoplaySpeed}
{autoplayDirection}
{dots}
let:currentPage
let:currentPageIndex
let:pagesCount
let:showPage
>
@@ -90,12 +90,12 @@
<div slot="dots">
<div class="select-container">
<select
value={currentPage}
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={currentPage === pageIndex}>
<option value={pageIndex} class:active={currentPageIndex === pageIndex}>
{pageIndex}
</option>
{/each}

2
src/main.js
View File

@@ -1,2 +1,2 @@
// TODO:
export default null;
export default null;

36
src/store.js
View File

@@ -1,24 +1,24 @@
import { writable } from 'svelte/store';
import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
// TODO: try to split writable store items
// or try to use immer
import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page-index'
const initState = {
currentItemIndex: null,
currentPageIndex: 0,
}
function createStore() {
const { subscribe, set, update } = writable(initState);
function reset() {
set(initState)
function init(initialPageIndex) {
set({
...initState,
currentPageIndex: initialPageIndex
})
}
function setCurrentItemIndex(index) {
function setCurrentPageIndex(index) {
update(store => ({
...store,
currentItemIndex: index,
currentPageIndex: index,
}))
}
@@ -26,29 +26,27 @@ function createStore() {
update(store => {
return {
...store,
currentItemIndex: pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1),
currentPageIndex: pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1),
}
})
}
function next({ infinite, pagesCount }) {
update(store => {
const currentItemIndex = store.currentItemIndex
const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, pagesCount)
const newCurrentPageIndex = getNextPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
return {
...store,
currentItemIndex: newCurrentItemIndex,
currentPageIndex: newCurrentPageIndex,
}
})
}
function prev({ infinite, pagesCount }) {
update(store => {
const currentItemIndex = store.currentItemIndex
const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, pagesCount)
const newCurrentPageIndex = getPrevPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
return {
...store,
currentItemIndex: newCurrentItemIndex,
currentPageIndex: newCurrentPageIndex,
}
})
}
@@ -57,10 +55,10 @@ function createStore() {
subscribe,
next,
prev,
setCurrentItemIndex,
reset,
setCurrentPageIndex,
init,
moveToPage,
};
}
export const store = createStore();
export const store = createStore();

5
src/utils/id.js
View File

@@ -1,5 +0,0 @@
import { v4 as uuid } from 'uuid'
export function generateId() {
return uuid()
}

25
src/utils/item-index.js
View File

@@ -1,25 +0,0 @@
export function getNextItemIndexLimited(currentItemIndex, length) {
return Math.min(currentItemIndex + 1, length - 1)
}
export function getNextItemIndexInfinte(currentItemIndex, length) {
const newCurrentItemIndex = currentItemIndex + 1
return newCurrentItemIndex > length - 1 ? 0 : newCurrentItemIndex
}
export function getNextItemIndexFn(infinite) {
return infinite ? getNextItemIndexInfinte : getNextItemIndexLimited
}
export function getPrevItemIndexLimited(currentItemIndex, length) {
return Math.max(currentItemIndex - 1, 0)
}
export function getPrevItemIndexInfinte(currentItemIndex, length) {
const newCurrentItemIndex = currentItemIndex - 1
return newCurrentItemIndex >= 0 ? newCurrentItemIndex : length - 1
}
export function getPrevItemIndexFn(infinite) {
return infinite ? getPrevItemIndexInfinte : getPrevItemIndexLimited
}

25
src/utils/page-index.js Normal file
View File

@@ -0,0 +1,25 @@
export function getNextPageIndexLimited(currentPageIndex, pagesCount) {
return Math.min(currentPageIndex + 1, pagesCount - 1)
}
export function getNextPageIndexInfinte(currentPageIndex, pagesCount) {
const newCurrentPageIndex = currentPageIndex + 1
return newCurrentPageIndex > pagesCount - 1 ? 0 : newCurrentPageIndex
}
export function getNextPageIndexFn(infinite) {
return infinite ? getNextPageIndexInfinte : getNextPageIndexLimited
}
export function getPrevPageIndexLimited(currentPageIndex, pagesCount) {
return Math.max(currentPageIndex - 1, 0)
}
export function getPrevPageIndexInfinte(currentPageIndex, pagesCount) {
const newCurrentPageIndex = currentPageIndex - 1
return newCurrentPageIndex >= 0 ? newCurrentPageIndex : pagesCount - 1
}
export function getPrevPageIndexFn(infinite) {
return infinite ? getPrevPageIndexInfinte : getPrevPageIndexLimited
}

6
src/utils/size.js
View File

@@ -18,14 +18,14 @@ export function getIsNotCompletePage({
}
export function getSlideSize({
contentContainerWidth,
pageWidth,
slidesToShow,
slidesToShowTail,
isNotCompletePage
}) {
return isNotCompletePage
? Math.round(contentContainerWidth/slidesToShowTail)
: Math.round(contentContainerWidth/slidesToShow)
? Math.round(pageWidth/slidesToShowTail)
: Math.round(pageWidth/slidesToShow)
}
export function getPageIndex({ slideIndex, slidesToShow }) {

2
yarn.lock
View File

@@ -9492,7 +9492,7 @@ uuid@^3.3.2:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
uuid@^8.0.0, uuid@^8.3.2:
uuid@^8.0.0:
version "8.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==