From 019235ba9d1e47aaff18e9fa83dbbcc4a2c1b706 Mon Sep 17 00:00:00 2001 From: Costica Puntaru <pc@everymatrix.com> Date: Thu, 31 Jul 2014 11:59:26 +0300 Subject: [PATCH 1/4] fixing autosilder on ng-repeat items --- dist/angular-carousel.js | 30 ++++++++++++++++-------- dist/angular-carousel.min.js | 4 ++-- index.html | 18 +++++++++++++- src/directives/rn-carousel-auto-slide.js | 27 ++++++++++++++------- src/directives/rn-carousel.js | 1 + 5 files changed, 58 insertions(+), 22 deletions(-) diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 5fd365e..1e708cf 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -1,6 +1,6 @@ /** * Angular Carousel - Mobile friendly touch carousel for AngularJS - * @version v0.2.3 - 2014-07-21 + * @version v0.2.3 - 2014-07-31 * @link http://revolunet.github.com/angular-carousel * @author Julien Bouquillon <julien@revolunet.com> * @license MIT License, http://www.opensource.org/licenses/MIT @@ -23,31 +23,41 @@ angular.module('angular-carousel') return { restrict: 'A', link: function (scope, element, attrs) { + var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000), - timer = increment = false, slidesCount = element.children().length; + timer = false, slidesCount = element.children().length; + notrepeat = true; + + scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ + slidesCount = newSlidesCount; + notrepeat = false + }); if(!scope.carouselExposedIndex){ scope.carouselExposedIndex = 0; } - stopAutoplay = function () { + + function stopAutoplay() { if (angular.isDefined(timer)) { $timeout.cancel(timer); } timer = undefined; - }; + } - increment = function () { + function increment() { if (scope.carouselExposedIndex < slidesCount - 1) { scope.carouselExposedIndex = scope.carouselExposedIndex + 1; } else { scope.carouselExposedIndex = 0; } - }; + } - restartTimer = function (){ + function restartTimer(){ stopAutoplay(); - timer = $timeout(increment, delay); - }; + timer = $timeout(function(){ + increment() + }, delay); + } scope.$watch('carouselIndex', function(){ restartTimer(); @@ -56,7 +66,6 @@ angular.module('angular-carousel') restartTimer(); if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){ element.on('mouseenter', stopAutoplay); - element.on('mouseleave', restartTimer); } @@ -275,6 +284,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach } else if (angular.isObject(newValue)) { slidesCount = Object.keys(newValue).length; } + scope.$emit('rnCarousel:CollectionUpdated', slidesCount); updateIndicatorArray(); if (!containerWidth) updateContainerWidth(); goToSlide(scope.carouselIndex); diff --git a/dist/angular-carousel.min.js b/dist/angular-carousel.min.js index 5d8559e..15302f9 100644 --- a/dist/angular-carousel.min.js +++ b/dist/angular-carousel.min.js @@ -1,8 +1,8 @@ /** * Angular Carousel - Mobile friendly touch carousel for AngularJS - * @version v0.2.3 - 2014-07-21 + * @version v0.2.3 - 2014-07-31 * @link http://revolunet.github.com/angular-carousel * @author Julien Bouquillon <julien@revolunet.com> * @license MIT License, http://www.opensource.org/licenses/MIT */ -angular.module("angular-carousel",["ngTouch"]),angular.module("angular-carousel").directive("rnCarouselAutoSlide",["$timeout",function(a){return{restrict:"A",link:function(b,c,d){var e=Math.round(1e3*parseFloat(d.rnCarouselAutoSlide)),f=increment=!1,g=c.children().length;b.carouselExposedIndex||(b.carouselExposedIndex=0),stopAutoplay=function(){angular.isDefined(f)&&a.cancel(f),f=void 0},increment=function(){b.carouselExposedIndex=b.carouselExposedIndex<g-1?b.carouselExposedIndex+1:0},restartTimer=function(){stopAutoplay(),f=a(increment,e)},b.$watch("carouselIndex",function(){restartTimer()}),restartTimer(),d.rnCarouselPauseOnHover&&"false"!=d.rnCarouselPauseOnHover&&(c.on("mouseenter",stopAutoplay),c.on("mouseleave",restartTimer)),b.$on("$destroy",function(){stopAutoplay(),c.off("mouseenter",stopAutoplay),c.off("mouseleave",restartTimer)})}}}]),angular.module("angular-carousel").directive("rnCarouselControls",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},link:function(a){a.prev=function(){a.index>0&&a.index--},a.next=function(){a.index<a.items.length-1&&a.index++}},templateUrl:"carousel-controls.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-controls.html",'<div class="rn-carousel-controls">\n <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prev()" ng-if="index > 0"></span>\n <span class="rn-carousel-control rn-carousel-control-next" ng-click="next()" ng-if="index < items.length - 1"></span>\n</div>')}]),angular.module("angular-carousel").directive("rnCarouselIndicators",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},templateUrl:"carousel-indicators.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-indicators.html",'<div class="rn-carousel-indicator">\n <span ng-repeat="item in items" ng-click="$parent.index=$index" ng-class="{active: $index==$parent.index}"></span>\n</div>')}]),function(){"use strict";angular.module("angular-carousel").directive("rnCarousel",["$swipe","$window","$document","$parse","$compile","$rootScope",function(a,b,c,d,e,f){var g=0,h=75,i=.05,j=3,k=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame;return{restrict:"A",scope:!0,compile:function(l,m){var n,o,p=l.children()[0].attributes,q=!1,r=!1,s=!1;return l.addClass("rn-carousel-slides"),l.children().addClass("rn-carousel-slide"),["ng-repeat","data-ng-repeat","x-ng-repeat"].every(function(a){var b=p[a];if(angular.isDefined(b)){var c=b.value.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/),d=c[3];if(n=c[1],o=c[2],n)return angular.isDefined(m.rnCarouselBuffered)&&(r=!0,b.value=n+" in "+o+"|carouselSlice:carouselBufferIndex:carouselBufferSize",d&&(b.value+=" track by "+d)),q=!0,!1}return!0}),function(l,m,n){function p(){for(var a=[],b=0;Q>b;b++)a[b]=b;l.carouselIndicatorArray=a}function t(){var a=S.children();return I=0===a.length?S[0].getBoundingClientRect().width:a[0].getBoundingClientRect().width}function u(){T.css("width","100%");var a=t();a&&T.css("width",a+"px")}function v(a){isNaN(a)&&(a=l.carouselIndex*I),P=a;var b=-Math.round(P);b+=l.carouselBufferIndex*I,S[0].style[J]=Y?"translate3d("+b+"px, 0, 0)":"translate("+b+"px, 0)"}function w(){var a,b;M&&(a=Date.now()-O,b=M*Math.exp(-a/h),b>j||-j>b?(v(N-b),k(w)):z(N/I))}function x(a){return a>=Q?Q:0>=a?0:a}function y(){var a=0,b=(l.carouselBufferSize-1)/2;r&&(a=l.carouselIndex<=b?0:Q<l.carouselBufferSize?0:l.carouselIndex>Q-l.carouselBufferSize?Q-l.carouselBufferSize:l.carouselIndex-b),l.carouselBufferIndex=a}function z(a,b){return isNaN(a)&&(a=l.carouselIndex),b?(P=a*I,void F(null,null,!0)):(l.carouselIndex=x(a),y(),"$apply"!==f.$$phase&&"$digest"!==f.$$phase&&(s?l.$apply():l.$digest()),void v())}function A(){return i*I}function B(a){R=!0,F({x:a.clientX,y:a.clientY},a)}function C(a){var b=a;return 0===l.carouselIndex?b=Math.max(-A(),b):l.carouselIndex===Q-1&&(b=Math.min((Q-1)*I+A(),b)),b}function D(a){return c.bind("mouseup",B),K=!0,L=a.x,M=0,O=Date.now(),!1}function E(a){var b,c;return K&&(b=a.x,c=L-b,(c>2||-2>c)&&(R=!0,L=b,k(function(){v(C(P+c))}))),!1}function F(a,b,d){if(!b||R){c.unbind("mouseup",B),K=!1,R=!1,N=P;var e=A(),f=l.carouselIndex*I,g=f-N,h=-Math[g>=0?"ceil":"floor"](g/I),i=Math.abs(g)>e;h+l.carouselIndex>=Q&&(h=Q-1-l.carouselIndex),h+l.carouselIndex<0&&(h=-l.carouselIndex);var j=i?h:0;return N=(j+l.carouselIndex)*I,M=N-P,O=Date.now(),d&&(M=P-f),k(w),!1}}function G(){var a,b=document.createElement("p"),c={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",transform:"transform"};document.body.insertBefore(b,null);for(var d in c)void 0!==b.style[d]&&(b.style[d]="translate3d(1px,1px,1px)",a=window.getComputedStyle(b).getPropertyValue(c[d]));return document.body.removeChild(b),void 0!==a&&a.length>0&&"none"!==a}function H(){u(),z()}g++;var I,J,K,L,M,N,O,P=0,Q=0,R=!1,S=m.wrap("<div id='carousel-"+g+"' class='rn-carousel-container'></div>"),T=S.parent();if((angular.isDefined(n.rnCarouselIndicator)||angular.isDefined(n.rnCarouselControl))&&(p(),l.$watch("carouselIndex",function(a){l.indicatorIndex=a,l.carouselExposedIndex=a}),l.$watch("indicatorIndex",function(a){z(a,!0)})),l.$watch("carouselExposedIndex",function(a){z(a,!0)}),angular.isDefined(n.rnCarouselIndicator)){var U=e("<div id='carousel-"+g+"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(l);T.append(U)}if(angular.isDefined(n.rnCarouselControl)){var V=e("<div id='carousel-"+g+"-controls' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-controls class='rn-carousel-controls'></div>")(l);T.append(V)}if(l.carouselBufferIndex=0,l.carouselBufferSize=5,l.carouselIndex=0,n.rnCarouselIndex){var W=function(a){X.assign(l.$parent,a)},X=d(n.rnCarouselIndex);angular.isFunction(X.assign)?(l.$watch("carouselIndex",function(a){W(a)}),l.carouselIndex=X(l),l.$parent.$watch(X,function(a){void 0!==a&&(a>=Q?(a=Q-1,W(a)):0>a&&(a=0,W(a)),z(a,!0))}),s=!0):isNaN(n.rnCarouselIndex)||(l.carouselIndex=parseInt(n.rnCarouselIndex,10))}q?l.$watchCollection(o,function(a){Q=0,angular.isArray(a)?Q=a.length:angular.isObject(a)&&(Q=Object.keys(a).length),p(),I||u(),z(l.carouselIndex)}):(Q=m.children().length,p(),u()),n.$observe("rnCarouselSwipe",function(b){"false"!==b&&"off"!==b?a.bind(S,{start:D,move:E,end:F,cancel:function(a){F({},a)}}):S.unbind()}),s||z(l.carouselIndex),J="transform",["webkit","Moz","O","ms"].every(function(a){var b=a+"Transform";return"undefined"!=typeof document.body.style[b]?(J=b,!1):!0});var Y=G(),Z=angular.element(b);Z.bind("orientationchange",H),Z.bind("resize",H),l.$on("$destroy",function(){c.unbind("mouseup",B),Z.unbind("orientationchange",H),Z.unbind("resize",H)})}}}}])}(),function(){"use strict";angular.module("angular-carousel").filter("carouselSlice",function(){return function(a,b,c){return angular.isArray(a)?a.slice(b,b+c):angular.isObject(a)?a:void 0}})}(); \ No newline at end of file +angular.module("angular-carousel",["ngTouch"]),angular.module("angular-carousel").directive("rnCarouselAutoSlide",["$timeout",function(a){return{restrict:"A",link:function(b,c,d){function e(){angular.isDefined(i)&&a.cancel(i),i=void 0}function f(){b.carouselExposedIndex=b.carouselExposedIndex<j-1?b.carouselExposedIndex+1:0}function g(){e(),i=a(function(){f()},h)}var h=Math.round(1e3*parseFloat(d.rnCarouselAutoSlide)),i=!1,j=c.children().length;notrepeat=!0,b.$on("rnCarousel:CollectionUpdated",function(a,b){j=b,notrepeat=!1}),b.carouselExposedIndex||(b.carouselExposedIndex=0),b.$watch("carouselIndex",function(){g()}),g(),d.rnCarouselPauseOnHover&&"false"!=d.rnCarouselPauseOnHover&&(c.on("mouseenter",e),c.on("mouseleave",g)),b.$on("$destroy",function(){e(),c.off("mouseenter",e),c.off("mouseleave",g)})}}}]),angular.module("angular-carousel").directive("rnCarouselControls",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},link:function(a){a.prev=function(){a.index>0&&a.index--},a.next=function(){a.index<a.items.length-1&&a.index++}},templateUrl:"carousel-controls.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-controls.html",'<div class="rn-carousel-controls">\n <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prev()" ng-if="index > 0"></span>\n <span class="rn-carousel-control rn-carousel-control-next" ng-click="next()" ng-if="index < items.length - 1"></span>\n</div>')}]),angular.module("angular-carousel").directive("rnCarouselIndicators",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},templateUrl:"carousel-indicators.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-indicators.html",'<div class="rn-carousel-indicator">\n <span ng-repeat="item in items" ng-click="$parent.index=$index" ng-class="{active: $index==$parent.index}"></span>\n</div>')}]),function(){"use strict";angular.module("angular-carousel").directive("rnCarousel",["$swipe","$window","$document","$parse","$compile","$rootScope",function(a,b,c,d,e,f){var g=0,h=75,i=.05,j=3,k=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame;return{restrict:"A",scope:!0,compile:function(l,m){var n,o,p=l.children()[0].attributes,q=!1,r=!1,s=!1;return l.addClass("rn-carousel-slides"),l.children().addClass("rn-carousel-slide"),["ng-repeat","data-ng-repeat","x-ng-repeat"].every(function(a){var b=p[a];if(angular.isDefined(b)){var c=b.value.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/),d=c[3];if(n=c[1],o=c[2],n)return angular.isDefined(m.rnCarouselBuffered)&&(r=!0,b.value=n+" in "+o+"|carouselSlice:carouselBufferIndex:carouselBufferSize",d&&(b.value+=" track by "+d)),q=!0,!1}return!0}),function(l,m,n){function p(){for(var a=[],b=0;Q>b;b++)a[b]=b;l.carouselIndicatorArray=a}function t(){var a=S.children();return I=0===a.length?S[0].getBoundingClientRect().width:a[0].getBoundingClientRect().width}function u(){T.css("width","100%");var a=t();a&&T.css("width",a+"px")}function v(a){isNaN(a)&&(a=l.carouselIndex*I),P=a;var b=-Math.round(P);b+=l.carouselBufferIndex*I,S[0].style[J]=Y?"translate3d("+b+"px, 0, 0)":"translate("+b+"px, 0)"}function w(){var a,b;M&&(a=Date.now()-O,b=M*Math.exp(-a/h),b>j||-j>b?(v(N-b),k(w)):z(N/I))}function x(a){return a>=Q?Q:0>=a?0:a}function y(){var a=0,b=(l.carouselBufferSize-1)/2;r&&(a=l.carouselIndex<=b?0:Q<l.carouselBufferSize?0:l.carouselIndex>Q-l.carouselBufferSize?Q-l.carouselBufferSize:l.carouselIndex-b),l.carouselBufferIndex=a}function z(a,b){return isNaN(a)&&(a=l.carouselIndex),b?(P=a*I,void F(null,null,!0)):(l.carouselIndex=x(a),y(),"$apply"!==f.$$phase&&"$digest"!==f.$$phase&&(s?l.$apply():l.$digest()),void v())}function A(){return i*I}function B(a){R=!0,F({x:a.clientX,y:a.clientY},a)}function C(a){var b=a;return 0===l.carouselIndex?b=Math.max(-A(),b):l.carouselIndex===Q-1&&(b=Math.min((Q-1)*I+A(),b)),b}function D(a){return c.bind("mouseup",B),K=!0,L=a.x,M=0,O=Date.now(),!1}function E(a){var b,c;return K&&(b=a.x,c=L-b,(c>2||-2>c)&&(R=!0,L=b,k(function(){v(C(P+c))}))),!1}function F(a,b,d){if(!b||R){c.unbind("mouseup",B),K=!1,R=!1,N=P;var e=A(),f=l.carouselIndex*I,g=f-N,h=-Math[g>=0?"ceil":"floor"](g/I),i=Math.abs(g)>e;h+l.carouselIndex>=Q&&(h=Q-1-l.carouselIndex),h+l.carouselIndex<0&&(h=-l.carouselIndex);var j=i?h:0;return N=(j+l.carouselIndex)*I,M=N-P,O=Date.now(),d&&(M=P-f),k(w),!1}}function G(){var a,b=document.createElement("p"),c={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",transform:"transform"};document.body.insertBefore(b,null);for(var d in c)void 0!==b.style[d]&&(b.style[d]="translate3d(1px,1px,1px)",a=window.getComputedStyle(b).getPropertyValue(c[d]));return document.body.removeChild(b),void 0!==a&&a.length>0&&"none"!==a}function H(){u(),z()}g++;var I,J,K,L,M,N,O,P=0,Q=0,R=!1,S=m.wrap("<div id='carousel-"+g+"' class='rn-carousel-container'></div>"),T=S.parent();if((angular.isDefined(n.rnCarouselIndicator)||angular.isDefined(n.rnCarouselControl))&&(p(),l.$watch("carouselIndex",function(a){l.indicatorIndex=a,l.carouselExposedIndex=a}),l.$watch("indicatorIndex",function(a){z(a,!0)})),l.$watch("carouselExposedIndex",function(a){z(a,!0)}),angular.isDefined(n.rnCarouselIndicator)){var U=e("<div id='carousel-"+g+"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(l);T.append(U)}if(angular.isDefined(n.rnCarouselControl)){var V=e("<div id='carousel-"+g+"-controls' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-controls class='rn-carousel-controls'></div>")(l);T.append(V)}if(l.carouselBufferIndex=0,l.carouselBufferSize=5,l.carouselIndex=0,n.rnCarouselIndex){var W=function(a){X.assign(l.$parent,a)},X=d(n.rnCarouselIndex);angular.isFunction(X.assign)?(l.$watch("carouselIndex",function(a){W(a)}),l.carouselIndex=X(l),l.$parent.$watch(X,function(a){void 0!==a&&(a>=Q?(a=Q-1,W(a)):0>a&&(a=0,W(a)),z(a,!0))}),s=!0):isNaN(n.rnCarouselIndex)||(l.carouselIndex=parseInt(n.rnCarouselIndex,10))}q?l.$watchCollection(o,function(a){Q=0,angular.isArray(a)?Q=a.length:angular.isObject(a)&&(Q=Object.keys(a).length),l.$emit("rnCarousel:CollectionUpdated",Q),p(),I||u(),z(l.carouselIndex)}):(Q=m.children().length,p(),u()),n.$observe("rnCarouselSwipe",function(b){"false"!==b&&"off"!==b?a.bind(S,{start:D,move:E,end:F,cancel:function(a){F({},a)}}):S.unbind()}),s||z(l.carouselIndex),J="transform",["webkit","Moz","O","ms"].every(function(a){var b=a+"Transform";return"undefined"!=typeof document.body.style[b]?(J=b,!1):!0});var Y=G(),Z=angular.element(b);Z.bind("orientationchange",H),Z.bind("resize",H),l.$on("$destroy",function(){c.unbind("mouseup",B),Z.unbind("orientationchange",H),Z.unbind("resize",H)})}}}}])}(),function(){"use strict";angular.module("angular-carousel").filter("carouselSlice",function(){return function(a,b,c){return angular.isArray(a)?a.slice(b,b+c):angular.isObject(a)?a:void 0}})}(); \ No newline at end of file diff --git a/index.html b/index.html index 235a15f..610dfd2 100644 --- a/index.html +++ b/index.html @@ -123,7 +123,7 @@ <h3>Autoplay slider</h3> <br/> By adding <strong>rn-carousel-pause-on-hover="true"</strong> the slide will pause on mouse hover and start on mouse leave </div> - <ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3" rn-carousel-control="true" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> + <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-control="true" id="defaultSlider" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> <li ng-style="{'background-color': colors[0]}"> This is a standard template <div class="big">slide #1</div> @@ -141,6 +141,22 @@ <h3>Autoplay slider</h3> <iframe width="100%" height="80%" src="//www.youtube.com/embed/OQSNhk5ICTI" frameborder="0" allowfullscreen></iframe> </li> </ul> + + <h3>Autoplay slider with <strong>ng-repeat</strong></h3> + + <div class="details"> + <strong>rn-carousel-auto-slide</strong> works with ng-repeat + </div> + <ul rn-carousel rn-carousel-auto-slide="3" id="repeatSlider" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> + <li ng-repeat="slide in slides4" ng-style="{'background-image': 'url(' + slide.img + ')'}"> + <div class="debug"> + {{ slide.label }} / {{ slides4.length }} + <br> + carouselIndex: {{ carouselIndex }}<br> + carouselBufferIndex: {{ carouselBufferIndex }}<br> + </div> + </li> + </ul> <br/><br/> <h3>Other demos</h3> <ul> diff --git a/src/directives/rn-carousel-auto-slide.js b/src/directives/rn-carousel-auto-slide.js index 6773b6b..e5c76af 100644 --- a/src/directives/rn-carousel-auto-slide.js +++ b/src/directives/rn-carousel-auto-slide.js @@ -4,31 +4,41 @@ angular.module('angular-carousel') return { restrict: 'A', link: function (scope, element, attrs) { + var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000), - timer = increment = false, slidesCount = element.children().length; + timer = false, slidesCount = element.children().length; + notrepeat = true; + + scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ + slidesCount = newSlidesCount; + notrepeat = false + }); if(!scope.carouselExposedIndex){ scope.carouselExposedIndex = 0; } - stopAutoplay = function () { + + function stopAutoplay() { if (angular.isDefined(timer)) { $timeout.cancel(timer); } timer = undefined; - }; + } - increment = function () { + function increment() { if (scope.carouselExposedIndex < slidesCount - 1) { scope.carouselExposedIndex = scope.carouselExposedIndex + 1; } else { scope.carouselExposedIndex = 0; } - }; + } - restartTimer = function (){ + function restartTimer(){ stopAutoplay(); - timer = $timeout(increment, delay); - }; + timer = $timeout(function(){ + increment() + }, delay); + } scope.$watch('carouselIndex', function(){ restartTimer(); @@ -37,7 +47,6 @@ angular.module('angular-carousel') restartTimer(); if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){ element.on('mouseenter', stopAutoplay); - element.on('mouseleave', restartTimer); } diff --git a/src/directives/rn-carousel.js b/src/directives/rn-carousel.js index 9365a6c..7f1233c 100755 --- a/src/directives/rn-carousel.js +++ b/src/directives/rn-carousel.js @@ -151,6 +151,7 @@ } else if (angular.isObject(newValue)) { slidesCount = Object.keys(newValue).length; } + scope.$emit('rnCarousel:CollectionUpdated', slidesCount); updateIndicatorArray(); if (!containerWidth) updateContainerWidth(); goToSlide(scope.carouselIndex); From 7972dd19d5f97183d34ce4e0b305331218378464 Mon Sep 17 00:00:00 2001 From: CosticaPuntaru <ticaasd@gmail.com> Date: Thu, 7 Aug 2014 09:35:52 +0300 Subject: [PATCH 2/4] removing unneeded id --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 610dfd2..366def7 100644 --- a/index.html +++ b/index.html @@ -123,7 +123,7 @@ <h3>Autoplay slider</h3> <br/> By adding <strong>rn-carousel-pause-on-hover="true"</strong> the slide will pause on mouse hover and start on mouse leave </div> - <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-control="true" id="defaultSlider" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> + <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-control="true" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> <li ng-style="{'background-color': colors[0]}"> This is a standard template <div class="big">slide #1</div> From 2ed06af9f7b35beb6ca9d0171f3304cf008206af Mon Sep 17 00:00:00 2001 From: CosticaPuntaru <ticaasd@gmail.com> Date: Thu, 7 Aug 2014 09:38:01 +0300 Subject: [PATCH 3/4] removing unused id --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 366def7..a9923ec 100644 --- a/index.html +++ b/index.html @@ -147,7 +147,7 @@ <h3>Autoplay slider with <strong>ng-repeat</strong></h3> <div class="details"> <strong>rn-carousel-auto-slide</strong> works with ng-repeat </div> - <ul rn-carousel rn-carousel-auto-slide="3" id="repeatSlider" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> + <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak"> <li ng-repeat="slide in slides4" ng-style="{'background-image': 'url(' + slide.img + ')'}"> <div class="debug"> {{ slide.label }} / {{ slides4.length }} From 64b781b1b655128a0cf8bfcce89492254846bcc3 Mon Sep 17 00:00:00 2001 From: Costica Puntaru <pc@everymatrix.com> Date: Mon, 25 Aug 2014 13:43:51 +0300 Subject: [PATCH 4/4] refactoring code --- dist/angular-carousel.js | 37 ++++++++++++------------ dist/angular-carousel.min.js | 4 +-- src/directives/rn-carousel-auto-slide.js | 35 +++++++++++----------- 3 files changed, 37 insertions(+), 39 deletions(-) diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 1e708cf..fc6268c 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -1,6 +1,6 @@ /** * Angular Carousel - Mobile friendly touch carousel for AngularJS - * @version v0.2.3 - 2014-07-31 + * @version v0.2.3 - 2014-08-25 * @link http://revolunet.github.com/angular-carousel * @author Julien Bouquillon <julien@revolunet.com> * @license MIT License, http://www.opensource.org/licenses/MIT @@ -26,37 +26,36 @@ angular.module('angular-carousel') var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000), timer = false, slidesCount = element.children().length; - notrepeat = true; - scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ - slidesCount = newSlidesCount; - notrepeat = false - }); - - if(!scope.carouselExposedIndex){ - scope.carouselExposedIndex = 0; - } - function stopAutoplay() { + var stopAutoPlay = function () { if (angular.isDefined(timer)) { $timeout.cancel(timer); } timer = undefined; - } + }; - function increment() { + var increment = function () { if (scope.carouselExposedIndex < slidesCount - 1) { scope.carouselExposedIndex = scope.carouselExposedIndex + 1; } else { scope.carouselExposedIndex = 0; } - } + }; - function restartTimer(){ - stopAutoplay(); + var restartTimer =function (){ + stopAutoPlay(); timer = $timeout(function(){ increment() }, delay); + }; + + scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ + slidesCount = newSlidesCount; + }); + + if(!scope.carouselExposedIndex){ + scope.carouselExposedIndex = 0; } scope.$watch('carouselIndex', function(){ @@ -65,13 +64,13 @@ angular.module('angular-carousel') restartTimer(); if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){ - element.on('mouseenter', stopAutoplay); + 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); }); diff --git a/dist/angular-carousel.min.js b/dist/angular-carousel.min.js index 15302f9..9bb5711 100644 --- a/dist/angular-carousel.min.js +++ b/dist/angular-carousel.min.js @@ -1,8 +1,8 @@ /** * Angular Carousel - Mobile friendly touch carousel for AngularJS - * @version v0.2.3 - 2014-07-31 + * @version v0.2.3 - 2014-08-25 * @link http://revolunet.github.com/angular-carousel * @author Julien Bouquillon <julien@revolunet.com> * @license MIT License, http://www.opensource.org/licenses/MIT */ -angular.module("angular-carousel",["ngTouch"]),angular.module("angular-carousel").directive("rnCarouselAutoSlide",["$timeout",function(a){return{restrict:"A",link:function(b,c,d){function e(){angular.isDefined(i)&&a.cancel(i),i=void 0}function f(){b.carouselExposedIndex=b.carouselExposedIndex<j-1?b.carouselExposedIndex+1:0}function g(){e(),i=a(function(){f()},h)}var h=Math.round(1e3*parseFloat(d.rnCarouselAutoSlide)),i=!1,j=c.children().length;notrepeat=!0,b.$on("rnCarousel:CollectionUpdated",function(a,b){j=b,notrepeat=!1}),b.carouselExposedIndex||(b.carouselExposedIndex=0),b.$watch("carouselIndex",function(){g()}),g(),d.rnCarouselPauseOnHover&&"false"!=d.rnCarouselPauseOnHover&&(c.on("mouseenter",e),c.on("mouseleave",g)),b.$on("$destroy",function(){e(),c.off("mouseenter",e),c.off("mouseleave",g)})}}}]),angular.module("angular-carousel").directive("rnCarouselControls",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},link:function(a){a.prev=function(){a.index>0&&a.index--},a.next=function(){a.index<a.items.length-1&&a.index++}},templateUrl:"carousel-controls.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-controls.html",'<div class="rn-carousel-controls">\n <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prev()" ng-if="index > 0"></span>\n <span class="rn-carousel-control rn-carousel-control-next" ng-click="next()" ng-if="index < items.length - 1"></span>\n</div>')}]),angular.module("angular-carousel").directive("rnCarouselIndicators",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},templateUrl:"carousel-indicators.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-indicators.html",'<div class="rn-carousel-indicator">\n <span ng-repeat="item in items" ng-click="$parent.index=$index" ng-class="{active: $index==$parent.index}"></span>\n</div>')}]),function(){"use strict";angular.module("angular-carousel").directive("rnCarousel",["$swipe","$window","$document","$parse","$compile","$rootScope",function(a,b,c,d,e,f){var g=0,h=75,i=.05,j=3,k=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame;return{restrict:"A",scope:!0,compile:function(l,m){var n,o,p=l.children()[0].attributes,q=!1,r=!1,s=!1;return l.addClass("rn-carousel-slides"),l.children().addClass("rn-carousel-slide"),["ng-repeat","data-ng-repeat","x-ng-repeat"].every(function(a){var b=p[a];if(angular.isDefined(b)){var c=b.value.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/),d=c[3];if(n=c[1],o=c[2],n)return angular.isDefined(m.rnCarouselBuffered)&&(r=!0,b.value=n+" in "+o+"|carouselSlice:carouselBufferIndex:carouselBufferSize",d&&(b.value+=" track by "+d)),q=!0,!1}return!0}),function(l,m,n){function p(){for(var a=[],b=0;Q>b;b++)a[b]=b;l.carouselIndicatorArray=a}function t(){var a=S.children();return I=0===a.length?S[0].getBoundingClientRect().width:a[0].getBoundingClientRect().width}function u(){T.css("width","100%");var a=t();a&&T.css("width",a+"px")}function v(a){isNaN(a)&&(a=l.carouselIndex*I),P=a;var b=-Math.round(P);b+=l.carouselBufferIndex*I,S[0].style[J]=Y?"translate3d("+b+"px, 0, 0)":"translate("+b+"px, 0)"}function w(){var a,b;M&&(a=Date.now()-O,b=M*Math.exp(-a/h),b>j||-j>b?(v(N-b),k(w)):z(N/I))}function x(a){return a>=Q?Q:0>=a?0:a}function y(){var a=0,b=(l.carouselBufferSize-1)/2;r&&(a=l.carouselIndex<=b?0:Q<l.carouselBufferSize?0:l.carouselIndex>Q-l.carouselBufferSize?Q-l.carouselBufferSize:l.carouselIndex-b),l.carouselBufferIndex=a}function z(a,b){return isNaN(a)&&(a=l.carouselIndex),b?(P=a*I,void F(null,null,!0)):(l.carouselIndex=x(a),y(),"$apply"!==f.$$phase&&"$digest"!==f.$$phase&&(s?l.$apply():l.$digest()),void v())}function A(){return i*I}function B(a){R=!0,F({x:a.clientX,y:a.clientY},a)}function C(a){var b=a;return 0===l.carouselIndex?b=Math.max(-A(),b):l.carouselIndex===Q-1&&(b=Math.min((Q-1)*I+A(),b)),b}function D(a){return c.bind("mouseup",B),K=!0,L=a.x,M=0,O=Date.now(),!1}function E(a){var b,c;return K&&(b=a.x,c=L-b,(c>2||-2>c)&&(R=!0,L=b,k(function(){v(C(P+c))}))),!1}function F(a,b,d){if(!b||R){c.unbind("mouseup",B),K=!1,R=!1,N=P;var e=A(),f=l.carouselIndex*I,g=f-N,h=-Math[g>=0?"ceil":"floor"](g/I),i=Math.abs(g)>e;h+l.carouselIndex>=Q&&(h=Q-1-l.carouselIndex),h+l.carouselIndex<0&&(h=-l.carouselIndex);var j=i?h:0;return N=(j+l.carouselIndex)*I,M=N-P,O=Date.now(),d&&(M=P-f),k(w),!1}}function G(){var a,b=document.createElement("p"),c={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",transform:"transform"};document.body.insertBefore(b,null);for(var d in c)void 0!==b.style[d]&&(b.style[d]="translate3d(1px,1px,1px)",a=window.getComputedStyle(b).getPropertyValue(c[d]));return document.body.removeChild(b),void 0!==a&&a.length>0&&"none"!==a}function H(){u(),z()}g++;var I,J,K,L,M,N,O,P=0,Q=0,R=!1,S=m.wrap("<div id='carousel-"+g+"' class='rn-carousel-container'></div>"),T=S.parent();if((angular.isDefined(n.rnCarouselIndicator)||angular.isDefined(n.rnCarouselControl))&&(p(),l.$watch("carouselIndex",function(a){l.indicatorIndex=a,l.carouselExposedIndex=a}),l.$watch("indicatorIndex",function(a){z(a,!0)})),l.$watch("carouselExposedIndex",function(a){z(a,!0)}),angular.isDefined(n.rnCarouselIndicator)){var U=e("<div id='carousel-"+g+"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(l);T.append(U)}if(angular.isDefined(n.rnCarouselControl)){var V=e("<div id='carousel-"+g+"-controls' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-controls class='rn-carousel-controls'></div>")(l);T.append(V)}if(l.carouselBufferIndex=0,l.carouselBufferSize=5,l.carouselIndex=0,n.rnCarouselIndex){var W=function(a){X.assign(l.$parent,a)},X=d(n.rnCarouselIndex);angular.isFunction(X.assign)?(l.$watch("carouselIndex",function(a){W(a)}),l.carouselIndex=X(l),l.$parent.$watch(X,function(a){void 0!==a&&(a>=Q?(a=Q-1,W(a)):0>a&&(a=0,W(a)),z(a,!0))}),s=!0):isNaN(n.rnCarouselIndex)||(l.carouselIndex=parseInt(n.rnCarouselIndex,10))}q?l.$watchCollection(o,function(a){Q=0,angular.isArray(a)?Q=a.length:angular.isObject(a)&&(Q=Object.keys(a).length),l.$emit("rnCarousel:CollectionUpdated",Q),p(),I||u(),z(l.carouselIndex)}):(Q=m.children().length,p(),u()),n.$observe("rnCarouselSwipe",function(b){"false"!==b&&"off"!==b?a.bind(S,{start:D,move:E,end:F,cancel:function(a){F({},a)}}):S.unbind()}),s||z(l.carouselIndex),J="transform",["webkit","Moz","O","ms"].every(function(a){var b=a+"Transform";return"undefined"!=typeof document.body.style[b]?(J=b,!1):!0});var Y=G(),Z=angular.element(b);Z.bind("orientationchange",H),Z.bind("resize",H),l.$on("$destroy",function(){c.unbind("mouseup",B),Z.unbind("orientationchange",H),Z.unbind("resize",H)})}}}}])}(),function(){"use strict";angular.module("angular-carousel").filter("carouselSlice",function(){return function(a,b,c){return angular.isArray(a)?a.slice(b,b+c):angular.isObject(a)?a:void 0}})}(); \ No newline at end of file +angular.module("angular-carousel",["ngTouch"]),angular.module("angular-carousel").directive("rnCarouselAutoSlide",["$timeout",function(a){return{restrict:"A",link:function(b,c,d){var e=Math.round(1e3*parseFloat(d.rnCarouselAutoSlide)),f=!1,g=c.children().length,h=function(){angular.isDefined(f)&&a.cancel(f),f=void 0},i=function(){b.carouselExposedIndex=b.carouselExposedIndex<g-1?b.carouselExposedIndex+1:0},j=function(){h(),f=a(function(){i()},e)};b.$on("rnCarousel:CollectionUpdated",function(a,b){g=b}),b.carouselExposedIndex||(b.carouselExposedIndex=0),b.$watch("carouselIndex",function(){j()}),j(),d.rnCarouselPauseOnHover&&"false"!=d.rnCarouselPauseOnHover&&(c.on("mouseenter",h),c.on("mouseleave",j)),b.$on("$destroy",function(){h(),c.off("mouseenter",h),c.off("mouseleave",j)})}}}]),angular.module("angular-carousel").directive("rnCarouselControls",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},link:function(a){a.prev=function(){a.index>0&&a.index--},a.next=function(){a.index<a.items.length-1&&a.index++}},templateUrl:"carousel-controls.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-controls.html",'<div class="rn-carousel-controls">\n <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prev()" ng-if="index > 0"></span>\n <span class="rn-carousel-control rn-carousel-control-next" ng-click="next()" ng-if="index < items.length - 1"></span>\n</div>')}]),angular.module("angular-carousel").directive("rnCarouselIndicators",[function(){return{restrict:"A",replace:!0,scope:{items:"=",index:"="},templateUrl:"carousel-indicators.html"}}]),angular.module("angular-carousel").run(["$templateCache",function(a){a.put("carousel-indicators.html",'<div class="rn-carousel-indicator">\n <span ng-repeat="item in items" ng-click="$parent.index=$index" ng-class="{active: $index==$parent.index}"></span>\n</div>')}]),function(){"use strict";angular.module("angular-carousel").directive("rnCarousel",["$swipe","$window","$document","$parse","$compile","$rootScope",function(a,b,c,d,e,f){var g=0,h=75,i=.05,j=3,k=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame;return{restrict:"A",scope:!0,compile:function(l,m){var n,o,p=l.children()[0].attributes,q=!1,r=!1,s=!1;return l.addClass("rn-carousel-slides"),l.children().addClass("rn-carousel-slide"),["ng-repeat","data-ng-repeat","x-ng-repeat"].every(function(a){var b=p[a];if(angular.isDefined(b)){var c=b.value.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/),d=c[3];if(n=c[1],o=c[2],n)return angular.isDefined(m.rnCarouselBuffered)&&(r=!0,b.value=n+" in "+o+"|carouselSlice:carouselBufferIndex:carouselBufferSize",d&&(b.value+=" track by "+d)),q=!0,!1}return!0}),function(l,m,n){function p(){for(var a=[],b=0;Q>b;b++)a[b]=b;l.carouselIndicatorArray=a}function t(){var a=S.children();return I=0===a.length?S[0].getBoundingClientRect().width:a[0].getBoundingClientRect().width}function u(){T.css("width","100%");var a=t();a&&T.css("width",a+"px")}function v(a){isNaN(a)&&(a=l.carouselIndex*I),P=a;var b=-Math.round(P);b+=l.carouselBufferIndex*I,S[0].style[J]=Y?"translate3d("+b+"px, 0, 0)":"translate("+b+"px, 0)"}function w(){var a,b;M&&(a=Date.now()-O,b=M*Math.exp(-a/h),b>j||-j>b?(v(N-b),k(w)):z(N/I))}function x(a){return a>=Q?Q:0>=a?0:a}function y(){var a=0,b=(l.carouselBufferSize-1)/2;r&&(a=l.carouselIndex<=b?0:Q<l.carouselBufferSize?0:l.carouselIndex>Q-l.carouselBufferSize?Q-l.carouselBufferSize:l.carouselIndex-b),l.carouselBufferIndex=a}function z(a,b){return isNaN(a)&&(a=l.carouselIndex),b?(P=a*I,void F(null,null,!0)):(l.carouselIndex=x(a),y(),"$apply"!==f.$$phase&&"$digest"!==f.$$phase&&(s?l.$apply():l.$digest()),void v())}function A(){return i*I}function B(a){R=!0,F({x:a.clientX,y:a.clientY},a)}function C(a){var b=a;return 0===l.carouselIndex?b=Math.max(-A(),b):l.carouselIndex===Q-1&&(b=Math.min((Q-1)*I+A(),b)),b}function D(a){return c.bind("mouseup",B),K=!0,L=a.x,M=0,O=Date.now(),!1}function E(a){var b,c;return K&&(b=a.x,c=L-b,(c>2||-2>c)&&(R=!0,L=b,k(function(){v(C(P+c))}))),!1}function F(a,b,d){if(!b||R){c.unbind("mouseup",B),K=!1,R=!1,N=P;var e=A(),f=l.carouselIndex*I,g=f-N,h=-Math[g>=0?"ceil":"floor"](g/I),i=Math.abs(g)>e;h+l.carouselIndex>=Q&&(h=Q-1-l.carouselIndex),h+l.carouselIndex<0&&(h=-l.carouselIndex);var j=i?h:0;return N=(j+l.carouselIndex)*I,M=N-P,O=Date.now(),d&&(M=P-f),k(w),!1}}function G(){var a,b=document.createElement("p"),c={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",transform:"transform"};document.body.insertBefore(b,null);for(var d in c)void 0!==b.style[d]&&(b.style[d]="translate3d(1px,1px,1px)",a=window.getComputedStyle(b).getPropertyValue(c[d]));return document.body.removeChild(b),void 0!==a&&a.length>0&&"none"!==a}function H(){u(),z()}g++;var I,J,K,L,M,N,O,P=0,Q=0,R=!1,S=m.wrap("<div id='carousel-"+g+"' class='rn-carousel-container'></div>"),T=S.parent();if((angular.isDefined(n.rnCarouselIndicator)||angular.isDefined(n.rnCarouselControl))&&(p(),l.$watch("carouselIndex",function(a){l.indicatorIndex=a,l.carouselExposedIndex=a}),l.$watch("indicatorIndex",function(a){z(a,!0)})),l.$watch("carouselExposedIndex",function(a){z(a,!0)}),angular.isDefined(n.rnCarouselIndicator)){var U=e("<div id='carousel-"+g+"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(l);T.append(U)}if(angular.isDefined(n.rnCarouselControl)){var V=e("<div id='carousel-"+g+"-controls' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-controls class='rn-carousel-controls'></div>")(l);T.append(V)}if(l.carouselBufferIndex=0,l.carouselBufferSize=5,l.carouselIndex=0,n.rnCarouselIndex){var W=function(a){X.assign(l.$parent,a)},X=d(n.rnCarouselIndex);angular.isFunction(X.assign)?(l.$watch("carouselIndex",function(a){W(a)}),l.carouselIndex=X(l),l.$parent.$watch(X,function(a){void 0!==a&&(a>=Q?(a=Q-1,W(a)):0>a&&(a=0,W(a)),z(a,!0))}),s=!0):isNaN(n.rnCarouselIndex)||(l.carouselIndex=parseInt(n.rnCarouselIndex,10))}q?l.$watchCollection(o,function(a){Q=0,angular.isArray(a)?Q=a.length:angular.isObject(a)&&(Q=Object.keys(a).length),l.$emit("rnCarousel:CollectionUpdated",Q),p(),I||u(),z(l.carouselIndex)}):(Q=m.children().length,p(),u()),n.$observe("rnCarouselSwipe",function(b){"false"!==b&&"off"!==b?a.bind(S,{start:D,move:E,end:F,cancel:function(a){F({},a)}}):S.unbind()}),s||z(l.carouselIndex),J="transform",["webkit","Moz","O","ms"].every(function(a){var b=a+"Transform";return"undefined"!=typeof document.body.style[b]?(J=b,!1):!0});var Y=G(),Z=angular.element(b);Z.bind("orientationchange",H),Z.bind("resize",H),l.$on("$destroy",function(){c.unbind("mouseup",B),Z.unbind("orientationchange",H),Z.unbind("resize",H)})}}}}])}(),function(){"use strict";angular.module("angular-carousel").filter("carouselSlice",function(){return function(a,b,c){return angular.isArray(a)?a.slice(b,b+c):angular.isObject(a)?a:void 0}})}(); \ No newline at end of file diff --git a/src/directives/rn-carousel-auto-slide.js b/src/directives/rn-carousel-auto-slide.js index e5c76af..c3859fd 100644 --- a/src/directives/rn-carousel-auto-slide.js +++ b/src/directives/rn-carousel-auto-slide.js @@ -7,37 +7,36 @@ angular.module('angular-carousel') var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000), timer = false, slidesCount = element.children().length; - notrepeat = true; - scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ - slidesCount = newSlidesCount; - notrepeat = false - }); - - if(!scope.carouselExposedIndex){ - scope.carouselExposedIndex = 0; - } - function stopAutoplay() { + var stopAutoPlay = function () { if (angular.isDefined(timer)) { $timeout.cancel(timer); } timer = undefined; - } + }; - function increment() { + var increment = function () { if (scope.carouselExposedIndex < slidesCount - 1) { scope.carouselExposedIndex = scope.carouselExposedIndex + 1; } else { scope.carouselExposedIndex = 0; } - } + }; - function restartTimer(){ - stopAutoplay(); + var restartTimer =function (){ + stopAutoPlay(); timer = $timeout(function(){ increment() }, delay); + }; + + scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){ + slidesCount = newSlidesCount; + }); + + if(!scope.carouselExposedIndex){ + scope.carouselExposedIndex = 0; } scope.$watch('carouselIndex', function(){ @@ -46,13 +45,13 @@ angular.module('angular-carousel') restartTimer(); if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){ - element.on('mouseenter', stopAutoplay); + 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); });