UNPKG

angular-ui-carousel

Version:

A simple, lightweight carousel for angularjs

1 lines 8.59 kB
"use strict";!function(i){i.module("ui.carousel.config",[]).value("ui.carousel.config",{debug:!0}),i.module("ui.carousel.providers",[]),i.module("ui.carousel.controllers",[]),i.module("ui.carousel.directives",[]),i.module("ui.carousel",["ui.carousel.config","ui.carousel.directives","ui.carousel.controllers","ui.carousel.providers"])}(angular),angular.module("ui.carousel.controllers").controller("CarouselController",["$scope","$element","$timeout","$q","Carousel",function(i,e,o,t,s){var n=this;this.init=function(){n.initOptions(),n.initRanges(),n.setProps(),n.setupInfinite(),n.onInit&&n.onInit()},this.initOptions=function(){n.options=angular.extend({},s.getOptions()),void 0!==n.initialSlide&&(n.options.initialSlide=n.initialSlide),void 0!==n.fade&&(n.options.fade=n.fade),void 0!==n.autoplay&&(n.options.autoplay=n.autoplay),void 0!==n.autoplaySpeed&&(n.options.autoplaySpeed=n.autoplaySpeed),void 0!==n.cssEase&&(n.options.cssEase=n.cssEase),void 0!==n.speed&&(n.options.speed=n.speed),void 0!==n.infinite&&(n.options.infinite=n.infinite),void 0!==n.arrows&&(n.options.arrows=n.arrows),void 0!==n.dots&&(n.options.dots=n.dots),n.options.fade?(n.options.slidesToShow=1,n.options.slidesToScroll=1):(n.show&&(n.options.slidesToShow=n.show),n.scroll&&(n.options.slidesToScroll=n.scroll))},this.initRanges=function(){n.slides||(n.slides=[]),n.isCarouselReady=!1,n.isTrackMoving=!1,n.track=e.find(".track"),n.width=1,n.currentSlide=n.options.initialSlide,n.trackStyle={},n.slideStyle={},n.isVisibleDots=!1,n.isVisiblePrev=!1,n.isVisibleNext=!1,n.animType=null,n.transformType=null,n.transitionType=null,n.slidesInTrack=angular.copy(n.slides)},this.initUI=function(){o(function(){n.width=e[0].clientWidth,n.updateItemStyle(),n.initTrack()})},this.updateItemStyle=function(){n.itemWidth=n.width/n.options.slidesToShow,n.slideStyle={width:n.itemWidth+"px"}},this.initTrack=function(){var i=n.width/n.options.slidesToShow,e=i*n.slidesInTrack.length;n.trackStyle.width=e+"px",n.slideHandler(n.currentSlide).finally(function(){n.isCarouselReady=!0,n.options.fade||(n.trackStyle[n.transitionType]=n.transformType+" "+n.options.speed+"ms "+n.options.cssEase)})},this.next=function(){var i=n.slides.length%n.options.slidesToScroll!==0,e=i?0:(n.slides.length-n.currentSlide)%n.options.slidesToScroll,o=0===e?n.options.slidesToScroll:e;n.slideHandler(n.currentSlide+o)},this.prev=function(){var i=n.slides.length%n.options.slidesToScroll!==0,e=i?0:(n.slides.length-n.currentSlide)%n.options.slidesToScroll,o=0===e?n.options.slidesToScroll:n.options.slidesToShow-e;n.slideHandler(n.currentSlide-o)},this.movePage=function(i){var e=n.options.slidesToScroll*i;n.slideHandler(e)},this.slideHandler=function(i){if(!n.slides)return t.reject("Carousel not fully setup");if(n.isTrackMoving)return t.reject("Track is moving");var e=n.slides.length,s=n.options.slidesToShow;if(s>=e)return t.reject("Leng of slides smaller than slides to show");var r=i,l=null;if(l=0>r?e%n.options.slidesToScroll!==0?e-e%n.options.slidesToScroll:e+r:r>=e?e%n.options.slidesToScroll!==0?0:r-e:r,n.onBeforeChange&&n.onBeforeChange(n.currentSlide,l),n.options.fade)return n.currentSlide=l,o(function(){n.onAfterChange&&n.onAfterChange(n.currentSlide)},n.options.speed),t.resolve("Handler fade");var a=-1*l*n.itemWidth;return n.options.infinite&&(a=-1*(r+s)*n.itemWidth),n.isTrackMoving=!0,n.moveTrack(a).then(function(){n.isTrackMoving=!1,n.currentSlide=l,n.autoplayTrack(),l!==r&&n.correctTrack(),o(function(){n.onAfterChange&&n.onAfterChange(n.currentSlide)},200)})},this.moveTrack=function(i){var e=t.defer();return n.trackStyle[n.animType]=n.options.vertical===!1?"translate3d("+i+"px, 0px, 0px)":"translate3d(0px, "+i+"px, 0px)",o(function(){e.resolve("Track moved")},n.options.speed),e.promise},this.correctTrack=function(){n.options.infinite&&!function(){var i=-1*(n.currentSlide+n.options.slidesToShow)*n.itemWidth;n.trackStyle[n.transitionType]=n.transformType+" 0ms "+n.options.cssEase,n.isTrackMoving=!0,o(function(){n.trackStyle[n.animType]="translate3d("+i+"px, 0, 0px)",o(function(){n.trackStyle[n.transitionType]=n.transformType+" "+n.options.speed+"ms "+n.options.cssEase,n.isTrackMoving=!1},200)})}()},this.autoplayTrack=function(){n.options.autoplay&&(n.timeout&&o.cancel(n.timeout),n.timeout=o(function(){n.next(),o.cancel(n.timeout),n.timeout=null},n.options.autoplaySpeed))},this.getSlideStyle=function(i){var e=n.slideStyle;if(n.options.fade){var o=-1*i*n.itemWidth,t={position:"relative",top:"0px",left:o+"px","z-index":i===n.currentSlide?10:9,opacity:i===n.currentSlide?1:0};i>=n.currentSlide-1&&i<=n.currentSlide+1&&(t.transition="opacity 250ms linear"),e=angular.extend(e,t)}return e},this.setupInfinite=function(){var i=n.slides.length,e=n.options.slidesToShow;if(n.options.infinite&&n.options.fade===!1&&i>e){for(var o=e,t=0;o>t;t++)n.slidesInTrack.push(angular.copy(n.slides[t]));for(var s=i-1;s>=i-e;s--)n.slidesInTrack.unshift(angular.copy(n.slides[s]))}},this.getDots=function(){if(!n.slides)return[];for(var i=Math.ceil(n.slides.length/n.options.slidesToScroll),e=[],o=0;i>o;o++)e.push(o);return e},this.setProps=function(){var i=document.body.style;void 0!==i.OTransform&&(n.animType="OTransform",n.transformType="-o-transform",n.transitionType="OTransition"),void 0!==i.MozTransform&&(n.animType="MozTransform",n.transformType="-moz-transform",n.transitionType="MozTransition"),void 0!==i.webkitTransform&&(n.animType="webkitTransform",n.transformType="-webkit-transform",n.transitionType="webkitTransition"),void 0!==i.msTransform&&(n.animType="msTransform",n.transformType="-ms-transform",n.transitionType="msTransition"),void 0!==i.transform&&n.animType!==!1&&(n.animType="transform",n.transformType="transform",n.transitionType="transition"),n.transformsEnabled=!0},this.refreshCarousel=function(){n.slides&&n.slides.length&&n.slides.length>n.options.slidesToShow&&(n.isVisibleDots=!0,n.isVisiblePrev=!0,n.isVisibleNext=!0),n.initUI()},i.$watch("ctrl.slides",function(){n.refreshCarousel()}),this.init()}]),angular.module("ui.carousel.directives").directive("uiCarousel",["$compile","$templateCache","$sce",function(i,e){return{restrict:"AE",scope:!0,bindToController:{name:"=?",slides:"=",show:"=?slidesToShow",scroll:"=?slidesToScroll",classes:"@",fade:"=?",onChange:"=?",disableArrow:"=?",autoplay:"=?",autoplaySpeed:"=?",cssEase:"=?",speed:"=?",infinite:"=?",arrows:"=?",dots:"=?",initialSlide:"=?",onBeforeChange:"&",onAfterChange:"&",onInit:"&"},compile:function(o){var t=angular.element(e.get("ui-carousel/carousel.template.html")),s={"carousel-item":".carousel-item","carousel-prev":".carousel-prev","carousel-next":".carousel-next"},n=t.clone();return angular.forEach(s,function(i,e){var t=o[0].querySelector(e);t&&angular.element(n[0].querySelector(i)).html(t.innerHTML)}),function(e,o){var t=i(n)(e);o.addClass("ui-carousel").html("").append(t)}},controller:"CarouselController",controllerAs:"ctrl"}}]),angular.module("ui.carousel.providers").provider("Carousel",function(){var i=this;this.options={arrows:!0,autoplay:!1,autoplaySpeed:3e3,cssEase:"ease",dots:!1,draggable:!0,easing:"linear",fade:!1,infinite:!0,initialSlide:0,lazyLoad:"ondemand",slidesToShow:1,slidesToScroll:1,speed:500,swipe:!0,swipeToSlide:!1,touchMove:!0,vertical:!1,verticalSwiping:!1},this.$get=[function(){return{setOptions:function(e){i.options=angular.extend(i.options,e)},getOptions:function(){return i.options}}}]}),function(i){try{i=angular.module("ui.carousel")}catch(e){i=angular.module("ui.carousel",[])}i.run(["$templateCache",function(i){i.put("ui-carousel/carousel.template.html",'<div class="carousel-wrapper" ng-show="ctrl.isCarouselReady"><div class="track-wrapper"><div class="track" ng-style="ctrl.trackStyle"><div class="slide" ng-repeat="item in ctrl.slidesInTrack track by $index" ng-style="ctrl.getSlideStyle($index)"><div class="carousel-item"></div></div></div></div><div class="carousel-prev" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisiblePrev &amp;&amp; ctrl.options.arrows" ng-click="ctrl.prev()"><button class="carousel-btn"><i class="ui-icon-prev"></i></button></div><div class="carousel-next" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisibleNext &amp;&amp; ctrl.options.arrows" ng-click="ctrl.next()"><button class="carousel-btn"><i class="ui-icon-next"></i></button></div><ul class="carousel-dots" ng-show="ctrl.isVisibleDots &amp;&amp; ctrl.options.dots"><li ng-repeat="dot in ctrl.getDots()" ng-class="{ \'carousel-active\': dot == ctrl.currentSlide/ctrl.options.slidesToScroll }" ng-click="ctrl.movePage(dot)"><button>{{ dot }}</button></li></ul></div>')}])}();