Merge pull request #37 from majorimi/dev/color

Updated Demo app.

demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj

@@ -6,15 +6,16 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Majorsoft.Blazor.Components.Common.JsInterop" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.CssEvents" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.Debounce" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.Loading" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.Modal" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.PermaLink" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.Timer" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.Components.Typeahead" Version="0.9.52-rc.2.20479.15" />
-    <PackageReference Include="Majorsoft.Blazor.WebAssembly.Logging.Console" Version="0.9.52-rc.2.20479.15" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Common.JsInterop" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.CssEvents" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Debounce" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Loading" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Modal" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.PermaLink" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Timer" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Components.Typeahead" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.Server.Logging.Console" Version="1.0.0" />
+    <PackageReference Include="Majorsoft.Blazor.WebAssembly.Logging.Console" Version="1.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
     <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />

demo/Blazor.Components.DemoApp/Components/ColorPicker.razor

@@ -0,0 +1,65 @@
+<style>
+textarea {
+	height: 150px !important;
+}
+</style>
+
+<h1>Html Color Picker control</h1>
+<p>
+	Blazor components that renders a Blazor Color Picker control with color info. For usege see soruce code and docs on
+	<a href="https://github.com/majorimi/blazor-components/blob/master/.github/docs/ColorPicker.md" target="_blank">Github</a>.
+	<br /><strong>Majorsoft.Blazor.Components.ColorPicker</strong> package is available on <a href="https://www.nuget.org/packages/Majorsoft.Blazor.Components.ColorPicker" target="_blank">Nuget</a>
+</p>
+
+<div class="container-fluid p-3 mb-3 border rounded">
+	<h3>Html Color Picker raw container alone</h3>
+	<p>
+	 This example shows the <strong>raw</strong> Color Picker container alone: HSL color slider and bilinear interpolated color selector area with optional Info section.
+	</p>
+
+	<div class="row pb-2">
+		<div class="col-12 col-lg-8 col-xl-5">
+			Show info area: <input class="mr-3" type="checkbox" @bind="_showInfo"/>
+		</div>
+	</div>
+
+	<div class="row pb-2">
+		<div class="col-12">
+			<HslColorSelector
+				SelectedColor="@_selectedColor"
+				ShowInfoArea="_showInfo"
+				HueSliderWidth="_sliderlWidth"
+				HueAreaHeight="_panelHeight"
+				HueAreaWidth="_panelWidth"
+				OnColorChanged="ColorSelected">
+			</HslColorSelector>
+		</div>
+	</div>
+
+	<div class="row pb-2">
+		<div class="col-12">
+			<label><strong>Events log</strong>:</label>
+			<textarea @ref="_log" @bind="_logMessage" class="form-control w-100 logText" readonly></textarea>
+		</div>
+	</div>
+</div>
+
+@using System.Drawing
+
+@code {
+	private int _panelHeight = 250;
+	private int _panelWidth = 450;
+	private int _sliderlWidth = 450;
+	private bool _showInfo = true;
+
+	private System.Drawing.Color _selectedColor = System.Drawing.Color.FromArgb(66, 135, 245);
+
+	private ElementReference _log;
+	private string _logMessage;
+
+	private async Task ColorSelected(Color color)
+	{
+		_logMessage += $"Color Selected: {color} {Environment.NewLine}";
+		await _log.ScrollToEndAsync();
+	}
+}

demo/Blazor.Components.DemoApp/Components/DragAndDrop.razor

@@ -0,0 +1,5 @@
+<h3>DragAndDrop</h3>
+
+@code {
+
+}

demo/Blazor.Components.DemoApp/Components/Index.razor

@@ -28,6 +28,7 @@
 			<NavLink href="jsinterop">Js Interop controls and extensions</NavLink>
 			<ul>
 				<li><NavLink href="jsinterop#click-js">Click Js</NavLink></li>
+				<li><NavLink href="jsinterop#mouse-js">Mouse Js</NavLink></li>
 				<li><NavLink href="jsinterop#focus-js">Focus Js</NavLink></li>
 				<li><NavLink href="jsinterop#info-js">Element info Js</NavLink></li>
 				<li><NavLink href="jsinterop#scroll-js">Scroll Js</NavLink></li>
@@ -49,6 +50,7 @@
 				<li><NavLink href="permalink#PermaLink-Element-wrapper">Customizable PermaLinkElement</NavLink></li>
 			</ul>
 		</li>
-		<li><NavLink href="color">Color Picker</NavLink></li>
+		<li><NavLink href="draganddrop">Drag and Drop</NavLink></li>
+		<li><NavLink href="colorpicker">Color Picker</NavLink></li>
 	</ul>
 </p>

demo/Blazor.Components.DemoApp/Components/JSInterop.razor

@@ -17,6 +17,7 @@
 	<h3>JS Interop features:</h3>
 	<ul>
 		<li><NavLink href="jsinterop#click-js">Click Js</NavLink></li>
+		<li><NavLink href="jsinterop#mouse-js">Mouse Js</NavLink></li>
 		<li><NavLink href="jsinterop#focus-js">Focus Js</NavLink></li>
 		<li><NavLink href="jsinterop#info-js">Element info Js</NavLink></li>
 		<li><NavLink href="jsinterop#scroll-js">Scroll Js</NavLink></li>
@@ -29,7 +30,6 @@
 		<Content><h3>Click JS</h3></Content>
 	</PermaLinkElement>
 	<p>
-		<strong>Click JS</strong> is a convenient Blazor component which wraps the given content to a DIV and <strong>subscribes</strong> to all 
 		<strong>Click JS</strong> is a convenient Blazor component which wraps the given content to a DIV and <strong>subscribes</strong> to all 
 		click events: <code>OnOutsideClick</code>, <code>OnInsideClick</code>. Component will also dispose resources. 
 		Also an <strong>injectable <code>IClickBoundariesHandler</code> service</strong> for callback event handlers.
@@ -63,6 +63,29 @@
 	</div>
 </div>
 
+<div class="container-fluid p-3 mb-3 border rounded">
+	<PermaLinkElement PermaLinkName="mouse-js" IconMarginTop="8" IconSize="18">
+		<Content><h3>Global Mouse JS</h3></Content>
+	</PermaLinkElement>
+	<p>
+		<strong>Global Mouse JS</strong> is an <strong>injectable <code>IGlobalMouseEventHandler</code> service</strong> for global mouse callback event handlers.
+		<br />
+			Blazor supports <code>@@onclick</code>, <code>@@onmousemove</code>, etc. events but only for Blazor rendered elements. With this service you can get similar event notifications
+			for the whole <strong>document/window</strong>.
+	</p>
+
+	<div class="row pb-2">
+		<div class="col-12">
+			<p><code>RegisterPageMouseDownAsync()</code>, <code>RegisterPageMouseUpAsync()</code>, <code>RegisterPageMouseMoveAsync()</code> will add event listeners to HTML document/window <code>mouse</code> events.</p>
+			<button class="btn btn-primary" @onclick="GlobalClickEventHandler">@(_clickSubscribed ? "Unsubscribe from all event" : "Subscribe to all event")</button>
+			<br />
+
+			<label><strong>Global Mouse events log</strong>:</label>
+			<textarea @ref="_log3" @bind="_logMessage3" class="form-control w-100 logText" readonly></textarea>
+		</div>
+	</div>
+</div>
+
 <div class="container-fluid p-3 mb-3 border rounded">
 	<PermaLinkElement PermaLinkName="focus-js" IconMarginTop="8" IconSize="18">
 		<Content><h3>Focus JS</h3></Content>
@@ -192,13 +215,15 @@
 @inject IFocusHandler _focusHandler
 @inject IClickBoundariesHandler _clichHandler;
 @inject IClipboardHandler _clipboardHandler;
+@inject IGlobalMouseEventHandler _globalMouseEventHandler;
 
 @code {
 	private string _scrollEventId = null;
 	protected override async Task OnInitializedAsync()
 	{
 		await ScrollEventHandler();
 		await ClickEventHandler();
+		await GlobalClickEventHandler();
 	}
 
 	//Click examples
@@ -229,6 +254,36 @@
 		await _log.ScrollToEndAsync();
 	}
 
+	//Mouse examples
+	private ElementReference _log3;
+	private string _logMessage3;
+	private bool _clickSubscribed3;
+	private string _mouseDown, _mouseUp, _mouseMove;
+	private async Task GlobalClickEventHandler()
+	{
+		if (_clickSubscribed3)
+		{
+			await _globalMouseEventHandler.RemovePageMouseDownAsync(_mouseDown);
+			await _globalMouseEventHandler.RemovePageMouseUpAsync(_mouseUp);
+			await _globalMouseEventHandler.RemovePageMouseMoveAsync(_mouseMove);
+		}
+		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"));
+		}
+
+		_clickSubscribed3 = !_clickSubscribed3;
+	}
+	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}";
+		StateHasChanged();
+
+		await _log3.ScrollToEndAsync();
+	}
+
 	//Focus examples
 	private string _focusMsg;
 	private async Task StoreFocus()

demo/Blazor.Components.DemoApp/Components/Permalink.razor

@@ -27,6 +27,7 @@ textarea {
 			<NavLink href="jsinterop">Js Interop controls and extensions</NavLink>
 			<ul>
 				<li><NavLink href="jsinterop#click-js">Click Js</NavLink></li>
+				<li><NavLink href="jsinterop#mouse-js">Mouse Js</NavLink></li>
 				<li><NavLink href="jsinterop#focus-js">Focus Js</NavLink></li>
 				<li><NavLink href="jsinterop#info-js">Element info Js</NavLink></li>
 				<li><NavLink href="jsinterop#scroll-js">Scroll Js</NavLink></li>
@@ -128,7 +129,7 @@ textarea {
 	<div class="row pb-2">
 		<div class="col-12">
 			<label><strong>Event log</strong>:</label>
-			<textarea @ref="_divLog" @bind="_log" class="form-control w-100" readonly></textarea>
+			<textarea @ref="_log" @bind="_logMessage" class="form-control w-100" readonly></textarea>
 		</div>
 	</div>
 </div>
@@ -139,12 +140,12 @@ textarea {
 	private PermaLinkStyle _iconStyle;
 	private int _action = (int)PermaLinkIconActions.Copy;
 
-	private string _log;
-	private ElementReference _divLog;
+	private string _logMessage;
+	private ElementReference _log;
 
 	private async Task LinkCopied(string uri)
 	{
-		_log += $"Link copied URL: {uri} {Environment.NewLine}";
-		await _divLog.ScrollToEndAsync();
+		_logMessage += $"Link copied URL: {uri} {Environment.NewLine}";
+		await _log.ScrollToEndAsync();
 	}
 }

demo/Blazor.Components.DemoApp/Pages/ColorPickerPage.razor

@@ -0,0 +1,7 @@
+@page "/colorpicker"
+
+<ColorPicker />
+
+@code {
+
+}

demo/Blazor.Components.DemoApp/Pages/DragAndDropPage.razor

@@ -0,0 +1,7 @@
+@page "/draganddrop"
+
+<DragAndDrop />
+
+@code {
+
+}

demo/Blazor.Components.DemoApp/Program.cs

@@ -1,11 +1,8 @@
 using System;
-using System.Collections.Generic;
 using System.Net.Http;
-using System.Text;
 using System.Threading.Tasks;
 
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
 
@@ -30,9 +27,9 @@ public static async Task Main(string[] args)
 			builder.Services.AddPermaLinkWatcher();
 
 			builder.Logging.AddBrowserConsole()
-				.SetMinimumLevel(LogLevel.Debug);
+				.SetMinimumLevel(LogLevel.Debug).AddFilter("Microsoft", LogLevel.Information);
 
 			await builder.Build().RunAsync();
 		}
 	}
-}
+}

demo/Blazor.Components.DemoApp/Shared/NavMenu.razor

@@ -23,7 +23,7 @@
                         <li class="nav-item">
                             <NavLink class="nav-link" href="logger">Console logger</NavLink>
                         </li>
-                        <li class="nav-item">
+                        <li class="nav-item" hidden="true">
                             <NavLink class="nav-link" href="storage">Browser strorage</NavLink>
                         </li>
                     </ul>
@@ -72,13 +72,13 @@
                     <span class="fa fa-lg fa-link" aria-hidden="true"></span> Perma link
                 </NavLink>
             </li>
-            <li class="nav-item px-2">
+            <li class="nav-item px-2" hidden="true">
                 <NavLink class="nav-link" href="draganddrop">
                     <span class="fa fa-lg fa-arrows-alt" aria-hidden="true"></span> Drag and Drop
                 </NavLink>
             </li>
-            <li class="nav-item px-2">
-                <NavLink class="nav-link" href="color">
+            <li class="nav-item px-2" hidden="true">
+                <NavLink class="nav-link" href="colorpicker">
                     <span class="fa fa-lg fa-paint-brush" aria-hidden="true"></span> Color Picker
                 </NavLink>
             </li>

demo/Blazor.Components.DemoApp/_Imports.razor

@@ -29,5 +29,6 @@
 @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