Star rating

overview/ui/main.reel/main.css

@@ -102,4 +102,13 @@ td:nth-child(5) { background: hsl(0,0%,24%); }
 
 .digit-Video {
     margin: auto;
-}
+}
+
+.StarRating-cell {
+    width: 70%;
+    margin: auto;
+}
+
+.StarRating {
+    color: cornflowerblue;
+}

overview/ui/main.reel/main.html

@@ -204,6 +204,15 @@ <h2>Basic components</h2>
                     <td data-montage-skin="dark"><div data-montage-id="video-4"></div></td>
                 </tr>
 
+
+                <tr>
+                    <td><a href="https://github.com/montagejs/digit/tree/master/ui/star-rating.reel">Star-Rating</a></td>
+                    <td><div class="StarRating-cell"><div data-montage-id="starRating-1"></div></div></td>
+                    <td><div class="StarRating-cell" data-montage-skin="wireframe"><div data-montage-id="starRating-2"></div></div></td>
+                    <td><div class="StarRating-cell" data-montage-skin="light"><div data-montage-id="starRating-3"></div></div></td>
+                    <td><div class="StarRating-cell" data-montage-skin="dark"><div data-montage-id="starRating-4"></div></div></td>
+                </tr>
+
             </tbody>
         </table>
 

overview/ui/main.reel/main.json

@@ -118,5 +118,11 @@
     "bigListContent3": { "prototype": "ui/text.reel",      "properties": { "element": {"#": "bigListContent-3"} }, "bindings": { "value": {"<-": "@bigList3:iteration.object"}} },
     "bigList4":        { "prototype": "ui/big-list.reel",  "properties": { "element": {"#": "bigList-4"}, "content": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30] } },
     "bigListItem4":    { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "bigListItem-4"} } },
-    "bigListContent4": { "prototype": "ui/text.reel",      "properties": { "element": {"#": "bigListContent-4"} }, "bindings": { "value": {"<-": "@bigList4:iteration.object"}} }
+    "bigListContent4": { "prototype": "ui/text.reel",      "properties": { "element": {"#": "bigListContent-4"} }, "bindings": { "value": {"<-": "@bigList4:iteration.object"}} },
+
+    "starRating-1": { "prototype": "ui/star-rating.reel", "properties": { "element": {"#": "starRating-1"}}},
+    "starRating-2": { "prototype": "ui/star-rating.reel", "properties": { "element": {"#": "starRating-2"}}},
+    "starRating-3": { "prototype": "ui/star-rating.reel", "properties": { "element": {"#": "starRating-3"}}},
+    "starRating-4": { "prototype": "ui/star-rating.reel", "properties": { "element": {"#": "starRating-4"}}}
+
 }

ui/star-rating.reel/star-rating.css

@@ -0,0 +1,65 @@
+.StarRating {
+    display: flex;
+    display: -webkit-flex;
+    width: 100%;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: none;
+}
+
+.StarRating:hover {
+    cursor: pointer;
+}
+
+.StarRating-items {
+    display: flex;
+    display: -webkit-flex;
+    flex: 1;
+    -webkit-flex: 1;
+    flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.StarRating-item {
+    display: flex;
+    display: -webkit-flex;
+    flex: 1;
+    -webkit-flex: 1;
+}
+
+
+/* Wireframe ---------------------------------------------------------- */
+
+[data-montage-skin="wireframe"] .StarRating .LinearGradient-firstStop {
+    stop-color: hsla(0, 0%, 30%, 0.7);
+}
+
+
+[data-montage-skin="wireframe"] .StarRating .BarRatingItem-svg {
+    stroke: hsla(0, 0%, 30%, 0.8);
+}
+
+
+/* Light ---------------------------------------------------------- */
+
+[data-montage-skin="light"] .StarRating .LinearGradient-firstStop {
+    stop-color: hsla(0,0%,0%,.7);
+}
+
+[data-montage-skin="light"] .StarRating .BarRatingItem-svg {
+    stroke: hsla(0,0%,0%,.8);
+}
+
+/* Dark ---------------------------------------------------------- */
+
+[data-montage-skin="dark"] .StarRating .LinearGradient-firstStop {
+    stop-color: hsl(0,0%,85%);
+}
+
+[data-montage-skin="dark"] .StarRating .BarRatingItem-svg {
+    stroke: hsl(0,0%,90%);
+}

ui/star-rating.reel/star-rating.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="star-rating.css">
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "properties": {
+                "element": {"#": "owner"},
+                "_ratingBarItems": {"@": "ratingBarItems"}
+            }
+        },
+
+        "ratingBarItems": {
+            "prototype": "montage/ui/repetition.reel",
+            "properties": {
+                "element": {"#": "ratingBarItems"}
+            },
+            "bindings": {
+                "content": {"<-": "@owner.starCount.range()"}
+            }
+        },
+
+        "ratingBarItem": {
+            "prototype": "montage/ui/rating-bar.reel/rating-bar-item.reel",
+            "properties": {
+                "element": { "#": "ratingBarItem" }
+            },
+            "bindings": {
+                "index": {"<-": "@ratingBarItems:iteration.object"}
+            }
+        }
+
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="owner" class="StarRating">
+        <div data-montage-id="ratingBarItems" class="StarRating-items RatingBar-items">
+            <div data-montage-id="ratingBarItem" class="StarRating-item RatingBar-item">
+                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 62" preserveAspectRatio="xMidYMid meet">
+                    <path d="M 32 0 L 39.5 22 L 62.5 22 L 44 36 L 51 58 L 32 44.8 L 13 58 L 20 36 L 1.5 22 L 24.5 21.5 Z"></path>
+                </svg>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

ui/star-rating.reel/star-rating.js

@@ -0,0 +1,30 @@
+/**
+ * @module ui/star-rating.reel
+ * @requires montage/ui/component
+ */
+var RatingBar = require("montage/ui/rating-bar.reel").RatingBar;
+
+/**
+ * @class StarRating
+ * @extends RatingBar
+ */
+exports.StarRating = RatingBar.specialize(/** @lends StarRating# */ {
+
+
+    /**
+     * The number of stars.
+     *
+     * @type {number}
+     * @default 5
+     */
+    starCount: {
+        set: function(starCount) {
+            this.itemCount = starCount;
+        },
+        get: function() {
+            return this._itemCount;
+        }
+    }
+
+
+});