Git Product home page Git Product logo

stars-rating's Introduction

Stars rating control with two modes: fixed and mutable.

Mutable mode allows input from the user.

Among other features: colors cusomization and different star symbols.

See demo: stars-rating.meteor.com

In order to render markup with small font size use (or size='lg' for large):

{{> starsRating rating=4.5 size='sm'}}

You also can set exact font size in pixels by:

{{> starsRating rating=4.5 size=10}}

if you want user to iteract with the control and set a rating use:

{{> starsRating id='rating' mutable=true}}

To access saved value, get element by ID and then:

var rating = $('#rating').data('userrating');

For colors customization, add your own CSS class:

{{> starsRating id='rating' class='mystar' mutable=true}}

and follow snippet:

# Changes default color.
.mystar .current-rating {
  color: #color1;
}

# A color that highlights selected stars when user interacts with the control.
.mystar .active {
  color: #color2;
}

It's possible to set a different star symbol.

For example, add Awesome font package and CSS class setting font family:

.awesome {
  font-family: FontAwesome;
}

then configure a star symbol in the template:

{{> starsRating id='rating' star='\\f005' class='awesome' mutable=true}}

You will see rating with Awesome stars.

Tested: IE9+, Firefox35+, Chrome40+

API

There are one event and one method supported via jQuery API.

To subscribe on the star value changes use $('#rating').on('change', ...).

To reset a star do $('#rating').trigger('reset').

stars-rating's People

Contributors

barbatus avatar sarahmattar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

stars-rating's Issues

IE 11 issue

Your package appears to be broken in IE 11.

Edit: seems to be versions 9 and up

Error: no plugin found for stars_rating.less in barbatus:stars-rating; a plugin for *.less was active when it was published but none is now

When you run the command meteor add barbatus installation: stars- rating is installed normally, but when running the meteor it displays the following error below:

=> A patch (Meteor 1.4.0.1) for your current release is available!
Update this project now with 'meteor update --patch'.
Started MongoDB.
Errors prevented startup:

While building for web.browser:
error: no plugin found for stars_rating.less in barbatus:stars-rating; a plugin for *.less was active when it was published but none is now

Your application has errors. Waiting for file change.

Atmosphere.js package no longer working with Meteor 1.10.x

When installing the Stars Rating package via Atmosphere in a new Meteor application, I have gotten a flag for incompatible updates with the newer versions of Blaze templates and jQuery:

 => Errors while adding packages:             
                                              
While selecting package versions:
error: Potentially incompatible change required to top-level dependency: jquery 1.11.11, was 3.0.0.
Constraints on package "jquery":
* [email protected] || 3.0.0 <- blaze 2.3.4 <- blaze-html-templates 1.1.2
* [email protected] || 1.11.4 || 1.11.9 <- barbatus:stars-rating 1.1.1

To allow potentially incompatible changes to top-level dependencies, you must pass --allow-incompatible-update on the command line.

I'm mentoring a course that uses the package in its source code, and I have seen students get different errors with the package and the newest Meteor release - in the case below, the package is installed successfully but it appears that there may be a broken link to the Less dependency, or an incompatibility (the newest version of Less is also 3.0.0).

Screenshot (99)

Pointer cursor present when starsRating's mutable=false

When mutable=false, I would expect that the mouse over cursor should be set to the default cursor.

However, it is currently displaying a pointer cursor giving the user the impression that the rating can be clicked/changed -- when this is not the case.

I've tried creating a css class with cursor: default, but this does not seem to have any effect.

Is this a bug within the package or is there some other way to change the cursor when mutable=false?

Stars disappear if _id starts with a number

Stars disappear from window if _id (Mongo.Collection) in the same div starts with a number.

A sample HTML and a screenshot are given below

Rated {{rate}}

Description of the image

{{>starsRating mutable=true class='js-img-rating' id=_id}}

delete

image

Unable to fetch the value of stars

It looks like i m unable to fetch the value of stars by id or by currentTarget method. i follow the exact code as written in the description.please help.

Input dynamic rating?

I've been trying to figure out if it is possible to do something like this?

{{#each oms}}
    <div class="row">
        <div class="col-xs-6">
            <label for="rating">Rating</label>
            {{> starsRating rating="{{rating}}" id="omRating" class="awesome" size=20 mutable=true}}
         </div>
    </div>
{{/each}}

Performance issue while displaying numerous star rating templates

I've been using the package for a while and through multiple versions of meteor. Thx barbatus !

I have always faced major performance issue while loading numerous (around 100) star rating templates.
I recently update meteor to 1.9 and the latest version of the star rating package. I still have the performance issue.
Anyone else facing similar issues ?

meteor fails to start after adding package

After adding the package via:

meteor add barbatus:stars-rating

Meteor will no longer start due to a missing plugin, described in the error given below:

=> Errors prevented startup:

While building for web.browser:
error: no plugin found for stars_rating.less in barbatus:stars-rating; a plugin for *.less was active when it
was published but none is now

Is there a known work around for this ?

Some of the stars for rating are not showing up.

Hi,

Thanks for the package by the way. I've found it very usefull.

The problem I'm having is that some starts are showing up and others aren't. But, they are still working because if I press in the part that the starts are supposed to appeare it works.
I attache a picture as well.
screen shot 2015-11-22 at 18 23 45

Some records does not show stars

Hi,

I tried the package and it is cool. However, in my tests, the stars are not showed for some records. In my tests, 1) if the _id field in Mongodb is ObjectID(".... ") then it will not show
2) if the _id field in Mongodb is starts with number (for example "23abdc...")

May I know what is the issue? I think the expected behavior of stars should not related to _id field. Thank you for the wonderful package. It is very useful.

can't access userrating via a class, only by id

hi, I'm having no problem accessing the current userrating by id (as per your usage notes) - but can't seem to access the same userrating via a class. In fact, no matter what I try in the click event, I can't seem to access it. But I want to use the star rating for multiple items in a loop so I can't use id!

e.g. {{> starsRating rating=4 size=22 mutable=true id="startest" class="startest"}}

'click .startest': function(event,template) {
$('#starest').data() = works fine
via $(this) = no good
via event.target = no good
via event.currentTarget = no good

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.