public static void Test()
{
InputElement input = new InputElement();
input.OnChange += (ev) =>
{
// Tests if ev.CurrentTarget.Value compiles
Console.Log("ev.CurrentTarget.Value: " + ev.CurrentTarget.Value);
// Tests if ev.IsMouseEvent() compiles
Console.Log("IsMouseEvent: " + ev.IsMouseEvent());
};
AnchorElement anchor = new AnchorElement();
anchor.OnClick += (ev) =>
{
// Tests if ev.CurrentTarget.Href compiles
Console.Log("ev.CurrentTarget.Href: " + ev.CurrentTarget.Href);
};
// Test if Document.GetElementById<>() compiles
DivElement div = Document.GetElementById<DivElement>("div1");
// Tests if Element is still a superclass of all the element classes and the following code compiles
Element element;
element = new InputElement();
element = new TextAreaElement();
}
public static void DefineNiceController()
{
AngularJSDemo.hwbApp.Controller<ControllerDataObjectStructure>
("hwcSctl", CtlFunction);
var ctlDiv = new DivElement();
ctlDiv.SetNGController("hwcSctl");
Document.Body.AppendChild(ctlDiv);
var fltFld = new InputElement();
fltFld.SetNGModel("hwcFlt");
ctlDiv.AppendChild(fltFld);
var ordFld = new SelectElement();
ordFld.SetNGModel("hwcOrderBy");
ordFld.Add(new OptionElement() {
Value = "Checkpoint",
InnerHTML = "Alphabetically"
});
ordFld.Add(new OptionElement() {
Value = "id",
InnerHTML = "Series ID"
});
ctlDiv.AppendChild(ordFld);
var rptSpan = new SpanElement();
rptSpan.SetNGRepeat("checkpoint", "checkpoints", fltFld.GetNGModel(),
ordFld.GetNGModel());
rptSpan.InnerHTML = "{{checkpoint.callsign}}[{{checkpoint.id}}] ";
ctlDiv.AppendChild(rptSpan);
}
public static void Main()
{
// A root container for the elements we will use in this example -
// text input and two buttons
var div = new Bridge.Html5.DivElement();
// Create an input element, with Placeholder text
// and KeyPress listener to call Save method after Enter key pressed
var input = new Bridge.Html5.InputElement()
{
Id = "number",
Type = InputType.Text,
Placeholder = "Enter a number to store...",
Style =
{
Margin = "5px"
}
};
input.AddEventListener(EventType.KeyPress, InputKeyPress);
div.AppendChild(input);
// Add a Save button to save entered number into Storage
var buttonSave = new Bridge.Html5.ButtonElement()
{
Id = "save",
InnerHTML = "Save"
};
buttonSave.AddEventListener(EventType.Click, Save);
div.AppendChild(buttonSave);
// Add a Restore button to get saved number and populate
// the text input with its value
var buttonRestore = new Bridge.Html5.ButtonElement()
{
Id = "restore",
InnerHTML = "Restore",
Style =
{
Margin = "5px"
}
};
buttonRestore.AddEventListener(EventType.Click, Restore);
div.AppendChild(buttonRestore);
// Do not forget add the elements on the page
Document.Body.AppendChild(div);
// It is good to get the text element focused
input.Focus();
}
public static void Main()
{
// A root container for the elements we will use in this example -
// text input and two buttons
var div = new Bridge.Html5.DivElement();
// Create an input element, with Placeholder text
// and KeyPress listener to call Save method after Enter key pressed
var input = new Bridge.Html5.InputElement()
{
Id = "number",
Type = InputType.Text,
Placeholder = "Enter a number to store...",
Style =
{
Margin = "5px"
}
};
input.AddEventListener(EventType.KeyPress, InputKeyPress);
div.AppendChild(input);
// Add a Save button to save entered number into Storage
var buttonSave = new Bridge.Html5.ButtonElement()
{
Id = "save",
InnerHTML = "Save"
};
buttonSave.AddEventListener(EventType.Click, Save);
div.AppendChild(buttonSave);
// Add a Restore button to get saved number and populate
// the text input with its value
var buttonRestore = new Bridge.Html5.ButtonElement()
{
Id = "restore",
InnerHTML = "Restore",
Style =
{
Margin = "5px"
}
};
buttonRestore.AddEventListener(EventType.Click, Restore);
div.AppendChild(buttonRestore);
// Do not forget add the elements on the page
Document.Body.AppendChild(div);
// It is good to get the text element focused
input.Focus();
}
public static Element[] CreateDateTimeField()
{
var label = new LabelElement
{
HtmlFor = "dateTimeInput",
InnerHTML = "Server Date and Time:"
};
var div = new DivElement
{
ClassName = "input-group"
};
var spanPrefix = new SpanElement
{
ClassName = "input-group-addon glyphicon glyphicon-time"
};
var spanSuffix = new SpanElement
{
ClassName = "input-group-btn"
};
var button = new ButtonElement
{
Type = ButtonType.Button,
ClassName = "btn btn-primary",
InnerHTML = "<span class=\"glyphicon glyphicon-refresh\"></span>",
OnClick = Html5App.UpdateButton_Click
};
var input = new InputElement
{
Id = "dateTimeInput",
Type = InputType.Text,
ClassName = "form-control",
Placeholder = "Click update...",
ReadOnly = true,
Name = "datetime"
};
spanSuffix.AppendChild(button);
div.AppendChild(spanPrefix);
div.AppendChild(input);
div.AppendChild(spanSuffix);
return new Element[] { label, div };
}
public CanvasContext(CanvasElement canvas, InputElement input)
: base(canvas.Width, canvas.Height)
{
imageCache = new Dictionary<string, ImageElement>();
this.input = input;
input.Type = InputType.Text;
input.Value = "A";
input.OnInput = (e) =>
{
if(input.Value == "")
{
KeyPressed("Back");
}
KeyPressed(input.Value.Substr(Math.Max(0, input.Value.Length - 1), input.Value.Length));
input.Value = "A";
};
context = canvas.GetContext(CanvasTypes.CanvasContext2DType.CanvasRenderingContext2D);
context.FillStyle = "#000000";
context.LineWidth = 2;
context.TextBaseline = CanvasTypes.CanvasTextBaselineAlign.Middle;
double canvasLeft = context.Canvas.GetBoundingClientRect().Left;
double canvasRight = context.Canvas.GetBoundingClientRect().Left;
context.Canvas.AddEventListener(EventType.Click,
(e) =>
{
Click(e.As<MouseEvent>().ClientX + Document.Body.ScrollLeft - (int)canvasLeft,
e.As<MouseEvent>().ClientY + Document.Body.ScrollTop - (int)canvasRight);
if (ContentView.Active == true)
{
input.Focus();
}
});
Window.OnResize = (e) => ResizeContent();
}
public static jQuery CreateFormField(string name, string glyph)
{
Element input;
var placeholder = name + "...";
if (name == "Message")
{
input = new TextAreaElement
{
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
else
{
input = new InputElement
{
Type = InputType.Text,
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
return new jQuery("<div>")
.AddClass("input-group")
.Css("margin-bottom", "10px")
.Append(new SpanElement
{
ClassName = "glyphicon glyphicon-" + glyph + " input-group-addon"
})
.Append(input);
}
public static DivElement CreateFormField(string name, string glyph)
{
var div = new DivElement
{
ClassName = "input-group",
Style =
{
MarginBottom = "10px"
}
};
var span = new SpanElement
{
ClassName = "glyphicon glyphicon-" + glyph + " input-group-addon"
};
Element input;
var placeholder = name + "...";
if (name == "Message")
{
input = new TextAreaElement
{
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
else
{
input = new InputElement
{
Type = InputType.Text,
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
div.AppendChild(span);
div.AppendChild(input);
return div;
}
public static DivElement CreatePanelFooter()
{
var footer = new DivElement
{
ClassName = "panel-footer text-right"
};
var button = new InputElement
{
Type = InputType.Submit,
Value = "Submit",
ClassName = "btn btn-success",
FormAction = Config.SUBMIT_URL,
FormMethod = "POST"
};
footer.AppendChild(button);
return footer;
}
public static Element GetRepeatRegion()
{
var itemsSpan = new SpanElement();
itemsSpan.InnerHTML = "Checkpoint";
var itemsPara = new ParagraphElement();
itemsPara.InnerHTML = "{{checkpoint.callsign}}[{{checkpoint.id}}]";
var itemsLI = new LIElement();
itemsLI.SetNGRepeat("checkpoint", "checkpoints");
itemsLI.AppendChild(itemsSpan);
itemsLI.AppendChild(itemsPara);
var itemsUL = new UListElement();
itemsUL.AppendChild(itemsLI);
var itemsSubSpan = new SpanElement()
{
InnerHTML = "[{{checkpoint.callsign}}.{{checkpoint.id}}] "
};
var itemsSearchBox = new InputElement();
itemsSearchBox.SetNGModel("cpFilter");
var itemsOrderSelector = GetOrderBySelector("cpOrderBy");
itemsSubSpan.SetNGRepeat("checkpoint", "checkpoints",
itemsSearchBox.GetNGModel(), itemsOrderSelector.GetNGModel());
var itemsDiv = new DivElement();
itemsDiv.SetNGController("hwbSctl");
itemsDiv.AppendChild(itemsUL);
itemsDiv.AppendChild(itemsSearchBox);
itemsDiv.AppendChild(itemsOrderSelector);
itemsDiv.AppendChild(itemsSubSpan);
return itemsDiv;
}
public void Initialize()
{
ConsoleLog = Document.GetElementById<DivElement>("consoleLog");
WebSocketSupportImage = Document.GetElementById<ImageElement>("wsSupportImg");
WebSocketSupported = Document.GetElementById<DivElement>("webSocketSupp");
WebSocketNotSupported = Document.GetElementById<DivElement>("noWebSocketSupp");
UseSecureWebSocketInput = Document.GetElementById<InputElement>("secureCb");
UseSecureWebSocketInput.Checked = false;
UseSecureWebSocketInput.OnClick += OnClick_UseSecureWebSocket;
LocationInput = Document.GetElementById<InputElement>("wsUri");
MessageInput = Document.GetElementById<InputElement>("sendMessage");
ConnectButton = Document.GetElementById<ButtonElement>("connect");
ConnectButton.OnClick += OnClick_ConnectButton;
DisconnectButton = Document.GetElementById<ButtonElement>("disconnect");
DisconnectButton.OnClick += OnClick_DisconnectButton;
SendButton = Document.GetElementById<ButtonElement>("send");
SendButton.OnClick += OnClick_SendButton;
ClearLogButton = Document.GetElementById<ButtonElement>("clearLogBut");
ClearLogButton.OnClick += OnClick_ClearLogButton;
Window.OnBeforeUnload += (e) => { if (OnViewShuttingUp != null) { OnViewShuttingUp(this, new EventArgs()); } };
if (OnViewInitialized != null)
{
OnViewInitialized(this, new EventArgs());
}
}
public static jQuery CreateFormField(string name, string glyph)
{
Element input;
var placeholder = name + "...";
if (name == "Message")
{
input = new TextAreaElement
{
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
else
{
input = new InputElement
{
Type = InputType.Text,
Name = name.ToLowerCase(),
Placeholder = placeholder,
Required = true,
ClassName = "form-control"
};
}
return new jQuery("<div>")
.AddClass("input-group")
.Css("margin-bottom", "10px")
.Append(new SpanElement
{
ClassName = "glyphicon glyphicon-" + glyph + " input-group-addon"
})
.Append(new jQuery(input)
.Attr("rel", "tooltip")
.Tooltip(new TooltipOptions
{
Title = "Required Field",
Container = "body",
Placement = PopupPlacement.Right
})
);
}
