diff libervia/web/pages/_browser/tools.py @ 1625:698eaabfca0e

browser (chat): side/panel and keyword handling: - `dialog.Modal` can now be used with a `position` argument. The default `center` keeps the old behaviour of modal in the middle of the screen, while using one of the direction makes the modal appear from top/bottom/right/left with an animation. The closing cross has been removed in favor of clicking/touching any part outside of the modal. - A method to create mockup clones of elements is now used to make placeholders. It is used for the input panel in the main area when it is moved to a sub-panel modal, this way there is not element disappearing. - Clicking on a keyword now shows a sub-messages panel with all messages with this keyword, in a similar way as for threads. Writing a messages there will add the keyword automatically. - Sub-messages panel will auto-scroll when messages are added. rel 458
author Goffi <goffi@goffi.org>
date Fri, 06 Jun 2025 11:08:05 +0200
parents 3a60bf3762ef
children
line wrap: on
line diff
--- a/libervia/web/pages/_browser/tools.py	Wed May 21 15:58:56 2025 +0200
+++ b/libervia/web/pages/_browser/tools.py	Fri Jun 06 11:08:05 2025 +0200
@@ -1,15 +1,32 @@
 """Common useful tools"""
-from browser import window
+from browser import window, html
 
 
 def is_touch_device():
     return hasattr(window, 'ontouchstart')
 
 
-
 def remove_ids(element):
     """Recursively remove "id" attribute of element and all its descendants."""
     element.removeAttribute('id')
 
     for child in element.children:
         remove_ids(child)
+
+
+def make_placeholder(original_elt, placeholder_class="visual-placeholder"):
+    """Create a visual placeholder that matches an element's appearance.
+
+    The placeholder will be a clone of the original element but without any ID attributes
+    to prevent DOM conflicts.
+
+    @param original_elt: Element to create placeholder for.
+    @param placeholder_class: CSS class to add to placeholder element.
+    @return: Placeholder element.
+    """
+    placeholder = original_elt.cloneNode(True)
+    remove_ids(placeholder)
+    placeholder.classList.add(placeholder_class)
+    placeholder.attrs["aria-hidden"] = "true"
+    placeholder.attrs["data-placeholder-for"] = original_elt.id or ""
+    return placeholder