diff --git a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor index 818def9..f22bb90 100644 --- a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor +++ b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor @@ -5,16 +5,30 @@

Counter

-

Current count: @currentCount

+

Current count: @_currentCount

+ + +
+

This text is inside a HotkeyManager container.

+
+

Hotkeys will only work here and not outer scope!

+
+

Try pressing: CTRL + U | If you need focus inside this container press the button below.

+ +
+
+
+ @code { - private int currentCount = 0; + private int _currentCount; private void IncrementCount() { - currentCount++; + _currentCount++; + InvokeAsync(StateHasChanged); } } \ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor.cs b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor.cs new file mode 100644 index 0000000..0b91cc0 --- /dev/null +++ b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Counter.razor.cs @@ -0,0 +1,19 @@ +using Microsoft.AspNetCore.Components; + +namespace Json_exe.Blazor.HotkeyManager.TestUI.Components.Pages; + +public partial class Counter : ComponentBase +{ + private readonly HotkeyManagerOptions _hotkeyManagerOptions = new() + { + Hotkeys = + [ + new Hotkey + { + Key = "U", + CtrlKey = true, + PreventDefault = true + } + ] + }; +} \ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor index af02058..181afbf 100644 --- a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor +++ b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor @@ -5,4 +5,22 @@

Hello, world!

-Welcome to your new app. \ No newline at end of file +Try pressing: +
    +
  1. + - CTRL + S +
  2. +
  3. + - CTRL + F +
  4. +
  5. + - SHIFT + S +
  6. +
+
+
+ +You pressed: +Key: @_hotkeyPressed +Shift: @_shiftKey +CTRL: @_ctrlKey \ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor.cs b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor.cs index 174a87c..66234d6 100644 --- a/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor.cs +++ b/Json_exe.Blazor.HotkeyManager.TestUI/Components/Pages/Home.razor.cs @@ -1,10 +1,14 @@ using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; namespace Json_exe.Blazor.HotkeyManager.TestUI.Components.Pages; public partial class Home : ComponentBase, IAsyncDisposable { - [Inject] private HotkeyManager HotkeyManager { get; set; } = default!; + [Inject] private HotkeyManager HotkeyManager { get; set; } = null!; + private string? _hotkeyPressed; + private bool _ctrlKey; + private bool _shiftKey; protected override async Task OnAfterRenderAsync(bool firstRender) { @@ -25,15 +29,32 @@ await HotkeyManager.Initialize(new HotkeyManagerOptions Key = "F", CtrlKey = true, PreventDefault = true + }, + new Hotkey + { + Key = "S", + ShiftKey = true, + PreventDefault = true } ] }); + HotkeyManager.OnHotkeyPressed += HotkeyManagerOnOnHotkeyPressed; } + await base.OnAfterRenderAsync(firstRender); } + private Task HotkeyManagerOnOnHotkeyPressed(KeyboardEventArgs e) + { + _hotkeyPressed = e.Key; + _ctrlKey = e.CtrlKey; + _shiftKey = e.ShiftKey; + return InvokeAsync(StateHasChanged); + } + public async ValueTask DisposeAsync() { + HotkeyManager.OnHotkeyPressed -= HotkeyManagerOnOnHotkeyPressed; await HotkeyManager.DisposeAsync(); } } \ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager.TestUI/Json_exe.Blazor.HotkeyManager.TestUI.csproj b/Json_exe.Blazor.HotkeyManager.TestUI/Json_exe.Blazor.HotkeyManager.TestUI.csproj index 53bf7f7..577fc86 100644 --- a/Json_exe.Blazor.HotkeyManager.TestUI/Json_exe.Blazor.HotkeyManager.TestUI.csproj +++ b/Json_exe.Blazor.HotkeyManager.TestUI/Json_exe.Blazor.HotkeyManager.TestUI.csproj @@ -1,6 +1,6 @@ - net9.0 + net8.0;net9.0 enable enable diff --git a/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor b/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor index 3b23a5a..198b203 100644 --- a/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor +++ b/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor @@ -1,3 +1,3 @@ -
+
@ChildContent
\ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor.cs b/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor.cs index 219475f..4c92303 100644 --- a/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor.cs +++ b/Json_exe.Blazor.HotkeyManager/HotkeyManagerContainer.razor.cs @@ -11,6 +11,16 @@ public sealed partial class HotkeyManagerContainer : ComponentBase, IAsyncDispos { [Inject] private HotkeyManager HotkeyManager { get; set; } = null!; + /// + /// Additional classes you want to apply to the container wrapping your child content. + /// + [Parameter] public string Class { get; set; } = string.Empty; + + /// + /// Additional styles you want to apply to the container wrapping your child content. + /// + [Parameter] public string Style { get; set; } = string.Empty; + /// /// The child content to be rendered. /// diff --git a/Json_exe.Blazor.HotkeyManager/HotkeyManagerOptions.cs b/Json_exe.Blazor.HotkeyManager/HotkeyManagerOptions.cs index 4c96b09..5056f52 100644 --- a/Json_exe.Blazor.HotkeyManager/HotkeyManagerOptions.cs +++ b/Json_exe.Blazor.HotkeyManager/HotkeyManagerOptions.cs @@ -16,7 +16,7 @@ public sealed record HotkeyManagerOptions /// The hotkeys you want the HotkeyManager to listen for. /// public IReadOnlyList Hotkeys { get; init; } = []; -}; +} /// /// Defines a hotkey that the Manager should look for. diff --git a/Json_exe.Blazor.HotkeyManager/Json_exe.Blazor.HotkeyManager.csproj b/Json_exe.Blazor.HotkeyManager/Json_exe.Blazor.HotkeyManager.csproj index a4c62fd..cbba44f 100644 --- a/Json_exe.Blazor.HotkeyManager/Json_exe.Blazor.HotkeyManager.csproj +++ b/Json_exe.Blazor.HotkeyManager/Json_exe.Blazor.HotkeyManager.csproj @@ -1,6 +1,6 @@ - net9.0 + net8.0;net9.0 enable enable true @@ -22,8 +22,11 @@ - - + + + + + diff --git a/Json_exe.Blazor.HotkeyManager/README.md b/Json_exe.Blazor.HotkeyManager/README.md index 1013efb..6b9c252 100644 --- a/Json_exe.Blazor.HotkeyManager/README.md +++ b/Json_exe.Blazor.HotkeyManager/README.md @@ -1,19 +1,45 @@ # Blazor Hotkey Manager -Blazor Hotkey Manager is a library for managing hotkeys in Blazor applications. It provides a simple and flexible way to handle keyboard shortcuts in your Blazor components. +Blazor Hotkey Manager is a library for managing hotkeys in Blazor applications. It provides a simple and flexible way to +handle keyboard shortcuts in your Blazor components. + +## Table of Contents + + +* [Blazor Hotkey Manager](#blazor-hotkey-manager) + * [Table of Contents](#table-of-contents) + * [Release-Notes](#release-notes) + * [Installation](#installation) + * [Building Locally](#building-locally) + * [How to use?](#how-to-use) + * [Contributing](#contributing) + * [Technologies Used](#technologies-used) + + +## Release-Notes + +For release notes please look here: https://github.com/Json-exe/Blazor.HotkeyManager/releases/latest + +--- ## Installation To install the NuGet package, run the following command in your NuGet Package Manager Console: ```sh -Install-Package Blazor.HotkeyManager +Install-Package Json_exe.Blazor.HotkeyManager +``` + +or + +```sh +dotnet add package Json_exe.Blazor.HotkeyManager ``` Alternatively, you can add the package reference directly to your .csproj file: ```cs - + ``` ## Building Locally @@ -23,7 +49,7 @@ To build the package locally, follow these steps: 1. Clone the repository: ```sh -git clone https://github.com/yourusername/Blazor.HotkeyManager.git +git clone https://github.com/Json-exe/Blazor.HotkeyManager.git ``` 2. Navigate to the project directory: @@ -44,54 +70,70 @@ dotnet restore dotnet build ``` +--- + ## How to use? + 1. Register the HotkeyManager on your Service provider: + ```csharp builder.Services.AddHotkeyManager(); ``` -2. To globally use the HotkeyManager in your program or on a whole page/layout, inject the HotkeyManager in your component: +2. To globally use the HotkeyManager in your program or on a whole page/layout, inject the HotkeyManager in your + component: + ```csharp [Inject] private HotkeyManager HotkeyManager {get; init;} ``` -3. In the OnAfterRender (or any other lifecycle method you like, that supports JSInterop), Initialize the HotkeyManager with your options like this: +3. In the OnAfterRender (or any other lifecycle method you like, that supports JSInterop), Initialize the HotkeyManager + with your options like this: + ```csharp - await HotkeyManager.Initialize(new HotkeyManagerOptions - { - Hotkeys = - [ - new Hotkey - { - Key = "S", - CtrlKey = true, - PreventDefault = true - }, - new Hotkey - { - Key = "F", - CtrlKey = true, - PreventDefault = true - } - ] - }); +await HotkeyManager.Initialize(new HotkeyManagerOptions +{ + Hotkeys = + [ + new Hotkey + { + Key = "S", + CtrlKey = true, + PreventDefault = true + }, + new Hotkey + { + Key = "F", + CtrlKey = true, + PreventDefault = true + } + ] +}); ``` 4. Register on the OnHotkeyPressed event of the HotkeyManager to recieve hotkey events: + ```csharp HotkeyManager.OnHotkeyPressed += OnHotkeyManagerOnHotkeyPressed; ``` -### Attention: Dont forget to Dispose the HotkeyManager and deregister afterwards when you are finished using it! Else it will lead to unexpected behaviour like your Hotkeys being triggered on another component. +> Attention: Don't forget to Dispose the HotkeyManager and deregister afterwards when you are finished using it! Else it +> will lead to unexpected behaviour like your Hotkeys being triggered on another component. + ```csharp HotkeyManager.OnHotkeyPressed -= OnHotkeyManagerOnHotkeyPressed; await HotkeyManager.DisposeAsync(); ``` +--- + ## Contributing -I welcome contributions from the community! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. Let's make Blazor Hotkey Manager better together! + +I welcome contributions from the community! If you have any ideas, suggestions, or bug reports, please open an issue or +submit a pull request. Let's make Blazor Hotkey Manager better together! ## Technologies Used + - Blazor: A framework for building interactive web UIs with C#. - .NET: A free, cross-platform, open-source developer platform for building many different types of applications. - NuGet: A package manager for .NET. diff --git a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js index be578fe..69ca6dd 100644 --- a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js +++ b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js @@ -34,7 +34,7 @@ function keyDownEvent(e) { if (options.hotkeys.length <= 0) { return; } - let hotkey = options.hotkeys.find(h => h.key.toLowerCase() === e.key && h.ctrlKey === e.ctrlKey && h.shiftKey === e.shiftKey); + let hotkey = options.hotkeys.find(h => h.key.toLowerCase() === e.key.toLowerCase() && h.ctrlKey === e.ctrlKey && h.shiftKey === e.shiftKey); if (hotkey !== undefined) { if (hotkey.preventDefault) { e.preventDefault(); diff --git a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js.map b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js.map index dd92a7e..8b12550 100644 --- a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js.map +++ b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.js.map @@ -1 +1 @@ -{"version":3,"file":"hotkeymanager.js","sourceRoot":"","sources":["hotkeymanager.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAI,aAAa,CAAC;AAClB,IAAI,OAA6B,CAAC;AAElC,MAAM,UAAU,WAAW,CAAC,qBAAqB,EAAE,oBAA0C;IACzF,aAAa,GAAG,qBAAqB,CAAC;IACtC,OAAO,GAAG,IAAI,oBAAoB,CAAC,oBAAoB,CAAC,SAAS,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACjG,IAAI,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;QAC7B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAChE,CAAC;AACL,CAAC;AAED,MAAM,UAAU,OAAO;IACnB,aAAa,GAAG,IAAI,CAAC;IACrB,IAAI,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC1D,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,GAAG,IAAI,CAAC;AACnB,CAAC;AAED,SAAe,YAAY,CAAC,CAAgB;;QACxC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC9B,OAAM;QACV,CAAC;QACD,IAAI,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC9H,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAA;YACtB,CAAC;YACD,MAAM,MAAM,GAAG;gBACX,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;gBACpB,GAAG,EAAE,CAAC,CAAC,GAAG;gBACV,IAAI,EAAE,CAAC,CAAC,IAAI;gBACZ,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;gBACpB,IAAI,EAAE,CAAC,CAAC,IAAI;aACf,CAAA;YACD,MAAM,aAAa,CAAC,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAC9D,CAAC;IACL,CAAC;CAAA;AAED,MAAM,oBAAoB;IAItB,YAAY,YAAyB,IAAI,EAAE,UAAoB,EAAE;QAC7D,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;CACJ;AAED,MAAM,MAAM;IAMR,YAAY,GAAW,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,GAAG,KAAK;QAC9E,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACzC,CAAC;CACJ"} \ No newline at end of file +{"version":3,"file":"hotkeymanager.js","sourceRoot":"","sources":["hotkeymanager.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAI,aAAa,CAAC;AAClB,IAAI,OAA6B,CAAC;AAElC,MAAM,UAAU,WAAW,CAAC,qBAAqB,EAAE,oBAA0C;IACzF,aAAa,GAAG,qBAAqB,CAAC;IACtC,OAAO,GAAG,IAAI,oBAAoB,CAAC,oBAAoB,CAAC,SAAS,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACjG,IAAI,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;QAC7B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAChE,CAAC;AACL,CAAC;AAED,MAAM,UAAU,OAAO;IACnB,aAAa,GAAG,IAAI,CAAC;IACrB,IAAI,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC1D,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,GAAG,IAAI,CAAC;AACnB,CAAC;AAED,SAAe,YAAY,CAAC,CAAgB;;QACxC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC9B,OAAM;QACV,CAAC;QACD,IAAI,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC5I,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAA;YACtB,CAAC;YACD,MAAM,MAAM,GAAG;gBACX,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;gBACpB,GAAG,EAAE,CAAC,CAAC,GAAG;gBACV,IAAI,EAAE,CAAC,CAAC,IAAI;gBACZ,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;gBACpB,IAAI,EAAE,CAAC,CAAC,IAAI;aACf,CAAA;YACD,MAAM,aAAa,CAAC,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAC9D,CAAC;IACL,CAAC;CAAA;AAED,MAAM,oBAAoB;IAItB,YAAY,YAAyB,IAAI,EAAE,UAAoB,EAAE;QAC7D,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;CACJ;AAED,MAAM,MAAM;IAMR,YAAY,GAAW,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,GAAG,KAAK;QAC9E,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACzC,CAAC;CACJ"} \ No newline at end of file diff --git a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.ts b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.ts index a0a4a7d..3b206f6 100644 --- a/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.ts +++ b/Json_exe.Blazor.HotkeyManager/wwwroot/hotkeymanager.ts @@ -26,7 +26,7 @@ async function keyDownEvent(e: KeyboardEvent) { if (options.hotkeys.length <= 0) { return } - let hotkey = options.hotkeys.find(h => h.key.toLowerCase() === e.key && h.ctrlKey === e.ctrlKey && h.shiftKey === e.shiftKey); + let hotkey = options.hotkeys.find(h => h.key.toLowerCase() === e.key.toLowerCase() && h.ctrlKey === e.ctrlKey && h.shiftKey === e.shiftKey); if (hotkey !== undefined) { if (hotkey.preventDefault) { e.preventDefault()