Much better slide box

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

@@ -15,32 +15,38 @@ angular.module('ionic.ui.slideBox', [])
  * some side menu stuff on the current scope.
  */
 
-.directive('slideBox', ['$compile', function($compile) {
+.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
     scope: {},
     controller: ['$scope', '$element', function($scope, $element) {
-      $scope.slides = [];
-      this.slideAdded = function() {
-        $scope.slides.push({});
-      };
+      var _this = this;
 
-      angular.extend(this, ionic.views.SlideBox.prototype);
-
-      ionic.views.SlideBox.call(this, {
+      var slider = new ionic.views.Slider({
         el: $element[0],
-        slideChanged: function(slideIndex) {
+        slidesChanged: function() {
+          $scope.currentSlide = slider.getPos();
+          $timeout(function() {});
+        },
+        callback: function(slideIndex) {
+          $scope.currentSlide = slideIndex;
           $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
           $scope.$apply();
         }
       });
 
-      $scope.$parent.slideBox = this;
+      slider.load();
+
+      $scope.slider = slider;
+
+      $timeout(function() {
+        $scope.slider.setup();
+      });
     }],
-    template: '<div class="slide-box">\
-            <div class="slide-box-slides" ng-transclude>\
+    template: '<div class="slider">\
+            <div class="slider-slides" ng-transclude>\
             </div>\
           </div>',
 
@@ -48,8 +54,9 @@ angular.module('ionic.ui.slideBox', [])
       // If the pager should show, append it to the slide box
       if($attr.showPager !== "false") {
         var childScope = $scope.$new();
-        var pager = $compile('<pager></pager>')(childScope);
+        var pager = angular.element('<pager></pager>');
         $element.append(pager);
+        $compile(pager)(childScope);
       }
     }
   };
@@ -61,10 +68,9 @@ angular.module('ionic.ui.slideBox', [])
     replace: true,
     require: '^slideBox',
     transclude: true,
-    template: '<div class="slide-box-slide" ng-transclude></div>',
+    template: '<div class="slider-slide" ng-transclude></div>',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, slideBoxCtrl) {
-        slideBoxCtrl.slideAdded();
       };
     }
   };
@@ -75,7 +81,29 @@ angular.module('ionic.ui.slideBox', [])
     restrict: 'E',
     replace: true,
     require: '^slideBox',
-    template: '<div class="slide-box-pager"><span ng-repeat="slide in slides"><i class="icon ion-record"></i></span></div>'
+    template: '<div class="slider-pager"><span class="slider-pager-page" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}"><i class="icon ion-record"></i></span></div>',
+    link: function($scope, $element, $attr, slideBox) {
+      var selectPage = function(index) {
+        var children = $element[0].children;
+        var length = children.length;
+        for(var i = 0; i < length; i++) {
+          if(i == index) {
+            children[i].classList.add('active');
+          } else {
+            children[i].classList.remove('active');
+          }
+        }
+      };
+
+      $scope.numSlides = function() {
+        return new Array($scope.slider.getNumSlides());
+      };
+
+      $scope.$watch('currentSlide', function(v) {
+        console.log('Current slide', v);
+        selectPage(v);
+      });
+    }
   };
 
 });