fredolss / rater-js Goto Github PK
View Code? Open in Web Editor NEWStar rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
Home Page: https://fredolss.github.io/rater-js/
License: MIT License
Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
Home Page: https://fredolss.github.io/rater-js/
License: MIT License
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
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.
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,
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,
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
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:
I managed to do it dummy way by
// 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.
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
The type definitions in the ndex.d.ts file are outdated
setRating
function argument change ratig
to rating
(rating: number, done?: () => any) => any
Not a priority but it causes typescript errors on my end.
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 :)
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
Hi,
Thanks for the clean repo !
It needs requirejs to be used though, would it be possible to implement as a standalone library ?
Cheers
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
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?
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.