From 3b677eed460354b7c02bf23b6624ee179ec125a3 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Sat, 16 Feb 2013 21:07:54 +0100
Subject: [PATCH] feat(carousel): add slide indicators

Closes #145
---
 src/carousel/carousel.js           | 12 ++++++++++++
 src/carousel/test/carousel.spec.js | 11 +++++++++++
 template/carousel/carousel.html    |  3 +++
 3 files changed, 26 insertions(+)

diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
index c138963120..4fb09b7e87 100644
--- a/src/carousel/carousel.js
+++ b/src/carousel/carousel.js
@@ -85,6 +85,18 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
     return self.select(slides[newIndex], 'prev');
   };
 
+  $scope.select = function(slide) {
+    self.select(slide);
+  };
+
+  $scope.isActive = function(slide) {
+     return self.currentSlide === slide;
+  };
+
+  $scope.slides = function() {
+    return slides;
+  };
+
   $scope.$watch('interval', restartTimer);
   function restartTimer() {
     if (currentTimeout) {
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index 8e4a8e30d0..6749c84b9b 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/src/carousel/test/carousel.spec.js
@@ -59,6 +59,11 @@ describe('carousel', function() {
       expect(navNext.length).toBe(1);
     });
 
+    it('should display clickable slide indicators', function () {
+      var indicators = elm.find('ol.carousel-indicators > li');
+      expect(indicators.length).toBe(3);
+    });
+
     it('should go to next when clicking next button', function() {
       var navNext = elm.find('a.right');
       testSlideActive(0);
@@ -81,6 +86,12 @@ describe('carousel', function() {
       testSlideActive(0);
     });
 
+    it('should select a slide when clicking on slide indicators', function () {
+      var indicators = elm.find('ol.carousel-indicators > li');
+      indicators.eq(1).click();
+      testSlideActive(1);
+    });
+
     it('shouldnt go forward if interval is NaN or negative', function() {
       testSlideActive(0);
       scope.$apply('interval = -1');
diff --git a/template/carousel/carousel.html b/template/carousel/carousel.html
index a704486786..aede73959e 100644
--- a/template/carousel/carousel.html
+++ b/template/carousel/carousel.html
@@ -1,4 +1,7 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
+    <ol class="carousel-indicators">
+        <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
+    </ol>
     <div class="carousel-inner" ng-transclude></div>
     <a ng-click="prev()" class="carousel-control left">&lsaquo;</a>
     <a ng-click="next()" class="carousel-control right">&rsaquo;</a>