Fixed #288, added carousel support to slide box

Also fixed evevt bubbling and incorrect iOS 7 detection in mobile safari

dist/js/ionic-angular.js

@@ -1709,7 +1709,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
 
         var dragFn = function(e) {
           if($scope.dragContent) {
-            if(defaultPrevented) {
+            if(defaultPrevented || e.gesture.srcEvent.defaultPrevented) {
               return;
             }
             isDragging = true;
@@ -1839,15 +1839,22 @@ angular.module('ionic.ui.slideBox', [])
     transclude: true,
     scope: {
       doesContinue: '@',
+      slideInterval: '@',
       showPager: '@',
+      disableScroll: '@',
       onSlideChanged: '&'
     },
     controller: ['$scope', '$element', function($scope, $element) {
       var _this = this;
 
+      var continuous = $scope.$eval($scope.doesContinue) === true;
+      var slideInterval = continuous ? $scope.$eval($scope.slideInterval) || 4000 : 0;
+
       var slider = new ionic.views.Slider({
         el: $element[0],
-        continuous: $scope.$eval($scope.doesContinue) === true,
+        auto: slideInterval,
+        disableScroll: ($scope.$eval($scope.disableScroll) === true) || false,
+        continuous: continuous,
         slidesChanged: function() {
           $scope.currentSlide = slider.getPos();
 
@@ -1876,7 +1883,11 @@ angular.module('ionic.ui.slideBox', [])
         slider.slide(index);
       });
 
-      $scope.slideBox = slider;
+      $scope.$parent.slideBox = slider;
+
+      this.getNumSlides = function() {
+        return slider.getNumSlides();
+      };
 
       $timeout(function() {
         slider.load();
@@ -1902,14 +1913,11 @@ angular.module('ionic.ui.slideBox', [])
 .directive('slide', function() {
   return {
     restrict: 'E',
-    replace: true,
     require: '^slideBox',
-    transclude: true,
-    template: '<div class="slider-slide" ng-transclude></div>',
-    compile: function(element, attr, transclude) {
-      return function($scope, $element, $attr, slideBoxCtrl) {
-      };
-    }
+    compile: function(element, attr) {
+      element.addClass('slider-slide');
+      return function($scope, $element, $attr) {};
+    },
   };
 })
 
@@ -1933,7 +1941,7 @@ angular.module('ionic.ui.slideBox', [])
       };
 
       $scope.numSlides = function() {
-        return new Array($scope.slideBox.getNumSlides());
+        return new Array(slideBox.getNumSlides());
       };
 
       $scope.$watch('currentSlide', function(v) {

dist/js/ionic.js

@@ -1769,18 +1769,12 @@ window.ionic = {
     // window.device available.
     isCordova: function() {
       return (window.cordova || window.PhoneGap || window.phonegap);
-      //&& /^file:\/{3}[^\/]/i.test(window.location.href) 
-      //&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
     },
     isIPad: function() {
       return navigator.userAgent.toLowerCase().indexOf('ipad') >= 0;
     },
     isIOS7: function() {
       if(!window.device) {
-        var parts = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
-        if(parts && parts.length > 0) {
-          return true;
-        }
         return false;
       }
       return window.device.platform == 'iOS' && parseFloat(window.device.version) >= 7.0;
@@ -5235,6 +5229,7 @@ ionic.views.Slider = ionic.views.View.inherit({
         } else {
           element.addEventListener('mousemove', this, false);
           element.addEventListener('mouseup', this, false);
+          document.addEventListener('mouseup', this, false);
         }
       },
       move: function(event) {
@@ -5378,6 +5373,7 @@ ionic.views.Slider = ionic.views.View.inherit({
         } else {
           element.removeEventListener('mousemove', events, false)
           element.removeEventListener('mouseup', events, false)
+          document.removeEventListener('mouseup', events, false);
         }
 
       },

js/ext/angular/src/directive/ionicSideMenu.js

@@ -74,7 +74,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
 
         var dragFn = function(e) {
           if($scope.dragContent) {
-            if(defaultPrevented) {
+            if(defaultPrevented || e.gesture.srcEvent.defaultPrevented) {
               return;
             }
             isDragging = true;

js/ext/angular/src/directive/ionicSlideBox.js

@@ -22,15 +22,22 @@ angular.module('ionic.ui.slideBox', [])
     transclude: true,
     scope: {
       doesContinue: '@',
+      slideInterval: '@',
       showPager: '@',
+      disableScroll: '@',
       onSlideChanged: '&'
     },
     controller: ['$scope', '$element', function($scope, $element) {
       var _this = this;
 
+      var continuous = $scope.$eval($scope.doesContinue) === true;
+      var slideInterval = continuous ? $scope.$eval($scope.slideInterval) || 4000 : 0;
+
       var slider = new ionic.views.Slider({
         el: $element[0],
-        continuous: $scope.$eval($scope.doesContinue) === true,
+        auto: slideInterval,
+        disableScroll: ($scope.$eval($scope.disableScroll) === true) || false,
+        continuous: continuous,
         slidesChanged: function() {
           $scope.currentSlide = slider.getPos();
 
@@ -59,7 +66,11 @@ angular.module('ionic.ui.slideBox', [])
         slider.slide(index);
       });
 
-      $scope.slideBox = slider;
+      $scope.$parent.slideBox = slider;
+
+      this.getNumSlides = function() {
+        return slider.getNumSlides();
+      };
 
       $timeout(function() {
         slider.load();
@@ -85,14 +96,11 @@ angular.module('ionic.ui.slideBox', [])
 .directive('slide', function() {
   return {
     restrict: 'E',
-    replace: true,
     require: '^slideBox',
-    transclude: true,
-    template: '<div class="slider-slide" ng-transclude></div>',
-    compile: function(element, attr, transclude) {
-      return function($scope, $element, $attr, slideBoxCtrl) {
-      };
-    }
+    compile: function(element, attr) {
+      element.addClass('slider-slide');
+      return function($scope, $element, $attr) {};
+    },
   };
 })
 
@@ -116,7 +124,7 @@ angular.module('ionic.ui.slideBox', [])
       };
 
       $scope.numSlides = function() {
-        return new Array($scope.slideBox.getNumSlides());
+        return new Array(slideBox.getNumSlides());
       };
 
       $scope.$watch('currentSlide', function(v) {

js/ext/angular/test/carousel.html

@@ -0,0 +1,153 @@
+<html ng-app="slideBoxTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Slide Box</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <style>
+      .slider-slide {
+        padding-top: 80px;
+        color: #000;
+        background-color: #fff;
+        text-align: center;
+
+        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+        font-weight: 300;
+      }
+      .slider-pager .slider-pager-page {
+        color: #000;
+      }
+
+      #logo {
+        margin: 30px 0px;
+      }
+
+      #list {
+        width: 170px;
+        margin: 30px auto;
+        font-size: 20px;
+      }
+      #list ol {
+        margin-top: 30px;
+      }
+      #list ol li {
+        text-align: left;
+        list-style: decimal;
+        margin: 10px 0px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div ng-controller="SlideCtrl">
+      <slide-box on-slide-changed="slideChanged(index)" does-continue="true">
+        <slide>
+          <h3>Thank you for choosing the Awesome App!</h3>
+          <div id="logo">
+            <img src="app_icon.png">
+          </div>
+          <p>
+            We've worked super hard to make you happy.
+          </p>
+          <p>
+            But if you are angry, too bad.
+          </p>
+        </slide>
+        <slide>
+          <h3>Using Awesome</h3>
+          
+          <div id="list">
+            <h5>Just three steps:</h5>
+            <ol>
+              <li>Be awesome</li>
+              <li>Stay awesome</li>
+              <li>There is no step 3</li>
+            </ol>
+          </div>
+        </slide>
+        <slide>
+          <h3>Any questions?</h3>
+          <p>
+            Too bad!
+          </p>
+        </slide>
+      </slide-box>
+    </div>
+    <script>
+      angular.module('slideBoxTest', ['ionic'])
+
+      .controller('SlideCtrl', function($scope) {
+        $scope.next = function() {
+          console.log('NEXT');
+          $scope.$broadcast('slideBox.nextSlide');
+        };
+
+        var rightButtons = [
+          {
+            content: 'Next',
+            type: 'button-positive button-clear',
+            tap: function(e) {
+              console.log('NEXT');
+              $scope.next();
+            }
+          }
+        ];
+        var leftButtons = [
+          {
+            content: 'Skip',
+            type: 'button-positive button-clear',
+            tap: function(e) {
+              alert('Skipping');
+            }
+          }
+        ];
+
+        $scope.leftButtons = leftButtons;
+        $scope.rightButtons = rightButtons;
+
+
+        $scope.slideChanged = function(index) {
+          console.log('Slide changed', index);
+          
+          if(index > 0) {
+            $scope.leftButtons = [
+              {
+                content: 'Back',
+                type: 'button-positive button-clear',
+                tap: function(e) {
+                  $scope.$broadcast('slideBox.prevSlide');
+                }
+              }
+            ];
+          } else {
+            $scope.leftButtons = leftButtons;
+          }
+          
+          if(index == 2) {
+            $scope.rightButtons = [
+              {
+                content: 'Start using MyApp',
+                type: 'button-positive button-clear',
+                tap: function(e) {
+                  alert('Done!');
+                }
+              }
+            ];
+          } else {
+            $scope.rightButtons = rightButtons;
+          }
+        };
+      });
+    </script>
+  </body>
+</html>
+

js/ext/angular/test/slideBox.html

@@ -49,44 +49,58 @@
   <body>
 
     <div ng-controller="SlideCtrl">
-      <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
-      <slide-box on-slide-changed="slideChanged(index)">
-        <slide>
-          <h3>Thank you for choosing the Awesome App!</h3>
-          <div id="logo">
-            <img src="app_icon.png">
-          </div>
-          <p>
-            We've worked super hard to make you happy.
-          </p>
-          <p>
-            But if you are angry, too bad.
-          </p>
-        </slide>
-        <slide>
-          <h3>Using Awesome</h3>
-          
-          <div id="list">
-            <h5>Just three steps:</h5>
-            <ol>
-              <li>Be awesome</li>
-              <li>Stay awesome</li>
-              <li>There is no step 3</li>
-            </ol>
-          </div>
-        </slide>
-        <slide>
-          <h3>Any questions?</h3>
-          <p>
-            Too bad!
-          </p>
-        </slide>
-      </slide-box>
+      <side-menus>
+        <pane side-menu-content>
+          <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
+          <slide-box on-slide-changed="slideChanged(index)">
+            <slide ng-controller="FirstSlideCtrl">
+              <h3>Thank you for choosing the Awesome App!</h3>
+              <div id="logo">
+                <img src="app_icon.png">
+              </div>
+              <p>
+                We've worked super hard to make you happy.
+              </p>
+              <p>
+                But if you are angry, too bad.
+              </p>
+              <p>
+                <button class="button button-dark" ng-click="toLast()">Skip to last</button>
+              </p>
+            </slide>
+            <slide>
+              <h3>Using Awesome</h3>
+              
+              <div id="list">
+                <h5>Just three steps:</h5>
+                <ol>
+                  <li>Be awesome</li>
+                  <li>Stay awesome</li>
+                  <li>There is no step 3</li>
+                </ol>
+              </div>
+            </slide>
+            <slide>
+              <content has-header="true">
+                <div style="width: 300px; height: 2000px; background: url('tree_bark.png') repeat"></div>
+              </content>
+            </slide>
+          </slide-box>
+        </pane>
+        <side-menu side="left">
+          <header class="bar bar-header bar-assertive">
+            <h1 class="title">Right</h1>
+          </header>
+          <content>
+          </content>
+        </side-menu>
+      </side-menus>
     </div>
     <script>
       angular.module('slideBoxTest', ['ionic'])
 
-      .controller('SlideCtrl', function($scope) {
+      .controller('SlideCtrl', function($scope, $timeout) {
+
         $scope.next = function() {
           console.log('NEXT');
           $scope.$broadcast('slideBox.nextSlide');
@@ -147,7 +161,16 @@
             $scope.rightButtons = rightButtons;
           }
         };
+      })
+
+      .controller('FirstSlideCtrl', function($scope) {
+        $scope.derp = function() {
+        }
+        $scope.toLast = function() {
+          $scope.slideBox.slide(2);
+        }
       });
+
     </script>
   </body>
 </html>

js/utils/platform.js

@@ -39,18 +39,12 @@
     // window.device available.
     isCordova: function() {
       return (window.cordova || window.PhoneGap || window.phonegap);
-      //&& /^file:\/{3}[^\/]/i.test(window.location.href) 
-      //&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
     },
     isIPad: function() {
       return navigator.userAgent.toLowerCase().indexOf('ipad') >= 0;
     },
     isIOS7: function() {
       if(!window.device) {
-        var parts = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
-        if(parts && parts.length > 0) {
-          return true;
-        }
         return false;
       }
       return window.device.platform == 'iOS' && parseFloat(window.device.version) >= 7.0;

js/views/sliderView.js

@@ -298,6 +298,7 @@ ionic.views.Slider = ionic.views.View.inherit({
         } else {
           element.addEventListener('mousemove', this, false);
           element.addEventListener('mouseup', this, false);
+          document.addEventListener('mouseup', this, false);
         }
       },
       move: function(event) {
@@ -441,6 +442,7 @@ ionic.views.Slider = ionic.views.View.inherit({
         } else {
           element.removeEventListener('mousemove', events, false)
           element.removeEventListener('mouseup', events, false)
+          document.removeEventListener('mouseup', events, false);
         }
 
       },