From bc9bd5217374abf83e3e69d790d1a546d6df5565 Mon Sep 17 00:00:00 2001
From: varun257 <varun257@gmail.com>
Date: Fri, 1 Mar 2019 14:07:57 +0530
Subject: [PATCH] feat(oui-slideshow): add on click event for navigation

add on-click event for slideshow navigation
add test case and example

resolves MBE-283
---
 packages/oui-slideshow/README.md              | 36 +++++++++++++++----
 packages/oui-slideshow/src/index.spec.js      | 16 +++++++++
 .../oui-slideshow/src/slideshow.component.js  |  2 +-
 .../oui-slideshow/src/slideshow.controller.js |  2 ++
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/oui-slideshow/README.md b/packages/oui-slideshow/README.md
index 9a0a5c17..9dbd843c 100644
--- a/packages/oui-slideshow/README.md
+++ b/packages/oui-slideshow/README.md
@@ -78,16 +78,40 @@
 </div>
 ```
 
+### Panel change event
+**Note**: If you want to access the parameters inside `on-panel-change` callback, you need to use `direction` and `index` variables as below.
+
+* `direction` returns string of `prev` or `next`
+* `index` returns index of current slide
+
+```html:preview
+<div class="oui-doc-preview-only-keep-children" style="padding:50px 35px;background-color:rgba(0,0,0,0.3)">
+<oui-slideshow on-panel-change="$ctrl.onPanelChange(direction, index)">
+    <oui-slideshow-panel heading="New feature"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg">
+        Display your infrastructure as a list
+    </oui-slideshow-panel>
+    <oui-slideshow-panel heading="Introducing Ad-Sync"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg"
+        href="http://www.ovh.com/"
+        label="Discover">
+        Designed to help you synchronize your local Active Directory with your OVH Active Directory.
+    </oui-slideshow-panel>
+</oui-slideshow>
+</div>
+```
+
 ## API
 
 ### oui-slideshow
 
-| Attribute     | Type      | Binding   | One-time Binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `theme`       | string    | @?        | yes               | n/a               | `default` | add specific theme to component
-| `loading`     | boolean   | <?        | no                | `true`, `false`   | `false`   | display loader flag
-| `loop`        | boolean   | <?        | no                | `true`, `false`   | `false`   | whether the component should cycle continuously
-| `on-dismiss`  | function  | &         | no                | n/a               | n/a       | dismiss callback
+| Attribute         | Type      | Binding   | One-time Binding  | Values                  | Default   | Description
+| ----              | ----      | ----      | ----              | ----                    | ----      | ----
+| `theme`           | string    | @?        | yes               | n/a                     | `default` | add specific theme to component
+| `loading`         | boolean   | <?        | no                | `true`, `false`         | `false`   | display loader flag
+| `loop`            | boolean   | <?        | no                | `true`, `false`         | `false`   | whether the component should cycle continuously
+| `on-dismiss`      | function  | &         | no                | n/a                     | n/a       | dismiss callback
+| `on-panel-change` | function  | &         | no                | direction, index        | n/a       | handler triggered when on click of next slide
 
 ### oui-slideshow-panel
 
diff --git a/packages/oui-slideshow/src/index.spec.js b/packages/oui-slideshow/src/index.spec.js
index 308549d7..db867489 100644
--- a/packages/oui-slideshow/src/index.spec.js
+++ b/packages/oui-slideshow/src/index.spec.js
@@ -142,6 +142,22 @@ describe("ouiSlideshow", () => {
                 $timeout.flush();
                 expect($firstPanel.hasClass("active")).toBe(false);
             });
+
+            it("should call function of event with attributes", () => {
+                const onPanelChangeSpy = jasmine.createSpy("onPanelChangeSpy");
+                const element = TestUtils.compileTemplate(`
+                    <oui-slideshow on-panel-change="$ctrl.onPanelChangeSpy(direction, index)">
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                    </oui-slideshow>`, {
+                        onPanelChangeSpy
+                    });
+                const direction = "next";
+                const index = 1;
+                $timeout.flush();
+                getNextButton(element).triggerHandler("click");
+                expect(onPanelChangeSpy).toHaveBeenCalledWith(direction, index);
+            });
         });
     });
 });
diff --git a/packages/oui-slideshow/src/slideshow.component.js b/packages/oui-slideshow/src/slideshow.component.js
index 401d3367..53303aed 100644
--- a/packages/oui-slideshow/src/slideshow.component.js
+++ b/packages/oui-slideshow/src/slideshow.component.js
@@ -9,6 +9,6 @@ export default {
         onDismiss: "&",
         loading: "<?",
         loop: "<?",
-        theme: "@?"
+        onPanelChange: "&"
     }
 };
diff --git a/packages/oui-slideshow/src/slideshow.controller.js b/packages/oui-slideshow/src/slideshow.controller.js
index ab99f162..9fd4b9ed 100644
--- a/packages/oui-slideshow/src/slideshow.controller.js
+++ b/packages/oui-slideshow/src/slideshow.controller.js
@@ -76,12 +76,14 @@ export default class {
     next () {
         if (!this._isSliding) {
             this._slide(Direction.NEXT);
+            this.onPanelChange({ direction: Direction.NEXT, index: this.currentIndex });
         }
     }
 
     prev () {
         if (!this._isSliding) {
             this._slide(Direction.PREV);
+            this.onPanelChange({ direction: Direction.PREV, index: this.currentIndex });
         }
     }