From 302d566a32f6f47ca12f2c100f401fdcf1f0896e Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Tue, 19 Apr 2016 14:34:01 -0500
Subject: [PATCH] feat(slides): added slide change events to slides and
 improved/fixed documentation

added slide change events to slides and improved/fixed documentation
---
 js/angular/directive/slides.js | 52 ++++++++++++++++++++++++++--------
 js/views/slidesView.js         | 25 ++++++++++++++++
 package.json                   |  8 +++++-
 test/html/slides.html          |  8 ++++++
 4 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/js/angular/directive/slides.js b/js/angular/directive/slides.js
index 5fecb952695..fa2e81d22a9 100644
--- a/js/angular/directive/slides.js
+++ b/js/angular/directive/slides.js
@@ -15,31 +15,59 @@
  *
  * @usage
  * ```html
- * <ion-slides  options="options" slider="data.slider">
- *   <ion-slide-page>
- *     <div class="box blue"><h1>BLUE</h1></div>
- *   </ion-slide-page>
- *   <ion-slide-page>
- *     <div class="box yellow"><h1>YELLOW</h1></div>
- *   </ion-slide-page>
- *   <ion-slide-page>
- *     <div class="box pink"><h1>PINK</h1></div>
- *   </ion-slide-page>
- * </ion-slides>
+ * <ion-content scroll="false">
+ *   <ion-slides  options="options" slider="data.slider">
+ *     <ion-slide-page>
+ *       <div class="box blue"><h1>BLUE</h1></div>
+ *     </ion-slide-page>
+ *     <ion-slide-page>
+ *       <div class="box yellow"><h1>YELLOW</h1></div>
+ *     </ion-slide-page>
+ *     <ion-slide-page>
+ *       <div class="box pink"><h1>PINK</h1></div>
+ *     </ion-slide-page>
+ *   </ion-slides>
+ * </ion-content>
  * ```
  *
  * ```js
  * $scope.options = {
  *   loop: false,
- *   effect: fade,
+ *   effect: 'fade',
  *   speed: 500,
  * }
  * $scope.data = {};
  * $scope.$watch('data.slider', function(nv, ov) {
  *   $scope.slider = $scope.data.slider;
  * })
+ *
+ * $scope.$on("$ionicSlides.slideChangeStart", function(event, data){
+ *   console.log('Slide change is beginning');
+ * });
+ *
+ * $scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
+ *   // note: the indexes are 0-based
+ *   $scope.activeIndex = data.activeIndex;
+ *   $scope.previousIndex = data.previousIndex;
+ * });
+ *
  * ```
  *
+ * ## Slide Events
+ *
+ * The slides component dispatches events when the active slide changes
+ *
+ * <table class="table">
+ *   <tr>
+ *     <td><code>$ionicSlides.slideChangeStart</code></td>
+ *     <td>This event is dispatched when a slide change begins</td>
+ *   </tr>
+ *   <tr>
+ *     <td><code>$ionicSlides.slideChangeEnd</code></td>
+ *     <td>This event is dispatched when a slide change completes</td>
+ *   </tr>
+ * </table>
+ *
  */
 IonicModule
 .directive('ionSlides', [
diff --git a/js/views/slidesView.js b/js/views/slidesView.js
index 9555948de3f..22ffbabbb8b 100644
--- a/js/views/slidesView.js
+++ b/js/views/slidesView.js
@@ -1811,6 +1811,11 @@
                 s.emit('onTransitionStart', s);
                 if (s.activeIndex !== s.previousIndex) {
                     s.emit('onSlideChangeStart', s);
+                    _scope.$emit("$ionicSlides.slideChangeStart", {
+                      slider: s,
+                      activeIndex: s.getSlideDataIndex(s.activeIndex),
+                      previousIndex: s.getSlideDataIndex(s.previousIndex)
+                    });
                     if (s.activeIndex > s.previousIndex) {
                         s.emit('onSlideNextStart', s);
                     }
@@ -1830,6 +1835,11 @@
                 s.emit('onTransitionEnd', s);
                 if (s.activeIndex !== s.previousIndex) {
                     s.emit('onSlideChangeEnd', s);
+                    _scope.$emit("$ionicSlides.slideChangeEnd", {
+                      slider: s,
+                      activeIndex: s.getSlideDataIndex(s.activeIndex),
+                      previousIndex: s.getSlideDataIndex(s.previousIndex)
+                    });
                     if (s.activeIndex > s.previousIndex) {
                         s.emit('onSlideNextEnd', s);
                     }
@@ -2064,6 +2074,21 @@
             }
           }
         }
+
+        s.getSlideDataIndex = function(slideIndex){
+          // this is an Ionic custom function
+          // Swiper loops utilize duplicate DOM elements for slides when in a loop
+          // which means that we cannot rely on the actual slide index for our events
+          // because index 0 does not necessarily point to index 0
+          // and index n+1 does not necessarily point to the expected piece of data
+          // therefore, rather than using the actual slide index we should
+          // use the data index that swiper includes as an attribute on the dom elements
+          // because this is what will be meaningful to the consumer of our events
+          var slide = s.slides.eq(slideIndex);
+          var attributeIndex = angular.element(slide).attr("data-swiper-slide-index");
+          return parseInt(attributeIndex);
+        }
+
         /*=========================
           Loop
           ===========================*/
diff --git a/package.json b/package.json
index 5e393ee7503..3e0408d6932 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "connect": "^2.13.0",
     "conventional-changelog": "~0.0.11",
     "cpr": "^0.2.0",
+    "cz-conventional-changelog": "^1.1.5",
     "dgeni": "^0.3.0",
     "dgeni-packages": "^0.9.3",
     "event-stream": "3.1.0",
@@ -68,5 +69,10 @@
     {
       "type": "MIT"
     }
-  ]
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
 }
diff --git a/test/html/slides.html b/test/html/slides.html
index d9a06e31cba..f5318480066 100644
--- a/test/html/slides.html
+++ b/test/html/slides.html
@@ -141,6 +141,14 @@ <h2>Life on HD 219134 b</h2>
         }
       }, 2000)
       */
+
+      $scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
+        console.log("slideChangeEnd event: ", data);
+      });
+
+      $scope.$on("$ionicSlides.slideChangeStart", function(event, data){
+        console.log("slideChangeStart event: ", data);
+      });
     }]);
     </script>
   </body>