Release 0.6.0

PR Release 0.6.0

README.md

@@ -1,35 +1,45 @@
-*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
+## Svelte SlideIt
 
----
+![npm-publish](https://github.com/zgunz42/svelte-slideit/workflows/npm-publish/badge.svg) [![svelte-v2](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
 
-# component-template
+### Hello SlideIt
 
-A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
+SlideIt is a slider and carousel build on top of [Glidejs](https://glidejs.com/). I build this because other
+svelte component like *[svelte-carousel](https://github.com/beyonk-adventures/svelte-carousel/blob/master/README.md)* 
+did not support responsive because can't handle it [Siema](https://github.com/pawelgrzybek/siema). Other reason i need
+carousel API like owlcarousel but use vanilla js for less depedency.
 
-```bash
-npx degit sveltejs/component-template my-new-component
-cd my-new-component
-npm install # or yarn
-```
-
-Your component's source code lives in `src/Component.svelte`.
+Core feature:
 
-You can create a package that exports multiple components by adding them to the `src` directory and editing `src/index.js` to reexport them as named exports.
+- [x] Responsive config options
+- [x] Port all glidejs event to svelte custom event
+- [x] Many slot that can you fill with "any html tag"
+- [x] Glidejs css imported in style tag thank to **svelte-preprocess**
 
-TODO
+## Event Name
 
-* [ ] some firm opinions about the best way to test components
-* [ ] update `degit` so that it automates some of the setup work
+All event name from Glidejs has been rename `a.b` into `aB`, so if want to listen
+into some event like this.
 
+```sveltehtml
+<SlideIt on:montBefore={handler} />
+``` 
+It will listen into `mount.before` of Glidejs event name
 
-## Setting up
+## Render Carousel Item
 
-* Run `npm init` (or `yarn init`)
-* Replace this README with your own
+```sveltehtml
+<SlideIt items={[4,5,6]}>
+    <div slot="item" let:item>
+        <p>{item}</p>
+    </div>
+</SlideIt>
+```
 
+## Render Control and Bullet
 
-## Consuming components
+_TODO_
 
-Your package.json has a `"svelte"` field pointing to `src/index.js`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
+## Same Config as Glide js
 
-For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`dist/index.mjs`) and a UMD script (`dist/index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.
+See glidejs documentation https://glidejs.com/docs/options/

demo/Demo.svelte

@@ -5,26 +5,33 @@
         alert('trigger with ' + JSON.stringify(detail))
     }
 </script>
-<style src="../node_modules/@glidejs/glide/dist/css/glide.theme.css"></style>
+<style></style>
 <SlideIt
         options={{
                 startAt: 0,
                 perView: 3
                 }}
         items={[1,2,3,4,5,6,7]}>
     <div slot="item" let:item>
-        <p>{item}</p>
+        <div class="glide__slide">{item}</div>
     </div>
 </SlideIt>
 
 <SlideIt on:run={warn} items={[4,5,6]} bullet={true}>
-    <div slot="item" let:item>
-        <p>{item}</p>
+    <div slot="item" let:item let:index>
+        <div class="glide__slide">{item} : {index}</div>
     </div>
 </SlideIt>
 
 <SlideIt on:mountBefore={warn} items={[4,5,6,7,8]} bullet={true} control={true}>
     <div slot="item" let:item>
-        <p>{item}</p>
+        <div class="glide__slide">{item}</div>
+    </div>
+    <div slot="control" let:glide>
+        <button on:click={() => glide.go('>')}>Back</button>
+        <button on:click={() => glide.go('<')}>Forward</button>
+    </div>
+    <div slot="bullet" let:prop={bullet}>
+        <button class:active={bullet.isActive} on:click={bullet.focus} class="slider__bullet glide__bullet"></button>
     </div>
 </SlideIt>

package.json

@@ -1,10 +1,17 @@
 {
   "name": "svelte-slideit",
+  "description": "Lightweight and simple slider or carousel with no dependencies for svelte",
+  "repository": "zgunz42/svelte-slideit",
+  "author": "adi gunawan <adi_gunawan@live.com> (https://adibite.xyz/)",
+  "bugs": {
+    "url": "https://github.com/zgunz42/svelte-slideit/issues"
+  },
+  "homepage": "https://github.com/zgunz42/svelte-slideit",
   "svelte": "src/index.js",
   "module": "dist/index.mjs",
   "main": "dist/index.js",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "NODE_ENV=development rollup -cw",

src/SlideIt.svelte

@@ -10,18 +10,25 @@
     export let options={};
     export let bullet=false;
     export let control=false;
+
+    let glide;
+    let controller;
+    let active;
+
     function initGlide(node, options) {
       const events = [
               'mount.before', 'run', 'mount.after', 'update', 'play', 'pause',
               'build.before', 'build.after', 'run.before', 'run.after',
               'run.offset', 'run.start', 'run.end', 'move', 'move.after',
               'resize', 'swipe.start', 'swipe.move', 'swipe.end', 'translate.jump',
       ];
-      const glide = new Glide(node, options);
+
+      glide = new Glide(node, options);
 
       // forward glide event
       events.forEach(function (event) {
           glide.on(event, function(args) {
+              glide = glide;  // reactive
               // Replace event name from a.b to aB or keep source
               dispatch(event.replace(/\.\w/, (v) => v[1].toUpperCase()), args)
           });
@@ -30,46 +37,48 @@
       glide.mount();
 
       return {
-          update(options) {
-              glide.update(options);
-              if (glide.disabled) {
-                glide.enable()
-              }
-          },
+          update: glide.update,
+          destroy: glide.disable
+      }
+    }
 
-          destroy() {
-              glide.disable()
-          }
+    function bulletIn(index, glide){
+      return {
+          focus: () => glide.go(`=${index}`),
+          isActive:  glide.index === index
       }
     }
 </script>
 <div use:initGlide={options} class="glide">
   <div class="glide__track" data-glide-el="track">
       <ul class="glide__slides">
-        {#each items as item}
+        {#each items as item, index}
             <li class="glide__slide">
-                <slot name="item" {item}>{JSON.stringify(item)}</slot>
+                <slot name="item" {item} {glide} {index}>{index}</slot>
             </li>
         {/each}
       </ul>
   </div>
-  {#if control}
-      <div class="glide__arrows" data-glide-el="controls">
-          <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
-          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
-          <button class="glide__arrow glide__arrow--left" data-glide-dir="<<">first</button>
-          <button class="glide__arrow glide__arrow--right" data-glide-dir=">>">last</button>
-      </div>
+  {#if control && glide}
+    <div class="glide__arrows" >
+        <slot name="control" {glide}>
+            <button on:click={() => glide.go('<')} class="glide__arrow glide__arrow--left" >prev</button>
+            <button on:click={() => glide.go('<')} class="glide__arrow glide__arrow--right">next</button>
+        </slot>
+    </div>
   {/if}
-  {#if bullet}
-      <div class="glide__bullets" data-glide-el="controls[nav]">
-        {#each items as item, index}
-            <span data-glide-dir="={index}">
-                <slot name="bullet">
-                    <button class="glide__bullet"></button>
-                </slot>
-            </span>
-        {/each}
-      </div>
+  {#if bullet && glide }
+    <div class="glide__bullets">
+      {#each items as item, index}
+          <slot name="bullet" prop={bulletIn(index, glide)}>
+              <button class:focus={bulletIn(index, glide).isActive}
+                      class="glide__bullet"
+                      on:click={() => bulletIn(index, glide).focus()}
+              >
+
+              </button>
+          </slot>
+      {/each}
+    </div>
   {/if}
 </div>