/// <summary>
/// Original sources: http://jsfiddle.net/wout/7wL1uv8n/?utm_source=website&utm_medium=embed&utm_campaign=7wL1uv8n
/// </summary>
private static void RenderAnimation()
{
if (_rootDiv != null)
{
_content.removeChild(_rootDiv);
}
// Create Input for text:
var input = new HTMLInputElement
{
type = "text",
value = "Retyped.svg.js -- - ->",
placeholder = "Type text here..."
};
// Create Div for SVG elements:
var svgDiv = new HTMLDivElement();
var draw = svgjs2.Self(svgDiv).viewbox(0, 0, 300, 140);
var text = draw.text(add =>
{
add.tspan(input.value);
});
text
.path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
.animate(1000, "<>")
.plot("M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80")
.loop(null, true);
input.addEventListener("keyup", () => text.tspan(input.value));
// Add root Div to the Document
_rootDiv = new HTMLDivElement();
_rootDiv.appendChild(input);
_rootDiv.appendChild(svgDiv);
_content.appendChild(_rootDiv);
}
private void RenderItem(TodoItem item)
{
var itemDiv = new HTMLDivElement();
// Create a CheckBox
var checkBox = new HTMLInputElement
{
type = "checkbox",
style = { margin = "10px" }
};
checkBox.addEventListener("click", e =>
{
// Set the item as Completed:
item.Completed = checkBox.@checked;
});
var button = new HTMLButtonElement
{
innerHTML = "del",
onclick = e =>
{
// Remove the item and the controls:
_todoDiv.removeChild(itemDiv);
_todos.remove(item);
return(null);
}
};
itemDiv.appendChild(button);
itemDiv.appendChild(checkBox);
itemDiv.appendChild(new HTMLLabelElement {
innerHTML = item.Task
});
itemDiv.appendChild(new HTMLBRElement());
_todoDiv.appendChild(itemDiv);
}
