diff --git a/package.json b/package.json index eeca4da..10429e5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "svelte-loader": "^2.13.6" }, "dependencies": { - "sirv-cli": "^1.0.0" + "sirv-cli": "^1.0.0", + "uuid": "^8.3.2" } } diff --git a/src/CarouselChild.svelte b/src/CarouselChild.svelte new file mode 100644 index 0000000..7241390 --- /dev/null +++ b/src/CarouselChild.svelte @@ -0,0 +1,21 @@ + + +{#if id === $store.currentItemId} + +{/if } + + \ No newline at end of file diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte index 48c2b20..90fb58d 100644 --- a/src/ImageCarousel.svelte +++ b/src/ImageCarousel.svelte @@ -1,5 +1,8 @@ diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..999ad90 --- /dev/null +++ b/src/store.js @@ -0,0 +1,54 @@ +import { writable } from 'svelte/store'; + + +function createStore() { + const { subscribe, set, update } = writable({ + items: [], + currentItemId: null + }); + + function setItem(id) { + update(store => ({ + ...store, + currentItemId: id, + items: [ + ...store.items, + id + ] + })) + } + + function next() { + // TODO: move to utils functions and cover eoth tests + update(store => { + const currentItemIndex = store.items.findIndex(item => item === store.currentItemId) + // TODO: infinite + // const newCurrentItemIndex = currentItemIndex + 1 > store.items.length - 1 ? 0 : currentItemIndex + 1 + const newCurrentItemIndex = Math.min(currentItemIndex + 1, store.items.length - 1) + return { + ...store, + currentItemId: store.items[newCurrentItemIndex] + } + }) + } + + function prev() { + update(store => { + const currentItemIndex = store.items.findIndex(item => item === store.currentItemId) + const newCurrentItemIndex = Math.max(0, currentItemIndex - 1) + return { + ...store, + currentItemId: store.items[newCurrentItemIndex] + } + }) + } + + return { + subscribe, + setItem, + next, + prev + }; +} + +export const store = createStore(); \ No newline at end of file diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte index 89c24c2..f58f783 100644 --- a/src/stories/ImageCarouselView.svelte +++ b/src/stories/ImageCarouselView.svelte @@ -1,5 +1,6 @@
- -

Element 1

-

Element 2

+ + +

Element 1

+
+ +

Element 2

+
diff --git a/src/utils/id.js b/src/utils/id.js new file mode 100644 index 0000000..d636c7d --- /dev/null +++ b/src/utils/id.js @@ -0,0 +1,5 @@ +import { v4 as uuid } from 'uuid' + +export function generateId() { + return uuid() +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 043b130..14162f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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.0.0, uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==