From 314156b3ca963effa865bc2fbcfcb0363b30085e Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Fri, 15 Nov 2013 21:54:47 -0600
Subject: [PATCH] Fixed #119 - slide box events

---
 dist/js/ionic-angular.js                      |  6 +++++-
 dist/js/ionic.js                              |  7 +++++++
 js/ext/angular/src/directive/ionicSlideBox.js |  5 ++++-
 js/ext/angular/src/ionicAngular.js            |  1 +
 js/ext/angular/test/slideBox.html             | 15 +++++++++++----
 js/views/slideBox.js                          |  7 +++++++
 6 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 73ed3e6988..03958afe2a 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -22997,6 +22997,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.nav',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
+                            'ionic.ui.slideBox',
                             'ionic.ui.list',
                             'ionic.ui.checkbox',
                             'ionic.ui.toggle',
@@ -24426,7 +24427,10 @@ angular.module('ionic.ui.slideBox', [])
         $element.append(pager);
 
         $scope.slideBox = new ionic.views.SlideBox({
-          el: $element[0]
+          el: $element[0],
+          slideChanged: function(slideIndex) {
+            $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
+          }
         });
       }
     }
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index 28c0995475..60660d0b7f 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -3679,6 +3679,7 @@ window.ionic = {
     initialize: function(opts) {
       var _this = this;
 
+      this.slideChanged = opts.slideChanged || function() {};
       this.el = opts.el;
       this.pager = this.el.querySelector('.slide-box-pager');
 
@@ -3787,9 +3788,15 @@ window.ionic = {
       content.classList.add('slide-box-animating');
       content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
 
+      var lastSlide = this.slideIndex;
+
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
 
+      if(lastSlide !== this.slideIndex) {
+        this.slideChanged && this.slideChanged(this.slideIndex);
+      }
+
       this._updatePager();
     },
 
diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js
index 8c4c699abd..b997a311ce 100644
--- a/js/ext/angular/src/directive/ionicSlideBox.js
+++ b/js/ext/angular/src/directive/ionicSlideBox.js
@@ -41,7 +41,10 @@ angular.module('ionic.ui.slideBox', [])
         $element.append(pager);
 
         $scope.slideBox = new ionic.views.SlideBox({
-          el: $element[0]
+          el: $element[0],
+          slideChanged: function(slideIndex) {
+            $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
+          }
         });
       }
     }
diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js
index b07fd098c7..6cc73e061e 100644
--- a/js/ext/angular/src/ionicAngular.js
+++ b/js/ext/angular/src/ionicAngular.js
@@ -18,6 +18,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.nav',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
+                            'ionic.ui.slideBox',
                             'ionic.ui.list',
                             'ionic.ui.checkbox',
                             'ionic.ui.toggle',
diff --git a/js/ext/angular/test/slideBox.html b/js/ext/angular/test/slideBox.html
index bd03b60086..65946407e5 100644
--- a/js/ext/angular/test/slideBox.html
+++ b/js/ext/angular/test/slideBox.html
@@ -5,8 +5,9 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
     <style>
       .box {
         width: 100%;
@@ -38,6 +39,7 @@
   </head>
   <body>
 
+    <div ng-controller="SlideCtrl">
     <slide-box>
       <slide>
         <div class="box blue"><h1>BLUE</h1></div>
@@ -49,10 +51,15 @@
         <div class="box pink"><h1>PINK</h1></div>
       </slide>
     </slide-box>
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </div>
     <script>
-      angular.module('slideBoxTest', ['ionic.ui.slideBox'])
+      angular.module('slideBoxTest', ['ionic'])
+
+      .controller('SlideCtrl', function($scope) {
+        $scope.$on('slideBox.slideChanged', function(e, index) {
+          console.log('Slide changed', index);
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/js/views/slideBox.js b/js/views/slideBox.js
index 6980ddc855..157dd09271 100644
--- a/js/views/slideBox.js
+++ b/js/views/slideBox.js
@@ -12,6 +12,7 @@
     initialize: function(opts) {
       var _this = this;
 
+      this.slideChanged = opts.slideChanged || function() {};
       this.el = opts.el;
       this.pager = this.el.querySelector('.slide-box-pager');
 
@@ -120,9 +121,15 @@
       content.classList.add('slide-box-animating');
       content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
 
+      var lastSlide = this.slideIndex;
+
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
 
+      if(lastSlide !== this.slideIndex) {
+        this.slideChanged && this.slideChanged(this.slideIndex);
+      }
+
       this._updatePager();
     },