UI: More compact layour, auto-scroll to user in shares

radicale/web/internal_data/js/utils/url_text.js

@@ -25,6 +25,9 @@ import { SERVER } from "../constants.js";
  * Handles the display of URLs in input fields.
  */
 export class UrlTextHandler {
+    /** @type {?HTMLCanvasElement} */
+    static _canvas = null;
+
     /**
      * @param {HTMLInputElement} element The input element to handle.
      * @param {HTMLButtonElement} copyButton The button element for copying.
@@ -32,9 +35,14 @@ export class UrlTextHandler {
     constructor(element, copyButton) {
         this._element = element;
         this._copyButton = copyButton;
+        this._userIndex = -1;
 
         this._element.addEventListener("focusin", () => {
             this._element.setSelectionRange(0, 99999);
+            this._updateScroll();
+        });
+        this._element.addEventListener("focusout", () => {
+            this._updateScroll();
         });
 
         if (this._copyButton) {
@@ -42,6 +50,37 @@ export class UrlTextHandler {
         }
     }
 
+    _updateScroll() {
+        setTimeout(() => {
+            this._updateScroll_now();
+        }, 0);
+    }
+
+    /**
+     * Update the scroll position of the input field.
+     */
+    _updateScroll_now() {
+        if (this._userIndex === -1) {
+            this._element.scrollLeft = this._element.scrollWidth;
+            return;
+        }
+
+        let scrollPos = this._element.scrollWidth;
+        const value = this._element.value;
+        const style = window.getComputedStyle(this._element);
+        if (!UrlTextHandler._canvas) {
+            UrlTextHandler._canvas = document.createElement("canvas");
+        }
+        const context = UrlTextHandler._canvas.getContext("2d");
+        if (context) {
+            context.font = style.font;
+            const prefix = value.substring(0, this._userIndex);
+            scrollPos = context.measureText(prefix).width;
+        }
+
+        this._element.scrollLeft = scrollPos;
+    }
+
     /**
      * Copy the current value of the input to the clipboard.
      */
@@ -76,10 +115,33 @@ export class UrlTextHandler {
         } else {
             this._element.value = href;
         }
+        this._update_username_index();
+        this._updateScroll();
+    }
 
-        // Needs timeout to work correctly.
-        setTimeout(() => {
-            this._element.scrollLeft = this._element.scrollWidth;
-        }, 0);
+    /**
+     * Update the username index.
+     */
+    _update_username_index() {
+        const value = this._element.value;
+        this._userIndex = -1;
+        try {
+            const url = new URL(value);
+            const path = url.pathname;
+            const parts = path.split("/").filter(p => p !== "");
+            if (parts.length >= 2) {
+                const user = parts[parts.length - 2];
+                const search = "/" + user + "/";
+                const pathIndex = path.lastIndexOf(search);
+                if (pathIndex !== -1) {
+                    const fullIndex = value.lastIndexOf(path);
+                    if (fullIndex !== -1) {
+                        this._userIndex = fullIndex + pathIndex;
+                    }
+                }
+            }
+        } catch (e) {
+            this._userIndex = -1;
+        }
     }
 }