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