Updated for Carousal Component

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174369 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/ecm-carousel.component.css

+
+
+.view-all-card {
+	border-radius: 5px;
+    box-shadow: 0 0 5px 0px #ccc;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    height: 400px;
+    width: auto;
+    padding-top: 50%;
+    padding-left: 30%;
+}
+
+.view-all-link {
+    color: mediumvioletred;
+    font-size: 32px;
+}
+
+.carousel {
+  width: 95%;
+  left: 2.5%;
+}
+
+.carousel-cell {
+  height: 450px;
+  margin-right: 10px;
+  border-radius: 5px;
+}
+
+/* full height */
+.flickity-prev-next-button {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	opacity: 0.5;
+	
+	transform: none;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    cursor: pointer;
+    height: 100%;
+}
+
+.flickity-prev-next-button:hover,
+.flickity-prev-next-button:focus {
+	opacity: 1;
+	background: transparent;
+}
+
+/* arrow visibility */
+.flickity-prev-next-button .arrow {
+  display: none;
+}
+
+/* prev-next button position outside and background image */
+
+.flickity-prev-next-button.previous {
+    left: -45px;
+    width: 40px;
+    background-image: url(../../assets/images/v_left_arrow_38_38.png);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+.flickity-prev-next-button.next {
+    right: -45px;
+    width: 40px;    
+    background-image: url(../../assets/images/v_right_arrow_38_38.png);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+.flickity-page-dots .dot {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin: 0 10px;
+    border-radius: 100%;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0);
+    border: 1px solid mediumvioletred;
+}
+
+.flickity-page-dots .dot.is-selected {
+    background-color: mediumvioletred;
+}
+
+@media only screen and (max-width: 1024px) {
+	.flickity-prev-next-button.previous {
+	    left: 0px;
+	    width: 40px;
+	}
+	
+	.flickity-prev-next-button.next {
+	    right: 0px;
+	    width: 40px;
+	}
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/ecm-carousel.component.html

+<div class="carousel" [attr.data-flickity]="cardsPerSlide" >
+	<div class="carousel-cell small-12 medium-6 large-4 column end " *ngFor="let cardItem of cardItems">
+		<ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem"></ecm-card>
+		<div *ngIf='cardItem.viewAll' class="view-all-card" >
+			<a md-button class="view-all-link" (click)="viewAll();">{{cardItem.viewAll}}</a>
+		</div>
+	</div>
+</div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/ecm-carousel.component.ts

+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/filter';
+
+declare var reinitFlickity: any;
+
+@Component( {
+    selector: 'ecm-carousel',
+    templateUrl: './ecm-carousel.component.html',
+    styleUrls: ['./ecm-carousel.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class EcmCarouselComponent implements OnInit {
+
+    @Input() cardItems: any;
+    cardsPerSlide: string = '{ "groupCells": 3 }';
+    
+    constructor() {}
+
+    ngOnInit() {
+        /*
+        console.log( " ngOnInit this.cardItems [" + this.cardItems + "]");
+        if( this.cardItems && this.cardItems.length > 10 ) {
+            let size = this.cardItems.length;
+            
+            this.cardItems = this.cardItems.slice(0, 9);
+            console.log( "size[" + size + "]this.cardItems [" + this.cardItems + "]");
+            
+            let viewAll = {"viewAll" : "View All +"};
+            this.cardItems.push( viewAll );
+            console.log( "viewAll [" + viewAll + "]");
+            console.log( "this.cardItems [" + this.cardItems + "]");
+        }
+        */
+        const $resizeEvent = Observable.fromEvent(window, 'resize')
+        .map(() => {
+          return document.documentElement.clientWidth;
+          })
+        .debounceTime(200)
+
+
+        $resizeEvent.subscribe(data => {
+            
+            console.log("data["+data+"]");
+            if( data > 1024 )
+            {
+                this.update(3);
+            }
+            else if( data < 1023 && data > 639 )
+            {
+                this.update(2);
+            }
+            else if( data < 640 )
+            {
+                this.update(1);
+            }
+            
+        });
+        
+        this.firstCall();
+    }
+    
+    firstCall() {
+        let data = document.documentElement.clientWidth;
+        if( data > 1024 )
+        {
+            this.update(3);
+        }
+        else if( data < 1023 && data > 639 )
+        {
+            this.update(2);
+        }
+        else if( data < 640 )
+        {
+            this.update(1);
+        }
+    }
+    
+    update( numOfCard : number ) {
+        this.cardsPerSlide = '{ "groupCells": ' + numOfCard + ' }';
+        reinitFlickity();
+    }
+    
+    viewAll() {
+        alert("View All Treding Items");
+    }
+}