Merge pull request #1 from jasdeepkhalsa/4104-slidebox-event-handlers

Added on-handlers attribute & event handlers to Slide Box
jasdeepkhalsa · Jul 22, 2015 · c77e07f · c77e07f
2 parents 4f703ff + adaa7ae
commit c77e07f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/js/angular/directive/slideBox.js b/js/angular/directive/slideBox.js
@@ -34,6 +34,7 @@
  * @param {expression=} pager-click Expression to call when a pager is clicked (if show-pager is true). Is passed the 'index' variable.
  * @param {expression=} on-slide-changed Expression called whenever the slide is changed.  Is passed an '$index' variable.
  * @param {expression=} active-slide Model to bind the current slide to.
+ * @param {object=} on-handlers Add an object of event handlers including onLoadStart, onLoadEnd, onTouchStart, onTouchEnd, onPrevStart, onPrevEnd, onNextStart and onNextEnd.
  */
 IonicModule
 .directive('ionSlideBox', [
@@ -55,6 +56,7 @@ function($timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory, $ionicScroll
       pagerClick: '&',
       disableScroll: '@',
       onSlideChanged: '&',
+      onHandlers: '=',
       activeSlide: '=?'
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
@@ -69,6 +71,7 @@ function($timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory, $ionicScroll
         auto: slideInterval,
         continuous: continuous,
         startSlide: $scope.activeSlide,
+        handlers: $scope.onHandlers || {},
         slidesChanged: function() {
           $scope.currentSlide = slider.currentIndex();
 

diff --git a/js/views/sliderView.js b/js/views/sliderView.js
@@ -100,16 +100,24 @@ ionic.views.Slider = ionic.views.View.inherit({
 
     function prev(slideSpeed) {
 
+      options.handlers.onPrevStart && options.handlers.onPrevStart(index, slides.length, slides);
+
       if (options.continuous) slide(index - 1, slideSpeed);
       else if (index) slide(index - 1, slideSpeed);
 
+      options.handlers.onPrevEnd && options.handlers.onPrevEnd(index, slides.length, slides);
+
     }
 
     function next(slideSpeed) {
 
+      options.handlers.onNextStart && options.handlers.onNextStart(index, slides.length, slides);
+
       if (options.continuous) slide(index + 1, slideSpeed);
       else if (index < slides.length - 1) slide(index + 1, slideSpeed);
 
+      options.handlers.onNextEnd && options.handlers.onNextEnd(index, slides.length, slides);
+
     }
 
     function circle(index) {
@@ -278,6 +286,8 @@ ionic.views.Slider = ionic.views.View.inherit({
       },
       start: function(event) {
 
+        options.handlers.onTouchStart && options.handlers.onTouchStart(event, index, slides.length, slides);
+
         var touches = event.touches[0];
 
         // measure start values
@@ -370,7 +380,7 @@ ionic.views.Slider = ionic.views.View.inherit({
         }
 
       },
-      end: function() {
+      end: function(event) {
 
         // measure duration
         var duration = +new Date() - start.time;
@@ -428,6 +438,12 @@ ionic.views.Slider = ionic.views.View.inherit({
 
             options.callback && options.callback(index, slides[index]);
 
+            if(direction){ // (true:right (next), false:left (previous))
+              options.handlers.onTouchEnd && options.handlers.onTouchEnd('next', event, index, slides.length, slides);
+            } else {
+              options.handlers.onTouchEnd && options.handlers.onTouchEnd('previous', event, index, slides.length, slides);
+            }
+
           } else {
 
             if (options.continuous) {
@@ -577,6 +593,8 @@ ionic.views.Slider = ionic.views.View.inherit({
       // trigger setup
       setup();
 
+      options.handlers.onLoadStart && options.handlers.onLoadStart(index, slides.length, slides);
+
       // start auto slideshow if applicable
       if (delay) begin();
 
@@ -602,10 +620,14 @@ ionic.views.Slider = ionic.views.View.inherit({
         // set resize event on window
         window.addEventListener('resize', events, false);
 
+        options.handlers.onLoadEnd && options.handlers.onLoadEnd(index, slides.length, slides);
+
       } else {
 
         window.onresize = function () { setup(); }; // to play nice with old IE
 
+        options.handlers.onLoadEnd && options.handlers.onLoadEnd(index, slides.length, slides);
+
       }
     };