“You can’t have everything. Where would you put it?”
— Steven Wright
Well, I had a few grand ideas for my User Rating Scorecard, but not all ideas are created equal. Some are quite a bit easier to turn into reality than others. Not that any of them were bad ideas — some just turned out to be a little more trouble than they were worth when I sat down and tried to turn the idea into code. I had visions of using Retina Icons and custom images for the rating symbol, but the code that I stole for handling the fractional rating values relied on the content property of the ::before pseudo-element. The value of the content property can only be text; icons, images, or any other HTML is not valid in that context and won’t get resolved. Basically, what I had in mind just wasn’t going to work.
That left me two choices: 1) redesign the HTML and CSS for the graphic to use something other than the content property, or 2) live with the restrictions and try to do what I wanted using unicode characters. I played around with choice #1 for quite a while, but I could never really come up with anything that gave me all of the flexibility that I wanted and still functioned correctly. So, I finally decided to see what was behind door #2. There are a lot of unicode characters. In fact, there are considerably more of those than there are Retina Icons, but not being able to use an image of your own choosing was still quite a bit more limiting than what I was imagining. Sill, it was better than just hard-coded starts, so I started hacking up the code to see if I could make it all work.
In my original version, the 5 stars were just an integral part of the rating CSS file:
.snh-rating::before {
content: '★★★★★';
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
To make that more flexible, I just need to replace the hard-coded stars with a CSS variable:
.snh-rating::before {
content: var(--char-content);
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
This would allow me to accept a new attribute as the unicode character to use and then set the value of that CSS variable to a string of those characters. My original Angular Provider had the template defined as a string, but to accommodate all of my various options, I had to convert that to a function. The first order of business in the function was to initialize all of the default values.
var max = 5;
var symbol = 'star';
var plural = 'stars';
var charCode = '★';
var charColor = '#FFCC00';
var subject = 'item';
var color = ['#F44336','#FF9800','#00BCD4','#2196F3','#4CAF50'];
Without overriding any of these defaults, the new version would produce the same results as the old version. But the whole point of this version was to provide the capability to override these values, so that was the code that had to be added next:
if (attrs.snhMax && parseInt(attrs.snhMax) > 0) {
max = parseInt(attrs.snhMax);
}
if (attrs.snhSymbol) {
symbol = attrs.snhSymbol;
if (attrs.snhPlural) {
plural = attrs.snhPlural;
} else {
plural = symbol + 's';
}
}
if (attrs.snhChar) {
charCode = attrs.snhChar;
}
var content = '';
if (attrs.snhChars) {
content = attrs.snhChars;
} else {
for (var i=0; i<max; i++) {
content += charCode;
}
}
if (attrs.snhCharColor) {
charColor = attrs.snhCharColor;
}
if (attrs.snhSubject) {
subject = attrs.snhSubject;
}
if (attrs.snhBarColors) {
color = JSON.parse(attrs.snhBarColors);
}
The above code is pretty straightforward; if there are attributes present that override the defaults, then the default value is overwritten by the value of the attribute. Once that work has been done, all that is left is to build the template based on the variable values.
var htmlText = '';
htmlText += '<div>\n';
htmlText += ' <div ng-hide="votes > 0">\n';
htmlText += ' This item has not yet been rated.\n';
htmlText += ' </div>\n';
htmlText += ' <div ng-show="votes > 0">\n';
htmlText += ' <div class="snh-rating" style="--rating: {{average}}; --char-content: \'' + content + '\'; --char-color: ' + charColor + ';">';
htmlText += '</div>\n';
htmlText += ' <div style="clear: both;"></div>\n';
htmlText += ' {{average}} average based on {{votes}} reviews.\n';
htmlText += ' <a href="javascript:void(0);" ng-click="c.data.show_breakdown = 1;" ng-hide="c.data.show_breakdown == 1">Show breakdown</a>\n';
htmlText += ' <div ng-show="c.data.show_breakdown == 1" style="background-color: #ffffff; max-width: 500px; padding: 15px;">\n';
for (var x=max; x>0; x--) {
var i = x - 1;
htmlText += ' <div class="snh-rating-row">\n';
htmlText += ' <div class="snh-rating-side">\n';
htmlText += ' <div>' + x + ' ' + (x>1?plural:symbol) + '</div>\n';
htmlText += ' </div>\n';
htmlText += ' <div class="snh-rating-middle">\n';
htmlText += ' <div class="snh-rating-bar-container">\n';
htmlText += ' <div style="--bar-length: {{bar[' + i + ']}};--bar-color: ' + color[i] + ';" class="snh-rating-bar"></div>\n';
htmlText += ' </div>\n';
htmlText += ' </div>\n';
htmlText += ' <div class="snh-rating-side snh-rating-right">\n';
htmlText += ' <div>{{values[' + i + ']}}</div>\n';
htmlText += ' </div>\n';
htmlText += ' </div>\n';
}
htmlText += ' <div style="text-align: center;">\n';
htmlText += ' <a href="javascript:void(0);" ng-click="c.data.show_breakdown = 0;">Hide breakdown</a>\n';
htmlText += ' </div>\n';
htmlText += ' </div>\n';
htmlText += ' </div>\n';
htmlText += '</div>\n';
Now, all we have to do is try it out. Let’s configure a few of thee options to override the defaults and then see how it all comes out. Here is one sample configuration that uses 7 hearts instead of the default 5 stars:
<snh-rating
snh-max="7"
snh-char="♥"
snh-symbol="heart"
snh-char-color="#FF0000"
snh-values="'2,6,11,13,4,77,36'"
snh-bar-colors='["#FFD3D3","#F4C2C2","#FF6961","#FF5C5C","#FF1C00","#FF0800","#FF0000"]'>
</snh-rating>
… and here’s how it looks once everything is rendered:
So, it’s not every single thing that I had imagined, but it is much more flexible than the original. Like most things, it could still be even better, but for now, I’m ready to call it good enough. If you want to play around with it on your own, here is an Update Set.
