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
}
