Skip to content

Commit

Permalink
chore: update storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@megheaiulian
megheaiulian committed Nov 2, 2023
1 parent 683a664 commit 368a272
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 88 deletions.
90 changes: 56 additions & 34 deletions demo/advanced-slider.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,73 @@
import { component, html, useState } from 'haunted';
import { useSlideList } from '../src/';
import { useSlideList } from '../src/use-slide-list';

const
renderSlide = item => html`
<h1>my slide ${ item.id }</h1>
<p>${ Math.random() }</p>
<img src="${ item.pic }" width="1200" height="300" style="background:gray;width:100%; height: auto;" />
const renderSlide = (item) => html`
<h1>my slide ${item.id}</h1>
<p>${Math.random()}</p>
<img
src="${item.pic}"
width="1200"
height="300"
style="background:gray;width:100%; height: auto;"
/>
`,
initItems = [
{ id: 1, pic: 'https://picsum.photos/1200/300?random=1' },
{ id: 2, pic: 'https://picsum.photos/1200/300?random=2' },
{ id: 3, pic: 'https://picsum.photos/1200/300?random=3' },
{ id: 4, pic: 'https://picsum.photos/1200/300?random=4' }
{ id: 4, pic: 'https://picsum.photos/1200/300?random=4' },
],
DemoAdvancedSlider = () => {
const
[items, setItems] = useState(initItems),
{ index, slide, prev, next, first, last } = useSlideList(items, { render: renderSlide, id: a => a?.id }),
addItem = () => setItems(items => [...items, { id: items.length + 1, pic: 'https://picsum.photos/1200/300?random=' + (items.length + 1) }]),
const [items, setItems] = useState(initItems),
{ index, slide, prev, next, first, last } = useSlideList(items, {
render: renderSlide,
id: (a) => a?.id,
}),
addItem = () =>
setItems((items) => [
...items,
{
id: items.length + 1,
pic: 'https://picsum.photos/1200/300?random=' + (items.length + 1),
},
]),
resetItems = () => setItems(initItems),
shuffleItems = () => setItems(items => items.concat().sort(() => Math.random() > 0.5 ? 1 : -1)),
shuffleItems = () =>
setItems((items) =>
items.concat().sort(() => (Math.random() > 0.5 ? 1 : -1)),
),
emptyItems = () => setItems([]),
updateItem = () => setItems(items => [
...items.slice(0, index),
{ ...items[index], pic: 'https://picsum.photos/1200/300?random=' + Math.round(Math.random() * 100) },
...items.slice(index + 1)
]);
updateItem = () =>
setItems((items) => [
...items.slice(0, index),
{
...items[index],
pic:
'https://picsum.photos/1200/300?random=' +
Math.round(Math.random() * 100),
},
...items.slice(index + 1),
]);

return html`
<style>
cosmoz-slider {
width: 90vw;
height: 500px;
background: lightgray;
}
</style>
<style>
cosmoz-slider {
width: 90vw;
height: 500px;
background: lightgray;
}
</style>
<cosmoz-slider .slide=${ slide }></cosmoz-slider>
${ index + 1 } / ${ items.length }
<button @click=${ prev } ?disabled=${ first }>Prev</button>
<button @click=${ next } ?disabled=${ last }>Next</button>
<button @click=${ addItem }>Add item</button>
<button @click=${ resetItems }>Reset items</button>
<button @click=${ shuffleItems }>Shuffle items</button>
<button @click=${ emptyItems }>Empty items</button>
<button @click=${ updateItem }>Update item</button>
`;
<cosmoz-slider .slide=${slide}></cosmoz-slider>
${index + 1} / ${items.length}
<button @click=${prev} ?disabled=${first}>Prev</button>
<button @click=${next} ?disabled=${last}>Next</button>
<button @click=${addItem}>Add item</button>
<button @click=${resetItems}>Reset items</button>
<button @click=${shuffleItems}>Shuffle items</button>
<button @click=${emptyItems}>Empty items</button>
<button @click=${updateItem}>Update item</button>
`;
};

customElements.define('demo-advanced-slider', component(DemoAdvancedSlider));
28 changes: 15 additions & 13 deletions demo/basic-slider.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { component, html, useState } from 'haunted';
import { slideInRight } from '../src/';
import { slideInRight } from '../src/animations';

const
randValue = () => Math.trunc(Math.random() * 256),
randColor = () => `rgb(${ randValue() }, ${ randValue() }, ${ randValue() })`,
newSlide = id => ({
const randValue = () => Math.trunc(Math.random() * 256),
randColor = () => `rgb(${randValue()}, ${randValue()}, ${randValue()})`,
newSlide = (id) => ({
id,
content: html`
<style>
Expand All @@ -20,20 +19,23 @@ const
user-select: none;
}
</style>
<div style="background-color: ${ randColor() }">
<div style="background-color: ${randColor()}">
<div>Click me!</div>
</div>
`,
animation: slideInRight
animation: slideInRight,
}),
DemoBasicSlider = () => {
const
[slide, setSlide] = useState(newSlide(1)),
slideNow = () => setSlide(slide => newSlide(slide.id + 1));
const [slide, setSlide] = useState(newSlide(1)),
slideNow = () => setSlide((slide) => newSlide(slide.id + 1));
return html`
<style>cosmoz-slider{height: 80vh}</style>
<cosmoz-slider .slide=${ slide } @click=${ slideNow }></cosmoz-slider>
`;
<style>
cosmoz-slider {
height: 80vh;
}
</style>
<cosmoz-slider .slide=${slide} @click=${slideNow}></cosmoz-slider>
`;
};

customElements.define('demo-basic-slider', component(DemoBasicSlider));
101 changes: 68 additions & 33 deletions demo/tab-slider.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,79 @@
import { component, html, useState } from 'haunted';
import { slideInLeft, slideInRight } from '../src/';
import { slideInLeft, slideInRight } from '../src/animations';

const
tabs = {
about: html`<h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`,
mission: html`<h1>Mission</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut placerat orci nulla pellentesque dignissim. A diam maecenas sed enim ut sem viverra. Enim eu turpis egestas
pretium aenean pharetra magna ac placerat. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Id neque
aliquam vestibulum morbi blandit cursus risus at ultrices. Quam nulla porttitor massa id neque. Diam vel quam elementum
pulvinar etiam non quam lacus suspendisse. Velit aliquet sagittis id consectetur. Venenatis urna cursus eget nunc. Arcu
ac tortor dignissim convallis aenean et tortor at. Neque laoreet suspendisse interdum consectetur libero id faucibus
nisl tincidunt. Pharetra massa massa ultricies mi quis hendrerit. Pellentesque nec nam aliquam sem et tortor consequat
id. Semper feugiat nibh sed pulvinar proin gravida.</p>`,
contact: html`<h1>Contact</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Id aliquet risus feugiat in. Amet
cursus sit amet dictum sit amet justo donec enim. Lectus sit amet est placerat in egestas erat imperdiet. Imperdiet sed
euismod nisi porta lorem. Facilisi morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam ut. Blandit
turpis cursus in hac habitasse platea dictumst quisque sagittis. In nibh mauris cursus mattis molestie a iaculis at.
Iaculis eu non diam phasellus vestibulum lorem sed risus. Pharetra massa massa ultricies mi quis hendrerit. Ridiculus
mus mauris vitae ultricies. Aliquam sem et tortor consequat id porta nibh venenatis. Amet volutpat consequat mauris
nunc. Mattis ullamcorper velit sed ullamcorper.</p>`
const tabs = {
about: html`<h1>About</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>`,
mission: html`<h1>Mission</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci
nulla pellentesque dignissim. A diam maecenas sed enim ut sem viverra.
Enim eu turpis egestas pretium aenean pharetra magna ac placerat.
Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Id
neque aliquam vestibulum morbi blandit cursus risus at ultrices. Quam
nulla porttitor massa id neque. Diam vel quam elementum pulvinar etiam
non quam lacus suspendisse. Velit aliquet sagittis id consectetur.
Venenatis urna cursus eget nunc. Arcu ac tortor dignissim convallis
aenean et tortor at. Neque laoreet suspendisse interdum consectetur
libero id faucibus nisl tincidunt. Pharetra massa massa ultricies mi
quis hendrerit. Pellentesque nec nam aliquam sem et tortor consequat id.
Semper feugiat nibh sed pulvinar proin gravida.
</p>`,
contact: html`<h1>Contact</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing
bibendum est ultricies integer quis auctor elit sed. Id aliquet risus
feugiat in. Amet cursus sit amet dictum sit amet justo donec enim.
Lectus sit amet est placerat in egestas erat imperdiet. Imperdiet sed
euismod nisi porta lorem. Facilisi morbi tempus iaculis urna id
volutpat. Lectus nulla at volutpat diam ut. Blandit turpis cursus in hac
habitasse platea dictumst quisque sagittis. In nibh mauris cursus mattis
molestie a iaculis at. Iaculis eu non diam phasellus vestibulum lorem
sed risus. Pharetra massa massa ultricies mi quis hendrerit. Ridiculus
mus mauris vitae ultricies. Aliquam sem et tortor consequat id porta
nibh venenatis. Amet volutpat consequat mauris nunc. Mattis ullamcorper
velit sed ullamcorper.
</p>`,
},
animation = (prevTab, nextTab) => {
const allTabs = Object.keys(tabs);
return allTabs.indexOf(prevTab) < allTabs.indexOf(nextTab) ? slideInRight : slideInLeft;
return allTabs.indexOf(prevTab) < allTabs.indexOf(nextTab)
? slideInRight
: slideInLeft;
},
DemoTabSlider = () => {
const
[slide, setSlide] = useState({ id: 'about', content: tabs.about, animation: slideInRight }),
slideNow = tab => () => setSlide(slide => ({ id: tab, content: tabs[tab], animation: animation(slide.id, tab) }));
const [slide, setSlide] = useState({
id: 'about',
content: tabs.about,
animation: slideInRight,
}),
slideNow = (tab) => () =>
setSlide((slide) => ({
id: tab,
content: tabs[tab],
animation: animation(slide.id, tab),
}));
return html`
<style>cosmoz-slider{height: 80vh}</style>
<button @click=${ slideNow('about') }>About</button>
<button @click=${ slideNow('mission') }>Mission</button>
<button @click=${ slideNow('contact') }>Contact</button>
<cosmoz-slider .slide=${ slide }></cosmoz-slider>
`;
<style>
cosmoz-slider {
height: 80vh;
}
</style>
<button @click=${slideNow('about')}>About</button>
<button @click=${slideNow('mission')}>Mission</button>
<button @click=${slideNow('contact')}>Contact</button>
<cosmoz-slider .slide=${slide}></cosmoz-slider>
`;
};

customElements.define('demo-tab-slider', component(DemoTabSlider));
11 changes: 3 additions & 8 deletions stories/cosmoz-slider.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
export default {
title: 'Cosmoz Slider'
title: 'Cosmoz Slider',
};

import '../demo/basic-slider';
import '../demo/tab-slider';
import '../demo/advanced-slider';

const
BasicSlider = () => '<demo-basic-slider></demo-basic-slider>',
const BasicSlider = () => '<demo-basic-slider></demo-basic-slider>',
TabSlider = () => '<demo-tab-slider></demo-tab-slider>',
AdvancedSlider = () => '<demo-advanced-slider></demo-advanced-slider>';

export {
BasicSlider,
TabSlider,
AdvancedSlider
};
export { BasicSlider, TabSlider, AdvancedSlider };

0 comments on commit 368a272

Please sign in to comment.