-
Notifications
You must be signed in to change notification settings - Fork 812
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open star formatter tweaking parameters #4500
Labels
Suggested Feature
A suggested feature that is waiting review
Comments
Not considering doc update, just in terms of code, that would mean something like:
maxStars = formatterParams && formatterParams.stars ? formatterParams.stars : 5,
+ activeStarFillColor = formatterParams && formatterParams.activeStarFillColor ? formatterParams.activeStarFillColor : '#FFEA00',
+ activeStarStrokeColor = formatterParams && formatterParams.activeStarStrokeColor ? activeStarStrokeColor : '#C1AB60',
+ inactiveStarFillColor = formatterParams && formatterParams.inactiveStarFillColor ? formatterParams.inactiveStarFillColor : '#D2D2D2',
+ inactiveStarStrokeColor = formatterParams && formatterParams.inactiveStarStrokeColor ? formatterParams.inactiveStarStrokeColor : '#686868',
stars = document.createElement("span"),
star = document.createElementNS('http://www.w3.org/2000/svg', "svg"),
- starActive = '<polygon fill="#FFEA00" stroke="#C1AB60" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>',
- starInactive = '<polygon fill="#D2D2D2" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
+ starActive = `<polygon fill="${activeStarFillColor}" stroke="${activeStarStrokeColor}" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>`,
+ starInactive = `<polygon fill="${inactiveStarFillColor}" stroke="${inactiveStarStrokeColor}" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>`; for(var i=1;i<= maxStars;i++){
var nextStar = star.cloneNode(true);
nextStar.innerHTML = i <= value ? starActive : starInactive;
+ nextStar.setAttribute("class", `star ${i <= value ? 'active' : 'inactive'}`)
stars.appendChild(nextStar);
} element.setAttribute("aria-label", value);
+ element.classList.add("stars"); (Don't know what's new naming rules for such classes, maybe Used as formatter: "star",
formatterParams: {
stars: 10,
activeStarFillColor: '#F00',
activeStarStrokeColor: '#0F0',
inactiveStarFillColor: '#00F',
inactiveStarStrokeColor: '#F0F',
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The star formatter is already working well, and I can still define my own/custom formatter if I want to tweak anything, in that regard, I do not really need anything right now.
That being said, it would be very convenient to open a bit the built-in star formatter to allow tweaking it easily without fully redefining our own (copy/pasting existing one).
I'd basically like to change the colors (fill & stroke, for active/inactive).
I see 2 (non exclusive) possibilities for this, which would be backward compatible and following formatter parameters pattern already available.
class="stars
") to indicate it's a star formatter being used to present data might be niceclass="star active"
orclass="star inactive"
depending on the stateWith 1., it's not invasive at all, not too much opinionated and answer the main need.
With 2., it makes configuration more "local" close to the tabulator configuration.
I can open a pull request for this, but before investing time on that, I'd prefer asking for advice and if anyone follow me on this or not.
For deeper tweaking, I guess it would be more suitable to fully redefine the formatter. I do not expect these parameters to fully control every bits of the stars.
The text was updated successfully, but these errors were encountered: