From e006f6b3212b0eb0c821bfdc5be2ec944979e35e Mon Sep 17 00:00:00 2001 From: sheikalthaf Date: Tue, 28 Nov 2017 15:53:51 +0530 Subject: [PATCH] updated to fix universal support --- package.json | 2 +- src/ngu-carousel.module.ts | 9 +-- src/ngu-carousel/ngu-carousel.component.ts | 74 ++++++++++++++++++++-- src/ngu-carousel/ngu-carousel.interface.ts | 1 + src/ngu-item/ngu-item.component.ts | 10 ++- src/ngu-tile/ngu-tile.component.ts | 20 +++++- 6 files changed, 96 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 00b9f8aa..229200a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngu-carousel", - "version": "0.1.0", + "version": "1.3.4", "description": "Angular Universal carousel", "scripts": { "transpile": "ngc ", diff --git a/src/ngu-carousel.module.ts b/src/ngu-carousel.module.ts index ac7d263e..3e9b41ef 100644 --- a/src/ngu-carousel.module.ts +++ b/src/ngu-carousel.module.ts @@ -9,13 +9,6 @@ import { CommonModule } from '@angular/common'; import { NguCarouselComponent } from './ngu-carousel/ngu-carousel.component'; import { NguTileComponent } from './ngu-tile/ngu-tile.component'; -export class MyHammerConfig extends HammerGestureConfig { - overrides = { - swipe: { velocity: 0.4, threshold: 20 }, // override default settings - pan: { velocity: 0.4, threshold: 20 } - }; -} - @NgModule({ imports: [CommonModule], exports: [ @@ -36,6 +29,6 @@ export class MyHammerConfig extends HammerGestureConfig { NguCarouselNextDirective, NguCarouselPrevDirective ], - providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }] + providers: [] }) export class NguCarouselModule {} diff --git a/src/ngu-carousel/ngu-carousel.component.ts b/src/ngu-carousel/ngu-carousel.component.ts index 6a0c6108..a1ead30c 100644 --- a/src/ngu-carousel/ngu-carousel.component.ts +++ b/src/ngu-carousel/ngu-carousel.component.ts @@ -33,8 +33,64 @@ import { Subscription } from 'rxjs/Subscription'; @Component({ // tslint:disable-next-line:component-selector selector: 'ngu-carousel', - templateUrl: './ngu-carousel.component.html', - styleUrls: ['./ngu-carousel.component.scss'] + template: `
`, + styles: [` + :host { + display: block; + position: relative; + } + + .ngucarousel .ngucarousel-inner { + position: relative; + overflow: hidden; + } + .ngucarousel .ngucarousel-inner .ngucarousel-items { + white-space: nowrap; + position: relative; + } + + .banner .ngucarouselPointDefault .ngucarouselPoint { + position: absolute; + width: 100%; + bottom: 20px; + } + .banner .ngucarouselPointDefault .ngucarouselPoint li { + background: rgba(255, 255, 255, 0.55); + } + .banner .ngucarouselPointDefault .ngucarouselPoint li.active { + background: white; + } + .banner .ngucarouselPointDefault .ngucarouselPoint li:hover { + cursor: pointer; + } + + .ngucarouselPointDefault .ngucarouselPoint { + list-style-type: none; + text-align: center; + padding: 12px; + margin: 0; + white-space: nowrap; + overflow: auto; + box-sizing: border-box; + } + .ngucarouselPointDefault .ngucarouselPoint li { + display: inline-block; + border-radius: 50%; + background: rgba(0, 0, 0, 0.55); + padding: 4px; + margin: 0 4px; + transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67); + transition: 0.4s; + } + .ngucarouselPointDefault .ngucarouselPoint li.active { + background: #6b6b6b; + transform: scale(1.8); + } + .ngucarouselPointDefault .ngucarouselPoint li:hover { + cursor: pointer; + } + + `] }) export class NguCarouselComponent implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, OnChanges { @@ -62,7 +118,7 @@ export class NguCarouselComponent @ViewChild('ngucarousel', { read: ElementRef }) private carouselMain1: ElementRef; - @ViewChild('ngxitems', { read: ElementRef }) + @ViewChild('nguitems', { read: ElementRef }) private carouselInner1: ElementRef; @ViewChild('main', { read: ElementRef }) private carousel1: ElementRef; @@ -122,7 +178,7 @@ export class NguCarouselComponent ngOnChanges(changes: SimpleChanges) { // tslint:disable-next-line:no-unused-expression - this.moveToSlide && + this.moveToSlide > -1 && !changes.moveToSlide.firstChange && this.moveTo(changes.moveToSlide.currentValue); } @@ -173,7 +229,7 @@ export class NguCarouselComponent this.buttonControl(); }); // tslint:disable-next-line:no-unused-expression - this.moveToSlide && this.moveTo(this.moveToSlide); + this.moveToSlide > -1 && this.moveTo(this.moveToSlide); } ngAfterViewInit() { @@ -339,9 +395,13 @@ export class NguCarouselComponent const Nos = this.items.length - (this.data.items - this.data.slideItems); this.pointIndex = Math.ceil(Nos / this.data.slideItems); const pointers = []; - for (let i = 0; i < this.pointIndex; i++) { - pointers.push(i); + + if (this.pointIndex > 1 || !this.userData.point.hideOnSingleSlide) { + for (let i = 0; i < this.pointIndex; i++) { + pointers.push(i); + } } + this.pointNumbers = pointers; this.carouselPointActiver(); if (this.pointIndex <= 1) { diff --git a/src/ngu-carousel/ngu-carousel.interface.ts b/src/ngu-carousel/ngu-carousel.interface.ts index eb95723e..62a5e14a 100644 --- a/src/ngu-carousel/ngu-carousel.interface.ts +++ b/src/ngu-carousel/ngu-carousel.interface.ts @@ -66,6 +66,7 @@ export type Animate = 'lazy'; export interface Point { visible: boolean; pointStyles?: string; + hideOnSingleSlide?: boolean; } export interface Animation { diff --git a/src/ngu-item/ngu-item.component.ts b/src/ngu-item/ngu-item.component.ts index 43e96bb0..f6e925ce 100644 --- a/src/ngu-item/ngu-item.component.ts +++ b/src/ngu-item/ngu-item.component.ts @@ -2,8 +2,14 @@ import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'ngu-item', - templateUrl: './ngu-item.component.html', - styleUrls: ['./ngu-item.component.scss'] + template: ``, + styles: [` + :host { + display: inline-block; + white-space: initial; + vertical-align: top; + } + `] }) export class NguItemComponent { @HostBinding('class') classes = 'item'; diff --git a/src/ngu-tile/ngu-tile.component.ts b/src/ngu-tile/ngu-tile.component.ts index a9c5c6d9..1f983277 100644 --- a/src/ngu-tile/ngu-tile.component.ts +++ b/src/ngu-tile/ngu-tile.component.ts @@ -2,8 +2,24 @@ import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'ngu-tile', - templateUrl: './ngu-tile.component.html', - styleUrls: ['./ngu-tile.component.scss'] + template: `
`, + styles: [` + :host { + display: inline-block; + white-space: initial; + padding: 10px; + box-sizing: border-box; + vertical-align: top; + } + + .tile { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + } + + * { + box-sizing: border-box; + } + `] }) export class NguTileComponent { @HostBinding('class') classes = 'item';