WIP Splitter component

Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor

@@ -415,6 +415,36 @@
         </Card>
     </Column>
 </Row>
+<Row Margin="Margin.Is4.OnY">
+    <Column ColumnSize="ColumnSize.IsHalf">
+        <Card>
+            <CardHeader>
+                <CardTitle>Horizontal Splitter</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <div style="width:100%; height: 200px;display:flex;">
+                    <div style="width:calc(50% - 10px); height: 100%; background-color: forestgreen;"></div>
+                    <Splitter Orientation="Orientation.Horizontal" />
+                    <div style="width:50%; height: 100%; background-color: cornflowerblue;"></div>
+                </div>
+            </CardBody>
+        </Card>
+    </Column>
+    <Column ColumnSize="ColumnSize.IsHalf">
+        <Card>
+            <CardHeader>
+                <CardTitle>Vertical Splitter</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <div style="width:100%; height:200px;">
+                    <div style="width:100%; height: calc(50% - 10px); background-color: forestgreen;"></div>
+                    <Splitter Orientation="Orientation.Vertical" />
+                    <div style="width:100%; height: 50%; background-color: cornflowerblue;"></div>
+                </div>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
 <Snackbar @ref="snackbar">
     <SnackbarBody>
         Single line of text directly related to the operation performed

Source/Blazorise/IJSRunner.cs

@@ -28,6 +28,8 @@ public interface IJSRunner
 
         ValueTask<bool> InitializeButton( ElementReference elementRef, string elementId, bool preventDefaultSubmit );
 
+        ValueTask<bool> InitializeSplitter( ElementReference elementRef, string elementId, object options );
+
         ValueTask<bool> DestroyButton( string elementId );
 
         ValueTask<bool> AddClass( ElementReference elementRef, string classname );

Source/Blazorise/JSRunner.cs

@@ -76,6 +76,11 @@ public virtual ValueTask<bool> InitializeButton( ElementReference elementRef, st
             return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.button.initialize", elementRef, elementId, preventDefaultSubmit );
         }
 
+        public virtual ValueTask<bool> InitializeSplitter( ElementReference elementRef, string elementId, object options )
+        {
+            return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.splitter.initialize", elementRef, elementId, options );
+        }
+
         public ValueTask<bool> DestroyButton( string elementId )
         {
             return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.button.destroy", elementId );

Source/Blazorise/Splitter.razor

@@ -0,0 +1,11 @@
+@inherits BaseComponent
+@if ( !HasCustomRegistration )
+{
+    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+        @ChildContent
+    </div>
+}
+else
+{
+    @RenderCustomComponent()
+}

Source/Blazorise/Splitter.razor.cs

@@ -0,0 +1,96 @@
+#region Using directives
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Globalization;
+using System.Threading.Tasks;
+using Blazorise.Utils;
+using Microsoft.AspNetCore.Components;
+#endregion
+
+namespace Blazorise
+{
+    public partial class Splitter : BaseComponent
+    {
+        #region Members
+
+        private int thickness = 5;
+
+        private Orientation orientation = Orientation.Horizontal;
+
+        #endregion
+
+        #region Methods
+
+        protected override async Task OnAfterRenderAsync( bool firstRender )
+        {
+            if ( firstRender )
+            {
+                await JSRunner.InitializeSplitter( ElementRef, ElementId, new
+                {
+                    Orientation = Orientation == Orientation.Vertical ? "Vertical" : "Horizontal",
+                    Thickness,
+                } );
+            }
+
+            await base.OnAfterRenderAsync( firstRender );
+        }
+
+        protected override void BuildClasses( ClassBuilder builder )
+        {
+            builder.Append( "b-splitter" );
+            builder.Append( $"b-splitter-{( Orientation == Orientation.Vertical ? "vertical" : "horizontal" )}" );
+
+            base.BuildClasses( builder );
+        }
+
+        protected override void BuildStyles( StyleBuilder builder )
+        {
+            if ( Orientation == Orientation.Vertical )
+            {
+                builder.Append( $"width: 100% !important;height:{Thickness}px;" );
+            }
+            else
+            {
+                builder.Append( $"width: {Thickness}px;height: 100% !important;" );
+            }
+
+            base.BuildStyles( builder );
+        }
+
+        #endregion
+
+        #region Properties
+
+        [Parameter]
+        public int Thickness
+        {
+            get => thickness;
+            set
+            {
+                thickness = value;
+
+                DirtyStyles();
+            }
+        }
+
+        [Parameter]
+        public Orientation Orientation
+        {
+            get => orientation;
+            set
+            {
+                orientation = value;
+
+                DirtyClasses();
+            }
+        }
+
+        /// <summary>
+        /// Splitter content.
+        /// </summary>
+        [Parameter] public RenderFragment ChildContent { get; set; }
+
+        #endregion
+    }
+}

Source/Blazorise/Styles/blazorise.scss

@@ -8,6 +8,7 @@
 @import "layout";
 
 @import "bar";
+@import "splitter";
 
 .b-character-casing-lower {
     text-transform: lowercase;

Source/Blazorise/Styles/splitter.scss

@@ -0,0 +1,16 @@
+.b-splitter {
+    user-select: none;
+    touch-action: none;
+
+    &.b-splitter-horizontal {
+        top: 0;
+        right: 0;
+        cursor: w-resize;
+    }
+
+    &.b-splitter-vertical {
+        left: 0;
+        bottom: 0;
+        cursor: s-resize;
+    }
+}

Source/Blazorise/wwwroot/blazorise.css

@@ -763,6 +763,18 @@
         .b-bar-vertical-inline:not([data-collapse]) .b-bar-mobile-toggle {
             display: flex; } }
 
+.b-splitter {
+    user-select: none;
+    touch-action: none; }
+    .b-splitter.b-splitter-horizontal {
+        top: 0;
+        right: 0;
+        cursor: w-resize; }
+    .b-splitter.b-splitter-vertical {
+        left: 0;
+        bottom: 0;
+        cursor: s-resize; }
+
 .b-character-casing-lower {
     text-transform: lowercase; }
 

Source/Blazorise/wwwroot/blazorise.js

@@ -567,6 +567,83 @@ window.blazorise = {
         onBreakpoint: (dotnetAdapter, currentBreakpoint) => {
             dotnetAdapter.invokeMethodAsync('OnBreakpoint', currentBreakpoint);
         }
+    },
+
+    splitter: {
+        initialize: (element, elementId, options) => {
+            const prevSibling = element.previousElementSibling;
+            const nextSibling = element.nextElementSibling;
+
+            //// Set the height
+            //if (options.orientation === "Horizontal") {
+            //    element.style.height = `${element.offsetHeight}px`;
+            //}
+            //else {
+            //    element.style.height = `${element.offsetHeight}px`;
+            //}
+
+            // Track the current position of mouse
+            let x = 0;
+            let y = 0;
+            let prevSiblingWidth = 0;
+            let nextSiblingWidth = 0;
+            let prevSiblingHeight = 0;
+            let nextSiblingHeight = 0;
+
+            const mouseDownHandler = function (e) {
+                // Get the current mouse position
+                x = e.clientX;
+                y = e.clientY;
+
+                // Calculate the current width of siblings
+                const prevSiblingStyles = window.getComputedStyle(prevSibling);
+                const nextSiblingStyles = window.getComputedStyle(nextSibling);
+
+                prevSiblingWidth = parseInt(prevSiblingStyles.width, 10);
+                nextSiblingWidth = parseInt(nextSiblingStyles.width, 10);
+
+                prevSiblingHeight = parseInt(prevSiblingStyles.height, 10);
+                nextSiblingHeight = parseInt(nextSiblingStyles.height, 10);
+
+                // Attach listeners for document's events
+                document.addEventListener('pointermove', mouseMoveHandler);
+                document.addEventListener('pointerup', mouseUpHandler);
+
+                element.classList.add('b-splitter-resizing');
+            };
+
+            const mouseMoveHandler = function (e) {
+                // Determine how far the mouse has been moved
+                const prevSiblingDeltaX = e.clientX - x;
+                const nextSiblingDeltaX = e.clientX - x;
+
+                const prevSiblingDeltaY = e.clientY - y;
+                const nextSiblingDeltaY = e.clientY - y;
+
+                if (options.orientation === "Horizontal") {
+                    // Update the width of siblings
+                    prevSibling.style.width = `${prevSiblingWidth + prevSiblingDeltaX}px`;
+                    nextSibling.style.width = `${nextSiblingWidth - nextSiblingDeltaX}px`;
+                }
+                else {
+                    // Update the height of siblings
+                    prevSibling.style.height = `${prevSiblingHeight + prevSiblingDeltaY}px`;
+                    nextSibling.style.height = `${nextSiblingHeight - nextSiblingDeltaY}px`;
+                }
+            };
+
+            // When user releases the mouse, remove the existing event listeners
+            const mouseUpHandler = function () {
+                element.classList.remove('b-splitter-resizing');
+
+                document.removeEventListener('pointermove', mouseMoveHandler);
+                document.removeEventListener('pointerup', mouseUpHandler);
+            };
+
+            element.addEventListener('pointerdown', mouseDownHandler);
+
+            return true;
+        }
     }
 };