@slidy/core - remove duration from to()

Valexr · Jul 7, 2022 · f4b0226 · f4b0226
1 parent f1a0580
commit f4b0226
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 30 deletions.
diff --git a/packages/core/README.MD b/packages/core/README.MD
@@ -216,7 +216,7 @@ If you need reversed flow use css rules on target node, like: `flex-flow: row-re
 
 | Name        | Arguments          | Description |
 | :---------- | :----------------- | :---------- |
-| `to()`      | `(index,duration)` | Scroll to `index` with `duration` |
+| `to()`      | `(index)`          | Scroll to `index` |
 | `update()`  | `({option:value})` | Update any property in options |
 | `destroy()` | `()`               | Remove event listners, observers & defaulted props on `slidy()` instance |
 

diff --git a/packages/core/dev/env.js b/packages/core/dev/env.js
@@ -10,18 +10,7 @@ export function setEvents() {
                         if (options[button.id]) {
                             button.classList.add('active');
                         } else if (!isNaN(button.id)) {
-                            let duration = 0;
-                            button.onpointerdown = (e) => {
-                                // e.preventDefault();
-                                duration = e.timeStamp;
-                                e.target.onpointermove = null;
-                                e.target.onpointermove = (e) => {
-                                    e.target.onpointerup = null;
-                                };
-                                e.target.onpointerup = (e) => {
-                                    slidy.to(+e.target.id, e.timeStamp - duration);
-                                };
-                            };
+                            button.onclick = (e) => slidy.to(+e.target.id);
                         }
                     }
 
@@ -48,18 +37,18 @@ export function setEvents() {
                     }
 
                     const eases = [
-                            'linear',
-                            'sine',
-                            'quad',
-                            'cubic',
-                            'quart',
-                            'quint',
-                            'expo',
-                            'circ',
-                            'back',
-                            'elastic',
-                            'bounce',
-                        ],
+                        'linear',
+                        'sine',
+                        'quad',
+                        'cubic',
+                        'quart',
+                        'quint',
+                        'expo',
+                        'circ',
+                        'back',
+                        'elastic',
+                        'bounce',
+                    ],
                         animates = [
                             'blur',
                             'deck',

diff --git a/packages/core/dev/index.html b/packages/core/dev/index.html
@@ -256,7 +256,7 @@ <h3>
             <figure>
                 <img alt="animation Flip" src="assets/flip.gif" width="100%" />
                 <figcaption style="color: var(--surface-4);">
-                    <pre><code>{ snap: deck, animation: flip }</code></pre>
+                    <pre><code>{ snap: 'deck', animation: flip }</code></pre>
                 </figcaption>
             </figure>
 
@@ -305,6 +305,7 @@ <h2>Thanks 🎉</h2>
 
             <p>MIT © <a href="https://github.com/Valexr">Valexr</a></p>
         </article>
+        <br>
     </body>
 
 </html>
diff --git a/packages/core/src/slidy.ts b/packages/core/src/slidy.ts
@@ -116,13 +116,13 @@ export function slidy(
         }
     }
 
-    function scroll(index: number, amplitude: number, _duration = 0): void {
+    function scroll(index: number, amplitude: number): void {
         const time = performance.now();
         const snaped = options.snap || options.loop || $().edges;
         const target = snaped
             ? $().distance(index)
             : clamp($().start, POSITION + amplitude, $().end);
-        const duration = _duration || DURATION * clamp(1, Math.abs(index - hix), 2);
+        const duration = DURATION * clamp(1, Math.abs(index - hix), 2);
 
         amplitude = target - POSITION;
 
@@ -145,13 +145,13 @@ export function slidy(
         });
     }
 
-    function to(index = 0, duration = DURATION): void {
+    function to(index = 0): void {
         clear();
 
         index = indexing(node, options, index);
         const pos = $().distance(index) - POSITION;
 
-        scroll(index, pos, duration);
+        scroll(index, pos);
     }
 
     function onDown(e: UniqEvent): void {