69 lines
No EOL
2.9 KiB
Text
69 lines
No EOL
2.9 KiB
Text
<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> |