Release 1.3.0

Add new wholeStars option to allow selecting only whole numbers of stars

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.0 (24/05/2019)
+
+* Add new `wholeStars` option to allow selecting only whole numbers of stars
+
 ## 1.2.0 (21/12/2018)
 
 * Add support for Angular 7 and up

README.md

@@ -35,6 +35,7 @@ import { NgxStarsModule } from 'ngx-stars';
 * `animation` [boolean] - whether to animate the stars until first user interaction (defaults to false)
 * `animationSpeed` [integer] - speed of animation in ms (defaults to 100)
 * `customPadding` [string] - custom `padding-right` between stars, e.g. '10px' (defaults to `0.$size`rem e.g. 0.2rem with size=2)
+* `wholeStars` [boolean] - if this is true only whole star numbers are able to be selected (defaults to false)
 
 ##### `@Output()` options:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-stars",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Simple stars rating component for Angular >= 2",
   "repository": {
     "type": "git",

src/lib/ngx-stars.component.ts

@@ -31,6 +31,9 @@ export class NgxStarsComponent implements OnInit {
   @Input()
   customPadding: string;
 
+  @Input()
+  wholeStars: boolean = false;
+
   @Output()
   ratingOutput: EventEmitter<number> = new EventEmitter();
 
@@ -98,11 +101,10 @@ export class NgxStarsComponent implements OnInit {
   onStarHover(event: MouseEvent, clickedStar: EditableStar): void {
     this.cancelStarAnimation();
 
-    const starIcon = event.target as HTMLElement;
-    const clickedInFirstHalf = event.pageX < starIcon.getBoundingClientRect().left + starIcon.offsetWidth / 2;
+    const clickedInFirstHalf = this.clickedInFirstHalf(event);
 
     // fill in either a half or whole star depending on where user clicked
-    clickedStar.classname = clickedInFirstHalf ? 'fa-star-half-o' : 'fa-star';
+    clickedStar.classname = (!this.wholeStars && clickedInFirstHalf) ? 'fa-star-half-o' : 'fa-star';
 
     // fill in all stars in previous positions and clear all in later ones
     this.editableStars.forEach(star => {
@@ -119,9 +121,8 @@ export class NgxStarsComponent implements OnInit {
     this.cancelStarAnimation();
 
     // lock in current rating
-    const starIcon = event.target as HTMLElement;
-    const clickedInFirstHalf = event.pageX < starIcon.getBoundingClientRect().left + starIcon.offsetWidth / 2;
-    this.rating = clickedStar.position + (clickedInFirstHalf ? 0.5 : 1);
+    const clickedInFirstHalf = this.clickedInFirstHalf(event);
+    this.rating = clickedStar.position + ((!this.wholeStars && clickedInFirstHalf) ? 0.5 : 1);
     this.ratingOutput.emit(this.rating);
   }
 
@@ -152,6 +153,11 @@ export class NgxStarsComponent implements OnInit {
     });
   }
 
+  private clickedInFirstHalf(event: MouseEvent): boolean {
+    const starIcon = event.target as HTMLElement;
+    return event.pageX < starIcon.getBoundingClientRect().left + starIcon.offsetWidth / 2;
+  }
+
   noop(): void {}
 }