fredolss / rater-js Goto Github PK

Hi, I think it could be a good idea to pass an entire class as element (using document.querySelectorAll('.class') for example).

What do you think?

Best,
Dario

How do I reset the rater after a user has rated something once?

Do I call dispose() and then reinitialize the rater object? Or can I disable and then enable it using disable() and enable()? Or do I just set the rating back to 0 with setRating()?

Is it possible to have some margin between stars?

Currently it seems there is no way to get the original HTML element used for the rater from the this object in the rateCallback() function

Hello,

Is it possible to include ES Modules support?

That way, we could just import { foo } from 'rater-js' the widget in our apps :)

Cheers

Hi, is it possible to add support for rtl languages?

Best,
Dario

Last question I believe :)

Is it possible to make the rendering of the decimal rating vertically instead of the regular horizontally?

I'm asking because the icon I'm using is a menstrual cup and it would be cool if you could actually think of the decimals as a way of "filling the cup" if you know what I mean.

If you're busy, you could point me to the right section in the code, give me some pointers and I can try to create a pull request.

Hi @fredolss

Got another question - Just wondering about the average rating. Saw that other issue btw talking about this.

What I'm wondering is:

Does the widget have support for decimal rating in the actual rendering of the SVG icon?

Here is an example of what I'm talking about:

https://imgur.com/kUd2Wsy

Hello! thanks for your repo, works good.

Im trying to manage multiple ratings on the same page so I changed the id for a class but I'm struggling to make it work. Stars are being used ok on the first element, thats all.

Thanks in advance

Hello,
is it possible to rate an item with decimal precision?

A new configuration proprerty, something like "step" or similiar will be awesome, e.g.

step: 0.1 // 0.1 deciamal precision
step: 0.5 // half int precision

Apologize for my English :)

Has rater-js been optimized/tested for touch/smart devices?

Hello, I was really thrilled with your plugin, and want thank you for your work. On my side, I would like to ask you add a new feature, let's name that prop "resetOnHover". Some details:

• When user hover stars, we highlight selected stars;
• When user clicks, we apply setRating() method;
• When user hovers again on same stars, we START highlighting selected stars
• If user did NO click and did blur from stars, we show PREVIOUS rating;
• If user hovers and clicks, we apply setRating() method

I managed to do it dummy way by

1. function onStarClick(e)
   I commented

// if (isRating === true) {
// return;
// }

then
2. function onMouseMove(e)
// if (disabled === true || isRating === true) {
// return;
// }

And it worked as I wanted, but I suppose that feature will be required. Thanks.

I know that surely you have more important stuff to do, but possibility to change icon's color would be a really nice function.

Hi,
Thanks for the clean repo !
It needs requirejs to be used though, would it be possible to implement as a standalone library ?
Cheers

The type definitions in the ndex.d.ts file are outdated

• Missing the readOnly property
• Typo in the setRating function argument change ratig to rating
• rateCallback should be (rating: number, done?: () => any) => any

Not a priority but it causes typescript errors on my end.

Hello,
Seems like I've some problem with Firefox, see gif attacched

Works fine with Chrome, Edge, IE and Opera

Hi,

First of all, thank you for this incredibly useful widget.

In the project I am working on, users can rate some objects based on several criteria. To do so, they have to click on a button which triggers a pop-up box (see screenshot 1). Everything is working fine on computer, but not on mobile phone. I get the following error (screenshot 2): "Value not set".

If found the culprit which is the following the line:
xCoor = e.changedTouches[0].pageX - e.changedTouches[0].target.offsetLeft;

Actually, e.changedTouches[0].target.offsetLeft is supposed to return the target element's position relative to the document, but it returns something else in my case (due to the pop-up box) and the condition (percent < 101) is never met.

Here a working solution to this edge case:

if (isTouch) {
    var getOffsetLeft = function(elem) {
        var offsetLeft = 0;
        do {
            if (!isNaN(elem.offsetLeft)) {
                offsetLeft += elem.offsetLeft;
            }
        } while (elem = elem.offsetParent);
        return offsetLeft;
    };

    xCoor = e.changedTouches[0].pageX - getOffsetLeft(e.changedTouches[0].target);
}

Could you please make the changes?

Thanks in advance,

Screenshot 1:

Screenshot 2:

Hi, I've this code, inside a rateCallback function:

`

raterJs({

        starSize: starSize,
        step: 1,
        showToolTip: false,
        rating: mediumRating,
        readOnly: readonly,
        element: document.querySelector("#visitor-votes-rater"),

        rateCallback: function rateCallback(rating, done) {

        var rating = rating.toFixed(1);
        var rating = parseFloat(rating);

        var data = {
            action: 'send_visitor_rating',
            rating: rating,
            post_id: CommonData.postid,
            size: starSize,
        };

        var dataToSend = jsObject_to_URLEncoded(data);

        var VVAjaxCall = new Request(CommonData.ajaxurl ,{
            method: 'post',
            headers: new Headers({
                "Content-Type": "application/x-www-form-urlencoded"
            }),
            body: dataToSend
        });

        fetch(VVAjaxCall)

            .then (function(response) {

                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ' +
                        response.status);
                    return;
                }

                response.json().then(function(data) {
                    var rater = document.querySelector("#visitor-votes-rater");

                    rater.setRating(data);
                });


            })

            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });


        done();
    }


});`

Data is a number with the average rating, but seems like the stars set doesn't update the vote.

What am I doing wrong?

Best,
Dario