Skip to content

Commit

Permalink
@slidy/element - improve init, optimise & cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Valexr
Valexr committed Aug 30, 2022
1 parent ad84096 commit 81d3139
Show file tree
Hide file tree
Showing 11 changed files with 126 additions and 269 deletions.
15 changes: 9 additions & 6 deletions packages/element/public/api.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
export async function getPhotos(node, page, limit) {
export async function getPhotos(page = 9, limit = 9) {
node.innerHTML = `<span style="display: grid; place-items: center">Loading... 🚀</span>`;
if (node._slidy && thumbs._slidy) {
// node.setAttribute('length', node.children.length);
// thumbs.setAttribute('length', thumbs.children.length);
}
//page: 38 - END, 61 - START, 28
try {
const res = await fetch(`https://picsum.photos/v2/list?limit=${limit}&page=${page}`, {
mode: 'cors',
});
const res = await fetch(`https://picsum.photos/v2/list?limit=${limit}&page=${page}`);
const photos = await res.json();

if (photos.length === limit && node.isConnected) {
node.innerHTML = createSlides(node, photos);
thumbs.innerHTML = createSlides(thumbs, photos);
dots.innerHTML = createSlides(dots, photos);

if (node.children.length === limit) {
const mounted = Array.from(node.children).every(
if (limit === node.children.length && limit === thumbs.children.length) {
const mounted = Array.from(thumbs.children).every(
(child) => child && child.isConnected
);
if (mounted) {
Expand Down
12 changes: 6 additions & 6 deletions packages/element/public/env.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function setEvents() {
if (options[button.id]) {
button.classList.add('active');
} else if (!isNaN(button.id)) {
button.onclick = (e) => updateAttribute('index', () => e.target.id);
button.onclick = (e) => node.setAttribute('index', e.target.id);
}
}

Expand Down Expand Up @@ -92,10 +92,10 @@ export function setEvents() {
options.animation = animations[animation.value];
break;

case 'resize':
// slidyT.to(options.index);
// console.log(e.detail);
break;
// case 'resize':
// // slidyT.to(options.index);
// // console.log(e.detail);
// break;

case 'move':
utils.moving(e.detail);
Expand Down Expand Up @@ -129,7 +129,7 @@ export function setEvents() {
}
}
break;
case 'keys':
// case 'keys':
// console.log(e);
default:
// console.log(e);
Expand Down
70 changes: 43 additions & 27 deletions packages/element/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<link rel="stylesheet" defer href="dev.css" />
<link rel="stylesheet" href="build/element.css" />
<!-- <script type="text/javascript" src="index.js"></script> -->
<!-- <script type="text/javascript" src="https://unpkg.com/@slidy/core/dist/index.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/@slidy/easing/dist/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/@slidy/animation/dist/index.js"></script>

<title id="title"></title>
Expand All @@ -72,7 +72,7 @@
index: 4,
clamp: 0,
indent: 1,
length: 9,
// length: 9,
sensity: 5,
gravity: 1.2,
duration: 375,
Expand All @@ -83,25 +83,26 @@
easing: easings.lenear,
};
window.position = 0;
window.page = () => utils.randomQ(1, 99);
window.getPhotos = getPhotos;
window.updateAttribute = (attribute, cb) => {
window.setEvents = setEvents;
window.updateAttribute = (node, attribute, cb) => {
const value = node.getAttribute(attribute);
node.setAttribute(attribute, cb(JSON.parse(value)));
};
// node.update({ animation: animations.stairs });
// updateAttribute('animation', () => animations.stairs);
// node.options = { animation: animations.stairs };
console.log('module window:', window);

fetch('https://unpkg.com/@slidy/element/package.json', {
mode: 'cors',
})
.then(async (res) => await res.json())
.then(({ version }) => {
title.innerText = `Slidy ${version} - Element`;
header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
getPhotos(node, utils.randomQ(1, 99), options.length)
.then((length) => length && setEvents());
});
// fetch('https://unpkg.com/@slidy/element/package.json', {
// mode: 'cors',
// })
// .then(async (res) => await res.json())
// .then(({ version }) => {
// title.innerText = `Slidy ${version} - Element`;
// header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
// getPhotos(page(), options.length)
// .then((length) => length && setEvents());
// });
</script>
</head>

Expand All @@ -113,35 +114,50 @@ <h3 id="header"></h3>
</header>

<main id="main" style="--gap: 2rem; --flow: row; --width: auto; --height: 375px">
<slidy-element id="node" tabindex="0" index="2" snap="center" loop="false">
<!-- <img src="https://picsum.photos/id/13/1280/800.jpg" />
<img src="https://picsum.photos/id/14/1280/800.jpg" />
<img src="https://picsum.photos/id/15/1280/800.jpg" />
<img src="https://picsum.photos/id/16/1280/800.jpg" />
<img src="https://picsum.photos/id/17/1280/800.jpg" /> -->
<slidy-element id="node" tabindex="0" index="4" snap="center">
</slidy-element>
<slidy-element id="thumbs" style="--width: 100px; --height: 100px; --gap: 1rem; --flow: row;">
<!-- <img width="1280" height="800" src="https://picsum.photos/id/13/1280/800.jpg" />
<img width="1280" height="800" src="https://picsum.photos/id/14/1280/800.jpg" />
<img width="1280" height="800" src="https://picsum.photos/id/15/1280/800.jpg" />
<img width="1280" height="800" src="https://picsum.photos/id/16/1280/800.jpg" />
<img width="1280" height="800" src="https://picsum.photos/id/17/1280/800.jpg" /> -->
<slidy-element id="thumbs" index="4" style="--width: 100px; --height: 100px; --gap: 1rem; --flow: row;">
</slidy-element>

</main>
<script>
const element = document.querySelector('#node');
console.log('script window:', window);
element.options = { index: 4, animation: SlidyAnimation.stairs };
fetch('https://unpkg.com/@slidy/element/package.json', {
mode: 'cors',
})
.then(async (res) => await res.json())
.then(({ version }) => {
title.innerText = `Slidy ${version} - Element`;
header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
getPhotos(page(), options.length)
.then((length) => length && setEvents());
});
// element.options = { snap: 'center', animation: SlidyAnimation.stairs, easing: SlidyEasing.back };
// animation.value = 'stairs';
// easing.value = 'back';
element.setAttribute('easing', SlidyEasing.back.toString());
element.setAttribute('animation', SlidyAnimation.stairs.toString());
</script>

<footer>
<nav>
<button id="prev" onclick="updateAttribute('index', (val) => val-1)">←</button>
<button id="reload" onclick="getPhotos(node, utils.randomQ(1, 99), options.length)">
<button id="prev" onclick="updateAttribute(node,'index', (val) => val-1)">←</button>
<button id="reload" onclick="getPhotos(page(), options.length);">
<i class="icon icon-refresh"></i>
</button>
<button id="next" onclick="updateAttribute('index', (val) => val+1)">→</button>
<button id="next" onclick="updateAttribute(node,'index', (val) => val+1)">→</button>
</nav>

<nav id="dots"></nav>

<nav id="buttons">
<button id="loop" onclick="updateAttribute('loop', (val) => val = !val)">
<button id="loop" onclick="updateAttribute(node,'loop', (val) => val = !val)">
loop
</button>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion packages/element/public/index.js
View file

Large diffs are not rendered by default.

88 changes: 0 additions & 88 deletions packages/element/src/component.ts
View file

This file was deleted.

3 changes: 1 addition & 2 deletions packages/element/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export { default as slidy } from './slidy';
export { options } from './options'
export type { Child, Delta, Options, Parent, UniqEvent } from './types';
export type { Options, SlidyInstance } from './types';
29 changes: 0 additions & 29 deletions packages/element/src/options.ts
View file

This file was deleted.

0 comments on commit 81d3139

Please sign in to comment.