Update ngu-carousel package and configuration (#275)

* updated plugins and config for ngucarousel * fixed image hieght in banner
aviabird · Oct 9, 2018 · 17bfd7c · 17bfd7c
1 parent 0b44949
commit 17bfd7c
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -31,27 +31,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.1",
-    "@angular/common": "^6.1.1",
-    "@angular/compiler": "^6.1.1",
-    "@angular/core": "^6.1.1",
-    "@angular/forms": "^6.1.1",
-    "@angular/http": "^6.1.1",
-    "@angular/platform-browser": "^6.1.1",
-    "@angular/platform-browser-dynamic": "^6.1.1",
-    "@angular/platform-server": "^6.1.1",
+    "@angular/animations": "^6.1.9",
+    "@angular/common": "^6.1.9",
+    "@angular/compiler": "^6.1.9",
+    "@angular/core": "^6.1.9",
+    "@angular/forms": "^6.1.9",
+    "@angular/http": "^6.1.9",
+    "@angular/platform-browser": "^6.1.9",
+    "@angular/platform-browser-dynamic": "^6.1.9",
+    "@angular/platform-server": "^6.1.9",
     "@angular/pwa": "^0.7.4",
-    "@angular/router": "^6.1.1",
-    "@angular/service-worker": "^6.1.1",
+    "@angular/router": "^6.1.9",
+    "@angular/service-worker": "^6.1.9",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^6.1.0",
     "@ngrx/entity": "^6.1.0",
     "@ngrx/router-store": "^6.1.0",
     "@ngrx/store": "^6.1.0",
-    "@ngu/carousel": "^1.4.8",
-    "@nguniversal/common": "^6.0.0",
-    "@nguniversal/express-engine": "^6.0.0",
-    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
+    "@ngu/carousel": "^1.5.3",
+    "@nguniversal/common": "^6.1.0",
+    "@nguniversal/express-engine": "^6.1.0",
+    "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
     "@ngx-lite/input-star-rating": "^0.1.5",
     "@ngx-lite/json-ld": "^0.4.2",
     "@ngx-progressbar/core": "^5.0.1",

diff --git a/src/app/landing/components/lp-banner/lp-banner.component.html b/src/app/landing/components/lp-banner/lp-banner.component.html
@@ -1,5 +1,5 @@
-<ngu-carousel #landingBanners [inputs]="carouselOne" (onMove)="onMoveBanner($event)">
-  <ngu-item NguCarouselItem *ngFor="let banner of bannerItems" class="bannerStyle">
+<ngu-carousel #landingBanners [inputs]="carouselBanner" (onMove)="onMoveBanner($event)" [dataSource]="bannerItems">
+  <ngu-item NguCarouselItem *nguCarouselDef="let banner; let i = index" class="bannerStyle">
     <a href="{{banner.link_url}}">
       <img src={{banner.image_link}} alt="" style="display: block; width: 100%;">
     </a>

diff --git a/src/app/landing/components/lp-banner/lp-banner.component.scss b/src/app/landing/components/lp-banner/lp-banner.component.scss
@@ -2,7 +2,7 @@
 :host {
   /deep/ .banner {
     .bannerStyle {
-      min-height: 20vh;
+      max-height: 350px;
       img {
         background-color: $theme-main-color - 50;
       }

diff --git a/src/app/landing/components/lp-banner/lp-banner.component.ts b/src/app/landing/components/lp-banner/lp-banner.component.ts
@@ -1,6 +1,6 @@
 import { environment } from './../../../../environments/environment';
 import { Component, OnInit, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
+import { NguCarouselStore, NguCarouselConfig } from '@ngu/carousel';
 
 @Component({
   selector: 'app-lp-banner',
@@ -10,20 +10,18 @@ import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
 })
 export class LpBannerComponent implements OnInit {
   public bannerItems = environment.config.landing_page_banner;
-  public carouselOne: NguCarousel;
+  public carouselBanner: NguCarouselConfig;
   @ViewChild('landingBanners') landingBanners: NguCarouselStore;
 
   constructor() {}
 
   ngOnInit() {
-    this.carouselOne = {
+    this.carouselBanner = {
       grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
       slide: 1,
       speed: 400,
-      interval: 4000,
       point: {
         visible: true,
-        pointStyles: '.ngucarouselPoint {}' // To apply our modification
       },
       load: 2,
       touch: true,

diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.html b/src/app/product/components/product-detail-page/product-images/product-images.component.html
@@ -19,8 +19,8 @@
 </div>
 <div *ngIf="isMobile">
   <div *ngIf="images">
-    <ngu-carousel [inputs]="carouselOne">
-      <ngu-item NguCarouselItem *ngFor="let image of images" class="bannerStyle">
+    <ngu-carousel [inputs]="carouselOne" [dataSource]="images">
+      <ngu-item NguCarouselItem *nguCarouselDef="let image" class="bannerStyle">
         <a>
           <img [src]="getProductImageUrl(image.product_url)" alt="" style="display: block; width: 100%;">
         </a>

diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.scss b/src/app/product/components/product-detail-page/product-images/product-images.component.scss
@@ -52,3 +52,32 @@ img {
   width: 200px;
   height: 020px;
 }
+
+.ngucarouselPoint {
+  list-style-type: none;
+  padding: 10px;
+  white-space: nowrap;
+  overflow: auto;
+  position: relative;
+  left: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  margin: 0 auto -28px;
+  align-self: center;
+  width: fit-content;
+  border-radius: 5px 5px 0 0;
+}
+.ngucarouselPoint li {
+  display: inline-block;
+  border-radius: 999px;
+  background-color: rgba(0, 0, 255, 0.55);
+  padding: 5px;
+  margin: 0 3px;
+  transition: .4s ease all;
+}
+.ngucarouselPoint li a img{height:190px;margin:auto}
+.ngucarouselPoint li.active {
+    background-color: transparent;
+    border: 1px solid rgba(0, 0, 255, 0.55);
+    width: 10px;
+}
diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.ts b/src/app/product/components/product-detail-page/product-images/product-images.component.ts
@@ -1,8 +1,6 @@
 import { Image } from './../../../../core/models/image';
-import { environment } from './../../../../../environments/environment';
-import { Product } from './../../../../core/models/product';
 import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
-import { NguCarousel } from '@ngu/carousel';
+import { NguCarouselConfig } from '@ngu/carousel';
 
 const img1 = require('../../../../../assets/thumbnail.jpg');
 const img2 = require('../../../../../assets/thumbnail2.jpg');
@@ -30,47 +28,16 @@ export class ProductImagesComponent implements OnInit {
     }
   };
   @Input() isMobile;
-  public carouselOne: NguCarousel;
+  public carouselOne: NguCarouselConfig;
   constructor() { }
 
   ngOnInit() {
     this.carouselOne = {
       grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
       slide: 1,
       speed: 400,
-      interval: 4000,
       point: {
         visible: true,
-        pointStyles: `
-          .ngucarouselPoint {
-            list-style-type: none;
-            padding: 10px;
-            white-space: nowrap;
-            overflow: auto;
-            position: relative;
-            left: 0;
-            box-sizing: border-box;
-            background-color: transparent;
-            margin: 0 auto -28px;
-            align-self: center;
-            width: fit-content;
-            border-radius: 5px 5px 0 0;
-          }
-          .ngucarouselPoint li {
-            display: inline-block;
-            border-radius: 999px;
-            background-color: rgba(0, 0, 255, 0.55);
-            padding: 5px;
-            margin: 0 3px;
-            transition: .4s ease all;
-          }
-          .ngucarouselPoint li a img{height:190px;margin:auto}
-          .ngucarouselPoint li.active {
-              background-color: transparent;
-              border: 1px solid rgba(0, 0, 255, 0.55);
-              width: 10px;
-          }
-        `
       },
       load: 2,
       touch: true,

diff --git a/src/app/shared/components/product-slider/product-slider.component.html b/src/app/shared/components/product-slider/product-slider.component.html
@@ -1,11 +1,11 @@
 <section class="mt-3" *ngIf="productsList?.length">
-  <ngu-carousel [inputs]="carouselOne">
-    <ngu-item class="col-6 col-sm-4 col-md-3 col-lg-2 product-box m-1 card p-1" *ngFor="let product of productsList" NguCarouselItem>
+  <ngu-carousel [inputs]="carouselOne" [dataSource]="productsList">
+    <ngu-item *nguCarouselDef="let product; let i = index" NguCarouselItem class="col-6 col-sm-4 col-md-3 col-lg-2 product-box m-1 card p-1">
       <app-inner-product [product]="product" [showRating]="showRating">
       </app-inner-product>
     </ngu-item>
     <button NguCarouselPrev class='leftRs d-none d-sm-block'></button>
     <button NguCarouselNext class='rightRs d-none d-sm-block'></button>
   </ngu-carousel>
   <hr>
-</section>
+</section>
diff --git a/src/app/shared/components/product-slider/product-slider.component.scss b/src/app/shared/components/product-slider/product-slider.component.scss
@@ -51,6 +51,9 @@
 
 :host {
   /deep/ .banner {
+    .ngucarousel {
+      position: initial;
+    }
     .leftRs,
     .rightRs {
       position: absolute;

diff --git a/src/app/shared/components/product-slider/product-slider.component.ts b/src/app/shared/components/product-slider/product-slider.component.ts
@@ -1,4 +1,4 @@
-import { NguCarousel } from '@ngu/carousel';
+import { NguCarouselConfig } from '@ngu/carousel';
 import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
@@ -9,7 +9,7 @@ import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core
 })
 export class ProductSliderComponent implements OnInit {
   @Input() productsList = new Array(10);
-  public carouselOne: NguCarousel;
+  public carouselOne: NguCarouselConfig;
   @Input() showRating: boolean;
   constructor() {
     this.carouselOne = {

diff --git a/yarn.lock b/yarn.lock
@@ -97,9 +97,9 @@
     "@angular-devkit/core" "0.7.4"
     rxjs "^6.0.0"
 
-"@angular/animations@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.1.1.tgz#aea467f84e4344601bcb3c00929be4efe86d3606"
+"@angular/animations@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.1.9.tgz#1d87469e6f6b89a8713570dfbe97700ea85bd007"
   dependencies:
     tslib "^1.9.0"
 
@@ -118,9 +118,9 @@
     symbol-observable "^1.2.0"
     yargs-parser "^10.0.0"
 
-"@angular/common@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.1.1.tgz#78b2bb69604220720ee2f96d32469fae43dc6325"
+"@angular/common@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.1.9.tgz#638fa8e8e30626116ea9ea36e6f2f00fed971f77"
   dependencies:
     tslib "^1.9.0"
 
@@ -133,49 +133,49 @@
     reflect-metadata "^0.1.2"
     tsickle "^0.32.1"
 
-"@angular/compiler@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.1.1.tgz#ad0d638559448499834ad3cf45bc2aa03a6b4f14"
+"@angular/compiler@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.1.9.tgz#3696659f752b5e239f5186cea72cf17965b59cb8"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/core@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.1.1.tgz#dfdc6dd4bb01cb12d0a1faac4cb3ac7caa3b35ba"
+"@angular/core@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.1.9.tgz#a21a35de551c95f276ecbb1f314949cc69326950"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/forms@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.1.1.tgz#41aec34576d4e3fed5791b65dc6d638d180cd11e"
+"@angular/forms@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.1.9.tgz#d9d8591f4c74270e53e3184eb45e19ba490fdf32"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/http@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-6.1.1.tgz#9ae2c36c15c793ab82830ecb8e1e69c10ae8dade"
+"@angular/http@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-6.1.9.tgz#241f35207d62f86bc155feb124a1e73515d66fb6"
   dependencies:
     tslib "^1.9.0"
 
 "@angular/language-service@^6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-6.1.1.tgz#131a320be957a02dcf710d9242bd8e43b7c24c3c"
 
-"@angular/platform-browser-dynamic@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.1.tgz#2505f463d29827256944c1d134cd8519e7f954cd"
+"@angular/platform-browser-dynamic@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.9.tgz#e00f1a4948b4c299b17c9561d83f7ea588117818"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/platform-browser@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.1.1.tgz#2ee638b6ff25a01943aa26906d83fe7b150d7101"
+"@angular/platform-browser@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.1.9.tgz#6c832e528c660ad880a16531754e65b9b97d4f9f"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/platform-server@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-6.1.1.tgz#fb5d0aac97bd36d281871594c83333b40e674ee2"
+"@angular/platform-server@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-6.1.9.tgz#431f40278b52779825d5e087283b5d823d72c29d"
   dependencies:
     domino "^2.0.1"
     tslib "^1.9.0"
@@ -190,15 +190,15 @@
     "@schematics/angular" "0.7.4"
     typescript "~2.6.2"
 
-"@angular/router@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-6.1.1.tgz#b597da6009213b656347ec13b89de3643e5767c0"
+"@angular/router@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-6.1.9.tgz#29869e53442703c53a943ce375cbb0a0f36927fb"
   dependencies:
     tslib "^1.9.0"
 
-"@angular/service-worker@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-6.1.1.tgz#9d7bfea9c1b363dc81bc9109fee95147f0a55100"
+"@angular/service-worker@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-6.1.9.tgz#c45f929ddc369c3ba75985656c8774e94c9fd322"
   dependencies:
     tslib "^1.9.0"
 
@@ -294,21 +294,23 @@
     tree-kill "^1.0.0"
     webpack-sources "^1.1.0"
 
-"@ngu/carousel@^1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@ngu/carousel/-/carousel-1.4.8.tgz#102a2472e319fa2c048d59b5c1c347f2ef60f922"
+"@ngu/carousel@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@ngu/carousel/-/carousel-1.5.3.tgz#99b91df82b74bec9c6bfc7c55f963dbbf96c986a"
+  dependencies:
+    tslib "^1.9.0"
 
-"@nguniversal/common@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@nguniversal/common/-/common-6.0.0.tgz#50e4b80d08618064e3404306b24b97877db9007d"
+"@nguniversal/common@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/common/-/common-6.1.0.tgz#10e6bf8784f88d0fc43cdfe44e61a8de4d92a33c"
 
-"@nguniversal/express-engine@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@nguniversal/express-engine/-/express-engine-6.0.0.tgz#f8bc7b5e940afb1ffdbdcb1bb22665d440ea0b0b"
+"@nguniversal/express-engine@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/express-engine/-/express-engine-6.1.0.tgz#384d761556a0accc0738ae89b8a63afb43e76a86"
 
-"@nguniversal/module-map-ngfactory-loader@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@nguniversal/module-map-ngfactory-loader/-/module-map-ngfactory-loader-6.0.0.tgz#0dd26c3f1c26d17bb21b8dfc0da53d82b7f11028"
+"@nguniversal/module-map-ngfactory-loader@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/module-map-ngfactory-loader/-/module-map-ngfactory-loader-6.1.0.tgz#49eb65ed4dc3a3273c920b905e0925e0ed2fbcb8"
 
 "@ngx-lite/input-star-rating@^0.1.5":
   version "0.1.5"