├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── dist ├── LICENSE ├── README.md ├── bundles │ ├── ng2-carousel-module.umd.js │ └── ng2-carousel-module.umd.js.map ├── index.d.ts ├── index.js ├── index.js.map ├── index.metadata.json ├── package.json └── src │ ├── Carousel.d.ts │ ├── Carousel.js │ ├── Carousel.js.map │ ├── Carousel.metadata.json │ ├── carousel.component.d.ts │ ├── carousel.component.js │ ├── carousel.component.js.map │ ├── carousel.component.metadata.json │ ├── carousel.module.d.ts │ ├── carousel.module.js │ ├── carousel.module.js.map │ ├── carousel.module.metadata.json │ ├── index.d.ts │ ├── index.js │ ├── index.js.map │ └── index.metadata.json ├── index.ts ├── karma.config.js ├── package-dist.json ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── Carousel.ts ├── carousel.component.html ├── carousel.component.scss ├── carousel.component.spec.ts ├── carousel.component.ts ├── carousel.module.ts ├── dom-change.directive.ts └── index.ts ├── test ├── main.js ├── main.spec.js ├── main.spec.ts ├── tsconfig.spec.json └── webpack.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Add any directories, files, or patterns you don't want to be tracked by version control 2 | 3 | # Created by https://www.gitignore.io/api/node,macos,angular,webstorm 4 | 5 | ### Angular ### 6 | ## Angular ## 7 | # compiled output 8 | /tmp 9 | /app/**/*.js 10 | /app/**/*.js.map 11 | 12 | # dependencies 13 | /node_modules 14 | /bower_components 15 | 16 | # IDEs and editors 17 | /.idea 18 | 19 | # misc 20 | /.sass-cache 21 | /connect.lock 22 | /coverage/* 23 | /libpeerconnection.log 24 | npm-debug.log 25 | testem.log 26 | /typings 27 | 28 | # e2e 29 | /e2e/*.js 30 | /e2e/*.map 31 | 32 | #System Files 33 | .DS_Store 34 | 35 | ### macOS ### 36 | *.DS_Store 37 | .AppleDouble 38 | .LSOverride 39 | 40 | # Icon must end with two \r 41 | Icon 42 | 43 | # Thumbnails 44 | ._* 45 | 46 | # Files that might appear in the root of a volume 47 | .DocumentRevisions-V100 48 | .fseventsd 49 | .Spotlight-V100 50 | .TemporaryItems 51 | .Trashes 52 | .VolumeIcon.icns 53 | .com.apple.timemachine.donotpresent 54 | 55 | # Directories potentially created on remote AFP share 56 | .AppleDB 57 | .AppleDesktop 58 | Network Trash Folder 59 | Temporary Items 60 | .apdisk 61 | 62 | ### Node ### 63 | # Logs 64 | logs 65 | *.log 66 | npm-debug.log* 67 | yarn-debug.log* 68 | yarn-error.log* 69 | 70 | # Runtime data 71 | pids 72 | *.pid 73 | *.seed 74 | *.pid.lock 75 | 76 | # Directory for instrumented libs generated by jscoverage/JSCover 77 | lib-cov 78 | 79 | # Coverage directory used by tools like istanbul 80 | coverage 81 | 82 | # nyc test coverage 83 | .nyc_output 84 | 85 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 86 | .grunt 87 | 88 | # Bower dependency directory (https://bower.io/) 89 | bower_components 90 | 91 | # node-waf configuration 92 | .lock-wscript 93 | 94 | # Compiled binary addons (http://nodejs.org/api/addons.html) 95 | build/Release 96 | 97 | # Dependency directories 98 | node_modules/ 99 | jspm_packages/ 100 | 101 | # Typescript v1 declaration files 102 | typings/ 103 | 104 | # Optional npm cache directory 105 | .npm 106 | 107 | # Optional eslint cache 108 | .eslintcache 109 | 110 | # Optional REPL history 111 | .node_repl_history 112 | 113 | # Output of 'npm pack' 114 | *.tgz 115 | 116 | # Yarn Integrity file 117 | .yarn-integrity 118 | 119 | # dotenv environment variables file 120 | .env 121 | 122 | 123 | ### WebStorm ### 124 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 125 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 126 | 127 | # User-specific stuff: 128 | .idea/**/workspace.xml 129 | .idea/**/tasks.xml 130 | .idea/dictionaries 131 | 132 | # Sensitive or high-churn files: 133 | .idea/**/dataSources/ 134 | .idea/**/dataSources.ids 135 | .idea/**/dataSources.xml 136 | .idea/**/dataSources.local.xml 137 | .idea/**/sqlDataSources.xml 138 | .idea/**/dynamic.xml 139 | .idea/**/uiDesigner.xml 140 | 141 | # Gradle: 142 | .idea/**/gradle.xml 143 | .idea/**/libraries 144 | 145 | # CMake 146 | cmake-build-debug/ 147 | 148 | # Mongo Explorer plugin: 149 | .idea/**/mongoSettings.xml 150 | 151 | ## File-based project format: 152 | *.iws 153 | 154 | ## Plugin-specific files: 155 | 156 | # IntelliJ 157 | /out/ 158 | 159 | # mpeltonen/sbt-idea plugin 160 | .idea_modules/ 161 | 162 | # JIRA plugin 163 | atlassian-ide-plugin.xml 164 | 165 | # Cursive Clojure plugin 166 | .idea/replstate.xml 167 | 168 | # Ruby plugin and RubyMine 169 | /.rakeTasks 170 | 171 | # Crashlytics plugin (for Android Studio and IntelliJ) 172 | com_crashlytics_export_strings.xml 173 | crashlytics.properties 174 | crashlytics-build.properties 175 | fabric.properties 176 | 177 | ### WebStorm Patch ### 178 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 179 | 180 | # *.iml 181 | # modules.xml 182 | # .idea/misc.xml 183 | # *.ipr 184 | 185 | # Sonarlint plugin 186 | .idea/sonarlint 187 | 188 | #module ignore 189 | node_modules 190 | .vscode 191 | .idea 192 | .DS_Store 193 | npm-debug.log 194 | *.ngsummary.json 195 | dist/* 196 | !dist/package.json 197 | src/*.*.ngfactory.* 198 | src/*.*.shim.* 199 | src/*.*.js 200 | # End of https://www.gitignore.io/api/node,macos,angular,webstorm 201 | 202 | 203 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # .idea 2 | # Node generated files 3 | node_modules 4 | npm-debug.log 5 | # OS generated files 6 | Thumbs.db 7 | .DS_Store 8 | # Ignored files 9 | *.ts 10 | !*.d.ts -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | cache: yarn 4 | 5 | sudo: false 6 | 7 | node_js: 8 | - '7' 9 | 10 | matrix: 11 | fast_finish: true 12 | 13 | before_install: 14 | - export CHROME_BIN=chromium-browser 15 | 16 | before_script: 17 | - npm prune 18 | - export DISPLAY=:99.0 19 | - sh -e /etc/init.d/xvfb start 20 | - npm install coveralls 21 | 22 | script: 23 | - npm test 24 | - npm run coveralls -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # changelog [![npm version](https://badge.fury.io/js/angular2-carousel.svg)](https://badge.fury.io/js/angular2-carousel) 2 | 3 | ### Before Upgrading once read the [Readme.md](https://github.com/kappys1/angular2-carousel/blob/master/README.md) file 4 | 5 | ## 1.0.17 6 | 7 | ### Features 8 | * MAYOR : New Version in 9 | 10 | [ngx-carousel-lib NPM](https://www.npmjs.com/package/ngx-carousel-lib) 11 | 12 | [ngx-carousel-lib github](https://github.com/kappys1/ngx-carousel) 13 | 14 | [ngx-carousel-lib web](https://kappys1.github.io/ngx-carousel) 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ## 1.0.16 23 | 24 | ### Features 25 | * Dynamic update Carousel 26 | 27 | ## 1.0.13 28 | 29 | ### Features 30 | * no drag images -> `pointer-events:none` 31 | 32 | ## 1.0.11 33 | 34 | ### Features 35 | * Angular 5 compatibility 36 | 37 | ## 1.0.10 38 | 39 | ### Features 40 | * Auto play 41 | * Testing all 42 | 43 | 44 | ## 1.0.9 45 | 46 | ### Features 47 | * Responsive -> Now, when resize window, the carousel update and you show fine again. 48 | 49 | 50 | ## 1.0.8 51 | 52 | ### Issues fixed 53 | * Improve move touching 54 | 55 | ## 1.0.1 56 | 57 | ### Features 58 | * New Events 59 | * onInit 60 | * onReady 61 | * onChangeProperties 62 | * Binding properties and update automatically 63 | * new Example page https://kappys1.github.io/angular2-carousel/ 64 | 65 | ### Issues fixed 66 | * Initial Slide property 67 | * animation after init 68 | * functions slide next and slide prev fine. 69 | 70 | 71 | ## 1.0.0 72 | 73 | ### Features 74 | * Verticaly mode 75 | * Horizontal mode 76 | * new events 77 | * more functions 78 | 79 | ### Issues fixed 80 | * Carrousel redimensionate by style.css 81 | 82 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 TMTFactory 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular2-Carousel 2 | # OLD VERSION - DEPRECATED VERSION 3 | 4 | [![npm version](https://badge.fury.io/js/angular2-carousel.svg)](https://badge.fury.io/js/angular2-carousel) [![Build Status](https://travis-ci.org/kappys1/angular2-carousel.svg?branch=master)](https://travis-ci.org/kappys1/angular2-carousel) [![Coverage Status](https://coveralls.io/repos/github/kappys1/angular2-carousel/badge.svg?branch=master)](https://coveralls.io/github/kappys1/angular2-carousel?branch=master) ![Angular2+](https://img.shields.io/badge/Angular_2+-passing-brightgreen.svg?style=flat) ![Angular2+](https://img.shields.io/badge/Angular_5-success-brightgreen.svg?style=flat) ![licence](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat) 5 | 6 | > An lightweight, touchable and responsive library to create a carousel for angular 2+ 7 | 8 | ## NEW VERSION HERE NX-ANGUAR 9 | > **I make a new version for angular, compatible with 7.0.0 without dependencies. NO MORE HAMMER** 10 | 11 | [ngx-carousel-lib NPM](https://www.npmjs.com/package/ngx-carousel-lib) 12 | 13 | [ngx-carousel-lib github](https://github.com/kappys1/ngx-carousel) 14 | 15 | [ngx-carousel-lib web](https://kappys1.github.io/ngx-carousel) 16 | 17 | . 18 | 19 | . 20 | 21 | . 22 | 23 | . 24 | 25 | . 26 | 27 | . 28 | 29 | . 30 | 31 | 32 | ## Demo 33 | > demos available [here](https://kappys1.github.io/angular2-carousel) 34 | 35 | ## Install 36 | You can install the package from our npm package 37 | ``` 38 | npm install --save angular2-carousel 39 | ``` 40 | 41 | *check if not install all peer dependencies:* 42 | ``` 43 | npm install @types/hammerjs 44 | npm install hammerjs 45 | ``` 46 | 47 | ## Usage 48 | First tou need to provide the CarouselModule to your desired Module 49 | 50 | 51 | 52 | ``` 53 | import {CarouselModule} from "angular2-carousel"; 54 | 55 | // In your App's module or Custom Module: 56 | @NgModule({ 57 | imports: [ 58 | CarouselModule 59 | ] 60 | }) 61 | ``` 62 | 63 | *note : if you install library from github, you should import from ``angular2-carousel/dist``* 64 | 65 | Now, you can use CarouselModule as follow: 66 | 67 | ``` 68 | 69 |
a
70 |
71 |
72 | 73 | . 74 | . 75 | . 76 |
77 |
78 |
c
79 |
d
80 | 81 | ``` 82 | 83 | **All slides of carousel must have** ``.item-carousel`` 84 | 85 | 86 | #### [Preview](https://embed.plnkr.co/CPWvmndIgpsglCvLChhc/) 87 | 88 | ## API Documentation 89 | #### you can see [here](https://github.com/kappys1/angular2-carousel/wiki/API-Documentation) or in [web](https://kappys1.github.io/angular2-carousel) 90 | 91 | ### Author 92 | Alex Marcos Gutierrez 93 | TMTFactory 94 | ### License 95 | MIT 96 | -------------------------------------------------------------------------------- /dist/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 TMTFactory 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /dist/README.md: -------------------------------------------------------------------------------- 1 | # Angular2-Carousel 2 | 3 | [![npm version](https://badge.fury.io/js/angular2-carousel.svg)](https://badge.fury.io/js/angular2-carousel) [![Build Status](https://travis-ci.org/kappys1/angular2-carousel.svg?branch=master)](https://travis-ci.org/kappys1/angular2-carousel) [![Coverage Status](https://coveralls.io/repos/github/kappys1/angular2-carousel/badge.svg?branch=master)](https://coveralls.io/github/kappys1/angular2-carousel?branch=master) ![Angular2+](https://img.shields.io/badge/Angular_2+-passing-brightgreen.svg?style=flat) ![Angular2+](https://img.shields.io/badge/Angular_5-success-brightgreen.svg?style=flat) ![licence](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat) 4 | 5 | > An lightweight, touchable and responsive library to create a carousel for angular 2+ 6 | 7 | ## NEW VERSION 8 | > **I make a new version for angular, compatible with 7.0.0 without dependencies. NO MORE HAMMER** 9 | 10 | [ngx-carousel-lib NPM](https://www.npmjs.com/package/ngx-carousel-lib) 11 | 12 | [ngx-carousel-lib github](https://github.com/kappys1/ngx-carousel) 13 | 14 | [ngx-carousel-lib web](https://kappys1.github.io/ngx-carousel) 15 | 16 | ## Demo 17 | > demos available [here](https://kappys1.github.io/angular2-carousel) 18 | 19 | ## Install 20 | You can install the package from our npm package 21 | ``` 22 | npm install --save angular2-carousel 23 | ``` 24 | 25 | *check if not install all peer dependencies:* 26 | ``` 27 | npm install @types/hammerjs 28 | npm install hammerjs 29 | ``` 30 | 31 | ## Usage 32 | First tou need to provide the CarouselModule to your desired Module 33 | 34 | 35 | 36 | ``` 37 | import {CarouselModule} from "angular2-carousel"; 38 | 39 | // In your App's module or Custom Module: 40 | @NgModule({ 41 | imports: [ 42 | CarouselModule 43 | ] 44 | }) 45 | ``` 46 | 47 | *note : if you install library from github, you should import from ``angular2-carousel/dist``* 48 | 49 | Now, you can use CarouselModule as follow: 50 | 51 | ``` 52 | 53 |
a
54 |
55 |
56 | 57 | . 58 | . 59 | . 60 |
61 |
62 |
c
63 |
d
64 | 65 | ``` 66 | 67 | **All slides of carousel must have** ``.item-carousel`` 68 | 69 | 70 | #### [Preview](https://embed.plnkr.co/CPWvmndIgpsglCvLChhc/) 71 | 72 | ## API Documentation 73 | #### you can see [here](https://github.com/kappys1/angular2-carousel/wiki/API-Documentation) or in [web](https://kappys1.github.io/angular2-carousel) 74 | 75 | ### Author 76 | Alex Marcos Gutierrez 77 | TMTFactory 78 | ### License 79 | MIT 80 | -------------------------------------------------------------------------------- /dist/bundles/ng2-carousel-module.umd.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("hammerjs"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","hammerjs","@angular/platform-browser"],t):t((e.ng=e.ng||{},e.ng.carouselModule=e.ng.carouselModule||{}),e.ng.core,e.Hammer,e.ng["platform-browser"])}(this,function(e,t,i,n){"use strict";var o=function(){function e(){this._currdeg=0,this._totalItems=0,this._maxWidthSize=0,this._maxHeigthSize=0,this._maxDegree=0,this._totalWidth=0,this._isHorizontal=!1,this._items=[],this._degreesSlides=[],this._activeIndex=0,this._lastIndex=-1,this._lockSlides=!1,this._autoPlayIsRunning=!1}return Object.defineProperty(e.prototype,"autoPlayIsRunning",{get:function(){return this._autoPlayIsRunning},set:function(e){this._autoPlayIsRunning=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"currdeg",{get:function(){return this._currdeg},set:function(e){this._currdeg=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"totalItems",{get:function(){return this._totalItems},set:function(e){this._totalItems=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isHorizontal",{get:function(){return this._isHorizontal},set:function(e){this._isHorizontal=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxWidthSize",{get:function(){return this._maxWidthSize},set:function(e){this._maxWidthSize=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxHeigthSize",{get:function(){return this._maxHeigthSize},set:function(e){this._maxHeigthSize=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxDegree",{get:function(){return this._maxDegree},set:function(e){this._maxDegree=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"totalWidth",{get:function(){return this._totalWidth},set:function(e){this._totalWidth=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return this._items},set:function(e){this._items=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"degreesSlides",{get:function(){return this._degreesSlides},set:function(e){this._degreesSlides=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._activeIndex=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"lockSlides",{get:function(){return this._lockSlides},set:function(e){this._lockSlides=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"lastIndex",{get:function(){return this._lastIndex},set:function(e){this._lastIndex=e},enumerable:!0,configurable:!0}),e}(),s=function(){function e(e){this.componentElement=e,this.itemsCarouselRendered=0,this.morePairSlides=1,this.angle=45,this.ratioScale=1,this.margin=20,this.perspective=2e3,this.endInSlide=!0,this.timeToSlide=300,this.lockSlides=!1,this.initialSlide=0,this.loop=!1,this.axis="horizontal",this.autoPlay=!1,this.delayAutoPlay=3e3,this.onInitCarousel=new t.EventEmitter,this.onReadyCarousel=new t.EventEmitter,this.onChangePropertiesCarousel=new t.EventEmitter,this.onSlideChange=new t.EventEmitter,this.onSlideCentered=new t.EventEmitter,this.onTransitionStart=new t.EventEmitter,this.onTransitionEnd=new t.EventEmitter,this.onSlideNextTransitionStart=new t.EventEmitter,this.onSlideNextTransitionEnd=new t.EventEmitter,this.onSlidePrevTransitionStart=new t.EventEmitter,this.onSlidePrevTransitionEnd=new t.EventEmitter,this.onSlideMove=new t.EventEmitter,this.onSlideMoveEnd=new t.EventEmitter,this.onSlideMoveStart=new t.EventEmitter,this.onTouchMove=new t.EventEmitter,this.onTouchStart=new t.EventEmitter,this.onTouchEnd=new t.EventEmitter,this.onReachBeginning=new t.EventEmitter,this.onReachEnd=new t.EventEmitter,this.carousel=new o}return e.prototype.onDomChange=function(e){e.addedNodes.length>0&&(0===this.itemsCarouselRendered?this.reInit():(this.update(),this.updateCssShowSlides()),this.itemsCarouselRendered=this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length)},e.prototype.ngOnInit=function(){this.onInitCarousel.emit(this.carousel),this.itemsCarouselRendered=this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length},e.prototype.ngOnChanges=function(e){for(var t=0;t=0&&this.initialSlide=this.carousel.items.length?(this.carousel.activeIndex=this.carousel.items.length-1,this.initialSlide=this.carousel.activeIndex):(this.carousel.activeIndex=0,this.initialSlide=this.carousel.activeIndex);var e=this.carousel.activeIndex*this.angle;this.setNewDeg(-e),this.setTransformCarrousel(-e)},e.prototype.setNewDeg=function(e){this.carousel.currdeg=e,this.carousel.currdeg>0&&(this.carousel.currdeg=0),this.carousel.currdeg<-this.carousel.maxDegree&&(this.carousel.currdeg=-this.carousel.maxDegree)},e.prototype.checkRotation=function(){this.carousel.isHorizontal="vertical"!==this.axis,this.rotationFn=this.carousel.isHorizontal?"rotateY":"rotateX"},e.prototype.checkLimitsCarrousel=function(e){return this.carousel.activeIndex!=e&&e>=0&&ee.carousel.maxWidthSize&&(e.carousel.maxWidthSize=i,e.carousel.totalWidth=e.carousel.items.length*e.carousel.maxWidthSize),n>e.carousel.maxHeigthSize&&(e.carousel.maxHeigthSize=n,e.carousel.totalWidth=e.carousel.items.length*e.carousel.maxHeigthSize)}),this.setContainerWithMaxSize()},e.prototype.setContainerWithMaxSize=function(){this.containerElm.nativeElement.style.width=this.carousel.maxWidthSize+"px",this.containerElm.nativeElement.style.height=this.carousel.maxHeigthSize+"px"},e.prototype.setDegreesOnSlides=function(){var e=this,t=0,i=this.carousel.isHorizontal?this.carousel.maxWidthSize:this.carousel.maxHeigthSize;this.radius=Math.round(i/2/Math.tan(Math.PI/(360/this.angle)))+this.margin,this.carousel.degreesSlides=[],this.carousel.items.map(function(i,n){i.style.transform=e.rotationFn+"("+t+"deg) translateZ("+e.radius+"px)",i.style.webkitTransform=e.rotationFn+"("+t+"deg) translateZ("+e.radius+"px)",e.carousel.degreesSlides.push(t),e.carousel.maxDegree=t,t+=e.angle})},e.prototype.detectCurrentSlide=function(){var e=this,t=99e9,i=0;this.carousel.degreesSlides.forEach(function(n,o){var s=Math.abs(n-Math.abs(e.carousel.currdeg));s0&&Array.from(this.carouselElm.nativeElement.getElementsByClassName(e)).map(function(t){t.classList.remove(e)})},e.prototype.manageEvents=function(){var e=this,t={preventDefault:!0},n=this,o=new i(this.carouselElm.nativeElement,t);o.on("panstart",function(e){n.onSlideMoveStart.emit({carousel:n.carousel,event:e})}),o.on("panend",function(e){n.onSlideMoveEnd.emit({carousel:n.carousel,event:e})}),o.on("pan",function(e){n.onSlideMove.emit({carousel:n.carousel,event:e})}),this.carouselElm.nativeElement.addEventListener("touchstart",function(e){n.onTouchStart.emit({carousel:n.carousel,event:e})}),this.carouselElm.nativeElement.addEventListener("touchmove",function(e){n.onTouchMove.emit({carousel:n.carousel,event:e})}),this.carouselElm.nativeElement.addEventListener("touchend",function(e){n.onTouchEnd.emit({carousel:n.carousel,event:e})}),this.carouselElm.nativeElement.addEventListener("transitionend",function(t){var i={carousel:n.carousel,event:t};"transform"===t.propertyName&&(e.onTransitionEnd.emit(i),n.carousel.lastIndex>n.carousel.activeIndex?e.onSlideNextTransitionEnd.emit(i):e.onSlidePrevTransitionEnd.emit(i))}),this.carouselElm.nativeElement.addEventListener("transitionstart",function(t){var o={carousel:n.carousel,event:t};"transform"===t.propertyName&&(e.onTransitionStart.emit(o),t.direction===i.DIRECTION_LEFT?n.onSlideNextTransitionStart.emit(o):t.direction===i.DIRECTION_RIGHT&&n.onSlidePrevTransitionStart.emit(o))}),window.addEventListener("resize",function(){this.update()}.bind(this))},e.decorators=[{type:t.Component,args:[{selector:"carousel-component",styles:["\n :host{\n display: flex;\n }\n :host .container {\n margin: 0 auto;\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n\n :host .container .carousel {\n height: 100%;\n width: 100%;\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n \n }\n :host.ready .carousel {\n -webkit-transition: -webkit-transform 300ms;\n -moz-transition:-moz-transform 300ms;\n -o-transition: -o-transform 300ms;\n transition: transform 300ms;\n }\n :host .container .carousel ::content >>> .item-carousel {\n display: block;\n position: absolute;\n border:1px solid black;\n width: 100%;\n height: 100%;\n text-align: center;\n transform-style: preserve-3d;\n opacity: 0;\n }\n :host.ready .carousel ::content >>> .item-carousel {\n -webkit-transition: opacity 300ms, -webkit-transform 300ms;\n -moz-transition: opacity 300ms, -moz-transform 300ms;\n -o-transition: opacity 300ms, -o-transform 300ms;\n transition: opacity 300ms, transform 300ms;\n }\n \n :host .container .carousel ::content >>> .item-carousel img{\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n }\n \n :host .container .carousel ::content >>> .item-carousel.next,\n :host .container .carousel ::content >>> .item-carousel.prev,\n :host .container .carousel ::content >>> .item-carousel.actual{\n opacity: 0.95;\n }\n\n\n "],template:'
\n
\n \n
\n
'}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={morePairSlides:[{type:t.Input,args:["morePairSlides"]}],angle:[{type:t.Input,args:["angle"]}],ratioScale:[{type:t.Input,args:["ratioScale"]}],margin:[{type:t.Input,args:["margin"]}],perspective:[{type:t.Input,args:["perspective"]}],endInSlide:[{type:t.Input,args:["endInSlide"]}],timeToSlide:[{type:t.Input,args:["timeToSlide"]}],lockSlides:[{type:t.Input,args:["lockSlides"]}],initialSlide:[{type:t.Input,args:["initialSlide"]}],loop:[{type:t.Input,args:["loop"]}],axis:[{type:t.Input,args:["mode"]}],autoPlay:[{type:t.Input,args:["autoPlay"]}],delayAutoPlay:[{type:t.Input,args:["delayAutoPlay"]}],onInitCarousel:[{type:t.Output,args:["onInit"]}],onReadyCarousel:[{type:t.Output,args:["onReady"]}],onChangePropertiesCarousel:[{type:t.Output,args:["onChangeProperties"]}],onSlideChange:[{type:t.Output,args:["onSlideChange"]}],onSlideCentered:[{type:t.Output,args:["onSlideCentered"]}],onTransitionStart:[{type:t.Output,args:["onTransitionStart"]}],onTransitionEnd:[{type:t.Output,args:["onTransitionEnd"]}],onSlideNextTransitionStart:[{type:t.Output,args:["onSlideNextTransitionStart"]}],onSlideNextTransitionEnd:[{type:t.Output,args:["onSlideNextTransitionEnd"]}],onSlidePrevTransitionStart:[{type:t.Output,args:["onSlidePrevTransitionStart"]}],onSlidePrevTransitionEnd:[{type:t.Output,args:["onSlidePrevTransitionEnd"]}],onSlideMove:[{type:t.Output,args:["onSlideMove"]}],onSlideMoveEnd:[{type:t.Output,args:["onSlideMoveEnd"]}],onSlideMoveStart:[{type:t.Output,args:["onSlideMoveStart"]}],onTouchMove:[{type:t.Output,args:["onTouchMove"]}],onTouchStart:[{type:t.Output,args:["onTouchStart"]}],onTouchEnd:[{type:t.Output,args:["onTouchEnd"]}],onReachBeginning:[{type:t.Output,args:["onReachBeginning"]}],onReachEnd:[{type:t.Output,args:["onReachEnd"]}],carouselElm:[{type:t.ViewChild,args:["carousel"]}],containerElm:[{type:t.ViewChild,args:["container"]}]},e}(),r=function(){function e(e){var i=this;this.elementRef=e,this.domChange=new t.EventEmitter;var n=this.elementRef.nativeElement;this.changes=new MutationObserver(function(e){e.forEach(function(e){return i.domChange.emit(e)})}),this.changes.observe(n,{attributes:!0,childList:!0,characterData:!0})}return e.prototype.ngOnDestroy=function(){this.changes.disconnect()},e.decorators=[{type:t.Directive,args:[{selector:"[domChange]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={domChange:[{type:t.Output}]},e}(),a=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.overrides={pan:{direction:i.DIRECTION_ALL}},t}return a(t,e),t}(n.HammerGestureConfig),u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[r,s],providers:[{provide:n.HAMMER_GESTURE_CONFIG,useClass:l}],exports:[s],schemas:[t.CUSTOM_ELEMENTS_SCHEMA]}]}],e.ctorParameters=function(){return[]},e}();e.CarouselModule=u,e.CarouselComponent=s,Object.defineProperty(e,"__esModule",{value:!0})}); -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","file":"index.js","sourceRoot":"","sourcesContent":["export * from './src/index';"]} -------------------------------------------------------------------------------- /dist/index.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./src/index"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./src/index"}]}] -------------------------------------------------------------------------------- /dist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-carousel", 3 | "version": "1.0.16", 4 | "description": "Angular 2 Minimalist carousel", 5 | "main": "bundles/ng2-carousel-module.umd.js", 6 | "module": "index.js", 7 | "typings": "index.d.ts", 8 | "keywords": [ 9 | "angular", 10 | "angular2", 11 | "angular 2", 12 | "angular 4", 13 | "ng2", 14 | "ngx", 15 | "carousel", 16 | "angular carousel" 17 | ], 18 | "author": { 19 | "name": "Alejandro Marcos", 20 | "email": "alexsbd1@gmail.com" 21 | }, 22 | "licenses": [{ 23 | "type": "MIT", 24 | "url": "https://github.com/kappys1/angular2-carrousel/blob/master/LICENSE" 25 | }], 26 | "repository" : { 27 | "type" : "git", 28 | "url" : "https://github.com/kappys1/angular2-carousel.git" 29 | }, 30 | "homepage": "", 31 | "bugs": { 32 | "url": "https://github.com/kappys1/angular2-carrousel/issues" 33 | }, 34 | "peerDependencies": { 35 | "@angular/core": ">=2.0.0 ", 36 | "@angular/platform-browser": ">=2.0.0", 37 | "rxjs": "^5.0.1", 38 | "hammerjs": "^2.0.8", 39 | "@types/hammerjs": "^2.0.35" 40 | } 41 | } -------------------------------------------------------------------------------- /dist/src/Carousel.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | export declare class Carousel { 7 | private _currdeg; 8 | private _totalItems; 9 | private _maxWidthSize; 10 | private _maxHeigthSize; 11 | private _maxDegree; 12 | private _totalWidth; 13 | private _isHorizontal; 14 | private _items; 15 | private _degreesSlides; 16 | private _activeIndex; 17 | private _lastIndex; 18 | private _lockSlides; 19 | private _autoPlayIsRunning; 20 | autoPlayIsRunning: boolean; 21 | currdeg: number; 22 | totalItems: number; 23 | isHorizontal: boolean; 24 | maxWidthSize: number; 25 | maxHeigthSize: number; 26 | maxDegree: number; 27 | totalWidth: number; 28 | items: any; 29 | degreesSlides: any; 30 | activeIndex: number; 31 | lockSlides: boolean; 32 | lastIndex: number; 33 | } 34 | -------------------------------------------------------------------------------- /dist/src/Carousel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | var Carousel = /** @class */ (function () { 7 | function Carousel() { 8 | this._currdeg = 0; 9 | this._totalItems = 0; 10 | this._maxWidthSize = 0; 11 | this._maxHeigthSize = 0; 12 | this._maxDegree = 0; 13 | this._totalWidth = 0; 14 | this._isHorizontal = false; 15 | this._items = []; 16 | this._degreesSlides = []; 17 | this._activeIndex = 0; 18 | this._lastIndex = -1; 19 | this._lockSlides = false; 20 | this._autoPlayIsRunning = false; 21 | } 22 | Object.defineProperty(Carousel.prototype, "autoPlayIsRunning", { 23 | get: function () { 24 | return this._autoPlayIsRunning; 25 | }, 26 | set: function (value) { 27 | this._autoPlayIsRunning = value; 28 | }, 29 | enumerable: true, 30 | configurable: true 31 | }); 32 | Object.defineProperty(Carousel.prototype, "currdeg", { 33 | get: function () { 34 | return this._currdeg; 35 | }, 36 | set: function (value) { 37 | this._currdeg = value; 38 | }, 39 | enumerable: true, 40 | configurable: true 41 | }); 42 | Object.defineProperty(Carousel.prototype, "totalItems", { 43 | get: function () { 44 | return this._totalItems; 45 | }, 46 | set: function (value) { 47 | this._totalItems = value; 48 | }, 49 | enumerable: true, 50 | configurable: true 51 | }); 52 | Object.defineProperty(Carousel.prototype, "isHorizontal", { 53 | get: function () { 54 | return this._isHorizontal; 55 | }, 56 | set: function (value) { 57 | this._isHorizontal = value; 58 | }, 59 | enumerable: true, 60 | configurable: true 61 | }); 62 | Object.defineProperty(Carousel.prototype, "maxWidthSize", { 63 | get: function () { 64 | return this._maxWidthSize; 65 | }, 66 | set: function (value) { 67 | this._maxWidthSize = value; 68 | }, 69 | enumerable: true, 70 | configurable: true 71 | }); 72 | Object.defineProperty(Carousel.prototype, "maxHeigthSize", { 73 | get: function () { 74 | return this._maxHeigthSize; 75 | }, 76 | set: function (value) { 77 | this._maxHeigthSize = value; 78 | }, 79 | enumerable: true, 80 | configurable: true 81 | }); 82 | Object.defineProperty(Carousel.prototype, "maxDegree", { 83 | get: function () { 84 | return this._maxDegree; 85 | }, 86 | set: function (value) { 87 | this._maxDegree = value; 88 | }, 89 | enumerable: true, 90 | configurable: true 91 | }); 92 | Object.defineProperty(Carousel.prototype, "totalWidth", { 93 | get: function () { 94 | return this._totalWidth; 95 | }, 96 | set: function (value) { 97 | this._totalWidth = value; 98 | }, 99 | enumerable: true, 100 | configurable: true 101 | }); 102 | Object.defineProperty(Carousel.prototype, "items", { 103 | get: function () { 104 | return this._items; 105 | }, 106 | set: function (value) { 107 | this._items = value; 108 | }, 109 | enumerable: true, 110 | configurable: true 111 | }); 112 | Object.defineProperty(Carousel.prototype, "degreesSlides", { 113 | get: function () { 114 | return this._degreesSlides; 115 | }, 116 | set: function (value) { 117 | this._degreesSlides = value; 118 | }, 119 | enumerable: true, 120 | configurable: true 121 | }); 122 | Object.defineProperty(Carousel.prototype, "activeIndex", { 123 | get: function () { 124 | return this._activeIndex; 125 | }, 126 | set: function (value) { 127 | this._activeIndex = value; 128 | }, 129 | enumerable: true, 130 | configurable: true 131 | }); 132 | Object.defineProperty(Carousel.prototype, "lockSlides", { 133 | get: function () { 134 | return this._lockSlides; 135 | }, 136 | set: function (value) { 137 | this._lockSlides = value; 138 | }, 139 | enumerable: true, 140 | configurable: true 141 | }); 142 | Object.defineProperty(Carousel.prototype, "lastIndex", { 143 | get: function () { 144 | return this._lastIndex; 145 | }, 146 | set: function (value) { 147 | this._lastIndex = value; 148 | }, 149 | enumerable: true, 150 | configurable: true 151 | }); 152 | return Carousel; 153 | }()); 154 | export { Carousel }; 155 | //# sourceMappingURL=Carousel.js.map -------------------------------------------------------------------------------- /dist/src/Carousel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/Carousel.ts"],"names":[],"mappings":"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","file":"Carousel.js","sourceRoot":"","sourcesContent":["/**\n * :tmtfactory) © 2017\n * Alex Marcos \n * @ignore\n */\n\n\nexport class Carousel{\n\n\n\n private _currdeg = 0;\n private _totalItems = 0;\n private _maxWidthSize = 0;\n private _maxHeigthSize = 0;\n private _maxDegree = 0;\n private _totalWidth = 0;\n private _isHorizontal= false;\n private _items = [];\n private _degreesSlides = [];\n private _activeIndex = 0;\n private _lastIndex = -1;\n private _lockSlides = false;\n private _autoPlayIsRunning = false;\n\n\n get autoPlayIsRunning(): boolean {\n return this._autoPlayIsRunning;\n }\n\n set autoPlayIsRunning(value: boolean) {\n this._autoPlayIsRunning = value;\n }\n\n get currdeg(): number {\n return this._currdeg;\n }\n\n set currdeg(value: number) {\n this._currdeg = value;\n }\n\n get totalItems(): number {\n return this._totalItems;\n }\n\n set totalItems(value: number) {\n this._totalItems = value;\n }\n\n\n get isHorizontal(): boolean {\n return this._isHorizontal;\n }\n\n set isHorizontal(value: boolean) {\n this._isHorizontal = value;\n }\n\n get maxWidthSize(): number {\n return this._maxWidthSize;\n }\n\n set maxWidthSize(value: number) {\n this._maxWidthSize = value;\n }\n\n get maxHeigthSize(): number {\n return this._maxHeigthSize;\n }\n\n set maxHeigthSize(value: number) {\n this._maxHeigthSize = value;\n }\n\n get maxDegree(): number {\n return this._maxDegree;\n }\n\n set maxDegree(value: number) {\n this._maxDegree = value;\n }\n\n get totalWidth(): number {\n return this._totalWidth;\n }\n\n set totalWidth(value: number) {\n this._totalWidth = value;\n }\n\n get items(): any {\n return this._items;\n }\n\n set items(value: any) {\n this._items = value;\n }\n\n get degreesSlides(): any {\n return this._degreesSlides;\n }\n\n set degreesSlides(value: any) {\n this._degreesSlides = value;\n }\n\n get activeIndex(): number {\n return this._activeIndex;\n }\n\n set activeIndex(value: number) {\n this._activeIndex = value;\n }\n\n get lockSlides(): boolean {\n return this._lockSlides;\n }\n\n set lockSlides(value: boolean) {\n this._lockSlides = value;\n }\n\n get lastIndex(): number {\n return this._lastIndex;\n }\n\n set lastIndex(value: number) {\n this._lastIndex = value;\n }\n}\n"]} -------------------------------------------------------------------------------- /dist/src/Carousel.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"Carousel":{"__symbolic":"class"}}},{"__symbolic":"module","version":1,"metadata":{"Carousel":{"__symbolic":"class"}}}] -------------------------------------------------------------------------------- /dist/src/carousel.component.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core'; 7 | import { Carousel } from "./Carousel"; 8 | export declare class CarouselComponent implements OnInit, OnChanges, AfterViewInit { 9 | private componentElement; 10 | carousel: Carousel; 11 | private radius; 12 | private rotationFn; 13 | private itemsCarouselRendered; 14 | morePairSlides: number; 15 | angle: number; 16 | ratioScale: number; 17 | margin: number; 18 | perspective: number; 19 | endInSlide: boolean; 20 | timeToSlide: number; 21 | lockSlides: boolean; 22 | initialSlide: number; 23 | loop: boolean; 24 | axis: string; 25 | autoPlay: boolean; 26 | delayAutoPlay: number; 27 | private autoPlayTimeout; 28 | onInitCarousel: EventEmitter<{}>; 29 | onReadyCarousel: EventEmitter<{}>; 30 | onChangePropertiesCarousel: EventEmitter<{}>; 31 | onSlideChange: EventEmitter<{}>; 32 | onSlideCentered: EventEmitter<{}>; 33 | onTransitionStart: EventEmitter<{}>; 34 | onTransitionEnd: EventEmitter<{}>; 35 | onSlideNextTransitionStart: EventEmitter<{}>; 36 | onSlideNextTransitionEnd: EventEmitter<{}>; 37 | onSlidePrevTransitionStart: EventEmitter<{}>; 38 | onSlidePrevTransitionEnd: EventEmitter<{}>; 39 | onSlideMove: EventEmitter<{}>; 40 | onSlideMoveEnd: EventEmitter<{}>; 41 | onSlideMoveStart: EventEmitter<{}>; 42 | onTouchMove: EventEmitter<{}>; 43 | onTouchStart: EventEmitter<{}>; 44 | onTouchEnd: EventEmitter<{}>; 45 | onReachBeginning: EventEmitter<{}>; 46 | onReachEnd: EventEmitter<{}>; 47 | carouselElm: ElementRef; 48 | containerElm: ElementRef; 49 | constructor(componentElement: ElementRef); 50 | onDomChange($event: any): void; 51 | ngOnInit(): void; 52 | ngOnChanges(changes: SimpleChanges): void; 53 | ngAfterViewInit(): void; 54 | lockCarousel(val: boolean): void; 55 | slideNext(): void; 56 | slidePrev(): void; 57 | slideTo(index: number): void; 58 | autoPlayStart(): void; 59 | autoPlayStop(): void; 60 | toggleMode(): void; 61 | reInit(): void; 62 | update(): void; 63 | private configPlugin(); 64 | private initEventsPan(); 65 | private rotate(e); 66 | private autoPlaySlide(); 67 | private initSlidesOn(); 68 | private setNewDeg(newDeg); 69 | private checkRotation(); 70 | private checkLimitsCarrousel(index); 71 | private moveSlideTo(index); 72 | private moveCarrousel(deg, timeTransform?); 73 | private setTransformCarrousel(deg); 74 | private sendSlideIsCentered(); 75 | private setPerspectiveContainer(); 76 | private getmaxSizes(); 77 | private setContainerWithMaxSize(); 78 | private setDegreesOnSlides(); 79 | private detectCurrentSlide(); 80 | private updateCssShowSlides(); 81 | private removeClassShowSlides(tagClass); 82 | private manageEvents(); 83 | } 84 | -------------------------------------------------------------------------------- /dist/src/carousel.component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; 7 | import * as Hammer from 'hammerjs'; 8 | import { Carousel } from "./Carousel"; 9 | // TODO: move chart.js to it's own component 10 | var CarouselComponent = /** @class */ (function () { 11 | function CarouselComponent(componentElement) { 12 | this.componentElement = componentElement; 13 | this.itemsCarouselRendered = 0; 14 | this.morePairSlides = 1; 15 | this.angle = 45; 16 | this.ratioScale = 1; 17 | this.margin = 20; 18 | this.perspective = 2000; 19 | this.endInSlide = true; 20 | this.timeToSlide = 300; 21 | this.lockSlides = false; 22 | this.initialSlide = 0; 23 | this.loop = false; 24 | this.axis = "horizontal"; 25 | //autoPlay 26 | this.autoPlay = false; 27 | this.delayAutoPlay = 3000; 28 | this.onInitCarousel = new EventEmitter(); 29 | this.onReadyCarousel = new EventEmitter(); 30 | this.onChangePropertiesCarousel = new EventEmitter(); 31 | this.onSlideChange = new EventEmitter(); 32 | this.onSlideCentered = new EventEmitter(); 33 | this.onTransitionStart = new EventEmitter(); 34 | this.onTransitionEnd = new EventEmitter(); 35 | this.onSlideNextTransitionStart = new EventEmitter(); 36 | this.onSlideNextTransitionEnd = new EventEmitter(); 37 | this.onSlidePrevTransitionStart = new EventEmitter(); 38 | this.onSlidePrevTransitionEnd = new EventEmitter(); 39 | this.onSlideMove = new EventEmitter(); 40 | this.onSlideMoveEnd = new EventEmitter(); 41 | this.onSlideMoveStart = new EventEmitter(); 42 | this.onTouchMove = new EventEmitter(); 43 | this.onTouchStart = new EventEmitter(); 44 | this.onTouchEnd = new EventEmitter(); 45 | this.onReachBeginning = new EventEmitter(); 46 | this.onReachEnd = new EventEmitter(); 47 | this.carousel = new Carousel(); 48 | } 49 | CarouselComponent.prototype.onDomChange = function ($event) { 50 | if ($event.addedNodes.length > 0) { 51 | if (this.itemsCarouselRendered === 0) { 52 | this.reInit(); 53 | } 54 | else { 55 | this.update(); 56 | this.updateCssShowSlides(); 57 | } 58 | this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length; 59 | } 60 | }; 61 | CarouselComponent.prototype.ngOnInit = function () { 62 | this.onInitCarousel.emit(this.carousel); 63 | this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length; 64 | }; 65 | CarouselComponent.prototype.ngOnChanges = function (changes) { 66 | for (var i = 0; i < Object.keys(changes).length; i++) { 67 | if (changes[Object.keys(changes)[i]].currentValue != changes[Object.keys(changes)[i]].previousValue && !changes[Object.keys(changes)[i]].isFirstChange()) { 68 | this.update(); 69 | this.onChangePropertiesCarousel.emit(changes); 70 | } 71 | } 72 | }; 73 | CarouselComponent.prototype.ngAfterViewInit = function () { 74 | this.initEventsPan(); 75 | this.configPlugin(); 76 | setTimeout(function () { 77 | this.componentElement.nativeElement.className += ' ready'; 78 | }.bind(this)); 79 | this.onReadyCarousel.emit(this.carousel); 80 | }; 81 | CarouselComponent.prototype.lockCarousel = function (val) { 82 | this.carousel.lockSlides = val; 83 | }; 84 | CarouselComponent.prototype.slideNext = function () { 85 | if (this.checkLimitsCarrousel(this.carousel.activeIndex + 1)) { 86 | this.moveSlideTo(this.carousel.activeIndex + 1); 87 | var vm_1 = this; 88 | setTimeout(function () { return vm_1.detectCurrentSlide(); }); 89 | } 90 | }; 91 | CarouselComponent.prototype.slidePrev = function () { 92 | if (this.checkLimitsCarrousel(this.carousel.activeIndex - 1)) { 93 | this.moveSlideTo(this.carousel.activeIndex - 1); 94 | var vm_2 = this; 95 | setTimeout(function () { return vm_2.detectCurrentSlide(); }); 96 | } 97 | }; 98 | CarouselComponent.prototype.slideTo = function (index) { 99 | if (this.checkLimitsCarrousel(index)) { 100 | this.moveSlideTo(index); 101 | var vm_3 = this; 102 | setTimeout(function () { return vm_3.detectCurrentSlide(); }); 103 | } 104 | }; 105 | CarouselComponent.prototype.autoPlayStart = function () { 106 | this.autoPlay = true; 107 | this.autoPlaySlide(); 108 | }; 109 | CarouselComponent.prototype.autoPlayStop = function () { 110 | clearInterval(this.autoPlayTimeout); 111 | this.carousel.autoPlayIsRunning = false; 112 | }; 113 | CarouselComponent.prototype.toggleMode = function () { 114 | this.axis = this.axis == "vertical" ? "horizontal" : "vertical"; 115 | this.update(); 116 | }; 117 | CarouselComponent.prototype.reInit = function () { 118 | this.carousel = new Carousel; 119 | this.configPlugin(); 120 | }; 121 | CarouselComponent.prototype.update = function () { 122 | this.setPerspectiveContainer(); 123 | this.checkRotation(); 124 | this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName("item-carousel")); 125 | this.carousel.totalItems = this.carousel.items.length; 126 | this.getmaxSizes(); 127 | this.carousel.lockSlides = this.lockSlides; 128 | this.setDegreesOnSlides(); 129 | this.setTransformCarrousel(-this.carousel.degreesSlides[this.carousel.activeIndex]); 130 | }; 131 | CarouselComponent.prototype.configPlugin = function () { 132 | // this.setPerspectiveContainer(); 133 | // this.checkRotation(); 134 | // this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName("item-carousel")); 135 | // this.carousel.totalItems = this.carousel.items.length; 136 | // this.getmaxSizes(); 137 | // this.carousel.lockSlides = this.lockSlides; 138 | // this.setDegreesOnSlides(); 139 | this.update(); 140 | this.manageEvents(); 141 | this.initSlidesOn(); 142 | this.updateCssShowSlides(); 143 | this.autoPlaySlide(); 144 | }; 145 | CarouselComponent.prototype.initEventsPan = function () { 146 | var hammertime = new Hammer(this.carouselElm.nativeElement); 147 | hammertime.on('pan', this.rotate.bind(this)); 148 | hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 }); 149 | }; 150 | CarouselComponent.prototype.rotate = function (e) { 151 | if (!this.carousel.lockSlides) { 152 | var velocity = this.carousel.isHorizontal ? e.velocityX : -e.velocityY; 153 | this.setNewDeg(this.carousel.currdeg + velocity * window.devicePixelRatio); 154 | this.moveCarrousel(this.carousel.currdeg); 155 | if (e.isFinal) { 156 | if (this.endInSlide) { 157 | this.moveSlideTo(this.carousel.activeIndex); 158 | } 159 | } 160 | } 161 | }; 162 | CarouselComponent.prototype.autoPlaySlide = function () { 163 | if (this.autoPlay) { 164 | this.autoPlayTimeout = setTimeout(function () { 165 | this.carousel.autoPlayIsRunning = true; 166 | this.slideNext(); 167 | this.autoPlaySlide(); 168 | }.bind(this), this.delayAutoPlay); 169 | } 170 | }; 171 | CarouselComponent.prototype.initSlidesOn = function () { 172 | if (this.initialSlide >= 0 && this.initialSlide < this.carousel.items.length) { 173 | this.carousel.activeIndex = parseInt(this.initialSlide.toString()); 174 | } 175 | else if (this.initialSlide >= this.carousel.items.length) { 176 | this.carousel.activeIndex = this.carousel.items.length - 1; 177 | this.initialSlide = this.carousel.activeIndex; 178 | } 179 | else { 180 | this.carousel.activeIndex = 0; 181 | this.initialSlide = this.carousel.activeIndex; 182 | } 183 | var newDeg = this.carousel.activeIndex * this.angle; 184 | this.setNewDeg(-newDeg); 185 | this.setTransformCarrousel(-newDeg); 186 | }; 187 | CarouselComponent.prototype.setNewDeg = function (newDeg) { 188 | this.carousel.currdeg = newDeg; 189 | if (this.carousel.currdeg > 0) { 190 | this.carousel.currdeg = 0; 191 | } 192 | if (this.carousel.currdeg < -this.carousel.maxDegree) { 193 | this.carousel.currdeg = -this.carousel.maxDegree; 194 | } 195 | }; 196 | CarouselComponent.prototype.checkRotation = function () { 197 | this.carousel.isHorizontal = this.axis !== "vertical"; 198 | this.rotationFn = this.carousel.isHorizontal ? 'rotateY' : 'rotateX'; 199 | }; 200 | CarouselComponent.prototype.checkLimitsCarrousel = function (index) { 201 | return this.carousel.activeIndex != index && index >= 0 && index < this.carousel.totalItems; 202 | }; 203 | CarouselComponent.prototype.moveSlideTo = function (index) { 204 | this.setNewDeg(-this.carousel.degreesSlides[index]); 205 | this.moveCarrousel(this.carousel.currdeg, this.timeToSlide); 206 | }; 207 | CarouselComponent.prototype.moveCarrousel = function (deg, timeTransform) { 208 | if (timeTransform === void 0) { timeTransform = 0; } 209 | this.carouselElm.nativeElement.style.transition = "transform " + timeTransform + "ms"; 210 | this.carouselElm.nativeElement.style.webkitTransition = "transform " + timeTransform + "ms"; 211 | this.setTransformCarrousel(deg); 212 | this.detectCurrentSlide(); 213 | }; 214 | CarouselComponent.prototype.setTransformCarrousel = function (deg) { 215 | this.carouselElm.nativeElement.style.transform = "translateZ(" + (-this.radius) + "px) " + this.rotationFn + "(" + deg + "deg)"; 216 | this.carouselElm.nativeElement.style.webkitTransform = "translateZ(" + (-this.radius) + "px) " + this.rotationFn + "(" + deg + "deg)"; 217 | this.sendSlideIsCentered(); 218 | }; 219 | CarouselComponent.prototype.sendSlideIsCentered = function () { 220 | if (this.carousel.currdeg == -this.carousel.degreesSlides[this.carousel.activeIndex]) { 221 | this.onSlideCentered.emit(this.carousel); 222 | } 223 | }; 224 | CarouselComponent.prototype.setPerspectiveContainer = function () { 225 | this.containerElm.nativeElement.style.perspective = this.perspective; 226 | this.containerElm.nativeElement.style.webkitPerspective = this.perspective; 227 | this.containerElm.nativeElement.style.MozPerspective = this.perspective; 228 | }; 229 | CarouselComponent.prototype.getmaxSizes = function () { 230 | var _this = this; 231 | this.carousel.items.map(function (val) { 232 | var witdh = val.offsetWidth; 233 | var height = val.offsetHeight; 234 | _this.carousel.maxWidthSize = 0; 235 | _this.carousel.maxHeigthSize = 0; 236 | if (witdh > _this.carousel.maxWidthSize) { 237 | _this.carousel.maxWidthSize = witdh; 238 | _this.carousel.totalWidth = _this.carousel.items.length * _this.carousel.maxWidthSize; 239 | } 240 | if (height > _this.carousel.maxHeigthSize) { 241 | _this.carousel.maxHeigthSize = height; 242 | _this.carousel.totalWidth = _this.carousel.items.length * _this.carousel.maxHeigthSize; 243 | } 244 | }); 245 | this.setContainerWithMaxSize(); 246 | }; 247 | CarouselComponent.prototype.setContainerWithMaxSize = function () { 248 | this.containerElm.nativeElement.style.width = this.carousel.maxWidthSize + 'px'; 249 | this.containerElm.nativeElement.style.height = this.carousel.maxHeigthSize + 'px'; 250 | }; 251 | CarouselComponent.prototype.setDegreesOnSlides = function () { 252 | var _this = this; 253 | var auxDegree = 0; 254 | var panelSize = this.carousel.isHorizontal ? this.carousel.maxWidthSize : this.carousel.maxHeigthSize; 255 | this.radius = (Math.round((panelSize / 2) / 256 | Math.tan(Math.PI / (360 / this.angle))) + this.margin); 257 | this.carousel.degreesSlides = []; 258 | this.carousel.items.map(function (val, index) { 259 | val.style.transform = _this.rotationFn + "(" + auxDegree + "deg) translateZ(" + (_this.radius) + "px)"; 260 | val.style.webkitTransform = _this.rotationFn + "(" + auxDegree + "deg) translateZ(" + (_this.radius) + "px)"; 261 | _this.carousel.degreesSlides.push(auxDegree); 262 | _this.carousel.maxDegree = auxDegree; 263 | auxDegree += _this.angle; 264 | }); 265 | }; 266 | CarouselComponent.prototype.detectCurrentSlide = function () { 267 | var _this = this; 268 | var aux = 99e9; 269 | var index = 0; 270 | this.carousel.degreesSlides.forEach(function (val, i) { 271 | var res = Math.abs(val - Math.abs(_this.carousel.currdeg)); 272 | if (res < aux) { 273 | aux = res; 274 | index = i; 275 | } 276 | }); 277 | if (this.carousel.activeIndex != index) { 278 | this.carousel.lastIndex = this.carousel.activeIndex; 279 | this.carousel.activeIndex = index; 280 | this.updateCssShowSlides(); 281 | this.onSlideChange.emit(this.carousel); 282 | if (this.carousel.activeIndex == 0) { 283 | this.onReachBeginning.emit(this.carousel); 284 | } 285 | else if (this.carousel.activeIndex == this.carousel.totalItems - 1) { 286 | this.onReachEnd.emit(this.carousel); 287 | } 288 | } 289 | }; 290 | CarouselComponent.prototype.updateCssShowSlides = function () { 291 | var vm = this; 292 | var currentIndex = vm.carousel.activeIndex; 293 | var actual = this.carousel.items[currentIndex]; 294 | vm.removeClassShowSlides("actual"); 295 | vm.removeClassShowSlides("prev"); 296 | vm.removeClassShowSlides("next"); 297 | if (actual) { 298 | actual.className += " actual"; 299 | } 300 | for (var x = 0; x < this.morePairSlides; x++) { 301 | var prev = vm.carousel.items[currentIndex - (x + 1)]; 302 | var next = vm.carousel.items[currentIndex + (x + 1)]; 303 | if (prev) { 304 | prev.className += " prev"; 305 | } 306 | if (next) { 307 | next.className += " next"; 308 | } 309 | } 310 | }; 311 | CarouselComponent.prototype.removeClassShowSlides = function (tagClass) { 312 | if (this.carouselElm.nativeElement.getElementsByClassName(tagClass).length > 0) { 313 | Array.from(this.carouselElm.nativeElement.getElementsByClassName(tagClass)).map(function (val) { 314 | val['classList'].remove(tagClass); 315 | }); 316 | } 317 | }; 318 | CarouselComponent.prototype.manageEvents = function () { 319 | var _this = this; 320 | var options = { 321 | preventDefault: true 322 | }; 323 | var vm = this; 324 | var hammertime = new Hammer(this.carouselElm.nativeElement, options); 325 | hammertime.on("panstart", function (e) { 326 | vm.onSlideMoveStart.emit({ carousel: vm.carousel, event: e }); 327 | }); 328 | hammertime.on("panend", function (e) { 329 | vm.onSlideMoveEnd.emit({ carousel: vm.carousel, event: e }); 330 | }); 331 | hammertime.on("pan", function (e) { 332 | vm.onSlideMove.emit({ carousel: vm.carousel, event: e }); 333 | }); 334 | this.carouselElm.nativeElement.addEventListener('touchstart', function (e) { 335 | vm.onTouchStart.emit({ carousel: vm.carousel, event: e }); 336 | }); 337 | this.carouselElm.nativeElement.addEventListener('touchmove', function (e) { 338 | vm.onTouchMove.emit({ carousel: vm.carousel, event: e }); 339 | }); 340 | this.carouselElm.nativeElement.addEventListener('touchend', function (e) { 341 | vm.onTouchEnd.emit({ carousel: vm.carousel, event: e }); 342 | }); 343 | this.carouselElm.nativeElement.addEventListener('transitionend', function (e) { 344 | var elm = { carousel: vm.carousel, event: e }; 345 | if (e.propertyName === "transform") { 346 | _this.onTransitionEnd.emit(elm); 347 | if (vm.carousel.lastIndex > vm.carousel.activeIndex) { 348 | _this.onSlideNextTransitionEnd.emit(elm); 349 | } 350 | else { 351 | _this.onSlidePrevTransitionEnd.emit(elm); 352 | } 353 | } 354 | }); 355 | this.carouselElm.nativeElement.addEventListener('transitionstart', function (e) { 356 | var elm = { carousel: vm.carousel, event: e }; 357 | if (e.propertyName === "transform") { 358 | _this.onTransitionStart.emit(elm); 359 | if (e.direction === Hammer.DIRECTION_LEFT) { 360 | vm.onSlideNextTransitionStart.emit(elm); 361 | } 362 | else if (e.direction === Hammer.DIRECTION_RIGHT) { 363 | vm.onSlidePrevTransitionStart.emit(elm); 364 | } 365 | } 366 | }); 367 | window.addEventListener("resize", function () { 368 | this.update(); 369 | }.bind(this)); 370 | }; 371 | CarouselComponent.decorators = [ 372 | { type: Component, args: [{ 373 | selector: 'carousel-component', 374 | styles: ["\n :host{\n display: flex;\n }\n :host .container {\n margin: 0 auto;\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n\n :host .container .carousel {\n height: 100%;\n width: 100%;\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n \n }\n :host.ready .carousel {\n -webkit-transition: -webkit-transform 300ms;\n -moz-transition:-moz-transform 300ms;\n -o-transition: -o-transform 300ms;\n transition: transform 300ms;\n }\n :host .container .carousel ::content >>> .item-carousel {\n display: block;\n position: absolute;\n border:1px solid black;\n width: 100%;\n height: 100%;\n text-align: center;\n transform-style: preserve-3d;\n opacity: 0;\n }\n :host.ready .carousel ::content >>> .item-carousel {\n -webkit-transition: opacity 300ms, -webkit-transform 300ms;\n -moz-transition: opacity 300ms, -moz-transform 300ms;\n -o-transition: opacity 300ms, -o-transform 300ms;\n transition: opacity 300ms, transform 300ms;\n }\n \n :host .container .carousel ::content >>> .item-carousel img{\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n }\n \n :host .container .carousel ::content >>> .item-carousel.next,\n :host .container .carousel ::content >>> .item-carousel.prev,\n :host .container .carousel ::content >>> .item-carousel.actual{\n opacity: 0.95;\n }\n\n\n "], 375 | template: '
\n' + 376 | '
\n' + 377 | ' \n' + 378 | '
\n' + 379 | '
', 380 | },] }, 381 | ]; 382 | /** @nocollapse */ 383 | CarouselComponent.ctorParameters = function () { return [ 384 | { type: ElementRef, }, 385 | ]; }; 386 | CarouselComponent.propDecorators = { 387 | 'morePairSlides': [{ type: Input, args: ["morePairSlides",] },], 388 | 'angle': [{ type: Input, args: ["angle",] },], 389 | 'ratioScale': [{ type: Input, args: ["ratioScale",] },], 390 | 'margin': [{ type: Input, args: ["margin",] },], 391 | 'perspective': [{ type: Input, args: ["perspective",] },], 392 | 'endInSlide': [{ type: Input, args: ["endInSlide",] },], 393 | 'timeToSlide': [{ type: Input, args: ["timeToSlide",] },], 394 | 'lockSlides': [{ type: Input, args: ["lockSlides",] },], 395 | 'initialSlide': [{ type: Input, args: ["initialSlide",] },], 396 | 'loop': [{ type: Input, args: ["loop",] },], 397 | 'axis': [{ type: Input, args: ["mode",] },], 398 | 'autoPlay': [{ type: Input, args: ["autoPlay",] },], 399 | 'delayAutoPlay': [{ type: Input, args: ["delayAutoPlay",] },], 400 | 'onInitCarousel': [{ type: Output, args: ["onInit",] },], 401 | 'onReadyCarousel': [{ type: Output, args: ["onReady",] },], 402 | 'onChangePropertiesCarousel': [{ type: Output, args: ["onChangeProperties",] },], 403 | 'onSlideChange': [{ type: Output, args: ["onSlideChange",] },], 404 | 'onSlideCentered': [{ type: Output, args: ["onSlideCentered",] },], 405 | 'onTransitionStart': [{ type: Output, args: ["onTransitionStart",] },], 406 | 'onTransitionEnd': [{ type: Output, args: ["onTransitionEnd",] },], 407 | 'onSlideNextTransitionStart': [{ type: Output, args: ["onSlideNextTransitionStart",] },], 408 | 'onSlideNextTransitionEnd': [{ type: Output, args: ["onSlideNextTransitionEnd",] },], 409 | 'onSlidePrevTransitionStart': [{ type: Output, args: ["onSlidePrevTransitionStart",] },], 410 | 'onSlidePrevTransitionEnd': [{ type: Output, args: ["onSlidePrevTransitionEnd",] },], 411 | 'onSlideMove': [{ type: Output, args: ["onSlideMove",] },], 412 | 'onSlideMoveEnd': [{ type: Output, args: ["onSlideMoveEnd",] },], 413 | 'onSlideMoveStart': [{ type: Output, args: ["onSlideMoveStart",] },], 414 | 'onTouchMove': [{ type: Output, args: ["onTouchMove",] },], 415 | 'onTouchStart': [{ type: Output, args: ["onTouchStart",] },], 416 | 'onTouchEnd': [{ type: Output, args: ["onTouchEnd",] },], 417 | 'onReachBeginning': [{ type: Output, args: ["onReachBeginning",] },], 418 | 'onReachEnd': [{ type: Output, args: ["onReachEnd",] },], 419 | 'carouselElm': [{ type: ViewChild, args: ["carousel",] },], 420 | 'containerElm': [{ type: ViewChild, args: ["container",] },], 421 | }; 422 | return CarouselComponent; 423 | }()); 424 | export { CarouselComponent }; 425 | //# sourceMappingURL=carousel.component.js.map -------------------------------------------------------------------------------- /dist/src/carousel.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/carousel.component.ts"],"names":[],"mappings":"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","file":"carousel.component.js","sourceRoot":"","sourcesContent":["/**\n * :tmtfactory) © 2017\n * Alex Marcos \n * @ignore\n */\nimport {\n AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges,\n ViewChild\n } from '@angular/core';\nimport * as Hammer from 'hammerjs';\nimport {Carousel} from \"./Carousel\";\n\n\n\n\n\n\n// TODO: move chart.js to it's own component\nexport class CarouselComponent implements OnInit,OnChanges,AfterViewInit {\n\n public carousel : Carousel;\n //carrousel radious\n private radius:any;\n private rotationFn : string;\n private itemsCarouselRendered : number = 0 ;\n morePairSlides = 1;\n angle = 45;\n ratioScale = 1;\n margin = 20;\n perspective = 2000;\n endInSlide = true;\n timeToSlide = 300;\n lockSlides = false;\n initialSlide = 0;\n loop = false;\n axis = \"horizontal\";\n\n //autoPlay\n autoPlay = false;\n delayAutoPlay = 3000;\n private autoPlayTimeout : any;\n\n onInitCarousel = new EventEmitter();\n onReadyCarousel = new EventEmitter();\n onChangePropertiesCarousel = new EventEmitter();\n\n onSlideChange = new EventEmitter();\n onSlideCentered = new EventEmitter();\n\n onTransitionStart = new EventEmitter();\n onTransitionEnd = new EventEmitter();\n onSlideNextTransitionStart = new EventEmitter();\n onSlideNextTransitionEnd = new EventEmitter();\n onSlidePrevTransitionStart = new EventEmitter();\n onSlidePrevTransitionEnd = new EventEmitter();\n\n onSlideMove = new EventEmitter();\n onSlideMoveEnd = new EventEmitter();\n onSlideMoveStart = new EventEmitter();\n\n onTouchMove = new EventEmitter();\n onTouchStart = new EventEmitter();\n onTouchEnd = new EventEmitter();\n\n onReachBeginning = new EventEmitter();\n onReachEnd = new EventEmitter();\n\n carouselElm: ElementRef;\n containerElm: ElementRef;\n\n\n\n constructor(private componentElement:ElementRef){\n this.carousel = new Carousel();\n }\n\n onDomChange($event : any){\n if($event.addedNodes.length > 0){\n if(this.itemsCarouselRendered === 0){\n this.reInit();\n }\n else{\n this.update();\n this.updateCssShowSlides();\n }\n this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName(\"item-carousel\").length;\n }\n }\n\n ngOnInit(){\n this.onInitCarousel.emit(this.carousel);\n this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName(\"item-carousel\").length\n }\n\n ngOnChanges(changes : SimpleChanges){\n for(let i=0;i vm.detectCurrentSlide());\n }\n }\n public slidePrev(){\n if(this.checkLimitsCarrousel(this.carousel.activeIndex-1)){\n this.moveSlideTo(this.carousel.activeIndex-1);\n let vm = this;\n setTimeout( () => vm.detectCurrentSlide());\n }\n }\n public slideTo(index : number){\n if(this.checkLimitsCarrousel(index)){\n this.moveSlideTo(index);\n let vm = this;\n setTimeout( () => vm.detectCurrentSlide());\n }\n }\n\n public autoPlayStart(){\n this.autoPlay=true;\n this.autoPlaySlide();\n }\n public autoPlayStop(){\n clearInterval(this.autoPlayTimeout);\n this.carousel.autoPlayIsRunning = false;\n }\n public toggleMode(){\n this.axis = this.axis == \"vertical\"? \"horizontal\":\"vertical\";\n this.update();\n\n }\n\n public reInit(){\n this.carousel = new Carousel;\n this.configPlugin();\n }\n\n public update(){\n this.setPerspectiveContainer();\n this.checkRotation();\n this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName(\"item-carousel\"));\n this.carousel.totalItems = this.carousel.items.length;\n this.getmaxSizes();\n this.carousel.lockSlides = this.lockSlides;\n this.setDegreesOnSlides();\n this.setTransformCarrousel(-this.carousel.degreesSlides[this.carousel.activeIndex]);\n }\n\n\n\n private configPlugin(){\n // this.setPerspectiveContainer();\n // this.checkRotation();\n // this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName(\"item-carousel\"));\n // this.carousel.totalItems = this.carousel.items.length;\n // this.getmaxSizes();\n // this.carousel.lockSlides = this.lockSlides;\n // this.setDegreesOnSlides();\n this.update();\n this.manageEvents();\n this.initSlidesOn();\n this.updateCssShowSlides();\n this.autoPlaySlide();\n }\n\n\n private initEventsPan(){\n let hammertime = new Hammer(this.carouselElm.nativeElement);\n hammertime.on('pan', this.rotate.bind(this));\n hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL ,threshold:0});\n }\n\n private rotate(e : any){\n if(!this.carousel.lockSlides) {\n let velocity = this.carousel.isHorizontal ? e.velocityX : -e.velocityY;\n this.setNewDeg(this.carousel.currdeg + velocity*window.devicePixelRatio);\n this.moveCarrousel(this.carousel.currdeg);\n if (e.isFinal) {\n if (this.endInSlide) {\n this.moveSlideTo(this.carousel.activeIndex);\n }\n }\n }\n }\n\n private autoPlaySlide(){\n if(this.autoPlay){\n this.autoPlayTimeout = setTimeout(function () {\n this.carousel.autoPlayIsRunning = true;\n this.slideNext();\n this.autoPlaySlide();\n }.bind(this),this.delayAutoPlay);\n }\n }\n\n private initSlidesOn(){\n if(this.initialSlide >= 0 && this.initialSlide= this.carousel.items.length){\n this.carousel.activeIndex = this.carousel.items.length-1;\n this.initialSlide = this.carousel.activeIndex;\n }\n else{\n this.carousel.activeIndex = 0;\n this.initialSlide = this.carousel.activeIndex;\n }\n\n let newDeg = this.carousel.activeIndex*this.angle;\n this.setNewDeg(-newDeg);\n this.setTransformCarrousel(-newDeg);\n }\n\n private setNewDeg(newDeg : number){\n this.carousel.currdeg = newDeg;\n if(this.carousel.currdeg > 0){\n this.carousel.currdeg = 0;\n }\n if(this.carousel.currdeg < -this.carousel.maxDegree){\n this.carousel.currdeg = -this.carousel.maxDegree;\n }\n\n }\n private checkRotation(){\n this.carousel.isHorizontal = this.axis !== \"vertical\";\n this.rotationFn = this.carousel.isHorizontal?'rotateY':'rotateX';\n }\n private checkLimitsCarrousel(index : number){\n return this.carousel.activeIndex != index && index >=0 && index < this.carousel.totalItems\n }\n\n private moveSlideTo(index : number){\n this.setNewDeg(-this.carousel.degreesSlides[index]);\n this.moveCarrousel(this.carousel.currdeg,this.timeToSlide);\n }\n\n private moveCarrousel(deg : number, timeTransform : number =0){\n this.carouselElm.nativeElement.style.transition = \"transform \"+timeTransform+\"ms\";\n this.carouselElm.nativeElement.style.webkitTransition = \"transform \"+timeTransform+\"ms\";\n this.setTransformCarrousel(deg);\n this.detectCurrentSlide();\n\n }\n private setTransformCarrousel(deg : number){\n this.carouselElm.nativeElement.style.transform = \"translateZ(\"+(-this.radius)+\"px) \"+this.rotationFn+\"(\"+deg+\"deg)\";\n this.carouselElm.nativeElement.style.webkitTransform = \"translateZ(\"+(-this.radius)+\"px) \"+this.rotationFn+\"(\"+deg+\"deg)\";\n this.sendSlideIsCentered();\n }\n\n private sendSlideIsCentered(){\n if(this.carousel.currdeg == -this.carousel.degreesSlides[this.carousel.activeIndex]){\n this.onSlideCentered.emit(this.carousel)\n }\n }\n\n private setPerspectiveContainer(){\n this.containerElm.nativeElement.style.perspective = this.perspective;\n this.containerElm.nativeElement.style.webkitPerspective = this.perspective;\n this.containerElm.nativeElement.style.MozPerspective = this.perspective;\n }\n\n private getmaxSizes(){\n this.carousel.items.map((val : any) =>{\n let witdh = val.offsetWidth;\n let height = val.offsetHeight;\n this.carousel.maxWidthSize = 0;\n this.carousel.maxHeigthSize = 0;\n if( witdh > this.carousel.maxWidthSize){\n this.carousel.maxWidthSize = witdh;\n this.carousel.totalWidth = this.carousel.items.length*this.carousel.maxWidthSize;\n }\n if( height > this.carousel.maxHeigthSize){\n this.carousel.maxHeigthSize = height;\n this.carousel.totalWidth = this.carousel.items.length*this.carousel.maxHeigthSize;\n }\n });\n this.setContainerWithMaxSize();\n }\n private setContainerWithMaxSize(){\n this.containerElm.nativeElement.style.width = this.carousel.maxWidthSize+'px';\n this.containerElm.nativeElement.style.height = this.carousel.maxHeigthSize+'px';\n }\n private setDegreesOnSlides(){\n let auxDegree = 0;\n let panelSize = this.carousel.isHorizontal ? this.carousel.maxWidthSize:this.carousel.maxHeigthSize;\n this.radius = (Math.round( ( panelSize / 2 ) /\n Math.tan( Math.PI / (360/this.angle) ) )+this.margin);\n this.carousel.degreesSlides=[];\n this.carousel.items.map((val : any,index : number) =>{\n val.style.transform = this.rotationFn+\"(\"+auxDegree+\"deg) translateZ(\"+(this.radius)+\"px)\";\n val.style.webkitTransform = this.rotationFn+\"(\"+auxDegree+\"deg) translateZ(\"+(this.radius)+\"px)\";\n this.carousel.degreesSlides.push(auxDegree);\n this.carousel.maxDegree = auxDegree;\n auxDegree+=this.angle;\n });\n\n }\n\n private detectCurrentSlide(){\n let aux = 99e9;\n let index = 0;\n this.carousel.degreesSlides.forEach((val : any,i : number)=>{\n let res = Math.abs(val-Math.abs(this.carousel.currdeg));\n if(res 0){\n Array.from(this.carouselElm.nativeElement.getElementsByClassName(tagClass)).map((val : any) => {\n val['classList'].remove(tagClass);\n })\n }\n }\n private manageEvents(){\n let options : any = {\n preventDefault: true\n };\n let vm = this;\n let hammertime = new Hammer(this.carouselElm.nativeElement, options);\n\n hammertime.on(\"panstart\", function(e){\n vm.onSlideMoveStart.emit({ carousel:vm.carousel,event:e});\n });\n hammertime.on(\"panend\", function(e){\n vm.onSlideMoveEnd.emit({ carousel:vm.carousel,event:e});\n });\n hammertime.on(\"pan\", function(e){\n vm.onSlideMove.emit({carousel:vm.carousel,event:e});\n });\n\n\n this.carouselElm.nativeElement.addEventListener('touchstart', (e : any) =>{\n vm.onTouchStart.emit({carousel:vm.carousel,event:e});\n });\n this.carouselElm.nativeElement.addEventListener('touchmove', (e : any) =>{\n vm.onTouchMove.emit({carousel:vm.carousel,event:e});\n });\n this.carouselElm.nativeElement.addEventListener('touchend', (e : any) =>{\n vm.onTouchEnd.emit({ carousel:vm.carousel,event:e});\n });\n\n this.carouselElm.nativeElement.addEventListener('transitionend', (e : any) =>{\n let elm = {carousel:vm.carousel,event:e};\n if(e.propertyName === \"transform\"){\n this.onTransitionEnd.emit(elm);\n if(vm.carousel.lastIndex > vm.carousel.activeIndex){\n this.onSlideNextTransitionEnd.emit(elm);\n }\n else{\n this.onSlidePrevTransitionEnd.emit(elm);\n }\n }\n });\n\n this.carouselElm.nativeElement.addEventListener('transitionstart', (e : any) =>{\n let elm = {carousel:vm.carousel,event:e};\n if(e.propertyName === \"transform\"){\n this.onTransitionStart.emit(elm);\n if(e.direction === Hammer.DIRECTION_LEFT){\n vm.onSlideNextTransitionStart.emit(elm);\n }\n else if(e.direction === Hammer.DIRECTION_RIGHT){\n vm.onSlidePrevTransitionStart.emit(elm);\n }\n }\n });\n window.addEventListener(\"resize\", function(){\n this.update();\n }.bind(this));\n\n }\nstatic decorators: DecoratorInvocation[] = [\n{ type: Component, args: [{\n selector: 'carousel-component',\n styles: [`\n :host{\n display: flex;\n }\n :host .container {\n margin: 0 auto;\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n\n :host .container .carousel {\n height: 100%;\n width: 100%;\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n \n }\n :host.ready .carousel {\n -webkit-transition: -webkit-transform 300ms;\n -moz-transition:-moz-transform 300ms;\n -o-transition: -o-transform 300ms;\n transition: transform 300ms;\n }\n :host .container .carousel ::content >>> .item-carousel {\n display: block;\n position: absolute;\n border:1px solid black;\n width: 100%;\n height: 100%;\n text-align: center;\n transform-style: preserve-3d;\n opacity: 0;\n }\n :host.ready .carousel ::content >>> .item-carousel {\n -webkit-transition: opacity 300ms, -webkit-transform 300ms;\n -moz-transition: opacity 300ms, -moz-transform 300ms;\n -o-transition: opacity 300ms, -o-transform 300ms;\n transition: opacity 300ms, transform 300ms;\n }\n \n :host .container .carousel ::content >>> .item-carousel img{\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n }\n \n :host .container .carousel ::content >>> .item-carousel.next,\n :host .container .carousel ::content >>> .item-carousel.prev,\n :host .container .carousel ::content >>> .item-carousel.actual{\n opacity: 0.95;\n }\n\n\n `],\n\n template: '
\\n' +\n '
\\n' +\n ' \\n' +\n '
\\n' +\n '
',\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n{type: ElementRef, },\n];\nstatic propDecorators: {[key: string]: DecoratorInvocation[]} = {\n'morePairSlides': [{ type: Input, args: [\"morePairSlides\", ] },],\n'angle': [{ type: Input, args: [\"angle\", ] },],\n'ratioScale': [{ type: Input, args: [\"ratioScale\", ] },],\n'margin': [{ type: Input, args: [\"margin\", ] },],\n'perspective': [{ type: Input, args: [\"perspective\", ] },],\n'endInSlide': [{ type: Input, args: [\"endInSlide\", ] },],\n'timeToSlide': [{ type: Input, args: [\"timeToSlide\", ] },],\n'lockSlides': [{ type: Input, args: [\"lockSlides\", ] },],\n'initialSlide': [{ type: Input, args: [\"initialSlide\", ] },],\n'loop': [{ type: Input, args: [\"loop\", ] },],\n'axis': [{ type: Input, args: [\"mode\", ] },],\n'autoPlay': [{ type: Input, args: [\"autoPlay\", ] },],\n'delayAutoPlay': [{ type: Input, args: [\"delayAutoPlay\", ] },],\n'onInitCarousel': [{ type: Output, args: [\"onInit\", ] },],\n'onReadyCarousel': [{ type: Output, args: [\"onReady\", ] },],\n'onChangePropertiesCarousel': [{ type: Output, args: [\"onChangeProperties\", ] },],\n'onSlideChange': [{ type: Output, args: [\"onSlideChange\", ] },],\n'onSlideCentered': [{ type: Output, args: [\"onSlideCentered\", ] },],\n'onTransitionStart': [{ type: Output, args: [\"onTransitionStart\", ] },],\n'onTransitionEnd': [{ type: Output, args: [\"onTransitionEnd\", ] },],\n'onSlideNextTransitionStart': [{ type: Output, args: [\"onSlideNextTransitionStart\", ] },],\n'onSlideNextTransitionEnd': [{ type: Output, args: [\"onSlideNextTransitionEnd\", ] },],\n'onSlidePrevTransitionStart': [{ type: Output, args: [\"onSlidePrevTransitionStart\", ] },],\n'onSlidePrevTransitionEnd': [{ type: Output, args: [\"onSlidePrevTransitionEnd\", ] },],\n'onSlideMove': [{ type: Output, args: [\"onSlideMove\", ] },],\n'onSlideMoveEnd': [{ type: Output, args: [\"onSlideMoveEnd\", ] },],\n'onSlideMoveStart': [{ type: Output, args: [\"onSlideMoveStart\", ] },],\n'onTouchMove': [{ type: Output, args: [\"onTouchMove\", ] },],\n'onTouchStart': [{ type: Output, args: [\"onTouchStart\", ] },],\n'onTouchEnd': [{ type: Output, args: [\"onTouchEnd\", ] },],\n'onReachBeginning': [{ type: Output, args: [\"onReachBeginning\", ] },],\n'onReachEnd': [{ type: Output, args: [\"onReachEnd\", ] },],\n'carouselElm': [{ type: ViewChild, args: [\"carousel\", ] },],\n'containerElm': [{ type: ViewChild, args: [\"container\", ] },],\n};\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} -------------------------------------------------------------------------------- /dist/src/carousel.component.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"CarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"carousel-component","styles":["\n :host{\n display: flex;\n }\n :host .container {\n margin: 0 auto;\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n\n :host .container .carousel {\n height: 100%;\n width: 100%;\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n \n }\n :host.ready .carousel {\n -webkit-transition: -webkit-transform 300ms;\n -moz-transition:-moz-transform 300ms;\n -o-transition: -o-transform 300ms;\n transition: transform 300ms;\n }\n :host .container .carousel ::content >>> .item-carousel {\n display: block;\n position: absolute;\n border:1px solid black;\n width: 100%;\n height: 100%;\n text-align: center;\n transform-style: preserve-3d;\n opacity: 0;\n }\n :host.ready .carousel ::content >>> .item-carousel {\n -webkit-transition: opacity 300ms, -webkit-transform 300ms;\n -moz-transition: opacity 300ms, -moz-transform 300ms;\n -o-transition: opacity 300ms, -o-transform 300ms;\n transition: opacity 300ms, transform 300ms;\n }\n \n :host .container .carousel ::content >>> .item-carousel img{\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n }\n \n :host .container .carousel ::content >>> .item-carousel.next,\n :host .container .carousel ::content >>> .item-carousel.prev,\n :host .container .carousel ::content >>> .item-carousel.actual{\n opacity: 0.95;\n }\n\n\n "],"template":"
\n
\n \n
\n
"}]}],"members":{"morePairSlides":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["morePairSlides"]}]}],"angle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["angle"]}]}],"ratioScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ratioScale"]}]}],"margin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["margin"]}]}],"perspective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["perspective"]}]}],"endInSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["endInSlide"]}]}],"timeToSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["timeToSlide"]}]}],"lockSlides":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["lockSlides"]}]}],"initialSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["initialSlide"]}]}],"loop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["loop"]}]}],"axis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["mode"]}]}],"autoPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["autoPlay"]}]}],"delayAutoPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["delayAutoPlay"]}]}],"onInitCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onInit"]}]}],"onReadyCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReady"]}]}],"onChangePropertiesCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onChangeProperties"]}]}],"onSlideChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideChange"]}]}],"onSlideCentered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideCentered"]}]}],"onTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTransitionStart"]}]}],"onTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTransitionEnd"]}]}],"onSlideNextTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideNextTransitionStart"]}]}],"onSlideNextTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideNextTransitionEnd"]}]}],"onSlidePrevTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlidePrevTransitionStart"]}]}],"onSlidePrevTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlidePrevTransitionEnd"]}]}],"onSlideMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMove"]}]}],"onSlideMoveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMoveEnd"]}]}],"onSlideMoveStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMoveStart"]}]}],"onTouchMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchMove"]}]}],"onTouchStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchStart"]}]}],"onTouchEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchEnd"]}]}],"onReachBeginning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReachBeginning"]}]}],"onReachEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReachEnd"]}]}],"carouselElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["carousel"]}]}],"containerElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onDomChange":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"lockCarousel":[{"__symbolic":"method"}],"slideNext":[{"__symbolic":"method"}],"slidePrev":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"autoPlayStart":[{"__symbolic":"method"}],"autoPlayStop":[{"__symbolic":"method"}],"toggleMode":[{"__symbolic":"method"}],"reInit":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"configPlugin":[{"__symbolic":"method"}],"initEventsPan":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"autoPlaySlide":[{"__symbolic":"method"}],"initSlidesOn":[{"__symbolic":"method"}],"setNewDeg":[{"__symbolic":"method"}],"checkRotation":[{"__symbolic":"method"}],"checkLimitsCarrousel":[{"__symbolic":"method"}],"moveSlideTo":[{"__symbolic":"method"}],"moveCarrousel":[{"__symbolic":"method"}],"setTransformCarrousel":[{"__symbolic":"method"}],"sendSlideIsCentered":[{"__symbolic":"method"}],"setPerspectiveContainer":[{"__symbolic":"method"}],"getmaxSizes":[{"__symbolic":"method"}],"setContainerWithMaxSize":[{"__symbolic":"method"}],"setDegreesOnSlides":[{"__symbolic":"method"}],"detectCurrentSlide":[{"__symbolic":"method"}],"updateCssShowSlides":[{"__symbolic":"method"}],"removeClassShowSlides":[{"__symbolic":"method"}],"manageEvents":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"carousel-component","styles":["\n :host{\n display: flex;\n }\n :host .container {\n margin: 0 auto;\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n\n :host .container .carousel {\n height: 100%;\n width: 100%;\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n \n }\n :host.ready .carousel {\n -webkit-transition: -webkit-transform 300ms;\n -moz-transition:-moz-transform 300ms;\n -o-transition: -o-transform 300ms;\n transition: transform 300ms;\n }\n :host .container .carousel ::content >>> .item-carousel {\n display: block;\n position: absolute;\n border:1px solid black;\n width: 100%;\n height: 100%;\n text-align: center;\n transform-style: preserve-3d;\n opacity: 0;\n }\n :host.ready .carousel ::content >>> .item-carousel {\n -webkit-transition: opacity 300ms, -webkit-transform 300ms;\n -moz-transition: opacity 300ms, -moz-transform 300ms;\n -o-transition: opacity 300ms, -o-transform 300ms;\n transition: opacity 300ms, transform 300ms;\n }\n \n :host .container .carousel ::content >>> .item-carousel img{\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n }\n \n :host .container .carousel ::content >>> .item-carousel.next,\n :host .container .carousel ::content >>> .item-carousel.prev,\n :host .container .carousel ::content >>> .item-carousel.actual{\n opacity: 0.95;\n }\n\n\n "],"template":"
\n
\n \n
\n
"}]}],"members":{"morePairSlides":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["morePairSlides"]}]}],"angle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["angle"]}]}],"ratioScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ratioScale"]}]}],"margin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["margin"]}]}],"perspective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["perspective"]}]}],"endInSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["endInSlide"]}]}],"timeToSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["timeToSlide"]}]}],"lockSlides":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["lockSlides"]}]}],"initialSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["initialSlide"]}]}],"loop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["loop"]}]}],"axis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["mode"]}]}],"autoPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["autoPlay"]}]}],"delayAutoPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["delayAutoPlay"]}]}],"onInitCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onInit"]}]}],"onReadyCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReady"]}]}],"onChangePropertiesCarousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onChangeProperties"]}]}],"onSlideChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideChange"]}]}],"onSlideCentered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideCentered"]}]}],"onTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTransitionStart"]}]}],"onTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTransitionEnd"]}]}],"onSlideNextTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideNextTransitionStart"]}]}],"onSlideNextTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideNextTransitionEnd"]}]}],"onSlidePrevTransitionStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlidePrevTransitionStart"]}]}],"onSlidePrevTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlidePrevTransitionEnd"]}]}],"onSlideMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMove"]}]}],"onSlideMoveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMoveEnd"]}]}],"onSlideMoveStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSlideMoveStart"]}]}],"onTouchMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchMove"]}]}],"onTouchStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchStart"]}]}],"onTouchEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onTouchEnd"]}]}],"onReachBeginning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReachBeginning"]}]}],"onReachEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onReachEnd"]}]}],"carouselElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["carousel"]}]}],"containerElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onDomChange":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"lockCarousel":[{"__symbolic":"method"}],"slideNext":[{"__symbolic":"method"}],"slidePrev":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"autoPlayStart":[{"__symbolic":"method"}],"autoPlayStop":[{"__symbolic":"method"}],"toggleMode":[{"__symbolic":"method"}],"reInit":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"configPlugin":[{"__symbolic":"method"}],"initEventsPan":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"autoPlaySlide":[{"__symbolic":"method"}],"initSlidesOn":[{"__symbolic":"method"}],"setNewDeg":[{"__symbolic":"method"}],"checkRotation":[{"__symbolic":"method"}],"checkLimitsCarrousel":[{"__symbolic":"method"}],"moveSlideTo":[{"__symbolic":"method"}],"moveCarrousel":[{"__symbolic":"method"}],"setTransformCarrousel":[{"__symbolic":"method"}],"sendSlideIsCentered":[{"__symbolic":"method"}],"setPerspectiveContainer":[{"__symbolic":"method"}],"getmaxSizes":[{"__symbolic":"method"}],"setContainerWithMaxSize":[{"__symbolic":"method"}],"setDegreesOnSlides":[{"__symbolic":"method"}],"detectCurrentSlide":[{"__symbolic":"method"}],"updateCssShowSlides":[{"__symbolic":"method"}],"removeClassShowSlides":[{"__symbolic":"method"}],"manageEvents":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /dist/src/carousel.module.d.ts: -------------------------------------------------------------------------------- 1 | import { HammerGestureConfig } from '@angular/platform-browser'; 2 | export declare class MyHammerConfig extends HammerGestureConfig { 3 | overrides: any; 4 | } 5 | export declare class CarouselModule { 6 | } 7 | -------------------------------------------------------------------------------- /dist/src/carousel.module.js: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | var __extends = (this && this.__extends) || (function () { 7 | var extendStatics = Object.setPrototypeOf || 8 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 9 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 10 | return function (d, b) { 11 | extendStatics(d, b); 12 | function __() { this.constructor = d; } 13 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 14 | }; 15 | })(); 16 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 17 | import { CarouselComponent } from './carousel.component'; 18 | import { DomChangeDirective } from './dom-change.directive'; 19 | import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; 20 | import * as Hammer from 'hammerjs'; 21 | var MyHammerConfig = /** @class */ (function (_super) { 22 | __extends(MyHammerConfig, _super); 23 | function MyHammerConfig() { 24 | var _this = _super !== null && _super.apply(this, arguments) || this; 25 | _this.overrides = { 26 | 'pan': { direction: Hammer.DIRECTION_ALL } // override default settings 27 | }; 28 | return _this; 29 | } 30 | return MyHammerConfig; 31 | }(HammerGestureConfig)); 32 | export { MyHammerConfig }; 33 | var CarouselModule = /** @class */ (function () { 34 | function CarouselModule() { 35 | } 36 | CarouselModule.decorators = [ 37 | { type: NgModule, args: [{ 38 | declarations: [ 39 | DomChangeDirective, 40 | CarouselComponent, 41 | ], 42 | providers: [ 43 | { 44 | provide: HAMMER_GESTURE_CONFIG, 45 | useClass: MyHammerConfig 46 | } 47 | ], 48 | exports: [CarouselComponent], 49 | schemas: [CUSTOM_ELEMENTS_SCHEMA] 50 | },] }, 51 | ]; 52 | /** @nocollapse */ 53 | CarouselModule.ctorParameters = function () { return []; }; 54 | return CarouselModule; 55 | }()); 56 | export { CarouselModule }; 57 | //# sourceMappingURL=carousel.module.js.map -------------------------------------------------------------------------------- /dist/src/carousel.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/carousel.module.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;AAEH,OAAO,EAAA,QAAE,EAAQ,sBAAC,EAAsB,MAAM,eAAA,CAAgB;AAC9D,OAAO,EAAE,iBAAA,EAAkB,MAAO,sBAAA,CAAuB;AACzD,OAAO,EAAE,kBAAA,EAAmB,MAAO,wBAAA,CAAyB;AAC5D,OAAO,EAAE,mBAAA,EAAqB,qBAAA,EAAsB,MAAO,2BAAA,CAA4B;AACvF,OAAO,KAAK,MAAA,MAAY,UAAA,CAAW;AAEnC;IAAoC,kCAAmB;IAAvD;QAAA,qEAIC;QAHC,eAAS,GAAQ;YACf,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,4BAA4B;SACxE,CAAA;;IACH,CAAC;IAAD,qBAAC;AAAD,CAJA,AAIC,CAJmC,mBAAmB,GAItD;;AAGD;IAAA;IAoBA,CAAC;IApBmC,yBAAU,GAA0B;QACxE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oBACvB,YAAY,EAAE;wBACV,kBAAkB;wBAClB,iBAAiB;qBAEpB;oBACD,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,qBAAqB;4BAC9B,QAAQ,EAAE,cAAc;yBACzB;qBACF;oBACD,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,sBAAsB,CAAC;iBAClC,EAAG,EAAE;KACL,CAAC;IACF,kBAAkB;IACX,6BAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;IACF,qBAAC;CApBD,AAoBC,IAAA;SApBY,cAAc","file":"carousel.module.js","sourceRoot":"","sourcesContent":["/**\n * :tmtfactory) © 2017\n * Alex Marcos \n * @ignore\n */\n\nimport {NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';\nimport { CarouselComponent } from './carousel.component';\nimport { DomChangeDirective } from './dom-change.directive';\nimport { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';\nimport * as Hammer from 'hammerjs';\n\nexport class MyHammerConfig extends HammerGestureConfig {\n overrides = {\n 'pan': { direction: Hammer.DIRECTION_ALL } // override default settings\n }\n}\n\n\nexport class CarouselModule {static decorators: DecoratorInvocation[] = [\n{ type: NgModule, args: [{\n declarations: [\n DomChangeDirective,\n CarouselComponent,\n\n ],\n providers: [\n {\n provide: HAMMER_GESTURE_CONFIG,\n useClass: MyHammerConfig\n }\n ],\n exports: [CarouselComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA]\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n];\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} -------------------------------------------------------------------------------- /dist/src/carousel.module.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"MyHammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig"}},"CarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./dom-change.directive","name":"DomChangeDirective"},{"__symbolic":"reference","module":"./carousel.component","name":"CarouselComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","name":"MyHammerConfig"}}],"exports":[{"__symbolic":"reference","module":"./carousel.component","name":"CarouselComponent"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"MyHammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig"}},"CarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./dom-change.directive","name":"DomChangeDirective"},{"__symbolic":"reference","module":"./carousel.component","name":"CarouselComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","name":"MyHammerConfig"}}],"exports":[{"__symbolic":"reference","module":"./carousel.component","name":"CarouselComponent"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}}] -------------------------------------------------------------------------------- /dist/src/index.d.ts: -------------------------------------------------------------------------------- 1 | export { CarouselModule } from './carousel.module'; 2 | export { CarouselComponent } from './carousel.component'; 3 | -------------------------------------------------------------------------------- /dist/src/index.js: -------------------------------------------------------------------------------- 1 | export { CarouselModule } from './carousel.module'; 2 | export { CarouselComponent } from './carousel.component'; 3 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /dist/src/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC","file":"index.js","sourceRoot":"","sourcesContent":["export { CarouselModule } from './carousel.module';\nexport { CarouselComponent } from './carousel.component';\n\n"]} -------------------------------------------------------------------------------- /dist/src/index.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./carousel.module","export":["CarouselModule"]},{"from":"./carousel.component","export":["CarouselComponent"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./carousel.module","export":["CarouselModule"]},{"from":"./carousel.component","export":["CarouselComponent"]}]}] -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; -------------------------------------------------------------------------------- /karma.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | var configuration = { 3 | basePath: '', 4 | frameworks: ['jasmine',"karma-typescript"], 5 | files: [ 6 | // { pattern: 'src/*.ts', watched: false }, 7 | { pattern: 'test/main.js', watched: false }, 8 | // { pattern: 'src/**/*.spec.js', watched: false } 9 | ], 10 | exclude: [ 11 | ], 12 | preprocessors: { 13 | '**/*.ts': ["karma-typescript"], 14 | 'test/main.js': ['coverage','webpack', 'sourcemap'] 15 | }, 16 | webpack: require('./test/webpack.config')({env: 'test'}), 17 | reporters: ['progress',"karma-typescript",'spec','coverage', 'remap-coverage'], 18 | port: 9876, 19 | colors: true, 20 | logLevel: config.LOG_INFO, 21 | autoWatch: false, 22 | browsers: ['PhantomJS','smallerChrome'], 23 | concurrency: Infinity, 24 | coverageReporter: { 25 | type: 'in-memory' 26 | }, 27 | 28 | remapCoverageReporter: { 29 | 'text-summary': null, // stdout 30 | html: './coverage/html', 31 | 'lcovonly': './coverage/lcov.info', 32 | }, 33 | karmaTypescriptConfig: { 34 | tsconfig: './tsconfig.spec.json' 35 | }, 36 | customLaunchers: { 37 | ChromeTravisCi: { 38 | base: 'Chrome', 39 | flags: ['--no-sandbox'] 40 | }, 41 | smallerChrome: { 42 | base: "Chrome", 43 | flags: [ 44 | "--window-size=1024,768" 45 | ] 46 | } 47 | }, 48 | singleRun: true 49 | 50 | }; 51 | 52 | if (process.env.TRAVIS){ 53 | configuration.browsers = [ 54 | 'ChromeTravisCi' 55 | ]; 56 | } 57 | 58 | config.set(configuration) 59 | } -------------------------------------------------------------------------------- /package-dist.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-carousel", 3 | "version": "1.0.16", 4 | "description": "Angular 2 Minimalist carousel", 5 | "main": "bundles/ng2-carousel-module.umd.js", 6 | "module": "index.js", 7 | "typings": "index.d.ts", 8 | "keywords": [ 9 | "angular", 10 | "angular2", 11 | "angular 2", 12 | "angular 4", 13 | "ng2", 14 | "ngx", 15 | "carousel", 16 | "angular carousel" 17 | ], 18 | "author": { 19 | "name": "Alejandro Marcos", 20 | "email": "alexsbd1@gmail.com" 21 | }, 22 | "licenses": [{ 23 | "type": "MIT", 24 | "url": "https://github.com/kappys1/angular2-carrousel/blob/master/LICENSE" 25 | }], 26 | "repository" : { 27 | "type" : "git", 28 | "url" : "https://github.com/kappys1/angular2-carousel.git" 29 | }, 30 | "homepage": "", 31 | "bugs": { 32 | "url": "https://github.com/kappys1/angular2-carrousel/issues" 33 | }, 34 | "peerDependencies": { 35 | "@angular/core": ">=2.0.0 ", 36 | "@angular/platform-browser": ">=2.0.0", 37 | "rxjs": "^5.0.1", 38 | "hammerjs": "^2.0.8", 39 | "@types/hammerjs": "^2.0.35" 40 | } 41 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-carousel", 3 | "version": "1.0.17", 4 | "description": "Angular 2 Minimalist carousel", 5 | "main": "dist/bundle/ng2-carousel-module.umd.js", 6 | "module": "dist/index.ts", 7 | "jsnext:main": "carousel.module.js", 8 | "types": "carousel.module.d.ts", 9 | "scripts": { 10 | "test": "karma start karma.config.js", 11 | "e2e": "protractor", 12 | "transpile": "ngc", 13 | "package": "rollup -c", 14 | "clean": "rimraf .tmp && rimraf dist", 15 | "minify": "uglifyjs dist/bundles/ng2-carousel-module.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ng2-carousel-module.umd.js", 16 | "copy": "copyfiles LICENSE README.md dist && cpx './package-dist.json' dist && renamer --find 'package-dist.json' --replace 'package.json' ./dist/*", 17 | "build": "npm run clean && npm run transpile && npm run package && npm run minify && npm run copy", 18 | "publish-to-npm": "cd dist && npm publish", 19 | "build-and-publish": "npm run build && npm run publish-to-npm", 20 | "prepublishOnly": "npm test && npm run build", 21 | "coveralls": "cat coverage/lcov.info | coveralls" 22 | }, 23 | "keywords": [ 24 | "angular", 25 | "angular2", 26 | "angular 2", 27 | "angular 4", 28 | "ng2", 29 | "ngx", 30 | "carousel", 31 | "angular carousel" 32 | ], 33 | "repository": { 34 | "type": "git", 35 | "url": "https://github.com/kappys1/angular2-carousel.git" 36 | }, 37 | "author": "Alejandro Marcos > Alejandro.marcos@tmtfactory", 38 | "contributors": [ 39 | "https://codepen.io/nopr/pen/rfBJx", 40 | "https://desandro.github.io/3dtransforms/docs/carousel.html", 41 | "https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464", 42 | "http://idangero.us/swiper/" 43 | ], 44 | "license": "MIT", 45 | "devDependencies": { 46 | "@angular/compiler": "^2.4.0 || ^4.0.0", 47 | "@angular/compiler-cli": "^2.4.0 || ^4.0.0", 48 | "@angular/platform-browser-dynamic": "^4.4.6", 49 | "@types/jasmine": "^2.8.2", 50 | "@types/node": "^6.0.92", 51 | "@types/webpack-env": "^1.12.1", 52 | "angular2-template-loader": "^0.5.0", 53 | "awesome-typescript-loader": "^2.2.4", 54 | "connect": "^3.6.5", 55 | "copyfiles": "^1.0.0", 56 | "core-js": "^2.4.1", 57 | "cpx": "^1.5.0", 58 | "istanbul-instrumenter-loader": "^3.0.0", 59 | "jasmine": "^2.8.0", 60 | "jasmine-spec-reporter": "^4.2.1", 61 | "karma": "^1.3.0", 62 | "karma-chrome-launcher": "^2.2.0", 63 | "karma-coverage": "^1.1.2", 64 | "karma-coverage-istanbul-reporter": "^1.3.0", 65 | "karma-jasmine": "^1.0.2", 66 | "karma-phantomjs-launcher": "^1.0.4", 67 | "karma-remap-coverage": "^0.1.4", 68 | "karma-sourcemap-loader": "^0.3.7", 69 | "karma-spec-reporter": "0.0.31", 70 | "karma-typescript": "^3.0.13", 71 | "karma-typescript-preprocessor": "^0.3.1", 72 | "karma-webpack": "^1.8.0", 73 | "node-static": "^0.7.9", 74 | "protractor": "^5.4.1", 75 | "raw-loader": "^0.5.1", 76 | "renamer": "^0.6.1", 77 | "rimraf": "^2.5.4", 78 | "rollup": "^0.43.0", 79 | "touch-simulate": "^0.1.1", 80 | "ts-loader": "^3.1.1", 81 | "ts-node": "^3.3.0", 82 | "tslint": "^5.8.0", 83 | "typescript": "^2.6.1", 84 | "typings": "^2.1.1", 85 | "uglify-js": "^2.7.5", 86 | "webpack": "^2.1.0-beta.25" 87 | }, 88 | "dependencies": { 89 | "@angular/common": "^2.4.0 || ^4.0.0", 90 | "@angular/core": "^2.4.0 || ^4.0.0", 91 | "@angular/platform-browser": "^2.4.0 || ^4.0.0", 92 | "@types/hammerjs": "^2.0.35", 93 | "hammerjs": "^2.0.8", 94 | "hoek": "^5.0.3", 95 | "rxjs": "^5.0.3", 96 | "serve-static": "^1.13.1", 97 | "zone.js": "^0.8.4" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | entry: 'dist/index.js', 3 | dest: 'dist/bundles/ng2-carousel-module.umd.js', 4 | sourceMap: true, 5 | format: 'umd', 6 | moduleName: 'ng.carouselModule', 7 | external: ['hammerjs','@angular/core','@angular/platform-browser','@angular/common'], 8 | globals: { 9 | '@angular/core': 'ng.core', 10 | '@angular/common': 'ng.common', 11 | '@angular/platform-browser': 'ng.platform-browser', 12 | 'hammerjs': 'Hammer' 13 | } 14 | } -------------------------------------------------------------------------------- /src/Carousel.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | 7 | 8 | export class Carousel{ 9 | 10 | 11 | 12 | private _currdeg = 0; 13 | private _totalItems = 0; 14 | private _maxWidthSize = 0; 15 | private _maxHeigthSize = 0; 16 | private _maxDegree = 0; 17 | private _totalWidth = 0; 18 | private _isHorizontal= false; 19 | private _items = []; 20 | private _degreesSlides = []; 21 | private _activeIndex = 0; 22 | private _lastIndex = -1; 23 | private _lockSlides = false; 24 | private _autoPlayIsRunning = false; 25 | 26 | 27 | get autoPlayIsRunning(): boolean { 28 | return this._autoPlayIsRunning; 29 | } 30 | 31 | set autoPlayIsRunning(value: boolean) { 32 | this._autoPlayIsRunning = value; 33 | } 34 | 35 | get currdeg(): number { 36 | return this._currdeg; 37 | } 38 | 39 | set currdeg(value: number) { 40 | this._currdeg = value; 41 | } 42 | 43 | get totalItems(): number { 44 | return this._totalItems; 45 | } 46 | 47 | set totalItems(value: number) { 48 | this._totalItems = value; 49 | } 50 | 51 | 52 | get isHorizontal(): boolean { 53 | return this._isHorizontal; 54 | } 55 | 56 | set isHorizontal(value: boolean) { 57 | this._isHorizontal = value; 58 | } 59 | 60 | get maxWidthSize(): number { 61 | return this._maxWidthSize; 62 | } 63 | 64 | set maxWidthSize(value: number) { 65 | this._maxWidthSize = value; 66 | } 67 | 68 | get maxHeigthSize(): number { 69 | return this._maxHeigthSize; 70 | } 71 | 72 | set maxHeigthSize(value: number) { 73 | this._maxHeigthSize = value; 74 | } 75 | 76 | get maxDegree(): number { 77 | return this._maxDegree; 78 | } 79 | 80 | set maxDegree(value: number) { 81 | this._maxDegree = value; 82 | } 83 | 84 | get totalWidth(): number { 85 | return this._totalWidth; 86 | } 87 | 88 | set totalWidth(value: number) { 89 | this._totalWidth = value; 90 | } 91 | 92 | get items(): any { 93 | return this._items; 94 | } 95 | 96 | set items(value: any) { 97 | this._items = value; 98 | } 99 | 100 | get degreesSlides(): any { 101 | return this._degreesSlides; 102 | } 103 | 104 | set degreesSlides(value: any) { 105 | this._degreesSlides = value; 106 | } 107 | 108 | get activeIndex(): number { 109 | return this._activeIndex; 110 | } 111 | 112 | set activeIndex(value: number) { 113 | this._activeIndex = value; 114 | } 115 | 116 | get lockSlides(): boolean { 117 | return this._lockSlides; 118 | } 119 | 120 | set lockSlides(value: boolean) { 121 | this._lockSlides = value; 122 | } 123 | 124 | get lastIndex(): number { 125 | return this._lastIndex; 126 | } 127 | 128 | set lastIndex(value: number) { 129 | this._lastIndex = value; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/carousel.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /src/carousel.component.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | carousel-component{ 7 | display: flex; 8 | .container { 9 | margin: 0 auto; 10 | width: 600px; 11 | height: 400px; 12 | position: relative; 13 | 14 | } 15 | 16 | .carousel { 17 | height: 100%; 18 | width: 100%; 19 | position: absolute; 20 | transform-style: preserve-3d; 21 | } 22 | 23 | .item-carousel { 24 | display: block; 25 | position: absolute; 26 | background: #000; 27 | width: 100%; 28 | height: 100%; 29 | line-height: 200px; 30 | font-size: 5em; 31 | text-align: center; 32 | transform-style: preserve-3d; 33 | overflow: hidden; 34 | opacity: 0; 35 | transition: opacity 300ms ease-in-out; 36 | img{ 37 | user-drag: none; 38 | user-select: none; 39 | -moz-user-select: none; 40 | -webkit-user-drag: none; 41 | -webkit-user-select: none; 42 | -ms-user-select: none; 43 | } 44 | } 45 | 46 | .item-carousel.next, 47 | .item-carousel.prev, 48 | .item-carousel.actual{ 49 | opacity: 0.95; 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /src/carousel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import {Component, ViewChild} from '@angular/core'; 2 | import {TestBed, async, tick, fakeAsync} from '@angular/core/testing'; 3 | import { CarouselModule } from './carousel.module'; 4 | import {CarouselComponent} from "./carousel.component"; 5 | import {isNumber} from "util"; 6 | import {By} from "@angular/platform-browser"; 7 | 8 | @Component({ 9 | selector: 'carousel-example', 10 | template: ` 11 | 12 |
hi
13 |
hi
14 |
hi
15 | 16 | ` 17 | }) 18 | class CarouselPruebaComponent { 19 | @ViewChild('topCarousel') topCarousel: CarouselComponent; 20 | text:string 21 | perspective:number=2000; 22 | initialSlide:number = 0; 23 | } 24 | let fixture : any; 25 | let component : any; 26 | let element : any; 27 | let carouselElm :any; 28 | /** 29 | * Single stage on check instance and init object 30 | */ 31 | describe('Carousel check init', () => { 32 | 33 | beforeEach(() => { 34 | TestBed.configureTestingModule({ 35 | imports:[CarouselModule], 36 | declarations: [CarouselPruebaComponent] 37 | }); 38 | }); 39 | beforeEach(async(() => { 40 | TestBed.compileComponents(); 41 | fixture = TestBed.createComponent(CarouselPruebaComponent); 42 | component = fixture.componentInstance; 43 | fixture.detectChanges(); 44 | })); 45 | 46 | it('is instance', async(() => { 47 | expect(component).toBeDefined(); 48 | })); 49 | it('check carosuel totalItems', () => { 50 | //check number of slides 51 | expect(component.topCarousel.carousel.totalItems).toEqual(3); 52 | }); 53 | it('check carosuel lockSlides', () => { 54 | //check don't lockSlide 55 | expect(component.topCarousel.carousel.lockSlides).toBeFalsy(); 56 | }); 57 | it('check carosuel currentDeg',() => { 58 | //check current deg 59 | console.log(typeof component.topCarousel.carousel.currdeg); 60 | expect(component.topCarousel.carousel.currdeg).toBe(0); 61 | }); 62 | it('check carosuel num items is same totalItems', () => { 63 | //check current deg 64 | expect(component.topCarousel.carousel.items.length).toEqual(component.topCarousel.carousel.totalItems); 65 | }); 66 | it('check carousel is horizontal', () => { 67 | //check is Horizontal 68 | expect(component.topCarousel.carousel.isHorizontal).toBeTruthy(); 69 | }); 70 | it('check active Index', () => { 71 | //check is Horizontal 72 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 73 | }); 74 | it('check max Height',() => { 75 | //check is Horizontal 76 | const el : HTMLElement = fixture.debugElement.nativeElement as HTMLElement; 77 | expect(el.querySelector('.item-carousel').clientHeight).toEqual(component.topCarousel.carousel.maxHeigthSize); 78 | }); 79 | it('check show Two faces more',() => { 80 | //check is Horizontal 81 | component.topCarousel.morePairSlides=2; 82 | component.topCarousel.reInit(); 83 | const el : HTMLElement = fixture.debugElement.nativeElement as HTMLElement; 84 | expect(el.querySelectorAll('.next').length).toEqual(2); 85 | }); 86 | 87 | it('autoStart on init',(done) => { 88 | //check is Horizontal 89 | component.topCarousel.autoPlay=true; 90 | component.topCarousel.delayAutoPlay=50; 91 | component.topCarousel.reInit(); 92 | setTimeout(function () { 93 | fixture.detectChanges(); 94 | expect(component.topCarousel.carousel.activeIndex).toBe(1); 95 | done(); 96 | },55); 97 | 98 | }); 99 | }); 100 | 101 | describe('Carousel Input() and Output() Variables', () => { 102 | beforeEach(() => { 103 | TestBed.configureTestingModule({ 104 | imports:[CarouselModule], 105 | declarations: [CarouselPruebaComponent] 106 | }); 107 | }); 108 | beforeEach(async(() => { 109 | TestBed.compileComponents(); 110 | fixture = TestBed.createComponent(CarouselPruebaComponent); 111 | component = fixture.componentInstance; 112 | element = fixture.debugElement; 113 | carouselElm = fixture.debugElement.query(By.css('.item-carousel')); 114 | fixture.detectChanges(); 115 | })); 116 | 117 | // all cases with one input 118 | it('Change Perspective Input', async(() => { 119 | component.perspective = 200; 120 | fixture.detectChanges(); 121 | expect(component.topCarousel.perspective).toBe(200); 122 | })); 123 | 124 | it('Change Init Slide superate max ', async(() => { 125 | component.initialSlide = 5; 126 | fixture.detectChanges(); 127 | component.topCarousel.reInit(); 128 | expect(component.topCarousel.initialSlide).toBe(2); 129 | expect(component.topCarousel.carousel.activeIndex).toBe(2); 130 | })); 131 | it('Change Init Slide superate max ', async(() => { 132 | component.initialSlide = -5; 133 | fixture.detectChanges(); 134 | component.topCarousel.reInit(); 135 | expect(component.topCarousel.initialSlide).toBe(0); 136 | expect(component.topCarousel.carousel.activeIndex).toBe(0); 137 | })); 138 | 139 | //outputs 140 | it('Output onChangeProperties ', async(() => { 141 | let value = null; 142 | component.topCarousel.onChangePropertiesCarousel.subscribe((res:any) => value = res); 143 | component.initialSlide=1; 144 | fixture.detectChanges(); 145 | expect(value.initialSlide.currentValue).toBe(1); 146 | })); 147 | 148 | it('Output onSlideChange ', async(() => { 149 | let value = null; 150 | component.topCarousel.onSlideChange.subscribe((res:any) => value = res); 151 | component.topCarousel.slideNext(); 152 | expect(value.activeIndex).toBe(1); 153 | })); 154 | 155 | 156 | it('Output touchstart ', (done) => { 157 | component.topCarousel.onTouchStart.subscribe(val =>{ 158 | expect(component.topCarousel.carousel.activeIndex).toBe(0); 159 | done(); 160 | }); 161 | let dimensions = fixture.nativeElement.getBoundingClientRect(); 162 | let x = dimensions.left + (dimensions.width/2); 163 | let y = dimensions.top + (dimensions.height/2); 164 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchstart',x,y); 165 | fixture.detectChanges(); 166 | }); 167 | 168 | it('Output touchmove ', (done) => { 169 | component.topCarousel.onTouchMove.subscribe(val =>{ 170 | expect(component.topCarousel.carousel.activeIndex).toBe(0); 171 | done(); 172 | }); 173 | let dimensions = fixture.nativeElement.getBoundingClientRect(); 174 | let x = dimensions.left + (dimensions.width/2); 175 | let y = dimensions.top + (dimensions.height/2); 176 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchmove',x,y); 177 | fixture.detectChanges(); 178 | }); 179 | 180 | it('Output touchend ', (done) => { 181 | component.topCarousel.onTouchEnd.subscribe(val =>{ 182 | expect(component.topCarousel.carousel.activeIndex).toBe(0); 183 | done(); 184 | }); 185 | let dimensions = fixture.nativeElement.getBoundingClientRect(); 186 | let x = dimensions.left + (dimensions.width/2); 187 | let y = dimensions.top + (dimensions.height/2); 188 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchend'); 189 | fixture.detectChanges(); 190 | }); 191 | 192 | it('Output panstart ', (done) => { 193 | // component.topCarousel.onTouchEnd.subscribe(val =>{ 194 | // expect(component.topCarousel.carousel.activeIndex).toBe(0); 195 | // done(); 196 | // }); 197 | let dimensions = fixture.nativeElement.getBoundingClientRect(); 198 | let x = dimensions.left + (dimensions.width/2); 199 | let y = dimensions.top + (dimensions.height/2); 200 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchstart',x,y); 201 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchmove',x+100,y); 202 | sendTouchEvent(component.topCarousel.carouselElm.nativeElement,'touchend',x+200,y); 203 | fixture.detectChanges(); 204 | expect(true).toBe(true) 205 | done(); 206 | }); 207 | 208 | }); 209 | 210 | describe('Carousel check public functions', () => { 211 | beforeEach(() => { 212 | TestBed.configureTestingModule({ 213 | imports:[CarouselModule], 214 | declarations: [CarouselPruebaComponent] 215 | }); 216 | }); 217 | beforeEach(async(() => { 218 | TestBed.compileComponents(); 219 | fixture = TestBed.createComponent(CarouselPruebaComponent); 220 | component = fixture.componentInstance; 221 | fixture.detectChanges(); 222 | })); 223 | it('Slide goTo', async(() => { 224 | component.topCarousel.slideTo(2); 225 | expect(component.topCarousel.carousel.activeIndex).toEqual(2); 226 | })); 227 | 228 | it('Slide superate Limit', async(() => { 229 | component.topCarousel.slideTo(4); 230 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 231 | })); 232 | it('Slide negative', async(() => { 233 | component.topCarousel.slideTo(-1); 234 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 235 | })); 236 | it('Slide Next', async(() => { 237 | component.topCarousel.slideNext(); 238 | expect(component.topCarousel.carousel.activeIndex).toEqual(1); 239 | })); 240 | it('Slide Next limit', async(() => { 241 | component.topCarousel.slideTo(2); 242 | component.topCarousel.slideNext(); 243 | expect(component.topCarousel.carousel.activeIndex).toEqual(2); 244 | })); 245 | it('Slide Prev', async(() => { 246 | component.topCarousel.slideTo(1); 247 | component.topCarousel.slidePrev(); 248 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 249 | })); 250 | it('Slide Prev limit', async(() => { 251 | component.topCarousel.slidePrev(); 252 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 253 | })); 254 | it('lock carousel', async(() => { 255 | component.topCarousel.lockCarousel(true); 256 | expect(component.topCarousel.carousel.lockSlides).toBeTruthy(); 257 | })); 258 | it('Toggle Mode to Vertical', async(() => { 259 | component.topCarousel.toggleMode(); 260 | expect(component.topCarousel.carousel.isHorizontal).toBeFalsy(); 261 | })); 262 | it('Toggle Mode to Horizontal', async(() => { 263 | component.topCarousel.toggleMode(); 264 | component.topCarousel.toggleMode(); 265 | expect(component.topCarousel.carousel.isHorizontal).toBeTruthy(); 266 | })); 267 | 268 | it('autoPlay start', (done) => { 269 | component.topCarousel.delayAutoPlay = 50; 270 | component.topCarousel.autoPlayStart(); 271 | fixture.detectChanges(); 272 | setTimeout(function () { 273 | expect(component.topCarousel.carousel.autoPlayIsRunning).toBeTruthy(); 274 | expect(component.topCarousel.carousel.activeIndex).toBe(1); 275 | component.topCarousel.autoPlayStop(); 276 | done(); 277 | },55); 278 | }); 279 | 280 | it('autoPlay stop',((done) => { 281 | component.topCarousel.delayAutoPlay = 50; 282 | component.topCarousel.autoPlayStart(); 283 | fixture.detectChanges(); 284 | setTimeout(function () { 285 | component.topCarousel.autoPlayStop(); 286 | fixture.detectChanges(); 287 | },55); 288 | setTimeout(function () { 289 | expect(component.topCarousel.carousel.activeIndex).toBe(1); 290 | expect(component.topCarousel.carousel.autoPlayIsRunning).toBeFalsy(); 291 | done(); 292 | },60); 293 | })); 294 | 295 | it('autoPlay not overflow',((done) => { 296 | component.topCarousel.delayAutoPlay = 10; 297 | component.topCarousel.autoPlayStart(); 298 | setTimeout(function () { 299 | expect(component.topCarousel.carousel.activeIndex).toBe(component.topCarousel.carousel.totalItems-1); 300 | done(); 301 | },60); 302 | })); 303 | 304 | it('Reinit Probe', async(() => { 305 | component.topCarousel.slideNext(); 306 | component.topCarousel.reInit(); 307 | expect(component.topCarousel.carousel.activeIndex).toEqual(0); 308 | })); 309 | 310 | it('Update', async(() => { 311 | component.topCarousel.perspective = 400; 312 | component.topCarousel.update(); 313 | let container = component.topCarousel.containerElm.nativeElement; 314 | let perspective = !isNumber(container.style.perspective)? parseInt(container.style.perspective.split('px')[0]) : container.style.perspective; 315 | expect(parseInt(perspective)).toEqual(400); 316 | })); 317 | 318 | afterEach(()=>{ 319 | fixture.destroy(); 320 | }) 321 | }); 322 | function sendTouchEvent(element, eventType,x=0,y=0) { 323 | 324 | let e; 325 | try{ 326 | e = document.createEvent('TouchEvent'); 327 | e.initEvent(eventType, true, true) 328 | } 329 | catch (err){ 330 | try{ 331 | e = document.createEvent('UIEvent'); 332 | e.initUIEvent(eventType, true, true,null,null); 333 | } 334 | catch(err){ 335 | e = document.createEvent('Event'); 336 | e.initTouchEvent(eventType, true, true) 337 | } 338 | } 339 | e.targetTouches = { 340 | pageX: x, 341 | pageY: y 342 | }; 343 | element.dispatchEvent(e); 344 | 345 | } 346 | -------------------------------------------------------------------------------- /src/carousel.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | import { 7 | AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, 8 | ViewChild 9 | } from '@angular/core'; 10 | import * as Hammer from 'hammerjs'; 11 | import {Carousel} from "./Carousel"; 12 | 13 | 14 | 15 | @Component({ 16 | selector: 'carousel-component', 17 | styles: [` 18 | :host{ 19 | display: flex; 20 | } 21 | :host .container { 22 | margin: 0 auto; 23 | width: 600px; 24 | height: 400px; 25 | position: relative; 26 | } 27 | 28 | 29 | :host .container .carousel { 30 | height: 100%; 31 | width: 100%; 32 | position: absolute; 33 | -webkit-transform-style: preserve-3d; 34 | -moz-transform-style: preserve-3d; 35 | -o-transform-style: preserve-3d; 36 | transform-style: preserve-3d; 37 | 38 | } 39 | :host.ready .carousel { 40 | -webkit-transition: -webkit-transform 300ms; 41 | -moz-transition:-moz-transform 300ms; 42 | -o-transition: -o-transform 300ms; 43 | transition: transform 300ms; 44 | } 45 | :host .container .carousel ::content >>> .item-carousel { 46 | display: block; 47 | position: absolute; 48 | border:1px solid black; 49 | width: 100%; 50 | height: 100%; 51 | text-align: center; 52 | transform-style: preserve-3d; 53 | opacity: 0; 54 | } 55 | :host.ready .carousel ::content >>> .item-carousel { 56 | -webkit-transition: opacity 300ms, -webkit-transform 300ms; 57 | -moz-transition: opacity 300ms, -moz-transform 300ms; 58 | -o-transition: opacity 300ms, -o-transform 300ms; 59 | transition: opacity 300ms, transform 300ms; 60 | } 61 | 62 | :host .container .carousel ::content >>> .item-carousel img{ 63 | user-drag: none; 64 | user-select: none; 65 | -moz-user-select: none; 66 | -webkit-user-drag: none; 67 | -webkit-user-select: none; 68 | -ms-user-select: none; 69 | } 70 | 71 | :host .container .carousel ::content >>> .item-carousel.next, 72 | :host .container .carousel ::content >>> .item-carousel.prev, 73 | :host .container .carousel ::content >>> .item-carousel.actual{ 74 | opacity: 0.95; 75 | } 76 | 77 | 78 | `], 79 | 80 | template: '
\n' + 81 | '
\n' + 82 | ' \n' + 83 | '
\n' + 84 | '
', 85 | }) 86 | 87 | 88 | // TODO: move chart.js to it's own component 89 | export class CarouselComponent implements OnInit,OnChanges,AfterViewInit { 90 | 91 | public carousel : Carousel; 92 | //carrousel radious 93 | private radius:any; 94 | private rotationFn : string; 95 | private itemsCarouselRendered : number = 0 ; 96 | @Input("morePairSlides") morePairSlides = 1; 97 | @Input("angle") angle = 45; 98 | @Input("ratioScale") ratioScale = 1; 99 | @Input("margin") margin = 20; 100 | @Input("perspective") perspective = 2000; 101 | @Input("endInSlide") endInSlide = true; 102 | @Input("timeToSlide") timeToSlide = 300; 103 | @Input("lockSlides") lockSlides = false; 104 | @Input("initialSlide") initialSlide = 0; 105 | @Input("loop") loop = false; 106 | @Input("mode") axis = "horizontal"; 107 | 108 | //autoPlay 109 | @Input("autoPlay") autoPlay = false; 110 | @Input("delayAutoPlay") delayAutoPlay = 3000; 111 | private autoPlayTimeout : any; 112 | 113 | @Output("onInit") onInitCarousel = new EventEmitter(); 114 | @Output("onReady") onReadyCarousel = new EventEmitter(); 115 | @Output("onChangeProperties") onChangePropertiesCarousel = new EventEmitter(); 116 | 117 | @Output("onSlideChange") onSlideChange = new EventEmitter(); 118 | @Output("onSlideCentered") onSlideCentered = new EventEmitter(); 119 | 120 | @Output("onTransitionStart") onTransitionStart = new EventEmitter(); 121 | @Output("onTransitionEnd") onTransitionEnd = new EventEmitter(); 122 | @Output("onSlideNextTransitionStart") onSlideNextTransitionStart = new EventEmitter(); 123 | @Output("onSlideNextTransitionEnd") onSlideNextTransitionEnd = new EventEmitter(); 124 | @Output("onSlidePrevTransitionStart") onSlidePrevTransitionStart = new EventEmitter(); 125 | @Output("onSlidePrevTransitionEnd") onSlidePrevTransitionEnd = new EventEmitter(); 126 | 127 | @Output("onSlideMove") onSlideMove = new EventEmitter(); 128 | @Output("onSlideMoveEnd") onSlideMoveEnd = new EventEmitter(); 129 | @Output("onSlideMoveStart") onSlideMoveStart = new EventEmitter(); 130 | 131 | @Output("onTouchMove") onTouchMove = new EventEmitter(); 132 | @Output("onTouchStart") onTouchStart = new EventEmitter(); 133 | @Output("onTouchEnd") onTouchEnd = new EventEmitter(); 134 | 135 | @Output("onReachBeginning") onReachBeginning = new EventEmitter(); 136 | @Output("onReachEnd") onReachEnd = new EventEmitter(); 137 | 138 | @ViewChild("carousel") carouselElm: ElementRef; 139 | @ViewChild("container") containerElm: ElementRef; 140 | 141 | 142 | 143 | constructor(private componentElement:ElementRef){ 144 | this.carousel = new Carousel(); 145 | } 146 | 147 | onDomChange($event : any){ 148 | if($event.addedNodes.length > 0){ 149 | if(this.itemsCarouselRendered === 0){ 150 | this.reInit(); 151 | } 152 | else{ 153 | this.update(); 154 | this.updateCssShowSlides(); 155 | } 156 | this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length; 157 | } 158 | } 159 | 160 | ngOnInit(){ 161 | this.onInitCarousel.emit(this.carousel); 162 | this.itemsCarouselRendered = this.carouselElm.nativeElement.getElementsByClassName("item-carousel").length 163 | } 164 | 165 | ngOnChanges(changes : SimpleChanges){ 166 | for(let i=0;i vm.detectCurrentSlide()); 193 | } 194 | } 195 | public slidePrev(){ 196 | if(this.checkLimitsCarrousel(this.carousel.activeIndex-1)){ 197 | this.moveSlideTo(this.carousel.activeIndex-1); 198 | let vm = this; 199 | setTimeout( () => vm.detectCurrentSlide()); 200 | } 201 | } 202 | public slideTo(index : number){ 203 | if(this.checkLimitsCarrousel(index)){ 204 | this.moveSlideTo(index); 205 | let vm = this; 206 | setTimeout( () => vm.detectCurrentSlide()); 207 | } 208 | } 209 | 210 | public autoPlayStart(){ 211 | this.autoPlay=true; 212 | this.autoPlaySlide(); 213 | } 214 | public autoPlayStop(){ 215 | clearInterval(this.autoPlayTimeout); 216 | this.carousel.autoPlayIsRunning = false; 217 | } 218 | public toggleMode(){ 219 | this.axis = this.axis == "vertical"? "horizontal":"vertical"; 220 | this.update(); 221 | 222 | } 223 | 224 | public reInit(){ 225 | this.carousel = new Carousel; 226 | this.configPlugin(); 227 | } 228 | 229 | public update(){ 230 | this.setPerspectiveContainer(); 231 | this.checkRotation(); 232 | this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName("item-carousel")); 233 | this.carousel.totalItems = this.carousel.items.length; 234 | this.getmaxSizes(); 235 | this.carousel.lockSlides = this.lockSlides; 236 | this.setDegreesOnSlides(); 237 | this.setTransformCarrousel(-this.carousel.degreesSlides[this.carousel.activeIndex]); 238 | } 239 | 240 | 241 | 242 | private configPlugin(){ 243 | // this.setPerspectiveContainer(); 244 | // this.checkRotation(); 245 | // this.carousel.items = Array.from(this.carouselElm.nativeElement.getElementsByClassName("item-carousel")); 246 | // this.carousel.totalItems = this.carousel.items.length; 247 | // this.getmaxSizes(); 248 | // this.carousel.lockSlides = this.lockSlides; 249 | // this.setDegreesOnSlides(); 250 | this.update(); 251 | this.manageEvents(); 252 | this.initSlidesOn(); 253 | this.updateCssShowSlides(); 254 | this.autoPlaySlide(); 255 | } 256 | 257 | 258 | private initEventsPan(){ 259 | let hammertime = new Hammer(this.carouselElm.nativeElement); 260 | hammertime.on('pan', this.rotate.bind(this)); 261 | hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL ,threshold:0}); 262 | } 263 | 264 | private rotate(e : any){ 265 | if(!this.carousel.lockSlides) { 266 | let velocity = this.carousel.isHorizontal ? e.velocityX : -e.velocityY; 267 | this.setNewDeg(this.carousel.currdeg + velocity*window.devicePixelRatio); 268 | this.moveCarrousel(this.carousel.currdeg); 269 | if (e.isFinal) { 270 | if (this.endInSlide) { 271 | this.moveSlideTo(this.carousel.activeIndex); 272 | } 273 | } 274 | } 275 | } 276 | 277 | private autoPlaySlide(){ 278 | if(this.autoPlay){ 279 | this.autoPlayTimeout = setTimeout(function () { 280 | this.carousel.autoPlayIsRunning = true; 281 | this.slideNext(); 282 | this.autoPlaySlide(); 283 | }.bind(this),this.delayAutoPlay); 284 | } 285 | } 286 | 287 | private initSlidesOn(){ 288 | if(this.initialSlide >= 0 && this.initialSlide= this.carousel.items.length){ 292 | this.carousel.activeIndex = this.carousel.items.length-1; 293 | this.initialSlide = this.carousel.activeIndex; 294 | } 295 | else{ 296 | this.carousel.activeIndex = 0; 297 | this.initialSlide = this.carousel.activeIndex; 298 | } 299 | 300 | let newDeg = this.carousel.activeIndex*this.angle; 301 | this.setNewDeg(-newDeg); 302 | this.setTransformCarrousel(-newDeg); 303 | } 304 | 305 | private setNewDeg(newDeg : number){ 306 | this.carousel.currdeg = newDeg; 307 | if(this.carousel.currdeg > 0){ 308 | this.carousel.currdeg = 0; 309 | } 310 | if(this.carousel.currdeg < -this.carousel.maxDegree){ 311 | this.carousel.currdeg = -this.carousel.maxDegree; 312 | } 313 | 314 | } 315 | private checkRotation(){ 316 | this.carousel.isHorizontal = this.axis !== "vertical"; 317 | this.rotationFn = this.carousel.isHorizontal?'rotateY':'rotateX'; 318 | } 319 | private checkLimitsCarrousel(index : number){ 320 | return this.carousel.activeIndex != index && index >=0 && index < this.carousel.totalItems 321 | } 322 | 323 | private moveSlideTo(index : number){ 324 | this.setNewDeg(-this.carousel.degreesSlides[index]); 325 | this.moveCarrousel(this.carousel.currdeg,this.timeToSlide); 326 | } 327 | 328 | private moveCarrousel(deg : number, timeTransform : number =0){ 329 | this.carouselElm.nativeElement.style.transition = "transform "+timeTransform+"ms"; 330 | this.carouselElm.nativeElement.style.webkitTransition = "transform "+timeTransform+"ms"; 331 | this.setTransformCarrousel(deg); 332 | this.detectCurrentSlide(); 333 | 334 | } 335 | private setTransformCarrousel(deg : number){ 336 | this.carouselElm.nativeElement.style.transform = "translateZ("+(-this.radius)+"px) "+this.rotationFn+"("+deg+"deg)"; 337 | this.carouselElm.nativeElement.style.webkitTransform = "translateZ("+(-this.radius)+"px) "+this.rotationFn+"("+deg+"deg)"; 338 | this.sendSlideIsCentered(); 339 | } 340 | 341 | private sendSlideIsCentered(){ 342 | if(this.carousel.currdeg == -this.carousel.degreesSlides[this.carousel.activeIndex]){ 343 | this.onSlideCentered.emit(this.carousel) 344 | } 345 | } 346 | 347 | private setPerspectiveContainer(){ 348 | this.containerElm.nativeElement.style.perspective = this.perspective; 349 | this.containerElm.nativeElement.style.webkitPerspective = this.perspective; 350 | this.containerElm.nativeElement.style.MozPerspective = this.perspective; 351 | } 352 | 353 | private getmaxSizes(){ 354 | this.carousel.items.map((val : any) =>{ 355 | let witdh = val.offsetWidth; 356 | let height = val.offsetHeight; 357 | this.carousel.maxWidthSize = 0; 358 | this.carousel.maxHeigthSize = 0; 359 | if( witdh > this.carousel.maxWidthSize){ 360 | this.carousel.maxWidthSize = witdh; 361 | this.carousel.totalWidth = this.carousel.items.length*this.carousel.maxWidthSize; 362 | } 363 | if( height > this.carousel.maxHeigthSize){ 364 | this.carousel.maxHeigthSize = height; 365 | this.carousel.totalWidth = this.carousel.items.length*this.carousel.maxHeigthSize; 366 | } 367 | }); 368 | this.setContainerWithMaxSize(); 369 | } 370 | private setContainerWithMaxSize(){ 371 | this.containerElm.nativeElement.style.width = this.carousel.maxWidthSize+'px'; 372 | this.containerElm.nativeElement.style.height = this.carousel.maxHeigthSize+'px'; 373 | } 374 | private setDegreesOnSlides(){ 375 | let auxDegree = 0; 376 | let panelSize = this.carousel.isHorizontal ? this.carousel.maxWidthSize:this.carousel.maxHeigthSize; 377 | this.radius = (Math.round( ( panelSize / 2 ) / 378 | Math.tan( Math.PI / (360/this.angle) ) )+this.margin); 379 | this.carousel.degreesSlides=[]; 380 | this.carousel.items.map((val : any,index : number) =>{ 381 | val.style.transform = this.rotationFn+"("+auxDegree+"deg) translateZ("+(this.radius)+"px)"; 382 | val.style.webkitTransform = this.rotationFn+"("+auxDegree+"deg) translateZ("+(this.radius)+"px)"; 383 | this.carousel.degreesSlides.push(auxDegree); 384 | this.carousel.maxDegree = auxDegree; 385 | auxDegree+=this.angle; 386 | }); 387 | 388 | } 389 | 390 | private detectCurrentSlide(){ 391 | let aux = 99e9; 392 | let index = 0; 393 | this.carousel.degreesSlides.forEach((val : any,i : number)=>{ 394 | let res = Math.abs(val-Math.abs(this.carousel.currdeg)); 395 | if(res 0){ 438 | Array.from(this.carouselElm.nativeElement.getElementsByClassName(tagClass)).map((val : any) => { 439 | val['classList'].remove(tagClass); 440 | }) 441 | } 442 | } 443 | private manageEvents(){ 444 | let options : any = { 445 | preventDefault: true 446 | }; 447 | let vm = this; 448 | let hammertime = new Hammer(this.carouselElm.nativeElement, options); 449 | 450 | hammertime.on("panstart", function(e){ 451 | vm.onSlideMoveStart.emit({ carousel:vm.carousel,event:e}); 452 | }); 453 | hammertime.on("panend", function(e){ 454 | vm.onSlideMoveEnd.emit({ carousel:vm.carousel,event:e}); 455 | }); 456 | hammertime.on("pan", function(e){ 457 | vm.onSlideMove.emit({carousel:vm.carousel,event:e}); 458 | }); 459 | 460 | 461 | this.carouselElm.nativeElement.addEventListener('touchstart', (e : any) =>{ 462 | vm.onTouchStart.emit({carousel:vm.carousel,event:e}); 463 | }); 464 | this.carouselElm.nativeElement.addEventListener('touchmove', (e : any) =>{ 465 | vm.onTouchMove.emit({carousel:vm.carousel,event:e}); 466 | }); 467 | this.carouselElm.nativeElement.addEventListener('touchend', (e : any) =>{ 468 | vm.onTouchEnd.emit({ carousel:vm.carousel,event:e}); 469 | }); 470 | 471 | this.carouselElm.nativeElement.addEventListener('transitionend', (e : any) =>{ 472 | let elm = {carousel:vm.carousel,event:e}; 473 | if(e.propertyName === "transform"){ 474 | this.onTransitionEnd.emit(elm); 475 | if(vm.carousel.lastIndex > vm.carousel.activeIndex){ 476 | this.onSlideNextTransitionEnd.emit(elm); 477 | } 478 | else{ 479 | this.onSlidePrevTransitionEnd.emit(elm); 480 | } 481 | } 482 | }); 483 | 484 | this.carouselElm.nativeElement.addEventListener('transitionstart', (e : any) =>{ 485 | let elm = {carousel:vm.carousel,event:e}; 486 | if(e.propertyName === "transform"){ 487 | this.onTransitionStart.emit(elm); 488 | if(e.direction === Hammer.DIRECTION_LEFT){ 489 | vm.onSlideNextTransitionStart.emit(elm); 490 | } 491 | else if(e.direction === Hammer.DIRECTION_RIGHT){ 492 | vm.onSlidePrevTransitionStart.emit(elm); 493 | } 494 | } 495 | }); 496 | window.addEventListener("resize", function(){ 497 | this.update(); 498 | }.bind(this)); 499 | 500 | } 501 | } 502 | -------------------------------------------------------------------------------- /src/carousel.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * :tmtfactory) © 2017 3 | * Alex Marcos 4 | * @ignore 5 | */ 6 | 7 | import {NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 8 | import { CarouselComponent } from './carousel.component'; 9 | import { DomChangeDirective } from './dom-change.directive'; 10 | import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; 11 | import * as Hammer from 'hammerjs'; 12 | 13 | export class MyHammerConfig extends HammerGestureConfig { 14 | overrides = { 15 | 'pan': { direction: Hammer.DIRECTION_ALL } // override default settings 16 | } 17 | } 18 | 19 | @NgModule({ 20 | declarations: [ 21 | DomChangeDirective, 22 | CarouselComponent, 23 | 24 | ], 25 | providers: [ 26 | { 27 | provide: HAMMER_GESTURE_CONFIG, 28 | useClass: MyHammerConfig 29 | } 30 | ], 31 | exports: [CarouselComponent], 32 | schemas: [CUSTOM_ELEMENTS_SCHEMA] 33 | }) 34 | export class CarouselModule {} 35 | -------------------------------------------------------------------------------- /src/dom-change.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[domChange]' 5 | }) 6 | export class DomChangeDirective implements OnDestroy { 7 | private changes: MutationObserver; 8 | 9 | @Output() public domChange = new EventEmitter(); 10 | 11 | constructor(private elementRef: ElementRef) { 12 | const element = this.elementRef.nativeElement; 13 | 14 | this.changes = new MutationObserver((mutations: MutationRecord[]) => { 15 | mutations.forEach((mutation: MutationRecord) => this.domChange.emit(mutation)); 16 | } 17 | ); 18 | 19 | this.changes.observe(element, { 20 | attributes: true, 21 | childList: true, 22 | characterData: true 23 | }); 24 | } 25 | 26 | ngOnDestroy(): void { 27 | this.changes.disconnect(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { CarouselModule } from './carousel.module'; 2 | export { CarouselComponent } from './carousel.component'; 3 | 4 | -------------------------------------------------------------------------------- /test/main.js: -------------------------------------------------------------------------------- 1 | require('./main.spec.ts'); -------------------------------------------------------------------------------- /test/main.spec.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | require("core-js"); // ES6 + reflect-metadata 4 | // zone.js 5 | require("zone.js/dist/zone"); 6 | require("zone.js/dist/long-stack-trace-zone"); 7 | require("zone.js/dist/async-test"); 8 | require("zone.js/dist/fake-async-test"); 9 | require("zone.js/dist/sync-test"); 10 | require("zone.js/dist/proxy"); 11 | require("zone.js/dist/jasmine-patch"); 12 | require("rxjs/Rx"); 13 | // TestBed initialization 14 | var testing_1 = require("@angular/core/testing"); 15 | var testing_2 = require("@angular/platform-browser-dynamic/testing"); 16 | testing_1.TestBed.initTestEnvironment(testing_2.BrowserDynamicTestingModule, testing_2.platformBrowserDynamicTesting()); 17 | var context = require.context('../src/', true, /\.spec\.ts$/); 18 | context.keys().map(context); 19 | -------------------------------------------------------------------------------- /test/main.spec.ts: -------------------------------------------------------------------------------- 1 | import 'core-js'; // ES6 + reflect-metadata 2 | // zone.js 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/long-stack-trace-zone'; 5 | import 'zone.js/dist/async-test'; 6 | import 'zone.js/dist/fake-async-test'; 7 | import 'zone.js/dist/sync-test'; 8 | import 'zone.js/dist/proxy'; 9 | import 'zone.js/dist/jasmine-patch'; 10 | import 'rxjs/Rx'; 11 | // TestBed initialization 12 | import { TestBed } from '@angular/core/testing'; 13 | 14 | import { 15 | BrowserDynamicTestingModule, 16 | platformBrowserDynamicTesting, 17 | } from '@angular/platform-browser-dynamic/testing'; 18 | 19 | TestBed.initTestEnvironment( 20 | BrowserDynamicTestingModule, 21 | platformBrowserDynamicTesting() 22 | ); 23 | 24 | const context = (require as any).context('../src', true, /\.spec\.ts$/); 25 | 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /test/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es2015", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": true, 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "emitDecoratorMetadata": true, 10 | "lib": [ 11 | "es2015", "dom" 12 | ], 13 | "types": [ 14 | "node", 15 | "jasmine" 16 | ] 17 | }, 18 | "exclude": [ 19 | "node_modules" 20 | ], 21 | "files": [ 22 | "index.ts" 23 | ], 24 | "awesomeTypeScriptLoaderOptions": { 25 | "useWebpackText": true 26 | } 27 | } -------------------------------------------------------------------------------- /test/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require( 'path' ); 2 | console.log(path.resolve('../src/')); 3 | module.exports = () => { 4 | return { 5 | entry: { 6 | main: './test/main.spec.ts' 7 | }, 8 | output: { 9 | path: './dist', 10 | filename: '[name].bundle.js' 11 | }, 12 | resolve: { 13 | extensions: ['.js', '.ts', '.html'] 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.ts$/, 19 | loaders: [ 20 | 'ts-loader', 21 | 'angular2-template-loader' 22 | ] 23 | }, 24 | { 25 | test: /\.ts$/, 26 | use: { 27 | loader: 'istanbul-instrumenter-loader', 28 | options: { esModules: true } 29 | }, 30 | enforce: 'post', 31 | exclude: /node_modules|\.spec\.ts$/, 32 | }, 33 | { 34 | test: /\.html$/, 35 | loader: 'raw' 36 | } 37 | ] 38 | }, 39 | devtool: 'inline-source-map' 40 | }; 41 | }; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "declaration": true, 5 | "stripInternal": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "strictNullChecks": true, 9 | "noImplicitAny": true, 10 | "module": "es2015", 11 | "moduleResolution": "node", 12 | "paths": { 13 | "@angular/core": ["node_modules/@angular/core"], 14 | "@angular/platform-browser": ["node_modules/@angular/platform-browser"], 15 | "@types/hammerjs": ["node_modules/@types/hammerjs"], 16 | "hammerjs": ["node_modules/hammerjs"] 17 | }, 18 | "rootDir": ".", 19 | "outDir": "dist", 20 | "sourceMap": true, 21 | "inlineSources": true, 22 | "target": "es5", 23 | "skipLibCheck": true, 24 | "lib": ["es2015", "dom"], 25 | "types": [ 26 | "node", 27 | "jasmine" 28 | ] 29 | }, 30 | "files": [ 31 | "index.ts" 32 | ], 33 | "exclude": [ 34 | "node_modules", 35 | "typings/main", 36 | "typings/main.d.ts" 37 | ], 38 | "angularCompilerOptions": { 39 | "strictMetadataEmit": false, 40 | "skipTemplateCodegen": true, 41 | "genDir": ".tmp" 42 | 43 | } 44 | } 45 | --------------------------------------------------------------------------------