adding Rating controls example

Author: Uldis Zeidurs

README.md

@@ -81,6 +81,9 @@ These samples are supplied directly from the feature teams of Fuse and we welcom
     <td><a href="Samples/Controls/Circular">Circular control</a></td>
 	<td><a href="Samples/Controls/ButtonWithImage">Button with image</a></td>
   </tr>
+  <tr>
+    <td><a href="Samples/RatingComponents">Rating controls</a></td>
+  </tr>
 </table>
 
 ## Misc

Samples/RatingComponents/Assets/star-empty.png

@@ -0,0 +1,27 @@
+<App Background="#fff">
+
+    <JavaScript>
+        var Observable = require("FuseJS/Observable");
+        var staticRating = Observable(2);
+        var slidingRating = Observable(3);
+
+        staticRating.onValueChanged(module, function(x) {
+            console.log("staticRating changed to: " + x);
+        });
+        slidingRating.onValueChanged(module, function(x) {
+            console.log("slidingRating changed to: " + x);
+        });
+
+        module.exports = {
+            staticRating: staticRating,
+            slidingRating, slidingRating
+        };
+    </JavaScript>
+
+    <ClientPanel>
+        <StackPanel Alignment="Center" ItemSpacing="24">
+            <StaticRatingComponent Stars="5" Rating="{staticRating}" />
+            <SlidingRatingComponent Stars="5" Rating="{slidingRating}" />
+        </StackPanel>
+    </ClientPanel>
+</App>

Samples/RatingComponents/Assets/star-full.png

@@ -0,0 +1,4 @@
+# Using `mapTwoWay` to create reusable rating components
+
+This sample shows how to use `Observable.mapTwoWay()` to properly isolate reusable rating components.
+Two different components are implemented - one that records the rating value upon clicking a star, and the other with a `RangeControl` that allows for a swiping gesture to set the rating.

Samples/RatingComponents/Assets/star-half.png

@@ -0,0 +1,11 @@
+{
+  "RootNamespace": "",
+  "Packages": [
+    "Fuse",
+    "FuseJS"
+  ],
+  "Includes": [
+    "*",
+    "Assets/*.png:Bundle"
+  ]
+}

Samples/RatingComponents/Assets/star.png

@@ -0,0 +1,82 @@
+<Panel ux:Class="SlidingRatingComponent" Height="40">
+    <float ux:Property="Rating" />
+    <int ux:Property="Stars" />
+    
+    <JavaScript>
+        var Observable = require("FuseJS/Observable");
+        var progress = Observable(0);
+        var currentRating = Observable(0);
+
+        var total = this.Stars;
+        var rating = this.Rating.mapTwoWay(function(v) {
+            progress.value = v * 20;
+            return v;
+        }, function(v, sv) {
+            return v;
+        });
+
+        var stars = [];
+        for (var i = 0; i < total.value; i++) {
+            stars.push(new Star(i));
+        }
+
+        function Star(id) {
+            this.id = id;
+            this.isActive = Observable(false);
+            this.image = Observable("Assets/star-empty.png");
+        }
+
+        progress.onValueChanged(module, function(x) {
+            var newVal = Math.round((x * 5) / 50) / 2;
+            if (currentRating.value != newVal) currentRating.value = newVal;
+        });
+
+        currentRating.onValueChanged(module, function(x) {
+            rating.value = x;
+        });
+
+        rating.onValueChanged(module, function(x) {
+            var floored = Math.floor(x);
+            var paintHalf = (x - floored) > 0;
+            stars.forEach(function(s) {
+                if (s.id == (floored - 1) && !paintHalf) {
+                    s.image.value = "Assets/star-full.png";
+                    s.isActive.value = true;
+                } else if (s.id == floored && paintHalf) {
+                    s.image.value = "Assets/star-half.png";
+                    s.isActive.value = true;
+                } else if (s.id < floored) {
+                    s.image.value = "Assets/star-full.png";
+                    s.isActive.value = false;
+                } else {
+                    s.image.value = "Assets/star-empty.png";
+                    s.isActive.value = false;
+                }
+            });
+        });
+
+        module.exports = {
+            progress: progress,
+            stars: stars
+        };
+    </JavaScript>
+
+    <RangeControl Value="{progress}" UserStep="10" HitTestMode="LocalBounds">
+        <LinearRangeBehavior />
+    </RangeControl>
+
+    <Panel ux:Class="TheStar">
+        <FileSource ux:Property="Image" />
+        <Scaling ux:Name="starScaling" Factor="1" />
+        <WhileFalse Value="{isActive}">
+            <Change starScaling.Factor="0.86" Duration="0.16" />
+        </WhileFalse>
+        <Image File="{ReadProperty Image}" Color="#FFC107" />
+    </Panel>
+    
+    <StackPanel Orientation="Horizontal">
+        <Each Items="{stars}">
+            <TheStar Image="{image}" />
+        </Each>
+    </StackPanel>
+</Panel>

Samples/RatingComponents/MainView.ux

@@ -0,0 +1,56 @@
+<StackPanel ux:Class="StaticRatingComponent" Height="40" Orientation="Horizontal">
+    <int ux:Property="Rating" />
+    <int ux:Property="Stars" />
+    
+    <JavaScript>
+        var Observable = require("FuseJS/Observable");
+
+        var total = this.Stars;
+        var rating = this.Rating.mapTwoWay(function(v) {
+            return v;
+        }, function(v, sv) {
+            return v;
+        });
+
+        var stars = [];
+        for (var i = 0; i < total.value; i++) {
+            stars.push(new Star(i));
+        }
+
+        function Star(id) {
+            this.id = id;
+            this.isActive = Observable(false);
+        }
+
+        function selectStar(args) {
+            rating.value = args.data.id + 1;
+        }
+
+        rating.onValueChanged(module, function(x) {
+            stars.forEach(function(s) {
+                if (s.id < x) {
+                    s.isActive.value = true;
+                } else {
+                    s.isActive.value = false;
+                }
+            });
+        });
+
+        module.exports = {
+            stars: stars,
+            selectStar: selectStar
+        };
+    </JavaScript>
+
+    <Each Items="{stars}">
+        <Panel HitTestMode="LocalBounds">
+            <Clicked>
+                <Callback Handler="{selectStar}" />
+            </Clicked>
+            <WhileTrue Value="{isActive}">
+                <Change theStar.Color="#FFC107" Duration="0.16" />
+            </WhileTrue>
+            <Image ux:Name="theStar" File="Assets/star.png" Color="#9E9E9E" />
+        </Panel>
+    </Each>
+</StackPanel>