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 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 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
);
}