Merge pull request #233 from rdubigny/ie8-support

feat (directive): IE8 Support (updated)

Author: Julien Bouquillon

README.md

@@ -61,6 +61,7 @@ You can add position indicators by adding this directive where you want :
 
 ## Notes :
  - if you use IE<=9, iOS<7 or Android<4 please include the [requestAnimationFrame polyfill](https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js) in your application.
+ - if you use IE<=8 include the [es5-shim polyfill](https://github.com/es-shims/es5-shim/blob/master/es5-shim.min.js) in your application.
  - don't set any style attribute to your li's. they would be overwritten by the carousel (use classes instead).
  - angular-carousel use the great [shifty.js](https://github.com/jeremyckahn/shifty) for the animations
 

src/directives/rn-carousel.js

@@ -8,14 +8,18 @@
         // detect supported CSS property
         function detectTransformProperty() {
             var transformProperty = 'transform';
-            ['webkit', 'moz', 'o', 'ms'].every(function(prefix) {
-                var e = '-' + prefix + '-transform';
-                if (typeof document.body.style[e] !== 'undefined') {
-                    transformProperty = e;
-                    return false;
-                }
-                return true;
-            });
+            if (typeof document.body.style[transformProperty] !== 'undefined') {
+                ['webkit', 'moz', 'o', 'ms'].every(function (prefix) {
+                    var e = '-' + prefix + '-transform';
+                    if (typeof document.body.style[e] !== 'undefined') {
+                        transformProperty = e;
+                        return false;
+                    }
+                    return true;
+                });
+            } else {
+                transformProperty = undefined;
+            }
             return transformProperty;
         }
 
@@ -58,37 +62,42 @@
                 slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)',
                 distance = ((100 - Math.abs(absoluteLeft)) / 100);
 
-            if (transitionType == 'fadeAndSlide') {
-                style[DeviceCapabilities.transformProperty] = slideTransformValue;
-                opacity = 0;
-                if (Math.abs(absoluteLeft) < 100) {
-                    opacity = 0.3 + distance * 0.7;
-                }
-                style.opacity = opacity;
-            } else if (transitionType == 'hexagon') {
-                var transformFrom = 100,
-                    degrees = 0,
-                    maxDegrees = 60 * (distance - 1);
-
-                transformFrom = offset < (slideIndex * -100) ? 100 : 0;
-                degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees;
-                style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
-                style['transform-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%';
-                opacity = 0;
-                if (Math.abs(absoluteLeft) < 100) {
-                    opacity = 0.3 + distance * 0.7;
-                }
-                style.opacity = opacity;
+            if (!DeviceCapabilities.transformProperty) {
+                // fallback to default slide if transformProperty is not available
+                style['margin-left'] = absoluteLeft + '%';
             } else {
-                style[DeviceCapabilities.transformProperty] = slideTransformValue;
+                if (transitionType == 'fadeAndSlide') {
+                    style[DeviceCapabilities.transformProperty] = slideTransformValue;
+                    opacity = 0;
+                    if (Math.abs(absoluteLeft) < 100) {
+                        opacity = 0.3 + distance * 0.7;
+                    }
+                    style.opacity = opacity;
+                } else if (transitionType == 'hexagon') {
+                    var transformFrom = 100,
+                        degrees = 0,
+                        maxDegrees = 60 * (distance - 1);
+
+                    transformFrom = offset < (slideIndex * -100) ? 100 : 0;
+                    degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees;
+                    style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
+                    style['transform-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%';
+                    opacity = 0;
+                    if (Math.abs(absoluteLeft) < 100) {
+                        opacity = 0.3 + distance * 0.7;
+                    }
+                    style.opacity = opacity;
+                } else {
+                    style[DeviceCapabilities.transformProperty] = slideTransformValue;
+                }
             }
             return style;
         };
@@ -206,7 +215,7 @@
                         });
 
                         function getSlidesDOM() {
-                            return iElement[0].querySelectorAll(':scope > li');
+                            return iElement[0].querySelectorAll('ul[rn-carousel] > li');
                         }
 
                         function documentMouseUpEvent(event) {
@@ -286,7 +295,8 @@
                         }
 
                         function getContainerWidth() {
-                            return iElement[0].getBoundingClientRect().width;
+                            var rect = iElement[0].getBoundingClientRect();
+                            return rect.width ? rect.width : rect.right - rect.left;
                         }
 
                         function updateContainerWidth() {