refactor: events

dnldsht · Sep 9, 2023 · f0402cc · f0402cc
1 parent aaeaafe
commit f0402cc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/packages/lib/README.md b/packages/lib/README.md
@@ -23,17 +23,22 @@ export default {
 ```
 
 ### Props
-| Property          | Type             | Default  | Description                                                        |
-|-------------------|------------------|----------|--------------------------------------------------------------------|
-| `stories`         | [String/Object]  | required | An array of image urls or array of story objects (more info below) |
-| `interval`        | Number           | 2000     | Story duration in milliseconds                                     |
-| `isPaused`        | Boolean          | false    | Toggle the playing state                                           |
-| `loop`            | Boolean          | false    | Loop through stories                                               |
-| `currentIndex`    | Number           | 0        | Set the current story index                                        |
-| **Events**      |                    |          |                                                                    |
-| `storyStart`    | Function(Number)   | -        | Callback when a story starts                                       |
-| `storyEnd`      | Function(Number)   | -        | Callback when a story ends                                         |
-| `allStoriesEnd` | Function()         | -        | Callback when all stories in the array have ended                  |
+| Property              | Type                  | Default  | Description                                                        |
+|-----------------------|-----------------------|----------|--------------------------------------------------------------------|
+| `stories`             | Array<String\|Object> | required | An array of image urls or array of story objects (more info below) |
+| `interval`            | Number                | 2000     | Story duration in milliseconds                                     |
+| `isPaused`            | Boolean               | false    | Toggle the playing state                                           |
+| `loop`                | Boolean               | false    | Loop through stories                                               |
+| `currentIndex`        | Number                | 0        | Set the current story index                                        |
+| **Events**            |                       |          |                                                                    |
+| `storyStart`          | Function(index)       | -        | Callback when a story starts                                       |
+| `storyEnd`            | Function(index)       | -        | Callback when a story ends                                         |
+| `allStoriesEnd`       | Function()            | -        | Callback when all stories have ended (not emitted if loop=true)    |
+| `seeMore`             | Function(story)       | -        | Callback when user have pressed See more                           |
+| `prev`                | Function()            | -        | Callback when user press prev                                      |
+| `next`                | Function()            | -        | Callback when user press next                                      |
+| `update:currentIndex` | Function(index)       | -        |                                                                    |
+| `update:isPaused`     | Function(paused)      | -        |                                                                    |
 
 ### Story Object
 | Property   | Description                                                          |

diff --git a/packages/lib/src/components/Stories.ts b/packages/lib/src/components/Stories.ts
@@ -35,23 +35,15 @@ export default defineComponent({
       required: false,
     }
   },
-  emits: ['storyStart', 'storyEnd', 'allStoriesEnd', 'update:currentIndex', 'update:isPaused', 'seeMore'],
+  emits: ['storyStart', 'storyEnd', 'allStoriesEnd', 'update:currentIndex', 'update:isPaused', 'seeMore', 'next', 'prev'],
   watch: {
     currentIndex(val) {
       this.index = val;
     },
     index: {
       immediate: true,
-      handler(current, prev) {
+      handler(current) {
         this.$emit('update:currentIndex', current)
-        if(prev !== undefined) {
-          this.$emit('storyEnd', prev)
-          if(prev === this.stories.length - 1 && current === 0) {
-            this.$emit('allStoriesEnd')
-            if(this.loop) this.index = 0
-
-          }
-        }
         this.$emit('storyStart', current)
       },
     },
@@ -91,18 +83,18 @@ export default defineComponent({
   },
 
   methods: {
-    nextSlide() {
+    nextSlide(emit = true) {
+      emit && this.$emit('next')
       if (this.index < this.stories.length - 1) {
         this.index++;
       } else if (this.loop) {
         this.index = 0;
       }
     },
     previousSlide() {
+      this.$emit('prev')
       if (this.index > 0)
         this.index--;
-      // else if (this.loop)
-      //   this.index = this.stories.length - 1;
     },
     togglePause() {
       this.paused = !this.paused
@@ -118,7 +110,13 @@ export default defineComponent({
         fadeIn(this.$refs.header as HTMLElement)
     },
     storyEnd(index: number) {
-      this.nextSlide()
+      this.$emit('storyEnd', index)
+      this.nextSlide(false)
+
+      if(index === this.stories.length - 1) {
+        if(this.loop) this.index = 0
+        else this.$emit('allStoriesEnd')
+      }
     },
   },