From efab8272fc30132ff1f1b0752a02ad57c910d7de Mon Sep 17 00:00:00 2001 From: Major Date: Fri, 18 Dec 2020 18:10:11 +0100 Subject: [PATCH] Updated demo App. --- .../Blazor.Components.DemoApp.csproj | 22 +- .../Components/Index.razor | 14 +- .../Components/JSInterop.razor | 80 ++++- .../Components/Tabs.razor | 167 ++++++++++ .../Components/Toggle.razor | 292 ++++++++++++++++++ .../Components/Typeahead.razor | 12 +- .../Pages/TabsPage.razor | 3 + .../Pages/TogglePage.razor | 2 +- .../Shared/NavMenu.razor | 9 +- demo/Blazor.Components.DemoApp/_Imports.razor | 7 +- .../Components/Tabs.razor | 2 +- 11 files changed, 579 insertions(+), 31 deletions(-) create mode 100644 demo/Blazor.Components.DemoApp/Components/Tabs.razor create mode 100644 demo/Blazor.Components.DemoApp/Components/Toggle.razor create mode 100644 demo/Blazor.Components.DemoApp/Pages/TabsPage.razor diff --git a/demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj b/demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj index b0b9406b..c17ac11b 100644 --- a/demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj +++ b/demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj @@ -6,16 +6,18 @@ - - - - - - - - - - + + + + + + + + + + + + diff --git a/demo/Blazor.Components.DemoApp/Components/Index.razor b/demo/Blazor.Components.DemoApp/Components/Index.razor index d8ae5a20..ed8d8340 100644 --- a/demo/Blazor.Components.DemoApp/Components/Index.razor +++ b/demo/Blazor.Components.DemoApp/Components/Index.razor @@ -32,6 +32,7 @@
  • Focus Js
  • Element info Js
  • Scroll Js
    • +
  • Resize Js
  • Clipboard Js
    • @@ -50,7 +51,16 @@
  • Customizable PermaLinkElement
    • +
  • + Toggle +
      +
    • Toggle switch
      • +
    • Toggle button
      • +
    • Toggle button group
      • +
    +
    • +
  • Tabs
    • @*
  • Drag and Drop
    • -
  • Color Picker
    • *@ - +
  • Color Picker
    • +*@

    \ No newline at end of file diff --git a/demo/Blazor.Components.DemoApp/Components/JSInterop.razor b/demo/Blazor.Components.DemoApp/Components/JSInterop.razor index bb715f0f..16f03888 100644 --- a/demo/Blazor.Components.DemoApp/Components/JSInterop.razor +++ b/demo/Blazor.Components.DemoApp/Components/JSInterop.razor @@ -21,6 +21,7 @@
  • Focus Js
  • Element info Js
  • Scroll Js
    • +
  • Resize Js
  • Clipboard Js
    • @@ -182,12 +183,39 @@
    +
    + +

    Resize JS

     +     +

    + Resize JS is an injectable IResizeHandler service for Window (global) and HTML Elements resize event callback handlers. +

    + +
    +
    +

    RegisterPageResizeAsync() will add event listener to HTML document/window resize events.

    +

    RegisterResizeAsync() will add event listener to the given HTML Element resize events.

    + + +
    + + +
    + +
    + + +
    +
    + +
    +

    Clipboard JS

    - Clipboard JS is an injectable IClipboardHandler service for accessing computer Clipboard from Blazor Application. + Resize JS is an injectable IClipboardHandler service for accessing computer Clipboard from Blazor Application.

    @@ -213,6 +241,7 @@ @inject IScrollHandler _scrollHandler @inject IFocusHandler _focusHandler +@inject IResizeHandler _resizeHandler @inject IClickBoundariesHandler _clichHandler; @inject IClipboardHandler _clipboardHandler; @inject IGlobalMouseEventHandler _globalMouseEventHandler; @@ -224,6 +253,7 @@ await ScrollEventHandler(); await ClickEventHandler(); await GlobalClickEventHandler(); + await ResizeEventHandler(); } //Click examples @@ -248,7 +278,7 @@ } private async Task PageClick(MouseEventArgs args, string message) { - _logMessage += $"Page clicked {message} X pos: {args.ClientX}, Y pos: {args.ClientY}{Environment.NewLine}"; + _logMessage += $"{DateTime.Now.TimeOfDay}: Page clicked {message} X pos: {args.ClientX}, Y pos: {args.ClientY}{Environment.NewLine}"; StateHasChanged(); await _log.ScrollToEndAsync(); @@ -269,16 +299,16 @@ } else { - _mouseDown = await _globalMouseEventHandler.RegisterPageMouseDownAsync(async (args) => await PageMouseEvents(args, "Document Mouse DOWN")); - _mouseUp = await _globalMouseEventHandler.RegisterPageMouseUpAsync(async (args) => await PageMouseEvents(args, "Document Mouse UP")); - _mouseMove = await _globalMouseEventHandler.RegisterPageMouseMoveAsync(async (args) => await PageMouseEvents(args, "Document Mouse MOVE")); + _mouseDown = await _globalMouseEventHandler.RegisterPageMouseDownAsync(async (args) => await PageMouseEvents(args, "Mouse DOWN")); + _mouseUp = await _globalMouseEventHandler.RegisterPageMouseUpAsync(async (args) => await PageMouseEvents(args, "Mouse UP")); + _mouseMove = await _globalMouseEventHandler.RegisterPageMouseMoveAsync(async (args) => await PageMouseEvents(args, "Mouse MOVE")); } _clickSubscribed2 = !_clickSubscribed2; } private async Task PageMouseEvents(MouseEventArgs args, string message) { - _logMessage3 += $"Page clicked {message} X pos: {args.ClientX}, Y pos: {args.ClientY}, Buttons: {args.Buttons}{Environment.NewLine}"; + _logMessage3 += $"{DateTime.Now.TimeOfDay}: Global Mouse event: {message} X pos: {args.ClientX}, Y pos: {args.ClientY}, Buttons: {args.Buttons}{Environment.NewLine}"; StateHasChanged(); await _log3.ScrollToEndAsync(); @@ -290,7 +320,7 @@ { await _focusHandler.StoreFocusedElementAsync(); _focusMsg = "Focused element stored, click somewhere else and do not hover on RED area."; - } + } private async Task RestoreFocus() { await _focusHandler.RestoreStoredElementFocusAsync(); @@ -335,7 +365,7 @@ private string _logMessage2; private async Task PageScrolled(ScrollEventArgs args) { - _logMessage2 += $"Page scrolled: X pos: {args.X}, Y pos: {args.Y}{Environment.NewLine}"; + _logMessage2 += $"{DateTime.Now.TimeOfDay}: Page scrolled: X pos: {args.X}, Y pos: {args.Y}{Environment.NewLine}"; StateHasChanged(); await _log2.ScrollToEndAsync(); @@ -356,6 +386,35 @@ _scrollSubscribed = !_scrollSubscribed; } + //Resize JS + private bool _resizeSubscribed; + private async Task ResizeEventHandler() + { + if (_resizeSubscribed) + { + await _resizeHandler.RemovePageResizeAsync(_scrollEventId); + await _resizeHandler.RemoveResizeAsync(_resizeElement); + } + else + { + _scrollEventId = await _resizeHandler.RegisterPageResizeAsync(arg => Resized(arg, "Window resized")); + await _resizeHandler.RegisterResizeAsync(_resizeElement, arg => Resized(arg, "Textarea resized")); + } + + _resizeSubscribed = !_resizeSubscribed; + } + + private ElementReference _resizeElement; + private ElementReference _log4; + private string _logMessage4; + private async Task Resized(ResizeEventArgs args, string message) + { + _logMessage4 += $"{DateTime.Now.TimeOfDay}: {message} - Width: {args.Width}, Height: {args.Height}{Environment.NewLine}"; + StateHasChanged(); + + await _log4.ScrollToEndAsync(); + } + //Clipboard JS private ElementReference _copyInput; private string _codedString = "Copy string value form C# code..."; @@ -391,5 +450,10 @@ { await _clipboardHandler.DisposeAsync(); } + + if (_resizeHandler is not null) + { + await _resizeHandler.DisposeAsync(); + } } } \ No newline at end of file diff --git a/demo/Blazor.Components.DemoApp/Components/Tabs.razor b/demo/Blazor.Components.DemoApp/Components/Tabs.razor new file mode 100644 index 00000000..f5e2d2fa --- /dev/null +++ b/demo/Blazor.Components.DemoApp/Components/Tabs.razor @@ -0,0 +1,167 @@ +

    Tabs Components

    +

    + Blazor component that renders customizable Tabs element panel with many tabs and custom content. For usege see soruce code and docs on + Github. +
    Majorsoft.Blazor.Components.Tabs package is available on Nuget +

    + +
    +

    TabsPanel with TabItems

    +

    Renders TabsPanel container for TabItem components with custumizable header and content.

    + +
    +
    + Active tab color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Inactive tabs color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Tabs Hover color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Tab items Width (0 is auto): @(_width)px + +
    +
    +
    +
    + Tab items Height (0 is auto): @(_height)px + +
    +
    + +
    +
    + Number of tabs: @_tabsCount +
    + TabsPanel Disabled: + Disable Tab: +
    + Animate Tab changes: +
    +
    + +
    +
    + Tabs horizontal positon: +
    +
    + +
    +
    + + + +
    Tab 1
    + +

    The first tab

    +     +     + +
    Tab 2
    + +

    The second tab

    +     +     + +
    Can disable
    + +

    This tab can be disabled

    +

    And also any TabItem can be disabled by using Disabled property.

    +     +     + +
    Header icon
    + +

    Tab with icon in header

    +     +     +     +     +
    +
    + +
    +
    + + +
    +
    + +
    + +@using System.Linq; + +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await _tabs.InnerElementReference.FocusAsync(); + + //Group + _activeTab = _tab2; + _tabsCount = _tabs.TabCount; + StateHasChanged(); + } + } + + private string _activeColor = "DodgerBlue"; + private string _inactiveColor = "White"; + private string _hoverColor = "WhiteSmoke"; + private int _width = 135; + private int _height = 40; + private TabPositons _tabPositon = TabPositons.Left; + private bool _isAnimated = true; + private bool _allTabsDisabled = false; + private bool _isTabDisabled = false; + + private int _tabsCount; + + private TabsPanel _tabs; + private TabItem _activeTab; + private TabItem _tab1; + private TabItem _tab2; + private TabItem _tab3; + private TabItem _tab4; + + private ElementReference _log; + private string _tabsLog; + + private async Task OnTabChanged(TabItem tab) + { + _activeTab = tab; + var index = _tabs.Tabs.ToList().IndexOf(tab); + _tabsLog = await WriteLog(_tabsLog, $"Tab item activated event Active tab index: {index}"); + } + + private async Task WriteLog(string log, string message) + { + log += $"{DateTime.Now.TimeOfDay}: {message}. \r\n"; + await _log.ScrollToEndAsync(); + + return log; + } +} \ No newline at end of file diff --git a/demo/Blazor.Components.DemoApp/Components/Toggle.razor b/demo/Blazor.Components.DemoApp/Components/Toggle.razor new file mode 100644 index 00000000..fd20e641 --- /dev/null +++ b/demo/Blazor.Components.DemoApp/Components/Toggle.razor @@ -0,0 +1,292 @@ +

    Toggler Components

    +

    + Blazor component that renders customizable Toggle Switch and Toggle Button components. For usege see soruce code and docs on + Github. +
    Majorsoft.Blazor.Components.Toggle package is available on Nuget +

    + +
    + +

    Toggle switch

     +     +

    Renders HTML input styled as Toggle switch with customizable size and color, etc.

    + +
    +
    + Toggle switch On color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Toggle switch Off color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Toggle switch Width: @(_width)px + +
    +
    +
    +
    + Toggle switch Height: @(_height)px + +
    +
    + +
    +
    + Disabled: + Is Checked: +
    +
    + +
    +
    + Toggle switch Style: +
    +
    + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    +
    + +
    + +

    Toggle button

     +     +

    Renders HTML button styled as Toggle button with custom content and customizable size, color, etc.

    + +
    +
    + Toggle button On color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Toggle button Off color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Toggle button Hover color (Name, RGB, Hex, HSL): +
    +
    +
    +
    + Toggle button Width: @(_buttonWidth)px + +
    +
    +
    +
    + Toggle button Height: @(_buttonHeight)px + +
    +
    + +
    +
    + Disabled: + Is Checked: +
    +
    + +
    +
    + + + + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + Other Toggle button examples: + + B + + + I + + + U + +
    +
    + +
    + +
    + +

    Toggle button group

     +     +

    Renders a container for HTML button styled as Toggle button with custom content and customizable size, color, etc. Also allows only one toggle button to be Checked.

    + +
    +
    + Number of buttons: @_btnCount +
    + Disabled: + One button always must toggled: +
    +
    + +
    +
    + @*ToggleButtons can be configured as regular ToggleButton*@ + + + + 1 + + + 2 + + + 3 + + + +
    +
    + +
    +
    + + +
    +
    + +
    + +@using System.Linq; + +@code { + //Switch + private ToggleSwitch _toggleSwitch; + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await _toggleSwitch.InnerElementReference.FocusAsync(); + + //Group + _activeButton = _btn1; + _btnCount = _btnGroup.ButtonCount; + StateHasChanged(); + } + } + + private string _onColor = "DodgerBlue"; + private string _offColor = "DarkGray"; + private int _width = 50; + private int _height = 22; + private bool _isChecked = true; + private bool _disabled = false; + private ToggleSwitchStyle _styleType = ToggleSwitchStyle.Circle; + + private ElementReference _log1; + private string _swithch1Log; + + private async Task OnToggleSwitched(bool val) + { + _isChecked = val; + _swithch1Log = await WriteLog(_swithch1Log, $"Toggle Switched event currently Checked: {val}"); + } + + //Button + private ToggleButton _toggleButton; + + private string _buttonOnColor = "#5ec2f7"; + private string _buttonOffColor = "white"; + private string _buttonHoverColor = "WhiteSmoke"; + private int _buttonWidth = 30; + private int _buttonHeight = 30; + private bool _isButtonChecked = true; + private bool _buttonDisabled = false; + + private ElementReference _log2; + private string _button1Log; + + private async Task OnToggleClicked(bool val) + { + _isButtonChecked = val; + _button1Log = await WriteLog(_button1Log, $"Toggle Button event currently Checked: {val}"); + } + + //Button group + private ToggleButtonGroup _btnGroup; + private ToggleButton _activeButton; + private ToggleButton _btn1; + private ToggleButton _btn2; + private ToggleButton _btn3; + private bool _buttonGroupDisabled = false; + private bool _mustToggled = false; + private int _btnCount = 0; + private string _btnGroupOnColor = "#a4edd5"; + + private ElementReference _log3; + private string _buttonGroupLog; + + private async Task OnToggleGroupClicked(ToggleButton active) + { + _activeButton = active; + var index = _btnGroup.Buttons.ToList().IndexOf(active); + _buttonGroupLog = await WriteLog(_buttonGroupLog, $"Toggle Button group event Active button index: {index}"); + } + + + private async Task WriteLog(string log, string message) + { + log += $"{DateTime.Now.TimeOfDay}: {message}. \r\n"; + await _log1.ScrollToEndAsync(); + await _log2.ScrollToEndAsync(); + await _log3.ScrollToEndAsync(); + + return log; + } +} \ No newline at end of file diff --git a/demo/Blazor.Components.DemoApp/Components/Typeahead.razor b/demo/Blazor.Components.DemoApp/Components/Typeahead.razor index 4fc2c237..b17480d4 100644 --- a/demo/Blazor.Components.DemoApp/Components/Typeahead.razor +++ b/demo/Blazor.Components.DemoApp/Components/Typeahead.razor @@ -63,7 +63,7 @@ textarea {
    -
    +
    Model: "@(_selectedItem ?? _typeaheadInputValue)"
    @@ -153,7 +153,7 @@ textarea {
    -
    +
    Model: "@(_selectedItem2 != null ? JsonSerializer.Serialize(_selectedItem2) : _typeaheadInputValue2)"
    @@ -238,13 +238,13 @@ textarea {
    -
    +
    Model: "@(_selectedItem3 != null ? JsonSerializer.Serialize(_selectedItem3) : _typeaheadInputValue3)"
    -
    +
    -
    +
    Model: "@(_selectedItem4 != null ? JsonSerializer.Serialize(_selectedItem4) : _typeaheadInputValue4)"
    @@ -430,7 +430,7 @@ textarea {
    -
    +
    Model: "@(_selectedItem5 != null ? _selectedItem5 : exampleModel.State)"
    diff --git a/demo/Blazor.Components.DemoApp/Pages/TabsPage.razor b/demo/Blazor.Components.DemoApp/Pages/TabsPage.razor new file mode 100644 index 00000000..3e231bb7 --- /dev/null +++ b/demo/Blazor.Components.DemoApp/Pages/TabsPage.razor @@ -0,0 +1,3 @@ +@page "/tabs" + + \ No newline at end of file diff --git a/demo/Blazor.Components.DemoApp/Pages/TogglePage.razor b/demo/Blazor.Components.DemoApp/Pages/TogglePage.razor index c5933216..8858a528 100644 --- a/demo/Blazor.Components.DemoApp/Pages/TogglePage.razor +++ b/demo/Blazor.Components.DemoApp/Pages/TogglePage.razor @@ -1,6 +1,6 @@ @page "/toggle" - + @code { diff --git a/demo/Blazor.Components.DemoApp/Shared/NavMenu.razor b/demo/Blazor.Components.DemoApp/Shared/NavMenu.razor index 5f9bf83b..1b626bbf 100644 --- a/demo/Blazor.Components.DemoApp/Shared/NavMenu.razor +++ b/demo/Blazor.Components.DemoApp/Shared/NavMenu.razor @@ -77,7 +77,12 @@ Toggle -
  • +
  • + + Tabs + +
    • +@*
  • Drag and Drop @@ -86,7 +91,7 @@ Color Picker -
    • + *@
    diff --git a/demo/Blazor.Components.DemoApp/_Imports.razor b/demo/Blazor.Components.DemoApp/_Imports.razor index 571d876e..0625ff0c 100644 --- a/demo/Blazor.Components.DemoApp/_Imports.razor +++ b/demo/Blazor.Components.DemoApp/_Imports.razor @@ -26,9 +26,14 @@ @using Blazor.Components.Common.JsInterop.Scroll @using Blazor.Components.Common.JsInterop.Focus +@using Blazor.Components.Common.JsInterop.Resize @using Blazor.Components.Common.JsInterop.Click @using Blazor.Components.Common.JsInterop.ElementInfo @using Blazor.Components.Common.JsInterop.Clipboard @using Blazor.Components.Common.JsInterop.GlobalMouseEvents -@using Blazor.Components.PermaLink \ No newline at end of file +@using Blazor.Components.PermaLink + +@using Blazor.Components.Toggle + +@using Blazor.Components.Tabs \ No newline at end of file diff --git a/src/Blazor.Components.TestApps.Common/Components/Tabs.razor b/src/Blazor.Components.TestApps.Common/Components/Tabs.razor index 290840b6..f5e2d2fa 100644 --- a/src/Blazor.Components.TestApps.Common/Components/Tabs.razor +++ b/src/Blazor.Components.TestApps.Common/Components/Tabs.razor @@ -134,7 +134,7 @@ private int _width = 135; private int _height = 40; private TabPositons _tabPositon = TabPositons.Left; - private bool _isAnimated = false; + private bool _isAnimated = true; private bool _allTabsDisabled = false; private bool _isTabDisabled = false;