using Bridge.Html5;
using FrontendRouting;
using LearnBridgeNet.Components;
using LearnBridgeNet.Views.Basic;
using System;
using System.Linq;
using System.Reflection;
namespace LearnBridgeNet.Views
{
[FeRoute("/editor.html")]
internal class EditorView : AuthRequiredView
{
private readonly HTMLElement _view;
private readonly HTMLSelectElement _selectTheme;
private readonly HTMLSelectElement _selectMode;
private readonly HTMLInputElement _inputFontSize;
private readonly HTMLLabelElement _labelCharCount;
private HTMLDivElement _editorDom;
private AceEditor _editor;
private readonly Action _updateCharCountDebounced;
public EditorView()
{
//create dom tree
_view = new HTMLDivElement { ClassName = "editor-page" };
_view.AppendChild(new HTMLHeadingElement { TextContent = "Editor Page" });
var selectBar = new HTMLDivElement { ClassName = "select-bar" };
_selectTheme = new HTMLSelectElement();
_selectMode = new HTMLSelectElement();
_inputFontSize = new HTMLInputElement { Type = InputType.Number, Min = "5", Max = "50", Step = "5", Value = "16" };
_labelCharCount = new HTMLLabelElement { TextContent = "0" };
selectBar.AppendChild(new HTMLSpanElement { TextContent = "Theme:" });
selectBar.AppendChild(_selectTheme);
selectBar.AppendChild(new HTMLSpanElement { TextContent = "Mode:" });
selectBar.AppendChild(_selectMode);
selectBar.AppendChild(new HTMLSpanElement { TextContent = "Font Size:" });
selectBar.AppendChild(_inputFontSize);
selectBar.AppendChild(new HTMLSpanElement { TextContent = "Char Count:" });
selectBar.AppendChild(_labelCharCount);
_view.AppendChild(selectBar);
//init data
_selectTheme.SetOptions(typeof(AceEditorTheme).GetFields(BindingFlags.Static | BindingFlags.Public).Select(p => p.GetValue(null).ToString()));
_selectMode.SetOptions(typeof(AceEditorMode).GetFields(BindingFlags.Static | BindingFlags.Public).Select(p => p.GetValue(null).ToString()));
//assoc events
_selectTheme.AddEventListener(EventType.Change, SelectTheme_Changed);
_selectMode.AddEventListener(EventType.Change, SelectMode_Changed);
_inputFontSize.AddEventListener(EventType.Input, InputFontSize_Inputted);
_updateCharCountDebounced = LodashTypeDefine.Debounce(UpdateCharCount, 100);
}
private void Editor_Change(object sender, EventArgs e)
{
_updateCharCountDebounced();
}
private void UpdateCharCount() => _labelCharCount.TextContent = _editor.Value.Length.ToString("N0");
private void SelectTheme_Changed(Event arg)
{
if (Enum.TryParse(_selectTheme.Value, out AceEditorTheme aet))
_editor.Theme = aet;
}
private void SelectMode_Changed(Event arg)
{
if (Enum.TryParse(_selectMode.Value, out AceEditorMode aem))
_editor.Mode = aem;
}
private void InputFontSize_Inputted(Event arg)
{
if (int.TryParse(_inputFontSize.Value, out var fs))
_editor.FontSize = fs;
}
public override void Enter(Node parent)
{
parent.AppendChild(_view);
if (null != _editor) return;
_editorDom = new HTMLDivElement();
_view.AppendChild(_editorDom);
_editor = new AceEditor(_editorDom);
_editor.AddClass("ace-editor");
_editor.Change += Editor_Change;
_editor.Value = "asdf";
}
public override void Leave()
{
_view.Remove();
}
}
}