feat(hover): implemented examples for hover feature

BioPhoton · Apr 29, 2017 · df5a9a4 · df5a9a4
1 parent 7392579
commit df5a9a4
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/README.MD b/README.MD
@@ -331,7 +331,7 @@ Default: false
 <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/properties/prop-disabled-true.PNG" width="290">
 
 
-#### Cotrol modifier
+#### Control modifier
 
 **rating**: number (Optional)  
 The actual star rating value  
@@ -405,7 +405,7 @@ Params: rating
 Return: boolean 
 
 ```html
-<star-rating-comp [getHalfStarClass]="ctrl.getHalfStarClass(rating)" rating="3.2"></star-rating-comp>
+<star-rating-comp [getHalfStarClass]="ctrl.getHalfStarClass(rating)" [rating]="3.2"></star-rating-comp>
 ```
 <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/properties/prop-get_half_star_visible-default.PNG" width="290">
 <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/properties/prop-get_half_star_visible-custom.PNG" width="290">

diff --git a/examples/angular2/src/app/app.component.html b/examples/angular2/src/app/app.component.html
@@ -23,6 +23,7 @@ <h1>
   [readOnly]="starRatingConfig.readOnly"
   [getColor]="starRatingConfig.getColor"
   [getHalfStarVisible]="starRatingConfig.getHalfStarVisible"
+  (onHoverRatingChange)="starRatingConfig.onHoverRatingChange($event)"
   (onClick)="starRatingConfig.onClick($event)"
   (onRatingChange)="starRatingConfig.onRatingChange($event)"
 ></star-rating-comp>

diff --git a/examples/angular2/src/app/app.component.ts b/examples/angular2/src/app/app.component.ts
@@ -46,6 +46,12 @@ export class AppComponent {
     this.starRatingConfig.onRatingChange = ($event) => {
       console.log('onRatingUpdated $event: ', $event);
     };
+
+    this.starRatingConfig.onHoverRatingChange = ($event) => {
+      console.log('onHoverRatingChange $event: ', $event);
+    };
+
+
   }
 
 

diff --git a/examples/angular2/src/app/components/my-events/my-events.component.ts b/examples/angular2/src/app/components/my-events/my-events.component.ts
@@ -1,21 +1,26 @@
 import {Component} from "@angular/core";
 import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven} from "angular-star-rating/dist/src/star-rating-struct";
+import {IStarRatingOnHoverEvent} from "../../../../../../src/star-rating-struct";
 
 @Component({
     selector: 'my-events-component',
     template: `    
         
             <star-rating-comp   [starType]="'svg'" 
+                                [hoverEnabled]="true"
                                 (onClick)="onClick($event)" 
-                                (onRatingChange)="onRatingChange($event)">                             
+                                (onRatingChange)="onRatingChange($event)"
+                                (onHoverRatingChange)="onHoverRatingChange($event)">                             
             </star-rating-comp>
+            <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
             <p>onClickResult: {{onClickResult | json}}</p>
             <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p>
     `
 })
 export class MyEventsComponent {
 
     onClickResult:IStarRatingOnClickEvent;
+    onHoverRatingChangeResult:IStarRatingOnHoverEvent;
     onRatingChangeResult:IStarRatingOnRatingChangeEven;
 
     onClick = ($event:IStarRatingOnClickEvent) => {
@@ -28,4 +33,9 @@ export class MyEventsComponent {
         this.onRatingChangeResult = $event;
     };
 
+    onHoverRatingChange = ($event:IStarRatingOnHoverEvent) => {
+        console.log('onHoverRatingChange $event: ', $event);
+        this.onHoverRatingChangeResult = $event;
+    };
+
 }
diff --git a/src/star-rating.component.ts b/src/star-rating.component.ts
@@ -37,8 +37,9 @@ const STAR_RATING_CONTROL_ACCESSOR = {
         , 'id'
     ],
     outputs: [
-        'onClick'
+          'onClick'
         , 'onRatingChange'
+        , 'onHoverRatingChange'
     ],
     //templateUrl: 'star-rating.component.html',
     template: `
@@ -95,11 +96,11 @@ export class StarRatingComponent extends StarRatingController implements OnChang
         }
     }
 
-    onHover: EventEmitter<IStarRatingOnHoverEvent> = new EventEmitter<IStarRatingOnHoverEvent>();
+    onHoverRatingChange: EventEmitter<IStarRatingOnHoverEvent> = new EventEmitter<IStarRatingOnHoverEvent>();
 
     saveOnHover($event:IStarRatingOnHoverEvent) {
-        if(this.onHover) {
-            this.onHover.emit($event);
+        if(this.onHoverRatingChange) {
+            this.onHoverRatingChange.emit($event);
         }
     }
 
@@ -185,11 +186,11 @@ export class StarRatingComponent extends StarRatingController implements OnChang
         }
 
         this.hoverRating = rating?parseInt(rating.toString()):0;
-        //fire onHover event
-        if(typeof this.onHover === 'function') {
-            let $event:IStarRatingOnHoverEvent = { hoverRating: this.hoverRating};
-            this.saveOnHover($event);
-        }
+
+        //fire onHoverRatingChange event
+        let $event:IStarRatingOnHoverEvent = { hoverRating: this.hoverRating};
+        this.saveOnHover($event);
+
 
     }