fix(slidebox): show-pager defaults to true

ionic-team · Mar 30, 2015 · 95688d6 · 95688d6
1 parent 73c3de6
commit 95688d6
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/js/angular/directive/slideBox.js b/js/angular/directive/slideBox.js
@@ -30,7 +30,7 @@
  * @param {boolean=} does-continue Whether the slide box should loop.
  * @param {boolean=} auto-play Whether the slide box should automatically slide. Default true if does-continue is true.
  * @param {number=} slide-interval How many milliseconds to wait to change slides (if does-continue is true). Defaults to 4000.
- * @param {boolean=} show-pager Whether a pager should be shown for this slide box. Accepts expressions via `show-pager="{{shouldShow()}}"`.
+ * @param {boolean=} show-pager Whether a pager should be shown for this slide box. Accepts expressions via `show-pager="{{shouldShow()}}"`. Defaults to true.
  * @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.
@@ -133,6 +133,12 @@ function($timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory) {
     '</div>',
 
     link: function($scope, $element, $attr, slideBoxCtrl) {
+      // if showPager is undefined, show the pager
+      if (!isDefined($attr.showPager)) {
+        $scope.showPager = true;
+        getPager().toggleClass('hide', !true);
+      }
+
       $attr.$observe('showPager', function(show) {
         show = $scope.$eval(show);
         getPager().toggleClass('hide', !show);

diff --git a/test/unit/angular/directive/slideBox.unit.js b/test/unit/angular/directive/slideBox.unit.js
@@ -70,4 +70,41 @@ describe('ionSlideBox with active slide', function() {
    scope.$apply();
    expect($ionicSlideBoxDelegate.currentIndex()).toBe(2);
   }));
+  it('Should create and show pager unless told not to', inject(function($rootScope, $compile, $timeout) {
+    el = $compile('<ion-slide-box>' +
+      '<ion-slide>' +
+        '<div class="box blue">' +
+          '<h1>BLUE {{slideBox.slideIndex}}</h1>' +
+        '</div>' +
+      '</ion-slide>' +
+      '<ion-slide>' +
+        '<div class="box yellow">' +
+          '<h1>YELLOW {{slideBox.slideIndex}}</h1>' +
+        '</div>' +
+      '</ion-slide>' +
+    '</ion-slide-box>')($rootScope.$new());
+
+    var scope = el.scope();
+    scope.$apply();
+    expect(el.find('.slider-pager').length).toBe(1);
+    expect(el.find('.slider-pager.hide').length).toBe(0);
+  }));
+  it('Should create and show pager unless told not to', inject(function($rootScope, $compile, $timeout) {
+    el = $compile('<ion-slide-box show-pager="false">' +
+      '<ion-slide>' +
+        '<div class="box blue">' +
+          '<h1>BLUE {{slideBox.slideIndex}}</h1>' +
+        '</div>' +
+      '</ion-slide>' +
+      '<ion-slide>' +
+        '<div class="box yellow">' +
+          '<h1>YELLOW {{slideBox.slideIndex}}</h1>' +
+        '</div>' +
+      '</ion-slide>' +
+    '</ion-slide-box>')($rootScope.$new());
+
+    var scope = el.scope();
+    scope.$apply();
+    expect(el.find('.slider-pager.hide').length).toBe(1);
+  }));
 });