ECM Caption component for display Item

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

ecm/Angular/ProteusECM/trunk/src/app/ecm-item-caption/ecm-item-caption.component.css

+.item-order{
+    display: none !important;
+}
+.caption-rating{
+	display: none;
+}
+
+.caption-3:hover .item-order,
+.caption-3:active .item-order,
+.caption-3:focus .item-order{
+    position: absolute;
+    margin: 0;
+    display: block !important;
+    z-index: 5;
+    bottom: 0;
+    background: mediumvioletred;
+}
+
+.caption {
+    display: inline-block;
+    position: relative;
+    margin: 10px;
+    min-height: 400px;
+}
+
+.caption img {
+    display: block;
+    max-width: 100%;
+    min-height: 344px;
+    min-height: 400px;
+}
+.caption-3 {
+    overflow: hidden;
+    background: #000;
+    background: #fff;
+}
+
+.caption-3 img {
+    -webkit-transition: opacity 0.3s ease-in-out;
+    -moz-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.caption-3:hover img,
+.caption-3:active img,
+.caption-3:focus img {
+    opacity: 0.5;
+}
+
+.caption-3::after,
+.caption-3::before {
+    position: absolute;
+    width: 100%;
+    color: #fff;
+    z-index: 1;
+    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
+    -moz-transition: -moz-transform 0.3s ease-in-out; 
+    transition: transform 0.3s ease-in-out; 
+}
+
+.caption-3::after {
+    content: attr(data-title);
+    top: 0;
+    height: 60px;
+    line-height: 60px;
+    padding-left: 10px;
+    background: #0083ab;
+    background: mediumvioletred;
+    font-size: 28px;
+    font-weight: 300;
+    -webkit-transform: translateY(-100%);
+    -moz-transform: translateY(-100%);
+    transform: translateY(-100%);
+}
+
+.caption-3::before {
+    content: '...' attr(data-description) '...';
+    top: 60px;
+    height: calc( 100% - 60px );
+    background: #f27545;
+    background: transparent;
+    font-size: 14px;
+    padding: 20px;
+    -webkit-transform: translateY(100%);
+    -moz-transform: translateY(100%);
+    transform: translateY(100%);
+}
+
+.caption-3:hover::after,
+.caption-3:hover::before,
+.caption-3:active::after,
+.caption-3:active::before,
+.caption-3:focus::after,
+.caption-3:focus::before {
+    -webkit-transform: translateY(0%);
+    -moz-transform: translateY(0%);
+    transform: translateY(0%);
+}
+
+a img {
+    border: none;
+}
+
+.column-wrap {
+    clear: both;
+}
+
+.end {
+    padding-bottom: 25px;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-item-caption/ecm-item-caption.component.html

+<div *ngIf="itemData" class="column-wrap clearfix">
+	<div class="caption caption-3" attr.data-title="{{itemData.shDescr}}" attr.data-description="{{itemData.descr}}" >
+		<img src="/ecm/assets/images/items/{{itemData.itemCode}}.png" alt="Illustration of {{itemData.shDescr}}">
+  		<div class="caption-rating">
+			<h5>
+				Current Rate: <b>{{currentRate}}</b>
+			</h5>
+			<ecm-rating [(ngModel)]="currentRate" 
+				[max]="maxRateValue"
+				[readonly]="isRatingReadonly" 
+				(onHover)="overStarDoSomething($event)"
+				(onLeave)="resetRatingStar($event)" 
+				[titles]="['one','two','three']">
+			</ecm-rating>
+			<span class="label"
+				[ngClass]="{'label-warning': ratingPercent<30, 'label-info': ratingPercent>=30 && ratingPercent<70, 'label-success': ratingPercent>=70}"
+				[ngStyle]="{display: (overStar && !isRatingReadonly) ? 'inline' : 'none'}">
+				{{ratingPercent}}%
+			</span>
+		</div>
+		<button (click)='orderItem()' class="item-order button large expanded">Order Item</button>
+	</div>
+</div>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-item-caption/ecm-item-caption.component.ts

+import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { Item } from '../ecm-category/category-model';
+
+@Component({
+  selector: 'ecm-item-caption',
+  templateUrl: './ecm-item-caption.component.html',
+  styleUrls: ['./ecm-item-caption.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class EcmItemCaptionComponent implements OnInit {
+
+    
+    //value used with custom icons demo above
+    //private rateValueExample1:number = 5;
+    //value used with custom icons demo above
+    //private rateValueExample2:number = 2;
+    //the maximum allowed value
+    private maxRateValue:number = 10;
+    //contains the current value entred by the user
+    private currentRate:number = 7; // @Input itemCurrRank
+    //make the rating component readonly
+    private isRatingReadonly:boolean = false;
+    private overStar:number;
+    private ratingPercent:number;
+
+    private ratingStatesItems:any = [
+        {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
+        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-star-empty'},
+        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
+        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
+        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}
+    ];
+    //reset the rating value to null
+    private resetRatingStar() {
+        this.overStar = null;
+    }
+    //call this method when over a star
+    private overStarDoSomething(value:number):void {
+        this.overStar = value;
+        this.ratingPercent = 100 * (value / this.maxRateValue);
+    };
+    
+    @Input() itemData: Item;
+    @Input() itemCurrRank: number;
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+  
+  orderItem()
+  {
+      alert(this.itemData.itemCode);
+  }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-item-caption/ecm-item-rating.component.ts

+import {
+    Component,
+    OnInit, Input, Output, HostListener,
+    Self, EventEmitter
+} from '@angular/core';
+import { ControlValueAccessor, NgModel } from '@angular/forms';
+
+/*
+    Usage:
+    
+    <h4 style="color: #00b0e8">Angular 2 Rating - Stars Example</h4>
+    <h5>Current Rate: <b>{{currentRate}}</b></h5>
+    <ecm-rating [(ngModel)]="currentRate" [max]="maxRateValue" [readonly]="isRatingReadonly"
+            (onHover)="overStarDoSomething($event)" (onLeave)="resetRatingStar($event)"
+            [titles]="['one','two','three']"></ecm-rating>
+    <span class="label"
+          [ngClass]="{'label-warning': ratingPercent<30, 'label-info': ratingPercent>=30 && ratingPercent<70, 'label-success': ratingPercent>=70}"
+          [ngStyle]="{display: (overStar && !isRatingReadonly) ? 'inline' : 'none'}">{{ratingPercent}}%</span>
+
+    
+    <h4 style="color: #00b0e8">Angular 2 Rating With <b>Custom icons</b></h4>
+    <h5><b>(<i>Current Rate:</i> {{rateValueExample1}})</b></h5>
+    <div>
+      <ecm-rating [(ngModel)]="rateValueExample1" max="10" stateOn="glyphicon-heart"
+              stateOff="glyphicon-ok-circle"></ecm-rating>
+    </div>
+
+    
+    <h4 style="color: #00b0e8">Angular 2 Rating With <b>Custom icons</b></h4>
+    <h5><b>(<i>Current Rate:</i> {{rateValueExample2}})</b></h5>
+    <div>
+      <ecm-rating [(ngModel)]="rateValueExample2" [ratingStates]="ratingStatesItems"></ecm-rating>
+    </div>
+ */
+
+
+@Component({
+    selector: 'ecm-rating[ngModel]',
+    template: `
+    <span (mouseleave)="reset()" (keydown)="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" [attr.aria-valuemax]="range.length" [attr.aria-valuenow]="value">
+      <template ngFor let-r [ngForOf]="range" let-index="index" >
+        <span class="sr-only">({{ index < value ? '*' : ' ' }})</span>
+        <i (mouseenter)="enter(index + 1)" (click)="rate(index + 1)" class="glyphicon" [ngClass]="index < value ? r.stateOn : r.stateOff" [title]="r.title" ></i>
+      </template>
+    </span>
+  `
+})
+export class EcmItemRatingComponent implements ControlValueAccessor, OnInit {
+    @Input() private max:number;
+    @Input() private stateOn:string;
+    @Input() private stateOff:string;
+    @Input() private readonly:boolean;
+    @Input() private titles:Array<string>;
+    @Input() private ratingStates:Array<{stateOn:string, stateOff:string}>;
+
+    @Output() private onHover:EventEmitter<number> = new EventEmitter();
+    @Output() private onLeave:EventEmitter<number> = new EventEmitter();
+
+    private range:Array<any>;
+    private value:number;
+    private preValue:number;
+
+    @HostListener('keydown', ['$event'])
+    private onKeydown(event:KeyboardEvent) {
+        if ([37, 38, 39, 40].indexOf(event.which) === -1) {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        let sign = event.which === 38 || event.which === 39 ? 1 : -1;
+        this.rate(this.value + sign);
+    }
+
+    constructor(@Self() public cd:NgModel) {
+        cd.valueAccessor = this;
+    }
+
+    ngOnInit() {
+        this.max = typeof this.max !== 'undefined' ? this.max : 5;
+        this.readonly = this.readonly === true;
+        this.stateOn = typeof this.stateOn !== 'undefined' ? this.stateOn : 'glyphicon-star';
+        this.stateOff = typeof this.stateOff !== 'undefined' ? this.stateOff : 'glyphicon-star-empty';
+        this.titles = typeof this.titles !== 'undefined' && this.titles.length > 0 ? this.titles : ['one', 'two', 'three', 'four', 'five'];
+        this.range = this.buildTemplateObjects(this.ratingStates, this.max);
+    }
+
+    writeValue(value:number) {
+        if (value % 1 !== value) {
+            this.value = Math.round(value);
+            this.preValue = value;
+            return;
+        }
+
+        this.preValue = value;
+        this.value = value;
+    }
+
+    private buildTemplateObjects(ratingStates:Array<any>, max:number) {
+        ratingStates = ratingStates || [];
+        let count = ratingStates.length || max;
+        let result:any[] = [];
+        for (let i = 0; i < count; i++) {
+            result.push(Object.assign({
+                index: i,
+                stateOn: this.stateOn,
+                stateOff: this.stateOff,
+                title: this.titles[i] || i + 1
+            }, ratingStates[i] || {}));
+        }
+        return result;
+    }
+
+    private rate(value:number) {
+        if (!this.readonly && value >= 0 && value <= this.range.length) {
+            this.writeValue(value);
+            this.cd.viewToModelUpdate(value);
+        }
+    }
+
+    private enter(value:number) {
+        if (!this.readonly) {
+            this.value = value;
+            this.onHover.emit(value);
+        }
+    }
+
+    private reset() {
+        this.value = this.preValue;
+        this.onLeave.emit(this.value);
+    }
+
+    onChange = (_:any) => {
+    };
+    onTouched = () => {
+    };
+
+    registerOnChange(fn:(_:any) => {}):void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn:() => {}):void {
+        this.onTouched = fn;
+    }
+}