bump 0.3.6

Author: revolunet

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-carousel",
   "description": "Angular Carousel - Mobile friendly touch carousel for AngularJS",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "homepage": "http://revolunet.github.com/angular-carousel",
   "author": "Julien Bouquillon <julien@revolunet.com>",
   "repository": {

dist/angular-carousel.js

@@ -105,6 +105,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 
     .service('DeviceCapabilities', function() {
 
+        // TODO: merge in a single function
+
         // detect supported CSS property
         function detectTransformProperty() {
             var transformProperty = 'transform',
@@ -185,15 +187,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                     transformFrom = offset < (slideIndex * -100) ? 100 : 0;
                     degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees;
                     style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
-                    style['transform-origin'] = transformFrom + '% 50%';
+                    style[DeviceCapabilities.transformProperty + '-origin'] = transformFrom + '% 50%';
                 } else if (transitionType == 'zoom') {
                     style[DeviceCapabilities.transformProperty] = slideTransformValue;
                     var scale = 1;
                     if (Math.abs(absoluteLeft) < 100) {
                         scale = 1 + ((1 - distance) * 2);
                     }
                     style[DeviceCapabilities.transformProperty] += ' scale(' + scale + ')';
-                    style['transform-origin'] = '50% 50%';
+                    style[DeviceCapabilities.transformProperty + '-origin'] = '50% 50%';
                     opacity = 0;
                     if (Math.abs(absoluteLeft) < 100) {
                         opacity = 0.3 + distance * 0.7;
@@ -226,6 +228,18 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 
             var requestAnimationFrame = $window.requestAnimationFrame || $window.webkitRequestAnimationFrame || $window.mozRequestAnimationFrame;
 
+            function getItemIndex(collection, target, defaultIndex) {
+                var result = defaultIndex;
+                collection.every(function(item, index) {
+                    if (angular.equals(item, target)) {
+                        result = index;
+                        return false;
+                    }
+                    return true;
+                });
+                return result;
+            };
+
             return {
                 restrict: 'A',
                 scope: true,
@@ -359,6 +373,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         };
 
                         function goToSlide(index, slideOptions) {
+                            //console.log('goToSlide', arguments);
                             // move a to the given slide index
                             if (index === undefined) {
                                 index = scope.carouselIndex;
@@ -513,11 +528,23 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         }
 
                         if (isRepeatBased) {
-                            scope.$watchCollection(repeatCollection, function(newValue, oldValue) {
-                                //console.log('repeatCollection', arguments);
+                            // use rn-carousel-deep-watch to fight the Angular $watchCollection weakness : https://github.com/angular/angular.js/issues/2621
+                            // optional because it have some performance impacts (deep watch)
+                            var deepWatch = (iAttributes.rnCarouselDeepWatch!==undefined);
+
+                            scope[deepWatch?'$watch':'$watchCollection'](repeatCollection, function(newValue, oldValue) {
+                                //console.log('repeatCollection', currentSlides);
+                                var oldSlides = (currentSlides || newValue).slice();
                                 currentSlides = newValue;
-                                goToSlide(scope.carouselIndex);
-                            });
+                                // if deepWatch ON ,manually compare objects to guess the new position
+                                if (deepWatch && angular.isArray(newValue)) {
+                                    var activeElement = oldValue[scope.carouselIndex];
+                                    var newIndex = getItemIndex(newValue, activeElement, scope.carouselIndex);
+                                    goToSlide(newIndex, {animate: false});
+                                } else {
+                                    goToSlide(scope.carouselIndex, {animate: false});
+                                }
+                            }, true);
                         }
 
                         function swipeEnd(coords, event, forceAnimation) {

dist/angular-carousel.min.js

@@ -1,7 +1,7 @@
 {
   "name": "angular-carousel",
   "description": "Angular Carousel - Mobile friendly touch carousel for AngularJS",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "homepage": "http://revolunet.github.com/angular-carousel",
   "author": "Julien Bouquillon <julien@revolunet.com>",
   "repository": {