/// <summary>
/// Process the text entered in a text input element.
/// Extract a formula and store it as part of the element.
/// Process the formula and display the result in the text element.
/// </summary>
/// <param name="input">Input element of a cell to process</param>
private void ProcessCell(InputElement input)
{
// Ensure that there's a value in the input element that is a formula involving another cell
if (input.Value.Length > 4 && input.Value.StartsWith("="))
{
// Set the input value as a data-formula attribute on the text input element
input.SetAttribute("data-formula", input.Value);
// For this tutorial, we will split the formula on the "+" operation only
string[] items = input.Value.Substring(1).Split("+");
Number result = 0;
// Traverse through each item in the equation
foreach (string item in items)
{
// If the item is not a number, it is assumed to be a formula
if (Number.IsNaN((Number)(object)item))
{
// Get a reference to the cell, parse its value and then add it to our result
result += Number.Parse(((InputElement)Document.GetElementById(item)).Value);
}
else
{
result += Number.Parse(item);
}
}
// Replace the input's formula with the result. We've stored a reference to the formula as part of its data-formula attribute
input.Value = result.ToString();
}
}
protected override Element CreateNode()
{
var contentContainer = Browser.Document.CreateElement("table");
contentContainer.Style.Width = "100%";
contentContainerRow = Browser.Document.CreateElement("tr");
contentContainer.AppendChild(contentContainerRow);
// contentContainer.Style.Height = "100%";
contentNodeCell = Browser.Document.CreateElement("td");
contentNodeCell.Style.Width = "100%";
contentContainerRow.AppendChild(contentNodeCell);
var contentNodeCellDiv = Browser.Document.CreateElement("div");
contentNodeCellDiv.Style.Height = "100%";
contentNodeCellDiv.Style.Width = "100%";
contentNodeCell.AppendChild(contentNodeCellDiv);
var loadingIconCell = Browser.Document.CreateElement("td");
loadingIconCell.AppendChild(loadingIcon.Node);
loadingIconCell.SetAttribute("align", "center");
loadingIconCell.Style.VerticalAlign = "middle";
loadingIconCell.Style.LineHeight = ".1";
loadingIconCell.Style.PaddingRight = "2px";
contentContainerRow.AppendChild(loadingIconCell);
contentNode = Browser.Document.CreateElement("input").As <InputElement>();
contentNode.SetAttribute("type", "text");
contentNode.Style.Border = "0px black solid";
contentNode.Style.Height = "100%";
contentNode.Style.Width = "100%";
contentNode.Style.PaddingLeft = "5px";
contentNode.Style.Outline = "none";
contentNode.AddEventListener("keydown", OnKeyDown);
contentNode.AddEventListener("keypress", OnKeyPress);
contentNode.AddEventListener("blur", OnBlur);
contentNodeCellDiv.AppendChild(contentNode);
overlayContainer = Browser.Document.CreateElement("div");
overlayContainer.Style.Position = "absolute";
overlayContainer.Style.Display = "none";
overlayContainer.AppendChild(overlay.Node);
// This prevents mouse events from forcing an onblur on the input control. Basically,
// we prevent the mousedown from propagating to the input control and so it cannot
// recognize the loss of focus.
overlayContainer.AddEventListener("mousedown", e =>
{
e.StopImmediatePropagation();
e.PreventDefault();
});
overlayContainer.AddEventListener("focus", e => Console.WriteLine("focus"));
var overlayAnchor = Browser.Document.CreateElement("div");
overlayAnchor.Style.Position = "relative";
overlayAnchor.AppendChild(overlayContainer);
var result = Browser.Document.CreateElement("div");
result.Style.Border = "1px solid #999";
result.AppendChild(contentContainer);
result.AppendChild(overlayAnchor);
return(result);
}
