updated to fix universal support

uiuniversal · Nov 28, 2017 · e006f6b · e006f6b
1 parent 31ace6a
commit e006f6b
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 20 deletions.
diff --git 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
@@ -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 = <any>{
-    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
@@ -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: `<div #ngucarousel class="ngucarousel"><div #forTouch class="ngucarousel-inner"><div #nguitems class="ngucarousel-items"><ng-content select="[NguCarouselItem]"></ng-content></div><div style="clear: both"></div></div><ng-content select="[NguCarouselPrev]"></ng-content><ng-content select="[NguCarouselNext]"></ng-content></div><div #points *ngIf="userData.point.visible"><ul class="ngucarouselPoint"><li #pointInner *ngFor="let i of pointNumbers; let i = index" [class.active]="i==pointers" (click)="moveTo(i)"></li></ul></div>`,
+  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
@@ -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
@@ -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: `<ng-content></ng-content>`,
+  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
@@ -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: `<div class="tile"><ng-content></ng-content></div>`,
+  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';