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