protected override void Initialise() { CommandPanel = new HTMLDivElement(); CommandPanel.Style.BackgroundColor = "black"; CommandPanel.Style.Overflow = Overflow.Auto; CommandPanel.AddEventListener(EventType.MouseMove, (ev) => { CommandPanel.Style.Cursor = Cursor.Text; ev.StopPropagation(); }); CommandLines = new List <HTMLSpanElement>(); FillControlWithParent(CommandPanel, 2, 2); CommandInput = new HTMLInputElement() { Type = InputType.Text }; FillHorizontalControlWithParent(CommandInput, 2); SetCommandLineElement(CommandInput); CommandInput.AddEventListener(EventType.KeyDown, (ev) => { var kev = ev.As <KeyboardEvent>(); if (kev.KeyCode == 13) { IncrementLine(); } }); IncrementLine(); CommandPanel.AppendChild(CommandInput); CommandPanel.AddEventListener(EventType.Click, (ev) => { CommandInput.Focus(); }); Body.AppendChild(CommandPanel); Width = "677px"; Height = "392px"; }
private void CreateHtmlNode() { if (NodeBase == null) { NodeBase = new HTMLDivElement(); NodeImage = new HTMLDivElement(); NodeText = new HTMLSpanElement(); //NodeBase.Style.ZIndex = "0"; NodeBase.Style.Position = Position.Absolute; NodeImage.Style.Position = Position.Absolute; NodeText.Style.Position = Position.Absolute; NodeBase.AddEventListener(EventType.DblClick, (ev) => { if (!Form.MidleOfAction()) { parent.ClearSelection(); if (IsFile) { Process.Start(FullPath); } else { if (parent.Owner == null) { var frm = new FormFileExplorer(FullPath); frm.Left = "50px"; frm.Top = "50px"; frm.Show(); } else { parent.Path = FullPath; parent.Refresh(); } } } }); NodeBase.AddEventListener(EventType.MouseUp, (ev) => { if (!Form.MidleOfAction()) { // did i drag... parent.ClearSelection(this); } }); NodeBase.AddEventListener(EventType.MouseDown, (ev) => { if (!Form.MidleOfAction()) { int selectionCount = parent.GetSelectionCount(this); if (NodeExplorerState == FileExplorerState.Selected) { if (selectionCount == 0) { parent.ClearSelection(this); } NodeExplorerState = FileExplorerState.Focused; } else { if (selectionCount == 0) { parent.ClearSelection(this); } NodeExplorerState = FileExplorerState.Focused; } ev.StopPropagation(); } }); NodeBase.AddEventListener(EventType.MouseEnter, (ev) => { if (!Form.MidleOfAction()) { if (NodeExplorerState == FileExplorerState.Focused || NodeExplorerState == FileExplorerState.HoverFocused) { NodeExplorerState = FileExplorerState.HoverFocused; } else if (NodeExplorerState == FileExplorerState.Selected || NodeExplorerState == FileExplorerState.HoverSelected) { NodeExplorerState = FileExplorerState.HoverSelected; } else { NodeExplorerState = FileExplorerState.Hover; } ev.StopPropagation(); } }); NodeBase.AddEventListener(EventType.MouseLeave, (ev) => { if (!Form.MidleOfAction()) { if (NodeExplorerState == FileExplorerState.HoverFocused || NodeExplorerState == FileExplorerState.Focused) { NodeExplorerState = FileExplorerState.Focused; } else if (NodeExplorerState == FileExplorerState.HoverSelected || NodeExplorerState == FileExplorerState.Selected) { NodeExplorerState = FileExplorerState.Selected; } else { NodeExplorerState = FileExplorerState.None; } ev.StopPropagation(); } }); if (nodeViewType == NodeViewType.Medium_Icons) { jQuery.Select(NodeImage). Css("width", 48). Css("height", 48). Css("left", 14). Css("top", 2); NodeBase.Style.BorderStyle = BorderStyle.Solid; NodeBase.Style.BorderWidth = BorderWidth.Thin; HTMLImageElement img = new HTMLImageElement(); img.Style.MaxWidth = "100%"; img.Style.MaxHeight = "100%"; img.Style.Position = Position.Absolute; img.Style.Display = Display.Block; if (IsFile) { if (Icon == string.Empty) { img.SetAttribute("src", IconRepository.IMAGE_File);// NodeImage.Style.Background = FileExplorer.IMAGE_File; } else { img.SetAttribute("src", Icon);// NodeImage.Style.Background = FileExplorer.IMAGE_File; } } else { img.SetAttribute("src", IconRepository.IMAGE_Folder);//NodeImage.Style.Background = FileExplorer.IMAGE_Folder; } Form.DisableStateDrag(img); NodeImage.AppendChild(img); NodeText.InnerHTML = Name; NodeText.Style.FontFamily = "Segoe UI"; NodeText.Style.FontSize = "9.5pt"; NodeText.Style.TextAlign = TextAlign.Center; NodeText.Style.Cursor = Cursor.Default; NodeText.Style.TextShadow = "0px 2px 7px rgba(0, 0, 0, 0.5)"; // think you are looking for text-overflow: ellipsis in combination with white-space: nowrap NodeText.Style.TextOverflow = TextOverflow.Ellipsis; NodeText.Style.WhiteSpace = WhiteSpace.NoWrap; NodeText.Style.Overflow = Overflow.Hidden; Form.SetInternalLabel(NodeText); Form.ChangeStateTextSelection(NodeText, false); Form.ChangeStateTextSelection(NodeImage, false); Form.ChangeStateTextSelection(NodeBase, false); Form.ChangeStateTextSelection(img, false); jQuery.Select(NodeText). Css("width", 74). Css("height", 20). Css("left", 2). Css("top", 48); NodeText.Style.Color = "white"; NodeBase.AppendChild(NodeImage); NodeBase.AppendChild(NodeText); } } if (nodeViewType == NodeViewType.Medium_Icons) { if (nodeState == FileExplorerState.Focused || nodeState == FileExplorerState.HoverFocused) { NodeText.Style.Overflow = Overflow.Visible; jQuery.Select(NodeBase). Css("width", 76 - NodeText.ClientWidth + NodeText.ScrollWidth). Css("height", 50 + NodeText.ScrollHeight); } else { jQuery.Select(NodeBase). Css("width", 76). Css("height", 70); NodeText.Style.Overflow = Overflow.Hidden; } } // image 48x48 switch (nodeState) { case FileExplorerState.None: NodeBase.Style.BackgroundColor = ""; NodeBase.Style.BorderColor = "rgba(255, 255, 255, 0)"; break; case FileExplorerState.HoverSelected: case FileExplorerState.HoverFocused: case FileExplorerState.Hover: NodeBase.Style.BackgroundColor = "rgba(255, 255, 255, 0.2)"; NodeBase.Style.BorderColor = "rgba(255, 255, 255, 0.5)"; break; case FileExplorerState.Selected: case FileExplorerState.Focused: NodeBase.Style.BackgroundColor = "rgba(255, 255, 255, 0.4)"; NodeBase.Style.BorderColor = "rgba(255, 255, 255, 0.5)"; break; //case FileExplorerState.HoverSelected: //case FileExplorerState.HoverFocused: // NodeBase.Style.BackgroundColor = "rgba(255, 255, 255, 0.4)"; // NodeBase.Style.BorderColor = "rgba(255, 255, 255, 0.6)"; // break; default: break; } }