🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

angular-star-rating

Package Overview
Dependencies
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-star-rating - npm Package Compare versions

Comparing version

to
1.0.9

resources/example-usage.gif

15

bower.json
{
"name": "angular-star-rating",
"version": "1.0.7",
"version": "1.0.9",
"description": "Angular Star Rating is a Angular1.5 component written in typescript.",

@@ -11,2 +11,5 @@ "main": "dist/index.js",

"keywords": [
"Rating",
"Stars",
"Star Rating",
"Star-Rating",

@@ -19,7 +22,10 @@ "Starrating",

"CSS",
"CSS",
"only",
"CSS only",
"JavaScript",
"Angular",
"Angular Component",
"Angular1",
"Angular1 Component",
"Angular1.5",
"Angular1.5 Component",
"Angular2",

@@ -47,3 +53,4 @@ "Typescript"

"webpack.config.js"
]
],
"dependencies": {}
}

@@ -0,1 +1,33 @@

<a name="1.0.9"></a>
## [1.0.9](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.7...v1.0.9) (2016-11-26)
### Bug Fixes
* **bild:** rebuild project ([82268b3](https://github.com/BioPhoton/angular-star-rating/commit/82268b3))
* **build:** rebuild project ([a53f68f](https://github.com/BioPhoton/angular-star-rating/commit/a53f68f))
* **color:** display default color if rating is 0 ([cee14a8](https://github.com/BioPhoton/angular-star-rating/commit/cee14a8))
* **component:** add default color for 0 rating ([2090275](https://github.com/BioPhoton/angular-star-rating/commit/2090275))
* **refactoring:** removed console.log ([02efb08](https://github.com/BioPhoton/angular-star-rating/commit/02efb08))
* **refactoring:** removed console.log ([0d36f55](https://github.com/BioPhoton/angular-star-rating/commit/0d36f55))
* **scss:** added img to animation section ([2c1bf4c](https://github.com/BioPhoton/angular-star-rating/commit/2c1bf4c))
* **scss:** fix value modifiers greater then the numOfStars ([8be4ff7](https://github.com/BioPhoton/angular-star-rating/commit/8be4ff7))
<a name="1.0.8"></a>
## [1.0.8](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.7...v1.0.8) (2016-11-26)
### Bug Fixes
* **build:** rebuild project ([a53f68f](https://github.com/BioPhoton/angular-star-rating/commit/a53f68f))
* **color:** display default color if rating is 0 ([cee14a8](https://github.com/BioPhoton/angular-star-rating/commit/cee14a8))
* **component:** add default color for 0 rating ([2090275](https://github.com/BioPhoton/angular-star-rating/commit/2090275))
* **refactoring:** removed console.log ([02efb08](https://github.com/BioPhoton/angular-star-rating/commit/02efb08))
* **refactoring:** removed console.log ([0d36f55](https://github.com/BioPhoton/angular-star-rating/commit/0d36f55))
* **scss:** added img to animation section ([2c1bf4c](https://github.com/BioPhoton/angular-star-rating/commit/2c1bf4c))
<a name="1.0.7"></a>

@@ -2,0 +34,0 @@ ## [1.0.7](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.6...v1.0.7) (2016-11-25)

export declare type starRatingSizes = "small" | "medium" | "large";
export declare type starRatingColors = "negative" | "middle" | "positive";
export declare type starRatingColors = "default" | "negative" | "middle" | "positive";
export declare type starRatingSpeed = "immediately" | "noticeable" | "slow";

@@ -123,3 +123,3 @@ export declare type starRatingPosition = "left" | "right" | "top" | "bottom";

*
* @param value
* @param rating
* @returns {boolean}

@@ -126,0 +126,0 @@ */

{
"name": "angular-star-rating",
"version": "1.0.7",
"version": "1.0.9",
"license": "MIT",
"keywords": [
"Rating",
"Stars",
"Star Rating",
"Star-Rating",

@@ -15,4 +18,8 @@ "Starrating",

"JavaScript",
"Angular",
"Angular Component",
"Angular1",
"Angular1 Component",
"Angular1.5",
"Angular1.5 Component",
"Angular2",

@@ -19,0 +26,0 @@ "Typescript"

@@ -11,4 +11,4 @@ # Angular Star Rating

## DEMOS
![alt tag](https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/star-rating-options.PNG)
## DEMO
![alt tag](https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/example-usage.gif)

@@ -20,7 +20,8 @@ ## Install

- [download as .zip](https://github.com/BioPhoton/angular-star-rating/releases)
- or via **[npm](https://www.npmjs.org/)**: by running `$ npm install angular-star-rating` from your console
- via **[npm](https://www.npmjs.org/)**: by running `$ npm install angular-star-rating` from your console
- via **[bower](https://bower.io/)**: by running `$ bower install angular1-star-rating` from your console
**Load library**
```html
<script src="bower_components/ng-drupal-7-services/dist/ng-drupal-7-services.js"></script>
<script src="bower_components/angular-star-rating/dist/index.js"></script>
```

@@ -57,2 +58,31 @@

**rating**: number (Optional)
The actual star rating value
Default: undefined
```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="290">
**showHalfStars**: boolean (Optional)
To show half stars or not
Options: true, flase
Default: false
```html
<star-rating-comp show-half-stars="true"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-show_half_stars-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-show_half_stars-true.PNG" width="290">
**numOfStars**: number (Optional)
The possible number of stars to choose from
Default: 5
```html
<star-rating-comp num-of-stars="6"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-num_of_stars.PNG" width="290">
**text**: string (Optional)

@@ -65,2 +95,4 @@ The text next to the stars.

```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-text.PNG" width="290">
**labelPosition**: starRatingPosition (Optional)

@@ -74,8 +106,7 @@ The position of the label

```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-top.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-bottom.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-right.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-left.PNG" width="290">
<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)

@@ -88,22 +119,17 @@ If the start use the whole space or not.

```
<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">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-true.PNG" width="290">
**numOfStars**: number (Optional)
The possible number of stars to choose from
Default: 5
**size**: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: middle
```html
<star-rating-comp num-of-stars="6"></star-rating-comp>
<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="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-medium.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-large.PNG" width="290">
**rating**: number (Optional)
The actual star rating value
Default: undefined
```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)

@@ -117,6 +143,6 @@ Possible color names for the stars.

```
<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">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-default.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-positive.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-middle.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-negative.PNG" width="290">

@@ -130,5 +156,4 @@ **disabled**: boolean (Optional)

```
<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">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-true.PNG" width="290">

@@ -142,17 +167,5 @@ **readOnly**: boolean (Optional)

```
<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">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">
**size**: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: middle
```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)

@@ -166,2 +179,6 @@ The duration of the animation in ms.

```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-immediately.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-noticeable.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-slow.gif" width="290">
**starType**: starRatingStarTypes (Optional)

@@ -177,10 +194,9 @@ The type of start resource to use.

**getColor**: Function (Optional)
Calculation of the color by rating.
Params: rating, number,numOfStars and staticColor
Return: color name
**onClick**: Function (Optional)
Callback function for star click event
Params: rating
```html
<star-rating-comp on-click="ctrl.onClick(rating)"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_click-function.PNG" width="290">

@@ -190,6 +206,25 @@ **onUpdate**: Function (Optional)

Params: rating
```html
<star-rating-comp on-update="ctrl.onUpdate(rating)"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_update-function.PNG" width="290">
## Usage
### ES5
### ES6
### TS
**getColor**: Function (Optional)
Calculation of the color by rating.
Params: rating, number,numOfStars and staticColor
Return: color name
```html
<star-rating-comp get-color="ctrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-get_color-function.PNG" width="290">
**getHalfStarClass**: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean
```html
<star-rating-comp get-half-star-class="ctrl.getHalfStarClass(rating)"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-get_half_star_class-function.PNG" width="290">
export type starRatingSizes = "small" | "medium" | "large";
export type starRatingColors = "negative" | "middle" | "positive";
export type starRatingColors = "default" | "negative" | "middle" | "positive";
export type starRatingSpeed = "immediately" | "noticeable" | "slow";

@@ -142,3 +142,3 @@ export type starRatingPosition = "left" | "right" | "top" | "bottom";

if (key in changes)
if (changes[key].currentValue != changes[key].previousValue) { console.log('key', changes[key].currentValue); return true; }
if (changes[key].currentValue != changes[key].previousValue) { return true; }
return false;

@@ -185,3 +185,2 @@ };

this.showHalfStars = !!changes.showHalfStars.currentValue;
console.log('show-half-stars changed: ', this.showHalfStars);
this.updateRating(this.rating, this.showHalfStars);

@@ -262,8 +261,7 @@ }

*
* @param value
* @param rating
* @returns {boolean}
*/
private _calcHalfStarClass = (value: number): boolean => {
console.log('_calcHalfStarClass');
return value % 1 > 0;
private _calcHalfStarClass = (rating: number): boolean => {
return rating % 1 > 0;
};

@@ -291,3 +289,4 @@

//apply color by fraction
let color:starRatingColors = 'negative';
let color:starRatingColors = 'default';
if (rating > 0) { color = 'negative'; }
if (rating > fractionSize) { color = 'middle'; }

@@ -294,0 +293,0 @@ if (rating > fractionSize * 2) { color = 'positive'; }

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet