Esempio n. 1
0
        private static void AddSection5(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   = "6em";
            }
                );



            var hh = new HorizontalSplit
            {
                Minimum        = 0.05,
                Maximum        = 0.95,
                Value          = 0.7,
                RightContainer = VisualStudioView.DemoTree().Container,
            };

            hh.Split.LeftScrollable = new IHTMLDiv();

            hh.Split.LeftScrollable.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
            hh.Split.LeftScrollable.style.width    = "100%";
            hh.Split.LeftScrollable.style.height   = "100%";


            var edit = VisualStudioView.CreateEditor();

            edit.AttachTo(hh.Split.LeftScrollable);

            hh.Container.AttachTo(Content);

            AddSection(
                "Horizontal split with tree",
                Content
                );
        }
Esempio n. 2
0
        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
                );
        }
Esempio n. 3
0
        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
                );
        }
Esempio n. 4
0
        private static void AddSection7(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   = "15em";
            }
                );



            var ToolboxSplit = new HorizontalSplit
            {
                Minimum = 0.05,
                Maximum = 0.5,
                Value   = 0.15,
            };

            var ToolboxContainer = ToolboxSplit.LeftContainer;

            Action <string, string> AddGroup =
                (Header, Title) =>
            {
                #region group
                {
                    var s = new Section().ToSectionConcept();

                    s.Target.Header.style.marginLeft = "1em";
                    s.Header       = Header;
                    s.Header.title = Title;

                    s.Content.Clear();

                    VisualStudioView.CreateToolboxTo(s.Content);

                    s.IsExpanded = false;
                    s.Target.Container.AttachTo(ToolboxContainer);
                }
                #endregion
            };

            AddGroup("HTML Components", "For example a section or a split view");
            AddGroup("Flash Components", "For example an empty sprite or a visualization");
            AddGroup("Java Applets", "For example a calculator form or a visualization");

            var EditorTreeSplit = new HorizontalSplit
            {
                Minimum = 0.5,
                Maximum = 0.95,
                Value   = 0.6,
            };

            EditorTreeSplit.Split.LeftScrollable = VisualStudioView.CreateEditor().WithinContainer();
            EditorTreeSplit.Split.RightContainer = VisualStudioView.DemoTree().Container;

            ToolboxSplit.Split.RightScrollable = EditorTreeSplit.Container;

            ToolboxSplit.Container.AttachTo(Content);

            AddSection(
                "Horizontal split with tree and sub split reversed",
                Content
                );
        }
Esempio n. 5
0
        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
                );
        }