opatry
commented
2 weeks ago Not considering doc update, just in terms of code, that would mean something like:
src/js/modules/Format/defaults/formatters/star.js
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 tabulator-cell-stars and something like that would be more suitable?)
Used as
formatter: "star",
formatterParams: {
stars: 10,
activeStarFillColor: '#F00',
activeStarStrokeColor: '#0F0',
inactiveStarFillColor: '#00F',
inactiveStarStrokeColor: '#F0F',
},
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.