askmethat-rating v0.4.2

askmethat-rating

develop:

master:

package information:

Synopsis

This plugins was made to allow user to create any rating with any font ( like Font-Awesome or Glyphicons).

Current implementation

The plugin is in development, this is a beta version. You can use this plugin without any plugin, it's fully generated in JavaScript.

Currently the plugin have implemented :

1. Font render as a horizontal list
2. Click and Hover listener
3. Option to customize rating fonts
4. Static method to get value of specific rating

Motivation

This result that for a personal project, I need to have rating that not displayed as stars. Some fonts of Font awesome answered my needs, but I did not find any complete plugin using them to display any font as rating.

Installation

From Source Code

For now, you could download the repository and use gulp to generate the JavaScript files.

1. Restore the node package using Yarn

2. Run this npm task for production generation

npm run build:prod

3. The javascript and css is in the folder dist.

When the plugin will be stable, it will be available to download it with npm.

From NPM

npm i askmethat-rating

From Bower

bower install askmethat-rating

TypeScript

My plugin have now is Definition file in the DefinitelyTyped repository

You can install it with this npm command

  npm install -D @types/askmethat-rating

Or this yarn one :

  yarn add -D @types/askmethat-rating

Example

Current options

This is the current available options parameters ( this is the default options).

var options = {
        backgroundColor : "#e5e500", //This is the color shown when a rating is not "active"
        hoverColor: "#ffff66", //This is the color shown when a rating is  "active"
        fontClass: "fa fa-star", //This is the font class you wan to use
        minRating: 1, //This is the minimum rating you want to be active
        maxRating: 5, //this is the maximum of rating you can have,
        readonly: false, // disable all events if is true,
        step : 0, // change the step on mouse over,
        inputName : "AskmethatRating", // name for the generated input
        popover: { //Display a popover if is defined, set rating as readonly
          color: "#e5e500", // color of rating & progress bar
          fontClass: "fa fa-star", // font class for rating in popover
          direction: 1, // direction of popover, top or bottom
          values : [20,20,20,20,20], // values to display in progress, size should be equals to maxRating
        } 
      
      };

Generate the rating

This example show you how to create a rating starting with default options and using as default value minRating

var container = document.getElementById("amtRating");
var amt = new Askmethat.AskmethatRating(container); //if you don't give options to the class, it will use the default ones

If you want to set a custom default value, call the plugin with this additional parameter

var container = document.getElementById("amtRating");
var amt = new Askmethat.AskmethatRating(container, 2); //if you don't give options to the class, it will use the default ones

Get the rating value

This method retrieve the selected rating value.

From the JavaScript object

var container = document.getElementById("amtRating");
var amt = new Askmethat.AskmethatRating(container); //if you don't give options to the class, it will use the default ones
console.log(amt.value)

From the DOM object

You just need to give the identifier or a class to get the value.

console.log(Askmethat.AskmethatRating.value("#amtRating")); 

How it look

5 Rating Stars

Statistique Rating

The popover will display some progress bar that represente the percentage of selected rating value

Contributors

Who can contribute ?

Anyone who want to contribute to the plugin according to MIT License.