Move runtime selector to the top

pyscript · Nov 21, 2023 · f9bd537 · f9bd537
1 parent 4a08709
commit f9bd537
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/examples/inputs.py b/examples/inputs.py
@@ -32,20 +32,36 @@ def button_clicked(event):
     def loveit(event):
         feedback(f"checkbox: {ltk.find('#love').prop('checked')}", "black")
 
-    @ltk.callback
-    def set_runtime(event):
-        chosen = ltk.jQuery(event.target).attr("value")
-        if chosen != runtime:
-            js.setSearchParameter("runtime", chosen)
-
     @ltk.callback
     def change(event):
         element = ltk.jQuery(event.target)
         kind = element.prop("type")
         feedback(f"Changed {kind}: {element.val()}", "purple")
 
+    @ltk.callback
+    def set_runtime(event):
+        chosen = ltk.jQuery(event.target).attr("value")
+        if chosen != runtime:
+            js.setSearchParameter("runtime", chosen)
 
     widgets = [
+        ltk.VBox(
+            ltk.Text("Choose your favorite runtime:"),
+            ltk.RadioGroup(
+                ltk.Span(
+                    ltk.RadioButton(runtime == "mpy")
+                        .attr("name", "runtime")
+                        .attr("id", "mpy")
+                        .attr("value", "mpy"),
+                    ltk.Label("MicroPython").attr("for", "mpy")
+                ),
+                ltk.Label("PyOdide",
+                    ltk.RadioButton(runtime == "py")
+                        .attr("name", "runtime")
+                        .attr("value", "py")
+                ),
+            ).on("change", set_runtime)
+        ),
         ltk.Button("Click me!", button_clicked, {
             "color": "white",
             "background-color": "red",
@@ -66,23 +82,6 @@ def change(event):
         ltk.File().on("change", change),
         ltk.ColorPicker().on("change", change),
         ltk.DatePicker().on("change", change),
-        ltk.VBox(
-            ltk.Text("Choose your favorite runtime:"),
-            ltk.RadioGroup(
-                ltk.Span(
-                    ltk.RadioButton(runtime == "mpy")
-                        .attr("name", "runtime")
-                        .attr("id", "mpy")
-                        .attr("value", "mpy"),
-                    ltk.Label("MicroPython").attr("for", "mpy")
-                ),
-                ltk.Label("PyOdide",
-                    ltk.RadioButton(runtime == "py")
-                        .attr("name", "runtime")
-                        .attr("value", "py")
-                ),
-            ).on("change", set_runtime)
-        ),
         ltk.Input("This is an input. Change me!", {
             "width": 180,
             "padding": 10,