diff --git a/README.md b/README.md index d017aba..71b0ec5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# angular-carousel.js 1.2.0 +# angular-carousel.js 1.2.1 A simple very generic AngularJS carousel. Features: diff --git a/angular-carousel.css b/angular-carousel.css index 7e6de0a..fb9b856 100644 --- a/angular-carousel.css +++ b/angular-carousel.css @@ -1,5 +1,5 @@ -/** - * @license AngularJS v1.2.0 +/*! + * @license AngularJS v1.2.1 * (c) 2015 Lifely * License: MIT */ diff --git a/angular-carousel.js b/angular-carousel.js index 6dbc9b5..284d869 100644 --- a/angular-carousel.js +++ b/angular-carousel.js @@ -1,5 +1,5 @@ /** - * @license AngularJS v1.2.0 + * @license AngularJS v1.2.1 * (c) 2015 Lifely * License: MIT */ @@ -216,82 +216,84 @@ angular.module('angular-carousel', []) removeOldVirtualSlides(); slides = element.find('slide'); - // Add slides before and after the current slides - if(slides.length > 0) { + // Create new carousel and duplicate slides + name = attrs.ngCarouselName; + currentCarousel = Carousel.add(slides.length, attrs.ngCarouselName, scope, { + looping: looping + }); + angular.forEach(savedCallbacks, function(savedCallback) { + currentCarousel.onSlideChange(savedCallback); + currentCarousel.unbindOnSlideChangeCallback(0); + }); - // Create new carousel and duplicate slides - name = attrs.ngCarouselName; - currentCarousel = Carousel.add(slides.length, attrs.ngCarouselName, scope, { - looping: looping - }); - angular.forEach(savedCallbacks, function(savedCallback) { - currentCarousel.onSlideChange(savedCallback); - currentCarousel.unbindOnSlideChangeCallback(0); - }); + // Duplicate first and last slide (for infinite effect) + var refreshVirtualSlides = function() { + removeOldVirtualSlides(); - // Duplicate first and last slide (for infinite effect) - var refreshVirtualSlides = function() { - removeOldVirtualSlides(); - slides = element.find('slide'); + if(slides.length < 1){ + return; + } - if(looping) { - copyFirstAndLastSlide(); - } - else { - makeFirstAndLastSlideEmpty(); - } + slides = element.find('slide'); - firstSlideCopy.addClass('carousel-slide-copy'); - lastSlideCopy.addClass('carousel-slide-copy'); - slideContainer.append(firstSlideCopy); - slideContainer.prepend(lastSlideCopy); - slideContainer.addClass('carousel-ignore-first-slide'); + if(looping) { + copyFirstAndLastSlide(); + } + else { + makeFirstAndLastSlideEmpty(); + } - }; + firstSlideCopy.addClass('carousel-slide-copy'); + lastSlideCopy.addClass('carousel-slide-copy'); + slideContainer.append(firstSlideCopy); + slideContainer.prepend(lastSlideCopy); + slideContainer.addClass('carousel-ignore-first-slide'); - refreshVirtualSlides(); + }; + + refreshVirtualSlides(); - // On slide change, move the slideContainer - var onSlideChangeCallback = function(slideIndex, wrapping) { - var newSlideIndex = slideIndex + 1; // because the first slide doesn't count + // On slide change, move the slideContainer + var onSlideChangeCallback = function(slideIndex, wrapping) { + var newSlideIndex = slideIndex + 1; // because the first slide doesn't count + if(wrapping === 'left') { + newSlideIndex = 0; // first slide + } else if(wrapping === 'right') { + newSlideIndex = slides.length + 1; // last slide + } + + move(newSlideIndex, true, function() { if(wrapping === 'left') { - newSlideIndex = 0; // first slide + move(slides.length, false); } else if(wrapping === 'right') { - newSlideIndex = slides.length + 1; // last slide + move(1, false); } + }); + + setNextSlideTimeout(); + refreshVirtualSlides(); + }; - move(newSlideIndex, true, function() { - if(wrapping === 'left') { - move(slides.length, false); - } else if(wrapping === 'right') { - move(1, false); - } - }); - - setNextSlideTimeout(); - refreshVirtualSlides(); - }; + if(currentCarousel.onSlideChange){ currentCarousel.onSlideChange(onSlideChangeCallback); + } - // If new slide was out of range, move to the new assigned one - if(savedSlideIndex !== false && currentCarousel.currentSlide !== savedSlideIndex) { - onSlideChangeCallback(currentCarousel.currentSlide, false); - currentCarousel.toIndex(savedSlideIndex); - } + // If new slide was out of range, move to the new assigned one + if(savedSlideIndex !== false && currentCarousel.currentSlide !== savedSlideIndex) { + onSlideChangeCallback(currentCarousel.currentSlide, false); + currentCarousel.toIndex(savedSlideIndex); + } - // Option: random - if(random) { - var randomSlide = Math.floor(Math.random() * currentCarousel.slidesCount); - currentCarousel.toIndex(randomSlide); - } + // Option: random + if(random) { + var randomSlide = Math.floor(Math.random() * currentCarousel.slidesCount); + currentCarousel.toIndex(randomSlide); + } - // Option: interval - if (interval && currentCarousel.slidesCount >= 2) { - setNextSlideTimeout(); - } - } else { - console.log('ng-carousel error: No slides found') + // Option: interval + if (interval && currentCarousel.slidesCount >= 2) { + setNextSlideTimeout(); } // Initialize Hammer diff --git a/angular-carousel.min.css b/angular-carousel.min.css index 95fc4a8..cb6cc21 100644 --- a/angular-carousel.min.css +++ b/angular-carousel.min.css @@ -1,6 +1,5 @@ -/** - * @license AngularJS v1.2.0 +/*! + * @license AngularJS v1.2.1 * (c) 2015 Lifely * License: MIT - */ -.ng-carousel{display:block;width:100%;height:300px;white-space:nowrap;position:relative;overflow:hidden}.ng-carousel slidecontainer{display:block;position:absolute;top:0;width:100%;height:100%;z-index:1;font-size:0}.ng-carousel slidecontainer.carousel-ignore-first-slide{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.ng-carousel slidecontainer.carousel-animate{-webkit-transition:-webkit-transform .5s ease-out 0s;-moz-transition:-moz-transform .5s ease-out 0s;-ms-transition:-ms-transform .5s ease-out 0s;-o-transition:-o-transform .5s ease-out 0s;transition:transform .5s ease-out 0s}.ng-carousel slide{position:relative;display:inline-block;vertical-align:top;font-size:16px;width:100%;height:100%;-webkit-background-size:cover;background-size:cover;background-position:center}.ng-carousel .carousel-arrow{display:inline-block;position:absolute;top:0;bottom:0;z-index:1;width:100px;text-align:center}.ng-carousel .carousel-arrow.carousel-arrow-left{left:0}.ng-carousel .carousel-arrow.carousel-arrow-right{right:0} + */.ng-carousel{display:block;width:100%;height:300px;white-space:nowrap;position:relative;overflow:hidden}.ng-carousel slidecontainer{display:block;position:absolute;top:0;width:100%;height:100%;z-index:1;font-size:0}.ng-carousel slidecontainer.carousel-ignore-first-slide{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.ng-carousel slidecontainer.carousel-animate{-webkit-transition:-webkit-transform .5s ease-out 0s;-moz-transition:-moz-transform .5s ease-out 0s;-ms-transition:-ms-transform .5s ease-out 0s;-o-transition:-o-transform .5s ease-out 0s;transition:transform .5s ease-out 0s}.ng-carousel slide{position:relative;display:inline-block;vertical-align:top;font-size:16px;width:100%;height:100%;-webkit-background-size:cover;background-size:cover;background-position:center}.ng-carousel .carousel-arrow{display:inline-block;position:absolute;top:0;bottom:0;z-index:1;width:100px;text-align:center}.ng-carousel .carousel-arrow.carousel-arrow-left{left:0}.ng-carousel .carousel-arrow.carousel-arrow-right{right:0} \ No newline at end of file diff --git a/angular-carousel.min.js b/angular-carousel.min.js index 78764ec..0baaf09 100644 --- a/angular-carousel.min.js +++ b/angular-carousel.min.js @@ -1,6 +1,6 @@ /** - * @license AngularJS v1.2.0 + * @license AngularJS v1.2.1 * (c) 2015 Lifely * License: MIT */ -angular.module("angular-carousel",[]).factory("Carousel",function(){var n={};n.instances={},n.add=function(o,t,i,a){if(t=t||!1,!t)return"Error: no carousel name specified";o=o||0;var r=n.instances[t]||!1;if(r)return"Error: carousel instance already exists";var s=new e(o,i,a);return n.instances[t]=s,s},n.get=function(e){var o=n.instances[e]||!1;return o?o:"Error: carousel with name '"+e+"' does not exist"},n.remove=function(e){delete n.instances[e]};var e=function(n,e,o){o=o||{},"undefined"==typeof o.looping&&(o.looping=!0);var t=this;this.slidesCount=n,this.currentSlide=0,this.onSlideChangeCallbacks=[],this.toIndex=function(n,o){o=o||!1,this.currentSlide=n%this.slidesCount,angular.forEach(this.onSlideChangeCallbacks,function(n){"function"==typeof n&&n(t.currentSlide,o)}),setTimeout(function(){e.$apply()},0)},this.next=function(){var n=this.currentSlide+1,e=!1;return n>this.slidesCount-1&&(o.looping?(n=0,e="right"):n=this.slidesCount-1),this.toIndex(n,e),n},this.previous=function(){var n=this.currentSlide-1,e=!1;return 0>n&&(o.looping?(n=this.slidesCount-1,e="left"):n=0),this.toIndex(n,e),n},this.onSlideChange=function(n){return this.onSlideChangeCallbacks.push(n),this.onSlideChangeCallbacks.indexOf(n)},this.unbindOnSlideChangeCallback=function(n){"undefined"!=typeof this.onSlideChangeCallbacks[n]&&this.onSlideChangeCallbacks.splice(n,1)}};return n}).directive("ngCarousel",["Carousel","$compile","$document","$timeout",function(n,e,o,t){function i(){return"ontouchstart"in document.documentElement}var a=25;return{restrict:"AE",replace:!0,scope:{ngCarouselWatch:"="},link:function(e,r,s){function l(){p=angular.element(C[0].outerHTML),v=angular.element(C[C.length-1].outerHTML)}function u(){p=angular.element(''),v=angular.element('')}var c=!1,d=!1,f=!1,h="",g=!1;c="undefined"!=typeof s.ngCarouselTimer&&parseInt(s.ngCarouselTimer,10)>0?parseInt(s.ngCarouselTimer,10):!1,f="undefined"!=typeof s.ngCarouselRandom,g=!("false"===s.ngCarouselLoop);var C,m,p,v,S,b,h,y=function(){r.addClass("ng-carousel"),r.addClass(i()?"carousel-touch":"carousel-no-touch"),S=r.find("slidecontainer");var o=!1,t=!1;h&&(o=n.get(h).currentSlide,t=n.get(h).onSlideChangeCallbacks,n.remove(h));var a=function(){var n=angular.element(r[0].querySelectorAll(".carousel-slide-copy"));n.length>0&&n.remove()};if(a(),C=r.find("slide"),C.length>0){h=s.ngCarouselName,m=n.add(C.length,s.ngCarouselName,e,{looping:g}),angular.forEach(t,function(n){m.onSlideChange(n),m.unbindOnSlideChangeCallback(0)});var d=function(){a(),C=r.find("slide"),g?l():u(),p.addClass("carousel-slide-copy"),v.addClass("carousel-slide-copy"),S.append(p),S.prepend(v),S.addClass("carousel-ignore-first-slide")};d();var y=function(n,e){var o=n+1;"left"===e?o=0:"right"===e&&(o=C.length+1),E(o,!0,function(){"left"===e?E(C.length,!1):"right"===e&&E(1,!1)}),k(),d()};if(m.onSlideChange(y),o!==!1&&m.currentSlide!==o&&(y(m.currentSlide,!1),m.toIndex(o)),f){var T=Math.floor(Math.random()*m.slidesCount);m.toIndex(T)}c&&m.slidesCount>=2&&k()}else console.log("ng-carousel error: No slides found");S[0]?(b=new Hammer.Manager(S[0]),b.add(new Hammer.Pan({direction:Hammer.DIRECTION_HORIZONTAL,threshold:0})),b.on("panleft panright",function(n){n.isFinal||w(n.deltaX)})):console.log("ng-carousel error: No slidecontainer found")},k=function(){!c||m.slidesCount<2||(d&&t.cancel(d),d=t(function(){m.next()},c))},E=function(n,e,o){e?S.addClass("carousel-animate"):S.removeClass("carousel-animate");var t="translate(-"+100*n+"%, 0)";S.css({"-webkit-transform":t,"-moz-transform":t,"-ms-transform":t,"-o-transform":t,transform:t}),e&&S.on("transitionend oTransitionEnd webkitTransitionEnd",function(){"function"==typeof o&&o(),S.off("transitionend oTransitionEnd webkitTransitionEnd"),E(m.currentSlide+1,!1)})},T=0,x=0,w=function(n){T=n/x,T=T>1?1:-1>T?-1:T,E(m.currentSlide+1-T,!1)},I=function(){x=S[0].offsetWidth},$=function(){Math.abs(T)>a/100?(T>0?m.previous():m.next(),T=0):(T>0||0>T)&&E(m.currentSlide+1,!0,function(){T=0})},H=i()?"touchstart":"mousedown",M=i()?"touchend":"mouseup";o.on(H,I),o.on(M,$),r.on("mouseover",function(){d&&t.cancel(d)}),r.on("mouseout",k);var N=t(y,0);"undefined"!=typeof s.ngCarouselWatch&&e.$watch("ngCarouselWatch",function(){t(y)},!0),e.$on("$destroy",function(){t.cancel(N),r.off("mouseover mouseout"),o.off(H),o.off(M),S.off("transitionend oTransitionEnd webkitTransitionEnd"),m.onSlideChangeCallbacks=[],n.remove(h)})}}}]); +angular.module("angular-carousel",[]).factory("Carousel",function(){var n={};n.instances={},n.add=function(t,o,i,a){if(o=o||!1,!o)return"Error: no carousel name specified";t=t||0;var r=n.instances[o]||!1;if(r)return"Error: carousel instance already exists";var s=new e(t,i,a);return n.instances[o]=s,s},n.get=function(e){var t=n.instances[e]||!1;return t?t:"Error: carousel with name '"+e+"' does not exist"},n.remove=function(e){delete n.instances[e]};var e=function(n,e,t){t=t||{},"undefined"==typeof t.looping&&(t.looping=!0);var o=this;this.slidesCount=n,this.currentSlide=0,this.onSlideChangeCallbacks=[],this.toIndex=function(n,t){t=t||!1,this.currentSlide=n%this.slidesCount,angular.forEach(this.onSlideChangeCallbacks,function(n){"function"==typeof n&&n(o.currentSlide,t)}),setTimeout(function(){e.$apply()},0)},this.next=function(){var n=this.currentSlide+1,e=!1;return n>this.slidesCount-1&&(t.looping?(n=0,e="right"):n=this.slidesCount-1),this.toIndex(n,e),n},this.previous=function(){var n=this.currentSlide-1,e=!1;return 0>n&&(t.looping?(n=this.slidesCount-1,e="left"):n=0),this.toIndex(n,e),n},this.onSlideChange=function(n){return this.onSlideChangeCallbacks.push(n),this.onSlideChangeCallbacks.indexOf(n)},this.unbindOnSlideChangeCallback=function(n){"undefined"!=typeof this.onSlideChangeCallbacks[n]&&this.onSlideChangeCallbacks.splice(n,1)}};return n}).directive("ngCarousel",["Carousel","$compile","$document","$timeout",function(n,e,t,o){function i(){return"ontouchstart"in document.documentElement}var a=25;return{restrict:"AE",replace:!0,scope:{ngCarouselWatch:"="},link:function(e,r,s){function l(){p=angular.element(C[0].outerHTML),v=angular.element(C[C.length-1].outerHTML)}function u(){p=angular.element(''),v=angular.element('')}var c=!1,d=!1,f=!1,h="",g=!1;c="undefined"!=typeof s.ngCarouselTimer&&parseInt(s.ngCarouselTimer,10)>0?parseInt(s.ngCarouselTimer,10):!1,f="undefined"!=typeof s.ngCarouselRandom,g=!("false"===s.ngCarouselLoop);var C,m,p,v,S,b,h,y=function(){r.addClass("ng-carousel"),r.addClass(i()?"carousel-touch":"carousel-no-touch"),S=r.find("slidecontainer");var t=!1,o=!1;h&&(t=n.get(h).currentSlide,o=n.get(h).onSlideChangeCallbacks,n.remove(h));var a=function(){var n=angular.element(r[0].querySelectorAll(".carousel-slide-copy"));n.length>0&&n.remove()};a(),C=r.find("slide"),h=s.ngCarouselName,m=n.add(C.length,s.ngCarouselName,e,{looping:g}),angular.forEach(o,function(n){m.onSlideChange(n),m.unbindOnSlideChangeCallback(0)});var d=function(){a(),C.length<1||(C=r.find("slide"),g?l():u(),p.addClass("carousel-slide-copy"),v.addClass("carousel-slide-copy"),S.append(p),S.prepend(v),S.addClass("carousel-ignore-first-slide"))};d();var y=function(n,e){var t=n+1;"left"===e?t=0:"right"===e&&(t=C.length+1),E(t,!0,function(){"left"===e?E(C.length,!1):"right"===e&&E(1,!1)}),k(),d()};if(m.onSlideChange&&m.onSlideChange(y),t!==!1&&m.currentSlide!==t&&(y(m.currentSlide,!1),m.toIndex(t)),f){var T=Math.floor(Math.random()*m.slidesCount);m.toIndex(T)}c&&m.slidesCount>=2&&k(),S[0]?(b=new Hammer.Manager(S[0]),b.add(new Hammer.Pan({direction:Hammer.DIRECTION_HORIZONTAL,threshold:0})),b.on("panleft panright",function(n){n.isFinal||w(n.deltaX)})):console.log("ng-carousel error: No slidecontainer found")},k=function(){!c||m.slidesCount<2||(d&&o.cancel(d),d=o(function(){m.next()},c))},E=function(n,e,t){e?S.addClass("carousel-animate"):S.removeClass("carousel-animate");var o="translate(-"+100*n+"%, 0)";S.css({"-webkit-transform":o,"-moz-transform":o,"-ms-transform":o,"-o-transform":o,transform:o}),e&&S.on("transitionend oTransitionEnd webkitTransitionEnd",function(){"function"==typeof t&&t(),S.off("transitionend oTransitionEnd webkitTransitionEnd"),E(m.currentSlide+1,!1)})},T=0,x=0,w=function(n){T=n/x,T=T>1?1:-1>T?-1:T,E(m.currentSlide+1-T,!1)},I=function(){x=S[0].offsetWidth},$=function(){Math.abs(T)>a/100?(T>0?m.previous():m.next(),T=0):(T>0||0>T)&&E(m.currentSlide+1,!0,function(){T=0})},H=i()?"touchstart":"mousedown",M=i()?"touchend":"mouseup";t.on(H,I),t.on(M,$),r.on("mouseover",function(){d&&o.cancel(d)}),r.on("mouseout",k);var O=o(y,0);"undefined"!=typeof s.ngCarouselWatch&&e.$watch("ngCarouselWatch",function(){o(y)},!0),e.$on("$destroy",function(){o.cancel(O),r.off("mouseover mouseout"),t.off(H),t.off(M),S.off("transitionend oTransitionEnd webkitTransitionEnd"),m.onSlideChangeCallbacks=[],n.remove(h)})}}}]); \ No newline at end of file diff --git a/bower.json b/bower.json index fe6b90a..4de50e2 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angular-carousel", "description": "Touch-optimized carousel for Angular", - "version": "1.2.0", + "version": "1.2.1", "keywords": [ "carousel", "angular", diff --git a/examples/demo.html b/examples/demo.html index 6403864..4b9543b 100644 --- a/examples/demo.html +++ b/examples/demo.html @@ -98,12 +98,31 @@

Carousel with looping disabled

+
+

Carousel with adding/removing slides via ng-repeat

+ +

+ + + +

+ +
+ + {{slide}} + +
+
+ + - + Add Remove + H + diff --git a/examples/demo.js b/examples/demo.js index 4f8d893..1bc9060 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -1,4 +1,17 @@ var demoApp = angular.module('demoApp', ['angular-carousel']) -.controller('DemoCtrl', function($scope, Carousel) { - $scope.Carousel = Carousel; -}); \ No newline at end of file + .controller('DemoCtrl', function ($scope, Carousel) { + $scope.Carousel = Carousel; + + $scope.dynamicSlides = ['A', 'B', 'C']; + + $scope.addSlide = function(title){ + $scope.dynamicSlides.push(title); + }; + + $scope.removeSlide = function(title){ + var elementIndex = $scope.dynamicSlides.indexOf(title); + if(elementIndex >= 0) { + $scope.dynamicSlides.splice(elementIndex, 1); + } + }; + }); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 7cae8b0..a019a2e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,7 +11,9 @@ gulp.task('clean', function(){ gulp.task('minify-css', function() { gulp .src('angular-carousel.css') - .pipe(cleanCSS()) + .pipe(cleanCSS({ + keepSpecialComments: '*' + })) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('.')); }); @@ -19,7 +21,9 @@ gulp.task('minify-css', function() { gulp.task('minify-js', function() { gulp .src('angular-carousel.js') - .pipe(uglify()) + .pipe(uglify({ + preserveComments: 'license' + })) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('.')); }); diff --git a/package.json b/package.json index 03d1b99..59137ab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-carousel", - "version": "1.2.0", + "version": "1.2.1", "description": "Generic AngularJS carousel", "main": "angular-carousel.js", "scripts": {