Remember the selected tab in the url

kitchen.js

@@ -1,14 +1,19 @@
-const runtime = document.location.hash == "#py" ? "py" : "mpy";
+const search = new URLSearchParams(window.location.search);
+const runtime = search.get("runtime") || "mpy";
 const start = new Date().getTime();
 
 function setupRuntime() {
-    document.location.hash = runtime;
+    search.set("runtime", runtime);
     document.write(`<script type="${runtime}" src="kitchen.py" config="kitchen.toml"></script>`)
 }
 
 function toggleRuntime() {
-    document.location.hash = runtime == "mpy" ?  "py" : "mpy";
-    document.location.reload()
+    setSearchParameter("runtime", runtime == "mpy" ?  "py" : "mpy");
+}
+
+function setSearchParameter(key, value) {
+    search.set(key, value)
+    window.location.search = search.toString();
 }
 
 function setupToggle() {

kitchen.py

@@ -24,25 +24,36 @@ def setsource(src):
 ltk.find("#title").append(f" took {js.startTime() / 1000}s to load")
 
 
+tabs = ltk.Tabs(
+    ltk.HBox(
+        example.css("width", "40%"),
+        ltk.VBox(
+            ltk.H2("The source:"),
+            ltk.TextArea(getsource(file))
+                .attr("file", file)
+                .css("height", 800)
+                .css("border-width", 0)
+                .css("font-family", "Courier")
+        )
+        .css("width", "60%")
+        .css("padding-left", 24)
+        .css("border-left", "2px solid lightgray"),
+    ).attr("name", example.attr("name"))
+    for file, example in examples.items
+)
+
+
+def activate_tab(event, ui=None):
+    index = tabs.active()
+    ltk.set_url_parameter("tab", index, False)
+
+tabs.activate(ltk.get_url_parameter("tab") or 0)
+
 ltk.body.append(
     ltk.Div(
-        ltk.Tabs(
-            ltk.HBox(
-                example.css("width", "40%"),
-                ltk.VBox(
-                    ltk.H2("The source:"),
-                    ltk.TextArea(getsource(file))
-                        .attr("file", file)
-                        .css("height", 800)
-                        .css("border-width", 0)
-                        .css("font-family", "Courier")
-                )
-                .css("width", "60%")
-                .css("padding-left", 24)
-                .css("border-left", "2px solid lightgray"),
-            ).attr("name", example.attr("name"))
-            for file, example in examples.items
-        ).css("margin-bottom", 24),
+        tabs.css("margin-bottom", 24)
+            .attr("id", "examples")
+            .on("tabsactivate", ltk.proxy(activate_tab)),
         ltk.Link(
             "https://github.com/laffra/ltk",
             ltk.HBox(
@@ -53,4 +64,5 @@ def setsource(src):
     )
     .css("width", 1300)
     .css("margin", "auto")
-)
+)
+

ltk/jquery.py

@@ -76,12 +76,19 @@ def proxy(function):
 def get_url_parameter(key):
     return js.URLSearchParams.new(js.document.location.search).get(key)
 
-def set_url_parameter(key, value):
-    js.document.location = f"?{key}={value}"
+def set_url_parameter(key, value, reload=True):
+    search = js.URLSearchParams.new(js.window.location.search)
+    search.set(key, value)
+    url = f"{js.window.location.href.split('?')[0]}?{search.toString()}"
+    if reload:
+        js.document.location = url
+    else:
+        push_state(url)
 
 def push_state(url):
     js.history.pushState(None, "", url)
 
+
 injected = set()
 
 def inject(modulepath, *files):

ltk/widgets.py

@@ -21,6 +21,7 @@
 
 
 class Widget(object):
+    """Base class for LTK widgets."""
     classes = []
     instances = {}
     element = None
@@ -35,11 +36,28 @@ def __init__(self, *args):
         self.handle_css(args)
 
     def handle_css(self, args):
+        """Apply CSS styles passed in the args to the widget.
+
+        Iterates through the args and checks for any that are dicts, 
+        treating them as CSS style definitions to apply to the widget.
+        """
         for arg in filter(lambda arg: isinstance(arg, dict), args):
             for key, value in arg.items():
                 self.css(key, value)
 
     def flatten(self, children):
+        """Flatten a list of child widgets into a flat list.
+
+        Arguments:
+            children (list): A list of child widgets.
+            Each child can be a Widget, a jQuery element. 
+            Also allowed is a list or a generator of widgets.
+            Finally, if one of the children is a dict, it is used to set CSS values on the receiver
+
+        Returns:
+            list: A flat list containing the child widgets and any
+                grandchildren widgets.
+        """
         result = []
         for child in children:
             if isinstance(child, dict):
@@ -59,32 +77,38 @@ def __getattr__(self, name):
 
 
 class HBox(Widget):
-    """ HBox is a widget that lays out its child widgets horizontally """
+    """ Lays out its child widgets horizontally """
     classes = [ "ltk-hbox" ]
 
 
 class VBox(Widget):
+    """ Lays out its child widgets vertically """
     classes = [ "ltk-vbox" ]
 
 
 class Div(Widget):
+    """ Wraps a <div> """
     classes = [ "ltk-div" ]
 
 
 class Container(Widget):
+    """ Wraps a <div> """
     classes = [ "ltk-container" ]
 
 
 class Card(Container):
+    """ A container with special styling looking like a card """
     classes = [ "ltk-card" ]
 
 
 class Preformatted(Widget):
+    """ Wraps an HTML <pre> element """
     classes = [ "ltk-pre" ]
     tag = "pre"
 
 
 class Text(Widget):
+    """ A <div> to hold text """
     classes = [ "ltk-text" ]
 
     def __init__(self, html="", style=DEFAULT_CSS):
@@ -93,6 +117,7 @@ def __init__(self, html="", style=DEFAULT_CSS):
 
 
 class Input(Widget):
+    """ Wraps an <input> """
     classes = [ "ltk-input" ]
     tag = "input"
 
@@ -102,6 +127,7 @@ def __init__(self, value="", style=DEFAULT_CSS):
 
 
 class Button(Widget):
+    """ Wraps <button> """
     classes = [ "ltk-button" ]
     tag = "button"
 
@@ -111,6 +137,7 @@ def __init__(self, label, click, style=DEFAULT_CSS):
 
 
 class Link(Text):
+    """ Wraps an <a> """
     classes = [ "ltk-a" ]
     tag = "a" 
 
@@ -120,41 +147,49 @@ def __init__(self, href, *items):
 
 
 class H1(Text):
+    """ Wraps an <h1> """
     classes = [ "ltk-h1" ]
     tag = "h1"
 
 
 class H2(Text):
+    """ Wraps an <h2> """
     classes = [ "ltk-h2" ]
     tag = "h2"
 
 
 class H3(Text):
+    """ Wraps an <h3> """
     classes = [ "ltk-h3" ]
     tag = "h3"
 
 
 class H4(Text):
+    """ Wraps an <h4> """
     classes = [ "ltk-h4" ]
     tag = "h4"
 
 
 class OL(Widget):
+    """ Wraps an <ol> """
     classes = [ "ltk-ol" ]
     tag = "ol"
 
 
 class UL(Widget):
+    """ Wraps a <ul> """
     classes = [ "ltk-ul" ]
     tag = "ul"
 
 
 class LI(Widget):
+    """ Wraps a <li> """
     classes = [ "ltk-li" ]
     tag = "li"
 
 
 class Tabs(Widget):
+    """ Wraps a jQueryUI tabs """
     classes = [ "ltk-tabs" ]
     tag = "div"
     count = 0
@@ -176,9 +211,23 @@ def add_tab(self, tab):
             LI().append(Link(f"#{tab_id}").text(tab.attr("name")))
         )
         self.append(Div(tab).attr("id", tab_id))
+
+    def active(self):
+        return self.element.tabs("option", "active")
+
+    def activate(self, index):
+        self.element.tabs("option", "active", index)
+
+    def get_tab(self, index):
+        return self.element.find(f"li:nth-child({index + 1})")
+
+    def get_panel(self, index):
+        return self.element.children().eq(index + 1)
+
 
 
 class File(Widget):
+    """ Wraps a <input type=file> """
     classes = [ "ltk-file" ]
     tag = "input"
 
@@ -188,6 +237,7 @@ def __init__(self, style=DEFAULT_CSS):
 
 
 class Table(Widget):
+    """ Wraps a <table> """
     classes = [ "ltk-table" ]
     tag = "table"
 
@@ -209,26 +259,32 @@ def set(self, column, row, value):
 
 
 class TableRow(Widget):
+    """ Wraps a <tr> """
     classes = [ "ltk-tr" ]
     tag = "tr"
 
 
 class TableHeader(Text):
+    """ Wraps a <th> """
     classes = [ "ltk-th" ]
     tag = "th"
 
 
 class TableData(Text):
+    """ Wraps a <td> """
     classes = [ "ltk-td" ]
     tag = "td"
 
 
 class TextArea(Text):
+    """ Wraps a <textarea> """
+    classes = [ "ltk-td" ]
     classes = [ "ltk-textarea" ]
     tag = "textarea"
 
 
 class Code(Widget):
+    """ Wraps a CodeMirror instance """
     classes = [ "ltk-code" ]
     tag = "textarea"
 
@@ -247,6 +303,7 @@ def activate(self, language, code):
 
 
 class Image(Widget):
+    """ Wraps an <img> """
     classes = [ "ltk-image" ]
     tag = "img"
 
@@ -257,10 +314,12 @@ def __init__(self, src, style=DEFAULT_CSS):
 
 
 class MenuBar(HBox):
+    """ Creates a horizontal menubar """
     classes = ["ltk-menubar"]
 
 
 class MenuLabel(Widget):
+    """ Creates a label used in menus """
     classes = ["ltk-menulabel"]
 
     def __init__(self, label, style=DEFAULT_CSS):
@@ -269,6 +328,7 @@ def __init__(self, label, style=DEFAULT_CSS):
 
 
 class Menu(Widget):
+    """ Creates a menu """
     classes = ["ltk-menu"]
 
     def __init__(self, label, *items, style=DEFAULT_CSS):
@@ -284,17 +344,20 @@ def replace_other(self, event):
             self.show(event)
 
     def show(self, event):
+        """ Render the menu visible """
         close_all_menus()
         self.popup.show(self.element)
         event.preventDefault()
         return self
 
 
 class Popup(Widget):
+    """ Wraps a div that is positioned on top of all other widgets """
     classes = [ "popup" ]
 
 
 class MenuPopup(Popup):
+    """ Creates a menu that is a popup """
     classes = [ "ltk-menupopup" ]
 
     def show(self, element):
@@ -309,6 +372,7 @@ def show(self, element):
 
 
 class MenuItem(Widget):
+    """ Creates a menuitem used inside a menu """
     classes = [ "ltk-menuitem" ]
 
     def __init__(self, icon, label, shortcut, selected, style=DEFAULT_CSS):