init

KretaWeb/Views/Shared/StepDisplayPartialView.cshtml

@@ -0,0 +1,69 @@
+<div class="stepDisplayContainer" style="width: 100%; height: 50px;">
+    <canvas id="stepDisplay" height="150" width="500" data-activestep="1" data-steps="3" data-radius="20" data-color="#000000" data-activecolor="#444444"></canvas>
+</div>
+
+<script type="text/javascript">
+    var StepDisplayHelper = (function () {
+        var stepDisplayHelper = function () { };
+
+        stepDisplayHelper.Draw = function () {
+            var canvas = document.getElementById('stepDisplay');
+            canvas.style.width = '100%';
+            canvas.style.height = '100%';
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+
+            if (canvas.getContext) {
+                var ctx = canvas.getContext('2d');
+                var Y = canvas.height / 2;
+                var R = parseInt($('#stepDisplay').data("radius"));
+                var w = canvas.width - (3 * R);
+                var X = (2 * R);
+                ctx.beginPath();
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = $('#stepDisplay').data("color");
+                ctx.font = '16px Arial';
+                steps = parseInt($('#stepDisplay').data("steps"));
+                for (var i = 0; i < steps; i++) {
+                    var kozepX = X - (i > 0 ? R : 0);
+
+                    if ((i + 1) === parseInt($('#stepDisplay').data("activestep"))) {
+                        var activeStepCircle = new Path2D();
+                        activeStepCircle.arc(kozepX, Y, R - 1, 0, 2 * Math.PI, false);
+                        ctx.fillStyle = $('#stepDisplay').data("activecolor");
+                        ctx.fill(activeStepCircle);
+                    }
+
+                    var txt = "" + (i + 1);
+                    var measure = ctx.measureText(txt);
+                    ctx.fillStyle = $('#stepDisplay').data("color");
+                    ctx.fillText(txt, kozepX - measure.width / 2, Y + 6, 2 * R);
+
+                    ctx.arc(kozepX, Y, R, 0, 2 * Math.PI, false);
+                    ctx.stroke();
+                    if (i < (steps - 1)) {
+                        X += (w / (steps - 1)) - (2 * R);
+                        ctx.lineTo(X, Y);
+                        ctx.stroke();
+                        X += (2 * R);
+                        ctx.moveTo(X, Y);
+                    }
+                }
+            }
+        }
+
+        stepDisplayHelper.SetProperties = function (model, activestep) {
+            $('#stepDisplay').data({
+                steps: model.Steps,
+                radius: model.Radius,
+                color: model.BaseColor,
+                activecolor: model.SelectedColor,
+                activestep: activestep
+            });
+            $('#stepDisplay').parent('div').css({ width: model.Width, height: model.Height });
+            $('#stepDisplay').closest('.modalHeader').next().css("height", "calc(100% - " + model.Height + ")")
+        }
+
+        return stepDisplayHelper;
+    })();
+</script>