public RadioButtonQueryItems(string selectorShowAll,
string selectorShowActive, string selectorShowCompleted)
{
Selected = ShowOptions.All;
rbShowAll = (HTMLLabelElement)Document.GetElementById(selectorShowAll);
rbShowActive = (HTMLLabelElement)Document.GetElementById(selectorShowActive);
rbShowCompleted = (HTMLLabelElement)Document.GetElementById(selectorShowCompleted);
rbShowAll.OnClick += new Action <MouseEvent <HTMLLabelElement> >(delegate
{
Selected = ShowOptions.All;
Click?.Invoke(Selected);
});
rbShowActive.OnClick += new Action <MouseEvent <HTMLLabelElement> >(delegate
{
Selected = ShowOptions.Active;
Click?.Invoke(Selected);
});
rbShowCompleted.OnClick += new Action <MouseEvent <HTMLLabelElement> >(delegate
{
Selected = ShowOptions.Completed;
Click?.Invoke(Selected);
});
}
public void Render()
{
var labelWelcome = new HTMLLabelElement
{
InnerHTML = "Welcome to Pomodoro!",
Style =
{
FontSize = "32px",
Margin = "10px"
}
};
_textBoxName = new HTMLInputElement
{
Placeholder = "Enter name…",
Value = "PomodoroBridgeClient"
};
_table = new HTMLTableElement();
var buttonGetAll = new HTMLButtonElement
{
InnerHTML = "Get all",
OnClick = ev => RefreshList()
};
var buttonStart = new HTMLButtonElement
{
InnerHTML = "Start",
OnClick = ev =>
{
_api.Start(_textBoxName.Value);
RefreshList();
}
};
var buttonStop = new HTMLButtonElement
{
InnerHTML = "Stop",
OnClick = ev =>
{
_api.Stop(_textBoxName.Value);
RefreshList();
}
};
// Add to the document body
var htmlBodyElement = Document.Body;
htmlBodyElement.AppendChild(labelWelcome);
htmlBodyElement.AppendChild(new HTMLBRElement());
htmlBodyElement.AppendChild(_textBoxName);
htmlBodyElement.AppendChild(new HTMLBRElement());
htmlBodyElement.AppendChild(buttonGetAll);
htmlBodyElement.AppendChild(buttonStart);
htmlBodyElement.AppendChild(buttonStop);
htmlBodyElement.AppendChild(new HTMLBRElement());
htmlBodyElement.AppendChild(_table);
}
private HTMLLabelElement Label(string value)
{
var lbl = new HTMLLabelElement();
lbl.InnerHTML = value;
lbl.Style.Margin = "5px";
lbl.Style.FontSize = "18px";
return(lbl);
}
public RadioBasedSingleChoice(string labelOrNull = null, RadioBasedSingleChoiceItemAdder customItemAdder = null)
{
BeforeAddItems = (element, i) => null;
ItemAdder = customItemAdder ?? ((ctx, cntnr, rawItem, itemElem, lblElem, itemNo) => {
cntnr.AppendChild(itemElem);
cntnr.AppendChild(lblElem);
});
_uniqueNumberAsName = UniqueIdGenerator.GenerateAsString();
_container = new HTMLDivElement();
_container.ClassName = GetType().FullNameWithoutGenerics();
if (labelOrNull != null)
{
_genericLabelOrNull = new HTMLLabelElement {
TextContent = labelOrNull
};
_container.AppendChild(_genericLabelOrNull);
}
_logic = new ControlWithValueLogic <Tuple <string, string> >(
(newVal, isUser) => Changed?.Invoke(newVal, isUser),
() => {
var active = _valueToItem.Values.FirstOrDefault(x => x.Checked);
return(active == null ? Tuple.Create("", "") : Tuple.Create(active.Value, _valueToLabel[active.Value]));
},
v => {
var emptying = v == null || string.IsNullOrEmpty(v.Item1);
Logger.Debug(GetType(), "setPhysicalValue emptying?={0} value=({1};{2})",
emptying, v?.Item1, v?.Item2);
if (emptying)
{
foreach (var x in _valueToItem.Values)
{
if (x.Checked)
{
x.Checked = false;
break;
}
}
return;
}
_valueToItem[v.Item1].Checked = true;
},
() => _valueToItem.Any() && !_valueToItem.First().Value.Disabled,
v => _valueToItem.Values.ForEach(x => _valueToItem.First().Value.Disabled = !v),
() => _container.ClassList.Contains(Magics.CssClassIsValidating),
v => _container.AddOrRemoveClass(v, Magics.CssClassIsValidating)
);
_logic.ValueToString = x => x == null ? "<Tuple null>" : $"<Tuple fst={x.Item1} snd={x.Item2}>";
}
public CheckBox(string text = string.Empty)
{
InnerElement = CheckBox(_("tss-checkbox"));
_checkSpan = Span(_("tss-checkbox-mark"));
_label = Label(_("tss-checkbox-container", text: text), InnerElement, _checkSpan);
AttachClick();
AttachChange();
AttachFocus();
AttachBlur();
}
static HTMLDivElement MakeImageLabel(string ID, string size)
{
HTMLLabelElement _a = new HTMLLabelElement();
_a.TextContent = ID.Replace('-', ' ') + " (" + size + ")";
_a.Id = ID + "-LBL";
HTMLDivElement _div = new HTMLDivElement();
_div.AppendChild(_a);
return(_div);
}
private void Render(HTMLElement root)
{
// Create HTML elements:
var headerDiv = new HTMLDivElement();
_todoDiv = new HTMLDivElement();
root.appendChild(headerDiv);
root.appendChild(_todoDiv);
// Header (to do item creation):
var input = new HTMLInputElement();
var addButton = new HTMLButtonElement
{
innerHTML = "Add",
className = "btn btn-primary",
style = { margin = "10px" },
disabled = true
};
input.onkeyup = e =>
{
if (e?.keyCode == 13)
{
addButton.click();
}
else
{
addButton.disabled = string.IsNullOrEmpty(input.value);
}
return(null);
};
addButton.onclick = e =>
{
AddTodoItem(input.value);
input.value = string.Empty;
input.onkeyup(null);
return(null);
};
_progressLabel = new HTMLLabelElement();
headerDiv.appendChild(input);
headerDiv.appendChild(addButton);
headerDiv.appendChild(new HTMLBRElement());
headerDiv.appendChild(_progressLabel);
headerDiv.appendChild(new HTMLBRElement());
headerDiv.appendChild(new HTMLBRElement());
}
public static Element[] CreateDateTimeField()
{
var label = new HTMLLabelElement
{
HtmlFor = "dateTimeInput",
InnerHTML = "Server Date and Time:"
};
var div = new HTMLDivElement
{
ClassName = "input-group"
};
var spanPrefix = new HTMLSpanElement
{
ClassName = "input-group-addon glyphicon glyphicon-time"
};
var spanSuffix = new HTMLSpanElement
{
ClassName = "input-group-btn"
};
var button = new HTMLButtonElement
{
Type = ButtonType.Button,
ClassName = "btn btn-primary",
InnerHTML = "<span class=\"glyphicon glyphicon-refresh\"></span>",
OnClick = Html5App.UpdateButton_Click
};
var input = new HTMLInputElement
{
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 CheckBox(string text = string.Empty)
{
InnerElement = CheckBox(_("tss-checkbox"));
_checkSpan = Span(_("tss-checkbox-mark"));
_label = Label(_("tss-checkbox-container tss-default-component-margin", text: text), InnerElement, _checkSpan);
AttachClick();
AttachChange();
AttachFocus();
AttachBlur();
InnerElement.onchange = _ =>
{
_observable.Value = InnerElement.@checked;
};
}
public void ProcessRender()
{
if (!HasRendered) // call when added to element
{
return;
}
if (labelElement == null)
{
if (this.Content.parentElement != null)
{
labelElement = new HTMLLabelElement();
labelElement.classList.add("control");
labelElement.style.marginLeft = "16px";
labelElement.style.textIndent = "0";
labelElement.style.left = "3px";
labelElement.htmlFor = this.Content.id;
labelElement.innerHTML = _caption;
if (this.Content.nextElementSibling == null)
{
this.Content.parentElement.appendChild(new HTMLBRElement());
}
else
{
this.Content.parentElement.insertBefore(new HTMLBRElement(), this.Content.nextElementSibling);
}
if (this.Content.nextElementSibling == null)
{
this.Content.parentElement.appendChild(labelElement);
}
else
{
this.Content.parentElement.insertBefore(labelElement, this.Content.nextElementSibling);
}
}
}
else
{
labelElement.innerHTML = _caption;
}
ProcessIsEnabled();
}
public Choice(string text)
{
InnerElement = RadioButton(_("tss-option"));
_radioSpan = Span(_("tss-option-mark"));
_label = Label(_("tss-option-container", text: text), InnerElement, _radioSpan);
AttachClick();
AttachChange();
AttachFocus();
AttachBlur();
onChange += (s, e) =>
{
if (IsSelected)
{
OnSelect?.Invoke(this, this);
}
};
}
private static HTMLDivElement GetCardDiv(GameVue.CardVue card)
{
HTMLDivElement cardDiv = new HTMLDivElement();
cardDiv.Style.Border = "solid";
cardDiv.Style.BorderColor = "black";
cardDiv.Style.BorderWidth = "3px";
cardDiv.Style.Width = "150px";
cardDiv.Style.Height = "200px";
HTMLLabelElement valueLabel = new HTMLLabelElement();
valueLabel.TextContent = card.GetTag("Value").ToString();
cardDiv.AppendChild(valueLabel);
return(cardDiv);
}
public Choice(string text)
{
InnerElement = RadioButton(_("tss-option"));
_radioSpan = Span(_("tss-option-mark"));
_label = Label(_("tss-option-container tss-default-component-margin", text: text), InnerElement, _radioSpan);
AttachClick();
AttachChange();
AttachFocus();
AttachBlur();
Changed += (s, e) =>
{
if (IsSelected)
{
SelectedItem?.Invoke(this);
}
};
}
private void FillEntries(IEnumerable <Api.PomodoroEntry> entries)
{
// clear
foreach (var row in _table.Rows.ToList())
{
_table.DeleteRow(row.RowIndex);
}
var head = _table.CreateTHead();
var headRow = head.InsertRow();
var headCell1 = headRow.InsertCell();
headCell1.AppendChild(new HTMLLabelElement {
InnerHTML = "Name"
});
var headCell2 = headRow.InsertCell();
headCell2.AppendChild(new HTMLLabelElement {
InnerHTML = "Time"
});
var now = DateTime.Now;
foreach (var entry in entries)
{
var labelName = new HTMLLabelElement
{
InnerHTML = entry.Name,
OnClick = mouseEvent => _textBoxName.Value = mouseEvent.CurrentTarget.InnerHTML
};
var elapsed = now - entry.Time;
var time = Api.Humanize(elapsed);
var labelTime = new HTMLLabelElement
{
InnerHTML = time
};
var row = _table.InsertRow();
var cell1 = row.InsertCell();
cell1.AppendChild(labelName);
var cell2 = row.InsertCell();
cell2.AppendChild(labelTime);
}
}
public CheckBox() : base(new HTMLDivElement())
{
var id = checkboxToLabelId++;
var ids = "__check" + id.ToString();
Element.appendChild((checkBox = new HTMLInputElement()
{
type = "checkbox", id = ids
}));
Element.appendChild(text = new HTMLLabelElement()
{
htmlFor = ids
});
checkBox.style.cursor = "pointer";
text.style.cursor = "pointer";
}
static HTMLDivElement MakeImageEnableCheckBox(string id, bool check)
{
HTMLDivElement container = new HTMLDivElement();
container.ClassName = "form-check";
HTMLInputElement chb = new HTMLInputElement();
chb.Type = InputType.Checkbox;
chb.Checked = check;
chb.Id = id + "-CHB";
chb.OnChange = chb_ImageEnable_changed;
chb.ClassName = "form-check-input";
container.AppendChild(chb);
HTMLLabelElement lab = new HTMLLabelElement();
lab.ClassName = "form-check-label";
lab.TextContent = "Enabled";
container.AppendChild(lab);
return(container);
}
public LabeledReadOnlyView(TextType type, string label, string containerType = "div", string elementType = "div", string defaultValue = null)
{
_type = type;
if (_type == TextType.TreatAsPreformatted)
{
_elem.Style.WhiteSpace = WhiteSpace.Pre;
}
_container = DocumentUtil.CreateElementHavingClassName(containerType, GetType().FullName);
_label = new HTMLLabelElement()
{
TextContent = label
};
_elem = new HTMLElement(elementType);
if (defaultValue != null)
{
Value = defaultValue;
}
_container.AppendChild(_label);
_container.AppendChild(_elem);
}
static void AddColorToPage(Theme.ColorField c)
{
var fieldDescription = ColorFlagsDescription.getByID(c.ID);
HTMLDivElement flagDiv = new HTMLDivElement();
flagDiv.Id = c.ID + "-COLDIV";
flagDiv.ClassName = "form-check";
HTMLInputElement chb = new HTMLInputElement();
chb.Style.MarginTop = "7px";
chb.Type = InputType.Checkbox;
chb.Checked = c.IsEnabled;
chb.Id = c.ID + "-COLDIV-CHB";
chb.ClassName = "form-check-input";
flagDiv.AppendChild(chb);
HTMLLabelElement label = new HTMLLabelElement();
label.TextContent = fieldDescription.name;
flagDiv.AppendChild(label);
for (int i = 0; i < c.colors.Length; i++)
{
HTMLButtonElement colorbtn = new HTMLButtonElement();
colorbtn.Id = c.ID + "-COLBTN-" + i.ToString();
colorbtn.Style.Border = "1px solid black";
colorbtn.Style.MarginLeft = "5px";
colorbtn.Style.MarginTop = "-5px";
colorbtn.Style.Width = "20px";
colorbtn.Style.Height = "20px";
Script.Write("var picker = new jscolor(colorbtn);picker.valueElement= null;picker.fromRGB(c.colors[i].R,c.colors[i].G,c.colors[i].B);picker.closable=true;picker.closeText=fieldDescription.ColorAt(i);"); //Js magic
colorbtn.TextContent = "";
flagDiv.AppendChild(colorbtn);
}
ColorsDiv.AppendChild(flagDiv);
}
public Slider(int val = 0, int min = 0, int max = 100, int step = 10)
{
InnerElement = document.createElement("input") as HTMLInputElement;
InnerElement.className = "tss-slider";
InnerElement.value = val.ToString();
InnerElement.min = min.ToString();
InnerElement.max = max.ToString();
InnerElement.step = step.ToString();
InnerElement.type = "range";
_valueSpan = Span(_("m-1", text: val.ToString()));
AttachClick();
AttachChange();
AttachInput();
AttachFocus();
AttachBlur();
if (navigator.userAgent.IndexOf("AppleWebKit") != -1)
{
_fakeDiv = Div(_("tss-slider-fake-progress"));
double percent = ((double)(val - min) / (double)(max - min)) * 100.0;
_fakeDiv.style.width = $"{percent.ToString("0.##")}%";
onInput += (e, s) =>
{
percent = ((double)(Value - Min) / (double)(Max - Min)) * 100.0;
_fakeDiv.style.width = $"{percent.ToString("0.##")}%";
};
_outerLabel = Label(_("tss-slider-container"), InnerElement, Div(_("tss-slider-fake-background")), _fakeDiv);
InnerElement.classList.add("tss-fake");
}
else
{
_outerLabel = Label(_("tss-slider-container"), InnerElement);
}
_outerDiv = Div(_("tss-slider-div"), _outerLabel);
}
/// <summary>
/// Original sources: http://jsfiddle.net/wout/ncb3w5Lv/1/?utm_source=website&utm_medium=embed&utm_campaign=ncb3w5Lv
/// </summary>
private static void RenderPongGame()
{
if (_rootDiv != null)
{
_content.removeChild(_rootDiv);
}
// Create Div for SVG elements:
var svgDiv = new HTMLDivElement();
new PongGame().Render(svgDiv);
// Add Label:
var label = new HTMLLabelElement();
label.innerHTML = "You are Red. Hit SPACE to start. Use ARROWS to control the pad.";
// Add root Div to the Document
_rootDiv = new HTMLDivElement();
_rootDiv.appendChild(svgDiv);
_rootDiv.appendChild(label);
_content.appendChild(_rootDiv);
}
public Label(IComponent component)
{
_label = Label(_("tss-fontsize-small tss-fontweight-semibold"), component.Render());
_content = Div(_());
InnerElement = Div(_("tss-label"), _label, _content);
}
public Label(string text = string.Empty)
{
_label = Label(_("tss-fontsize-small tss-fontweight-semibold", text: text));
_content = Div(_());
InnerElement = Div(_("tss-label"), _label, _content);
}
//show the default jquery ui demo
private static void ShowDemo()
{
HTMLDivElement contendElement = new HTMLDivElement();
#region accordion
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Accordion"
});
var accordion = new HTMLDivElement();
accordion.AppendChild(new HTMLHeadingElement(HeadingType.H3)
{
TextContent = "Section 1"
});
var accSec1 = new HTMLDivElement();
accSec1.AppendChild(new HTMLParagraphElement()
{
TextContent = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.Nam a nibh.Donec suscipit eros.Nam mi.Proin viverra leo ut odio.Curabitur malesuada.Vestibulum a velit eu ante scelerisque vulputate."
});
accordion.AppendChild(accSec1);
accordion.AppendChild(new HTMLHeadingElement(HeadingType.H3)
{
TextContent = "Section 2"
});
var accSec2 = new HTMLDivElement();
accSec2.AppendChild(
new HTMLParagraphElement()
{
TextContent = "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna."
});
accordion.AppendChild(accSec2);
accordion.AppendChild(new HTMLHeadingElement(HeadingType.H3)
{
TextContent = "Section 3"
});
var accSec3 = new HTMLDivElement();
accSec3.AppendChild(
new HTMLParagraphElement()
{
TextContent = "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui."
});
var accSec3Li = new HTMLUListElement();
accSec3Li.AppendChild(new HTMLLIElement()
{
TextContent = "List item one"
});
accSec3Li.AppendChild(new HTMLLIElement()
{
TextContent = "List item two"
});
accSec3Li.AppendChild(new HTMLLIElement()
{
TextContent = "List item three"
});
accSec3.AppendChild(accSec3Li);
accordion.AppendChild(accSec3);
accordion.AppendChild(new HTMLHeadingElement(HeadingType.H3)
{
TextContent = "Section 4"
});
var accSec4 = new HTMLDivElement();
accSec4.AppendChild(
new HTMLParagraphElement()
{
TextContent = "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est."
});
accSec4.AppendChild(
new HTMLParagraphElement()
{
TextContent = "Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
});
accordion.AppendChild(accSec4);
accordion.Accordion(new AccordionParameter()
{
HeightStyle = Bridge.jQueryUI.HeightStyles.Content
});
contendElement.AppendChild(accordion);
}
#endregion
#region autocomplete
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Autocomplete"
});
var autocmpl = new HTMLInputElement();
autocmpl.Autocomplete(new AutocompleteParameter()
{
Source = new AutocompleteSource[]
{
new AutocompleteSource("ActionScript"),
new AutocompleteSource("AppleScript"),
new AutocompleteSource("Asp"),
new AutocompleteSource("BASIC"),
new AutocompleteSource("C"),
new AutocompleteSource("C#"),
new AutocompleteSource("C++"),
new AutocompleteSource("Clojure"),
new AutocompleteSource("COBOL"),
new AutocompleteSource("ColdFusion"),
new AutocompleteSource("Erlang"),
new AutocompleteSource("Fortran"),
new AutocompleteSource("Groovy"),
new AutocompleteSource("Haskell"),
new AutocompleteSource("Java"),
new AutocompleteSource("JavaScript"),
new AutocompleteSource("Lisp"),
new AutocompleteSource("Perl"),
new AutocompleteSource("PHP"),
new AutocompleteSource("Python"),
new AutocompleteSource("Ruby"),
new AutocompleteSource("Scala"),
new AutocompleteSource("Scheme"),
},
AppendTo = contendElement
});
contendElement.AppendChild(autocmpl);
}
#endregion
#region buttons
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Buttons"
});
var btn = new HTMLButtonElement()
{
TextContent = "Button"
};
btn.Button();
contendElement.AppendChild(btn);
var icnBtn = new HTMLButtonElement()
{
TextContent = "button with icon"
};
icnBtn.Button(new ButtonParameter()
{
Icon = "ui-icon-gear", ShowLabel = false
});
contendElement.AppendChild(icnBtn);
}
#endregion
#region checkboxradio
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Checkboxes"
});
var outerFieldset = new HTMLFieldSetElement();
outerFieldset.AppendChild(new HTMLLabelElement()
{
TextContent = "Hotel Ratings: "
});
HTMLLabelElement lbl1 = new HTMLLabelElement()
{
HtmlFor = "checkbox-1", TextContent = "2 Star"
};
HTMLInputElement cb1 = new HTMLInputElement()
{
Type = InputType.Checkbox, Name = "checkbox-1", Id = "checkbox-1"
};
HTMLLabelElement lbl2 = new HTMLLabelElement()
{
HtmlFor = "checkbox-2", TextContent = "3 Star"
};
HTMLInputElement cb2 = new HTMLInputElement()
{
Type = InputType.Checkbox, Name = "checkbox-2", Id = "checkbox-2"
};
HTMLLabelElement lbl3 = new HTMLLabelElement()
{
HtmlFor = "checkbox-3", TextContent = "4 Star"
};
HTMLInputElement cb3 = new HTMLInputElement()
{
Type = InputType.Checkbox, Name = "checkbox-3", Id = "checkbox-3"
};
HTMLLabelElement lbl4 = new HTMLLabelElement()
{
HtmlFor = "checkbox-4", TextContent = "5 Star"
};
HTMLInputElement cb4 = new HTMLInputElement()
{
Type = InputType.Checkbox, Name = "checkbox-4", Id = "checkbox-4"
};
outerFieldset.AppendChild(lbl1);
outerFieldset.AppendChild(cb1);
outerFieldset.AppendChild(lbl2);
outerFieldset.AppendChild(cb2);
outerFieldset.AppendChild(lbl3);
outerFieldset.AppendChild(cb3);
outerFieldset.AppendChild(lbl4);
outerFieldset.AppendChild(cb4);
cb1.Checkboxradio();
cb2.Checkboxradio();
cb3.Checkboxradio();
cb4.Checkboxradio();
contendElement.AppendChild(outerFieldset);
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Radio"
});
var outerFieldset2 = new HTMLFieldSetElement();
outerFieldset2.AppendChild(new HTMLLabelElement()
{
TextContent = "Select a Location: "
});
HTMLLabelElement rlbl1 = new HTMLLabelElement()
{
HtmlFor = "radio-1", TextContent = "New York"
};
HTMLInputElement rd1 = new HTMLInputElement()
{
Type = InputType.Radio, Name = "radio-1", Id = "radio-1"
};
HTMLLabelElement rlbl2 = new HTMLLabelElement()
{
HtmlFor = "radio-2", TextContent = "Paris"
};
HTMLInputElement rd2 = new HTMLInputElement()
{
Type = InputType.Radio, Name = "radio-1", Id = "radio-2"
};
HTMLLabelElement rlbl3 = new HTMLLabelElement()
{
HtmlFor = "radio-3", TextContent = "London"
};
HTMLInputElement rd3 = new HTMLInputElement()
{
Type = InputType.Radio, Name = "radio-1", Id = "radio-3"
};
outerFieldset2.AppendChild(rlbl1);
outerFieldset2.AppendChild(rd1);
outerFieldset2.AppendChild(rlbl2);
outerFieldset2.AppendChild(rd2);
outerFieldset2.AppendChild(rlbl3);
outerFieldset2.AppendChild(rd3);
rd1.Checkboxradio();
rd2.Checkboxradio();
rd3.Checkboxradio();
contendElement.AppendChild(outerFieldset2);
}
#endregion
#region tabs
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Tabs"
});
var tabsdiv = new HTMLDivElement()
{
Id = "tabs"
};
var tabList = new HTMLUListElement();
tabList.AppendChild(new HTMLLIElement().AppendChild(new HTMLAnchorElement()
{
Href = "#tabs-1", TextContent = "Nunc tincidunt"
}).ParentElement);
tabList.AppendChild(new HTMLLIElement().AppendChild(new HTMLAnchorElement()
{
Href = "#tabs-2", TextContent = "Proin dolor"
}).ParentElement);
tabList.AppendChild(new HTMLLIElement().AppendChild(new HTMLAnchorElement()
{
Href = "#tabs-3", TextContent = "Aenean lacinia"
}).ParentElement);
tabsdiv.AppendChild(tabList);
tabsdiv.AppendChild(new HTMLDivElement()
{
Id = "tabs-1"
}.AppendChild(new HTMLParagraphElement()
{
TextContent = "Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus."
}).ParentElement);
tabsdiv.AppendChild(new HTMLDivElement()
{
Id = "tabs-2"
}.AppendChild(new HTMLParagraphElement()
{
TextContent = "Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus."
}).ParentElement);
tabsdiv.AppendChild(new HTMLDivElement()
{
Id = "tabs-3"
}.AppendChild(new HTMLParagraphElement()
{
TextContent = "Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus."
}).ParentElement.AppendChild(new HTMLParagraphElement()
{
TextContent = "Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit."
}).ParentElement);
tabsdiv.Tabs();
contendElement.AppendChild(tabsdiv);
}
#endregion
#region dialog
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Dialog"
});
var btnNrm = new HTMLButtonElement()
{
TextContent = "Dialog"
};
var btnMdl = new HTMLButtonElement()
{
TextContent = "Modal Dialog"
};
btnNrm.Button(new ButtonParameter()
{
Icon = "ui-icon-newwin"
});
btnMdl.Button(new ButtonParameter()
{
Icon = "ui-icon-newwin"
});
btnNrm.OnClick += (ev) =>
{
(new HTMLDivElement()
{
TextContent = "Hello I am an dialog"
}).Dialog(new DialogParameter()
{
Title = "Dialog"
});
};
btnMdl.OnClick += (ev) =>
{
var dialogDiv = new HTMLDivElement()
{
TextContent = "I am a modal dialog"
};
dialogDiv.Dialog(new DialogParameter()
{
Title = "Modal Dialog",
Modal = true,
Buttons = new DialogButton[]
{
new DialogButton()
{
Click = () =>
{
dialogDiv.DialogClose();
},
Text = "OK"
},
new DialogButton()
{
Click = () =>
{
dialogDiv.DialogClose();
},
Text = "Cancel"
}
}
});
};
contendElement.AppendChild(btnNrm);
contendElement.AppendChild(btnMdl);
}
#endregion
#region slider
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Slider"
});
var slider = new HTMLDivElement();
slider.Slider();
contendElement.AppendChild(slider);
var val = new HTMLParagraphElement()
{
TextContent = "Value"
};
contendElement.AppendChild(val);
slider.SliderSlide(new System.Action <Bridge.jQueryUI.JqueryEvents, SliderEvent>((ev, ui) =>
{
val.TextContent = "Value: " + ui.Value;
}));
}
#endregion
#region datepicker
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Datepicker"
});
var inp = new HTMLInputElement();
inp.Datepicker();
contendElement.AppendChild(inp);
}
#endregion
#region progressbar
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Progressbar"
});
var div = new HTMLDivElement();
div.Progressbar(new ProgressbarParamter()
{
Max = 100
});
contendElement.AppendChild(div);
var btn = new HTMLButtonElement()
{
TextContent = "Start",
OnClick = (ev) =>
{
div.ProgressbarValue(0);
System.Threading.Tasks.Task.Run(async() =>
{
while (true)
{
int val = div.ProgressbarValue();
val++;
if (val > 100)
{
return;
}
div.ProgressbarValue(val);
await System.Threading.Tasks.Task.Delay(100);
}
});
}
};
btn.Button();
contendElement.AppendChild(btn);
}
#endregion
#region selectmenu
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Selectmenu"
});
var sel = new HTMLSelectElement();
sel.AppendChild(new HTMLOptionElement()
{
TextContent = "Slower"
});
sel.AppendChild(new HTMLOptionElement()
{
TextContent = "Slow"
});
sel.AppendChild(new HTMLOptionElement()
{
TextContent = "Medium"
});
sel.AppendChild(new HTMLOptionElement()
{
TextContent = "Fast"
});
sel.AppendChild(new HTMLOptionElement()
{
TextContent = "Faster"
});
contendElement.AppendChild(sel);
sel.Selectmenu(new SelectmenuParameter()
{
AppendTo = contendElement
});
}
#endregion
#region menu
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Menu"
});
var menu = new HTMLUListElement();
menu.Style.Width = "150px";
menu.AppendChild(new HTMLLIElement()
{
ClassName = "ui-state-disabled"
}.AppendChild(new HTMLDivElement()
{
TextContent = "Toys (n/a)"
}).ParentNode);
menu.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Books"
}).ParentNode);
menu.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Clothing"
}).ParentNode);
menu.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Electronics"
}).ParentNode
.AppendChild(new HTMLUListElement()
.AppendChild(new HTMLLIElement()
{
ClassName = "ui-state-disabled"
}.AppendChild(new HTMLDivElement()
{
TextContent = "Home Entertainment"
}).ParentNode).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Car Hifi"
}).ParentNode).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Utilities"
}).ParentNode).ParentNode
).ParentNode);
menu.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Movies"
}).ParentNode);
menu.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Music"
}).ParentNode
.AppendChild(new HTMLUListElement()
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Rock"
}).ParentNode
.AppendChild(new HTMLUListElement()
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Alternative"
}).ParentNode).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Classics"
}).ParentNode).ParentNode
).ParentNode
).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Jazz"
}).ParentNode
.AppendChild(new HTMLUListElement()
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Freejazz"
}).ParentNode).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Big Band"
}).ParentNode).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Modern"
}).ParentNode).ParentNode
).ParentNode
).ParentNode
.AppendChild(new HTMLLIElement().AppendChild(new HTMLDivElement()
{
TextContent = "Pop"
}).ParentNode).ParentNode
).ParentNode);
menu.AppendChild(new HTMLLIElement()
{
ClassName = "ui-state-disabled"
}.AppendChild(new HTMLDivElement()
{
TextContent = "Specials (n/a)"
}).ParentNode);
menu.Menu();
contendElement.AppendChild(menu);
}
#endregion
#region tooltip
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Tooltip"
});
var para = new HTMLParagraphElement();
var ttlink = new HTMLAnchorElement()
{
Href = "#", TextContent = "Tooltips", Title = "That's what this widget is"
};
ttlink.Tooltip();
para.AppendChild(ttlink);
para.AppendChild(new Text(" can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip."));
contendElement.AppendChild(para);
}
#endregion
#region errorhigh
{
contendElement.AppendChild(new HTMLHeadingElement(HeadingType.H2)
{
TextContent = "Highlight / Error"
});
var highlight = new HTMLDivElement();
highlight.Highlight("Hey!", " Sample ui-state-highlight style.");
contendElement.AppendChild(highlight);
contendElement.AppendChild(new HTMLBRElement());
var error = new HTMLDivElement();
error.Error("Hey!", "Sample ui-state-error style.");
contendElement.AppendChild(error);
}
#endregion
contendElement.Dialog(new DialogParameter()
{
Buttons = new DialogButton[] {
new DialogButton()
{
Click = () => { contendElement.DialogClose(); },
Text = "Close"
}
},
Height = 600,
Width = 900,
Title = "jQueryUi Demo Elements"
});
}
private HTMLLabelElement Label(string value)
{
var lbl = new HTMLLabelElement();
lbl.InnerHTML = value;
lbl.Style.Margin = "5px";
lbl.Style.FontSize = "18px";
return lbl;
}
static void Main(string[] args)
{
var h = new HTMLLabelElement
{
InnerHTML = "Now Playing: "
};
Action up = () =>
{
Get("now_playing", (data) =>
{
h.InnerHTML = "Now Playing: " + data.FirstChild.ChildNodes[1].TextContent;
Console.WriteLine(data.FirstChild);
});
};
Document.Body.AppendChild(h);
up();
Get("presets", (r) =>
{
int i = 1;
foreach (var child in r.FirstChild.ChildNodes)
{
int j = i;
var name = child.FirstChild.FirstChild.TextContent;
HTMLButtonElement button = new HTMLButtonElement
{
InnerHTML = name,
OnClick = (o) =>
{
Post("key", $"<key state=\"release\" sender=\"Gabbo\">PRESET_{j}</key>", o.Target);
}
};
button.Style.Display = "block";
Document.Body.AppendChild(button);
i++;
}
});
HTMLButtonElement button2 = new HTMLButtonElement
{
InnerHTML = "Power",
OnClick = (o) =>
{
Post("key", $"<key state=\"press\" sender=\"Gabbo\">POWER</key>", o.Target);
}
};
button2.Style.Display = "block";
Document.Body.AppendChild(button2);
HTMLButtonElement button3 = new HTMLButtonElement
{
InnerHTML = "Volume Up",
OnClick = (o) =>
{
Post("key", $"<key state=\"press\" sender=\"Gabbo\">VOLUME_UP</key>", o.Target, () =>
{
Post("key", $"<key state=\"release\" sender=\"Gabbo\">VOLUME_UP</key>", o.Target);
});
}
};
button3.Style.Display = "block";
Document.Body.AppendChild(button3);
HTMLButtonElement button4 = new HTMLButtonElement
{
InnerHTML = "Volume Down",
OnClick = (o) =>
{
Post("key", $"<key state=\"press\" sender=\"Gabbo\">VOLUME_DOWN</key>", o.Target, () =>
{
Post("key", $"<key state=\"release\" sender=\"Gabbo\">VOLUME_DOWN</key>", o.Target);
});
}
};
button4.Style.Display = "block";
Document.Body.AppendChild(button4);
WebSocket Socket = new WebSocket("ws://192.168.0.54:8080", "gabbo");
Socket.OnOpen += (e) => Console.WriteLine("ws open");
Socket.OnClose += (e) => Console.WriteLine("ws close");
Socket.OnMessage += (e2) =>
{
Console.WriteLine("ws message: " + e2.Data);
up();
};
Socket.OnError += (e) => Console.WriteLine("ws error");
}
private static HTMLDivElement DivPlayState()
{
HTMLDivElement playDiv = new HTMLDivElement();
if (Program.gameVue.Zones[0].Cards.Length > 0)
{
HTMLLabelElement PlayerOneScoreLabel = new HTMLLabelElement();
int playerOneScore = Program.gameVue.Players[0].GetRessource("Score");
int playerOneMultiplier = Program.gameVue.Players[0].GetRessource("Multiplier");
PlayerOneScoreLabel.TextContent = string.Format("Player 1 : '{0}', Multiplier : '{1}'", playerOneScore, playerOneMultiplier);
playDiv.AppendChild(PlayerOneScoreLabel);
playDiv.AppendChild(new HTMLParagraphElement());
HTMLLabelElement playerTwoScoreLabel = new HTMLLabelElement();
int playerTwoScore = Program.gameVue.Players[1].GetRessource("Score");
int playerTwoMultiplier = Program.gameVue.Players[1].GetRessource("Multiplier");
playerTwoScoreLabel.TextContent = $"Player 2 : {playerTwoScore}', Multiplier : '{playerTwoMultiplier}'";
playDiv.AppendChild(playerTwoScoreLabel);
if (Program.gameVue.Zones[0].Cards.Length > 0)
{
GameVue.CardVue topCard = Program.gameVue.Zones[0].Cards[0];
HTMLDivElement deckDiv = new HTMLDivElement();
HTMLLabelElement deckTitleLabel = new HTMLLabelElement();
deckTitleLabel.TextContent = "Top deck";
deckDiv.AppendChild(deckTitleLabel);
HTMLDivElement topCardDiv = Program.GetCardDiv(topCard);
deckDiv.AppendChild(topCardDiv);
deckDiv.AppendChild(new HTMLParagraphElement());
deckDiv.AppendChild(new HTMLLabelElement()
{
TextContent = $"'{Program.gameVue.Zones[0].Cards.Length}' Cards left in the deck"
});
playDiv.AppendChild(deckDiv);
}
playDiv.AppendChild(new HTMLDivElement()
{
TextContent = string.Format("Current player {0}", Program.gameVue.currentPlayer + 1)
});
}
else
{
HTMLLabelElement PlayerOneScoreLabel = new HTMLLabelElement();
int playerOneScore = Program.gameVue.Players[0].GetRessource("Score");
PlayerOneScoreLabel.TextContent = string.Format("Player 1 : {0}", playerOneScore);
playDiv.AppendChild(PlayerOneScoreLabel);
playDiv.AppendChild(new HTMLParagraphElement());
HTMLLabelElement playerTwoScoreLabel = new HTMLLabelElement();
int playerTwoScore = Program.gameVue.Players[1].GetRessource("Score");
playerTwoScoreLabel.TextContent = $"Player 2 : {playerTwoScore}'";
playDiv.AppendChild(playerTwoScoreLabel);
playDiv.AppendChild(new HTMLParagraphElement());
string winnerMessage;
if (playerOneScore > playerTwoScore)
{
winnerMessage = "Player 1 Win!";
}
else
{
winnerMessage = "Player 2 Win!";
}
HTMLLabelElement winnerLabel = new HTMLLabelElement
{
TextContent = winnerMessage,
};
playDiv.AppendChild(winnerLabel);
}
return(playDiv);
}
public AutocompleteDropdown(
string label,
TextType textType = TextType.TreatAsText,
int delayMilisec = Magics.AutocompleteDefaultDelay)
{
_cnt.ClassName = GetType().FullNameWithoutGenerics();
var lbl = new HTMLLabelElement {
HtmlFor = _input.Id, TextContent = label
};
_cnt.AppendChild(lbl);
_cnt.AppendChild(_input);
_cnt.AppendChild(_options);
HideOptions();
DocumentUtil.AddMouseDownListener(_cnt, x => {
if (!x.HasHtmlTarget())
{
return;
}
var htmlTarget = x.HtmlTarget();
if (htmlTarget.IsElementOrItsDescendant(_cnt))
{
//clicked inside control (focus stays within logical control) thus do nothing
return;
}
HideOptions();
});
_input.OnFocus += ev => {
if (_ignoreNextFocus)
{
_ignoreNextFocus = false;
return;
}
ShowOptions();
if (!_input.HasFocus())
{
//non user generated (isTrusted == false) events don't invoke default action in Chrome
_ignoreNextFocus = true;
_input.Focus();
}
};
_input.OnKeyDown += ev => {
switch (ev.KeyCode)
{
case Magics.KeyCodeEscape:
if (OptionsVisible)
{
ev.PreventDefault();
ev.StopPropagation();
HideOptions();
}
break;
case Magics.KeyCodeEnter:
case Magics.KeyCodeArrowUp:
case Magics.KeyCodeArrowDown:
ev.PreventDefault();
OnKeyboardEvent(AutocompleteSrcType.KeyDown, ev);
break;
case Magics.KeyCodeBackspace:
OnKeyboardEvent(AutocompleteSrcType.KeyDown, ev); //it is not called onkeypress
break;
case Magics.KeyCodeTab:
HideOptions();
break;
default: break;
}
};
_input.OnKeyPress += ev => {
switch (ev.KeyCode)
{
case Magics.KeyCodeBackspace:
case Magics.KeyCodeEnter:
case Magics.KeyCodeArrowUp:
case Magics.KeyCodeArrowDown:
ev.PreventDefault();
break;
default:
OnKeyboardEvent(AutocompleteSrcType.KeyPressed, ev);
break;
}
};
_textType = textType;
_delayMilisec = delayMilisec;
}
