LearnBridgeNET-Archive/LearnBridgeNet/Views/EditorView.cs

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