From a3964d4d8137a6067e2e436b88f314b7b231f29d Mon Sep 17 00:00:00 2001
From: plondon <plondon@gm.slc.edu>
Date: Wed, 30 Mar 2016 09:34:20 -0400
Subject: [PATCH] feat(carousel): disable prev/next arrows if at bounds

- When at bounds and noWrap is enabled, disable the prev and next arrows when appropriate

BREAKING CHANGE: This adds disabled CSS - there is a possibility this may break existing UI slightly for those adding custom CSS/making use of custom templates. Modify the template appropriately if necessary

Closes #5704
Closes #5708
---
 src/carousel/carousel.js           |  8 ++++++++
 src/carousel/test/carousel.spec.js | 32 ++++++++++++++++++++++++++++++
 template/carousel/carousel.html    |  4 ++--
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
index 11a3a9045e..f745229c76 100644
--- a/src/carousel/carousel.js
+++ b/src/carousel/carousel.js
@@ -123,6 +123,14 @@ angular.module('ui.bootstrap.carousel', [])
     return $scope.active === slide.slide.index;
   };
 
+  $scope.isPrevDisabled = function() {
+    return $scope.active === 0 && $scope.noWrap();
+  };
+
+  $scope.isNextDisabled = function() {
+    return $scope.active === slides.length - 1 && $scope.noWrap();
+  };
+
   $scope.pause = function() {
     if (!$scope.noPause) {
       isPlaying = false;
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index a69001d30a..e43ce5f6dd 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/src/carousel/test/carousel.spec.js
@@ -163,6 +163,38 @@ describe('carousel', function() {
       expect(navPrev.length).toBe(0);
     });
 
+    it('should disable prev button when slide index is 0 and noWrap is truthy', function() {
+      scope.$apply();
+
+      var $scope = elm.isolateScope();
+      $scope.noWrap = function() {return true;};
+
+      $scope.isPrevDisabled();
+      scope.$apply();
+
+      var navPrev = elm.find('a.left');
+      expect(navPrev.hasClass('disabled')).toBe(true);
+    });
+
+    it('should disable next button when last slide is active and noWrap is truthy', function() {
+      scope.slides = [
+        {content: 'one', index: 0},
+        {content: 'two', index: 1}
+      ];
+
+      scope.$apply();
+
+      var $scope = elm.isolateScope();
+      $scope.noWrap = function() {return true;};
+      $scope.next();
+
+      $scope.isNextDisabled();
+      scope.$apply();
+
+      var navNext = elm.find('a.right');
+      expect(navNext.hasClass('disabled')).toBe(true);
+    });
+
     it('should show navigation when there are 3 slides', function () {
       var indicators = elm.find('ol.carousel-indicators > li');
       expect(indicators.length).not.toBe(0);
diff --git a/template/carousel/carousel.html b/template/carousel/carousel.html
index c0b66dc3ed..dc98a5aaed 100644
--- a/template/carousel/carousel.html
+++ b/template/carousel/carousel.html
@@ -1,10 +1,10 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
   <div class="carousel-inner" ng-transclude></div>
-  <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
+  <a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
     <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
     <span class="sr-only">previous</span>
   </a>
-  <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
+  <a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
     <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">next</span>
   </a>