rater-js - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

example/index.js

 function onload(event){
    
    var starRating = rater({element:document.querySelector("#rater"), rateCallback: function rateCallback(rating) {
- 	starRating.setRating(rating);
+ 	starRating.setAvgRating(rating);
         starRating.disable();
@@ -10,15 +10,26 @@ }});
 	    {
-		max:16,
-		readOnly:true,
+		max:5,
 		rating:4, 
 		element: document.querySelector("#rater2"),
-		disableText:"Thanks!",
+		disableText:"Custom disable text!",
 		ratingText:"My custom rating text {rating}", 
 		rateCallback: function rateCallback(rating) {
-			starRating2.setRating(rating);
+			starRating2.setAvgRating(rating);
 			starRating2.disable();
 		}
 	});
+
+	var starRating3 = rater(
+	    {
+		max:16,
+		readOnly:true,
+		rating:4, 
+		element: document.querySelector("#rater3"),
+		rateCallback: function rateCallback(rating) {
+			starRating3.setAvgRating(rating);
+			starRating3.disable();
+		}
+	});
 }
 
 window.addEventListener("load",onload,false);

index.js

@@ -42,3 +42,3 @@ (function (root, factory) {
 		if(!options.readOnly){
-			disableText =  options.disableText || "Thank you for your're vote!";
+			disableText =  options.disableText || "Thank you for your vote!";
 		}
@@ -97,3 +97,3 @@
 
-		function setRating(value) {
+		function setAvgRating(value) {
 			rating = value;
@@ -110,2 +110,16 @@
 
+		function getAvgRating() {
+			return rating;
+		}
+
+		function getMyRating(){
+			return my_rating;
+		}
+
+		function setMyRating(rating){
+			my_rating = rating;
+			elem.setAttribute("data-title", ratingText.replace("{rating}",my_rating));
+			elem.querySelector(".star-value").style.width = my_rating/stars * 100 + "%";
+		}
+
 		function dispose(){
@@ -121,3 +135,3 @@ if(!elem){
 
-		setRating(options.rating);
+		setAvgRating(options.rating);
 		elem.addEventListener("mousemove",onMouseMove);
@@ -127,5 +141,13 @@ elem.addEventListener("mouseout", onStarOut);
 
-		return { setRating: setRating, disable:disable, enable:enable };
+		return { 
+			setAvgRating: setAvgRating,
+			getAvgRating: getAvgRating,
+			getMyRating:getMyRating,
+			setMyRating:setMyRating,
+			disable:disable, 
+			enable:enable,
+			dispose:dispose 
+		};
 	}
 
 }));

package.json

 {
   "name": "rater-js",
   "description": "Star rating widget for the browser.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "repository": {
@@ -9,3 +9,3 @@ "type": "git",
   },
-  "homepage": "https://github.com/fredolss/rater-js",
+  "homepage": "https://fredolss.github.io/rater-js",
   "main": "index.js",
@@ -12,0 +12,0 @@ "keywords": [

README.md

@@ -1,5 +0,10 @@
-# rater
+![rater-js Logo](ratings.png)
 
-Star rating widget for the browser.
+**rater-js** is a star rating widget for the browser.
 
+Main features:
+
+* Unlimited number of stars.
+* Custom css. Use your own image as star.
+
 ## Install
@@ -13,31 +18,42 @@
 
-rater-js can be used with amd, commonjs or without any module loader using rater from global scope.
+**rater-js** can be used with amd, commonjs or without any module loader using global scope.
 
 
-In your html create a new element that acts as the placeholder for the widget.
+In your html create an element that acts as the placeholder for the widget.
 
 ```html
-<!--Add the styling to the head-->
-<link href="node-modules/rater-js/rater-js.css" rel="stylesheet"> 
-
 <div id="rater"></div>
+```
 
+### Global scope
+Directly reference the js from the module
+
+```html
 <!--Add js before end body tag-->
 <script src="node-modules/rater-js/index.js"></script>
-
 ```
 
-### Node/Browserfiy
+The widget will be available globally as "rater" on the window object.
 
+### Node/Browserify
+Just require the module.
 ```js
-
 var rater = require("rater-js");
+```
 
+Lastly we can use the widget like this:
+```js
  var myRater = rater({element: document.querySelector("#rater"), rateCallback: function rateCallback(rating) {
                 //make async call to server
                 myRater.setRating(rating);
-                //we could disable the rater after rating to prevent another rating
+                //we could disable the rater to prevent another rating
                 myRater.disable();
 	}});
+```
 
+Alternativly reference the provided css from the node modules. You can use  your own css too of course.
+
+```html
+<!--Add the styling to the head-->
+<link href="node-modules/rater-js/rater-js.css" rel="stylesheet"> 
 ```
@@ -66,3 +82,6 @@
 enable: Enable the widget
-setRating(rating:number): Set the rating
+setAvgRating(rating:number): Set the average rating
+getAvgRating(): Get the rating
+getMyRating(): Get the rating the user submitted
+setMyRating(rating:number): Get the rating the user submitted
 ```

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

Improved metrics

Total package byte prevSize

14289

increased by51.9%

Number of package files

10

increased by25%

Lines of code

188

increased by18.24%

Number of lines in readme file

85

increased by28.79%

No dependency changes