Added first controls

src/myfasthtml/controls/Dropdown.py

@@ -0,0 +1,94 @@
+from fastcore.xml import FT
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.Mouse import Mouse
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import MultipleInstance
+
+
+class Commands(BaseCommands):
+  def close(self):
+    return Command("Close", "Close Dropdown", self._owner.close).htmx(target=f"#{self._owner.get_id()}-content")
+  
+  def click(self):
+    return Command("Click", "Click on Dropdown", self._owner.on_click).htmx(target=f"#{self._owner.get_id()}-content")
+
+
+class DropdownState:
+  def __init__(self):
+    self.opened = False
+
+
+class Dropdown(MultipleInstance):
+  def __init__(self, parent, content=None, button=None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.button = Div(button) if not isinstance(button, FT) else button
+    self.content = content
+    self.commands = Commands(self)
+    self._state = DropdownState()
+    self._toggle_command = self.commands.toggle()
+  
+  def toggle(self):
+    self._state.opened = not self._state.opened
+    return self._mk_content()
+  
+  def close(self):
+    self._state.opened = False
+    return self._mk_content()
+  
+  def on_click(self, combination, is_inside: bool):
+    if combination == "click":
+      self._state.opened = is_inside
+    return self._mk_content()
+  
+  def _mk_content(self):
+    return Div(self.content,
+               cls=f"mf-dropdown {'is-visible' if self._state.opened else ''}",
+               id=f"{self._id}-content"),
+  
+  def render(self):
+    return Div(
+      Div(
+        Div(self.button) if self.button else Div("None"),
+        self._mk_content(),
+        cls="mf-dropdown-wrapper"
+      ),
+      Keyboard(self, "-keyboard").add("esc", self.commands.close()),
+      Mouse(self, "-mouse").add("click", self.commands.click()),
+      id=self._id
+    )
+  
+  def __ft__(self):
+    return self.render()
+
+# document.addEventListener('htmx:afterSwap', function(event) {
+#     const targetElement = event.detail.target; // L'élément qui a été mis à jour (#popup-unique-id)
+#
+#     // Vérifie si c'est bien notre popup
+#     if (targetElement.classList.contains('mf-popup-container')) {
+#
+#         // Trouver l'élément déclencheur HTMX (le bouton existant)
+#         // HTMX stocke l'élément déclencheur dans event.detail.elt
+#         const trigger = document.querySelector('#mon-bouton-existant');
+#
+#         if (trigger) {
+#             // Obtenir les coordonnées de l'élément déclencheur par rapport à la fenêtre
+#             const rect = trigger.getBoundingClientRect();
+#
+#             // L'élément du popup à positionner
+#             const popup = targetElement;
+#
+#             // Appliquer la position au conteneur du popup
+#             // On utilise window.scrollY pour s'assurer que la position est absolue par rapport au document,
+#             // et non seulement à la fenêtre (car le popup est en position: absolute, pas fixed)
+#
+#             // Top: Juste en dessous de l'élément déclencheur
+#             popup.style.top = (rect.bottom + window.scrollY) + 'px';
+#
+#             // Left: Aligner avec le côté gauche de l'élément déclencheur
+#             popup.style.left = (rect.left + window.scrollX) + 'px';
+#         }
+#     }
+# });