rater-js - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

example/index.js

@@ -1,34 +0,48 @@
-function onload(event){
+function onload(event) {
    
-   var starRating = rater({element:document.querySelector("#rater"), rateCallback: function rateCallback(rating) {
- 	starRating.setAvgRating(rating);
-        starRating.disable();
-	}});
+	 var myDataService =  {
+		 rate:function(rating) {
+				return {then:function (callback) {
+					setTimeout(function () {
+						callback(Math.floor((Math.random() * 5) + 1)); 
+					}, 1000); 
+				}
+			}
+		}
+	}
 
-    var starRating2 = rater(
-	    {
-		max:5,
+   var starRating = raterJs( { isBusyText: "Rating in progress. Please wait...", element:document.querySelector("#rater"), rateCallback:function rateCallback(rating, done) {
+	 starRating.setAvgRating(rating); 
+	 	myDataService.rate().then(function (avgRating) {
+			 starRating.setAvgRating(avgRating); 
+			 done(); 
+		 }); 
+	}}); 
+
+    var starRating2 = raterJs( {
+		max:5, 
 		rating:4, 
-		element: document.querySelector("#rater2"),
-		disableText:"Custom disable text!",
+		element:document.querySelector("#rater2"), 
+		disableText:"Custom disable text!", 
 		ratingText:"My custom rating text {rating}", 
-		rateCallback: function rateCallback(rating) {
-			starRating2.setAvgRating(rating);
-			starRating2.disable();
+		rateCallback:function rateCallback(rating, done) {
+			starRating2.setAvgRating(rating); 
+			starRating2.disable(); 
+			done(); 
 		}
-	});
+	}); 
 
-	var starRating3 = rater(
-	    {
-		max:16,
-		readOnly:true,
+	var starRating3 = raterJs( {
+		max:16, 
+		readOnly:true, 
 		rating:4, 
-		element: document.querySelector("#rater3"),
-		rateCallback: function rateCallback(rating) {
-			starRating3.setAvgRating(rating);
-			starRating3.disable();
+		element:document.querySelector("#rater3"), 
+		rateCallback:function rateCallback(rating, done) {
+			starRating3.setAvgRating(rating); 
+			starRating3.disable(); 
+			done(); 
 		}
-	});
+	}); 
 }
 
-window.addEventListener("load",onload,false);
+window.addEventListener("load", onload, false); 

index.js

@@ -1,148 +0,241 @@
-(function (root, factory) {
-  if(typeof define === "function" && define.amd) {
-    define(["rater-js"], factory);
-  } else if(typeof module === "object" && module.exports) {
-    module.exports = factory();
-  } else {
-    root.rater = factory();
-  }
-}(this, function() {
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.raterJs = f()}})(function(){var define,module,exports;return (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
+var css = require('./style.css');
 
-	return function rater(options){
+module.exports = function rater(options) {
 
-       if(typeof options.element === "undefined"){
-		   throw new Error("element required");
-	   }
+	if (typeof options.element === "undefined") {
+		throw new Error("element required"); 
+	}
+	
+	//private fields
+	var stars = options.max || 5; 
+	var starWidth = 18; 
 
-	   if(typeof options.rateCallback === "undefined"){
-		   throw new Error("rateCallback required");
-	   }
+	var rating; 
+	var my_rating; 
+	var elem = options.element; 
+	elem.classList.add("star-rating"); 
+	var div = document.createElement("div"); 
+	div.classList.add("star-value"); 
+	elem.appendChild(div); 
+	div = document.createElement("div"); 
+	div.classList.add("star-bg"); 
+	elem.appendChild(div); 
+	elem.style.width = starWidth * stars + "px"; 
+	var callback = options.rateCallback; 
+	var disabled =  !!options.readOnly; 
+	var block = false; 
+	var disableText;
+	var isRating = false;
+	var isBusyText = options.isBusyText;
 
-		//private fields
-		var stars = options.max || 10;
-		var starWidth = 18;
+	if (!options.readOnly) {
+		disableText = options.disableText || "Thank you for your vote!"; 
+	}
+	
+	var ratingText = options.ratingText || "Set a rating of {rating}"; 
 
-		var rating;
-		var my_rating;
-		var elem = options.element;
-		elem.classList.add("star-rating");
-		var div = document.createElement("div");
-		div.classList.add("star-value");
-		elem.appendChild(div);
-		div = document.createElement("div");
-		div.classList.add("star-bg");
-		elem.appendChild(div);
-		elem.style.width = starWidth * stars + "px";
-		var callback = options.rateCallback;
-		var disabled = !!options.readOnly;
-		var block = false;
-        var disableText;
+	//private methods
+	function onMouseMove(e) {
 
-		if(!options.readOnly){
-			disableText =  options.disableText || "Thank you for your vote!";
+		if (disabled === true || block === true || isRating) {
+			return; 
 		}
 		
-		var ratingText = options.ratingText  || "Set a rating of {rating}" ;
+		var xCoor = e.offsetX; 
+		var width = elem.offsetWidth; 
+		var percent = (xCoor/width) * 100; 
 
-		//private methods
-		function onMouseMove(e){
+		if (percent < 101) {
+			my_rating = Math.ceil((percent / 100) * stars); 
+			elem.setAttribute("data-title", ratingText.replace("{rating}", my_rating)); 
+			elem.querySelector(".star-value").style.width = my_rating/stars * 100 + "%"; 
+		}
+	}
 
-			if(disabled === true || block === true) {
-				return;
-			}
-			
-			var xCoor = e.offsetX;
-			var width = elem.offsetWidth;
-			var percent = (xCoor/width) * 100;
+	function onStarOut(e) {
+		block = false; 
+		if (typeof rating != "undefined") {
+			elem.querySelector(".star-value").style.width = rating/stars * 100 + "%"; 
+			elem.setAttribute("data-rating", rating); 
+		}else {
+			elem.querySelector(".star-value").style.width = "0%"; 
+			elem.setAttribute("data-rating", undefined); 
+		}
+	}
 
-			if(percent < 101){
-				my_rating = Math.ceil((percent / 100) * stars);
-				elem.setAttribute("data-title", ratingText.replace("{rating}",my_rating));
-				elem.querySelector(".star-value").style.width = my_rating/stars * 100 + "%";
-			}
+	function onStarClick(e) {
+		if (disabled === true) {
+			return; 
 		}
 
-		function onStarOut(e){
-			block = false;
-			if(typeof rating != "undefined"){
-				elem.querySelector(".star-value").style.width = rating/stars * 100 + "%";
-				elem.setAttribute("data-rating", rating);
-			} else {
-				elem.querySelector(".star-value").style.width = "0%";
-				elem.setAttribute("data-rating", undefined);
-			}
+		if(isRating){
+			return;
 		}
 
-		function onStarClick(e){
-			if(disabled === true){
-				return;
+		if(typeof callback !== "undefined" ){
+			isRating = true;
+			if(typeof isBusyText === "undefined"){
+				elem.removeAttribute("data-title"); 
+			} else {
+				elem.setAttribute("data-title", isBusyText); 
 			}
+			
+			callback.call(this, my_rating, function() {
+				isRating = false;
 
-			callback(my_rating);
-			block = true;
+				if(disabled === false){
+					elem.removeAttribute("data-title"); 
+				}
+			});
 		}
 
-		//public methods
-		function disable(){
-			disabled = true;
-			elem.setAttribute("data-title", disableText);
-		}
+		block = true; 
+	}
 
-		function enable(){
-			disabled = false;
-			elem.setAttribute("data-title", undefined);
-		}
+	//public methods
+	function disable() {
+		disabled = true; 
+		elem.setAttribute("data-title", disableText); 
+	}
 
-		function setAvgRating(value) {
-			rating = value;
+	function enable() {
+		disabled = false; 
+		elem.setAttribute("data-title", undefined); 
+	}
 
-			if(typeof value !== "undefined"){
-				elem.querySelector(".star-value").style.width = value/stars * 100 + "%";
-			} else {
-				elem.querySelector(".star-value").style.width = "0px";
-			}
+	function setAvgRating(value) {
+		rating = value; 
 
-			elem.setAttribute("data-rating", value);
+		if (typeof value !== "undefined") {
+			elem.querySelector(".star-value").style.width = value/stars * 100 + "%"; 
+		} else {
+			elem.querySelector(".star-value").style.width = "0px"; 
 		}
 
-		function getAvgRating() {
-			return rating;
-		}
+		elem.setAttribute("data-rating", value); 
+	}
 
-		function getMyRating(){
-			return my_rating;
-		}
+	function getAvgRating() {
+		return 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 getMyRating() {
+		return my_rating; 
+	}
 
-		function dispose(){
-			if(!elem){
-				return;
-			}
+	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 + "%"; 
+	}
 
-			elem.removeEventListener("mousemove",onMouseMove);
-			elem.removeEventListener("mouseout", onStarOut);
-			elem.removeEventListener("click", onStarClick);
+	function dispose() {
+		if (!elem) {
+			return; 
 		}
 
-		setAvgRating(options.rating);
-		elem.addEventListener("mousemove",onMouseMove);
-		elem.addEventListener("mouseout", onStarOut);
-		elem.addEventListener("click", onStarClick);
-
-		return { 
-			setAvgRating: setAvgRating,
-			getAvgRating: getAvgRating,
-			getMyRating:getMyRating,
-			setMyRating:setMyRating,
-			disable:disable, 
-			enable:enable,
-			dispose:dispose 
-		};
+		elem.removeEventListener("mousemove", onMouseMove); 
+		elem.removeEventListener("mouseout", onStarOut); 
+		elem.removeEventListener("click", onStarClick); 
 	}
 
-}));
+	setAvgRating(options.rating); 
+	elem.addEventListener("mousemove", onMouseMove); 
+	elem.addEventListener("mouseout", onStarOut); 
+
+	var module = {
+		setAvgRating:setAvgRating, 
+		getAvgRating:getAvgRating, 
+		getMyRating:getMyRating, 
+		setMyRating:setMyRating, 
+		disable:disable, 
+		enable:enable, 
+		dispose:dispose 
+	}; 
+
+	elem.addEventListener("click", onStarClick.bind(module)); 
+
+	return module;
+}
+},{"./style.css":2}],2:[function(require,module,exports){
+var css = ".star-rating {\n  width: 0;\n  height: 16px;\n  position: relative;\n  background-color: #ccc;\n}\n.star-rating[data-title]:hover:after {\n  content: attr(data-title);\n  padding: 4px 8px;\n  color: #333;\n  position: absolute;\n  left: 0;\n  top: 100%;\n  z-index: 20;\n  white-space: nowrap;\n  -moz-border-radius: 5px;\n  -webkit-border-radius: 5px;\n  border-radius: 5px;\n  -moz-box-shadow: 0px 0px 4px #222;\n  -webkit-box-shadow: 0px 0px 4px #222;\n  box-shadow: 0px 0px 4px #222;\n  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);\n  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));\n  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);\n  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);\n  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);\n  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);\n}\n.star-rating .star-value {\n  height: 100%;\n  position: absolute;\n  background-color: #ffbe10;\n}\n.star-rating .star-bg {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDYwIDQ4Ij48dGl0bGU+U3RhcjwvdGl0bGU+PHBhdGggZD0iTTE2LjMgNDMuNDA1Yy4wMDMtLjA4My45MzctMy41MDcgMi4wNzYtNy42MDggMS43NC02LjI2IDIuMDQ4LTcuNDg1IDEuOTI0LTcuNjI4LS4wODItLjA5NC0yLjczNy0yLjMzLTUuOS00Ljk3MmwtNS43NTMtNC44MDMgNy42LS4wMyA3LjYwMi0uMDI4IDIuNTItNy41N2MxLjM4OC00LjE2MyAyLjU1Mi03LjU3IDIuNTg3LTcuNTcuMDM1IDAgMS4xOCAzLjM5NSAyLjU0OCA3LjU0M2wyLjQ4NiA3LjU0MiA3LjYyMi4wNTcgNy42MjIuMDU1LTUuODc2IDQuOTA1LTUuOTA3IDQuOTI3Yy0uMDE2LjAxMy45MTUgMy40NDMgMi4wNyA3LjYyIDEuMTU4IDQuMTggMi4wODcgNy42MTQgMi4wNjcgNy42MzMtLjAyLjAyLTIuODYtMS45NjctNi4zMDgtNC40MTQtMy40NS0yLjQ0OC02LjMyNi00LjQzMi02LjM5Mi00LjQxLS4xLjAzNi0xMC4zNzYgNy4yOS0xMi4wNTUgOC41MS0uMzIyLjIzNC0uNTM1LjMzLS41MzMuMjR6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTAtMi42Njd2NTMuMzM0aDYwVi0yLjY2N0gwem0zMC4yOTIgMS43MWw3LjEyNSAxOC44NzRoMjEuNDE2TDQyLjE2NyAzMC4wODNsNS45NTggMTguODc1LTE3LjgzMy0xMS4wODMtMTcuODM0IDExLjA4MyA1LjkxNy0xOC44NzVMMS43NSAxNy45MTdoMjEuMzc1TDMwLjI5Mi0uOTU4eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0zMC4yNzctLjk1MkwzNy40MTIgMTcuOWgyMS40MDRMNDIuMTY4IDMwLjFsNS45NDYgMTguODUyLTE3LjgzNy0xMS4wOS0xNy44MzcgMTEuMDlMMTguMzg2IDMwLjEgMS43MzggMTcuOWgyMS40MDR6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjMzNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==') repeat;\n  background-size: contain;\n}\n"; (require("browserify-css").createStyle(css, { "href": "lib\\style.css" }, { "insertAt": "bottom" })); module.exports = css;
+},{"browserify-css":3}],3:[function(require,module,exports){
+'use strict';
+// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field.
+
+var styleElementsInsertedAtTop = [];
+
+var insertStyleElement = function(styleElement, options) {
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
+
+    options = options || {};
+    options.insertAt = options.insertAt || 'bottom';
+
+    if (options.insertAt === 'top') {
+        if (!lastStyleElementInsertedAtTop) {
+            head.insertBefore(styleElement, head.firstChild);
+        } else if (lastStyleElementInsertedAtTop.nextSibling) {
+            head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
+        } else {
+            head.appendChild(styleElement);
+        }
+        styleElementsInsertedAtTop.push(styleElement);
+    } else if (options.insertAt === 'bottom') {
+        head.appendChild(styleElement);
+    } else {
+        throw new Error('Invalid value for parameter \'insertAt\'. Must be \'top\' or \'bottom\'.');
+    }
+};
+
+module.exports = {
+    // Create a <link> tag with optional data attributes
+    createLink: function(href, attributes) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var link = document.createElement('link');
+
+        link.href = href;
+        link.rel = 'stylesheet';
+
+        for (var key in attributes) {
+            if ( ! attributes.hasOwnProperty(key)) {
+                continue;
+            }
+            var value = attributes[key];
+            link.setAttribute('data-' + key, value);
+        }
+
+        head.appendChild(link);
+    },
+    // Create a <style> tag with optional data attributes
+    createStyle: function(cssText, attributes, extraOptions) {
+        extraOptions = extraOptions || {};
+
+        var style = document.createElement('style');
+        style.type = 'text/css';
+
+        for (var key in attributes) {
+            if ( ! attributes.hasOwnProperty(key)) {
+                continue;
+            }
+            var value = attributes[key];
+            style.setAttribute('data-' + key, value);
+        }
+
+        if (style.sheet) { // for jsdom and IE9+
+            style.innerHTML = cssText;
+            style.sheet.cssText = cssText;
+            insertStyleElement(style, { insertAt: extraOptions.insertAt });
+        } else if (style.styleSheet) { // for IE8 and below
+            insertStyleElement(style, { insertAt: extraOptions.insertAt });
+            style.styleSheet.cssText = cssText;
+        } else { // for Chrome, Firefox, and Safari
+            style.appendChild(document.createTextNode(cssText));
+            insertStyleElement(style, { insertAt: extraOptions.insertAt });
+        }
+    }
+};
+
+},{}]},{},[1])(1)
+});

package.json

 {
   "name": "rater-js",
   "description": "Star rating widget for the browser.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "repository": {
@@ -10,3 +10,7 @@ "type": "git",
   "homepage": "https://fredolss.github.io/rater-js",
+  "types": "index.d.ts",
   "main": "index.js",
+  "scripts": {
+    "build": "browserify -t [ browserify-css --inlineImages ] ./lib/rater-js -o index.js --standalone rater-js"
+  },
   "keywords": [
@@ -18,3 +22,4 @@ "star",
     "browser",
-    "browserify"
+    "browserify",
+    "typescript"
   ],
@@ -26,3 +31,7 @@ "author": {
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "browserify-css": "^0.14.0",
+    "browserify": "^16.1.1"
+  }
 }

README.md

@@ -0,6 +1,13 @@
+Rater Js
+========
+
 ![rater-js Logo](ratings.png)
 
+[![NPM version][npm-image]][npm-url]
+[![License][license-image]][license-url]
+[![Downloads][downloads-image]][downloads-url]
+
 **rater-js** is a star rating widget for the browser.
 
-Main features:
+### Main features:
 
@@ -10,4 +17,6 @@ * Unlimited number of stars.
 
-## Install
+[**Try Rater JS  Demo →**][RaterJS]
 
+## Installation
+
 ```
@@ -21,3 +30,2 @@ npm install rater-js --save
 
-
 In your html create an element that acts as the placeholder for the widget.
@@ -37,3 +45,3 @@
 
-The widget will be available globally as "rater" on the window object.
+The widget will be available globally as "raterJs" on the window object.
 
@@ -48,19 +56,35 @@ ### Node/Browserify
 ```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 to prevent another rating
-                myRater.disable();
+ var myRater = rater({element: document.querySelector("#rater"), rateCallback: function rateCallback(rating, done) {
+                //make async call to server however you want
+                //in this example we have a 'service' that rate and returns the average rating
+                myDataService.rate(rate).then(function(avgRating) {
+                    //update the avarage rating with the one we get from the server
+                    myRater.setAvgRating(avgRating);
+                     //we could disable the rater to prevent another rating
+                     //if we dont want the user to be able to change their mind
+                    myRater.disable();
+                    //dont forget to call done
+                    done();
+                }, function(error) {
+                        //handle the error
+                        //dont forget to call done
+                        done();
+                });
 	}});
 ```
 
-Alternativly reference the provided css from the node modules. You can use  your own css too of course.
+Css will be injected at runtime, but you can override the css to get the look you want.
 
-```html
-<!--Add the styling to the head-->
-<link href="node-modules/rater-js/rater-js.css" rel="stylesheet"> 
+```css
+//make the stars red
+.star-rating .star-value {
+        background-color: red !important;
+}
+
+//change the whole image used as the star. Make sure to set starWidth in options if not 18px.
+.star-rating .star-bg{
+        background: url("myStar.svg") !important;
+}
 ```
 
-See <a href="example/index.html">Example</a> for more information.
-
 ## Configuration
@@ -70,7 +94,9 @@
 {
-        element: HtmlElement,
+        element: HtmlElement, //required
         rateCallback: Function,
         max: "Number of stars",
+        starWidth: "Width of the star image in pixels",
         disableText: "Text",
         ratingText: "Text {rating}",
+        isBusyText: "Text", //displayed while user is rating but done not called yet
         readOnly: true/false
@@ -83,9 +109,18 @@ }
 
+```js
+disable(): //Disable the widget
+enable(): //Enable the widget
+setAvgRating(rating:number): //Set the average rating
+getAvgRating(): //Get the average rating
+getMyRating(): //Get the rating the user submitted
+setMyRating(rating:number): //Set the rating the user submitted
 ```
-disable: Disable the widget
-enable: Enable the widget
-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
-```
+
+
+[RaterJs]:https://fredolss.github.io/rater-js/example/  "RaterJs"
+[npm-image]: https://img.shields.io/npm/v/rater-js.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/rater-js
+[license-url]: LICENSE.md
+[license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square
+[downloads-image]: http://img.shields.io/npm/dm/rater-js.svg?style=flat-square
+[downloads-url]: https://npmjs.org/package/rater-js

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

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

27565

increased by92.91%

Number of package files

13

increased by30%

Lines of code

438

increased by132.98%

Number of lines in readme file

120

increased by41.18%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes