Add another example

examples/__init__.py

@@ -1,5 +1,6 @@
 # LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE 
 
+from examples import app
 from examples import custom
 from examples import helloworld
 from examples import table
@@ -10,4 +11,5 @@
     tictactoe.create(),
     table.create(),
     custom.create(),
+    app.create(),
 ]

examples/app.py

@@ -0,0 +1,33 @@
+import inspect
+import ltk
+import js
+
+def create():
+    handler = ltk.proxy(lambda item: js.alert(item.label))
+    return (
+        ltk.VBox(
+            ltk.MenuBar(
+                ltk.Menu("File",
+                    ltk.MenuItem("➕", "New", "", handler),
+                    ltk.MenuItem("📂", "Open", "Cmd+O", handler),
+                ),
+                ltk.Menu("Edit",
+                    ltk.MenuItem("✂️", "Copy", "Cmd+C", handler),
+                    ltk.MenuItem("📋", "Paste", "Cmd+V", handler),
+                ),
+            ).css("background-color", "lightblue"),
+            ltk.HBox(
+                ltk.VBox(ltk.Text("Left Panel"))
+                    .css("border-right", "2px solid lightgray")
+                    .css("padding", "50px 20px")
+                    .css("background-color", "lightyellow")
+                    .css("width", "20%"),
+                ltk.VBox(ltk.Text("Right Panel"))
+                    .css("padding", "50px 20px")
+                    .css("background-color", "lightgreen")
+                    .css("width", "80%"),
+            ).css("border-top", "2px solid lightgray")
+        )
+        .attr("name", "Application") # example
+        .attr("src", inspect.getsource(create)) # example
+    )

examples/custom.py

@@ -26,6 +26,6 @@ def __init__(self, src, label):
                 .css("margin-top", 20),
             ltk.H4("Tip: drag the card."),
         )
-        .attr("name", "Custom")                 # example
+        .attr("name", "Custom Widget") # example
         .attr("src", inspect.getsource(create)) # example
     )

examples/helloworld.py

@@ -10,6 +10,6 @@ def create():
             .css("padding", "100px 10px")
             .css("background-color", "orange")
             .css("font-size", 42)
-        .attr("name", "Hello World") # example
-        .attr("src", inspect.getsource(create)) # example
+            .attr("name", "Hello World") # example
+            .attr("src", inspect.getsource(create)) # example
     )

index.html

@@ -54,6 +54,7 @@ <h1>The PyScript LTK Kitchen Sink</h1>
             "ltk/ltk.js",
             "ltk/ltk.css",
             "examples/__init__.py",
+            "examples/app.py",
             "examples/helloworld.py",
             "examples/tictactoe.py",
             "examples/tictactoe.css",

ltk/widgets.py

@@ -6,6 +6,7 @@
 from ltk.jquery import jQuery
 from ltk.jquery import proxy
 from ltk.jquery import find
+from ltk.jquery import body
 from ltk.jquery import document
 from ltk.jquery import schedule
 from ltk.jquery import to_js
@@ -313,17 +314,22 @@ def __init__(self, icon, label, shortcut, selected):
             raise ValueError(f"Cannot capture shortcut {shortcut} as the browser won't allow that")
         if shortcut:
             shortcuts[shortcut] = self
+        self.label = label
         self.selected = selected
 
     def select(self, event):
         close_all_menus()
-        self.selected()
+        self.selected(self)
         event.preventDefault()
 
 
-def close_all_menus():
+def close_all_menus(event=None):
+    if event and jQuery(event.target).hasClass("ltk-menulabel"):
+        return
     find(".ltk-menupopup-open").removeClass("ltk-menupopup-open")
 
+body.on("click", proxy(close_all_menus))
+
 
 def _handle_shortcuts():
     def handle_keydown(event):