void SetupHtmlMenuBox()
{
//==================================================
this.htmlMenuBox = new HtmlBox(htmlhost, 800, 40);
htmlMenuBox.SetLocation(30, 0);
viewport.AddContent(htmlMenuBox);
string html = @"<html><head></head><body>
<div id='menubox'>
<span id='test_dom1'>click to toggle!</span>
<span id='test_dom2'>test document fragment</span>
<span id='test_dom3'>test showdow dom</span>
</div>
</body></html>";
htmlMenuBox.LoadHtmlString(html);
//set event handlers
var htmldoc = htmlMenuBox.HtmlContainer.WebDocument as IHtmlDocument;
var div_menuBox = htmldoc.getElementById("menubox") as IHtmlElement;
if (div_menuBox == null) return;
//test set innerHTML
div_menuBox.attachEventListener("mousedown", (e) =>
{
var contextE = e.SourceHitElement as IHtmlElement;
switch (contextE.id)
{
case "test_dom1":
{
//test toggle with innerHTML
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
//test set innerHTML
div1.innerHTML = testToggle ?
"<div>11111</div>" :
"<div>22222</div>";
testToggle = !testToggle;
}
}
break;
case "test_dom2":
{
//test toggle with DocumentFragment
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
var docFragment = testHtmlDoc.createDocumentFragment();
if (testToggle)
{
var node1 = docFragment.createElement("div") as IHtmlElement;
node1.appendChild(
docFragment.createTextNode("3333"));//TODO: review this
docFragment.rootNode.appendChild(node1);
}
else
{
var node1 = docFragment.createElement("div") as IHtmlElement;
node1.appendChild(
docFragment.createTextNode("4444"));//TODO: review this
docFragment.rootNode.appendChild(node1);
}
div1.clear();
div1.appendChild(docFragment.rootNode);
testToggle = !testToggle;
}
}
break;
case "test_dom3":
{
//shadow dom!
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
var shadowRoot = testHtmlDoc.createShadowRootElement() as IHtmlElement;
if (testToggle)
{
var node1 = testHtmlDoc.createElement("div") as IHtmlElement;
node1.appendChild(
testHtmlDoc.createTextNode("XXX"));//TODO: review this
//add node1 to shadow root element
shadowRoot.appendChild(node1);
}
else
{
var node1 = testHtmlDoc.createElement("div") as IHtmlElement;
node1.appendChild(
testHtmlDoc.createTextNode("YYY"));//TODO: review this
//add node1 to shadow root element
shadowRoot.appendChild(node1);
}
div1.clear();
div1.appendChild(shadowRoot);
testToggle = !testToggle;
}
}
break;
}
});
}
}