Skip to content

Commit

Permalink
@slidy/element - add core methods & cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Valexr
Valexr committed Aug 29, 2022
1 parent c075f1b commit c2480c9
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 182 deletions.
6 changes: 3 additions & 3 deletions packages/element/esbuild.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const esbuildBase = {
legalComments: 'none',
plugins: [eslintPlugin()],
entryPoints: DEV
? ['@slidy/element', '@slidy/core', '@slidy/media', '@slidy/easing', '@slidy/animation']
? ['@slidy/element', '@slidy/easing', '@slidy/animation']
: ['src/index.ts'],
outdir: DEV ? 'public/build' : '',
sourcemap: DEV ? 'inline' : false,
Expand Down Expand Up @@ -46,7 +46,7 @@ const builds = {
};

if (DEV) {
build(esbuildBase).then((bundle) => {
prepare('public/build').then(() => build(esbuildBase).then((bundle) => {
derver({
...derverConfig,
onwatch: async (lr, item) => {
Expand All @@ -56,7 +56,7 @@ if (DEV) {
}
},
});
});
}));
} else {
prepare().then(() => {
for (const key in builds) {
Expand Down
2 changes: 1 addition & 1 deletion packages/element/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"browser": "dist/index.js",
"types": "dist/types.d.ts",
"types": "dist/index.d.ts",
"type": "module",
"files": [
"dist/*"
Expand Down
6 changes: 0 additions & 6 deletions packages/element/public/api.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import { slidy as slidyCore } from './build/core.js';

export async function getPhotos(node, page, limit) {
// slidy?.destroy();
// slidyT?.destroy();
node.innerHTML = `<span style="display: grid; place-items: center">Loading... 🚀</span>`;
//page: 38 - END, 61 - START, 28
try {
Expand All @@ -20,8 +16,6 @@ export async function getPhotos(node, page, limit) {
(child) => child && child.isConnected
);
if (mounted) {
// slidy = slidyCore(node, options);
slidyT = slidyCore(thumbs, { index: options.index });
return node.children.length;
}
}
Expand Down
123 changes: 14 additions & 109 deletions packages/element/public/dev.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ section#s1 {
max-height: 300px;
}

section#s1 > * {
section#s1>* {
flex: 1 0 50%;
/* width: 50%; */
}
Expand All @@ -54,9 +54,9 @@ section#s4 {
display: flex;
}

section#s2 > *,
section#s3 > *,
section#s4 > * {
section#s2>*,
section#s3>*,
section#s4>* {
flex: 1 0 30%;
}

Expand Down Expand Up @@ -143,7 +143,7 @@ form {
flex-wrap: wrap;
}

form > * {
form>* {
display: flex;
}

Expand Down Expand Up @@ -258,16 +258,6 @@ footer {
cursor: inherit;
}

.active:not(li, :disabled) {
/* border-color: var(--accent) !important; */
}

main {
/* height: var(--height, 375px); */
/* margin: var(--gap, 1rem) auto; */
/* overflow: hidden; */
}

section {
height: 100%;
width: 100%;
Expand All @@ -283,121 +273,36 @@ section {
justify-content: center;
}

#node,
nav#thumbs {
position: relative;
list-style: none;
margin: auto;
padding: var(--gap) 0;
display: flex;
flex-flow: var(--flow);
gap: var(--gap);
width: 100%;
height: var(--height, 375px);
-webkit-tap-highlight-color: transparent;
#node {
padding: var(--gap, 1rem) 0;
}

#node.grid {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(4, 50%);
grid-template-rows: repeat(4, 100%);
}

#node > *,
nav#thumbs button {
flex: 1 0 var(--width, auto);
width: var(--width, auto);
min-height: 100%;
height: 100%;
#node>*,
#thumbs>* {
max-width: 85%;
max-height: 100%;
box-sizing: border-box;
position: relative;
margin: auto;
overflow: hidden;
box-shadow: var(--shadow-3);
background: var(--surface-1);
border-radius: var(--radius-3);
}

#node > * {
/* max-height: calc(100% - (var(--gap) * 2)); */
}

nav#thumbs {
gap: 1rem;
height: auto;
flex-flow: row;
#thumbs {
max-width: fit-content;
padding: 0;
margin: var(--size-fluid-2) auto;
}

nav#thumbs button {
flex: 1 0 100px;
width: 100px;
height: 100px;
#thumbs button {
box-shadow: none;
margin: 0;
background-size: cover;
background-blend-mode: luminosity;
opacity: 0.25;
}

nav#thumbs button:hover,
nav#thumbs button.active {
#thumbs button:hover,
#thumbs button.active {
opacity: 1;
background-blend-mode: normal;
}

#node > *.active {
/* box-shadow: var(--shadow-3); */
/* --shadow: var(--accent); */
}

#node > *:before {
content: attr(id);
position: absolute;
z-index: 1;
padding: 0.5rem 1rem;
bottom: 0;
/* will-change: transform; */
}

#node > * img {
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

/* iOS */
@supports (-webkit-touch-callout: none) {
#node li img {
/* width: auto; */
/* will-change: transform; */
/* pointer-events: auto; */
}

#node li:before {
/* will-change: transform; */
}
}

/* MacOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#node li img {
/* width: auto; */
/* will-change: transform; */
}

#node li:before {
/* will-change: transform; */
}
}

/* ICONS */
.icon::after,
.icon::before {
Expand Down Expand Up @@ -452,4 +357,4 @@ nav#thumbs button.active {
-webkit-mask-image: url(assets/gh.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
}
64 changes: 23 additions & 41 deletions packages/element/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,19 @@
<link rel="icon" type="image/png" href="assets/favicon.png" />
<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="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/animation/dist/index.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/@slidy/animation/dist/index.js"></script>

<title id="title"></title>

<script type="module">
import { slidy as slidyCore } from './build/core.js';
import * as easings from './build/easing.js';
import * as animations from './build/animation.js';
import * as utils from './utils.js';
import { getPhotos } from './api.js';
import { setEvents } from './env.js';
// import './build/element.js';
import './build/element.js';

window.utils = utils;
window.easings = easings;
Expand All @@ -84,16 +83,16 @@
easing: easings.lenear,
};
window.position = 0;
window.slidy = null;
window.slidyT = null;
window.getPhotos = getPhotos;
window.updateAttribute = (attribute, cb) => {
const value = node.getAttribute(attribute);
node.setAttribute(attribute, cb(JSON.parse(value)));
};
// node.update({ animation: animations.stairs });
// updateAttribute('animation', () => animations.stairs);
console.log('module window:', window);

fetch('https://unpkg.com/@slidy/core/package.json', {
fetch('https://unpkg.com/@slidy/element/package.json', {
mode: 'cors',
})
.then(async (res) => await res.json())
Expand All @@ -114,19 +113,20 @@ <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" gravity="">
<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>
<nav id="thumbs"></nav>
<slidy-element id="thumbs" style="--width: 100px; --height: 100px; --gap: 1rem; --flow: row;">
</slidy-element>
</main>
<script>
const element = document.querySelector('slidy-element');
console.log('script window:', window, Slidy, element);
// element.options = { index: 4, animation: Slidy.stairs };
const element = document.querySelector('#node');
console.log('script window:', window);
element.options = { index: 4, animation: SlidyAnimation.stairs };
</script>

<footer>
Expand All @@ -149,42 +149,42 @@ <h3 id="header"></h3>
<form>
<fieldset>
<label title="axis">axis
<select id="axis" name="axis" onchange="node.slidy.update({ axis: this.value })"></select>
<select id="axis" name="axis" onchange="node.update({ axis: this.value })"></select>
</label>
<label title="snap">snap
<select id="snap" name="snap" onchange="node.slidy.update({ snap: this.value })"></select>
<select id="snap" name="snap" onchange="node.update({ snap: this.value })"></select>
</label>
<label title="animation">animation
<select id="animation" name="animation"
onchange="node.slidy.update({ animation: animations[this.value] })"></select>
onchange="node.update({ animation: animations[this.value] })"></select>
</label>
<label title="easing">easing
<select id="easing" name="easing"
onchange="node.slidy.update({ easing: easings[this.value] })"></select>
onchange="node.update({ easing: easings[this.value] })"></select>
</label>
</fieldset>
</form>

<form>
<fieldset>
<label title="clamp">clamp
<input id="clamp" onchange="node.slidy.update({ clamp: +this.value })" name="clamp"
type="number" size="1" step="1" min="0" max="3" />
<input id="clamp" onchange="node.update({ clamp: +this.value })" name="clamp" type="number"
size="1" step="1" min="0" max="3" />
</label>
<label title="sensity">sensity
<input id="sensity" onchange="node.slidy.update({ sensity: +this.value })" name="sensity"
<input id="sensity" onchange="node.update({ sensity: +this.value })" name="sensity"
type="number" size="2" step="1" min="0" max="100" />
</label>
<label title="indent">indent
<input id="indent" onchange="node.slidy.update({ indent: +this.value })" name="indent"
type="number" size="1" step="0.1" min="-2" max="2" />
<input id="indent" onchange="node.update({ indent: +this.value })" name="indent" type="number"
size="1" step="0.1" min="-2" max="2" />
</label>
<label title="duration">duration
<input id="duration" onchange="node.slidy.update({ duration: +this.value })" name="duration"
<input id="duration" onchange="node.update({ duration: +this.value })" name="duration"
type="number" size="2" step="1" min="100" max="1000" />
</label>
<label title="gravity">gravity
<input id="gravity" onchange="node.slidy.update({ gravity: +this.value })" name="gravity"
<input id="gravity" onchange="node.update({ gravity: +this.value })" name="gravity"
type="number" size="1" step="0.1" min="0.1" max="2" />
</label>
</fieldset>
Expand Down Expand Up @@ -217,24 +217,6 @@ <h3 id="header"></h3>
</form>
</footer>

<!-- <section id="s1">
<section id="s2">
<img src="https://picsum.photos/id/13/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/14/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/15/1280/800.jpg" alt="10" />
</section>
<section id="s3">
<img src="https://picsum.photos/id/16/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/17/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/18/1280/800.jpg" alt="10" />
</section>
<section id="s4">
<img src="https://picsum.photos/id/19/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/20/1280/800.jpg" alt="10" />
<img src="https://picsum.photos/id/21/1280/800.jpg" alt="10" />
</section>
</section> -->

<article>
<h1>@Slidy</h1>
<h3>
Expand Down
Loading

0 comments on commit c2480c9

Please sign in to comment.