public Application(IApp page) { __that = this; this.yield = message => { Native.window.alert("hello! " + new { message }); }; //((IHTMLElement)Native.document.body.parentNode).style.borderTop = "1em yellow yellow"; //IStyleSheet.Default["html"].style.borderTop = "1em yellow yellow"; IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; // activate all animations? IStyleSheet.Default["body"].style.transition = "border-left 300ms linear"; IStyleSheet.Default["body"].style.borderLeft = "3em yellow solid"; new IHTMLDiv { innerHTML = @" <style> html { transition: border-top 500ms linear; border-top: 4em solid cyan; } </style>" }.With( async div => { //await Native.window.requestAnimationFrameAsync; // wont work for html? await Task.Delay(100); div.AttachToDocument(); } ); #region proof we can still find our element by id even if on a sub page new IHTMLTextArea { }.AttachTo(Native.document.body.parentNode).With( async area => { area.style.position = IStyle.PositionEnum.absolute; area.style.right = "1em"; area.style.bottom = "1em"; area.style.zIndex = 1000; area.readOnly = true; Action colors = async delegate { for (int i = 0; i < 3; i++) { area.style.backgroundColor = "red"; await Task.Delay(200); area.style.backgroundColor = "yellow"; await Task.Delay(200); } await Native.window.requestAnimationFrameAsync; area.style.transition = "background-color 10000ms linear"; await Native.window.requestAnimationFrameAsync; area.style.backgroundColor = "white"; }; colors(); var st = new Stopwatch(); st.Start(); while (true) { // proof we can still find our element by id even if on a sub page area.value = page.message.innerText + "\n" + st.ToString(); await Task.Delay(500); } } ); #endregion //page.Location = Native.document.location.hash; // #/OtherPage.htm Console.WriteLine(new { Native.document.location.pathname }); #region GoThirdPage Action GoThirdPage = delegate { //IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; //await Task.Delay(300); // Console.WriteLine("pushState"); // Native.window.history.pushState( // null, // null, // //"/thirdpage.htm" // "/third-page" //); Console.WriteLine("replaceState"); Native.window.history.pushState( //"/third-page", new { }, "/third-page", async scope => { // did the server prerender our page? Console.WriteLine("at replaceState"); var xtitle = Native.document.title; // { nodeName = #text } var hidden = (IHTMLElement)Native.document.body.querySelectorAll("hidden-body").FirstOrDefault(); Console.WriteLine("replaceState " + new { hidden }); var layout = default(IThirdPage); if (hidden == null) { hidden = new IHTMLElement("hidden-body"); hidden.style.display = IStyle.DisplayEnum.none; layout = new ThirdPage(); Native.document.title = layout.title.innerText; var page_body = Native.document.body; layout.body.appendChild(hidden); page_body.parentNode.replaceChild(layout.body, page_body); // we can also keep it memory hidden.appendChild(page_body); } else { //{ nodeName = YDOB } var page_ydob = (IElement)hidden.querySelectorAll("ydob").FirstOrDefault(); if (page_ydob != null) { // chrome will skip body. have to repair on the client var page_body = new IHTMLBody(); page_ydob.attributes.ToArray().WithEach(a => { page_ydob.removeAttribute(a.name); page_body.setAttribute(a.name, a.value); }); page_ydob.childNodes.ToArray().WithEach(a => { page_ydob.removeChild(a); page_body.appendChild(a); }); hidden.replaceChild(page_body, page_ydob); } layout = new ThirdPage.FromDocument(); } // ready! // one wait works half time only //await Native.window.requestAnimationFrameAsync; //await Native.window.requestAnimationFrameAsync; //await Task.Delay(11); var xthat = __that; __that = null; var x = new ThirdPageApplication( layout, xthat, "pushState" ); await scope; __that = xthat; Console.WriteLine("restore state!");; Native.document.title = xtitle; //Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body")[0], Native.document.body); Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body").First(), Native.document.body); } ); }; #endregion page.GoThirdPageViaCode.WhenClicked( async button => { GoThirdPage(); } ); page.GoThirdPageViaLocation.WhenClicked( async button => { Native.document.location.href = "/third-page"; } ); //if (Native.document.location.hash.StartsWith("#/")) //{ // Native.window.history.replaceState( // new { foo = 1 }, // "", // Native.document.location.hash.Substring(1) // ); // //Native.window.history.replaceState( // // new { foo = 1 }, // // scope => // // { // // Native.document.body.style.backgroundColor = "yellow"; // // } // //); //} #region /third-page new[] { "ThirdPage.htm", "third-page" }.WithEach( async uri => { await Native.window.requestAnimationFrameAsync; var selector = "a[href='" + uri + "']"; IStyleSheet.Default[selector].style.color = "red"; Native.document.body.querySelectorAll(IHTMLAnchor.HTMLElementEnum.a).WithEach( xx => { var x = (IHTMLAnchor)xx; if (Native.document.location.href + uri != x.href) { return; } //Console.WriteLine(new { a = x.href, uri, Native.document.location.href }); // { a = http://192.168.43.252:13445/ThirdPage.htm, uri = ThirdPage.htm, href = http://192.168.43.252:13445/ } x.onclick += e => { e.preventDefault(); GoThirdPage(); }; } ); if (__that != null) { if (Native.document.location.pathname == "/" + uri) { //Native.window.history.replaceState( // null, // null, // //"/thirdpage.htm" // "/ThirdPage.htm" // //"/third-page" // ); var layout = new ThirdPage.FromDocument(); new ThirdPageApplication(layout, __that, ".ctor"); } } } ); #endregion #region GoSearchPage Action GoSearchPage = delegate { //IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; //await Task.Delay(300); // Console.WriteLine("pushState"); // Native.window.history.pushState( // null, // null, // //"/thirdpage.htm" // "/third-page" //); Console.WriteLine("replaceState"); Native.window.history.pushState( //"/third-page", new { }, "/s", async scope => { // did the server prerender our page? Console.WriteLine("at replaceState"); var xtitle = Native.document.title; // { nodeName = #text } var hidden = (IHTMLElement)Native.document.body.querySelectorAll("hidden-body").FirstOrDefault(); Console.WriteLine("replaceState " + new { hidden }); var layout = default(ISearchPage); if (hidden == null) { hidden = new IHTMLElement("hidden-body"); hidden.style.display = IStyle.DisplayEnum.none; layout = new SearchPage(); Native.document.title = layout.title.innerText; var page_body = Native.document.body; layout.body.appendChild(hidden); page_body.parentNode.replaceChild(layout.body, page_body); // we can also keep it memory hidden.appendChild(page_body); } else { //{ nodeName = YDOB } var page_ydob = (IElement)hidden.querySelectorAll("ydob").FirstOrDefault(); if (page_ydob != null) { // chrome will skip body. have to repair on the client var page_body = new IHTMLBody(); page_ydob.attributes.ToArray().WithEach(a => { page_ydob.removeAttribute(a.name); page_body.setAttribute(a.name, a.value); }); page_ydob.childNodes.ToArray().WithEach(a => { page_ydob.removeChild(a); page_body.appendChild(a); }); hidden.replaceChild(page_body, page_ydob); } layout = new SearchPage.FromDocument(); } // ready! // one wait works half time only //await Native.window.requestAnimationFrameAsync; //await Native.window.requestAnimationFrameAsync; //await Task.Delay(11); var xthat = __that; __that = null; var x = new SearchPageApplication( layout, xthat ); await scope; __that = xthat; Console.WriteLine("restore state!");; Native.document.title = xtitle; //Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body")[0], Native.document.body); Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body").First(), Native.document.body); } ); }; #endregion #region /s new[] { "SearchPage.htm", "s" }.WithEach( async uri => { await Native.window.requestAnimationFrameAsync; var selector = "a[href='" + uri + "']"; IStyleSheet.Default[selector].style.color = "orange"; Native.document.body.querySelectorAll(IHTMLAnchor.HTMLElementEnum.a).WithEach( xx => { var x = (IHTMLAnchor)xx; if (Native.document.location.href + uri != x.href) { return; } x.style.borderBottom = "1px dashed blue"; x.onclick += e => { e.preventDefault(); GoSearchPage(); }; } ); if (__that != null) { if (Native.document.location.pathname == "/" + uri) { var layout = new SearchPage.FromDocument(); new SearchPageApplication(layout, this); } } } ); #endregion }
public Application(IApp page) { __that = this; this.yield = message => { Native.window.alert("hello! " + new { message }); }; //((IHTMLElement)Native.document.body.parentNode).style.borderTop = "1em yellow yellow"; //IStyleSheet.Default["html"].style.borderTop = "1em yellow yellow"; IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; // activate all animations? IStyleSheet.Default["body"].style.transition = "border-left 300ms linear"; IStyleSheet.Default["body"].style.borderLeft = "3em yellow solid"; new IHTMLDiv { innerHTML = @" <style> html { transition: border-top 500ms linear; border-top: 4em solid cyan; } </style>" }.With( async div => { //await Native.window.requestAnimationFrameAsync; // wont work for html? await Task.Delay(100); div.AttachToDocument(); } ); #region proof we can still find our element by id even if on a sub page new IHTMLTextArea { }.AttachTo(Native.document.body.parentNode).With( async area => { area.style.position = IStyle.PositionEnum.absolute; area.style.right = "1em"; area.style.bottom = "1em"; area.style.zIndex = 1000; area.readOnly = true; Action colors = async delegate { for (int i = 0; i < 3; i++) { area.style.backgroundColor = "red"; await Task.Delay(200); area.style.backgroundColor = "yellow"; await Task.Delay(200); } await Native.window.requestAnimationFrameAsync; area.style.transition = "background-color 10000ms linear"; await Native.window.requestAnimationFrameAsync; area.style.backgroundColor = "white"; }; colors(); var st = new Stopwatch(); st.Start(); while (true) { // proof we can still find our element by id even if on a sub page area.value = page.message.innerText + "\n" + st.ToString(); await Task.Delay(500); } } ); #endregion //page.Location = Native.document.location.hash; // #/OtherPage.htm Console.WriteLine(new { Native.document.location.pathname }); #region GoThirdPage Action GoThirdPage = delegate { //IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; //await Task.Delay(300); // Console.WriteLine("pushState"); // Native.window.history.pushState( // null, // null, // //"/thirdpage.htm" // "/third-page" //); Console.WriteLine("replaceState"); Native.window.history.pushState( //"/third-page", new { }, "/third-page", async scope => { // did the server prerender our page? Console.WriteLine("at replaceState"); var xtitle = Native.document.title; // { nodeName = #text } var hidden = (IHTMLElement)Native.document.body.querySelectorAll("hidden-body").FirstOrDefault(); Console.WriteLine("replaceState " + new { hidden }); var layout = default(IThirdPage); if (hidden == null) { hidden = new IHTMLElement("hidden-body"); hidden.style.display = IStyle.DisplayEnum.none; layout = new ThirdPage(); Native.document.title = layout.title.innerText; var page_body = Native.document.body; layout.body.appendChild(hidden); page_body.parentNode.replaceChild(layout.body, page_body); // we can also keep it memory hidden.appendChild(page_body); } else { //{ nodeName = YDOB } var page_ydob = (IElement)hidden.querySelectorAll("ydob").FirstOrDefault(); if (page_ydob != null) { // chrome will skip body. have to repair on the client var page_body = new IHTMLBody(); page_ydob.attributes.ToArray().WithEach(a => { page_ydob.removeAttribute(a.name); page_body.setAttribute(a.name, a.value); }); page_ydob.childNodes.ToArray().WithEach(a => { page_ydob.removeChild(a); page_body.appendChild(a); }); hidden.replaceChild(page_body, page_ydob); } layout = new ThirdPage.FromDocument(); } // ready! // one wait works half time only //await Native.window.requestAnimationFrameAsync; //await Native.window.requestAnimationFrameAsync; //await Task.Delay(11); var xthat = __that; __that = null; var x = new ThirdPageApplication( layout, xthat, "pushState" ); await scope; __that = xthat; Console.WriteLine("restore state!"); ; Native.document.title = xtitle; //Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body")[0], Native.document.body); Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body").First(), Native.document.body); } ); }; #endregion page.GoThirdPageViaCode.WhenClicked( async button => { GoThirdPage(); } ); page.GoThirdPageViaLocation.WhenClicked( async button => { Native.document.location.href = "/third-page"; } ); //if (Native.document.location.hash.StartsWith("#/")) //{ // Native.window.history.replaceState( // new { foo = 1 }, // "", // Native.document.location.hash.Substring(1) // ); // //Native.window.history.replaceState( // // new { foo = 1 }, // // scope => // // { // // Native.document.body.style.backgroundColor = "yellow"; // // } // //); //} #region /third-page new[] { "ThirdPage.htm", "third-page" }.WithEach( async uri => { await Native.window.requestAnimationFrameAsync; var selector = "a[href='" + uri + "']"; IStyleSheet.Default[selector].style.color = "red"; Native.document.body.querySelectorAll(IHTMLAnchor.HTMLElementEnum.a).WithEach( xx => { var x = (IHTMLAnchor)xx; if (Native.document.location.href + uri != x.href) return; //Console.WriteLine(new { a = x.href, uri, Native.document.location.href }); // { a = http://192.168.43.252:13445/ThirdPage.htm, uri = ThirdPage.htm, href = http://192.168.43.252:13445/ } x.onclick += e => { e.preventDefault(); GoThirdPage(); }; } ); if (__that != null) if (Native.document.location.pathname == "/" + uri) { //Native.window.history.replaceState( // null, // null, // //"/thirdpage.htm" // "/ThirdPage.htm" // //"/third-page" // ); var layout = new ThirdPage.FromDocument(); new ThirdPageApplication(layout, __that, ".ctor"); } } ); #endregion #region GoSearchPage Action GoSearchPage = delegate { //IStyleSheet.Default["body"].style.borderLeft = "0em yellow solid"; //await Task.Delay(300); // Console.WriteLine("pushState"); // Native.window.history.pushState( // null, // null, // //"/thirdpage.htm" // "/third-page" //); Console.WriteLine("replaceState"); Native.window.history.pushState( //"/third-page", new { }, "/s", async scope => { // did the server prerender our page? Console.WriteLine("at replaceState"); var xtitle = Native.document.title; // { nodeName = #text } var hidden = (IHTMLElement)Native.document.body.querySelectorAll("hidden-body").FirstOrDefault(); Console.WriteLine("replaceState " + new { hidden }); var layout = default(ISearchPage); if (hidden == null) { hidden = new IHTMLElement("hidden-body"); hidden.style.display = IStyle.DisplayEnum.none; layout = new SearchPage(); Native.document.title = layout.title.innerText; var page_body = Native.document.body; layout.body.appendChild(hidden); page_body.parentNode.replaceChild(layout.body, page_body); // we can also keep it memory hidden.appendChild(page_body); } else { //{ nodeName = YDOB } var page_ydob = (IElement)hidden.querySelectorAll("ydob").FirstOrDefault(); if (page_ydob != null) { // chrome will skip body. have to repair on the client var page_body = new IHTMLBody(); page_ydob.attributes.ToArray().WithEach(a => { page_ydob.removeAttribute(a.name); page_body.setAttribute(a.name, a.value); }); page_ydob.childNodes.ToArray().WithEach(a => { page_ydob.removeChild(a); page_body.appendChild(a); }); hidden.replaceChild(page_body, page_ydob); } layout = new SearchPage.FromDocument(); } // ready! // one wait works half time only //await Native.window.requestAnimationFrameAsync; //await Native.window.requestAnimationFrameAsync; //await Task.Delay(11); var xthat = __that; __that = null; var x = new SearchPageApplication( layout, xthat ); await scope; __that = xthat; Console.WriteLine("restore state!"); ; Native.document.title = xtitle; //Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body")[0], Native.document.body); Native.document.body.parentNode.replaceChild(hidden.querySelectorAll("body").First(), Native.document.body); } ); }; #endregion #region /s new[] { "SearchPage.htm", "s" }.WithEach( async uri => { await Native.window.requestAnimationFrameAsync; var selector = "a[href='" + uri + "']"; IStyleSheet.Default[selector].style.color = "orange"; Native.document.body.querySelectorAll(IHTMLAnchor.HTMLElementEnum.a).WithEach( xx => { var x = (IHTMLAnchor)xx; if (Native.document.location.href + uri != x.href) return; x.style.borderBottom = "1px dashed blue"; x.onclick += e => { e.preventDefault(); GoSearchPage(); }; } ); if (__that != null) if (Native.document.location.pathname == "/" + uri) { var layout = new SearchPage.FromDocument(); new SearchPageApplication(layout, this); } } ); #endregion }