Skip to content

Instantly share code, notes, and snippets.

@nizarmah
Last active March 25, 2018 14:55
Show Gist options
  • Save nizarmah/15e4e2d7a78e0a1c4bfa285e010a2119 to your computer and use it in GitHub Desktop.
Save nizarmah/15e4e2d7a78e0a1c4bfa285e010a2119 to your computer and use it in GitHub Desktop.
A Stars Rating widget for FuseTools that requires Google MaterialIcons Font
<!--
FuseTools Stars Rating Widget / UX Class
Nizar Mahmoud https://nizarmah.me/
Don't forget to add this font to your project
<Font File="Assets/Fonts/MaterialIcons-Regular.ttf" ux:Global="MaterialIcons" />
Use freely, just would appreciate
keeping this comment on top to
show me off to other people
-->
<StackPanel ux:Class="StarsRating" Orientation="Horizontal" Rating="0">
<float ux:Property="Rating" />
<float ux:Property="StarSize" />
<string ux:Property="StarColor" />
<JavaScript>
var value = this.Rating.value;
var hstar = false;
if (((value * 2) % 2)) {
hstar = true;
value = Math.floor(value);
}
// full star : &#xE838;
// half star : &#xE839;
// none star : &#xE83A;
var stars = [
{ star: "none" },
{ star: "none" },
{ star: "none" },
{ star: "none" },
{ star: "none" }
];
if (hstar)
stars[value].star = "half";
while ((value--) > 0)
stars[value].star = "full";
module.exports = {
stars: stars
};
</JavaScript>
<Each Items="{stars}">
<Match Value="{star}">
<Case String="full">
<Text Font="MaterialIcons" Value="&#xE838;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
</Case>
<Case String="half">
<Text Font="MaterialIcons" Value="&#xE839;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
</Case>
<Case String="none">
<Text Font="MaterialIcons" Value="&#xE83A;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
</Case>
</Match>
</Each>
</StackPanel>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment