fix(hover color with custom getColor): display color of custom getCol…

…or function when hovering Closes #77
BioPhoton · Apr 20, 2018 · f00737e · f00737e
1 parent b03857b
commit f00737e
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 27 deletions.
diff --git a/@packaged/angular-star-rating/bundles/angular-star-rating.umd.js b/@packaged/angular-star-rating/bundles/angular-star-rating.umd.js
diff --git a/@packaged/angular-star-rating/bundles/angular-star-rating.umd.js.map b/@packaged/angular-star-rating/bundles/angular-star-rating.umd.js.map
diff --git a/@packaged/angular-star-rating/bundles/angular-star-rating.umd.min.js b/@packaged/angular-star-rating/bundles/angular-star-rating.umd.min.js
diff --git a/@packaged/angular-star-rating/bundles/angular-star-rating.umd.min.js.map b/@packaged/angular-star-rating/bundles/angular-star-rating.umd.min.js.map
diff --git a/@packaged/angular-star-rating/esm2015/angular-star-rating.js b/@packaged/angular-star-rating/esm2015/angular-star-rating.js
diff --git a/@packaged/angular-star-rating/esm2015/angular-star-rating.js.map b/@packaged/angular-star-rating/esm2015/angular-star-rating.js.map
diff --git a/@packaged/angular-star-rating/esm5/angular-star-rating.js b/@packaged/angular-star-rating/esm5/angular-star-rating.js
diff --git a/@packaged/angular-star-rating/esm5/angular-star-rating.js.map b/@packaged/angular-star-rating/esm5/angular-star-rating.js.map
diff --git a/@packaged/angular-star-rating/src/services/star-rating.d.ts b/@packaged/angular-star-rating/src/services/star-rating.d.ts
@@ -121,7 +121,7 @@ export declare class StarRating {
     constructor(config: StarRatingConfigService);
     svgVisible(): boolean;
     interactionPossible(): boolean;
-    setColor(): void;
+    setColor(useHoverValue?: boolean): void;
     setHalfStarVisible(): void;
     getComponentClassNames(): string;
     increment(): void;

diff --git a/apps/angular5-example/src/app/components/property-bindings/property-bindings.component.html b/apps/angular5-example/src/app/components/property-bindings/property-bindings.component.html
@@ -205,6 +205,7 @@ <h1>Property Bindings</h1>
           <div class="col">
             <label>&nbsp;</label>
             <star-rating
+              [hoverEnabled]="true"
               [getColor]="bindingsForm.get('useCustomGetColor').value ? _getColor : false">
             </star-rating>
           </div>

diff --git a/libs/angular-star-rating/src/components/star-rating/star-rating.component.ts b/libs/angular-star-rating/src/components/star-rating/star-rating.component.ts
@@ -120,6 +120,8 @@ export class StarRatingComponent extends StarRating {
     }
 
     this.hoverRating = rating ? parseInt(rating.toString(), 10) : 0;
+    //update calculated Color
+    this.setColor(true);
 
     //fire onHoverRatingChange event
     const $event: HoverRatingChangeEvent = { hoverRating: this.hoverRating };

diff --git a/libs/angular-star-rating/src/services/star-rating.ts b/libs/angular-star-rating/src/services/star-rating.ts
@@ -389,17 +389,18 @@ export class StarRating {
     return !this.readOnly && !this.disabled;
   }
 
-  setColor(): void {
+  setColor(useHoverValue = false): void {
     //check if custom function is given
+    const ratingValue = useHoverValue ? this.hoverRating: this.rating;
     if (typeof this.getColor === 'function') {
       this.color = this.getColor(
-        this.rating,
+        ratingValue,
         this.numOfStars,
         this.staticColor
       );
     } else {
       this.color = StarRatingUtils.getColor(
-        this.rating,
+        ratingValue,
         this.numOfStars,
         this.staticColor
       );