internal static void CreateToolboxTo(IHTMLDiv ToolboxContainer)
{
var items = new
{
img = default(IHTMLElement)
}.ToEmptyList();
Action <IHTMLElement> Add =
img =>
{
img.style.cursor = ScriptCoreLib.JavaScript.DOM.IStyle.CursorEnum.move;
new IHTMLDiv().With(
div =>
{
var backgroundColor = default(Color);
if (items.Count % 2 == 0)
{
backgroundColor = Color.FromGray(0xf7);
}
else
{
backgroundColor = Color.FromGray(0xf0);
}
//div.style.height = "90px";
div.style.overflow = ScriptCoreLib.JavaScript.DOM.IStyle.OverflowEnum.hidden;
div.style.textAlign = ScriptCoreLib.JavaScript.DOM.IStyle.TextAlignEnum.center;
div.Add(
img
);
img.title = "Drag this component into the designer!";
items.Add(
new
{
img = img
}
);
ToolboxContainer.Add(div);
ApplyMouseHoverStyle(div, backgroundColor);
}
);
};
Add(new JSCSolutionsNETImage());
Add(new ToolboxIconsIHTMLButton());
Add(new ToolboxIconsIHTMLInputCheckbox());
Add(new ToolboxIconsIHTMLInputText());
Add(new ToolboxIconsIHTMLTextarea());
}
public SolutionFileDesigner()
{
var ToolbarHeight = "1.3em";
var Container = new IHTMLDiv();
this.Container = Container;
Container.style.position = IStyle.PositionEnum.absolute;
Container.style.left = "0px";
Container.style.top = "0px";
Container.style.right = "0px";
Container.style.bottom = "0px";
var Content = new IHTMLDiv().AttachTo(Container);
this.Content = Content;
Content.style.position = IStyle.PositionEnum.absolute;
Content.style.left = "0px";
Content.style.top = "0px";
Content.style.right = "0px";
Content.style.bottom = ToolbarHeight;
var Toolbar = new IHTMLDiv().AttachTo(Container);
Toolbar.style.backgroundColor = Color.FromGray(0xef);
Toolbar.style.position = IStyle.PositionEnum.absolute;
Toolbar.style.left = "0px";
Toolbar.style.height = ToolbarHeight;
Toolbar.style.right = "0px";
Toolbar.style.bottom = "0px";
this.Tabs = new BindingList <SolutionFileDesignerTab>().WithEvents(
NewTab =>
{
var span = new IHTMLSpan {
innerText = NewTab.Text
};
span.style.paddingLeft = "1.5em";
span.style.paddingRight = "0.3em";
var a = new IHTMLAnchor
{
NewTab.Image, span
};
NewTab.TabElement = a;
NewTab.Image.style.verticalAlign = "middle";
NewTab.Image.border = 0;
NewTab.Image.style.position = IStyle.PositionEnum.absolute;
a.style.backgroundColor = Color.FromGray(0xef);
a.style.color = Color.Black;
a.style.textDecoration = "none";
a.style.fontFamily = IStyle.FontFamilyEnum.Tahoma;
a.href = "javascript: void(0);";
NewTab.Activated +=
delegate
{
(from k in this.Tabs.Source
where k != NewTab
select(Action) k.RaiseDeactivated).Invoke();
};
a.onclick +=
delegate
{
NewTab.RaiseActivated();
};
a.style.display = IStyle.DisplayEnum.inline_block;
a.style.height = "100%";
a.onmousemove +=
delegate
{
a.style.backgroundColor = Color.FromGray(0xff);
};
a.onmouseout +=
delegate
{
a.style.backgroundColor = Color.FromGray(0xef);
};
Toolbar.Add(a);
return(delegate
{
a.Orphanize();
});
}
);
}
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
);
}
private static void AddSection9(Action <string, IHTMLDiv> AddSection)
{
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";
}
);
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 = "2em";
}
).AttachTo(Content);
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 = "2em";
k.style.bottom = "0px";
}
).AttachTo(Content);
var Editor = VisualStudioView.CreateEditor().AttachTo(EditorContainer);
Func <IHTMLImage, IHTMLButton> AddButtonDummy =
(img) =>
{
return(new IHTMLButton {
img
}.With(
k =>
{
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.FromGray(0xf0));
}
).AttachTo(ToolbarContainer));
};
Func <IHTMLImage, string, IHTMLButton> AddButton =
(img, command) =>
{
return(AddButtonDummy(img).With(
k =>
{
k.onclick +=
delegate
{
Editor.contentWindow.document.execCommand(
command, false, null
);
};
}
));
};
AddButtonDummy(new RTA_save());
ToolbarContainer.Add(new RTA_separator_horizontal());
AddButton(new RTA_bold(), "Bold");
AddButton(new RTA_underline(), "Underline");
AddButton(new RTA_strikethrough(), "Strikethrough");
AddButton(new RTA_italic(), "Italic");
ToolbarContainer.Add(new RTA_separator_horizontal());
AddButton(new RTA_justifyleft(), "JustifyLeft");
AddButton(new RTA_justifycenter(), "JustifyCenter");
AddButton(new RTA_justifyright(), "JustifyRight");
AddButton(new RTA_justifyfull(), "JustifyFull");
AddSection(
"Editor with toolbar",
Content
);
}
private static void AddSection10(Action <string, IHTMLDiv> AddSection)
{
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";
}
);
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 = "2em";
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 = "2em";
}
).AttachTo(Content);
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 = "2em";
k.style.bottom = "0px";
}
).AttachTo(Content);
var Editor = VisualStudioView.CreateEditor().AttachTo(EditorContainer);
Editor.allowTransparency = true;
Editor.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;
Func <IHTMLImage, IHTMLButton> AddButtonDummy =
(img) =>
{
return(new IHTMLButton {
img.WithinContainer()
}.With(
k =>
{
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);
}
).AttachTo(ToolbarContent));
};
Func <IHTMLImage, string, IHTMLButton> AddButton =
(img, command) =>
{
return(AddButtonDummy(img).With(
k =>
{
k.onclick +=
delegate
{
Editor.contentWindow.document.execCommand(
command, false, null
);
};
}
));
};
AddButtonDummy(new RTA_save());
ToolbarContent.Add(new RTA_separator_horizontal());
AddButton(new RTA_bold(), "Bold");
AddButton(new RTA_underline(), "Underline");
AddButton(new RTA_strikethrough(), "Strikethrough");
AddButton(new RTA_italic(), "Italic");
ToolbarContent.Add(new RTA_separator_horizontal());
AddButton(new RTA_justifyleft(), "JustifyLeft");
AddButton(new RTA_justifycenter(), "JustifyCenter");
AddButton(new RTA_justifyright(), "JustifyRight");
AddButton(new RTA_justifyfull(), "JustifyFull");
AddSection(
"Editor with toolbar with background",
Content
);
}
/// <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)
{
new JSCSolutionsNETImage().ToBackground(page.Item1.style, false);
new JSCSolutionsNETImage().ToBackground(page.Item2.style, false);
// Update document title
// http://do.jsc-solutions.net/Update-document-title
@"Hello world".ToDocumentTitle();
// Send xml to server
// http://do.jsc-solutions.net/Send-xml-to-server
var v = new SolutionFileView();
var f = new SolutionFile();
f.WriteHTMLElement(StockPageDefault.Element);
v.File = f;
var Container = new IHTMLDiv();
Container.style.position = IStyle.PositionEnum.relative;
Container.style.display = IStyle.DisplayEnum.inline_block;
Container.style.width = "600px";
Container.style.height = "400px";
Container.style.border = "1px solid gray";
var ToolbarHeight = "1.3em";
var Content = new IHTMLDiv().AttachTo(Container);
Content.style.position = IStyle.PositionEnum.absolute;
Content.style.left = "0px";
Content.style.top = "0px";
Content.style.right = "0px";
Content.style.bottom = ToolbarHeight;
var Toolbar = new IHTMLDiv().AttachTo(Container);
Toolbar.style.backgroundColor = Color.FromGray(0xef);
Toolbar.style.position = IStyle.PositionEnum.absolute;
Toolbar.style.left = "0px";
Toolbar.style.height = ToolbarHeight;
Toolbar.style.right = "0px";
Toolbar.style.bottom = "0px";
Action <IHTMLImage, string, Action> AddToolbarButton =
(img, text, handler) =>
{
var span = new IHTMLSpan {
innerText = text
};
span.style.paddingLeft = "1.5em";
span.style.paddingRight = "0.3em";
var a = new IHTMLAnchor
{
img, span
};
img.style.verticalAlign = "middle";
img.border = 0;
img.style.position = IStyle.PositionEnum.absolute;
a.style.backgroundColor = Color.FromGray(0xef);
a.style.color = Color.Black;
a.style.textDecoration = "none";
a.style.fontFamily = IStyle.FontFamilyEnum.Tahoma;
a.href = "javascript: void(0);";
a.onclick +=
delegate
{
handler();
};
a.style.display = IStyle.DisplayEnum.inline_block;
a.style.height = "100%";
a.onmousemove +=
delegate
{
a.style.backgroundColor = Color.FromGray(0xff);
};
a.onmouseout +=
delegate
{
a.style.backgroundColor = Color.FromGray(0xef);
};
Toolbar.Add(a);
};
v.Container.style.height = "100%";
v.Container.AttachTo(Content);
Content.Add(v.Container);
var i = CreateEditor();
i.AttachTo(Content);
var ii = new IHTMLPre().AttachTo(Content);
ii.style.position = IStyle.PositionEnum.absolute;
ii.style.left = "0px";
ii.style.top = "0px";
ii.style.right = "0px";
ii.style.bottom = "0px";
ii.style.overflow = IStyle.OverflowEnum.auto;
ii.style.padding = "0px";
ii.style.margin = "0px";
ii.style.whiteSpace = IStyle.WhiteSpaceEnum.normal;
v.Container.style.display = IStyle.DisplayEnum.none;
i.style.display = IStyle.DisplayEnum.empty;
ii.style.display = IStyle.DisplayEnum.none;
AddToolbarButton(new RTA_mode_design(), "Design",
delegate
{
v.Container.style.display = IStyle.DisplayEnum.none;
ii.style.display = IStyle.DisplayEnum.none;
i.style.display = IStyle.DisplayEnum.empty;
}
);
AddToolbarButton(new RTA_mode_html(), "Source",
delegate
{
v.Container.style.display = IStyle.DisplayEnum.empty;
ii.style.display = IStyle.DisplayEnum.none;
i.style.display = IStyle.DisplayEnum.none;
f.Clear();
i.WhenContentReady(
body =>
{
f.WriteHTMLElement(body.AsXElement());
// update
v.File = f;
}
);
}
);
AddToolbarButton(new RTA_mode_html(), "Source raw",
delegate
{
v.Container.style.display = IStyle.DisplayEnum.none;
ii.style.display = IStyle.DisplayEnum.empty;
i.style.display = IStyle.DisplayEnum.none;
i.WhenContentReady(
body =>
{
ii.innerText = body.AsXElement().ToString();
}
);
}
);
page.PageContainer.Add(Container);
new ApplicationWebService().WebMethod2(
new XElement(@"Document",
new object[] {
new XElement(@"Data",
new object[] {
@"Hello world"
}
),
new XElement(@"Client",
new object[] {
@"Unchanged text"
}
)
}
),
delegate(XElement doc)
{
// Show server message as document title
// http://do.jsc-solutions.net/Show-server-message-as-document-title
doc.Element(@"Data").Value.ToDocumentTitle();
}
);
}