Merge pull request #281 from mountainmoon/master

add support for 'pause on hover' and fix #268 , #254, #270

README.md

@@ -67,13 +67,12 @@ You can add position indicators by adding this directive where you want :
  - angular-carousel use the great [shifty.js](https://github.com/jeremyckahn/shifty) for the animations
 
 ## Todo :
- - disable autoslide on hover
  - delay autoslide on indicators click/move
  - customisable transitions
  - more transition types
  - infinite loop support
 
-## Contributing 
+## Contributing
  - Please follow [AngularJS GIT conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#)
  - Please add tests
  - Please update the README and demo (index.html)

bower.json

@@ -20,6 +20,7 @@
     "angular-touch": ">=1.2.10"
   },
   "devDependencies": {
-    "angular-mocks": ">=1.2.10"
+    "angular-mocks": ">=1.2.10",
+    "requirejs": ">=2.1.0"
   }
 }

index.html

@@ -38,12 +38,12 @@ <h3>Buffered ngRepeat demo</h3>
                 </div>
             </div>
             <div>
-                <h3>buffered ngRepeat with auto-slide and builtin indicators </h3>
+                <h3>buffered ngRepeat with auto-slide(pause on hover) and builtin indicators </h3>
                 <div class="details">
                 </div>
                 <div class="carousel-demo">
                     index: <input type="number" class="tiny" ng-model="carouselIndex2">
-                    <ul rn-carousel rn-carousel-index="carouselIndex2" rn-carousel-auto-slide rn-carousel-buffered class="carousel2">
+                    <ul rn-carousel rn-carousel-index="carouselIndex2" rn-carousel-auto-slide rn-carousel-pause-on-hover rn-carousel-buffered class="carousel2">
                         <li ng-repeat="slide in slides2 track by slide.id" ng-class="'id-' + slide.id">
                             <div ng-style="{'background-image': 'url(' + slide.img + ')'}"  class="bgimage">
                               #{{ slide.id }}
@@ -151,7 +151,7 @@ <h3>Add/Remove items in the collection</h3>
     </body>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-touch.min.js"></script>
-    
+
     <script src="./dist/angular-carousel.min.js"></script>
     <!--<script src="./src/angular-carousel.js"></script>
     <script src="./src/directives/rn-carousel.js"></script>

src/directives/rn-carousel-auto-slide.js

@@ -1,53 +1,31 @@
 angular.module('angular-carousel')
 
-.directive('rnCarouselAutoSlide', ['$timeout', function($timeout) {
+.directive('rnCarouselAutoSlide', ['$interval', function($interval) {
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
-        var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000),
-            timer = increment = false, slidesCount = element.children().length;
-
-        if(!scope.carouselExposedIndex){
-            scope.carouselExposedIndex = 0;
-        }
-        stopAutoplay = function () {
-            if (angular.isDefined(timer)) {
-                $timeout.cancel(timer);
-            }
-            timer = undefined;
-        };
-
-        increment = function () {
-            if (scope.carouselExposedIndex < slidesCount - 1) {
-                scope.carouselExposedIndex =  scope.carouselExposedIndex + 1;
-            } else {
-                scope.carouselExposedIndex = 0;
+        var stopAutoPlay = function() {
+            if (scope.autoSlider) {
+                $interval.cancel(scope.autoSlider);
+                scope.autoSlider = null;
             }
         };
-
-        restartTimer = function (){
-            stopAutoplay();
-            timer = $timeout(increment, delay);
+        var restartTimer = function() {
+            scope.autoSlide();
         };
 
-        scope.$watch('carouselIndex', function(){
-           restartTimer();
-        });
-
-        restartTimer();
-        if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){
-            element.on('mouseenter', stopAutoplay);
+        scope.$watch('carouselIndex', restartTimer);
 
+        if (attrs.hasOwnProperty('rnCarouselPauseOnHover') && attrs.rnCarouselPauseOnHover !== 'false'){
+            element.on('mouseenter', stopAutoPlay);
             element.on('mouseleave', restartTimer);
         }
 
         scope.$on('$destroy', function(){
-            stopAutoplay();
-            element.off('mouseenter', stopAutoplay);
+            stopAutoPlay();
+            element.off('mouseenter', stopAutoPlay);
             element.off('mouseleave', restartTimer);
         });
-
-
     }
   };
-}]);
+}]);

src/directives/rn-carousel.js

@@ -379,14 +379,19 @@
                             iElement.append($compile(angular.element(tpl))(scope));
                         }
 
-                        var autoSlider;
                         if (iAttributes.rnCarouselAutoSlide!==undefined) {
                             var duration = parseInt(iAttributes.rnCarouselAutoSlide, 10) || options.autoSlideDuration;
-                            autoSlider = $interval(function() {
-                                if (!locked && !pressed) {
-                                    scope.nextSlide();
+                            scope.autoSlide = function() {
+                                if (scope.autoSlider) {
+                                    $interval.cancel(scope.autoSlider);
+                                    scope.autoSlider = null;
                                 }
-                            }, duration * 1000);
+                                scope.autoSlider = $interval(function() {
+                                    if (!locked && !pressed) {
+                                        scope.nextSlide();
+                                    }
+                                }, duration * 1000);
+                            };
                         }
 
                         if (iAttributes.rnCarouselIndex) {

src/directives/shifty.js

@@ -482,8 +482,9 @@ angular.module('angular-carousel.shifty', [])
       // CommonJS
       module.exports = Tweenable;
     } else if (typeof define === 'function' && define.amd) {
-      // AMD
-      define(function () {return Tweenable;});
+      // AMD: define it as a named module to avoid the mismatched error(http://requirejs.org/docs/errors.html#mismatch)
+      define('shifty', [], function () {return Tweenable;});
+      root.Tweenable = Tweenable;
     } else if (typeof root.Tweenable === 'undefined') {
       // Browser: Make `Tweenable` globally accessible.
       root.Tweenable = Tweenable;

test/karma.conf.js

@@ -13,6 +13,7 @@ module.exports = function ( karma ) {
         'bower_components/angular/angular.js',
         'bower_components/angular-touch/angular-touch.js',
         'bower_components/angular-mocks/angular-mocks.js',
+        'bower_components/requirejs/require.js',
         'dist/angular-carousel.js',
         'test/unit/*.js'
     ],

test/unit/angular-carousel.shifty.js

@@ -0,0 +1,20 @@
+/*global waits, runs, iit, browserTrigger, beforeEach, afterEach, describe, it, inject, expect, module, angular, $*/
+
+describe('angular-carousel.shifty', function () {
+  'use strict';
+
+  describe("compatibility with requirejs", function(){
+    var loadShifty = function() {
+      module('angular-carousel.shifty');
+    };
+    it("should not throw an exception when load the shifty within requirejs environment", function(){
+      expect(loadShifty).not.toThrow();
+    });
+
+    it("should not throw an exception when inject `Tweenable` within requirejs environment", function(){
+      loadShifty();
+      expect(function() {inject(function(Tweenable){});}).not.toThrow();
+    });
+  });
+
+});