Initial commit

.gitignore

@@ -0,0 +1,5 @@
+/node_modules/
+/public/build/
+
+.DS_Store
+notes.txt

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2023 Walter Staeblein
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,60 @@
-# kineticsroll
-Svelte action that transform a container into a momentum scroller
+# Svelte Kinetic Scroll
+
+
+Simple Svelte action to transform a container into a momentum scroller, much like cellphones touch screens work. Drop the action and start dragging around with your mouse.
+
+There are a couple of settings that can optionally be passed into the action as an object with any of the following properties:
+
+indicator - ID of an element that should be within the container and be absolute positioned. This element will serve as an indicator of the scroll and is to be styled by you. Default: empty (no indicator will appear)
+useWheel - True if you wish to have some basic scroll wheel support. Default: true.
+
+
+```html
+<script>
+    import countries from './countries.js';
+    import { kineticscroll } from './kineticscroll.js';
+
+    let configs = {
+        indicator: ''
+    }
+</script>
+
+<section>
+    <div class="container">
+        <div id="indic"></div>
+        <ul use:kineticscroll={configs}>
+            {#each countries as country}
+                <li><img src="./flags/{country.code.toLowerCase()}.png" loading="lazy" alt="{country.name}" /><span>{country.name}</span></li>
+            {/each}
+        </ul>        
+    </div>
+</section>
+
+<style>
+    #indic {
+        position: absolute;
+        left: 1px;
+        width: 6px;
+        height: 20px;
+        background-color: #ff3e00;
+        z-index: 1;
+    }
+</style>
+```
+This action expects that a container has a fixed height and a direct child that is longer than this height. If you intend to use an indicator, the container should be absolute or relative positioned. If it isn't the action will change its position to relative.
+
+## Instalation and Usage
+
+**Only tested on Svelte 3**
+
+This is so simple that it doesn't need a NPM package. Just copy the file ``/src/kineticscroll.js`` to your project's appropriate folder and import it where needed. All other files are just there for the sake of the example.
+
+
+## Example
+
+Download this code, extract it and run:
+
+```
+npm i
+npm run dev
+```