internal static IHTMLIFrame CreateEditor()
{
var edit = new IHTMLIFrame {
src = "about:blank"
};
edit.style.width = "100%";
edit.style.height = "100%";
edit.style.border = "0";
edit.style.margin = "0";
edit.style.padding = "0";
edit.frameBorder = "0";
edit.border = "0";
edit.WhenDocumentReady(
document =>
{
document.WithContent(
new XElement("style", "span { color: red; }"),
new XElement("div",
new XAttribute("style", "margin: 2em;"),
new XElement("h1", "powered by jsc"),
new XElement("span", "hello world")
)
);
document.DesignMode = true;
}
);
return(edit);
}
public static IHTMLIFrame WhenContentReady(this IHTMLIFrame that, Action <IHTMLBody> y)
{
return(that.WhenDocumentReady(
doc =>
{
doc.WhenContentReady(y);
}
));
}
public static void WithContent(this IHTMLIFrame that, Action <IHTMLBody> y)
{
that.WhenDocumentReady(
d =>
{
d.WithContent();
d.WhenContentReady(y);
}
);
}
public static IHTMLIFrame WhenDocumentReady(this IHTMLIFrame that, Action <IHTMLDocument> y)
{
new Timer(
t =>
{
if (that.contentWindow == null)
{
return;
}
if (that.contentWindow.document == null)
{
return;
}
t.Stop();
y(that.contentWindow.document);
}
).StartInterval(15);
return(that);
}
static void InitializeContnt(IDefaultPage page)
{
Action <dynamic> stream =
x =>
{
object time = x.time;
object i = x.i;
Native.document.title = new { time, i }.ToString();
Console.WriteLine(new { time, i }.ToString());
page.Content.innerText = new { time, i }.ToString();
};
dynamic window = Native.window;
window.stream = stream;
var stop = new IHTMLButton("Stop").AttachToDocument();
var iframe = new IHTMLIFrame {
src = "/stream"
}.AttachToDocument();
iframe.Hide();
page.Start.disabled = true;
stop.onclick +=
delegate
{
stop.Orphanize();
page.Start.disabled = false;
iframe.Orphanize();
};
Native.document.body.style.cursor = IStyle.CursorEnum.@default;
}
internal static IHTMLIFrame CreateEditor()
{
var edit = new IHTMLIFrame {
src = "about:blank"
};
edit.style.width = "100%";
edit.style.height = "100%";
edit.style.border = "0";
edit.style.margin = "0";
edit.style.padding = "0";
edit.frameborder = "0";
edit.border = "0";
edit.WhenDocumentReady(
document =>
{
document.WithContent(StockPageDefault.Element);
document.DesignMode = true;
}
);
return(edit);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://stackoverflow.com/questions/6275953/how-to-display-div-over-a-java-applet-in-chrome
new ConsoleForm().With(
f =>
{
f.InitializeConsoleFormWriter();
f.Show();
//var archive = applet.ToHTMLElement().AsXElement().Attribute("archive");
//archive.Value = ("" + Native.Document.location).TakeUntilLastOrEmpty("/") + "/" + archive.Value;
Console.WriteLine("calling applet.InitializeConsoleFormWriter");
applet.InitializeConsoleFormWriter(
Console.Write,
Console.WriteLine
);
Console.WriteLine("you are looking at FormsVirtualConsoleExperiment!!");
applet.AttachAppletToDocument();
var shadow = new IHTMLIFrame {
src = "about:blank", frameBorder = "0", scrolling = "no"
};
shadow.AttachToDocument();
shadow.style.SetLocation(120, 48);
shadow.style.zIndex = 0;
Action Update =
delegate
{
shadow.style.SetLocation(f.Left, f.Top, f.Width, f.Height);
};
f.LocationChanged +=
delegate
{
Update();
};
f.SizeChanged +=
delegate
{
Update();
};
Update();
Native.Window.onresize +=
delegate
{
applet.ToHTMLElement().style.SetSize(
Native.Window.Width,
Native.Window.Height
);
};
}
);
@"Hello world".ToDocumentTitle();
// Send data from JavaScript to the server tier
service.WebMethod2(
@"A string from JavaScript.",
value => value.ToDocumentTitle()
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IDefault page)
{
if (Native.Document.location.hash == "")
{
page.Content.innerText = "this page shall have child frames!";
var a = new IHTMLIFrame
{
allowFullScreen = true
}.AttachToDocument();
a.contentWindow.document.location.replace("#/child1");
var b = new IHTMLIFrame
{
allowFullScreen = true
}.AttachToDocument();
b.contentWindow.document.location.replace("#/child2");
new IHTMLBreak().AttachToDocument();
var i = 3;
new IHTMLButton {
innerText = "new child popup window"
}.WhenClicked(
btn =>
{
var w = Native.window.open(
"#/child" + i,
"_blank",
400,
300,
false
);
w.focus();
i++;
w.onload +=
delegate
{
w.postMessage("hi from " + Native.Document.location.hash);
};
}
).AttachToDocument();
new IHTMLButton {
innerText = "new child tab window"
}.With(
btn =>
{
btn.onclick +=
delegate
{
var w = Native.window.open(
"#/child" + i,
"_blank"
);
i++;
w.onload +=
delegate
{
w.postMessage("hi from " + Native.Document.location.hash);
};
};
}
).AttachToDocument();
new IHTMLBreak().AttachToDocument();
}
else
{
page.Content.innerText = Native.Document.location.hash;
Native.window.opener.With(
parent =>
{
new IHTMLButton {
innerText = "send opener a message"
}.With(
btn =>
{
btn.onclick +=
delegate
{
parent.postMessage("hi from " + Native.Document.location.hash);
};
}
).AttachToDocument();
}
);
Native.window.parent.With(
parent =>
{
// not talking to self
if (parent == Native.window)
{
return;
}
new IHTMLButton {
innerText = "send parent a message"
}.With(
btn =>
{
btn.onclick +=
delegate
{
parent.postMessage("hi from " + Native.Document.location.hash);
};
}
).AttachToDocument();
}
);
new IHTMLButton {
innerText = "fullscreen"
}.With(
btn =>
{
btn.onclick +=
delegate
{
Native.Document.body.requestFullscreen();
};
}
).AttachToDocument();
}
Native.window.onmessage +=
e =>
{
new IHTMLButton {
innerText = e.data + " (click to reply)"
}.With(
btn =>
{
if (Native.Document.location.hash == "")
{
btn.style.color = JSColor.Blue;
}
else
{
btn.style.color = JSColor.Red;
}
btn.onclick +=
delegate
{
btn.Orphanize();
var WhoAmI = Native.Document.location.hash;
if (WhoAmI == "")
{
WhoAmI = "parent";
}
e.source.postMessage("this is a reply from " + WhoAmI);
};
}
).AttachToDocument();
};
@"Hello world".ToDocumentTitle();
// Send data from JavaScript to the server tier
service.WebMethod2(
@"A string from JavaScript.",
value => value.ToDocumentTitle()
);
}
private static void AddSection11(Action <string, IHTMLDiv> AddSection)
{
var ToolbarHeight = "24px";
var Content = new IHTMLDiv().With(
k =>
{
k.style.border = "1px solid gray";
k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative;
k.style.width = "100%";
k.style.height = "20em";
}
);
//global::ScriptCoreLib.Ultra.Components.HTML
// reload the project to make visual studio happy!
new TwentyTenWorkspace().ToBackground(Content.style, true);
var ToolbarContainerBackground = new IHTMLDiv().With(
k =>
{
k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
k.style.left = "0px";
k.style.right = "0px";
k.style.top = "0px";
k.style.height = ToolbarHeight;
k.style.backgroundColor = Color.White;
k.style.Opacity = 0.5;
}
).AttachTo(Content);
var ToolbarContainer = new IHTMLDiv().With(
k =>
{
k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
k.style.left = "0px";
k.style.right = "0px";
k.style.top = "0px";
k.style.height = ToolbarHeight;
}
).AttachTo(Content);
var PreviewContainer = new IHTMLDiv().With(
k =>
{
k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
k.style.left = "0px";
k.style.right = "0px";
k.style.top = ToolbarHeight;
k.style.bottom = "0px";
}
).AttachTo(Content);
var PreviewFrame = new IHTMLIFrame {
src = "about:blank"
};
PreviewFrame.style.width = "100%";
PreviewFrame.style.height = "100%";
PreviewFrame.style.border = "0";
PreviewFrame.style.margin = "0";
PreviewFrame.style.padding = "0";
PreviewFrame.frameBorder = "0";
PreviewFrame.border = "0";
PreviewFrame.AttachTo(PreviewContainer);
PreviewContainer.Hide();
var EditorContainer = new IHTMLDiv().With(
k =>
{
k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
k.style.left = "0px";
k.style.right = "0px";
k.style.top = ToolbarHeight;
k.style.bottom = "0px";
}
).AttachTo(Content);
var EditorFrame = VisualStudioView.CreateEditor().AttachTo(EditorContainer);
PreviewFrame.allowTransparency = true;
EditorFrame.allowTransparency = true;
EditorFrame.WhenContentReady(
body =>
{
body.style.backgroundColor = Color.Transparent;
new IHTMLDiv
{
"Hello world :)"
}.With(
div =>
{
div.style.backgroundColor = Color.White;
div.style.borderColor = Color.Gray;
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.margin = "2em";
div.style.padding = "2em";
}
).AttachTo(body);
}
);
var ToolbarContent = new IHTMLDiv().AttachTo(ToolbarContainer);
ToolbarContent.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative;
Action <IHTMLElement> ApplyToolbarButtonStyle =
k =>
{
k.style.verticalAlign = "top";
k.style.padding = "0";
k.style.margin = "0";
k.style.overflow = ScriptCoreLib.JavaScript.DOM.IStyle.OverflowEnum.hidden;
k.style.SetSize(24, 24);
VisualStudioView.ApplyMouseHoverStyle(k, Color.Transparent);
};
Func <IHTMLImage, IHTMLButton> AddButtonDummy =
(img) =>
{
return(new IHTMLButton {
img.WithinContainer()
}.With(k => ApplyToolbarButtonStyle(k)).AttachTo(ToolbarContent));
};
Func <IHTMLImage, Action, IHTMLButton> AddButtonAction =
(img, command) =>
{
return(AddButtonDummy(img).With(
k =>
{
k.onclick +=
delegate
{
command();
};
}
));
};
Func <IHTMLImage, string, IHTMLButton> AddButton =
(img, command) =>
{
return(AddButtonAction(img, () =>
EditorFrame.contentWindow.document.execCommand(
command, false, null
)
));
};
//AddButtonDummy(new RTA_save());
var SaveContainer = new IHTMLDiv().With(k => ApplyToolbarButtonStyle(k)).AttachTo(ToolbarContent);
SaveContainer.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.inline_block;
//var Save = new InternalSaveActionSprite();
//Save.ToTransparentSprite();
//Save.AttachSpriteTo(SaveContainer);
var s = new { VisualStudioTemplates.VisualCSharpProject };
EditorFrame.WhenContentReady(
body =>
{
var t = (IHTMLTextArea)EditorFrame.contentWindow.document.createElement("textarea");
t.AttachTo(body);
t.value = s.ToString();
}
);
//Save.WhenReady(
// i =>
// {
// i.FileName = "Project1.zip";
// i.Add("Project1.txt", "x");
// i.Add("Project1.csproj", s.VisualCSharpProject);
// }
//);
ToolbarContent.Add(new RTA_separator_horizontal());
var RTAButtons = new Dictionary <string, IHTMLImage>
{
// http://trac.symfony-project.org/browser/plugins/dmCkEditorPlugin/web/js/ckeditor/_source/plugins?rev=27455
{ "Bold", new RTA_bold() },
{ "Underline", new RTA_underline() },
{ "Strikethrough", new RTA_strikethrough() },
{ "Italic", new RTA_italic() },
{ "JustifyLeft", new RTA_justifyleft() },
{ "JustifyCenter", new RTA_justifycenter() },
{ "JustifyRight", new RTA_justifyright() },
{ "JustifyFull", new RTA_justifyfull() },
{ "Indent", new RTA_indent() },
{ "Outdent", new RTA_outdent() },
{ "Superscript", new RTA_superscript() },
{ "Subscript", new RTA_sub() },
{ "Removeformat", new RTA_removeformat() },
{ "InsertOrderedList", new RTA_numberedlist() },
{ "InsertUnorderedList", new RTA_numberedlist() },
{ "undo", new RTA_undo() },
{ "redo", new RTA_redo() },
}.ToDictionary(
k => k.Key,
k => AddButton(k.Value, k.Key)
);
var ButtonDesign = default(IHTMLButton);
var ButtonHTML = default(IHTMLButton);
ButtonDesign = AddButtonAction(new RTA_mode_design(),
delegate
{
ButtonDesign.Hide();
ButtonHTML.Show();
EditorContainer.Show();
PreviewContainer.Hide();
}
);
ButtonHTML = AddButtonAction(new RTA_mode_html(),
delegate
{
ButtonHTML.Hide();
PreviewFrame.WithContent(
body =>
{
body.style.backgroundColor = Color.Transparent;
body.innerHTML = EditorFrame.contentWindow.document.body.innerHTML;
EditorContainer.Hide();
PreviewContainer.Show();
ButtonDesign.Show();
}
);
}
);
ButtonDesign.Hide();
AddSection(
"Editor with toolbar with background and preview",
Content
);
}
static Application()
{
new IHTMLPre {
new { Native.document.currentScript.src }
}.AttachToDocument();
#region HopToIFrame
HopToIFrame.VirtualOnCompleted = async(that, continuation) =>
{
new IHTMLPre {
"enter HopToIFrame.VirtualOnCompleted.."
}.AttachToDocument();
var r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// X:\jsc.svn\examples\javascript\Test\TestSwitchToIFrame\TestSwitchToIFrame\Application.cs
//var m = await that.frame.contentWindow.async.onmessage;
var m = await that.frame.async.onmessage;
//new IHTMLPre {
// " VirtualOnCompleted postMessageAsync " + new { r.shadowstate.state }
//}.AttachToDocument();
// um. we need to tell that iframe, where to jump to..
//var firstmessageback = that.frame.contentWindow.postMessageAsync(r.shadowstate);
m.postMessage(r.shadowstate);
that.frame.ownerDocument.defaultView.onmessage +=
e =>
{
if (e.source != that.frame.contentWindow)
{
return;
}
var shadowstate = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)e.data;
// are we jumping into a new statemachine?
new IHTMLPre {
"iframe is about to jump to parent " + new { shadowstate.state }
}.AttachToDocument();
// about to invoke
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
item =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(item);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return(item.FullName == shadowstate.TypeName);
}
return(false);
}
);
#endregion
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
shadowstate.state
);
}
}
);
#endregion
Console.WriteLine("invoke MoveNext");
NewStateMachineI.MoveNext();
};
};
#endregion
#region HopToParent
HopToParent.VirtualOnCompleted = async(that, continuation) =>
{
// the state is in a member variable?
var r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// should not be a zero state
// or do we have statemachine name clash?
new IHTMLPre {
"enter HopToParent.VirtualOnCompleted.. " + new { r.shadowstate.state }
}.AttachToDocument();
//Native.window.parent.postMessage(r.shadowstate);
// we actually wont use the response yet..
};
#endregion
// fsharpy look
vctor = (IApp page) =>
{
// {{ href = blob:https%3A//192.168.1.196%3A27831/bafa8242-82bd-44ef-8581-9f76f909cd86 }}
new IHTMLPre {
new { Native.document.location.href }
}.AttachToDocument();
if (Native.window.parent != Native.window)
{
// X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTabThenIFrame\ChromeExtensionHopToTabThenIFrame\Application.cs
// inside iframe
new { }.With(
async delegate
{
// start the handshake
// we gain intellisense, but the type is partal, likely not respawned, acivated, initialized
//var m = await Native.window.parent.postMessageAsync<TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine>();
// new IHTMLPre {
// "inside iframe awaiting onmessage"
//}.AttachToDocument();
var m = await Native.window.parent.postMessageAsync <TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine>();
var shadowstate = m.data;
//var m = await Native.window.parent.async.onmessage;
//var shadowstate = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)m.data;
new IHTMLPre {
new { shadowstate.state }
}.AttachToDocument();
// about to invoke
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
item =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(item);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return(item.FullName == shadowstate.TypeName);
}
return(false);
}
);
#endregion
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
shadowstate.state
);
}
}
);
#endregion
NewStateMachineI.MoveNext();
// we can now send one hop back?
}
);
return;
}
var codetask = new WebClient().DownloadStringTaskAsync(
new Uri(Worker.ScriptApplicationSource, UriKind.Relative)
);
#region click to switch
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151026
new IHTMLButton {
"click to switch"
}.AttachToDocument().onclick += async delegate
{
Native.body.style.backgroundColor = "yellow";
// can we compile shaders in frames in parallel?
var code = await codetask;
var aFileParts = new[] { code };
var oMyBlob = new Blob(aFileParts, new { type = "text/javascript" });
//var url = oMyBlob.ToObjectURL();
var url = URL.createObjectURL(oMyBlob);
var frame = new IHTMLIFrame {
new XElement("script", new XAttribute("src", url), " ")
}.AttachToDocument();
// can we our code in that blank document?
// not fired for blank?
await frame.async.onload;
////var x = frame.ownerDocument.createElement(IHTMLElement.HTMLElementEnum.button);
////x.AttachTo(frame.ownerDocument.documentElement);
Native.body.style.backgroundColor = "cyan";
await(HopToIFrame) frame;
var f = new IHTMLButton {
"in the frame! click to notify parent"
}.AttachToDocument();
// 134ms TypeError: Cannot set property 'outerscope' of null
//var outerscope = "outerscope";
f.onclick += async delegate
{
var innerscope = "innerscope";
// can we jump back?
// can we ask how many frames are there?
// can we jump in any other frame?
// if we jump back to another statemachine, can we reference the outer statemachine?
// can we call the server?
new IHTMLPre {
"inside iframe about to jump to parent " + new {
//outerscope,
innerscope
}
}.AttachToDocument();
// never completes?
await default(HopToParent);
// cant see it?
Console.WriteLine("are we back?");
new IHTMLPre {
"iframe onclick, inside parent now"
}.AttachToDocument();
// can we jump back? would we know where to jump back to?
//await default(HopToIFrame);
};
};
#endregion
};
}
public static Action BindKeyboardToDiagnosticsConsole()
{
var diagnostics = new IHTMLIFrame {
src = "/jsc", frameBorder = "0"
};
diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0)";
diagnostics.style.position = IStyle.PositionEnum.absolute;
diagnostics.style.left = "0px";
diagnostics.style.top = "-100%";
diagnostics.style.width = "100%";
diagnostics.style.height = "100%";
// stay on top!
diagnostics.style.zIndex = 10000;
Console.WriteLine("You can now press tilde key to see the /jsc page.");
diagnostics.AttachToDocument();
// http://www.w3schools.com/css3/css3_transitions.asp
diagnostics.style.With(
(dynamic s) => s.webkitTransition = "all 0.2s ease-in-out"
);
diagnostics.style.With(
(dynamic s) => s.transition = "all 0.3s ease-in-out"
);
Action Hide =
delegate
{
diagnostics.style.top = "-100%";
diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0)";
};
Action Show =
delegate
{
diagnostics.style.top = "0%";
diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
};
Action Toggle =
delegate
{
if (diagnostics.style.top == "0%")
{
Hide();
}
else
{
Show();
}
};
Action <int> AtKeyCode =
KeyCode =>
{
new { KeyCode }.ToString().ToDocumentTitle();
if (KeyCode == 27)
{
Hide();
}
// US
if (KeyCode == 222)
{
Toggle();
}
// EE
if (KeyCode == 192)
{
Toggle();
}
};
diagnostics.onload +=
delegate
{
diagnostics.contentWindow.document.onkeyup +=
e =>
{
AtKeyCode(e.KeyCode);
};
diagnostics.contentWindow.document.oncontextmenu +=
e =>
{
e.preventDefault();
Hide();
};
};
Native.document.onkeyup +=
e =>
{
AtKeyCode(e.KeyCode);
};
//Native.window.onorientationchange +=
// delegate
// {
// if (Native.window.orientation == 90)
// Show();
// else if (Native.window.orientation == -90)
// Show();
// else
// Hide();
// };
return(Toggle);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IDefault page = null)
{
var location = "" + Native.document.location;
#if false
#region workaround for ThreeJS/chrome webgl upscale bug
// workaround for not knowing how to tell three js to upscale correctly..
// X:\jsc.svn\examples\javascript\Test\TestNestedIFrameForMoreWidth\TestNestedIFrameForMoreWidth\Application.cs
// instead of reloading full app
// could we run part of it instead?
// like let jsc know that this sub application should be reloadable?
// this will be like threading
// the outer code wil just stop doing anything
// and the inner app will take over.
if (Native.window.Width < Native.screen.width)
{
#region make sure the url looks different to make iframe actually load
Native.window.parent.With(
parent =>
{
// http://stackoverflow.com/questions/5934538/is-there-a-limitation-on-an-iframe-containing-another-iframe-with-the-same-url
var parentlocation = "";
try
{
parentlocation = parent.document.location.href;
Console.WriteLine(new { parentlocation });
}
catch
{
// we are sandboxed!
}
if (parentlocation.TakeUntilIfAny("#") == location.TakeUntilIfAny("#"))
{
var withouthash = location.TakeUntilIfAny("#");
var onlyhash = location.SkipUntilOrEmpty("#");
withouthash += "?";
if (onlyhash != "")
{
withouthash += "#" + onlyhash;
}
location = withouthash;
}
}
);
#endregion
// this check only looks for default screen width
// what about height and secondary screens?
Console.WriteLine("will prepare... " + location);
var iframe = new IHTMLIFrame
{
frameBorder = "0",
allowFullScreen = true
};
iframe.style.minWidth = Native.screen.width + "px";
iframe.style.minHeight = Native.screen.height + "px";
iframe.style.position = IStyle.PositionEnum.absolute;
iframe.style.left = "0px";
iframe.style.top = "0px";
iframe.style.width = "100%";
iframe.style.height = "100%";
Native.document.body.Clear();
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.window.onmessage +=
e =>
{
Console.WriteLine("Native.Window.onmessage " + new { e.data });
// pure trickery :P
if ((string)e.data == "WebGLDynamicTerrainTemplate.loaded")
{
iframe.style.minWidth = "";
iframe.style.minHeight = "";
}
};
iframe.onload +=
delegate
{
if (iframe.src != location)
{
return;
}
Native.window.requestAnimationFrame +=
delegate
{
Console.WriteLine("reload done! " + new { location, iframe.src });
iframe.contentWindow.postMessage("ready yet?");
};
};
Native.window.requestAnimationFrame +=
delegate
{
Console.WriteLine("will reload... " + location);
iframe.AttachToDocument();
iframe.src = location;
};
return;
}
#endregion
#endif
#region await Three.js then do InitializeContent
new[]
{
new global::WebGLDynamicTerrainTemplate.Design.ThreeTerrain().Content,
new global::WebGLDynamicTerrainTemplate.Design.ShaderTerrain().Content,
new global::WebGLDynamicTerrainTemplate.Design.ShaderExtrasTerrain().Content,
new global::WebGLDynamicTerrainTemplate.Design.PostprocessingTerrain().Content,
}.ForEach(
(SourceScriptElement, i, MoveNext) =>
{
SourceScriptElement.AttachToDocument().onload +=
delegate
{
MoveNext();
};
}
)(
delegate
{
InitializeContent(page);
}
);
#endregion
style.Content.AttachToHead();
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
#region con
//var con = new Abstractatech.ConsoleFormPackage.Library.ConsoleForm();
var con = new ConsoleForm();
con.InitializeConsoleFormWriter();
con.Show();
con.Left = Native.Window.Width - con.Width;
con.Top = 0;
Native.Window.onresize +=
delegate
{
con.Left = Native.Window.Width - con.Width;
con.Top = 0;
};
con.Opacity = 0.6;
con.HandleFormClosing = false;
con.PopupInsteadOfClosing();
#endregion
Console.WriteLine("click on InitializeOurFacebookLoginService!");
Native.Window.onmessage +=
e =>
{
// http://developer.klout.com/blog/read/fb_identity_lookup
Console.WriteLine("onmessage: " + e.data);
};
// wont work as chrome app!
page.InitializeOurFacebookLoginService.WhenClicked(
delegate
{
Console.WriteLine("loading... ");
// http://caniuse.com/iframe-sandbox
// http://security.stackexchange.com/questions/15146/using-iframes-to-sandbox-untrusted-code
var i = new IHTMLIFrame { };
// http://www.w3schools.com/tags/att_iframe_sandbox.asp
// The value of the sandbox attribute can either be an empty string (all the restrictions is applied), or a space-separated list of pre-defined values that will REMOVE particular restrictions.
// http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
// this will break our popups and cookies for facebook!
//i.setAttribute("sandbox", "allow-scripts allow-forms allow-popups");
i.src = "http://young-beach-4377.herokuapp.com/";
i.AttachToDocument();
i.onload +=
delegate
{
Console.WriteLine("loading... done " + new { i.src });
// can we now talk to it?
//
};
}
);
page.InitializeOurFacebookLoginServiceViaWindow.WhenClicked(
delegate
{
Console.WriteLine("loading... ");
//var i = new IWindow { };
//i.document.location.href = "http://young-beach-4377.herokuapp.com/";
var i = Native.Window.open("http://young-beach-4377.herokuapp.com/", "_blank", 400, 225);
// doesnt tell us when loaded?
i.onload +=
delegate
{
Console.WriteLine("loading... done...");
//Console.WriteLine("loading... done " + new { i.document.title });
//Console.WriteLine("loading... done " + new { i.document.location.href });
// can we now talk to it?
//
};
// popup will be blocked
//new IHTMLButton { innerText = "send DoLogin" }.AttachToDocument().WhenClicked(
// delegate
// {
// Console.WriteLine("send DoLogin");
// i.postMessage(
// new XElement("DoLogin", new XAttribute("tag", "foo")).ToString()
// );
// }
//);
}
);
page.InitializeOurFacebookLoginServiceViaWindowAndClose.WhenClicked(
delegate
{
Console.WriteLine("loading... ");
//var i = new IWindow { };
//i.document.location.href = "http://young-beach-4377.herokuapp.com/";
var i = Native.Window.open("http://young-beach-4377.herokuapp.com/#c", "_blank", 400, 225);
// doesnt tell us when loaded?
i.onload +=
delegate
{
Console.WriteLine("InitializeOurFacebookLoginServiceViaWindowAndClose loading... done...");
//Console.WriteLine("loading... done " + new { i.document.title });
//Console.WriteLine("loading... done " + new { i.document.location.href });
// can we now talk to it?
//
};
i.onbeforeunload +=
delegate
{
Console.WriteLine("InitializeOurFacebookLoginServiceViaWindowAndClose onbeforeunload");
};
// popup will be blocked
//new IHTMLButton { innerText = "send DoLogin" }.AttachToDocument().WhenClicked(
// delegate
// {
// Console.WriteLine("send DoLogin");
// i.postMessage(
// new XElement("DoLogin", new XAttribute("tag", "foo")).ToString()
// );
// }
//);
}
);
page.HerokuFacebookLoginAppLoginExperience.WhenClicked(
delegate
{
HerokuFacebookLoginAppLoginExperience.Login(
(string id, string name, string third_party_id) =>
{
Console.WriteLine(new { id, name, third_party_id });
}
);
}
);
@"Hello world".ToDocumentTitle();
// Send data from JavaScript to the server tier
//service.WebMethod2(
// @"A string from JavaScript.",
// value => value.ToDocumentTitle()
//);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IDefaultPage page)
{
if (Native.Document.location.hash == "")
{
page.Content.innerText = "this page shall have child frames!";
var a = new IHTMLIFrame
{
src = "#/child1"
}.AttachToDocument();
var b = new IHTMLIFrame
{
src = "#/child2"
}.AttachToDocument();
new IHTMLBreak().AttachToDocument();
}
else
{
page.Content.innerText = Native.Document.location.hash;
window.parent.With(
parent =>
{
new IHTMLButton {
innerText = "send parent a message"
}.With(
btn =>
{
btn.onclick +=
delegate
{
parent.postMessage("hi from " + Native.Document.location.hash);
};
}
).AttachToDocument();
}
);
}
window.onmessage +=
e =>
{
new IHTMLButton {
innerText = e.data + " (click to reply)"
}.With(
btn =>
{
btn.style.color = JSColor.Blue;
btn.onclick +=
delegate
{
btn.Orphanize();
var source = (XWindow)(object)e.source;
var WhoAmI = Native.Document.location.hash;
if (WhoAmI == "")
{
WhoAmI = "parent";
}
source.postMessage("this is a reply from " + WhoAmI);
};
}
).AttachToDocument();
//Native.Window.alert("window.onmessage: " + e.data);
};
@"Hello world".ToDocumentTitle();
// Send data from JavaScript to the server tier
service.WebMethod2(
@"A string from JavaScript.",
value => value.ToDocumentTitle()
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// what about namespaces?
// what about 3D objects?
// what about nugets?
// what about canvas?
// what about threejs ? will it end up like XAML?
// shall we automatically define custom elements?
Native.document.registerElement("example-com",
e =>
{
//new XAttribute().Changed
// http://msdn.microsoft.com/en-us/library/bb387098(v=vs.110).aspx
// http://msdn.microsoft.com/en-us/library/system.xml.linq.xobject.changed(v=vs.110).aspx
e.AsXElement().Changed +=
(sender, args) =>
{
// MutationObserver
// server side events too?
};
var s = e.createShadowRoot();
//var i = new IHTMLIFrame { src = "http://example.com" };
var i = new IHTMLIFrame
{
// prevent cyclic reload
src = "about:blank"
//src = "http://example.com"
};
s.appendChild(
i
);
e.attributes.WithEach(
a =>
{
//i.src = a.value;
new IHTMLPre {
"attribute " + new { a.name, a.value }
}.AttachToDocument();
if (a.name == "foo")
{
// are we observing that too?
i.src = a.value;
}
}
);
// does it mean we are nowready to get events for XLinq?
// is it suppsoed to work?
new MutationObserver(
new MutationCallback(
(mutations, o) =>
{
foreach (var item in mutations)
{
var value = e.getAttributeNode(item.attributeName).value;
//i.src = ;
new IHTMLPre {
"MutationObserver " + new { item.attributeName, value, item.type, item.target }
}.AttachToDocument();
if (item.attributeName == "foo")
{
// are we observing that too?
i.src = value;
}
}
}
)
).observe(e, new { attributes = true });
},
// http://www.w3.org/TR/2014/WD-dom-20140710/
// https://code.google.com/p/mutation-summary/wiki/DOMMutationObservers
// http://stackoverflow.com/questions/5416822/dom-mutation-events-replacement
attributeChangedCallback:
(attributeName, e) =>
{
// css conditionals
new IHTMLPre {
new { attributeName }
}.AttachToDocument();
}
);
var z = new IHTMLElement("example-com")
{
//$foo = "bar"
//new XAttribute("foo", "bar")
}.AttachToDocument();
z.setAttribute("foo", "http://example.com");
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IDefault page = null)
{
// 1b90:01:01 0046:0009 My.Solutions.Pages.Templates.Application create interface WebGLDopamineMolecule.AssetsLibrary::WebGLDopamineMolecule.HTML.Pages.IDefault
//{ Location =
// assembly: X:\jsc.svn\examples\javascript\My.Solutions.Pages.Templates\My.Solutions.Pages.Templates\bin\Debug\WebGLDopamineMolecule.exe
// type: WebGLDopamineMolecule.Application, WebGLDopamineMolecule, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
// offset: 0x0587
// method:Void .ctor(WebGLDopamineMolecule.HTML.Pages.IDefault) }
//1b90:01:01 RewriteToAssembly error: System.MissingMethodException: Method not found: 'Void ScriptCoreLib.JavaScript.DOM.IWindow.add_onframe(System.Action)'.
glMatrix ref1;
THREE.Color ref0;
var h = Native.document.location.hash;
// are we running as a clone?
// if so our location hash should be stored as html.
Native.document.getElementsByTagName("link").Select(k => (IHTMLLink)k).Where(k => k.rel == "location").ToList().ForEach(
location =>
{
// href = file:///X:/temp/Spiral.htm#WebGLSpiral
location.href.SkipUntilLastOrEmpty("#").With(
href =>
{
if (h == "")
{
h = "#" + href;
}
}
);
}
);
DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
Console.WriteLine("Templates loaded... " + new { Native.document.location, h });
//{
// var html = new global::wolfenstein4kTemplate.HTML.Pages.DefaultPage();
// html.Container.AttachToDocument();
// new global::wolfenstein4kTemplate.Application(html);
//}
Action LoadEmAll = delegate { };
var cc = new IHTMLCenter().AttachToDocument();
cc.style.lineHeight = "0px";
var cutoff = 480;
#region iframe
Action <int, int, double, IHTMLImage, string> iframe = (iwidth, iheight, maxextra, preview, alias) =>
{
// media selector?
if (alias == "")
{
}
var c = new IHTMLDiv().AttachTo(cc);
//c.style.backgroundColor = JSColor.Black;
c.style.display = IStyle.DisplayEnum.inline_block;
c.style.position = IStyle.PositionEnum.relative;
c.style.SetSize(iwidth, iheight);
IHTMLElement content = preview;
preview.style.SetLocation(0, 0);
preview.AttachTo(c);
preview.style.cursor = IStyle.CursorEnum.pointer;
preview.title = "Click to activate, doubleclick to enlarge";
var HasFocus = false;
var HasMouse = false;
Action content_SetExtraSize = delegate
{
};
#region SetExtraSize
var SetExtraSize = NumericEmitter.OfDouble(
(extrasizef, yy) =>
{
var extrasize = System.Convert.ToInt32(iwidth * extrasizef * 0.5);
content_SetExtraSize = delegate
{
content.style.zIndex = extrasize;
if (HasFocus)
{
content.style.boxShadow = "0px 0px " + (extrasize) + "px 0px rgba(255, 255, 0, 1)";
}
else
{
content.style.boxShadow = "0px 0px " + (extrasize) + "px 0px rgba(0, 0, 255, 1)";
}
//box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 1);
content.style.SetLocation(
System.Convert.ToInt32(iwidth * extrasizef * -0.5),
System.Convert.ToInt32(iheight * extrasizef * -0.5),
System.Convert.ToInt32(iwidth * (1 + extrasizef)),
System.Convert.ToInt32(iheight * (1 + extrasizef))
);
};
content_SetExtraSize();
}
);
#endregion
#region HasMouse
c.onmouseover +=
delegate
{
HasMouse = true;
if (HasFocus)
{
return;
}
SetExtraSize(maxextra, 0);
};
c.onmouseout +=
delegate
{
HasMouse = false;
if (HasFocus)
{
return;
}
SetExtraSize(0, 0);
};
#endregion
#region Activate
Action Activate =
delegate
{
// can we also do groups?
//preview.Orphanize();
var a = new IHTMLIFrame
{
width = iwidth,
height = iheight,
frameBorder = "0",
scrolling = "no",
allowFullScreen = true
}.AttachTo(c);
preview.style.Opacity = 0.7;
a.style.SetLocation(0, 0);
#region HasFocus
a.onload +=
delegate
{
//Native.Window.alert(
// new {
// a.contentWindow.performance.timing.connectStart,
// a.contentWindow.performance.timing.loadEventStart,
// }
//);
a.contentWindow.onblur +=
delegate
{
HasFocus = false;
if (HasMouse)
{
SetExtraSize(maxextra * 1, 0);
}
else
{
SetExtraSize(0, 0);
}
};
a.contentWindow.onfocus +=
delegate
{
HasFocus = true;
SetExtraSize(maxextra * 1.1, 0);
};
if (HasMouse)
{
a.contentWindow.focus();
}
new Timer(
delegate
{
preview.FadeOut();
new Timer(
delegate
{
content = a;
content_SetExtraSize();
}
).StartTimeout(300);
}
).StartTimeout(1000);
};
#endregion
a.contentWindow.document.location.replace(alias);
//a.tabIndex = 1;
};
LoadEmAll +=
delegate
{
if (Activate == null)
{
return;
}
Activate();
Activate = null;
};
c.onclick +=
delegate
{
if (Activate == null)
{
return;
}
Activate();
Activate = null;
// unsubscribe event;
};
#endregion
SetExtraSize(0, 0);
};
#endregion
#region y
Action <string, Action, IHTMLImage> y =
(alias, yield, preview) =>
{
if (h == "")
{
if (Native.window.Width > cutoff)
{
iframe(96, 96, 3, preview, alias);
}
else
{
iframe(32, 32, 3, preview, alias);
}
}
else if (h == alias)
{
if (yield != null)
{
yield();
}
}
};
#endregion
// jsc cannot handle multiple delegates on the same statement yet.
y("#WebGLDopamineMolecule", () => new WebGLDopamineMolecule.Application(), new WebGLDopamineMolecule.HTML.Images.FromAssets.Preview());
y("#WebGLEthanolMolecule", () => new WebGLEthanolMolecule.Application(), new WebGLEthanolMolecule.HTML.Images.FromAssets.Preview());
y("#WebGLYomotsuTPS", () => new WebGLYomotsuTPS.Application(), new WebGLYomotsuTPS.HTML.Images.FromAssets.Preview());
y("#WebGLYomotsuMD2Model", () => new WebGLYomotsuMD2Model.Application(), new WebGLYomotsuMD2Model.HTML.Images.FromAssets.Preview());
y("#WebGLSphereRayTrace", () => new WebGLSphereRayTrace.Application(), new WebGLSphereRayTrace.HTML.Images.FromAssets.Preview());
//y("#WebGLFireballExplosion", () => new WebGLFireballExplosion.Application(), new WebGLFireballExplosion.HTML.Images.FromAssets.Preview());
y("#WebGLChocolux", () => new WebGLChocolux.Application(), new WebGLChocolux.HTML.Images.FromAssets.Preview());
//y("#WebGLPuls", () => new WebGLPuls.Application(), new WebGLPuls.HTML.Images.FromAssets.Preview());
y("#WebGLCelShader", () => new WebGLCelShader.Application(), new WebGLCelShader.HTML.Images.FromAssets.Preview());
y("#WebGLClouds", () => new WebGLClouds.Application(), new WebGLClouds.HTML.Images.FromAssets.Preview());
y("#WebGLCone", () => new WebGLCone.Application(), new WebGLCone.HTML.Images.FromAssets.Preview());
y("#WebGLShaderDisturb", () => new WebGLShaderDisturb.Application(), new WebGLShaderDisturb.HTML.Images.FromAssets.Preview());
y("#WebGLDynamicTerrainTemplate", () => new WebGLDynamicTerrainTemplate.Application(), new WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.Preview());
y("#WebGLEscherDrosteEffect", () => new WebGLEscherDrosteEffect.Application(), new WebGLEscherDrosteEffect.HTML.Images.FromAssets.Preview());
y("#WebGLInvade", () => new WebGLInvade.Application(), new WebGLInvade.HTML.Images.FromAssets.Preview());
y("#WebGLLesson01", () => new WebGLLesson01.Application(), new WebGLLesson01.HTML.Images.FromAssets.Preview());
y("#WebGLLesson02", () => new WebGLLesson02.Application(), new WebGLLesson02.HTML.Images.FromAssets.Preview());
y("#WebGLLesson03", () => new WebGLLesson03.Application(), new WebGLLesson03.HTML.Images.FromAssets.Preview());
y("#WebGLLesson04", () => new WebGLLesson04.Application(), new WebGLLesson04.HTML.Images.FromAssets.Preview());
y("#WebGLLesson05", () => new WebGLLesson05.Application(), new WebGLLesson05.HTML.Images.FromAssets.Preview());
y("#WebGLLesson06", () => new WebGLLesson06.Application(), new WebGLLesson06.HTML.Images.FromAssets.Preview());
y("#WebGLLesson07", () => new WebGLLesson07.Application(), new WebGLLesson07.HTML.Images.FromAssets.Preview());
y("#WebGLLesson08", () => new WebGLLesson08.Application(), new WebGLLesson08.HTML.Images.FromAssets.Preview());
y("#WebGLLesson09", () => new WebGLLesson09.Application(), new WebGLLesson09.HTML.Images.FromAssets.Preview());
y("#WebGLLesson10", () => new WebGLLesson10.Application(), new WebGLLesson10.HTML.Images.FromAssets.Preview());
y("#WebGLLesson11", () => new WebGLLesson11.Application(), new WebGLLesson11.HTML.Images.FromAssets.Preview());
y("#WebGLLesson12", () => new WebGLLesson12.Application(), new WebGLLesson12.HTML.Images.FromAssets.Preview());
y("#WebGLLesson13", () => new WebGLLesson13.Application(), new WebGLLesson13.HTML.Images.FromAssets.Preview());
y("#WebGLLesson14", () => new WebGLLesson14.Application(), new WebGLLesson14.HTML.Images.FromAssets.Preview());
y("#WebGLLesson15", () => new WebGLLesson15.Application(), new WebGLLesson15.HTML.Images.FromAssets.Preview());
y("#WebGLLesson16", () => new WebGLLesson16.Application(), new WebGLLesson16.HTML.Images.FromAssets.Preview());
y("#WebGLNyanCat", () => new WebGLNyanCat.Application(), new WebGLNyanCat.HTML.Images.FromAssets.Preview());
y("#WebGLPlanetGenerator", () => new WebGLPlanetGenerator.Application(), new WebGLPlanetGenerator.HTML.Images.FromAssets.Preview());
y("#WebGLSimpleCubic", () => new WebGLSimpleCubic.Application(), new WebGLSimpleCubic.HTML.Images.FromAssets.Preview());
y("#SpiderModel", () => new SpiderModel.Application(), new SpiderModel.HTML.Images.FromAssets.Preview());
y("#WebGLWindWheel", () => new WebGLWindWheel.Application(), new WebGLWindWheel.HTML.Images.FromAssets.Preview());
y("#WebGLTunnel", () => new WebGLTunnel.Application(), new WebGLTunnel.HTML.Images.FromAssets.Preview());
y("#WebGLSpiral", () => new WebGLSpiral.Application(), new WebGLSpiral.HTML.Images.FromAssets.Preview());
y("#WebGLCannonPhysicsEngine", () => new WebGLCannonPhysicsEngine.Application(), new WebGLCannonPhysicsEngine.HTML.Images.FromAssets.Preview());
y("#WebGLBossHarvesterByOutsideOfSociety", () => new WebGLBossHarvesterByOutsideOfSociety.Application(), new WebGLBossHarvesterByOutsideOfSociety.HTML.Images.FromAssets.Preview());
y("#WoodsXmasByRobert", () => new WoodsXmasByRobert.Application(), new WoodsXmasByRobert.HTML.Images.FromAssets.Preview());
//y("#WebGLBeachballsByDoob", () => new WebGLBeachballsByDoob.Application(), new WebGLBeachballsByDoob.HTML.Images.FromAssets.Preview());
y("#WebGLCity", () => new WebGLCity.Application(), new WebGLCity.HTML.Images.FromAssets.Preview());
// glMatrix
y("#WebGLHand", () => new WebGLHand.Application(), new WebGLHand.HTML.Images.FromAssets.Preview());
y("#WebGLSpadeWarrior", () => new WebGLSpadeWarrior.Application(), new WebGLSpadeWarrior.HTML.Images.FromAssets.Preview());
if (h == "")
{
var maxextra = 3;
var iwidth = 96;
var iheight = 96;
if (Native.window.Width > cutoff)
{
iframe(iwidth, iheight, maxextra, new HTML.Images.FromAssets.Preview(), "");
//iframe(iwidth, iheight, maxextra, new HTML.Images.FromAssets.Preview(), "");
new IHTMLButton {
innerText = "Fullscreen"
}.With(
btn =>
{
btn.style.position = IStyle.PositionEnum.absolute;
btn.style.left = "1em";
btn.style.bottom = "1em";
btn.onclick +=
delegate
{
Native.Document.body.requestFullscreen();
};
}
).AttachToDocument();
new IHTMLButton {
innerText = "Load Em All"
}.With(
btn =>
{
btn.style.position = IStyle.PositionEnum.absolute;
btn.style.right = "1em";
btn.style.bottom = "1em";
btn.onclick +=
delegate
{
btn.Orphanize();
LoadEmAll();
};
}
).AttachToDocument();
}
else
{
iwidth = 32;
iheight = 32;
}
#region ApplyMargins
Action ApplyMargins = delegate
{
if (Native.window.Width < cutoff)
{
cc.style.margin = "0px";
}
else
{
cc.style.margin = "3%";
cc.style.marginTop = "10%";
}
};
ApplyMargins();
Native.window.onresize +=
delegate
{
ApplyMargins();
};
#endregion
#region requestFullscreen
Native.Document.body.ondblclick +=
delegate
{
//if (IsDisposed)
// return;
// http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
Native.Document.body.requestFullscreen();
//AtResize();
};
#endregion
}
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
var w = Native.Window.Width;
var h = Native.Window.Height;
new IHTMLPre {
}.AttachToDocument().With(
i =>
{
Action u = delegate
{
i.innerText = new { w, Native.Window.Width, h, Native.Window.Height }.ToString();
};
u();
Native.Window.onresize +=
delegate
{
u();
};
}
);
var location = "" + Native.Document.location;
var parent = "";
new IHTMLPre
{
innerText = new
{
location,
Native.Document.location.protocol,
Native.Document.location.host,
Native.Document.location.pathname,
Native.Document.location.search,
Native.Document.location.hash,
}.ToString()
}.AttachToDocument();
Native.Window.parent.With(
xparent =>
{
// http://stackoverflow.com/questions/5934538/is-there-a-limitation-on-an-iframe-containing-another-iframe-with-the-same-url
parent = "" + xparent.document.location;
new IHTMLPre {
innerText = new { parent }.ToString()
}.AttachToDocument();
}
);
if (w < 400)
{
Native.Document.body.style.backgroundColor = JSColor.Yellow;
new IHTMLButton("reopen as a bigger document").AttachToDocument().onclick +=
delegate
{
var src = location;
if (location == parent)
{
var withouthash = src.TakeUntilIfAny("#");
var onlyhash = src.SkipUntilOrEmpty("#");
withouthash += "?";
if (onlyhash != "")
{
withouthash += "#" + onlyhash;
}
src = withouthash;
}
var iframe = new IHTMLIFrame {
src = src, frameBorder = "0"
};
iframe.style.minWidth = "800px";
iframe.style.minHeight = "600px";
iframe.style.position = IStyle.PositionEnum.absolute;
iframe.style.left = "0px";
iframe.style.top = "0px";
iframe.style.width = "100%";
iframe.style.height = "100%";
Native.Document.body.Clear();
Native.Document.body.style.overflow = IStyle.OverflowEnum.hidden;
iframe.onload +=
delegate
{
Console.WriteLine(
new { location, iframe.src }
);
iframe.style.minWidth = "";
iframe.style.minHeight = "";
};
Console.WriteLine(
"will reload as: " + new { src }
);
iframe.AttachToDocument();
};
return;
}
Native.Document.body.style.backgroundColor = JSColor.White;
new IHTMLButton("this is dynamic content").AttachToDocument();
new IHTMLButton("reload").AttachToDocument().onclick +=
delegate
{
Native.Document.location = Native.Document.location;
};
new IHTMLButton("add frame").AttachToDocument().onclick +=
delegate
{
var src = location;
if (location == parent)
{
var withouthash = src.TakeUntilIfAny("#");
var onlyhash = src.SkipUntilOrEmpty("#");
withouthash += "?";
if (onlyhash != "")
{
withouthash += "#" + onlyhash;
}
src = withouthash;
}
var iframe = new IHTMLIFrame {
src = "about:blank"
};
iframe.style.position = IStyle.PositionEnum.absolute;
iframe.style.left = "10%";
iframe.style.top = "10%";
iframe.style.width = "80%";
iframe.style.height = "80%";
iframe.AttachToDocument();
Console.WriteLine(
"will frame as: " + new { src }
);
Native.Window.requestAnimationFrame +=
delegate
{
iframe.src = src;
Console.WriteLine(
"did it work? " + new { iframe.src }
);
};
};
new IHTMLButton("add frame via source").AttachToDocument().onclick +=
delegate
{
var iframe = new IHTMLIFrame {
};
iframe.style.position = IStyle.PositionEnum.absolute;
iframe.style.left = "10%";
iframe.style.top = "10%";
iframe.style.width = "80%";
iframe.style.height = "80%";
iframe.AttachToDocument();
var x = iframe.contentWindow.open("about:blank", "_self");
x.document.write("<script src='/view-source'></script>");
x.document.close();
};
@"Hello world".ToDocumentTitle();
// Send data from JavaScript to the server tier
service.WebMethod2(
@"A string from JavaScript.",
value => value.ToDocumentTitle()
);
}
