angular-star-rating - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

bower.json

 {
   "name": "angular-star-rating",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Angular Star Rating is a Angular1.5 component written in typescript.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

CHANGELOG.md

@@ -0,1 +1,25 @@
+<a name="1.0.7"></a>
+## [1.0.7](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.6...v1.0.7) (2016-11-25)
+
+
+### Bug Fixes
+
+* **build:** build new version ([071e934](https://github.com/BioPhoton/angular-star-rating/commit/071e934))
+* **readme:** updated shields ([56e4c86](https://github.com/BioPhoton/angular-star-rating/commit/56e4c86))
+* **readme:** updated shields ([6f9f6d1](https://github.com/BioPhoton/angular-star-rating/commit/6f9f6d1))
+* **resources:** images ([094e7b0](https://github.com/BioPhoton/angular-star-rating/commit/094e7b0))
+* **scss:** refactor scss ([cdd1982](https://github.com/BioPhoton/angular-star-rating/commit/cdd1982))
+
+
+### Features
+
+* **half-star modifier:** implement halfStar callback [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([1fd589e](https://github.com/BioPhoton/angular-star-rating/commit/1fd589e))
+* **half-star modifier:** implement scss modifier [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([49a90e9](https://github.com/BioPhoton/angular-star-rating/commit/49a90e9))
+* **half-star modifier:** start implement component functionality [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([383f59c](https://github.com/BioPhoton/angular-star-rating/commit/383f59c))
+* **half-star modifier:** test component functionality [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([9b6d8ce](https://github.com/BioPhoton/angular-star-rating/commit/9b6d8ce))
+* **half-star modifier:** test component functionality [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([f44a2f7](https://github.com/BioPhoton/angular-star-rating/commit/f44a2f7))
+* **half-star modifier:** tested halfStar callback [#25](https://github.com/BioPhoton/angular-star-rating/issues/25) ([a135396](https://github.com/BioPhoton/angular-star-rating/commit/a135396))
+
+
+
 <a name="1.0.6"></a>
@@ -2,0 +26,0 @@ ## [1.0.6](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.5...v1.0.6) (2016-11-22)

dist/star-rating.controller.d.ts

@@ -17,5 +17,7 @@ export declare type starRatingSizes = "small" | "medium" | "large";
     disabled?: boolean;
+    showHalfStars?: boolean;
     rating?: number;
     numOfStars?: number;
     getColor?: Function;
+    getHalfStarClass?: Function;
     onClick?: Function;
@@ -26,2 +28,3 @@ onUpdate?: Function;
     static DefaultClassEmpty: string;
+    static DefaultClassHalf: string;
     static DefaultClassFilled: string;
@@ -36,4 +39,6 @@ static DefaultNumOfStars: number;
     static DefaultSvgEmptySymbolId: string;
+    static DefaultSvgHalfSymbolId: string;
     static DefaultSvgFilledSymbolId: string;
     static DefaultSvgPathEmpty: string;
+    static DefaultSvgPathHalf: string;
     static DefaultSvgPathFilled: string;
@@ -59,4 +64,6 @@ /**
     disabled: boolean;
+    showHalfStars: boolean;
     rating: number;
     numOfStars: number;
+    getHalfStarClass: Function;
     getColor: Function;
@@ -66,7 +73,11 @@ onClick: Function;
     classEmpty: string;
+    classHalf: string;
     classFilled: string;
     pathEmpty: string;
+    pathHalf: string;
     pathFilled: string;
     stars: Array<number>;
     staticColor: starRatingColors;
+    ratingAsInteger: number;
+    hasHalfStarClass: boolean;
     constructor();
@@ -99,4 +110,6 @@ /**
      * @param value
+     * @param showHalfStars?
+     *
      */
-    private updateRating(value);
+    private updateRating(value, showHalfStars?);
     /**
@@ -112,4 +125,13 @@ * updateNumOfStars
     /**
-     * calculateColor
+     * hasHalfStarClass
      *
+     * Returns true if there should be a half star visible, and false if not.
+     *
+     * @param value
+     * @returns {boolean}
+     */
+    private _calcHalfStarClass;
+    /**
+     * _calculateColor
+     *
      * The default function for color calculation
@@ -124,3 +146,3 @@ * based on the current rating and the the number of stars possible.
      */
-    private calculateColor;
-}
+    private _calculateColor;
+}

package.json

 {
   "name": "angular-star-rating",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # Angular Star Rating
 #### Angular 1.5 Component written in typescript, based on css only techniques.
 
-[![Bower version](https://badge.fury.io/bo/angular-star-rating.svg)](https://badge.fury.io/bo/angular-star-rating)
+[![Bower version](https://badge.fury.io/bo/angular1-star-rating.svg)](https://badge.fury.io/bo/angular1-star-rating)
 [![npm version](https://badge.fury.io/js/angular-star-rating.svg)](https://badge.fury.io/js/angular-star-rating)  
-[![Package Quality](http://npm.packagequality.com/shield/angular-star-rating.svg)](http://packagequality.com/#?package=angular-star-rating)
+[![Package Quality](http://npm.packagequality.com/badge/angular-star-rating.png)](http://packagequality.com/#?package=angular-star-rating)
 
@@ -12,7 +12,7 @@ Angular Star Rating is a >1.5 Angular component written in typescript.
 ## DEMOS
-![alt tag](https://github.com/BioPhoton/angular-star-rating/blob/master/resources/star-rating-options.PNG)
+![alt tag](https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/star-rating-options.PNG)
 
 ## Install
 
-**Get Angular Sar Rating:**
+**Get Angular Star Rating:**
  - clone & build this repository
@@ -22,4 +22,24 @@ - [download as .zip](https://github.com/BioPhoton/angular-star-rating/releases)
  
-## Properties
+**Load library**
+```html
+<script src="bower_components/ng-drupal-7-services/dist/ng-drupal-7-services.js"></script>
+```
 
+**inject it into angular**
+```javascript
+angular.module('myApp', ['star-rating'])
+```
+
+**Use it**
+```html
+<star-rating-comp
+         size="'large'"
+         rating="3"
+         text="'Rating:'"
+         on-update="crtl.onUpdate(rating)">
+ </star-rating-comp>
+```
+
+## Component Properties
+
 ### @ bindings
@@ -29,4 +49,8 @@
 The html id attribute of the star rating   
-Default: undefined  
+Default: undefined
 
+```html
+<star-rating-comp id="'my-id'"></star-rating-comp>
+```
+
 ### < bindings
@@ -38,2 +62,5 @@
 
+```html
+<star-rating-comp text="'My text!'"></star-rating-comp>
+```
 **labelPosition**: starRatingPosition (Optional)  
@@ -44,2 +71,11 @@ The position of the label
 
+```html
+<star-rating-comp label-position="'top'"></star-rating-comp>
+```
+
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-top.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-bottom.PNG" width="250">  
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-right.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-left.PNG" width="250">
+
 **spread**: boolean (Optional)  
@@ -49,6 +85,16 @@ If the start use the whole space or not.
 
+```html
+<star-rating-comp spread="true"></star-rating-comp>
+```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-false.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-true.PNG" width="250">
+
 **numOfStars**: number (Optional)  
 The possible number of stars to choose from  
-Default: 5  
+Default: 5
 
+```html
+<star-rating-comp num-of-stars="6"></star-rating-comp>
+```
+
 **rating**: number (Optional)  
@@ -58,10 +104,30 @@ The actual star rating value
 
+```html
+<star-rating-comp rating="3"></star-rating-comp>
+```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-value.PNG" width="250">
+
 **color**: starRatingColors (Optional)  
 Possible color names for the stars.  
 Options: default, negative, middle, positive  
-Default: undefined
+Default: undefined  
 
+```html
+<star-rating-comp color="'positive'"></star-rating-comp>
+```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-default.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-positive.PNG" width="250">  
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-middle.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-negative.PNG" width="250">
+
 **disabled**: boolean (Optional)  
 The click callback is disabled, colors are transparent   
 Default: false  
+
+```html
+<star-rating-comp disabled="true"></star-rating-comp>
+```
+
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-true.PNG" width="250">
   
@@ -72,2 +138,8 @@ **readOnly**: boolean (Optional)
 
+```html
+<star-rating-comp read-only="true"></star-rating-comp>
+```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="250">
+
 **size**: starRatingSizes (Optional)  
@@ -78,2 +150,9 @@ The height and width of the stars.
 
+```html
+<star-rating-comp size="'small'"></star-rating-comp>
+```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-small.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-medium.PNG" width="250">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-large.PNG" width="250">
+
 **speed**: starRatingSpeed (Optional)  
@@ -84,2 +163,5 @@ The duration of the animation in ms.
 
+```html
+<star-rating-comp speed="'slow'"></star-rating-comp>
+```
 **starType**: starRatingStarTypes (Optional)  
@@ -90,2 +172,5 @@ The type of start resource to use.
 
+```html
+<star-rating-comp star-type="'icon'"></star-rating-comp>
+```
 ### & bindings
@@ -109,2 +194,2 @@
 ### ES6 
-### TS 
+### TS 

src/star-rating.component.ts

@@ -25,3 +25,5 @@ import {StarRatingController} from "./star-rating.controller";
             , labelPosition: '<'
+            , showHalfStars: '<'
             , getColor: '&?'
+            , getHalfStarClass: '&?'
             , onClick: '&?'
@@ -28,0 +30,0 @@ , onUpdate: '&?'

src/star-rating.controller.ts

@@ -20,2 +20,3 @@ export type starRatingSizes = "small" | "medium" | "large";
     disabled?: boolean;
+    showHalfStars?: boolean;
     rating?: number;
@@ -25,2 +26,3 @@ numOfStars?: number;
     getColor?: Function;
+    getHalfStarClass?:Function;
     onClick?: Function;
@@ -34,2 +36,4 @@ onUpdate?: Function;
 
+    static DefaultClassHalf:string = "default-star-half-icon";
+
     static DefaultClassFilled:string = "default-star-filled-icon";
@@ -50,3 +54,4 @@
     static DefaultSvgPath:string = StarRatingController.DefaultAssetsPath+"star-rating.icons.svg";
-    static DefaultSvgEmptySymbolId:string = "star";
+    static DefaultSvgEmptySymbolId:string = "star-empty";
+    static DefaultSvgHalfSymbolId:string = "star-half";
     static DefaultSvgFilledSymbolId:string = "star-filled";
@@ -56,2 +61,4 @@
 
+    static DefaultSvgPathHalf:string = StarRatingController.DefaultSvgPath+"#"+StarRatingController.DefaultSvgHalfSymbolId;
+
     static DefaultSvgPathFilled:string = StarRatingController.DefaultSvgPath+"#"+StarRatingController.DefaultSvgFilledSymbolId;
@@ -89,5 +96,7 @@
     disabled: boolean;
+    showHalfStars: boolean;
     rating: number;
     numOfStars: number;
     //&
+    getHalfStarClass:Function;
     getColor: Function;
@@ -99,7 +108,13 @@ onClick: Function;
     classEmpty:string;
+    classHalf:string;
     classFilled:string;
+
     pathEmpty: string;
+    pathHalf:string;
     pathFilled:string;
+
     stars: Array<number>;
     staticColor:starRatingColors;
+    ratingAsInteger:number;
+    hasHalfStarClass:boolean;
 
@@ -110,7 +125,10 @@ //
         this.classEmpty = this.classEmpty || StarRatingController.DefaultClassEmpty;
+        this.classHalf = this.classHalf || StarRatingController.DefaultClassHalf;
         this.classFilled = this.classFilled || StarRatingController.DefaultClassFilled;
         this.pathEmpty = this.pathEmpty || StarRatingController.DefaultSvgPathEmpty;
+        this.pathHalf = this.pathHalf || StarRatingController.DefaultSvgPathHalf;
         this.pathFilled = this.pathFilled || StarRatingController.DefaultSvgPathFilled;
         this.numOfStars = (this.numOfStars && this.numOfStars > 0)?this.numOfStars:StarRatingController.DefaultNumOfStars;
-        this.getColor  = (typeof this.getColor === "function")?this.getColor:this.calculateColor;
+        this.getColor  = (typeof this.getColor === "function")?this.getColor:this._calculateColor;
+        this.getHalfStarClass = this.getHalfStarClass || this._calcHalfStarClass;
         this.onUpdate  = this.onUpdate || function () {};
@@ -138,3 +156,3 @@ this.onClick  = this.onClick || function () {};
         if (valueChanged('rating', changes)) {
-            this.updateRating(changes.rating.currentValue);
+            this.updateRating(changes.rating.currentValue, this.showHalfStars);
         }
@@ -153,3 +171,3 @@
             this.staticColor =(changes.color.currentValue)?changes.color.currentValue:undefined;
-            this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
+            this.color = this.getColor(this.ratingAsInteger, this.numOfStars, this.staticColor);
         }
@@ -174,2 +192,8 @@
         //boolean
+        if (valueChanged('showHalfStars' , changes)) {
+            this.showHalfStars = !!changes.showHalfStars.currentValue;
+            console.log('show-half-stars changed: ', this.showHalfStars);
+            this.updateRating(this.rating, this.showHalfStars);
+        }
+
         if (valueChanged('spread' , changes)) {
@@ -214,6 +238,13 @@ this.spread = !!changes.spread.currentValue;
      * @param value
+     * @param showHalfStars?
+     *
      */
-    private updateRating(value: number) {
+    private updateRating(value: number, showHalfStars?:boolean):void {
         this.rating = value;
+        //if rating parseInt it if not set to 0
+        this.ratingAsInteger = (this.rating)?parseInt(this.rating.toString()):0;
+        //if showHalfStars is true use the hasHalfStarClass function to determine if half a star is visible
+        this.hasHalfStarClass = (showHalfStars)?this.getHalfStarClass({rating: this.rating}):false;
         this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
+
         this.onUpdate({rating: this.rating});
@@ -230,3 +261,3 @@ }
      */
-    private updateNumOfStars(numOfStars: number) {
+    private updateNumOfStars(numOfStars: number): void  {
         this.numOfStars = (numOfStars && numOfStars > 0)?numOfStars:StarRatingController.DefaultNumOfStars;
@@ -238,4 +269,17 @@ this.stars = StarRatingController.getStarsArray(this.numOfStars);
     /**
-     * calculateColor
+     * hasHalfStarClass
      *
+     * Returns true if there should be a half star visible, and false if not.
+     *
+     * @param value
+     * @returns {boolean}
+     */
+    private _calcHalfStarClass = (value: number): boolean => {
+        console.log('_calcHalfStarClass');
+        return value % 1 > 0;
+    };
+
+    /**
+     * _calculateColor
+     *
      * The default function for color calculation
@@ -250,3 +294,3 @@ * based on the current rating and the the number of stars possible.
      */
-    private calculateColor = (rating:number, numOfStars:number, staticColor?:starRatingColors):starRatingColors => {
+    private _calculateColor = (rating:number, numOfStars:number, staticColor?:starRatingColors):starRatingColors => {
         //if a fix color is set use this one
@@ -253,0 +297,0 @@ if(staticColor) { return staticColor; }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

184

increased by87.76%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

2984027

decreased by-11.92%

Number of package files

41

decreased by-22.64%

Lines of code

30377

decreased by-3.55%

No dependency changes