From 1d769bbfc56fee5aee63da64f0cf0c77c7f23c5c Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:41:23 +0200
Subject: [PATCH] add arrow key movement

---
 .../split-panel/split-panel.element.ts        | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
index f7688b0081..06f5811f21 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
@@ -222,6 +222,24 @@ export class UmbSplitPanelElement extends LitElement {
 		this.#connect();
 	}
 
+	#onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			const { width } = this.mainElement.getBoundingClientRect();
+			const divider = this.dividerElement.getBoundingClientRect();
+
+			const dividerPos = divider.left - this.mainElement.getBoundingClientRect().left;
+			const percentageFromWidth = (dividerPos / width) * 100;
+
+			const multiplier = event.shiftKey ? 10 : 1;
+			const step = 1 * multiplier * (event.key === 'ArrowLeft' ? -1 : 1);
+
+			const newPercent = percentageFromWidth + step;
+			const toPixels = (newPercent / 100) * this.mainElement.getBoundingClientRect().width;
+
+			this.#setPosition(toPixels);
+		}
+	}
+
 	render() {
 		return html`
 			<div id="main">
@@ -230,7 +248,7 @@ export class UmbSplitPanelElement extends LitElement {
 					@slotchange=${this.#onSlotChanged}
 					style="width: ${this._hasStartPanel ? '100%' : '0'}"></slot>
 				<div id="divider">
-					<div id="divider-touch-area" tabindex="0"></div>
+					<div id="divider-touch-area" tabindex="0" @keydown=${this.#onKeydown}></div>
 				</div>
 				<slot name="end" @slotchange=${this.#onSlotChanged} style="width: ${this._hasEndPanel ? '100%' : '0'}"></slot>
 			</div>