Add playground

lucafalasco · Apr 7, 2021 · 0a44e37 · 0a44e37
1 parent eef2fbb
commit 0a44e37
Show file tree

Hide file tree

Showing 28 changed files with 157 additions and 614 deletions.
diff --git a/README.md b/README.md
@@ -33,41 +33,24 @@ Call the constructor passing a DOM element and a configuration object as paramet
 
 `unbind()` to remove the listener on the element.
 
-Check out the following code:
-
 ```js
 import ScrollSnap from 'scroll-snap'
 
 const snapConfig = {
-  /**
-   * snap-destination for x and y axes
-   * should be a valid css value expressed as px|%|vw|vh
-   */
+  // snap-destination for x axis, should be a valid css value expressed as px|%|vw|vh
   snapDestinationX: '0%',
+  // snap-destination for y axis, should be a valid css value expressed as px|%|vw|vh
   snapDestinationY: '90%',
-  /**
-   * time in ms after which scrolling is considered finished
-   * [default: 100]
-   */
+  // time in ms after which scrolling is considered finished [default: 100]
   timeout: 100,
-  /**
-   * duration in ms for the smooth snap
-   * [default: 300]
-   */
+  // duration in ms for the smooth snap [default: 300]
   duration: 300,
-  /**
-   * threshold to reach before scrolling to next/prev element, expressed as a percentage in the range [0, 1]
-   * [default: 0.2]
-   */
+  // threshold to reach before scrolling to next/prev element, expressed as a percentage in the range [0, 1] [default: 0.2]
   threshold: 0.2,
-  /**
-   * when true, the scroll container is not allowed to "pass over" the other snap positions
-   * [default: false]
-   */
+  // when true, the scroll container is not allowed to "pass over" the other snap positions [default: false]
   snapStop: false,
   /**
-   * custom easing function
-   * [default: easeInOutQuad]
+   * custom easing function [default: easeInOutQuad]
    * for reference: https://gist.github.com/gre/1650294
    * @param t normalized time typically in the range [0, 1]
    */
@@ -99,7 +82,7 @@ cd scroll-snap
 yarn install
 ```
 
-Start the test app from `docs/`:
+Start the testing environment from `playground/`:
 
 ```
 yarn start

diff --git a/docs/dist/assets/arrow-down.svg → docs/assets/arrow-down.svg b/docs/dist/assets/arrow-down.svg → docs/assets/arrow-down.svg
diff --git a/docs/dist/assets/github.svg → docs/assets/github.svg b/docs/dist/assets/github.svg → docs/assets/github.svg
diff --git a/docs/dist/assets/logo.svg → docs/assets/logo.svg b/docs/dist/assets/logo.svg → docs/assets/logo.svg
diff --git a/docs/dist/assets/scroll.svg → docs/assets/scroll.svg b/docs/dist/assets/scroll.svg → docs/assets/scroll.svg
diff --git a/docs/dist/assets/snippet-constructor-mobile.png b/docs/dist/assets/snippet-constructor-mobile.png
diff --git a/docs/dist/assets/snippet-constructor.png b/docs/dist/assets/snippet-constructor.png
diff --git a/docs/dist/assets/snippet-unbind-mobile.png b/docs/dist/assets/snippet-unbind-mobile.png
diff --git a/docs/dist/assets/snippet-unbind.png b/docs/dist/assets/snippet-unbind.png
diff --git a/docs/dist/scroll-snap.js b/docs/dist/scroll-snap.js
diff --git a/docs/dist/index.html → docs/index.html b/docs/dist/index.html → docs/index.html
@@ -2,15 +2,15 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>scroll-snap - Customizable page snapping</title>
+    <title>scroll-snap - customizable page snapping</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
     <div id="container">
       <div class="page first-page">
         <div class="logo"></div>
-        <div class="hint" style="position: absolute; bottom: 10%">
+        <div class="hint" style="position: absolute; bottom: 10%;">
           <div class="scroll"></div>
         </div>
       </div>
@@ -100,6 +100,6 @@ <h2><span class="highlight">Complete control</span> over the scroll behaviour</h
         </div>
       </div>
     </div>
-    <script src="scroll-snap.js"></script>
+    <script type="module" src="index.js"></script>
   </body>
 </html>
diff --git a/docs/src/index.ts → docs/index.js b/docs/src/index.ts → docs/index.js
@@ -1,4 +1,4 @@
-import ScrollSnap from '../../src/index'
+import ScrollSnap from 'https://unpkg.com/scroll-snap/dist/esm/index.js'
 
 function callback() {
   console.log('snap')
@@ -8,7 +8,7 @@ const baseConfig = {
   timeout: 100,
   duration: 300,
   threshold: 0.2,
-  easing: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+  easing: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
 }
 
 const containerVertical = document.getElementById('container')
@@ -22,12 +22,3 @@ const snapHorizontal = new ScrollSnap(containerHorizontal, {
   snapDestinationX: '100%',
   ...baseConfig,
 }).bind(callback)
-
-;(window as any).unbind = () => {
-  snapVertical.unbind()
-  snapHorizontal.unbind()
-}
-;(window as any).bind = () => {
-  snapVertical.bind(callback)
-  snapHorizontal.bind(callback)
-}
diff --git a/docs/src/assets/arrow-down.svg b/docs/src/assets/arrow-down.svg
diff --git a/docs/src/assets/github.svg b/docs/src/assets/github.svg
diff --git a/docs/src/assets/logo.svg b/docs/src/assets/logo.svg
diff --git a/docs/src/assets/scroll.svg b/docs/src/assets/scroll.svg
diff --git a/docs/src/assets/snippet-constructor-mobile.png b/docs/src/assets/snippet-constructor-mobile.png
diff --git a/docs/src/assets/snippet-constructor.png b/docs/src/assets/snippet-constructor.png
diff --git a/docs/src/assets/snippet-unbind-mobile.png b/docs/src/assets/snippet-unbind-mobile.png
diff --git a/docs/src/assets/snippet-unbind.png b/docs/src/assets/snippet-unbind.png