|
1 | 1 | /**
|
2 | 2 | * Angular Carousel - Mobile friendly touch carousel for AngularJS
|
3 |
| - * @version v0.3.4 - 2014-10-20 |
| 3 | + * @version v0.3.5 - 2014-10-21 |
4 | 4 | * @link http://revolunet.github.com/angular-carousel
|
5 | 5 | * @author Julien Bouquillon <[email protected]>
|
6 | 6 | * @license MIT License, http://www.opensource.org/licenses/MIT
|
@@ -108,14 +108,18 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
|
108 | 108 | // detect supported CSS property
|
109 | 109 | function detectTransformProperty() {
|
110 | 110 | var transformProperty = 'transform';
|
111 |
| - ['webkit', 'moz', 'o', 'ms'].every(function(prefix) { |
112 |
| - var e = '-' + prefix + '-transform'; |
113 |
| - if (typeof document.body.style[e] !== 'undefined') { |
114 |
| - transformProperty = e; |
115 |
| - return false; |
116 |
| - } |
117 |
| - return true; |
118 |
| - }); |
| 111 | + if (typeof document.body.style[transformProperty] !== 'undefined') { |
| 112 | + ['webkit', 'moz', 'o', 'ms'].every(function (prefix) { |
| 113 | + var e = '-' + prefix + '-transform'; |
| 114 | + if (typeof document.body.style[e] !== 'undefined') { |
| 115 | + transformProperty = e; |
| 116 | + return false; |
| 117 | + } |
| 118 | + return true; |
| 119 | + }); |
| 120 | + } else { |
| 121 | + transformProperty = undefined; |
| 122 | + } |
119 | 123 | return transformProperty;
|
120 | 124 | }
|
121 | 125 |
|
@@ -158,37 +162,42 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
|
158 | 162 | slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)',
|
159 | 163 | distance = ((100 - Math.abs(absoluteLeft)) / 100);
|
160 | 164 |
|
161 |
| - if (transitionType == 'fadeAndSlide') { |
162 |
| - style[DeviceCapabilities.transformProperty] = slideTransformValue; |
163 |
| - opacity = 0; |
164 |
| - if (Math.abs(absoluteLeft) < 100) { |
165 |
| - opacity = 0.3 + distance * 0.7; |
166 |
| - } |
167 |
| - style.opacity = opacity; |
168 |
| - } else if (transitionType == 'hexagon') { |
169 |
| - var transformFrom = 100, |
170 |
| - degrees = 0, |
171 |
| - maxDegrees = 60 * (distance - 1); |
172 |
| - |
173 |
| - transformFrom = offset < (slideIndex * -100) ? 100 : 0; |
174 |
| - degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees; |
175 |
| - style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)'; |
176 |
| - style['transform-origin'] = transformFrom + '% 50%'; |
177 |
| - } else if (transitionType == 'zoom') { |
178 |
| - style[DeviceCapabilities.transformProperty] = slideTransformValue; |
179 |
| - var scale = 1; |
180 |
| - if (Math.abs(absoluteLeft) < 100) { |
181 |
| - scale = 1 + ((1 - distance) * 2); |
182 |
| - } |
183 |
| - style[DeviceCapabilities.transformProperty] += ' scale(' + scale + ')'; |
184 |
| - style['transform-origin'] = '50% 50%'; |
185 |
| - opacity = 0; |
186 |
| - if (Math.abs(absoluteLeft) < 100) { |
187 |
| - opacity = 0.3 + distance * 0.7; |
188 |
| - } |
189 |
| - style.opacity = opacity; |
| 165 | + if (!DeviceCapabilities.transformProperty) { |
| 166 | + // fallback to default slide if transformProperty is not available |
| 167 | + style['margin-left'] = absoluteLeft + '%'; |
190 | 168 | } else {
|
191 |
| - style[DeviceCapabilities.transformProperty] = slideTransformValue; |
| 169 | + if (transitionType == 'fadeAndSlide') { |
| 170 | + style[DeviceCapabilities.transformProperty] = slideTransformValue; |
| 171 | + opacity = 0; |
| 172 | + if (Math.abs(absoluteLeft) < 100) { |
| 173 | + opacity = 0.3 + distance * 0.7; |
| 174 | + } |
| 175 | + style.opacity = opacity; |
| 176 | + } else if (transitionType == 'hexagon') { |
| 177 | + var transformFrom = 100, |
| 178 | + degrees = 0, |
| 179 | + maxDegrees = 60 * (distance - 1); |
| 180 | + |
| 181 | + transformFrom = offset < (slideIndex * -100) ? 100 : 0; |
| 182 | + degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees; |
| 183 | + style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)'; |
| 184 | + style['transform-origin'] = transformFrom + '% 50%'; |
| 185 | + } else if (transitionType == 'zoom') { |
| 186 | + style[DeviceCapabilities.transformProperty] = slideTransformValue; |
| 187 | + var scale = 1; |
| 188 | + if (Math.abs(absoluteLeft) < 100) { |
| 189 | + scale = 1 + ((1 - distance) * 2); |
| 190 | + } |
| 191 | + style[DeviceCapabilities.transformProperty] += ' scale(' + scale + ')'; |
| 192 | + style['transform-origin'] = '50% 50%'; |
| 193 | + opacity = 0; |
| 194 | + if (Math.abs(absoluteLeft) < 100) { |
| 195 | + opacity = 0.3 + distance * 0.7; |
| 196 | + } |
| 197 | + style.opacity = opacity; |
| 198 | + } else { |
| 199 | + style[DeviceCapabilities.transformProperty] = slideTransformValue; |
| 200 | + } |
192 | 201 | }
|
193 | 202 | return style;
|
194 | 203 | };
|
@@ -306,7 +315,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
|
306 | 315 | });
|
307 | 316 |
|
308 | 317 | function getSlidesDOM() {
|
309 |
| - return iElement[0].querySelectorAll(':scope > li'); |
| 318 | + return iElement[0].querySelectorAll('ul[rn-carousel] > li'); |
310 | 319 | }
|
311 | 320 |
|
312 | 321 | function documentMouseUpEvent(event) {
|
@@ -386,7 +395,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
|
386 | 395 | }
|
387 | 396 |
|
388 | 397 | function getContainerWidth() {
|
389 |
| - return iElement[0].getBoundingClientRect().width; |
| 398 | + var rect = iElement[0].getBoundingClientRect(); |
| 399 | + return rect.width ? rect.width : rect.right - rect.left; |
390 | 400 | }
|
391 | 401 |
|
392 | 402 | function updateContainerWidth() {
|
|
0 commit comments