Esempio n. 1
0
        void SetupHtmlMenuBox()
        {
            //==================================================
            this.htmlMenuBox = new HtmlBox(htmlhost, 800, 40);
            htmlMenuBox.SetLocation(30, 0);
            _host.AddChild(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.HtmlDoc;
            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
                        IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc;
                        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
                        IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc;

                        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!
                        IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc;
                        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;
                }
            });
        }